/*
 * ============================================================================
 * GosiliLab Design System v2 — BASE
 * ----------------------------------------------------------------------------
 * ریست ملایم، پایه‌ی تایپوگرافی و کمک‌کلاس‌های متنی.
 * تمام مقادیر از 01-tokens.css (لایه‌ی Semantic) می‌آیند — هیچ مقدار خام.
 *
 * قواعد دامنه (scope):
 *   - ریست عناصر فقط داخل .gl2-root اعمال می‌شود تا با استایل قالب وردپرس و
 *     صفحات بازطراحی‌نشده تداخل نکند. ریشه‌ی هر صفحه‌ی v2 باید .gl2-root باشد.
 *   - کمک‌کلاس‌های .gl2-text-* و .gl2-sr-only کلاس‌محور و opt-in هستند
 *     (هم‌راستا با 03-components.css) و scope نمی‌شوند.
 *
 * حالت تیره به‌صورت خودکار از طریق توکن‌ها پشتیبانی می‌شود؛ این لایه نیازی به
 * قاعده‌ی اختصاصی تیره ندارد.
 * ============================================================================
 */

/* ============================================================================
 * ۱. ریست جعبه‌بندی — scoped
 * ========================================================================= */
.gl2-root,
.gl2-root *,
.gl2-root *::before,
.gl2-root *::after {
    box-sizing: border-box;
}

/* ============================================================================
 * ۲. ریشه‌ی صفحه — تایپوگرافی پایه (پیش‌تنظیم body)
 * ========================================================================= */
.gl2-root {
    font-family: var(--gl2-font);
    font-size: var(--gl2-text-body-size);
    font-weight: var(--gl2-text-body-fw);
    line-height: var(--gl2-text-body-lh);
    color: var(--gl2-text);
    background-color: var(--gl2-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    direction: rtl;
    text-align: right;
}

/* ============================================================================
 * ۳. تعامل — هایلایت لمس و حلقه‌ی فوکوس
 * ----------------------------------------------------------------------------
 * حذف مربع هایلایت موبایل هنگام ضربه، و نمایش حلقه‌ی فوکوس فقط هنگام ناوبری
 * با کیبورد (:focus-visible) — نه پس از کلیک ماوس.
 * ========================================================================= */
.gl2-root,
.gl2-root a,
.gl2-root button,
.gl2-root input,
.gl2-root textarea,
.gl2-root select,
.gl2-root label,
.gl2-root [role="button"] {
    -webkit-tap-highlight-color: transparent;
}

.gl2-root a:focus:not(:focus-visible),
.gl2-root button:focus:not(:focus-visible),
.gl2-root [role="button"]:focus:not(:focus-visible) {
    outline: none;
}

.gl2-root a:focus-visible,
.gl2-root button:focus-visible,
.gl2-root input:focus-visible,
.gl2-root textarea:focus-visible,
.gl2-root select:focus-visible,
.gl2-root [role="button"]:focus-visible,
.gl2-root [tabindex]:focus-visible {
    outline: 2px solid var(--gl2-focus-outline);
    outline-offset: 2px;
    border-radius: var(--gl2-radius-xs);
}

.gl2-root a,
.gl2-root button {
    transition: background var(--gl2-dur) var(--gl2-ease),
                color var(--gl2-dur) var(--gl2-ease),
                border-color var(--gl2-dur) var(--gl2-ease),
                box-shadow var(--gl2-dur) var(--gl2-ease),
                opacity var(--gl2-dur) var(--gl2-ease);
}

/* ============================================================================
 * ۴. عناصر متنی — ریست margin و مپ سرتیترها به پیش‌تنظیم‌های توکن
 * ========================================================================= */
.gl2-root h1,
.gl2-root h2,
.gl2-root h3,
.gl2-root h4,
.gl2-root h5,
.gl2-root h6,
.gl2-root p,
.gl2-root figure {
    margin: 0;
}

.gl2-root h1 {
    font-size:      var(--gl2-text-h1-size);
    font-weight:    var(--gl2-text-h1-fw);
    line-height:    var(--gl2-text-h1-lh);
    letter-spacing: var(--gl2-text-h1-ls);
}
.gl2-root h2 {
    font-size:      var(--gl2-text-h2-size);
    font-weight:    var(--gl2-text-h2-fw);
    line-height:    var(--gl2-text-h2-lh);
    letter-spacing: var(--gl2-text-h2-ls);
}
.gl2-root h3 {
    font-size:   var(--gl2-text-h3-size);
    font-weight: var(--gl2-text-h3-fw);
    line-height: var(--gl2-text-h3-lh);
}
.gl2-root h4 {
    font-size:   var(--gl2-text-h4-size);
    font-weight: var(--gl2-text-h4-fw);
    line-height: var(--gl2-text-h4-lh);
}

/* ============================================================================
 * ۵. لینک
 * ========================================================================= */
.gl2-root a {
    color: var(--gl2-link);
    text-decoration: none;
}
.gl2-root a:hover {
    color: var(--gl2-link-hover);
}

/* ============================================================================
 * ۶. رسانه و عناصر فرم
 * ========================================================================= */
.gl2-root img,
.gl2-root svg {
    max-width: 100%;
    display: block;
}

.gl2-root button {
    font-family: inherit;
    cursor: pointer;
}

.gl2-root input,
.gl2-root textarea,
.gl2-root select {
    font-family: inherit;
}

/* ============================================================================
 * ۷. احترام به ترجیح کاهش حرکت کاربر
 * ----------------------------------------------------------------------------
 * 6g-6 EXEMPTION (a11y): این بلوک عمداً !important نگه می‌دارد. ریست استاندارد
 * WCAG است و باید بر هر animation/transition کامپوننت یا اینلاین به‌صورت سراسری
 * غلبه کند؛ با specificity قابل بازتولید مطمئن نیست.
 * ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    .gl2-root *,
    .gl2-root *::before,
    .gl2-root *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================================
 * ۸. کمک‌کلاس‌های متنی — .gl2-text-*
 * ----------------------------------------------------------------------------
 * مصرف مستقیم پیش‌تنظیم‌های تایپوگرافی توکن (بخش ۲.۸). کلاس‌محور و opt-in:
 * روی هر عنصری قابل اعمال‌اند، مستقل از تگ. رنگ را تغییر نمی‌دهند.
 * ========================================================================= */
.gl2-text-display {
    font-size:      var(--gl2-text-display-size);
    font-weight:    var(--gl2-text-display-fw);
    line-height:    var(--gl2-text-display-lh);
    letter-spacing: var(--gl2-text-display-ls);
}
.gl2-text-h1 {
    font-size:      var(--gl2-text-h1-size);
    font-weight:    var(--gl2-text-h1-fw);
    line-height:    var(--gl2-text-h1-lh);
    letter-spacing: var(--gl2-text-h1-ls);
}
.gl2-text-h2 {
    font-size:      var(--gl2-text-h2-size);
    font-weight:    var(--gl2-text-h2-fw);
    line-height:    var(--gl2-text-h2-lh);
    letter-spacing: var(--gl2-text-h2-ls);
}
.gl2-text-h3 {
    font-size:   var(--gl2-text-h3-size);
    font-weight: var(--gl2-text-h3-fw);
    line-height: var(--gl2-text-h3-lh);
}
.gl2-text-h4 {
    font-size:   var(--gl2-text-h4-size);
    font-weight: var(--gl2-text-h4-fw);
    line-height: var(--gl2-text-h4-lh);
}
.gl2-text-body {
    font-size:   var(--gl2-text-body-size);
    font-weight: var(--gl2-text-body-fw);
    line-height: var(--gl2-text-body-lh);
}
.gl2-text-body-sm {
    font-size:   var(--gl2-text-body-sm-size);
    line-height: var(--gl2-text-body-sm-lh);
}
.gl2-text-caption {
    font-size:   var(--gl2-text-caption-size);
    font-weight: var(--gl2-text-caption-fw);
    line-height: var(--gl2-text-caption-lh);
}
.gl2-text-overline {
    font-size:   var(--gl2-text-overline-size);
    font-weight: var(--gl2-text-overline-fw);
    line-height: var(--gl2-text-overline-lh);
}

/* ============================================================================
 * ۹. کمک‌کلاس دسترسی‌پذیری — متن مخصوص صفحه‌خوان
 * ========================================================================= */
.gl2-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ============================================================================
 * ۱۰. Container — عرض بیشینه، وسط‌چین، حاشیه‌ی داخلی منطقی
 * ----------------------------------------------------------------------------
 * کلاس‌محور و opt-in (scope نمی‌شود). عرض‌ها از توکن‌های بخش ۱.۱۴ می‌آیند.
 * padding-inline منطقی است → در RTL و LTR درست کار می‌کند.
 * ========================================================================= */
.gl2-container,
.gl2-container-md,
.gl2-container-sm,
.gl2-container-fluid {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--gl2-grid-gutter);
}

.gl2-container       { max-width: var(--gl2-container); }
.gl2-container-md    { max-width: var(--gl2-container-md); }
.gl2-container-sm    { max-width: var(--gl2-container-sm); }
.gl2-container-fluid { max-width: 100%; }

/* زیر breakpoint md → حاشیه‌ی داخلی کوچک‌تر */
@media (max-width: 767.98px) {
    .gl2-container,
    .gl2-container-md,
    .gl2-container-sm,
    .gl2-container-fluid {
        padding-inline: var(--gl2-grid-gutter-sm);
    }
}

/* ============================================================================
 * ۱۱. گرید ۱۲ ستونه — مبتنی بر CSS Grid
 * ----------------------------------------------------------------------------
 * .gl2-row        → ظرف گرید: ۱۲ شیار مساوی + فاصله‌ی gutter
 * .gl2-row-tight  → فاصله‌ی کوچک‌تر | .gl2-row-flush → بدون فاصله
 * .gl2-col        → پیش‌فرض تمام‌عرض (۱۲ شیار)
 * .gl2-col-N      → پهنا = N شیار (۱ تا ۱۲) — همه‌ی اندازه‌ها
 * .gl2-col-md-N   → بازتعریف پهنا از breakpoint md (≥ ۷۶۸px)
 * .gl2-col-lg-N   → بازتعریف پهنا از breakpoint lg (≥ ۱۰۲۴px)
 * .gl2-offset-N   → آغاز ستون از خط شبکه‌ی N+1 (md/lg هم دارد، offset-*-0 = ریست)
 * .gl2-order-N    → ترتیب نمایش | order-first / order-last
 * ----------------------------------------------------------------------------
 * طراحی mobile-first؛ کلاس پایه روی همه اعمال، md/lg با min-width بازتعریف.
 * RTL: جریان ستون‌ها خودکار از راست به چپ (direction از .gl2-root).
 * ترکیب‌پذیری: col فقط grid-column-end (span) و offset فقط grid-column-start
 *              (خط عددی) را ست می‌کند → هیچ تداخلی رخ نمی‌دهد.
 * توجه: offset از خط مطلق شبکه استفاده می‌کند؛ برای ستون آغازین/تنها مناسب است.
 * ========================================================================= */
.gl2-row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));  /* = --gl2-grid-columns */
    gap: var(--gl2-grid-gutter);
}

.gl2-row-tight { gap: var(--gl2-grid-gutter-sm); }
.gl2-row-flush { gap: 0; }

/* ستون پایه — اگر شماره‌ای داده نشود، تمام‌عرض */
.gl2-col { grid-column-end: span 12; }

/* --- پهنای ستون: پایه (همه‌ی اندازه‌ها) --- */
.gl2-col-1   { grid-column-end: span 1; }
.gl2-col-2   { grid-column-end: span 2; }
.gl2-col-3   { grid-column-end: span 3; }
.gl2-col-4   { grid-column-end: span 4; }
.gl2-col-5   { grid-column-end: span 5; }
.gl2-col-6   { grid-column-end: span 6; }
.gl2-col-7   { grid-column-end: span 7; }
.gl2-col-8   { grid-column-end: span 8; }
.gl2-col-9   { grid-column-end: span 9; }
.gl2-col-10  { grid-column-end: span 10; }
.gl2-col-11  { grid-column-end: span 11; }
.gl2-col-12  { grid-column-end: span 12; }

/* --- جابه‌جایی آغازین: پایه — offset-N یعنی آغاز از خط N+1 --- */
.gl2-offset-0   { grid-column-start: auto; }
.gl2-offset-1   { grid-column-start: 2; }
.gl2-offset-2   { grid-column-start: 3; }
.gl2-offset-3   { grid-column-start: 4; }
.gl2-offset-4   { grid-column-start: 5; }
.gl2-offset-5   { grid-column-start: 6; }
.gl2-offset-6   { grid-column-start: 7; }
.gl2-offset-7   { grid-column-start: 8; }
.gl2-offset-8   { grid-column-start: 9; }
.gl2-offset-9   { grid-column-start: 10; }
.gl2-offset-10  { grid-column-start: 11; }
.gl2-offset-11  { grid-column-start: 12; }

/* --- ترتیب نمایش --- */
.gl2-order-first { order: -1; }
.gl2-order-last  { order: 9999; }
.gl2-order-1  { order: 1; }
.gl2-order-2  { order: 2; }
.gl2-order-3  { order: 3; }
.gl2-order-4  { order: 4; }
.gl2-order-5  { order: 5; }
.gl2-order-6  { order: 6; }
.gl2-order-7  { order: 7; }
.gl2-order-8  { order: 8; }
.gl2-order-9  { order: 9; }
.gl2-order-10 { order: 10; }
.gl2-order-11 { order: 11; }
.gl2-order-12 { order: 12; }

/* --- breakpoint md — ≥ ۷۶۸px (= --gl2-breakpoint-md) --- */
@media (min-width: 768px) {
    .gl2-col-md-1   { grid-column-end: span 1; }
    .gl2-col-md-2   { grid-column-end: span 2; }
    .gl2-col-md-3   { grid-column-end: span 3; }
    .gl2-col-md-4   { grid-column-end: span 4; }
    .gl2-col-md-5   { grid-column-end: span 5; }
    .gl2-col-md-6   { grid-column-end: span 6; }
    .gl2-col-md-7   { grid-column-end: span 7; }
    .gl2-col-md-8   { grid-column-end: span 8; }
    .gl2-col-md-9   { grid-column-end: span 9; }
    .gl2-col-md-10  { grid-column-end: span 10; }
    .gl2-col-md-11  { grid-column-end: span 11; }
    .gl2-col-md-12  { grid-column-end: span 12; }

    .gl2-offset-md-0   { grid-column-start: auto; }
    .gl2-offset-md-1   { grid-column-start: 2; }
    .gl2-offset-md-2   { grid-column-start: 3; }
    .gl2-offset-md-3   { grid-column-start: 4; }
    .gl2-offset-md-4   { grid-column-start: 5; }
    .gl2-offset-md-5   { grid-column-start: 6; }
    .gl2-offset-md-6   { grid-column-start: 7; }
    .gl2-offset-md-7   { grid-column-start: 8; }
    .gl2-offset-md-8   { grid-column-start: 9; }
    .gl2-offset-md-9   { grid-column-start: 10; }
    .gl2-offset-md-10  { grid-column-start: 11; }
    .gl2-offset-md-11  { grid-column-start: 12; }
}

/* --- breakpoint lg — ≥ ۱۰۲۴px (= --gl2-breakpoint-lg) --- */
@media (min-width: 1024px) {
    .gl2-col-lg-1   { grid-column-end: span 1; }
    .gl2-col-lg-2   { grid-column-end: span 2; }
    .gl2-col-lg-3   { grid-column-end: span 3; }
    .gl2-col-lg-4   { grid-column-end: span 4; }
    .gl2-col-lg-5   { grid-column-end: span 5; }
    .gl2-col-lg-6   { grid-column-end: span 6; }
    .gl2-col-lg-7   { grid-column-end: span 7; }
    .gl2-col-lg-8   { grid-column-end: span 8; }
    .gl2-col-lg-9   { grid-column-end: span 9; }
    .gl2-col-lg-10  { grid-column-end: span 10; }
    .gl2-col-lg-11  { grid-column-end: span 11; }
    .gl2-col-lg-12  { grid-column-end: span 12; }

    .gl2-offset-lg-0   { grid-column-start: auto; }
    .gl2-offset-lg-1   { grid-column-start: 2; }
    .gl2-offset-lg-2   { grid-column-start: 3; }
    .gl2-offset-lg-3   { grid-column-start: 4; }
    .gl2-offset-lg-4   { grid-column-start: 5; }
    .gl2-offset-lg-5   { grid-column-start: 6; }
    .gl2-offset-lg-6   { grid-column-start: 7; }
    .gl2-offset-lg-7   { grid-column-start: 8; }
    .gl2-offset-lg-8   { grid-column-start: 9; }
    .gl2-offset-lg-9   { grid-column-start: 10; }
    .gl2-offset-lg-10  { grid-column-start: 11; }
    .gl2-offset-lg-11  { grid-column-start: 12; }
}


/* ============================================================================
 * ۱۲. کمک‌کلاس‌های Flexbox
 * ----------------------------------------------------------------------------
 * کلاس‌محور و opt-in. جهت‌ها در RTL خودکار معکوس می‌شوند چون direction از
 * .gl2-root می‌آید.
 * R3-b (v2.4.96): یوتیلیتی‌های display (gl2-d-*) حذف شدند — صفر مصرف‌کننده
 * در کل پروژه داشتند (کد مرده) و تنها حامل !important خارج از استثنای a11y بودند.
 * ========================================================================= */
/* --- جهت چیدمان (flex-direction) --- */
.gl2-flex-row           { flex-direction: row; }
.gl2-flex-row-reverse   { flex-direction: row-reverse; }
.gl2-flex-col           { flex-direction: column; }
.gl2-flex-col-reverse   { flex-direction: column-reverse; }

/* --- شکست خط (flex-wrap) --- */
.gl2-flex-wrap          { flex-wrap: wrap; }
.gl2-flex-nowrap        { flex-wrap: nowrap; }
.gl2-flex-wrap-reverse  { flex-wrap: wrap-reverse; }

/* --- توزیع در محور اصلی (justify-content) --- */
.gl2-justify-start    { justify-content: flex-start; }
.gl2-justify-end      { justify-content: flex-end; }
.gl2-justify-center   { justify-content: center; }
.gl2-justify-between  { justify-content: space-between; }
.gl2-justify-around   { justify-content: space-around; }
.gl2-justify-evenly   { justify-content: space-evenly; }

/* --- ترازبندی در محور عرضی (align-items) --- */
.gl2-items-start     { align-items: flex-start; }
.gl2-items-end       { align-items: flex-end; }
.gl2-items-center    { align-items: center; }
.gl2-items-baseline  { align-items: baseline; }
.gl2-items-stretch   { align-items: stretch; }

/* --- ترازبندی تکی آیتم (align-self) --- */
.gl2-self-auto     { align-self: auto; }
.gl2-self-start    { align-self: flex-start; }
.gl2-self-end      { align-self: flex-end; }
.gl2-self-center   { align-self: center; }
.gl2-self-stretch  { align-self: stretch; }

/* --- رشد/کوچک‌شدن آیتم --- */
.gl2-flex-1       { flex: 1 1 0%; }
.gl2-flex-auto    { flex: 1 1 auto; }
.gl2-flex-initial { flex: 0 1 auto; }
.gl2-flex-none    { flex: none; }
.gl2-grow-0       { flex-grow: 0; }
.gl2-grow-1       { flex-grow: 1; }
.gl2-shrink-0     { flex-shrink: 0; }
.gl2-shrink-1     { flex-shrink: 1; }

/* ============================================================================
 * ۱۳. کمک‌کلاس‌های Gap — برای flex و grid
 * ----------------------------------------------------------------------------
 * مقادیر از مقیاس فاصله‌ی توکن (۱.۱۰) می‌آیند. gap = هر دو محور،
 * gap-x = column-gap (افقی)، gap-y = row-gap (عمودی).
 * ========================================================================= */
.gl2-gap-0   { gap: 0; }
.gl2-gap-1   { gap: var(--gl2-space-1); }
.gl2-gap-2   { gap: var(--gl2-space-2); }
.gl2-gap-3   { gap: var(--gl2-space-3); }
.gl2-gap-4   { gap: var(--gl2-space-4); }
.gl2-gap-5   { gap: var(--gl2-space-5); }
.gl2-gap-6   { gap: var(--gl2-space-6); }
.gl2-gap-7   { gap: var(--gl2-space-7); }
.gl2-gap-8   { gap: var(--gl2-space-8); }

.gl2-gap-x-0 { column-gap: 0; }
.gl2-gap-x-1 { column-gap: var(--gl2-space-1); }
.gl2-gap-x-2 { column-gap: var(--gl2-space-2); }
.gl2-gap-x-3 { column-gap: var(--gl2-space-3); }
.gl2-gap-x-4 { column-gap: var(--gl2-space-4); }
.gl2-gap-x-5 { column-gap: var(--gl2-space-5); }
.gl2-gap-x-6 { column-gap: var(--gl2-space-6); }
.gl2-gap-x-7 { column-gap: var(--gl2-space-7); }
.gl2-gap-x-8 { column-gap: var(--gl2-space-8); }

.gl2-gap-y-0 { row-gap: 0; }
.gl2-gap-y-1 { row-gap: var(--gl2-space-1); }
.gl2-gap-y-2 { row-gap: var(--gl2-space-2); }
.gl2-gap-y-3 { row-gap: var(--gl2-space-3); }
.gl2-gap-y-4 { row-gap: var(--gl2-space-4); }
.gl2-gap-y-5 { row-gap: var(--gl2-space-5); }
.gl2-gap-y-6 { row-gap: var(--gl2-space-6); }
.gl2-gap-y-7 { row-gap: var(--gl2-space-7); }
.gl2-gap-y-8 { row-gap: var(--gl2-space-8); }