/* faq.css — extracted from faq.php */
/* ── Hero ─────────────────────────────────────────────────────────────────── */
.faq-hero {
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: var(--primary);
    background-size: cover;
    background-position: center;
    padding: 0 20px;
    text-align: center;
}
.faq-hero::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.6) 100%);
}
.faq-hero h1 {
    position: relative; z-index: 2; color: #fff;
    font-size: clamp(1.3rem, 4vw, 2rem);
    text-transform: none; letter-spacing: 0; font-weight: 800;
    text-shadow: 0 2px 15px rgba(0,0,0,0.6);
    margin: 0 0 8px;
}
.faq-hero .sub-hero-p {
    position: relative; z-index: 2; color: rgba(255,255,255,0.88);
    font-size: 0.88rem; margin: 0; line-height: 1.5;
    text-shadow: 0 1px 6px rgba(0,0,0,0.5);
    max-width: 500px;
}

/* ── Layout ───────────────────────────────────────────────────────────────── */
.faq-layout {
    display:grid;
    grid-template-columns: 230px 1fr;
    grid-template-rows: auto;
    gap:0 32px;
    max-width:1120px;
    margin:0 auto;
    padding:40px 20px 80px;
    align-items:start;
}

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
.faq-sidebar {
    grid-column:1;
    position:sticky;
    top:calc(var(--header-h, 70px) + 16px);
    height:fit-content;
}
.faq-sidebar-inner {
    background:white; border-radius:12px;
    border:1px solid #e8edf2; overflow:hidden;
}

/* Search inside sidebar */
.faq-sidebar-search {
    padding:14px 14px 10px;
    border-bottom:1px solid #f1f5f9;
}
.faq-sidebar-search-wrap {
    position:relative;
}
.faq-sidebar-search input {
    width:100%; padding:9px 12px 9px 36px;
    border:1.5px solid #e2e8f0; border-radius:8px;
    font-size:0.85rem; outline:none; transition:0.2s;
    background:#f8fafc; box-sizing:border-box; color:#334155;
}
.faq-sidebar-search input:focus { border-color:var(--accent); background:white; }
.faq-sidebar-search i {
    position:absolute; left:11px; top:50%; transform:translateY(-50%);
    color:#94a3b8; font-size:0.8rem; pointer-events:none;
}

/* Category list */
.faq-sidebar-title {
    padding:10px 16px 6px;
    font-size:0.65rem; font-weight:800; text-transform:uppercase;
    letter-spacing:1.5px; color:#94a3b8;
}
.faq-cat-link {
    display:flex; justify-content:space-between; align-items:center;
    padding:10px 16px; font-size:0.86rem; font-weight:600;
    color:#475569; text-decoration:none;
    border-left:3px solid transparent;
    transition:all 0.15s;
    border-top:1px solid #f8fafc;
}
.faq-cat-link:hover { color:var(--primary); background:#f8fafc; }
.faq-cat-link.active { color:var(--accent); border-left-color:var(--accent); background:#fefaf5; }
.faq-cat-count {
    font-size:0.72rem; background:#f1f5f9; color:#94a3b8;
    padding:1px 7px; border-radius:10px; font-weight:700; flex-shrink:0;
}
.faq-cat-link.active .faq-cat-count { background:var(--accent); color:white; }

/* ── Main content ─────────────────────────────────────────────────────────── */
.faq-main { grid-column:2; }

.faq-category-section {
    margin-bottom:20px;
    scroll-margin-top:calc(var(--header-h, 70px) + 16px);
}
.category-title {
    color:var(--accent); font-size:0.68rem; font-weight:800;
    text-transform:uppercase; letter-spacing:1.5px;
    margin:0 0 10px; padding-bottom:7px;
    border-bottom:1px solid #f1f5f9;
    display:flex; align-items:center; gap:8px;
}
.category-title i { font-size:0.85rem; }
.cat-count {
    font-size:0.68rem; background:#f1f5f9; color:#94a3b8;
    padding:2px 8px; border-radius:10px; font-weight:700; margin-left:auto;
}

/* ── FAQ Cards ────────────────────────────────────────────────────────────── */
.faq-card {
    background:white; border-radius:10px;
    border:1px solid #e8edf2; margin-bottom:10px;
    overflow:hidden; transition:box-shadow 0.2s;
}
.faq-card:hover { box-shadow:0 4px 16px rgba(0,0,0,0.06); }
.faq-question {
    width:100%; padding:12px 16px; background:none; border:none;
    text-align:left; font-size:0.85rem; font-weight:600;
    color:var(--primary); cursor:pointer;
    display:flex; justify-content:space-between; align-items:center; gap:12px;
    line-height:1.4;
}
.faq-question:hover { color:var(--accent); }
.faq-question i { transition:0.3s; color:#cbd5e1; flex-shrink:0; font-size:0.85rem; }
.faq-answer { max-height:0; overflow:hidden; transition:max-height 0.4s cubic-bezier(0,1,0,1); }
.faq-answer-inner {
    padding:4px 14px 14px; color:#64748b;
    line-height:1.6; font-size:0.82rem;
    border-top:1px solid #f1f5f9;
}
.faq-card.open .faq-answer { max-height:2000px; transition:max-height 0.5s ease-in; }
.faq-card.open .faq-question { color:var(--accent); }
.faq-card.open .faq-question i { transform:rotate(180deg); color:var(--accent); }

/* No results */
#faq-no-results {
    display:none; text-align:center; padding:50px 20px;
    color:#94a3b8; grid-column:2;
}

/* ── Footer CTA ───────────────────────────────────────────────────────────── */
.faq-footer {
    grid-column:1/-1; text-align:center;
    margin-top:10px; padding:40px 30px;
    background:#fff8f0; border-radius:14px;
    border:1px solid #fee6d3;
}
.faq-footer h3 { color:var(--primary); margin:0 0 10px; font-size:1.5rem; font-weight:800; }
.faq-footer p { color:#64748b; max-width:560px; margin:0 auto 24px; }
.faq-footer-btns { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }

/* ── Mobile pill nav (replaces hidden sidebar on small screens) ───────────── */
.faq-mobile-nav {
    display:none;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    gap:8px; padding:0 16px 12px;
    scrollbar-width:none;
}
.faq-mobile-nav::-webkit-scrollbar { display:none; }
.faq-mobile-pill {
    flex-shrink:0; padding:4px 12px;
    border:1px solid #e2e8f0; border-radius:20px;
    font-size:0.7rem; font-weight:700; color:#64748b;
    text-decoration:none; white-space:nowrap;
    background:white; transition:0.15s;
    display:inline-flex; align-items:center; justify-content:center; line-height:1;
}
.faq-mobile-pill.active,
.faq-mobile-pill:hover { background:var(--accent); color:white; border-color:var(--accent); }

/* Mobile search bar (above content, below hero) */
.faq-mobile-search {
    display:none;
    padding:14px 16px 4px;
    position:relative;
}
.faq-mobile-search input {
    width:100%; padding:11px 14px 11px 40px;
    border:1.5px solid #e2e8f0; border-radius:10px;
    font-size:0.95rem; outline:none; background:#f8fafc;
    box-sizing:border-box; transition:0.2s;
}
.faq-mobile-search input:focus { border-color:var(--accent); background:white; }
.faq-mobile-search i {
    position:absolute; left:28px; top:50%; transform:translateY(-50%);
    color:#94a3b8; pointer-events:none;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width:768px) {
    .faq-layout {
        grid-template-columns:1fr;
        padding:12px 12px 24px;
        gap:0;
    }
    .faq-sidebar { display:none; }
    .faq-main { grid-column:1; }
    .faq-footer { grid-column:1; padding:28px 20px; }
    #faq-no-results { grid-column:1; }
    .faq-mobile-nav { display:flex; }
    .faq-mobile-search { display:block; }
    .faq-hero { height: 150px; }
    .faq-hero h1 { font-size: 1.3rem; }
    .faq-hero .sub-hero-p { font-size: 0.78rem; }
    .faq-question { font-size:0.84rem; padding:12px 14px; }
    .faq-answer-inner { font-size:0.8rem; padding:4px 14px 14px; }
    .category-title { font-size:0.68rem; letter-spacing:1.5px; }
    .faq-footer h3 { font-size:1.2rem; }
    .faq-footer-btns a { width:100%; justify-content:center; }
}