/* ── FunZone FAQs — tab nav + intro + panel styles ───────────────────────
 * Used by inc/shortcodes/faq.php (renders inside page-faqs.php). Only the
 * SHORTCODE styles live here — the page shell (full-bleed hero, brand-blue
 * body, diagonal stripes) moved to css/page-shell.css when page-faqs.php
 * was restructured to match the About Us visual.
 *
 * a11y: W3C tab pattern (role=tablist / tab / tabpanel + aria-selected
 * + roving tabindex). Arrow-key keyboard nav lives in js/faq.js.
 */

/* ── Tab nav — in-flow (not sticky); floats over Flatsome header would
   overlap on scroll. Full-viewport width so pills can spread + center. */
.fz-faqs-nav {
    /* Escape the .fz-faqs-container max-width so the pills can center
       across the full viewport, not just the 1000px content column. */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    padding: 16px;
    margin-bottom: 21px;
    /* Intentionally NO background / sticky / blur — each pill carries its
       own border + transparent bg so they read as floating chips. */
}

.fz-faqs-nav-list {
    display: flex;
    /* Wrap onto multiple rows so all 6 pills are visible at once on every
       viewport — no horizontal scroll, no hidden tabs. Each row stays
       centred so the wrap looks deliberate, not ragged. */
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    max-width: 1080px;
    margin: 0 auto;
    padding: 4px 12px;
}

/* Pills — neutral-gray glass (low opacity so the blue page bg doesn't tint
   the pill blue; the bg is gray-on-gray, so the perceived colour is neutral
   even though we sit on a navy page). White border at ~38% reads as a clean
   chip outline. Active state keeps the cyan gradient + glow so "selected"
   pops against the translucent neighbours. */
.fz-faqs-nav-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    justify-content: center;
    white-space: nowrap;
    padding: 8px 16px;
    /* Apple-style neutral dark glass — same recipe as the contact form
       card so all glass surfaces on the site share one visual language. */
    background: rgba(20, 20, 22, 0.28);
    backdrop-filter: blur(7px) saturate(140%);
    -webkit-backdrop-filter: blur(7px) saturate(140%);
    color: #fff;
    font: 700 12px/1 "Lato", Arial, sans-serif;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.fz-faqs-nav-pill i {
    font-size: 13px;
    color: #fff;
}

.fz-faqs-nav-pill:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: #fff;
    color: #fff;
}

.fz-faqs-nav-pill:focus-visible {
    outline: 2px solid #00f0ff;
    outline-offset: 3px;
}

.fz-faqs-nav-pill.is-active {
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.22), rgba(4, 187, 211, 0.18));
    border-color: #00f0ff;
    color: #fff;
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.25);
}

@media (max-width: 640px) {
    /* Tight padding so 3 pills fit per row across the typical mobile
       width (360-430px). Nav takes the full viewport width; the inner
       padding shrinks to almost nothing so the pills get every pixel. */
    .fz-faqs-nav {
        padding: 8px;
    }
    .fz-faqs-nav-list {
        gap: 6px;
        padding: 0 4px;
    }
    .fz-faqs-nav-pill {
        padding: 7px 11px;
        font-size: 12px;
        gap: 6px;
        letter-spacing: 0.05em;
    }
    .fz-faqs-nav-pill i {
        font-size: 12.5px;
    }
}

/* ── "Before You Arrive" — frosted info bar (brand cyan accent) ────── */
.fz-faq-intro {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    margin-bottom: 28px;
    /* Dark glass — matches the contact form card recipe so all glass
       surfaces (alert, pills, panels, footer nav) share the same look. */
    background: rgba(20, 20, 22, 0.28);
    backdrop-filter: blur(7px) saturate(140%);
    -webkit-backdrop-filter: blur(7px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-left: 3px solid rgba(4, 187, 211, 0.7);
    border-radius: 0 8px 8px 0;
    color: rgba(255, 255, 255, 0.92);
}

.fz-faq-intro-icon {
    flex-shrink: 0;
    color: #04bbd3;
    font-size: 16px;
    line-height: 1.4;
    margin-top: 2px;
}

.fz-faq-intro-body {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    line-height: 1.55;
}

.fz-faq-intro-body p {
    margin: 0 0 6px;
}

.fz-faq-intro-body strong { color: #fff; font-weight: 800; }

/* Mobile — shrink the caution copy 2 steps down so it stops dominating
   over the rest of the page. Tighter padding too so the alert doesn't
   eat as much vertical space. */
@media (max-width: 720px) {
    .fz-faq-intro {
        padding: 12px 14px;
        gap: 10px;
        margin-bottom: 22px;
    }
    .fz-faq-intro-body {
        line-height: 1.45;
    }
    /* Target <p> directly to win against the parent theme's
       `@media (max-width: 760px) { p { font-size: 1.1rem } }` rule,
       which has selector specificity (0,0,1) — beats class-level
       inheritance otherwise. Our `.fz-faq-intro-body p` is (0,1,1). */
    .fz-faq-intro-body p {
        font-size: 0.9rem;
    }
    .fz-faq-intro-icon {
        font-size: 14px;
    }
}

/* Tablet — same 0.9 rem alert font as mobile (the Flatsome parent
   theme's `p` override only fires at ≤760, so on tablet ≥720 our
   class rule actually wins again, but we keep the explicit declaration
   so the alert text stays consistent across the 720-1024 band). */
@media (min-width: 721px) and (max-width: 1024px) {
    .fz-faq-intro-body p {
        font-size: 0.9rem;
    }
}

.fz-faq-quick-links {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px 24px;
    /* Generous top margin + soft divider line so the navigation aids
       read as a separate footer to the intro copy, not a tail of it. */
    margin: 22px 0 0;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 12px;
}

/* Each group stacks an uppercase prefix label ("Return to" / "See our")
   above the actual link, so the destination context reads at a glance
   without crowding the link text itself. */
.fz-faq-quick-link {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    line-height: 1.2;
}

.fz-faq-quick-link-prefix {
    color: rgba(255, 255, 255, 0.68);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.fz-faq-quick-links a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #00f0ff;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.04em;
    transition: color 0.18s ease;
}

.fz-faq-quick-links a i { font-size: 10px; }

.fz-faq-quick-links a:hover,
.fz-faq-quick-links a:focus-visible {
    color: #fff;
    outline: none;
}

/* ── Tab panels — minimal glass: nearly-transparent bg + soft blur + clean
   white border all around. No cyan top accent — the white border is the
   only frame. */
.fz-faq-panel {
    position: relative;
    /* Same dark-glass recipe as the contact form card and the alert /
       pills / footer nav — unified glass language across the site. */
    background: rgba(20, 20, 22, 0.28);
    backdrop-filter: blur(7px) saturate(140%);
    -webkit-backdrop-filter: blur(7px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    padding: clamp(22px, 3.5vw, 32px);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    overflow: hidden;
    animation: fzFaqPanelIn 0.28s ease-out;
    /* Clear Flatsome's fixed header (~80px). Tabs are in-flow now. */
    scroll-margin-top: 100px;
}

/* Fallback for browsers without backdrop-filter — solidify the bg so each
   surface still reads as a card without the blur trick. Matches the contact
   form's fallback (rgba(20, 20, 22, 0.78)) for consistency. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .fz-faq-intro,
    .fz-faq-panel,
    .fz-faqs-nav-pill,
    .fz-faq-nav-footer {
        background: rgba(20, 20, 22, 0.78);
    }
}

.admin-bar .fz-faq-panel { scroll-margin-top: 132px; }
@media (max-width: 600px) {
    .admin-bar .fz-faq-panel { scroll-margin-top: 146px; }
}

@keyframes fzFaqPanelIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Centered panel title — icon removed (icons stay only in tabs). */
.fz-faq-panel-title {
    text-align: center;
    color: #fff;
    font-size: clamp(16px, 2.4vw, 20px);
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    margin: 0 0 6px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.fz-faq-panel-body {
    margin-top: 22px;
}

/* Sub-section headings — each Q gets a clear divider from the previous A.
   Subtle cyan rule + generous top margin so the panel reads as discrete
   Q/A blocks rather than one wall of text. Brand-cyan #04bbd3 sub-heading
   color sits inside the brand palette (was amber pre-rebrand). */
.fz-faq-panel-body h4 {
    /* Soft white — same recipe as the "Where to next?" footer title for
       a consistent muted-uppercase heading style across the FAQ surface. */
    color: rgba(255, 255, 255, 0.7);
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 30px 0 6px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
}

/* Use :first-child instead of :first-of-type so the separator is suppressed
   ONLY when the h4 is literally the first element of the panel body.
   Tabs like Hours that lead with an intro paragraph then go into h4 still
   get the full margin+padding+border, giving the intro proper separation
   from the first sub-section. */
.fz-faq-panel-body h4:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.fz-faq-panel-body p {
    color: rgba(255, 255, 255, 0.92);
    font-size: 15.5px;
    line-height: 1.72;
    margin: 0 0 10px;
    /* Single-step right indent (~16px) so the answer reads as a child of
       its question rather than the same outline level. */
    padding-left: 16px;
}

.fz-faq-panel-body p:last-child { margin-bottom: 0; }
.fz-faq-panel-body strong { color: #fff; font-weight: 800; }
.fz-faq-panel-body em { color: rgba(255, 255, 255, 0.92); font-style: italic; }

/* Phone link inside answer text — matches the bright cyan of the intro
   quick links so it reads as an actionable contact, not a regular link. */
.fz-faq-panel-body a.fz-faq-tel,
.fz-faq-intro-body a.fz-faq-tel {
    color: #00f0ff;
    font-weight: 800;
    text-decoration: none;
    border-bottom: 1px dashed rgba(0, 240, 255, 0.5);
    white-space: nowrap;
    transition: color 0.18s ease, border-color 0.18s ease;
}
.fz-faq-panel-body a.fz-faq-tel:hover,
.fz-faq-panel-body a.fz-faq-tel:focus-visible,
.fz-faq-intro-body a.fz-faq-tel:hover,
.fz-faq-intro-body a.fz-faq-tel:focus-visible {
    color: #fff;
    border-bottom-color: #fff;
    outline: none;
}

.fz-faq-panel-body a {
    color: #00f0ff;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 0.18s ease;
}

.fz-faq-panel-body a:hover,
.fz-faq-panel-body a:focus-visible {
    color: #fff;
    outline: none;
}

/* ── FAQ footer nav — quick exits to Activities & Pricing / T&Cs ────── */
.fz-faq-nav-footer {
    margin-top: 28px;
    padding: 18px 20px;
    background: rgba(20, 20, 22, 0.28);
    backdrop-filter: blur(7px) saturate(140%);
    -webkit-backdrop-filter: blur(7px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    text-align: center;
}
.fz-faq-nav-footer-title {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.7);
}
.fz-faq-nav-footer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 22px;
}
.fz-faq-nav-footer-link,
.fz-faq-nav-footer-link:link,
.fz-faq-nav-footer-link:visited {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #00f0ff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: color 0.18s ease, transform 0.18s ease;
}
.fz-faq-nav-footer-link i {
    font-size: 11px;
    transition: transform 0.18s ease;
}
.fz-faq-nav-footer-link:hover,
.fz-faq-nav-footer-link:focus-visible {
    color: #fff;
    outline: none;
}
.fz-faq-nav-footer-link:hover .fz-icon-arrow-right {
    transform: translateX(3px);
}
.fz-faq-nav-footer-link:hover .fz-icon-arrow-left {
    transform: translateX(-3px);
}
.fz-faq-nav-footer-link:focus-visible {
    box-shadow: 0 0 0 2px #00f0ff;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .fz-faq-nav-footer-link,
    .fz-faq-nav-footer-link i {
        transition: none;
    }
}

/* ──────────────────────────────────────────────────────────────────────
   Terms & Conditions overlay — reuses the FAQ .fz-faq-* DOM/styles for
   tabs, pills, panels, intro, and footer nav. The rules below add only
   what's unique to T&C: effective-date badge, numbered section heading,
   and ul/li styling (FAQ panels rarely use lists, T&C panels use them
   heavily for legal enumerations).
   ────────────────────────────────────────────────────────────────────── */

/* Effective-date pill — sits between the panel title and the body. */
.fz-terms-effective {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 18px;
    padding: 6px 14px;
    background: rgba(4, 187, 211, 0.18);
    border: 1px solid rgba(4, 187, 211, 0.5);
    border-radius: 999px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.fz-terms-effective i {
    color: #b9f4ff;
    font-size: 12px;
}
.fz-terms-effective strong {
    color: #ffffff;
    font-weight: 800;
}

/* Numbered section title — bigger than the h4 sub-labels so the
   legal-document outline reads as 3 levels: panel title (h2) > section
   (h3) > sub-label (h4) > paragraph. */
.fz-faq-panel-body .fz-terms-section-title {
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 38px 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.fz-faq-panel-body .fz-terms-section-title:first-child {
    margin-top: 0;
}

/* Indent the section body slightly so the section title visually owns
   its contents. */
.fz-terms-section-body {
    padding-left: 4px;
}

/* Reset the h4 "first-of-type" margin reset INSIDE a section body, so
   the first h4 of each section gets its full top border + spacing
   (matches the question/answer rhythm from FAQ). */
.fz-terms-section-body h4:first-child {
    margin-top: 20px;
    padding-top: 0;
    border-top: none;
}

/* Lists inside T&C panels — match the answer-text colour family so
   bullet enumerations sit in the same visual layer as paragraphs. */
.fz-faq-panel-body ul {
    list-style: disc;
    margin: 0 0 10px;
    padding-left: 36px;
}
.fz-faq-panel-body ul li {
    color: rgba(255, 255, 255, 0.92);
    font-size: 15.5px;
    line-height: 1.6;
    margin-bottom: 6px;
}
.fz-faq-panel-body ul li::marker {
    color: rgba(255, 255, 255, 0.55);
}
.fz-faq-panel-body ul li:last-child {
    margin-bottom: 0;
}

@media (max-width: 640px) {
    .fz-faq-panel-body .fz-terms-section-title {
        font-size: 15.5px;
        margin: 28px 0 12px;
    }
    .fz-faq-panel-body ul {
        padding-left: 24px;
    }
}