/* =========================================================
   ADNI FAQ - CSS
   Follows the visual language of Secondary page
   ========================================================= */

:root{
    --b:#0753ad;
    --bd:#06386f;
    --y:#ffc400;
    --g:#25855e;
    --soft:#eef6ff;
    --ink:#182235;
    --muted:#68778a;
    --line:#dce7f2;
    --w:#fff;
    --sh:0 18px 48px rgba(5,56,111,.12);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);line-height:1.62}
button,input{font:inherit}
button{cursor:pointer}
.wrap{width:min(1160px,calc(100% - 36px));margin:auto}
.center{text-align:center}

.k{
    display:inline-flex;
    align-items:center;
    gap:9px;
    color:var(--bd);
    font-size:.76rem;
    font-weight:900;
    letter-spacing:.1em;
    text-transform:uppercase;
}
.k:before,.k:after{
    content:"";
    width:27px;
    height:3px;
    background:var(--y);
}

h1,h2,h3{line-height:1.12}
h1{font-size:clamp(2.8rem,6vw,5.4rem);margin:12px 0 18px}
h2{font-size:clamp(2rem,4vw,3.15rem);color:var(--bd);margin:12px 0 16px}
h3{color:var(--bd)}

.intro{max-width:780px;margin:0 auto;color:var(--muted);font-size:1.06rem}

/* =========================================================
   01. HERO
   ========================================================= */

.faq-hero{
    min-height:500px;
    display:grid;
    place-items:center;
    text-align:center;
    color:white;
    overflow:hidden;
    position:relative;
    background:
        radial-gradient(circle at 50% 115%,rgba(255,196,0,.3),transparent 35%),
        linear-gradient(135deg,#052b57,#0753ad);
}

.faq-hero:after{
    content:"FAQ";
    position:absolute;
    bottom:-55px;
    left:50%;
    transform:translateX(-50%);
    font-weight:900;
    font-size:clamp(7rem,19vw,15rem);
    color:rgba(255,255,255,.045);
    white-space:nowrap;
    pointer-events:none;
}

.faq-hero .k{color:#fff}
.faq-hero h1{color:#fff;position:relative;z-index:1}
.faq-hero h1 span{color:var(--y)}
.faq-hero p{
    max-width:700px;
    margin:auto;
    color:#dcecff;
    font-size:1.15rem;
    position:relative;
    z-index:1;
}

/* =========================================================
   02. SEARCH / QUICK CATEGORY AREA
   ========================================================= */

.faq-tools{
    padding:0 0 58px;
    background:linear-gradient(to bottom,var(--soft) 0, var(--soft) 58%,#fff 58%);
}

.search-box{
    width:min(760px,100%);
    margin:-31px auto 28px;
    position:relative;
    z-index:5;
    background:#fff;
    border:1px solid var(--line);
    border-radius:999px;
    box-shadow:var(--sh);
    display:flex;
    align-items:center;
    padding:7px 10px 7px 21px;
}

.search-box i{
    color:var(--bd);
    font-size:1.1rem;
    margin-right:12px;
}

.search-box input{
    width:100%;
    border:0;
    outline:0;
    color:var(--ink);
    background:transparent;
    padding:10px 0;
    font-size:1rem;
}

.search-box input::placeholder{color:#91a0b2}

#clearSearch{
    width:38px;
    height:38px;
    border:0;
    border-radius:50%;
    background:var(--soft);
    color:var(--bd);
    font-size:1.35rem;
    line-height:1;
    display:grid;
    place-items:center;
    opacity:0;
    pointer-events:none;
    transition:.2s;
}

#clearSearch.show{
    opacity:1;
    pointer-events:auto;
}

.quick-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
    margin:0 auto 25px;
}

.quick-card{
    border:1px solid var(--line);
    background:#fff;
    border-radius:21px;
    padding:20px;
    text-align:left;
    display:grid;
    grid-template-columns:52px 1fr;
    grid-template-rows:auto auto;
    column-gap:13px;
    transition:.25s;
    box-shadow:0 8px 25px rgba(5,56,111,.05);
}

.quick-card:hover,
.quick-card.active{
    transform:translateY(-4px);
    border-color:#bcd6ee;
    box-shadow:var(--sh);
}

.quick-card.active{background:#fff}
.quick-icon{
    width:52px;
    height:52px;
    border-radius:16px;
    background:var(--y);
    display:grid;
    place-items:center;
    font-size:1.45rem;
    grid-row:1/3;
}

.quick-card strong{color:var(--bd);font-size:.98rem;align-self:end}
.quick-card small{color:var(--muted);font-size:.78rem;align-self:start}

.faq-categories{
    display:flex;
    gap:9px;
    justify-content:center;
    flex-wrap:wrap;
}

.category-pill{
    border:1px solid var(--line);
    background:#fff;
    color:var(--bd);
    font-weight:850;
    border-radius:999px;
    padding:10px 15px;
    transition:.2s;
}

.category-pill:hover{background:#f5faff}
.category-pill.active{
    background:var(--bd);
    color:#fff;
    border-color:var(--bd);
}

.search-status{
    min-height:22px;
    text-align:center;
    color:var(--muted);
    font-size:.85rem;
    margin-top:13px;
}

/* =========================================================
   03. FAQ LIST
   ========================================================= */

.faq-section{
    padding:76px 0 84px;
    background:#fff;
}

.faq-heading{margin-bottom:35px}

.faq-list{
    max-width:920px;
    margin:0 auto;
}

.faq-item{
    border:1px solid var(--line);
    border-radius:17px;
    background:#fff;
    overflow:hidden;
    margin-bottom:11px;
    transition:.25s;
}

.faq-item:hover{
    border-color:#c6d9eb;
    box-shadow:0 8px 25px rgba(5,56,111,.05);
}

.faq-item.hidden{display:none}

.faq-question{
    width:100%;
    border:0;
    background:#fff;
    color:var(--bd);
    font-weight:900;
    padding:20px 21px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
    text-align:left;
}

.faq-question span{display:block}
.faq-question i{
    flex:0 0 auto;
    width:30px;
    height:30px;
    border-radius:50%;
    background:var(--soft);
    display:grid;
    place-items:center;
    font-style:normal;
    font-size:1.25rem;
    font-weight:500;
    transition:.25s;
}

.faq-item.open .faq-question i{
    transform:rotate(45deg);
    background:var(--y);
}

.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease;
}

.faq-answer > p,
.faq-answer > .steps,
.faq-answer > .hours-grid,
.faq-answer > .notice,
.faq-answer > .featured-answer{
    margin-left:21px;
    margin-right:21px;
}

.faq-answer > p:last-child{margin-bottom:21px}
.faq-answer p{color:var(--muted);font-size:.95rem}
.faq-answer strong{color:var(--bd)}

.steps{
    padding-bottom:21px;
    display:grid;
    gap:9px;
}

.steps > div{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:12px 14px;
    border-radius:13px;
    background:var(--soft);
    color:var(--muted);
    font-size:.9rem;
}

.steps b{
    flex:0 0 30px;
    height:30px;
    border-radius:50%;
    background:var(--y);
    color:var(--bd);
    display:grid;
    place-items:center;
    font-size:.72rem;
}

.subject-pills{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin:8px 21px 20px;
}

.subject-pills span{
    background:var(--soft);
    color:var(--bd);
    font-weight:800;
    font-size:.8rem;
    padding:7px 10px;
    border-radius:999px;
}

.small-note{
    margin-top:-8px;
}

.hours-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    padding-bottom:21px;
}

.hours-card{
    border:1px solid var(--line);
    border-radius:16px;
    padding:18px;
    background:#fff;
}

.hours-card h3{
    margin:0 0 12px;
    font-size:1.05rem;
}

.hours-card p{
    margin:0 0 10px;
    font-size:.86rem;
}

.hours-card p:last-child{margin-bottom:0}
.hours-card b{color:var(--bd)}

.notice{
    border-left:4px solid var(--y);
    background:#fff8d9;
    border-radius:0 13px 13px 0;
    padding:14px 16px;
    margin-bottom:20px;
    display:grid;
    gap:3px;
    color:var(--muted);
    font-size:.88rem;
}

.notice strong{color:var(--bd)}
.notice.warning{
    border-left-color:#e7a600;
    background:#fff7dc;
}

.featured-faq{
    border-color:#c9d9e8;
    background:linear-gradient(135deg,#fff,#f4f9ff);
}

.featured-faq .faq-question em{
    font-style:normal;
    font-size:.68rem;
    text-transform:uppercase;
    letter-spacing:.08em;
    background:var(--y);
    color:var(--bd);
    border-radius:999px;
    padding:4px 8px;
    margin-right:8px;
}

.featured-answer{
    margin-bottom:21px;
    padding:20px;
    border-radius:17px;
    background:var(--bd);
    color:#fff;
}

.featured-answer strong{
    display:block;
    color:var(--y);
    font-size:1.15rem;
    margin-bottom:7px;
}

.featured-answer p{
    margin:0;
    color:#dcecff;
}

/* =========================================================
   04. NO RESULTS
   ========================================================= */

.no-results{
    max-width:620px;
    margin:25px auto 0;
    text-align:center;
    padding:45px 25px;
    border:1px dashed #bfd1e3;
    border-radius:22px;
    background:var(--soft);
}

.no-results[hidden]{display:none}
.no-results-icon{font-size:2rem;margin-bottom:8px}
.no-results h3{margin:0 0 8px}
.no-results p{margin:0;color:var(--muted)}

/* =========================================================
   05. CTA
   ========================================================= */

.faq-cta{
    padding:0 0 84px;
    background:#fff;
}

.faq-cta-box{
    background:var(--bd);
    border-radius:28px;
    padding:45px 42px;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

.faq-cta-box .k{color:#fff}
.faq-cta-box h2{color:#fff;margin-bottom:8px}
.faq-cta-box p{color:#dcecff;margin:0}

.cta-buttons{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    flex:0 0 auto;
}

.btn{
    border:0;
    border-radius:999px;
    padding:13px 21px;
    font-weight:900;
    text-decoration:none;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.yellow{background:var(--y);color:#15335a}
.glass{
    border:1px solid rgba(255,255,255,.3);
    color:#fff;
    background:rgba(255,255,255,.08);
}

/* =========================================================
   06. RESPONSIVE
   ========================================================= */

@media(max-width:900px){
    .quick-grid{grid-template-columns:1fr 1fr}
    .faq-cta-box{align-items:flex-start;flex-direction:column}
}

@media(max-width:600px){
    .faq-hero{min-height:430px}
    .faq-tools{padding-bottom:45px}
    .search-box{margin-top:-26px}
    .quick-grid{grid-template-columns:1fr 1fr;gap:10px}
    .quick-card{
        padding:15px;
        grid-template-columns:42px 1fr;
        column-gap:9px;
    }
    .quick-icon{width:42px;height:42px;border-radius:13px;font-size:1.15rem}
    .quick-card strong{font-size:.86rem}
    .quick-card small{font-size:.7rem}
    .faq-categories{
        justify-content:flex-start;
        flex-wrap:nowrap;
        overflow-x:auto;
        padding-bottom:6px;
        scrollbar-width:none;
    }
    .faq-categories::-webkit-scrollbar{display:none}
    .category-pill{white-space:nowrap}
    .faq-section{padding:58px 0 64px}
    .hours-grid{grid-template-columns:1fr}
    .faq-question{padding:17px 16px;font-size:.92rem}
    .faq-answer > p,
    .faq-answer > .steps,
    .faq-answer > .hours-grid,
    .faq-answer > .notice,
    .faq-answer > .featured-answer{
        margin-left:16px;
        margin-right:16px;
    }
    .subject-pills{margin-left:16px;margin-right:16px}
    .faq-cta{padding-bottom:64px}
    .faq-cta-box{padding:35px 24px;border-radius:22px}
    .cta-buttons{width:100%}
    .cta-buttons .btn{flex:1;justify-content:center}
}