/* ==========================================================================
   Santa V2 — the layer that makes v2 itself
   ==========================================================================

   Loads after style.css and scroll-animations.css and adds four things:

     1. Hero plates          per-page photographic art behind the page header
     2. Ornaments            optional alpha art at section seams
     3. Content pages        the vocabulary the page HTML is written against
     4. Footer               the four-column structure

   Every piece of generated art is OPTIONAL. Each is a background-image behind
   a CSS custom property, and every one of those properties resolves to a file
   that may not exist yet. An unresolved url() leaves the layer transparent, so
   the CSS-drawn fallback underneath simply keeps showing. Strip every image
   out of assets/images/ and this is still a finished, legible site.

   Generation prompts, exact filenames, sizes and weight budgets:
   assets/images/PROMPTS.md
   ========================================================================== */


/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
    /* The warm end of the palette. v1 gave us the dark ground and the red;
       these are the firelight that the hero plates are lit by, so CSS and art
       agree even before any art exists. */
    --v2-fire:        #ff9d4d;
    --v2-candle:      #ffcf85;
    --v2-bulb:        #ffd9a0;
    --v2-gold:        #d8ab5c;
    --v2-gold-bright: #f2d69a;
    --v2-gold-deep:   #8a6522;
    --v2-spruce:      #16341f;
    --v2-holly:       #1e5631;
    --v2-ember:       #7d0d14;
    --v2-night:       #050b1c;

    --v2-hero-height: clamp(30rem, 52vw, 41rem);
    --v2-seam:        clamp(2.5rem, 5vw, 4.5rem);

    /* -------------------------------------------------------------------
       GENERATED ART
       Each of these is inert until the matching file lands in
       assets/images/ornaments/. No CSS edit is needed to switch one on —
       drop the file in and it appears.
       ------------------------------------------------------------------- */
    --art-snow-edge:   url("../images/ornaments/snow-edge.webp");
    --art-garland:     url("../images/ornaments/garland-edge.webp");
    --art-lights:      url("../images/ornaments/string-lights.webp");
    --art-treeline:    url("../images/ornaments/treeline-night.webp");
    --art-rooftops:    url("../images/ornaments/rooftops-edge.webp");
    --art-paperchain:  url("../images/ornaments/paper-chain.webp");
    --art-rule:        url("../images/ornaments/ribbon-divider.webp");
    --art-corner:      url("../images/ornaments/corner-garland.webp");
    --art-frost:       url("../images/ornaments/frost-corner.webp");
    --art-frame:       url("../images/ornaments/photo-frame.webp");
    --art-holly:       url("../images/ornaments/holly-sprig.webp");
    --art-baubles:     url("../images/ornaments/bauble-cluster.webp");
    --art-canes:       url("../images/ornaments/candy-canes.webp");
    --art-gifts:       url("../images/ornaments/gift-stack.webp");
    --art-bell:        url("../images/ornaments/brass-bell.webp");
    --art-seal:        url("../images/ornaments/wax-seal.webp");
    --art-postmark:    url("../images/ornaments/postmark.webp");
    --art-sleigh:      url("../images/ornaments/sleigh-silhouette.webp");
    --art-stockings:   url("../images/ornaments/stocking-row.webp");
    --art-hearth:      url("../images/ornaments/hearth-glow.webp");
    --art-flames:      url("../images/ornaments/fireplace-flames.webp");
    --art-bokeh:       url("../images/ornaments/bokeh-lights.webp");
    --art-paper:       url("../images/ornaments/paper-texture.webp");
}


/* ==========================================================================
   2. Hero plates
   ==========================================================================

   The plate is a separate element rather than a background on the section, so
   it can be scaled and eased independently of the scrim above it. The scrim is
   what makes the headline legible: a horizontal wash that is near-opaque on
   the left and clears by about 70% across. That is why every prompt in
   PROMPTS.md insists the subject sits right of centre.
   ========================================================================== */

.section_page-hero {
    position: relative;
    isolation: isolate;
    min-height: var(--v2-hero-height);
    display: flex;
    align-items: flex-end;
    padding-top: calc(var(--header-height) + 4rem);
    padding-bottom: clamp(3rem, 6vw, 5.5rem);
    overflow: hidden;
    background-color: var(--color-dark);
}

/* The drawn fallback. Firelight from the lower right, spruce dark elsewhere —
   the same lighting the plates are prompted for, so the transition from no art
   to art is a change of detail rather than a change of mood. */
.section_page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;
    background:
        radial-gradient(120% 90% at 78% 62%, rgba(255, 157, 77, 0.30) 0%, rgba(255, 157, 77, 0) 58%),
        radial-gradient(70% 60% at 88% 30%, rgba(255, 217, 160, 0.16) 0%, rgba(255, 217, 160, 0) 60%),
        radial-gradient(90% 80% at 12% 20%, rgba(22, 52, 31, 0.35) 0%, rgba(22, 52, 31, 0) 55%),
        linear-gradient(180deg, #000310 0%, #06091c 55%, #000310 100%);
}

.page-hero_plate {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--hero-plate, none);
    background-size: cover;
    background-position: center 40%;
    background-repeat: no-repeat;
    /* A slow drift, so a still image does not read as a dead one. Disabled
       under prefers-reduced-motion at the foot of this file. */
    animation: v2-hero-drift 38s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes v2-hero-drift {
    from { transform: scale(1.04) translate3d(0, 0, 0); }
    to   { transform: scale(1.09) translate3d(-1.2%, -1%, 0); }
}

.page-hero_scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg,
            rgba(0, 3, 16, 0.94) 0%,
            rgba(0, 3, 16, 0.86) 26%,
            rgba(0, 3, 16, 0.55) 52%,
            rgba(0, 3, 16, 0.18) 74%,
            rgba(0, 3, 16, 0.30) 100%),
        linear-gradient(180deg,
            rgba(0, 3, 16, 0.72) 0%,
            rgba(0, 3, 16, 0.10) 34%,
            rgba(0, 3, 16, 0.20) 66%,
            rgba(0, 3, 16, 0.90) 100%);
}

.page-hero_content {
    position: relative;
    max-width: 46rem;
}

.page-hero_breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-white-60);
}

.page-hero_breadcrumb a {
    color: var(--v2-gold);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.page-hero_breadcrumb a:hover {
    border-bottom-color: currentColor;
}

.page-hero_title {
    margin: 0 0 1.25rem;
    text-wrap: balance;
}

.page-hero_standfirst {
    margin: 0 0 2rem;
    max-width: 40rem;
    line-height: 1.6;
}

.page-hero_reassurance {
    margin: 1.25rem 0 0;
    font-size: 0.875rem;
    color: var(--color-white-60);
    letter-spacing: 0.02em;
}

/* -----------------------------------------------------------------------
   The plate map.

   One class per page, set on <body> by santav2_body_class(). Filenames are
   the contract — they must match the table in assets/images/PROMPTS.md
   exactly. A file that is not there yet leaves the layer transparent.
   ----------------------------------------------------------------------- */

.hero--home         { --hero-plate: url("../images/heroes/hero-home.webp"); }
.hero--video        { --hero-plate: url("../images/heroes/hero-video.webp"); }
.hero--free         { --hero-plate: url("../images/heroes/hero-free.webp"); }
.hero--message      { --hero-plate: url("../images/heroes/hero-message.webp"); }
.hero--ai           { --hero-plate: url("../images/heroes/hero-ai.webp"); }
.hero--letter       { --hero-plate: url("../images/heroes/hero-letter.webp"); }
.hero--letter-to    { --hero-plate: url("../images/heroes/hero-letter-to.webp"); }
.hero--videomessage { --hero-plate: url("../images/heroes/hero-videomessage.webp"); }
.hero--kids         { --hero-plate: url("../images/heroes/hero-kids.webp"); }
.hero--northpole    { --hero-plate: url("../images/heroes/hero-northpole.webp"); }
.hero--howto        { --hero-plate: url("../images/heroes/hero-howto.webp"); }
.hero--compare      { --hero-plate: url("../images/heroes/hero-compare.webp"); }
.hero--list         { --hero-plate: url("../images/heroes/hero-list.webp"); }
.hero--reviews      { --hero-plate: url("../images/heroes/hero-reviews.webp"); }
.hero--howitworks   { --hero-plate: url("../images/heroes/hero-howitworks.webp"); }

/* The North Pole page is the one plate shot from outside in the cold, so its
   scrim runs blue rather than black or the warmth fights the image. */
.hero--northpole .page-hero_scrim {
    background:
        linear-gradient(90deg,
            rgba(5, 11, 28, 0.94) 0%,
            rgba(5, 11, 28, 0.84) 28%,
            rgba(5, 11, 28, 0.48) 54%,
            rgba(5, 11, 28, 0.12) 76%,
            rgba(5, 11, 28, 0.28) 100%),
        linear-gradient(180deg,
            rgba(0, 3, 16, 0.70) 0%,
            rgba(0, 3, 16, 0.08) 36%,
            rgba(0, 3, 16, 0.88) 100%);
}


/* ==========================================================================
   3. Ornaments
   ==========================================================================

   One element, one modifier for which piece of art, one for which edge. Each
   has a CSS-drawn fallback underneath that stops being visible the moment its
   file exists — so the seams read as designed either way.

   Used sparingly on purpose. A treeline at every seam is wallpaper; a treeline
   once a page is a horizon.
   ========================================================================== */

.ornament {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 3;
    pointer-events: none;
    background-repeat: repeat-x;
    background-position: center bottom;
    background-size: auto 100%;
}

.ornament--top    { top: 0; }
.ornament--bottom { bottom: 0; }

/* Flip the tiles that are drawn hanging downward when they sit at a bottom
   edge, rather than shipping a second file for each. */
.ornament--bottom.ornament--garland,
.ornament--bottom.ornament--lights,
.ornament--bottom.ornament--paperchain {
    transform: scaleY(-1);
}

/* -----------------------------------------------------------------------
   Art and fallback: exactly one of them, decided in PHP.

   Two earlier attempts got this wrong. Putting the fallback on a ::before
   *underneath* the art meant the gradient kept painting once a file landed —
   invisible behind an opaque plate, a haze around a transparent one. Stacking
   both in one background-image was worse: the fallback shows straight through
   an alpha channel, and because those gradients are sized as a percentage of
   the element, a wide viewport turned them into large white shapes sitting
   beside a small tiled drift.

   There is no CSS way to ask whether an image loaded. PHP can simply look:
   inc/art.php checks file_exists() and puts `has-art--<key>` on the body, and
   the rules below switch the fallback off when it sees one. Deterministic, no
   flash, no JavaScript, and the two can never both paint.
   ----------------------------------------------------------------------- */

.ornament--snow-edge {
    /* Taller than the first pass. `auto 100%` scales the tile to the element
       height, so height is the only lever on how big the drift reads — at
       44px a 1200x90 source tiled every 587px, which on a wide screen looked
       like a pinstripe rather than snow. */
    height: clamp(2.75rem, 6vw, 5.5rem);
    background-image: var(--art-snow-edge);
    background-position: center top;
    background-size: auto 100%;
}

/* Drawn snow: mounds of differing height along the bottom edge.
   The mass sits at the BOTTOM and the softness at the top, or the strip reads
   as a solid white bar rather than as a drift. */
.ornament--snow-edge::before {
    content: "";
    position: absolute;
    left: -2%;
    right: -2%;
    top: 34%;
    bottom: -55%;
    background:
        radial-gradient(58% 118% at 14% 100%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.95) 44%, rgba(255, 255, 255, 0) 72%),
        radial-gradient(44% 92% at 37% 100%,  rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.95) 46%, rgba(255, 255, 255, 0) 74%),
        radial-gradient(62% 126% at 63% 100%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.95) 42%, rgba(255, 255, 255, 0) 70%),
        radial-gradient(48% 100% at 88% 100%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.95) 45%, rgba(255, 255, 255, 0) 73%);
    filter: blur(2px);
}

.ornament--garland {
    height: clamp(2.75rem, 5.5vw, 4.5rem);
    background-image: var(--art-garland);
    background-position: center top;
}

.ornament--garland::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 100% at 15% 0%, rgba(30, 86, 49, 0.85) 0%, rgba(30, 86, 49, 0) 70%),
        radial-gradient(60% 100% at 50% 0%, rgba(22, 52, 31, 0.90) 0%, rgba(22, 52, 31, 0) 72%),
        radial-gradient(60% 100% at 85% 0%, rgba(30, 86, 49, 0.85) 0%, rgba(30, 86, 49, 0) 70%),
        linear-gradient(180deg, rgba(22, 52, 31, 0.6) 0%, rgba(22, 52, 31, 0) 100%);
}

.ornament--lights {
    height: clamp(2rem, 4vw, 3.25rem);
    background-image: var(--art-lights);
    background-position: center top;
}

/* Drawn bulbs: a repeating warm dot along a hairline cord. */
.ornament--lights::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle 4px at 50% 62%, var(--v2-candle) 0%, rgba(255, 207, 133, 0.35) 45%, rgba(255, 207, 133, 0) 70%),
        linear-gradient(180deg, transparent calc(50% - 1px), rgba(255, 255, 255, 0.16) 50%, transparent calc(50% + 1px));
    background-size: 62px 100%, 100% 100%;
    background-repeat: repeat-x, no-repeat;
}

.ornament--treeline {
    height: clamp(3rem, 6vw, 5rem);
    background-image: var(--art-treeline);
    background-position: center bottom;
    opacity: 0.9;
}

/* Drawn treeline: alternating triangles, deliberately near-black. */
.ornament--treeline::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(135deg, transparent 42%, #050b1c 43%),
        linear-gradient(225deg, transparent 42%, #050b1c 43%);
    background-size: 44px 100%;
    background-position: bottom;
    background-repeat: repeat-x;
    opacity: 0.85;
}

/* The switch. When PHP has confirmed a file is present and wanted, the drawn
   version stops being painted entirely. */
.has-art--snow-edge .ornament--snow-edge::before,
.has-art--garland   .ornament--garland::before,
.has-art--lights    .ornament--lights::before,
.has-art--treeline  .ornament--treeline::before {
    display: none;
}

.ornament--rooftops {
    height: clamp(3.5rem, 7vw, 6rem);
    background-image: var(--art-rooftops);
    background-position: center bottom;
}

.ornament--paperchain {
    height: clamp(1.5rem, 3vw, 2.25rem);
    background-image: var(--art-paperchain);
    background-position: center top;
}

/* A heading rule rather than an edge, so it is inline and centred. */
.ornament-rule {
    display: block;
    width: min(100%, 22rem);
    height: 2.5rem;
    margin: 1.25rem auto 2rem;
    background-image: var(--art-rule);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: relative;
}

.ornament-rule::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent 0%, var(--v2-gold) 42%, transparent 44%),
        linear-gradient(90deg, transparent 56%, var(--v2-gold) 58%, transparent 100%);
    background-size: 100% 1px;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.55;
}

.ornament-rule::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    transform: translate(-50%, -50%) rotate(45deg);
    background: var(--color-red);
    box-shadow: 0 0 10px rgba(205, 40, 40, 0.7);
}


/* ==========================================================================
   4. Atmosphere
   ==========================================================================

   Two large soft washes behind whole sections. Both are quiet by design —
   body text is set over them, so they are heavily damped here regardless of
   how bright the source file is.
   ========================================================================== */

.section--hearth,
.section--bokeh {
    position: relative;
    isolation: isolate;
}

.section--hearth::before,
.section--bokeh::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 0.5;
}

.section--hearth::before {
    background-image:
        var(--art-hearth),
        radial-gradient(80% 70% at 50% 45%, rgba(255, 157, 77, 0.22) 0%, rgba(255, 157, 77, 0) 62%);
}

.section--bokeh::before {
    background-image:
        var(--art-bokeh),
        radial-gradient(60% 60% at 78% 22%, rgba(255, 217, 160, 0.18) 0%, rgba(255, 217, 160, 0) 60%),
        radial-gradient(50% 50% at 22% 78%, rgba(205, 40, 40, 0.12) 0%, rgba(205, 40, 40, 0) 65%);
    opacity: 0.42;
}


/* ==========================================================================
   4b. Applied ornaments
   ==========================================================================

   Section 4 declares the art; this is where each piece is actually used. Every
   rule below is gated on a `has-art--*` body class, so a piece that is missing
   or editorially disabled leaves no empty box behind — the element simply has
   no background and collapses to nothing visible.

   Restraint is the design here. There are twenty-odd ornaments available and
   using all of them at once would be a jumble sale. Each seam gets at most one
   piece, and a piece appears at most once per page.

   Every background-size below is `contain`, `cover`, or `auto <n>` — never a
   percentage pair, which stretches art to the box instead of fitting it.
   ========================================================================== */

/* --- The rule under a section heading --------------------------------- */

.has-art--rule .page-article .entry-content > section > h2::after {
    content: "";
    display: block;
    width: min(100%, 20rem);
    height: 2rem;
    margin: 0.9rem 0 1.4rem;
    background-image: var(--art-rule);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    opacity: 0.85;
}

/* --- Paper chain over the mid-page CTA -------------------------------- */

.has-art--paperchain .page-article .entry-content > section.cta--band {
    padding-top: clamp(4rem, 7vw, 5.5rem);
}

.has-art--paperchain .cta--band::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: clamp(1.5rem, 3vw, 2.25rem);
    background-image: var(--art-paperchain);
    background-repeat: repeat-x;
    background-position: center top;
    background-size: auto 100%;
    pointer-events: none;
}

/* --- Behind the mid-page CTA ------------------------------------------

   Was `hearth-glow.webp` at full cover, which put a single large amber
   hotspot directly behind the heading — far too hot, and it fought the
   button rather than supporting it.

   Defocused tree lights instead. Same warmth, but distributed: no hotspot,
   nothing bright enough to compete with type, and a texture rather than a
   wash. Held to 0.2 and masked to the edges so the middle of the panel —
   where the heading and the button sit — stays quiet. */

.has-art--bokeh .cta--band {
    position: relative;
    isolation: isolate;
}

.has-art--bokeh .cta--band::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--art-bokeh);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 0.2;
    /* Keep the centre clear. The lights read around the edges and fade out
       under the text, which is the only place they could do harm. */
    -webkit-mask-image: radial-gradient(70% 80% at 50% 50%, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.55) 55%, #000 100%);
    mask-image: radial-gradient(70% 80% at 50% 50%, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.55) 55%, #000 100%);
    pointer-events: none;
}

/* --- Corner garland on the closing panel ------------------------------
   One file, used four times: rotated into each corner. */

.has-art--corner .cta--final .cta_corner {
    position: absolute;
    width: clamp(5rem, 9vw, 8rem);
    aspect-ratio: 1;
    background-image: var(--art-corner);
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.55;
    pointer-events: none;
    z-index: 2;
}

.cta_corner { display: none; }
.has-art--corner .cta_corner { display: block; }

.has-art--corner .cta_corner--tl { top: 0; left: 0; }
.has-art--corner .cta_corner--tr { top: 0; right: 0; transform: scaleX(-1); }
.has-art--corner .cta_corner--bl { bottom: 0; left: 0; transform: scaleY(-1); }
.has-art--corner .cta_corner--br { bottom: 0; right: 0; transform: scale(-1); }

/* --- Holly on a callout ----------------------------------------------- */

.has-art--holly .v2-note {
    position: relative;
    padding-right: 5.5rem;
}

.has-art--holly .v2-note::after {
    content: "";
    position: absolute;
    right: 0.6rem;
    bottom: 0.4rem;
    width: 4.5rem;
    height: 3.2rem;
    background-image: var(--art-holly);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;
    opacity: 0.75;
    pointer-events: none;
}

/* --- Frost in the footer corners --------------------------------------
   The one cold piece on the page, and the right place for it: the footer is
   where the warm room gives out and the night starts. */

.has-art--frost .section_footer::before,
.has-art--frost .section_footer::after {
    content: "";
    position: absolute;
    top: 0;
    width: clamp(7rem, 14vw, 13rem);
    aspect-ratio: 1;
    background-image: var(--art-frost);
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.22;
    pointer-events: none;
    z-index: 1;
}

.has-art--frost .section_footer::before { left: 0; }
.has-art--frost .section_footer::after  { right: 0; transform: scaleX(-1); }

/* --- Baubles hanging in the footer ------------------------------------- */

.footer_baubles { display: none; }

.has-art--baubles .footer_baubles {
    display: block;
    position: absolute;
    top: 0;
    right: clamp(1rem, 8vw, 7rem);
    width: clamp(3.5rem, 6vw, 5rem);
    height: clamp(4.5rem, 8vw, 6.5rem);
    background-image: var(--art-baubles);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
    opacity: 0.8;
    pointer-events: none;
    z-index: 2;
}

/* --- A bell beside the "keep reading" label ---------------------------- */

.has-art--bell .related_heading {
    position: relative;
    padding-left: 2.1rem;
}

.has-art--bell .related_heading::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.5rem;
    height: 1.8rem;
    background-image: var(--art-bell);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.9;
}

/* --- Candy canes on the FAQ heading ------------------------------------
   Matched on the last section of every page, which is always the FAQ. */

.has-art--canes .page-article .entry-content > section:last-of-type > h2 {
    position: relative;
    padding-right: 3.4rem;
}

.has-art--canes .page-article .entry-content > section:last-of-type > h2::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0.1em;
    width: 2.6rem;
    height: 2.6rem;
    background-image: var(--art-canes);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.8;
}

/* --- Gifts in the footer brand column ---------------------------------- */

.has-art--gifts .footer_brand {
    position: relative;
}

.has-art--gifts .footer_brand::after {
    content: "";
    position: absolute;
    right: 1rem;
    bottom: -0.5rem;
    width: 4.5rem;
    height: 5rem;
    background-image: var(--art-gifts);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
    opacity: 0.5;
    pointer-events: none;
}

/* --- Photo frame behind content images ---------------------------------
   Unused until a page carries a photograph, but ready. */

/* :not(.santa-review) because review cards are <figure> too, and the parchment
   frame behind one — with the page's white body text on top — made them
   unreadable. Reviews bring their own card; leave them alone. */
.has-art--frame .page-article .entry-content figure:not(.santa-review) {
    padding: 1.1rem 1.1rem 2.2rem;
    background-image: var(--art-frame);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    transform: rotate(-0.7deg);
}

/* --- Sleigh across the closing panel ------------------------------------
   Small, high, and low-contrast: a detail to find, not a headline. */

.has-art--sleigh .cta--final .cta_inner::before {
    content: "";
    position: absolute;
    top: -1.5rem;
    right: -2rem;
    width: clamp(6rem, 12vw, 10rem);
    height: clamp(2.5rem, 5vw, 4rem);
    background-image: var(--art-sleigh);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: contain;
    opacity: 0.35;
    pointer-events: none;
}

.cta_inner { position: relative; }

@media (max-width: 767px) {
    /* Corner pieces and the sleigh are the first things to go on a phone —
       at that width they crowd the type rather than framing it. */
    .has-art--corner .cta_corner,
    .has-art--sleigh .cta--final .cta_inner::before,
    .has-art--gifts .footer_brand::after,
    .has-art--baubles .footer_baubles {
        display: none;
    }

    .has-art--holly .v2-note { padding-right: 1.4rem; }
    .has-art--holly .v2-note::after { opacity: 0.35; }
}

/* ==========================================================================
   5. Content pages
   ==========================================================================

   The vocabulary the page HTML in content/santa/ is written against. Kept
   deliberately small: sections, prose, a handful of block types, and the FAQ.
   Anything a page needs that is not here should become a class here rather
   than inline style, so thirteen pages stay one design.
   ========================================================================== */

.page-article .entry-content > section {
    position: relative;
    padding-block: clamp(3rem, 6vw, 5rem);
}

.page-article .entry-content > section + section {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.page-article .entry-content h2 {
    font-size: clamp(1.65rem, 3.2vw, 2.5rem);
    line-height: 1.18;
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
    text-wrap: balance;
}

.page-article .entry-content h3 {
    font-size: clamp(1.15rem, 1.9vw, 1.4rem);
    line-height: 1.3;
    margin: 2rem 0 0.65rem;
}

.page-article .entry-content p {
    max-width: 44rem;
    margin: 0 0 1.15rem;
    color: var(--color-white-80);
    line-height: 1.7;
}

.page-article .entry-content .lede {
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    color: var(--color-white);
}

.page-article .entry-content a {
    color: var(--v2-gold-bright);
    text-decoration: none;
    border-bottom: 1px solid rgba(242, 214, 154, 0.4);
    transition: border-color 0.2s ease, color 0.2s ease;
}

.page-article .entry-content a:hover {
    color: #fff;
    border-bottom-color: #fff;
}

.page-article .entry-content ul,
.page-article .entry-content ol {
    max-width: 44rem;
    margin: 0 0 1.4rem;
    padding-left: 1.25rem;
    color: var(--color-white-80);
    line-height: 1.7;
}

.page-article .entry-content li {
    margin-bottom: 0.5rem;
}

.page-article .entry-content li::marker {
    color: var(--v2-gold);
}

/* --- Cards ------------------------------------------------------------ */

.v2-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    margin: 2rem 0 0;
}

.v2-card {
    padding: 1.6rem 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.015) 100%);
    position: relative;
}

.v2-card h3 {
    margin-top: 0 !important;
}

.v2-card p:last-child {
    margin-bottom: 0;
}

/* A numbered card, for step sequences. */
.v2-card--step {
    padding-top: 2.9rem;
}

.v2-card--step::before {
    content: attr(data-step);
    position: absolute;
    top: 1.2rem;
    left: 1.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--v2-gold);
}

/* --- Callout ---------------------------------------------------------- */

.v2-note {
    max-width: 44rem;
    margin: 1.75rem 0;
    padding: 1.25rem 1.4rem;
    border-left: 3px solid var(--color-red);
    border-radius: 0 10px 10px 0;
    background: rgba(205, 40, 40, 0.08);
}

.v2-note p:last-child { margin-bottom: 0; }

.v2-note strong { color: #fff; }

/* --- Table ------------------------------------------------------------ */

.v2-table-wrap {
    margin: 1.75rem 0;
    overflow-x: auto;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
}

.v2-table {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.v2-table th,
.v2-table td {
    padding: 0.85rem 1rem;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--color-white-80);
}

.v2-table thead th {
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: rgba(255, 255, 255, 0.045);
    white-space: nowrap;
}

.v2-table tbody tr:last-child td { border-bottom: 0; }

.v2-table tbody tr:hover td { background: rgba(255, 255, 255, 0.025); }

/* --- FAQ --------------------------------------------------------------
   The markup here is what inc/seo.php parses to build FAQPage schema, so the
   structure matters: an h3.faq-question immediately followed by a
   p.faq-answer. Changing this shape means changing the pattern there too. */

.faq-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    margin-top: 2rem;
}

.faq-item {
    padding: 1.4rem 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
}

.page-article .entry-content .faq-question {
    margin: 0 0 0.6rem;
    font-size: 1.0625rem;
    color: #fff;
}

.page-article .entry-content .faq-answer {
    margin: 0;
    font-size: 0.95rem;
}

/* --- Inline CTA ------------------------------------------------------- */

.cta-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem 1.1rem;
    max-width: 44rem !important;
    margin: 2rem 0 !important;
    padding: 1.3rem 1.5rem;
    border: 1px solid rgba(216, 171, 92, 0.3);
    border-radius: 14px;
    background: linear-gradient(100deg, rgba(255, 157, 77, 0.1) 0%, rgba(255, 157, 77, 0) 70%);
}

.cta-inline_note {
    font-size: 0.875rem;
    color: var(--color-white-60);
}


/* ==========================================================================
   6. CTA sections
   ========================================================================== */

.section_cta {
    position: relative;
    isolation: isolate;
    padding-block: clamp(3.5rem, 7vw, 6rem);
    text-align: center;
}

.cta--band {
    border-block: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(90% 120% at 50% 100%, rgba(255, 157, 77, 0.16) 0%, rgba(255, 157, 77, 0) 62%),
        rgba(255, 255, 255, 0.02);
}

.cta--final {
    padding-top: clamp(5rem, 9vw, 8rem);
    /* The amber radial that used to sit at the top of this panel has gone.
       With the flame plate behind it there were two warm sources stacked on
       one another, and the heading ended up sitting in the brightest part of
       both. The flames supply the warmth now; this is just the ground. */
    background: linear-gradient(180deg, #0f0508 0%, #1d070b 52%, #0b0406 100%);
}

/* -----------------------------------------------------------------------
   Fire behind the closing panel.

   The plate is anchored to the BOTTOM and sized to about half the panel's
   height, because a fire that fills the whole box stops reading as a hearth
   and starts reading as a texture. Two layers sit over it: a vertical scrim
   that is near-solid at the top where the heading sits and clears toward the
   base where the flames are, and a horizontal one that darkens the outer
   edges so the fire pools in the middle.

   Inert until assets/images/ornaments/fireplace-flames.webp exists — the
   unresolved url() leaves the layer transparent and the gradient panel above
   is unchanged, so this is safe to ship ahead of the art.
   ----------------------------------------------------------------------- */
.cta--final::after,
.section--flames::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(180deg,
            rgba(10, 3, 6, 0.97) 0%,
            rgba(10, 3, 6, 0.90) 30%,
            rgba(10, 3, 6, 0.72) 58%,
            rgba(10, 3, 6, 0.52) 100%),
        linear-gradient(90deg,
            rgba(10, 3, 6, 0.85) 0%,
            rgba(10, 3, 6, 0) 28%,
            rgba(10, 3, 6, 0) 72%,
            rgba(10, 3, 6, 0.85) 100%),
        var(--art-flames);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: center, center, center bottom;
    /* `cover` on the plate, never a percentage pair.
       This was `100% 58%`, which stretches the image to the box instead of
       fitting it: on a 1280px-wide panel that forced a 2:1 render into 3.8:1
       and the flames came out visibly wide. `cover` preserves the ratio and
       crops instead — and because the plate is anchored bottom and its top
       third is black by brief, what gets cropped is empty sky. */
    background-size: cover, cover, cover;
    pointer-events: none;
}

/* The panel's own content has to sit in front of the fire, not behind it. */
.cta--final > *,
.section--flames > * {
    position: relative;
    z-index: 1;
}

/* On a phone the panel is narrower and taller, so the fire is given more of
   the height and the side vignette is dropped — at that width it would eat
   most of the flame rather than just the edges. */
@media (max-width: 767px) {
    .cta--final::after,
    .section--flames::after {
        background-image:
            linear-gradient(180deg,
                rgba(10, 3, 6, 0.97) 0%,
                rgba(10, 3, 6, 0.88) 36%,
                rgba(10, 3, 6, 0.62) 100%),
            var(--art-flames);
        background-position: center, center bottom;
        background-size: cover, cover;
    }
}

.cta_inner {
    max-width: 46rem;
    margin-inline: auto;
}

/* A CTA band typed into page content sits inside .entry-content, where the
   generic `> section` rule would otherwise win on specificity and flatten its
   padding. It also needs to bleed past the prose column to the full width of
   the container, or it reads as a card rather than as a band. */
.page-article .entry-content > section.section_cta {
    padding-block: clamp(3rem, 6vw, 4.5rem);
    padding-inline: clamp(1.5rem, 4vw, 3rem);
    margin-block: clamp(2.5rem, 5vw, 4rem);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
}

.page-article .entry-content > section.section_cta + section {
    border-top: 0;
}

.page-article .entry-content .cta_heading,
.page-article .entry-content .cta_text {
    max-width: 38rem;
    margin-inline: auto;
}

.cta_heading {
    margin: 0 0 1rem;
    text-wrap: balance;
}

.cta_text {
    margin: 0 auto 2rem;
    max-width: 38rem;
    color: var(--color-white-80);
    line-height: 1.65;
}

/* One centred line, not a stack.
   This was a wrapping flex row where every item carried its own leading dot
   and 1.1rem of indent, which on anything under about 900px broke to two or
   three lines and pushed the panel taller than the button it supports. The
   dots are now separators *between* items rather than bullets *before* them:
   the first item loses its indent entirely, and four short phrases fit on one
   line at most widths. `align-items: center` keeps the dots optically on the
   middle of the text rather than pinned near the cap height. */
.cta_props {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.15rem 0;
    margin: 1.9rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--color-white-60);
}

.cta_props li {
    display: inline-flex;
    align-items: center;
}

/* `.page-article .entry-content ul` (0,3,1) outranks `.cta_props` (0,1,0), so
   a props row typed into page content was picking up that rule's zero top
   margin and 1.25rem indent while the theme-rendered one kept its own. Two
   identical-looking rows, two different spacings. Re-assert it at matching
   weight. */
.page-article .entry-content .cta_props {
    margin: 1.9rem 0 0;
    padding-left: 0;
}

/* Separator, so there is no dot hanging off the front of the row. */
.cta_props li + li::before {
    content: "";
    flex: none;
    width: 4px;
    height: 4px;
    margin: 0 0.75rem;
    border-radius: 50%;
    background: var(--v2-gold);
    opacity: 0.75;
}


/* ==========================================================================
   7. Related rail
   ========================================================================== */

.section_related {
    position: relative;
    padding-block: clamp(3.5rem, 6vw, 5.5rem) clamp(3rem, 5vw, 4.5rem);
    /* Plain black. The warm light on this page is now spent entirely on the
       two CTA panels; the rail between them is deliberately the quietest
       thing on the page, so the eye goes back to the buttons rather than
       lingering here. The cards carry their own faint surface. */
    background: var(--color-dark);
}

.related_heading {
    margin: 0 0 1.75rem;
    color: var(--color-white-60);
    font-size: 0.8125rem !important;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.related_grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.related_card {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.025);
    transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}

.related_card:hover {
    border-color: rgba(216, 171, 92, 0.5);
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-3px);
}

.related_card-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--v2-gold);
}

.related_card-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
}

.related_card-desc {
    font-size: 0.9rem;
    color: var(--color-white-60);
    line-height: 1.55;
}

.related_card-more {
    margin-top: auto;
    padding-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--v2-gold-bright);
}


/* ==========================================================================
   8. Footer
   ========================================================================== */

.section_footer {
    position: relative;
    padding-top: clamp(3.5rem, 6vw, 5rem);
}

.footer_top-ornament {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: clamp(2rem, 4vw, 3rem);
    pointer-events: none;
    background-image: var(--art-snow-edge);
    background-repeat: repeat-x;
    background-position: center top;
    background-size: auto 100%;
}

.footer_grid {
    display: grid;
    gap: 2.5rem 2rem;
    grid-template-columns: minmax(14rem, 1.4fr) repeat(auto-fit, minmax(11rem, 1fr));
    padding-bottom: 2.5rem;
}

.footer_brand-blurb {
    margin: 1rem 0 0;
    max-width: 22rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-white-60);
}

.footer_col-heading {
    margin: 0 0 1rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--v2-gold);
}

.footer_list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer_list li { margin-bottom: 0.6rem; }

.footer_list a {
    font-size: 0.9rem;
    color: var(--color-white-60);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer_list a:hover { color: #fff; }

.footer_sister {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer_sister-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1 1 15rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    text-decoration: none;
    transition: border-color 0.25s ease, background 0.25s ease;
}

.footer_sister-card:hover {
    border-color: rgba(216, 171, 92, 0.45);
    background: rgba(255, 255, 255, 0.03);
}

.footer_sister-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    object-fit: cover;
    flex: none;
}

.footer_sister-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.footer_sister-kicker {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-white-60);
}

.footer_sister-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
}

.footer_legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.85rem;
    color: var(--color-white-60);
}

.footer_legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.footer_legal a {
    color: var(--color-white-60);
    text-decoration: none;
}

.footer_legal a:hover { color: #fff; }


/* ==========================================================================
   9. Responsive
   ========================================================================== */

@media (max-width: 991px) {
    .footer_grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .section_page-hero {
        min-height: auto;
        padding-top: calc(var(--header-height) + 3rem);
    }

    /* On a phone the scrim has to run vertically instead: there is no left
       third to hide the headline in, so the plate is darkened from the bottom
       up and the type sits over the darkest part of it. */
    .page-hero_scrim {
        background: linear-gradient(180deg,
            rgba(0, 3, 16, 0.78) 0%,
            rgba(0, 3, 16, 0.42) 30%,
            rgba(0, 3, 16, 0.86) 68%,
            rgba(0, 3, 16, 0.97) 100%);
    }

    .page-hero_plate { background-position: center 35%; }

    .footer_grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer_legal { justify-content: flex-start; }

    .cta-inline { flex-direction: column; align-items: flex-start; }
}


/* ==========================================================================
   10. Motion and print
   ========================================================================== */

/* Media queries add no specificity, so this has to sit AFTER the .cta_props
   base rule rather than beside the ornament code where it was first written.
   From up there the plain `.cta_props` selector lost to the later
   `display: flex`, and only the higher-specificity in-content variant took
   effect — one CTA became a grid on a phone and the other stayed a flex row. */
@media (max-width: 600px) {
    /* Two per row, as a grid rather than a wrapping flex line.
       Left to wrap, four phrases of different lengths break 3 + 1 or 2 + 2
       depending on the device width, and a separator can end up dangling at
       the start of a wrapped line. A two-column grid is the same shape on
       every phone. The columns size to content and the pair is centred, so
       the block stays optically balanced rather than stretching edge to
       edge. */
    .cta_props,
    .page-article .entry-content .cta_props {
        display: grid;
        grid-template-columns: repeat(2, auto);
        justify-content: center;
        justify-items: start;
        gap: 0.45rem 1.5rem;
        margin-top: 1.35rem;
    }

    /* Every item gets its own dot back — as a marker this time, since there
       is no longer a single line for them to separate. */
    .cta_props li::before,
    .cta_props li + li::before {
        display: block;
        content: "";
        flex: none;
        width: 4px;
        height: 4px;
        margin: 0 0.5rem 0 0;
        border-radius: 50%;
        background: var(--v2-gold);
        opacity: 0.75;
    }
}


@media (prefers-reduced-motion: reduce) {
    .page-hero_plate {
        animation: none;
        transform: scale(1.04);
    }

    .related_card,
    .footer_sister-card {
        transition: none;
    }

    .related_card:hover { transform: none; }
}

@media print {
    .section_page-hero,
    .section_cta,
    .section_related,
    .ornament,
    .footer_top-ornament {
        display: none !important;
    }

    .page-article .entry-content p,
    .page-article .entry-content li {
        color: #000;
    }
}

/* ---------------------------------------------------------------------------
 * The free Santa video hero.
 *
 * Only on /free-santa-video/. The cartoon Santa is the product on that page —
 * he is the character who appears in the video — so he gets to stand next to
 * the offer rather than being decoration further down. Two columns on desktop,
 * Santa underneath on mobile where a side-by-side would shrink both to nothing.
 * ------------------------------------------------------------------------- */

.page-article .entry-content .free-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
}

.page-article .entry-content .free-hero_copy > :first-child {
    margin-top: 0;
}

.free-hero_figure {
    justify-self: center;
}

.free-hero_figure img {
    display: block;
    width: 100%;
    max-width: 17rem;
    height: auto;
    /* Lifts a flat cut-paper character off a near-black ground. */
    filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.55));
}

@media (max-width: 780px) {
    .page-article .entry-content .free-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .free-hero_figure img {
        max-width: 12rem;
    }
}

/* ---------------------------------------------------------------------------
 * Primary navigation.
 *
 * The <nav> is a SIBLING of the header, never a child. That is load-bearing:
 * as a descendant it inherited the header's containing block (backdrop-filter
 * clipped the fixed drawer to the height of the bar) and the header's stacking
 * context (the bar could not paint above its own descendant, so scrolling
 * links ran under the close button). Outside the header, both classes of bug
 * are structurally impossible rather than patched.
 *
 * One render serves both breakpoints. Desktop is a centred bar in the header
 * row whose dropdowns open on :hover and :focus-within, with no JavaScript at
 * all — the links are in the DOM, crawlable, and keyboard reachable whether or
 * not any script runs. Below 992px the same element is the drawer.
 * ------------------------------------------------------------------------- */

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.header_actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

.nav_menu { list-style: none; margin: 0; padding: 0; }
.nav_item { position: relative; }

.nav_link {
    display: block;
    padding: 0.6rem 0.7rem;
    /* Full white. Nav labels are short and sit on a near-black ground, so the
       usual muted grey reads as disabled rather than secondary. */
    color: var(--color-white);
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 8px;
    transition: color 0.2s ease, background 0.2s ease;
}

.nav_link:focus-visible {
    outline: 2px solid var(--v2-gold, #d8ab5c);
    outline-offset: 2px;
}

.nav_item--parent > .nav_link { padding-right: 1.5rem; }

.nav_caret {
    position: absolute;
    top: 50%; right: 0.55rem;
    width: 0.42rem; height: 0.42rem;
    margin-top: -0.28rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    color: var(--color-white-60);
    transform: rotate(45deg);
    pointer-events: none;
    transition: transform 0.2s ease, color 0.2s ease;
}

.nav_cta { display: none; }

/* ----------------------------------------------------------- desktop bar -- */

@media (min-width: 992px) {
    /* Sits in the header row as a fixed, centred strip. Centred rather than
       squeezed between the logo and the CTA, so the two never fight for space
       as the menu grows. pointer-events is off on the strip and back on for
       the list, so the space either side stays clickable. */
    .site-nav {
        position: fixed;
        top: 0; left: 0; right: 0;
        z-index: 1001;
        height: var(--header-height);
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
    }

    .nav_menu {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        pointer-events: auto;
    }

    .nav_submenu {
        position: absolute;
        top: calc(100% + 0.4rem);
        left: 0;
        z-index: 1;
        min-width: 15rem;
        margin: 0;
        padding: 0.4rem;
        list-style: none;
        background: #0a0f21;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 12px;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
        /* Clipped rather than display:none, so the links stay in the
           accessibility tree and the panel can animate. */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    }

    /* A hit bridge across the gap, or the panel closes as the pointer travels. */
    .nav_item--parent::after {
        content: "";
        position: absolute;
        top: 100%; left: 0; right: 0;
        height: 0.6rem;
    }

    .nav_item--parent:hover > .nav_submenu,
    .nav_item--parent:focus-within > .nav_submenu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .nav_item--parent:hover > .nav_caret,
    .nav_item--parent:focus-within > .nav_caret {
        transform: rotate(-135deg);
        color: var(--color-white);
    }

    .nav_link--child {
        padding: 0.55rem 0.75rem;
        color: var(--color-white);
        font-size: 0.92rem;
        white-space: nowrap;
    }

    .nav_link--child:hover,
    .nav_link--child:focus-visible {
        background: rgba(255, 255, 255, 0.08);
    }

    .header_menu-toggle { display: none; }
}

/* ---------------------------------------------------------------- drawer -- */

@media (max-width: 991px) {
    .site-nav {
        position: fixed;
        top: 0; right: 0;
        /* Under the header (10001) so the burger stays reachable and the list
           scrolls beneath an opaque bar; over the scrim (9998). */
        z-index: 9999;
        width: min(21rem, 86vw);
        display: block;
        /* Height, not `bottom: 0`. On iOS a fixed element resolves `bottom`
           against the layout viewport, which is taller than the visible area
           while the browser chrome shows — the foot of the drawer, and the CTA
           in it, ended up under Safari's toolbar. 100dvh tracks the visible
           viewport; the 100vh line is the fallback. */
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* Keep the swipe in the drawer rather than chaining to the page under it. */
        overscroll-behavior-y: contain;
        touch-action: pan-y;
        padding: calc(var(--header-height) + 1rem) 1.5rem calc(2rem + env(safe-area-inset-bottom));
        background: #050b1c;
        border-left: 1px solid rgba(255, 255, 255, 0.14);
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.28s ease, visibility 0.28s;
    }

    .site-nav.is-open { transform: translateX(0); visibility: visible; }

    /* The bar paints above the drawer so the burger stays clickable and the
       list disappears cleanly beneath it. Only legitimate because the nav is a
       sibling — as a descendant this could not work at any z-index. */
    .section_header { z-index: 10001; }

    /* Group parents read as headings here, the way the footer columns do. */
    .nav_item--parent > .nav_link {
        margin-top: 1.4rem;
        padding-left: 0;
        color: var(--v2-gold-bright, #f2d69a);
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.09em;
        text-transform: uppercase;
    }

    .nav_item--parent > .nav_caret { display: none; }

    .nav_submenu { display: block; margin: 0 0 0.25rem; padding: 0; list-style: none; }

    .nav_item:not(.nav_item--parent) > .nav_link { padding-left: 0; }

    .nav_link--child {
        padding: 0.62rem 0;
        color: var(--color-white);
        font-size: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 0;
    }

    .nav_cta { display: block; margin-top: 1.75rem; text-align: center; }

    .nav_scrim {
        position: fixed;
        inset: 0;
        z-index: 9998;
        background: rgba(0, 0, 0, 0.6);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.28s ease, visibility 0.28s;
    }

    .nav_scrim.is-open { opacity: 1; visibility: visible; }

    .header_menu-toggle { display: flex; }
    .header_cta-desktop { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .site-nav, .nav_scrim, .nav_submenu { transition: none; }
}