/* ---------------------------------------------------------------------------
   Page shell — reusable hero + content layout for non-home pages
   ---------------------------------------------------------------------------
   Used by page-faqs.php and page-generic.php (template for any standalone
   page: T&Cs, Birthday Parties, Privacy, etc.). Mirrors the About Us
   visual: full-bleed photo hero on top → brand-blue content section
   below with subtle diagonal stripes for depth.

   Lighter, brighter, less aggressive than the FAQ page's previous dark
   navy + neon-glow treatment. Brand blue base (#0078ff) matches the
   About Us section bg so the whole site reads as one palette.
*/

.fz-page {
    position: relative;
    color: #fff;
    font-family: "Lato", Arial, sans-serif;
}

/* ── Hero (full-bleed image, optional title overlay) ─────────────────────── */

.fz-page-hero {
    position: relative;
    width: 100%;
    height: 50vh;
    min-height: 308px;
    max-height: 615px;
    overflow: hidden;
    background-color: #0c0c3e; /* fallback before image loads */
}

/* Cyan glow border along the bottom edge — matches the .fz-site-location-edge
   recipe (5px cyan bar + 45/13px halo at rgba 0.45) so the hero/body
   transition rhymes visually with the location strip. */
.fz-page-hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    height: 5px;
    background-color: #04bbd3;
    box-shadow: 0 0 45px 13px rgba(4, 187, 211, 0.45);
    pointer-events: none;
}

/* Hero photo — fills the full box (cover), anchored slightly above the
   middle so portrait-style subjects don't have their heads cropped. */
.fz-page-hero-image {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: var(--fz-hero-image);
    background-size: cover;
    background-position: center 22%;
    background-repeat: no-repeat;
}

/* T&C hero — image subject sits lower in the source frame than the
   FAQ/About hero, so we pull the visible window down a touch to bring
   the focal area higher in the box. */
.fz-terms-page .fz-page-hero-image {
    background-position: center 40%;
}

/* When no featured image is set, an empty hero feels like a bug. Hide it
   instead — the content section's title carries the page identity. */
.fz-page-hero:empty,
.fz-page-hero[data-empty="1"] {
    display: none;
}

/* ── Content section (brand blue + diagonal stripes) ─────────────────────── */

.fz-page-body {
    position: relative;
    background-color: #0078ff;
    /* Brand-blue diagonal-stripe canvas (same JPG About Us uses, bundled).
       Zoomed past `cover` and anchored right so the brighter light-blue
       spot near 40% of the source image stays off-screen. */
    background-image: url('../assets/images/page-bg-stripes.webp');
    background-size: 135% auto;
    background-position: 100% center;
    background-repeat: no-repeat;
    padding: 4rem 1.5rem 5rem;
}

/* FAQ + T&C + About Us background override — SVG with crossing triangular
   spotlight beams (left + right focal points) + dark navy side vignettes
   for the 3-layer "framed" look. Vector, so it scales without pixelating;
   ~3.6 KB vs 13 KB for the WebP. Other page-generic pages keep the
   stripes WebP. The `?v=` cache-buster lets us iterate on the SVG without
   browsers serving a stale cached copy — bump it when editing the SVG. */
.fz-faqs-page .fz-page-body,
.fz-terms-page .fz-page-body,
.fz-about-page .fz-page-body {
    background-image: url('../assets/images/page-bg-beams.svg?v=4');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.fz-page-body-inner {
    max-width: 1180px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.fz-page-title {
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    margin: 0 0 2.5rem;
    text-align: center;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

/* ── Brand text gradient utility ─────────────────────────────────────
   Cyan → amber diagonal gradient with a soft cyan glow halo — same
   recipe as the "Awaits!" word in the home Family Fun section. Apply
   to any inline element to make a strategic word "pop" against the
   surrounding white text. Use sparingly (1-2 words per page) so it
   keeps its punch. */
.fz-text-gradient {
    background: linear-gradient(135deg, #00f0ff 0%, #fce803 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
    filter: drop-shadow(0 0 14px rgba(0, 240, 255, 0.45));
}

.fz-page-lead {
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.94);
    max-width: 760px;
    margin: 0 0 2rem;
}

/* ── Generic WP-editor content (used by page-generic.php for .the_content)  */

.fz-page-content {
    color: #ffffff;
    font-size: 1.05rem;
    line-height: 1.7;
}
.fz-page-content h2 {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 800;
    margin: 2rem 0 1rem;
}
.fz-page-content h3,
.fz-page-content h4 {
    color: #fff;
    margin: 1.5rem 0 0.75rem;
}
.fz-page-content a {
    color: #ffd84a;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.fz-page-content a:hover {
    color: #fff;
}
.fz-page-content strong {
    color: #fff;
}
.fz-page-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

@media (max-width: 720px) {
    .fz-page-hero {
        height: 32vh;
        min-height: 200px;
    }
    .fz-page-body {
        padding: 2.5rem 1.25rem 3rem;
    }
    .fz-page-title {
        margin-bottom: 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fz-page-hero-image {
        transform: none;
    }
}