/* _faq-panel.css — scoped to .hp-faq — public FAQ accordion partial */

.hp-faq {
    /* Local token block — inherit from canon palette per mvc-ui-ux-design §2 */
    --ink:        #0b1b34;
    --ink-soft:   #2d3a52;
    --muted:      #6b7487;
    --hair:       #e5e7ef;
    --paper:      #fbfbfd;
    --wash:       #f3f5fb;
    --brand:      var(--zf-primary,   #1870d1);
    --brand-deep: var(--zf-secondary, #0f4ea3);
    --teal:       #07c3d6;

    padding: clamp(3rem, 6vw, 5rem) 0;
    color: var(--ink);
    font-family: "Montserrat", sans-serif;
    background: var(--paper);
}

.hp-faq__intro {
    display: flex;
    flex-direction: column;
}

.hp-faq__illustration {
    margin-top: 1.5rem;
    max-width: 360px;
}

.hp-faq__illustration img {
    max-width: 100%;
    height: auto;
    border-radius: 18px;
}

.hp-faq__eyebrow {
    display: inline-block;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.18em;
    font-weight: 700;
    color: var(--brand);
    margin-bottom: 0.5rem;
}

.hp-faq__heading {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: clamp(1.8rem, 2.8vw, 2.4rem);
    letter-spacing: -0.015em;
    color: var(--ink);
    margin-bottom: 0.75rem;
    line-height: 1.15;
}

.hp-faq__subtitle {
    color: var(--muted);
    line-height: 1.5;
    max-width: 60ch;
    margin-bottom: 0;
}

.hp-faq__list-col {
    /* Cap the accordion height so a custom thick teal scrollbar appears for long lists.
       Falls back gracefully when the list is short — no scrollbar shown. */
    --hp-faq-max-height: clamp(420px, 64vh, 640px);
}

.hp-faq__accordion {
    max-height: var(--hp-faq-max-height);
    overflow-y: auto;
    padding-right: 14px;
    /* Firefox custom scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--teal) transparent;
}

/* WebKit / Blink custom scrollbar — thick teal accent line */
.hp-faq__accordion::-webkit-scrollbar {
    width: 8px;
}

.hp-faq__accordion::-webkit-scrollbar-track {
    background: transparent;
}

.hp-faq__accordion::-webkit-scrollbar-thumb {
    background: var(--teal);
    border-radius: 999px;
    min-height: 60px;
}

.hp-faq__accordion::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--teal) 80%, var(--brand-deep));
}

.hp-faq__item {
    border: 1px solid var(--hair);
    border-radius: 14px;
    background: #fff;
    margin-bottom: 1rem;
    overflow: hidden;
    transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.hp-faq__item:last-child {
    margin-bottom: 0;
}

.hp-faq__item:hover {
    border-color: color-mix(in srgb, var(--brand) 35%, var(--hair));
    box-shadow: 0 10px 28px -18px rgba(10, 27, 52, 0.18);
}

.hp-faq__item .accordion-header {
    margin: 0;
}

.hp-faq__button {
    background: #fff;
    color: var(--ink);
    font-weight: 600;
    box-shadow: none !important;
    padding: 1.05rem 1.25rem;
    border-radius: 14px !important;
}

.hp-faq__button:not(.collapsed) {
    background: #fff;
    color: var(--ink);
    border-radius: 14px 14px 0 0 !important;
}

.hp-faq__button:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent) !important;
}

.hp-faq__answer {
    color: var(--ink-soft);
    line-height: 1.6;
    padding: 0.25rem 1.25rem 1.25rem;
    background: #fff;
}

@media (max-width: 991.98px) {
    .hp-faq__illustration {
        margin-top: 1.25rem;
        margin-bottom: 1.5rem;
        max-width: 280px;
    }

    .hp-faq__list-col {
        --hp-faq-max-height: none;
    }

    .hp-faq__accordion {
        max-height: none;
        overflow-y: visible;
        padding-right: 0;
    }
}

/* Dark theme — per mvc-ui-ux-design §2 */
html[data-theme="dark"] .hp-faq {
    --ink:      #e8ecf5;
    --ink-soft: #c6cbd8;
    --muted:    #8d95a8;
    --hair:     #2a3142;
    --paper:    #161a25;
    --wash:     #1c2231;
    background: #161a25;
}

html[data-theme="dark"] .hp-faq__item {
    background: #1c2231;
    border-color: var(--hair);
}

html[data-theme="dark"] .hp-faq__button,
html[data-theme="dark"] .hp-faq__button:not(.collapsed),
html[data-theme="dark"] .hp-faq__answer {
    background: #1c2231;
    color: var(--ink);
}

html[data-theme="dark"] .hp-faq__answer {
    color: var(--ink-soft);
}