/**
 * Mislens FAQ
 *
 * 文件位置：
 * /wp-content/themes/mislens-theme-v2/modules/faq/faq.css
 *
 * ==========================================================================
 * 页面目标
 * ==========================================================================
 *
 * 1. FAQ 页面保持轻量，不做重视觉营销。
 * 2. 以快速扫描、快速找到答案为第一目标。
 * 3. FAQ 使用原生 details / summary，不依赖 JavaScript。
 * 4. 页面样式全部限定在 .mislens-faq 范围内。
 * 5. PC / Tablet / Mobile 样式集中在本文件。
 */


/* ==========================================================================
   1. PAGE BASE
   ========================================================================== */

.mislens-faq {
    --faq-container: 1180px;
    --faq-content: 880px;

    --faq-text: #222222;
    --faq-muted: #6b6b6b;
    --faq-soft: #f7f7f7;
    --faq-soft-2: #fafafa;
    --faq-border: #e8e8e8;
    --faq-border-strong: #d8d8d8;
    --faq-white: #ffffff;

    --faq-radius-sm: 10px;
    --faq-radius-md: 16px;
    --faq-radius-pill: 999px;

    --faq-shadow:
        0 8px 28px rgba(0, 0, 0, 0.05);

    width: 100%;
    overflow: visible;

    background:
        var(--faq-white);

    color:
        var(--faq-text);
}

.mislens-faq *,
.mislens-faq *::before,
.mislens-faq *::after {
    box-sizing: border-box;
}

.mislens-faq a {
    color: inherit;
}

.mislens-faq-container {
    width:
        min(
            calc(100% - 48px),
            var(--faq-container)
        );

    margin:
        0
        auto;
}


/* ==========================================================================
   2. INTRO
   ========================================================================== */

.mislens-faq-intro {
    padding:
        92px
        0
        66px;

    background:
        var(--faq-white);
}

.mislens-faq-intro__content {
    width:
        min(
            100%,
            760px
        );

    margin:
        0
        auto;

    text-align:
        center;
}

.mislens-faq-intro__eyebrow {
    margin:
        0
        0
        14px;

    color:
        #777777;

    font-size:
        12px;

    line-height:
        1.4;

    font-weight:
        700;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;
}

.mislens-faq-intro__heading {
    margin:
        0;

    color:
        var(--faq-text);

    font-size:
        clamp(
            38px,
            4.4vw,
            58px
        );

    line-height:
        1.08;

    font-weight:
        700;

    letter-spacing:
        -0.035em;
}

.mislens-faq-intro__body {
    max-width:
        680px;

    margin:
        22px
        auto
        0;

    color:
        var(--faq-muted);

    font-size:
        17px;

    line-height:
        1.75;
}


/* ==========================================================================
   3. CATEGORY NAVIGATION
   ========================================================================== */

.mislens-faq-nav {
    position:
        sticky;

    top:
        0;

    z-index:
        20;

    border-top:
        1px solid
        var(--faq-border);

    border-bottom:
        1px solid
        var(--faq-border);

    background:
        rgba(255, 255, 255, 0.96);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);
}

.admin-bar .mislens-faq-nav {
    top:
        32px;
}

.mislens-faq-nav__items {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    min-height:
        72px;

    padding:
        10px
        0;
}

.mislens-faq-nav__link {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        40px;

    padding:
        10px
        18px;

    border:
        1px solid
        transparent;

    border-radius:
        var(--faq-radius-pill);

    color:
        #565656;

    background:
        transparent;

    font-size:
        13px;

    line-height:
        1.2;

    font-weight:
        600;

    text-decoration:
        none;

    white-space:
        nowrap;

    transition:
        color 160ms ease,
        background 160ms ease,
        border-color 160ms ease;
}

.mislens-faq-nav__link:hover,
.mislens-faq-nav__link:focus-visible {
    color:
        var(--faq-text);

    border-color:
        var(--faq-border);

    background:
        var(--faq-soft);
}


/* ==========================================================================
   4. FAQ CONTENT
   ========================================================================== */

.mislens-faq-content {
    width:
        min(
            calc(100% - 48px),
            var(--faq-content)
        );

    margin:
        0
        auto;

    padding:
        30px
        0
        96px;
}


/* ==========================================================================
   5. FAQ GROUP
   ========================================================================== */

.mislens-faq-group {
    scroll-margin-top:
        110px;

    padding:
        60px
        0;
}

.mislens-faq-group + .mislens-faq-group {
    border-top:
        1px solid
        var(--faq-border);
}

.mislens-faq-group__header {
    margin-bottom:
        24px;
}

.mislens-faq-group__heading {
    margin:
        0;

    color:
        var(--faq-text);

    font-size:
        clamp(
            25px,
            2.6vw,
            34px
        );

    line-height:
        1.18;

    font-weight:
        700;

    letter-spacing:
        -0.025em;
}


/* ==========================================================================
   6. FAQ LIST
   ========================================================================== */

.mislens-faq-list {
    border-top:
        1px solid
        var(--faq-border-strong);
}


/* ==========================================================================
   7. FAQ ITEM
   ========================================================================== */

.mislens-faq-item {
    margin:
        0;

    border-bottom:
        1px solid
        var(--faq-border-strong);

    background:
        transparent;
}

.mislens-faq-item__question {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        34px;

    gap:
        24px;

    align-items:
        center;

    min-height:
        84px;

    padding:
        24px
        4px;

    color:
        var(--faq-text);

    cursor:
        pointer;

    list-style:
        none;
}

.mislens-faq-item__question::-webkit-details-marker {
    display:
        none;
}

.mislens-faq-item__question::marker {
    display:
        none;
    content:
        "";
}

.mislens-faq-item__question-text {
    font-size:
        17px;

    line-height:
        1.45;

    font-weight:
        600;

    letter-spacing:
        -0.01em;
}

.mislens-faq-item__icon {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        32px;

    height:
        32px;

    border:
        1px solid
        var(--faq-border-strong);

    border-radius:
        50%;

    color:
        #666666;

    background:
        var(--faq-white);

    font-size:
        20px;

    line-height:
        1;

    font-weight:
        400;

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        color 180ms ease,
        background 180ms ease;
}

.mislens-faq-item__question:hover
.mislens-faq-item__icon {
    border-color:
        #bcbcbc;

    color:
        var(--faq-text);

    background:
        var(--faq-soft);
}

.mislens-faq-item[open]
.mislens-faq-item__icon {
    transform:
        rotate(45deg);

    border-color:
        #2f2f2f;

    color:
        #ffffff;

    background:
        #2f2f2f;
}


/* ==========================================================================
   8. FAQ ANSWER
   ========================================================================== */

.mislens-faq-item__answer {
    max-width:
        760px;

    padding:
        0
        50px
        28px
        4px;

    color:
        var(--faq-muted);
}

.mislens-faq-item__answer p {
    margin:
        0;

    font-size:
        15px;

    line-height:
        1.78;
}


/* ==========================================================================
   9. GROUP EXTRA LINK
   ========================================================================== */

.mislens-faq-group__extra {
    margin-top:
        24px;
}

.mislens-faq-group__link {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    color:
        var(--faq-text);

    font-size:
        14px;

    line-height:
        1.4;

    font-weight:
        600;

    text-decoration:
        none;

    border-bottom:
        1px solid
        currentColor;

    padding-bottom:
        3px;
}

.mislens-faq-group__link:hover,
.mislens-faq-group__link:focus-visible {
    opacity:
        0.65;
}


/* ==========================================================================
   10. FINAL CTA
   ========================================================================== */

.mislens-faq-cta {
    padding:
        84px
        0;

    background:
        var(--faq-soft);
}

.mislens-faq-cta__inner {
    width:
        min(
            100%,
            760px
        );

    margin:
        0
        auto;

    text-align:
        center;
}

.mislens-faq-cta__heading {
    margin:
        0;

    color:
        var(--faq-text);

    font-size:
        clamp(
            30px,
            3vw,
            42px
        );

    line-height:
        1.15;

    font-weight:
        700;

    letter-spacing:
        -0.025em;
}

.mislens-faq-cta__description {
    max-width:
        650px;

    margin:
        18px
        auto
        0;

    color:
        var(--faq-muted);

    font-size:
        16px;

    line-height:
        1.7;
}

.mislens-faq-cta__button {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        48px;

    margin-top:
        28px;

    padding:
        13px
        25px;

    border:
        1px solid
        #242424;

    border-radius:
        var(--faq-radius-pill);

    background:
        #242424;

    color:
        #ffffff;

    font-family:
        inherit;

    font-size:
        14px;

    line-height:
        1;

    font-weight:
        600;

    text-align:
        center;

    cursor:
        pointer;

    transition:
        color 160ms ease,
        background 160ms ease,
        border-color 160ms ease,
        transform 160ms ease;
}

.mislens-faq-cta__button:hover,
.mislens-faq-cta__button:focus-visible {
    border-color:
        #000000;

    background:
        #000000;

    color:
        #ffffff;

    transform:
        translateY(-1px);
}


/* ==========================================================================
   11. ACCESSIBILITY
   ========================================================================== */

.mislens-faq-nav__link:focus-visible,
.mislens-faq-item__question:focus-visible,
.mislens-faq-group__link:focus-visible,
.mislens-faq-cta__button:focus-visible {
    outline:
        2px solid
        #333333;

    outline-offset:
        3px;
}


/* ==========================================================================
   12. TABLET
   ========================================================================== */

@media (max-width: 960px) {

    .mislens-faq-intro {
        padding:
            76px
            0
            56px;
    }


    .mislens-faq-nav__items {
        justify-content:
            flex-start;

        overflow-x:
            auto;

        scrollbar-width:
            none;

        -ms-overflow-style:
            none;
    }

    .mislens-faq-nav__items::-webkit-scrollbar {
        display:
            none;
    }


    .mislens-faq-content {
        padding-bottom:
            78px;
    }


    .mislens-faq-group {
        padding:
            52px
            0;
    }


    .mislens-faq-item__question {
        min-height:
            78px;

        padding:
            22px
            2px;
    }


    .mislens-faq-cta {
        padding:
            74px
            0;
    }
}


/* ==========================================================================
   13. MOBILE
   ========================================================================== */

@media (max-width: 680px) {

    .mislens-faq-container {
        width:
            min(
                calc(100% - 32px),
                var(--faq-container)
            );
    }


    .mislens-faq-intro {
        padding:
            58px
            0
            42px;
    }

    .mislens-faq-intro__content {
        text-align:
            left;
    }

    .mislens-faq-intro__eyebrow {
        margin-bottom:
            10px;

        font-size:
            11px;
    }

    .mislens-faq-intro__heading {
        font-size:
            clamp(
                34px,
                10vw,
                44px
            );

        line-height:
            1.08;
    }

    .mislens-faq-intro__body {
        margin-top:
            17px;

        font-size:
            15px;

        line-height:
            1.68;
    }


    /**
 * Category navigation remains horizontally scrollable on mobile.
 *
 * 右侧增加可继续滑动的视觉提示：
 * - 渐变遮罩
 * - 箭头
 * - 原生横向滚动
 * - 不增加 JavaScript
 */

.mislens-faq-nav .mislens-faq-container {
    position:
        relative;
}

.mislens-faq-nav .mislens-faq-container::after {
    content:
        "›";

    position:
        absolute;

    top:
        50%;

    right:
        0;

    z-index:
        3;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    width:
        54px;

    height:
        100%;

    padding-right:
        8px;

    transform:
        translateY(-50%);

    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 0.88) 38%,
            #ffffff 68%
        );

    color:
        #4a4a4a;

    font-size:
        26px;

    line-height:
        1;

    font-weight:
        400;

    pointer-events:
        none;
}

.mislens-faq-nav__items {
    min-height:
        62px;

    gap:
        6px;

    padding:
        8px
        48px
        8px
        0;

    overflow-x:
        auto;

    scroll-snap-type:
        x proximity;

    scrollbar-width:
        none;

    -ms-overflow-style:
        none;
}

.mislens-faq-nav__items::-webkit-scrollbar {
    display:
        none;
}

.mislens-faq-nav__link {
    flex:
        0
        0
        auto;

    min-height:
        38px;

    padding:
        9px
        14px;

    font-size:
        12px;

    scroll-snap-align:
        start;
}


    .mislens-faq-content {
        width:
            min(
                calc(100% - 32px),
                var(--faq-content)
            );

        padding:
            8px
            0
            60px;
    }


    .mislens-faq-group {
        scroll-margin-top:
            88px;

        padding:
            42px
            0;
    }

    .mislens-faq-group__header {
        margin-bottom:
            20px;
    }

    .mislens-faq-group__heading {
        font-size:
            26px;

        line-height:
            1.2;
    }


    .mislens-faq-item__question {
        grid-template-columns:
            minmax(0, 1fr)
            30px;

        gap:
            16px;

        min-height:
            74px;

        padding:
            20px
            0;
    }

    .mislens-faq-item__question-text {
        font-size:
            15px;

        line-height:
            1.48;
    }

    .mislens-faq-item__icon {
        width:
            29px;

        height:
            29px;

        font-size:
            18px;
    }


    .mislens-faq-item__answer {
        max-width:
            none;

        padding:
            0
            38px
            22px
            0;
    }

    .mislens-faq-item__answer p {
        font-size:
            14px;

        line-height:
            1.72;
    }


    .mislens-faq-group__extra {
        margin-top:
            20px;
    }

    .mislens-faq-group__link {
        font-size:
            13px;
    }


    .mislens-faq-cta {
        padding:
            62px
            0;
    }

    .mislens-faq-cta__inner {
        text-align:
            left;
    }

    .mislens-faq-cta__heading {
        font-size:
            31px;
    }

    .mislens-faq-cta__description {
        margin:
            15px
            0
            0;

        font-size:
            15px;

        line-height:
            1.68;
    }

    .mislens-faq-cta__button {
        width:
            100%;

        min-height:
            50px;

        margin-top:
            24px;
    }
}


/* ==========================================================================
   14. SMALL MOBILE
   ========================================================================== */

@media (max-width: 420px) {

    .mislens-faq-intro__heading {
        font-size:
            34px;
    }


    .mislens-faq-group {
        padding:
            38px
            0;
    }


    .mislens-faq-group__heading {
        font-size:
            24px;
    }


    .mislens-faq-item__question {
        gap:
            13px;
    }


    .mislens-faq-item__answer {
        padding-right:
            0;
    }
}


/* ==========================================================================
   15. WORDPRESS ADMIN BAR
   ========================================================================== */

@media (max-width: 782px) {

    .admin-bar .mislens-faq-nav {
        top:
            46px;
    }
}


/* ==========================================================================
   16. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .mislens-faq *,
    .mislens-faq *::before,
    .mislens-faq *::after {
        scroll-behavior:
            auto !important;

        transition:
            none !important;

        animation:
            none !important;
    }
}