/* ============================================================
   تجربه موبایل — سربرگ، منوی کشویی پایین، و نوار اقدام
   ------------------------------------------------------------
   چرا این‌طور:
   • روی گوشی، بالای صفحه دورترین نقطه از شست است. پس کارهای
     اصلی (تماس، واتساپ، مشاوره) به نوار پایین منتقل شده‌اند.
   • منو به‌جای کشوی کناری، «bottom sheet» است — الگوی امروزی
     iOS و اندروید که با شست باز و بسته می‌شود.
   • سربرگ بالا فقط هویت را نگه می‌دارد و کوتاه است.
   ============================================================ */

/* ============ سربرگ ============ */

.logo-icon {
    display: inline-grid;
    place-items: center;
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
    min-width: 0;
}

.logo-role {
    font-size: 12px;
    color: var(--medium-gray);
    white-space: nowrap;
}

/* دکمه منو: یک دکمه مربعی تمیز ۴۴×۴۴ با آیکن سه‌خط */
.hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--teal-bg);
    border: 1px solid color-mix(in srgb, var(--teal) 22%, transparent);
    border-radius: 12px;
    padding: 0;
    cursor: pointer;
    color: var(--teal-dark);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.hamburger:active { background: var(--teal-bg-hover); }

.hamburger-bars {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    width: 18px;
}

.hamburger-bars span {
    display: block;
    height: 2px;
    width: 100%;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s;
}

.hamburger[aria-expanded="true"] .hamburger-bars span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.hamburger[aria-expanded="true"] .hamburger-bars span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] .hamburger-bars span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ============ زیرمنوی «حوزه‌های تخصصی» ============ */

.nav-has-sub { position: relative; }

.nav-sub-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    padding: 0;
}

.nav-chevron {
    display: inline-flex;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-sub-toggle[aria-expanded="true"] .nav-chevron { transform: rotate(-90deg); }

/* --- دسکتاپ: منوی کشویی شناور --- */
@media (min-width: 769px) {
    .nav-sub {
        position: absolute;
        top: calc(100% + 14px);
        inset-inline-start: 50%;
        transform: translateX(50%) translateY(-8px);
        min-width: 250px;
        background: var(--white);
        border: 1px solid var(--light-gray);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        padding: 8px;
        list-style: none;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
        z-index: 1200;
    }

    /* پل نامرئی تا وقتی ماوس از دکمه به منو می‌رود، منو بسته نشود */
    .nav-sub::before {
        content: '';
        position: absolute;
        top: -16px;
        inset-inline: 0;
        height: 16px;
    }

    /* :focus-within به‌تنهایی کافی نیست: وقتی زیرمنو visibility:hidden است،
       لینک‌های داخلش اصلاً فوکوس‌پذیر نیستند، پس کاربر کیبورد هرگز
       نمی‌توانست بازش کند. کلید باز کردن، همان دکمه است که با
       aria-expanded وضعیتش را اعلام می‌کند. */
    /* :focus-within عمداً اینجا نیست: با آن، همین‌که خودِ دکمه فوکوس
       می‌گرفت منو باز می‌شد و دیگر با Escape بسته نمی‌شد. لینک‌های
       داخل منو هم فقط وقتی visible است فوکوس‌پذیرند، پس aria-expanded
       به‌تنهایی هم برای ماندن منو کافی است. */
    .nav-has-sub:hover .nav-sub,
    .nav-sub-toggle[aria-expanded="true"] + .nav-sub {
        opacity: 1;
        visibility: visible;
        transform: translateX(50%) translateY(0);
    }

    .nav-sub li { list-style: none; }

    .nav-sub a {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 10px 13px;
        border-radius: var(--radius-sm);
        font-size: 14px;
        font-weight: 600;
        color: var(--navy);
        white-space: nowrap;
        transition: background 0.18s ease, color 0.18s ease;
    }

    .nav-sub a .icon { color: var(--teal); }

    .nav-sub a:hover,
    .nav-sub a.active {
        background: var(--teal-bg);
        color: var(--teal-dark);
    }

    .nav-has-sub.active-parent > .nav-sub-toggle { color: var(--teal-dark); }

    .nav-sheet-handle,
    .nav-sheet-head,
    .nav-sheet-contact,
    .mobile-bar { display: none; }
}

/* ============================================================
   موبایل — منو به شکل bottom sheet
   ============================================================ */
@media (max-width: 768px) {

    /* --- مهم ---
       backdrop-filter روی هدر، برای فرزندانِ position:fixed یک
       «containing block» می‌سازد؛ نتیجه اینکه کشوی منو به‌جای پایینِ
       صفحه، به پایینِ خودِ هدر می‌چسبید. روی موبایل این افکت تزئینی
       را برمی‌داریم تا مختصات fixed دوباره نسبت به viewport باشد. */
    .main-header {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--white);
    }

    /* روی موبایل منو از نوار پایین باز می‌شود، پس دکمه بالای صفحه
       حذف می‌شود تا سربرگ فقط لوگو باشد و «منو» دوبار تکرار نشود. */
    .hamburger { display: none; }

    .logo-icon { width: 38px; height: 38px; font-size: 17px; }
    .logo-name { font-size: 16.5px; }
    .logo-role { font-size: 11px; }

    .main-header.is-compact .logo-role { display: none; }

    /* --- خود کشو --- */
    .main-nav {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        top: auto;
        right: auto;
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 88vh;
        max-height: 88dvh;
        background: var(--white);
        border-radius: 22px 22px 0 0;
        box-shadow: 0 -14px 44px rgba(15, 26, 48, 0.28);
        z-index: 1200;
        padding: 10px 0 calc(14px + env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        display: block;
        transform: translateY(100%);
        visibility: hidden;
        transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.34s;
    }

    .main-nav.open {
        transform: translateY(0);
        visibility: visible;
    }

    .nav-sheet-handle {
        display: block;
        width: 42px;
        height: 4px;
        border-radius: 4px;
        background: var(--light-gray);
        margin: 4px auto 10px;
    }

    .nav-sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 18px 12px;
        margin-bottom: 6px;
        border-bottom: 1px solid var(--light-gray);
        font-weight: 800;
        font-size: 15px;
        color: var(--navy);
    }

    .nav-close {
        width: 36px;
        height: 36px;
        display: grid;
        place-items: center;
        background: var(--off-white);
        border: 1px solid var(--light-gray);
        border-radius: 50%;
        color: var(--medium-gray);
        cursor: pointer;
    }

    .nav-close:active { background: var(--light-gray); }

    .main-nav::before { content: none; }

    .nav-links {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0 12px;
    }

    .nav-links li { list-style: none; }

    .nav-links li a,
    .nav-sub-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 50px;
        padding: 13px 14px;
        border-radius: var(--radius-md);
        border-bottom: 1px solid var(--light-gray);
        font-size: 15px;
        font-weight: 600;
        color: var(--navy);
        line-height: 1.6;
        white-space: normal;
        text-align: start;
    }

    .nav-links > li:last-child a { border-bottom: none; }

    .nav-links li a.active {
        background: var(--teal-bg);
        color: var(--teal-dark);
    }

    .nav-links li a.active::after { display: none; }

    /* --- زیرمنو: آکاردئون --- */
    .nav-sub {
        list-style: none;
        overflow: hidden;
        max-height: 0;
        padding: 0;
        margin: 0;
        transition: max-height 0.34s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .nav-sub-toggle[aria-expanded="true"] + .nav-sub { max-height: 560px; }

    .nav-sub li a {
        min-height: 46px;
        padding: 11px 14px 11px 22px;
        margin-inline-start: 10px;
        font-size: 14px;
        font-weight: 500;
        color: var(--dark-gray);
        border-bottom: 1px dashed var(--light-gray);
        justify-content: flex-start;
        gap: 10px;
    }

    .nav-sub li a .icon { color: var(--teal); flex-shrink: 0; }
    .nav-sub li:last-child a { border-bottom: none; }

    .nav-chevron { transform: rotate(-90deg); }
    .nav-sub-toggle[aria-expanded="true"] .nav-chevron { transform: rotate(90deg); }

    /* --- دکمه اصلی ته منو --- */
    .nav-links li a.nav-cta {
        margin: 14px 4px 6px;
        padding: 15px 18px !important;
        border-radius: var(--radius-md) !important;
        border: none !important;
        justify-content: center;
        text-align: center;
        font-size: 15.5px !important;
        min-height: 52px;
    }

    /* --- تماس ته کشو --- */
    .nav-sheet-contact {
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin: 8px 12px 0;
        padding-top: 12px;
        border-top: 1px solid var(--light-gray);
    }

    .nav-sheet-contact a {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 11px 14px;
        border-radius: var(--radius-sm);
        font-size: 13.5px;
        font-weight: 600;
        color: var(--medium-gray);
        direction: ltr;
        justify-content: flex-end;
    }

    .nav-sheet-contact a .icon { color: var(--teal); }

    .nav-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(9, 16, 32, 0.5);
        backdrop-filter: blur(2px);
        z-index: 1150;
    }

    .nav-overlay.active { display: block; }

    /* ============ نوار اقدام پایین ============ */
    .mobile-bar {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 1100;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        gap: 2px;
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
        background: color-mix(in srgb, var(--white) 94%, transparent);
        backdrop-filter: saturate(180%) blur(14px);
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        border-top: 1px solid var(--light-gray);
        box-shadow: 0 -4px 18px rgba(15, 26, 48, 0.07);
    }

    @supports not (backdrop-filter: blur(1px)) {
        .mobile-bar { background: var(--white); }
    }

    .mobile-bar-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: 52px;
        border: 0;
        background: none;
        border-radius: var(--radius-md);
        font-family: inherit;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--medium-gray);
        cursor: pointer;
        transition: background 0.18s ease, color 0.18s ease;
    }

    .mobile-bar-item .icon { color: var(--navy); }
    .mobile-bar-item:active { background: var(--off-white); }

    .mobile-bar-cta {
        background: linear-gradient(135deg, var(--teal), var(--teal-dark));
        color: var(--white);
    }

    .mobile-bar-cta .icon { color: var(--white); }
    .mobile-bar-cta:active { filter: brightness(1.1); background: linear-gradient(135deg, var(--teal), var(--teal-dark)); }

    /* محتوا نباید زیر نوار پایین گم شود */
    body { padding-bottom: 64px; }
    .main-footer { margin-bottom: 4px; }

    /* دکمه بازگشت به بالا باید بالای نوار بنشیند */
    .scroll-top { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
}

/* روی گوشی افقی، نوار پایین ارتفاع کمتری بگیرد */
@media (max-height: 500px) and (orientation: landscape) {
    /* همان دلیل بالا — گوشی افقی هم از کشوی پایین استفاده می‌کند */
    .main-header {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--white);
    }

    .mobile-bar { padding: 3px 6px calc(3px + env(safe-area-inset-bottom, 0px)); }
    .mobile-bar-item { min-height: 42px; font-size: 10.5px; gap: 1px; }
    body { padding-bottom: 52px; }
    .scroll-top { bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
    .main-nav { max-height: 92dvh; }
}

@media (prefers-reduced-motion: reduce) {
    .main-nav,
    .nav-sub,
    .nav-chevron,
    .hamburger-bars span { transition: none !important; }
}


/* ============================================================
   کارت‌های «پرسش‌های پرتکرار» روی گوشی — از چرخش سه‌بعدی به
   بازشوندهٔ عمودی
   ------------------------------------------------------------
   چه ایرادی داشت:
   رو و پشتِ کارت هر دو position:absolute بودند، پس هیچ‌کدام به
   ارتفاع کارت اضافه نمی‌کردند و کارت روی همان min-height ثابت
   می‌ماند. نتیجه: پاسخ بلند بریده می‌شد و داخل یک قاب کوچک
   اسکرول جدا می‌خورد که روی لمس با اسکرول صفحه می‌جنگید.
   ضمناً چرخش سه‌بعدی داخل شبکه‌ای که perspective دارد، روی
   مرورگر گوشی باعث می‌شد کارت‌های کناری هنگام باز شدن یکی از
   آن‌ها پرش کنند یا ناپدید شوند.

   حالا: هیچ سه‌بعدی‌ای در کار نیست. پاسخ درست زیر پرسش باز
   می‌شود و کارت به‌اندازهٔ متن قد می‌کشد. باز شدن یک کارت هیچ
   اثری روی کارت‌های دیگر ندارد.

   چرا grid-template-rows به‌جای max-height: با 0fr→1fr ارتفاعِ
   واقعیِ محتوا انیمیت می‌شود؛ max-height همیشه یک عدد حدسی
   می‌خواهد که یا متن را می‌برد یا مکث می‌اندازد.
   ============================================================ */

@media (max-width: 768px) {

    .qa-grid,
    .qa-page-grid {
        perspective: none;
    }

    .qa-card,
    .qa-card.flipped {
        height: auto;
        min-height: 0;
    }

    .qa-card-inner {
        display: grid;
        grid-template-rows: auto 0fr;
        height: auto;
        transform: none;
        transform-style: flat;
        border-radius: var(--radius-lg);
        overflow: hidden;
        border: 1px solid var(--light-gray);
        box-shadow: 0 4px 18px rgba(27, 42, 74, 0.07);
        transition:
            grid-template-rows 0.42s cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 0.3s ease,
            border-color 0.3s ease;
    }

    /* transform: none اینجا لازم است چون قانون چرخشِ دسکتاپ
       (.qa-card.flipped .qa-card-inner) وزن بیشتری از انتخابگر تک‌کلاسه
       دارد؛ بدون این خط، کارت هنگام باز شدن ۱۸۰ درجه می‌چرخید و همه
       متن آینه‌ای می‌شد. */
    .qa-card.flipped .qa-card-inner {
        grid-template-rows: auto 1fr;
        transform: none;
        border-color: rgba(0, 128, 128, 0.35);
        box-shadow: 0 10px 30px rgba(0, 128, 128, 0.16);
    }

    /* هر دو رو از حالت absolute درمی‌آیند تا در جریان عادی بنشینند */
    .qa-card-front,
    .qa-card-back {
        position: static;
        inset: auto;
        transform: none;
        backface-visibility: visible;
        -webkit-backface-visibility: visible;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .qa-card-front {
        padding: 20px 18px;
        gap: 12px;
    }

    /* min-height: 0 شرط لازم است؛ بدون آن آیتم گرید زیر ارتفاع
       محتوای خودش جمع نمی‌شود و بسته‌شدن اتفاق نمی‌افتد. */
    .qa-card-back {
        min-height: 0;
        overflow: hidden;
        padding: 0 18px;
        transition: padding 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .qa-card.flipped .qa-card-back {
        padding: 18px;
    }

    /* دیگر هیچ اسکرول داخلی‌ای وجود ندارد — متن کامل دیده می‌شود */
    .qa-card-back p {
        overflow: visible;
        flex: none;
        font-size: 13.5px;
        line-height: 2.05;
        padding-left: 0;
    }

    .qa-card-back::before {
        display: none;             /* گیومهٔ تزئینی در فضای کم فقط شلوغی است */
    }

    /* وقتی پاسخ باز است، «کلیک برای پاسخ» دیگر معنا ندارد */
    .qa-card.flipped .qa-flip-hint {
        opacity: 0;
        height: 0;
        margin: 0;
        overflow: hidden;
    }

    .qa-flip-hint {
        transition: opacity 0.2s ease;
    }

    /* روی لمس، حالت hover دسکتاپ (که چسبنده می‌ماند) نباید اجرا شود */
    .qa-card:hover .qa-icon {
        transform: none;
        background: linear-gradient(135deg, var(--teal-bg), var(--navy-bg));
        box-shadow: none;
    }

    .qa-card.flipped .qa-icon {
        background: linear-gradient(135deg, var(--teal), var(--teal-dark));
        box-shadow: 0 6px 18px rgba(0, 128, 128, 0.3);
    }
}