/* =========================================================================
   Safety Waiver Template - template-specific styles

   Loaded ONLY on template-safety-waiver.php; additive on top of
   safety-experiences.css which provides the shared cinematic-hero base
   (.waiver-hero / .waiver-hero-bg / .waiver-hero-overlay /
   .waiver-hero-content already exist there as combined selectors).

   Contains:
   - Waiver hero typography (page-title, subtitle, intro)
   - Waiver-template hero-size overrides (block-level via body class)
   - Download block: image bg + dark overlay + floating description card
   - Download CTA button (sky-cyan, large, mirrors unified btn system)
   - Hero entrance animation delays for the Waiver children
   - Waiver-only @media overrides
   ========================================================================= */

/* Hide standard page hero - the cinematic .waiver-hero replaces it. */
.page-template-template-safety-waiver #pageHeader {
    display: none;
}

/* -------------------------------------------------------------------------
   Waiver-template hero shape

   Same architectural pattern as the Interview template: hero is a normal
   block with padding-top for header clearance, and the download block
   protrudes below the hero into the dark .waiver-section sibling. The
   .waiver-hero-backdrop wraps bg + overlay so they stay clipped while
   the hero itself can let .waiver-download-wrapper bleed below.
   ------------------------------------------------------------------------- */

.page-template-template-safety-waiver .waiver-hero {
    display: block;
    overflow: visible;
    /* Vertical spacing is editor-controlled via the page-level
       hero_padding ACF group. The padding-top slider sets actual
       padding-top (gap from page top to hero text). The padding-bottom
       slider is wired to the .waiver-download-wrapper's margin-top
       below - it sets the gap between the hero text and the download
       card. The hero's own CSS padding-bottom stays 0 because the
       wrapper's negative margin-bottom would otherwise swallow it. */
    padding-top:    var(--hero-pt-d, 305px);
    padding-right:  20px;
    padding-bottom: 0;
    padding-left:   20px;
    text-align: center;
}

.waiver-hero-backdrop {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

/* Position + centering only here. The actual max-width comes from the
   per-template rule in safety-experiences.css that reads the
   --hero-content-width slider value (default 61 = 756 px). */
.page-template-template-safety-waiver .waiver-hero-content {
    position: relative;
    z-index: 2;
    margin: 0 auto;
}

/* -------------------------------------------------------------------------
   Hero typography
   ------------------------------------------------------------------------- */

.waiver-page-title {
    font-size: clamp(38px, 5.2vw, 60px);
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
    margin: 0 0 16px;
}

.waiver-subtitle {
    font-size: clamp(18px, 2vw, 22px);
    line-height: 1.4;
    color: rgba(255, 255, 255, .9);
    margin: 0 0 18px;
    font-weight: 500;
}

.waiver-intro {
    font-size: clamp(15px, 1.6vw, 17px);
    line-height: 1.6;
    color: rgba(255, 255, 255, .85);
    max-width: 680px;
    margin: 0 auto;
}
.waiver-intro p { margin: 0 0 10px; }
.waiver-intro p:last-child { margin-bottom: 0; }

/* Quick-download pill at the bottom of the hero content stack so the
   visitor sees the download CTA without scrolling. Same href as the
   main download button below; reuses card_button_label so the editor
   has one source of truth for the wording.

   Visual treatment is intentionally LIGHT: cyan-tinted translucent
   fill + thin cyan border + frosted backdrop, sitting subtly on the
   dark hero. Hover deepens the fill into a more prominent state.
   This is meant to be a hint, not a primary CTA - the bigger main
   button below the hero stays the action focus.

   The .waiver-hero-quick-download selector is wired into the unified-
   button system in style.css (transition / hover lift + brightness /
   active shadow / focus-visible outline). The pill border-radius
   (999px) overrides the unified 8 px radius. */
.waiver-hero-quick-download {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 22px auto 0;
    padding: 9px 18px;
    background: rgba(120, 197, 219, .14);
    color: #fff;
    border: 1px solid rgba(120, 197, 219, .55);
    -webkit-backdrop-filter: blur(6px) saturate(140%);
            backdrop-filter: blur(6px) saturate(140%);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1;
    border-radius: 999px;        /* pill - overrides unified --wwh-btn-radius */
    will-change: transform;
}
.waiver-hero-quick-download:hover,
.waiver-hero-quick-download:focus,
.waiver-hero-quick-download:focus-visible {
    color: #fff;
    background: rgba(120, 197, 219, .32);
    border-color: rgba(120, 197, 219, .9);
}
.waiver-hero-quick-download-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: .9;
}
.waiver-hero-quick-download-label { white-space: nowrap; }

/* Soft halo pulse - cyan ring expands gently and fades around the
   pill every 3 s. Lower alpha (.30 instead of .55) and smaller
   spread (10 px instead of 18) than the previous solid version
   so the effect reads as a quiet 'breath' rather than a pulse. */
.waiver-hero-quick-download::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 0 rgba(120, 197, 219, .30);
    pointer-events: none;
    z-index: -1;
    animation: waiver-badge-pulse 3s ease-out infinite;
}
@keyframes waiver-badge-pulse {
    0%   { box-shadow: 0 0 0 0    rgba(120, 197, 219, .30); }
    70%  { box-shadow: 0 0 0 10px rgba(120, 197, 219, 0);   }
    100% { box-shadow: 0 0 0 10px rgba(120, 197, 219, 0);   }
}
.waiver-hero-quick-download:hover::after,
.waiver-hero-quick-download:focus::after,
.waiver-hero-quick-download:focus-visible::after {
    animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
    .waiver-hero-quick-download::after { animation: none; }
}

/* -------------------------------------------------------------------------
   Responsive hero overrides (parallel to Interview)
   ------------------------------------------------------------------------- */

@media (max-width: 1199px) {
    .page-template-template-safety-waiver .waiver-hero {
        padding-top:    var(--hero-pt-t, 240px);
        padding-bottom: 0;
    }
}
@media (max-width: 991px) {
    .page-template-template-safety-waiver .waiver-hero {
        padding-top:    var(--hero-pt-tn, 240px);
        padding-bottom: 0;
    }
}
@media (max-width: 768px) {
    .page-template-template-safety-waiver .waiver-hero {
        padding-top:    var(--hero-pt-m, 195px);
        padding-bottom: 0;
    }
    .waiver-page-title { font-size: clamp(26px, 6.5vw, 36px); }
    .waiver-hero-quick-download { font-size: 12px; padding: 8px 16px; }
}

/* -------------------------------------------------------------------------
   Download block - direct child of .waiver-hero (mirrors the Interview
   .interview-video-wrapper). Sits 40 px below the hero content
   (margin-top) and protrudes below the hero's logical bottom via
   margin-bottom: -X so roughly half of the block extends into the
   sibling .waiver-section.

   Tuned per breakpoint against the actual rendered wrapper height
   (wrapper width = viewport - 2 x side padding, height = width / 1.778).
   ------------------------------------------------------------------------- */

.waiver-download-wrapper {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1240px;
    /* margin-top reads the hero_padding "Padding Bottom Desktop"
       slider via the same CSS var the hero uses; semantic = "space
       between hero text and download card". margin-bottom: -349px =
       ~50% protrusion of a 698 px (1240/1.778) tall block into the
       sibling .waiver-section dark band. */
    margin-top:    var(--hero-pb-d, 40px);
    margin-right:  auto;
    margin-bottom: -349px;
    margin-left:   auto;
    border-radius: 18px;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, .25),
        0 40px 80px -15px rgba(0, 0, 0, .7),
        0 -2px 20px rgba(0, 0, 0, .25);
}
.waiver-download-card {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #0a2540;
}
.waiver-download-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
/* Lighter overlay so the symbol graphic stays visible behind the card.
   Just enough darkening to keep readable contrast around the card edges. */
.waiver-download-card-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center, rgba(10,37,64,.04) 0%, rgba(10,37,64,.18) 70%, rgba(10,37,64,.28) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Floating description card. Centered on top of the image, max-width
   so the layout works at any viewport. Uses backdrop-filter for a soft
   frosted look on capable browsers; falls back to high-opacity tile.
   Stronger drop-shadow so the card lifts off the (lighter) image
   behind it without relying on the dark overlay. */
.waiver-download-floating {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* All three of --waiver-card-opacity / -shadow-strength / -width
       are set inline by the template from the matching ACF range
       sliders (see field_safety_wai_card_opacity / -shadow / -width).
       Mobile (<=768) overrides below disable the opacity + width
       behaviour because the stacked layout has no image behind the
       card. Shadow strength still applies on every breakpoint. */
    width: min(var(--waiver-card-width, 520px), 86%);
    background: rgb(255 255 255 / var(--waiver-card-opacity, .96));
    -webkit-backdrop-filter: blur(14px) saturate(140%);
            backdrop-filter: blur(14px) saturate(140%);
    border-radius: 16px;
    box-shadow:
        0 48px 110px rgb(10 37 64 / calc(.60 * var(--waiver-card-shadow-strength, 1))),
        0 24px 56px  rgb(10 37 64 / calc(.42 * var(--waiver-card-shadow-strength, 1))),
        0 8px 20px   rgb(10 37 64 / calc(.32 * var(--waiver-card-shadow-strength, 1))),
        0 2px 4px    rgb(10 37 64 / calc(.28 * var(--waiver-card-shadow-strength, 1)));
    padding: 32px 32px 28px;
    text-align: center;
    color: #0a2540;
}
.waiver-download-eyebrow {
    font-size: 12px;
    letter-spacing: .28em;
    text-transform: uppercase;
    /* Mid-Navy on the white card body (sky cyan was too light to read on
       a white background; brand palette per CLAUDE.md). One step lighter
       than the heading's Deep Navy below for a clean type hierarchy. */
    color: #153354;
    font-weight: 700;
    margin: 0 0 12px;
}
.waiver-download-heading {
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 700;
    line-height: 1.2;
    color: #0a2540;
    margin: 0 0 14px;
}
.waiver-download-text {
    font-size: 18px;
    line-height: 1.55;
    color: #45545f;
    margin: 0 0 22px;
}
.waiver-download-text p { margin: 0 0 8px; }
.waiver-download-text p:last-child { margin-bottom: 0; }

/* Download CTA - layout-only rules (color, padding, gap). The unified
   button system in style.css (--wwh-btn-* tokens + shared selector
   block) supplies radius, transition, hover lift+brightness, hover/
   active shadows, and focus-visible outline. .waiver-download-cta is
   listed there alongside the other audited buttons. */
.waiver-download-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    /* Dark button on the white card - inverse of the small badge in the
       hero. Deep Navy bg + white label for strong contrast against the
       light card background. */
    background: #0a2540;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    will-change: transform;
}
.waiver-download-cta:hover,
.waiver-download-cta:focus,
.waiver-download-cta:focus-visible { color: #fff; }
.waiver-download-cta-icon {
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
}
.waiver-download-cta-label { white-space: nowrap; }

/* -------------------------------------------------------------------------
   Dark transitional section below the hero - matches #051526->#0d3156
   gradient on the Interview template so the protruding lower half of
   .waiver-download-wrapper sits on a seamless dark field.
   ------------------------------------------------------------------------- */

.waiver-section {
    position: relative;
    background: linear-gradient(180deg, #051526 0%, #0d3156 100%);
    min-height: 489px;           /* 349 wrapper-protrusion + 140 breathing */
}

/* -------------------------------------------------------------------------
   Responsive download-block overrides (parallel to Interview's
   margin-bottom + section min-height tuning).
   ------------------------------------------------------------------------- */

@media (max-width: 1199px) {
    .waiver-download-wrapper {
        margin-top:    var(--hero-pb-t, 40px);
        margin-bottom: -277px;                            /* ~50% of 553 */
    }
    .waiver-section { min-height: 387px; }
}
@media (max-width: 991px) {
    .waiver-download-wrapper {
        margin-top:    var(--hero-pb-tn, 40px);
    }
}
@media (max-width: 991px) {
    .waiver-download-floating {
        padding: 26px 22px 24px;
        width: min(440px, 90%);
    }
    .waiver-download-text { font-size: 16px; }
}
/* Mobile: drop the card-on-image overlay layout. Image sits on top
   in a fixed 16:9 frame; description card stacks below in the same
   wrapper. Wrapper box-shadow still wraps both as a single visual unit. */
@media (max-width: 768px) {
    .waiver-download-wrapper {
        margin-top:    var(--hero-pb-m, 30px);
        margin-bottom: -97px;        /* ~50% of 193 */
        border-radius: 14px;
    }
    .waiver-download-card {
        display: grid;
        grid-template-rows: auto auto;
        aspect-ratio: auto;
        border-radius: 14px;
    }
    .waiver-download-bg {
        position: relative;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9 !important;   /* override inline acf focus aspect */
    }
    .waiver-download-card-overlay { display: none; }
    .waiver-download-floating {
        position: static;
        transform: none;
        width: auto;
        margin: 0;
        background: #fff;
        -webkit-backdrop-filter: none;
                backdrop-filter: none;
        border-radius: 0 0 14px 14px;
        box-shadow: none;
        padding: 22px 20px;
        text-align: left;
    }
    .waiver-download-cta {
        width: 100%;
        justify-content: center;
        padding: 13px 16px;
    }
    .waiver-section { min-height: 177px; }
}

/* -------------------------------------------------------------------------
   Hero entrance animation - per-element stagger delays for the Waiver
   content stack. Base 'animation: sst-exp-hero-in' is defined on
   .waiver-hero-content > * in safety-experiences.css; here we only add
   the delays for waiver-specific children.
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    .exp-hero-eyebrow         { animation-delay: .10s; }
    .waiver-page-title        { animation-delay: .22s; }
    .waiver-subtitle          { animation-delay: .34s; }
    .waiver-intro             { animation-delay: .46s; }
    /* The shared 'sst-exp-hero-in' animation on .waiver-hero-content > *
       ends at 'transform: none' with fill-mode:both - which permanently
       locks the badge's transform via animation-priority and defeats the
       unified-button :hover translateY(-2px). Override animation-name to
       a transform-FREE opacity-only fade so transform stays free for the
       hover lift. Other animation-* (duration / easing / fill-mode)
       inherit from the parent rule's shorthand. */
    .page-template-template-safety-waiver .waiver-hero-quick-download {
        animation-name: waiver-badge-fade-in;
        animation-delay: .58s;
    }
}
@keyframes waiver-badge-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* -------------------------------------------------------------------------
   Reveal animation on the download wrapper (matches the .interview-video-
   wrapper pattern from safety-interview.css).
   ------------------------------------------------------------------------- */

.reveal-enabled .waiver-download-wrapper {
    opacity: 0;
    transform: translateY(42px) scale(.965);
    filter: blur(6px);
    transition: opacity .95s var(--exp-ease-soft) var(--reveal-delay, 0ms),
                transform .95s var(--exp-ease-soft) var(--reveal-delay, 0ms),
                filter   .7s var(--exp-ease-soft) var(--reveal-delay, 0ms);
    will-change: opacity, transform, filter;
}
.reveal-enabled .waiver-download-wrapper.is-visible {
    opacity: 1;
    transform: none;
    filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
    .waiver-download-wrapper,
    .reveal-enabled .waiver-download-wrapper {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}