/* ==========================================================================
   Sitewide FAQ component — premium two-column layout + numbered accordion.
   Scoped to the existing .service_headings / .service_section.servicefaq
   markup already used across the site, so no page HTML needs to change.
   Loaded once, sitewide, via include/head.php.
   ========================================================================== */

.service_headings,
.servicefaq {
    --faq-accent: var(--cw-blue, #304a9d);
    --faq-border: var(--cw-border, #e6eaf3);
    --faq-surface: var(--cw-surface, #ffffff);
    --faq-bg-soft: var(--cw-bg-soft, #eef2fa);
    --faq-text: var(--cw-navy, #101a3d);
    --faq-text-dim: var(--cw-text-dim, #5b6478);
    --faq-radius: var(--cw-radius-md, 16px);
    --faq-ease: var(--cw-ease, cubic-bezier(.16, 1, .3, 1));
}

/* Two-column layout: heading block on the left, accordion on the right.
   :has() targets only containers built from this exact FAQ pattern, so no
   other section on the site is affected. */
.container:has(> .service_headings + .service_section.servicefaq) {
    display: grid;
    grid-template-columns: minmax(240px, 340px) 1fr;
    align-items: start;
    gap: 24px 56px;
}

/* ---- Left column: eyebrow + heading ---- */
.service_headings {
    margin: 0 !important;
    padding-top: 4px;
}

.service_headings::before {
    content: "FAQ";
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--faq-accent);
    background: var(--faq-bg-soft);
    padding: 5px 14px;
    border-radius: 999px;
    margin-bottom: 14px;
}

.service_headings h2 {
    font-size: 30px !important;
    line-height: 1.25;
    font-weight: 800;
    color: var(--faq-text);
    padding: 0 !important;
    margin: 0 0 10px;
}

.service_headings h2::before,
.service_headings h2::after {
    display: none !important;
    content: none !important;
}

.service_headings p {
    color: var(--faq-text-dim);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
}

@media (min-width: 992px) {
    .service_headings {
        position: sticky;
        top: 110px;
    }
}

/* ---- Right column: accordion card list ---- */
.service_section.servicefaq {
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin: 0 !important;
}

.servicefaq .accordion {
    counter-reset: faqnum;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.servicefaq .accordion > .card {
    counter-increment: faqnum;
    border: 1px solid var(--faq-border) !important;
    border-radius: var(--faq-radius) !important;
    box-shadow: var(--cw-shadow-soft, 0 1px 2px rgba(16, 26, 61, .04)) !important;
    background: var(--faq-surface);
    overflow: hidden;
    margin: 0 !important;
    transition: box-shadow .25s var(--faq-ease), border-color .25s var(--faq-ease);
}

.servicefaq .accordion > .card:hover {
    border-color: var(--faq-accent) !important;
    box-shadow: var(--cw-shadow-card, 0 8px 24px rgba(16, 26, 61, .08)) !important;
}

.servicefaq .card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--faq-surface) !important;
    border: 0 !important;
    padding: 18px 20px !important;
    cursor: pointer;
    color: var(--faq-text) !important;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.5;
}

.servicefaq .card-header::before {
    content: counter(faqnum, decimal-leading-zero);
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--faq-accent);
    opacity: .55;
}

.servicefaq .card-header h3 {
    flex: 1 1 auto;
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.5;
    color: inherit;
}

/* The site's own script (include/footer.php) swaps the icon class between
   fa-plus and fa-minus on Bootstrap's show/hide.bs.collapse events, so the
   symbol itself already flips — this just gives that icon a premium badge
   treatment that fills in with the accent color while open. Matching on
   .fas (present on both fa-plus and fa-minus) keeps this working regardless
   of which one is currently applied. */
.servicefaq .card-header i.fas {
    order: 99;
    margin-left: auto;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--faq-bg-soft);
    color: var(--faq-accent);
    font-size: 12px;
    transition: background .25s var(--faq-ease), color .25s var(--faq-ease);
}

.servicefaq .card-header[aria-expanded="true"] i.fas,
.servicefaq .card-header:not(.collapsed) i.fas {
    background: var(--faq-accent);
    color: #fff;
}

.servicefaq .card-body {
    padding: 4px 20px 22px 56px;
    color: var(--faq-text-dim);
    font-size: 15px;
    line-height: 1.75;
    animation: faqFadeIn .3s var(--faq-ease);
}

.servicefaq .card-body h4,
.servicefaq .card-body h5 {
    color: var(--faq-text);
}

.servicefaq .card-body code {
    background: var(--faq-bg-soft);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
}

@keyframes faqFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 991px) {
    .container:has(> .service_headings + .service_section.servicefaq) {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .service_headings {
        position: static;
    }
}

@media (max-width: 480px) {
    .servicefaq .card-header {
        padding: 15px 16px !important;
        font-size: 15px;
        gap: 12px;
    }

    .servicefaq .card-body {
        padding: 2px 16px 18px 44px;
        font-size: 14px;
    }

    .servicefaq .card-header i.fa-plus {
        width: 28px;
        height: 28px;
    }
}