/* ─── FAQ Accordion Component — reusable across v2 landing pages ────────────
 *
 * Companion to `script.js` in this same folder. Auto-enqueued by
 * everfit_component('faq', $args) — see function/component-loader.php.
 *
 * Base rules below are the 'light' theme (light page, expanded item goes
 * near-black #060606) — ported from template/template-parts/macrosnap/faq-section.php's
 * inline <style> equivalent in assets2/css/macrosnap.css (.ms-faq-*), renamed
 * to .ef-faq-* so it's decoupled from any single page's prefix.
 *
 * `.theme-dark` overrides below invert that for a dark page: plain items
 * get no bg + white text throughout, and the expanded item gets a subtle
 * bg-white/10 highlight instead of a dedicated dark color (the page is
 * already dark, so a full near-black card would have no contrast).
 * ───────────────────────────────────────────────────────────────────────── */

.ef-faq-item {
    transition: background-color 0.3s ease, padding 0.3s ease;
    border-radius: 12px;
    background: transparent;
}

.ef-faq-item.is-expanded {
    background: #060606;
    padding-bottom: 6px;
}

.ef-faq-item .ef-faq-item__header p {
    transition: color 0.3s ease;
    color: #000;
}

.ef-faq-item.is-expanded .ef-faq-item__header p {
    color: #fff;
}

.ef-faq-item .ef-faq-item__icon {
    transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
    background: #f6f6f6;
    border: 1px solid transparent;
}

.ef-faq-item.is-expanded .ef-faq-item__icon {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ef-faq-item .ef-faq-icon-minus,
.ef-faq-item .ef-faq-icon-plus {
    position: absolute;
    transition: opacity 0.3s ease;
}

.ef-faq-item .ef-faq-icon-minus { opacity: 0; }
.ef-faq-item .ef-faq-icon-plus { opacity: 1; }
.ef-faq-item.is-expanded .ef-faq-icon-minus { opacity: 1; }
.ef-faq-item.is-expanded .ef-faq-icon-plus { opacity: 0; }

.ef-faq-item .ef-faq-icon-plus path {
    transition: fill 0.3s ease;
    fill: black;
}

.ef-faq-item.is-expanded .ef-faq-icon-plus path {
    fill: white;
}

.ef-faq-item__answer {
    overflow: hidden;
    height: 0;
    opacity: 0;
    /* Always active (not scoped to .is-expanded) so collapsing animates too —
       JS sets height:0 and removes .is-expanded in the same tick with no forced
       reflow between them, so the browser only sees the final (collapsed) style
       when it recalculates. If transition only lived on .is-expanded, that final
       style would have no transition and the collapse would snap instantly. */
    transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

.ef-faq-item.is-expanded .ef-faq-item__answer {
    opacity: 1;
    transition-delay: 0s, 0.05s;
}

/* Never show a divider touching the expanded (dark) item — it reads as
   redundant next to the rounded dark box. Hide the divider on whichever side
   currently borders .is-expanded (only one item is ever expanded at a time).
   :has() has no Firefox < 121 support — acceptable here since it's a purely
   cosmetic divider-hide, not a layout-breaking fallback gap. */
.ef-faq-item.is-expanded + .ef-faq-divider,
.ef-faq-divider:has(+ .ef-faq-item.is-expanded) {
    opacity: 0;
}

/* Answer link style (e.g. "Learn more ↗") */
.ef-faq-link {
    color: #38a9ff;
    text-decoration: underline;
    text-underline-position: from-font;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

@media (min-width: 768px) {
    .ef-faq-link { font-size: 15px; }
}

@media (min-width: 1440px) {
    .ef-faq-link { font-size: 16px; }
}

/* ─── theme-dark overrides ──────────────────────────────────────────────── */

.ef-faq.theme-dark .ef-faq-item .ef-faq-item__header p {
    color: #fff;
}

.ef-faq.theme-dark .ef-faq-item.is-expanded {
    background: rgba(255, 255, 255, 0.1);
}

.ef-faq.theme-dark .ef-faq-item .ef-faq-item__icon {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid transparent;
}

.ef-faq.theme-dark .ef-faq-item.is-expanded .ef-faq-item__icon {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Figma 512:2893 "Default FAQ" (Booking page) uses different spacing/opacity
   than the shared macrosnap padding scheme this component was ported from:
   the expanded card gets a 6px inset on every side (not just bottom, which
   the theme-agnostic base rule above already sets), its question row is a
   flat 18px horizontal at every breakpoint (not the base rule's 20px, bumped
   to 24px only at md+ when expanded), its answer panel is a flatter 10%
   white (not 14%) with no extra side margin, its answer text is 80% white
   (not solid white), and its dividers span the full item width edge-to-edge
   (not the base rule's 590px/-40px inset). */
.ef-faq.theme-dark .ef-faq-item.is-expanded {
    padding: 0 6px 6px;
}

.ef-faq.theme-dark .ef-faq-item.is-expanded .ef-faq-item__header {
    padding-left: 18px;
    padding-right: 18px;
}

.ef-faq.theme-dark .ef-faq-item__answer > div {
    background: rgba(255, 255, 255, 0.1);
    margin-left: 0;
    margin-right: 0;
}

.ef-faq.theme-dark .ef-faq-item__answer p {
    color: rgba(255, 255, 255, 0.8);
}

/* Full-bleed rule. Figma stacks the items with no gap and draws it as an
   inside stroke, so the negative margin keeps it out of the layout height. */
.ef-faq.theme-dark .ef-faq-divider {
    width: 100%;
    max-width: 100%;
    margin-bottom: -1px;
}

/* Pill switcher (Figma node 2032:11610). Only the dark theme ships tabs today,
   so the two states are scoped here rather than in the theme-agnostic base. */
.ef-faq.theme-dark .ef-faq-tab {
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    transition: background-color 0.25s ease, color 0.25s ease;
}

.ef-faq.theme-dark .ef-faq-tab.is-active {
    background: #dbfc37;
    color: #000;
}

/* Plus icon (shown when NOT expanded — the minus icon covers the expanded
   state and is already unconditionally white in both themes). Base rule
   above hardcodes fill:black for the light theme's icon-circle-on-white-page
   default; override it here for dark, matching the white icon-circle-on-black
   look everywhere else in this theme. */
.ef-faq.theme-dark .ef-faq-item .ef-faq-icon-plus path {
    fill: white;
}