/* =========================
   FAQ HEADER + SEARCH
========================= */

.faq-header{

    max-width:760px;
    margin:auto;
    padding:clamp(30px, 5vw, 56px) var(--pad) 0;
    text-align:center;

}

.faq-header h1{

    font-size:clamp(30px, 4vw, 42px);
    letter-spacing:-1.5px;
    margin-bottom:12px;

}

.faq-header p{

    font-size:16px;
    color:#6a6a6a;
    margin-bottom:28px;

}

.faq-search{

    position:relative;
    max-width:480px;
    margin:auto;

}

.faq-search input{

    width:100%;
    font-size:15px;
    font-family:inherit;
    padding:14px 20px 14px 44px;
    border:1px solid var(--line);
    border-radius:999px;
    background:var(--paper);
    color:var(--ink);
    transition:border-color .2s ease, box-shadow .2s ease;

}

.faq-search input:focus{

    outline:none;
    border-color:var(--blue);
    box-shadow:0 0 0 3px rgba(56, 103, 255, .15);

}

.faq-search input::placeholder{

    color:#9a9a9a;

}

.faq-search-icon{

    position:absolute;
    left:18px;
    top:50%;
    transform:translateY(-50%);
    font-size:17px;
    color:#9a9a9a;
    pointer-events:none;

}


/* =========================
   CATEGORY NAV
========================= */

.faq-nav{

    position:sticky;
    top:0;
    z-index:100;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;
    max-width:var(--container);
    margin:clamp(30px, 5vw, 44px) auto 0;
    padding:14px var(--pad);
    background:var(--paper);
    border-bottom:1px solid var(--line);

}

.faq-nav-link{

    font-size:14px;
    font-weight:600;
    color:#6a6a6a;
    padding:8px 16px;
    border-radius:999px;
    white-space:nowrap;
    transition:color .2s ease, background .2s ease;

}

.faq-nav-link:hover{

    color:var(--ink);
    background:var(--sand);

}

.faq-nav-link.active{

    color:var(--paper);
    background:var(--ink);

}


/* =========================
   FAQ CONTENT
========================= */

.faq-content{

    max-width:760px;
    margin:auto;
    padding:clamp(30px, 5vw, 50px) var(--pad) clamp(60px, 9vw, 100px);

}

.faq-category{

    margin-bottom:clamp(40px, 6vw, 64px);
    scroll-margin-top:90px;

}

.faq-category:last-child{

    margin-bottom:0;

}

.faq-category h2{

    font-size:clamp(22px, 2.6vw, 26px);
    letter-spacing:-.5px;
    margin-bottom:18px;
    padding-bottom:14px;
    border-bottom:1px solid var(--line);

}

.faq-list{

    display:flex;
    flex-direction:column;

}


/* =========================
   ACCORDION ITEMS
========================= */

.faq-item{

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

}

.faq-item:last-child{

    border-bottom:none;

}

.faq-question{

    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    text-align:left;
    padding:20px 0;
    font-size:16px;
    font-weight:600;
    color:var(--ink);

}

.faq-question span:first-child{

    flex:1;

}

.faq-icon{

    flex-shrink:0;
    width:28px;
    height:28px;
    border-radius:50%;
    background:var(--sand);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    font-weight:400;
    color:var(--ink);
    transition:transform .3s ease, background .2s ease;

}

.faq-item.open .faq-icon{

    transform:rotate(135deg);
    background:var(--blue);
    color:white;

}

.faq-answer{

    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease;

}

.faq-answer p{

    font-size:15px;
    line-height:1.7;
    color:#4a4a4a;
    padding-bottom:22px;
    max-width:640px;

}


/* =========================
   EMPTY STATE
========================= */

.faq-empty{

    padding:clamp(40px, 7vw, 70px) 0;
    text-align:center;

}

.faq-empty h3{

    font-size:20px;
    margin-bottom:10px;

}

.faq-empty p{

    color:#6a6a6a;
    font-size:15px;

}

.faq-empty a{

    color:var(--blue);
    text-decoration:underline;
    text-underline-offset:3px;

}


/* =========================
   CONTACT CTA
========================= */

.faq-cta{

    max-width:var(--container);
    margin:auto;
    padding:0 var(--pad) clamp(70px, 10vw, 110px);
    text-align:center;

}

.faq-cta h2{

    font-size:clamp(24px, 3vw, 30px);
    letter-spacing:-.5px;
    margin-bottom:10px;

}

.faq-cta p{

    color:#6a6a6a;
    font-size:15px;
    margin-bottom:22px;

}

.faq-cta-btn{

    display:inline-block;
    font-weight:700;
    font-size:15px;
    padding:14px 32px;
    border-radius:999px;
    background:var(--ink);
    color:var(--paper);
    transition:transform .2s ease, opacity .2s ease;

}

.faq-cta-btn:hover{

    transform:translateY(-3px);

}


/* =========================
   RESPONSIVE
========================= */

@media(max-width:600px){

    .faq-nav{

        justify-content:flex-start;
        overflow-x:auto;
        flex-wrap:nowrap;

    }

    .faq-question{

        font-size:15px;
        gap:14px;

    }

}