/*!
Theme Name: Buena Vista
Author: The Pivot Plan
Description: ACF flexible-content starter theme. Clients build pages from sections; everything site-wide lives in Theme Options. See CLAUDE.md and docs/ in the repo root.
Version: 1.0.1
Text Domain: pivotstarter
*/

/* =========================================================================
   BASE DESIGN SYSTEM — brand-neutral. The first thing a new site does is
   replace the :root tokens (sampled from the mock, never eyeballed) and the
   font stacks. Per-site build CSS goes in claude.css, which loads AFTER
   this file and wins ties (see inc/enqueue.php — order is the cascade).

   Rules that govern everything here: shared, well-named classes over
   per-element styling; vendor prefixes authored PREFIXED-FIRST, standard
   LAST (Lightning CSS drops the standard property otherwise); every
   animation gets a reduced-motion fallback in the ADDED block at the end.
   ========================================================================= */

/* ---------------------------------------------- tokens + the design scale
   Buena Vista's palette, sampled off original-designs/. Surfaces are named
   PAIRS (background + readable text) — the Section Settings select maps to
   the *back classes below, so changing a token restyles every section that
   uses that surface. No color pickers anywhere.
   The mock is a 1920px-wide export of a 1440px composition (1.3333x). Every
   measurement below is a mock pixel divided by 1.3333 — logo 386->290,
   container 1648->1236, body ink 23->17.8, h2 pitch 107->80. Divide by 1.3333
   before trusting any number sampled off original-designs/.
--------------------------------------------------------------------------- */
:root {
    /* Buena Vista brand. The three hexes are STATED IN THE BRIEF, so they win
       over the mock (CLAUDE.md hard rule 5). Flagged deltas: every flat green
       area in all six designs samples #8E996F and every flat brown samples
       #5A4C41 (cards) / #5D4B3F (footer) -- the brief's green runs ~10 darker
       than the mock, and the two browns are one brown here. */
    --green: #848F65;
    --brown: #5D4B3F;
    --brown-rgb: 93, 75, 63;
    /* same brown as channels, for the translucent nav — color-mix() is not
       in Safari 14/15 and those are in this project's browserslist */
    --orange: #E1A845;

    /* Neutrals, sampled off the mock. The near-black is warm, not #000. */
    --text: #17120E;
    /* body + headings on light surfaces */
    --black: #17120E;
    --paper: #F4F4F4;
    /* pale card surface (Insights video cards, Articles grid) */
    --light: #EFF0F2;

    /* System aliases. The starter's components read --primary / --dark, so
       point them at the brand rather than restyling every component. */
    --primary: var(--green);
    /* the workhorse accent: buttons, links, eyebrows */
    --primary-2: var(--orange);
    /* accent companion: the script display face, decorative shapes */
    --dark: var(--brown);
    /* the dark surface on this site is the brown, not a near-black */

    /* Type. Typekit kit vcc0cie (inc/enqueue.php). Serenity is the h1 face
       ONLY -- section headings are Inter bold; Alisha is the script used once,
       on the home banner. */
    --font-display: serenity, "Trebuchet MS", sans-serif;
    --font-script: alisha, "Brush Script MT", cursive;
    --font-body: inter-18pt, Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Spacing. Sections in the mock run ~145px top and bottom at 1440; the
       clamps are ours -- the mock is a desktop composition and owes us no
       mobile value. */
    --pad-md: clamp(3.5rem, 8vw, 8rem);
    --pad-lg: clamp(4.5rem, 10vw, 11rem);
    --container-pad: 1.25rem;
    --container: 1236px;
    /* 1648 mock px / 1.3333 */

    /* Chrome. Nav: logo is 65px tall sitting 30px off the top, so the bar is
       ~125px at 1440. It is transparent over the banner until scroll. */
    --navHeight: 124px;
    --mobileNavHeight: 76px;
}

/* ------------------------------------------------------------------- base */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scrollbar-gutter: stable;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.125rem;
    /* mock body ink is 23 mock px -> ~17.8 CSS px */
    color: var(--text);
    background: #fff;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
}

/* Anything with hidden must actually hide, no matter what display it also
   carries — a bare display rule on a [hidden]-able element resurrects it. */
[hidden] {
    display: none !important;
}

/* Anchor targets clear the sticky nav */
[id] {
    scroll-margin-top: calc(var(--navHeight) + 1rem);
}

a {
    color: var(--primary);
}

:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ------------------------------------------------------------- containers */
.container {
    /* Padding on the WIDTH as well as the box: at border-box the content box
       is exactly 1100px where there is room, and max-width clamps where
       there is not, leaving the padding as real inset at every viewport. */
    width: calc(var(--container) + 2 * var(--container-pad));
    max-width: 100%;
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

.smallcontainer {
    max-width: 600px;
    margin-inline: auto;
    text-align: center;
}

.fullwidth {
    width: 100%;
}

/* ---------------------------------------------------------------- spacing */
.pad_y {
    padding-block: var(--pad-md);
}

.lg_pad_y {
    padding-block: var(--pad-lg);
}

.lg_pad_top {
    padding-top: var(--pad-lg);
}

.lg_pad_bottom,
.pad_bottom {
    padding-bottom: var(--pad-lg);
}

/* ------------------------------------------------------------------ type */
h1,
h2,
h3,
h4 {
    font-family: var(--font-body);
    /* Inter carries every heading LEVEL; only .display swaps in Serenity */
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 1rem;
}

/* Display faces carry the site's display font — swap the stack per site.
   Heading LEVEL comes from page structure; SIZE always comes from these
   classes, never from picking a bigger heading tag. */
.display,
.display-sm {
    font-weight: 700;
    line-height: 1.08;
    margin: 0 0 1rem;
}

/* THE page title, and only that: every <h1> in the design set is Serenity,
   all caps, left- or centre-set over the banner photo. 96px at 1440 on the
   home banner, 88px on the internal ones -- one size covers both. A styled
   fragment inside it (the Alisha script line) resets text-transform at its
   own render site; it stays ONE heading. */
.display {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 1.27rem + 5.26vw, 6rem);
    text-transform: uppercase;
    letter-spacing: .005em;
}

/* Section headings. Inter bold, sentence case -- 72px at 1440. */
.display-sm {
    font-family: var(--font-body);
    font-size: clamp(2rem, 1.12rem + 3.76vw, 4.5rem);
    letter-spacing: -.02em;
}

/* THE lead size, and nothing else. Compose with a color utility — a lead
   that bundles size + color + decoration into one class forces the
   decoration onto every lead that only wanted the size. */
.largefont {
    font-size: clamp(1.25rem, 1.16rem + .38vw, 1.5rem);
    /* 24px at 1440 */
    line-height: 1.4;
}

.subheader {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    font-size: .9rem;
}

.text-center {
    text-align: center;
}

.uppercase {
    text-transform: uppercase;
}

/* -------------------------------------------------------------- surfaces
   The Section Settings "Section Style" select maps to these (helpers.php).
   Transparent = no class = the page background shows through.
--------------------------------------------------------------------------- */
.whiteback {
    background: #fff;
    color: var(--text);
}

.paperback {
    background: var(--paper);
    color: var(--text);
}

.darkback {
    background: var(--dark);
    color: #fff;
}

.darkback a:not(.mybutton) {
    color: var(--primary-2);
}

.accentback {
    background: var(--primary);
    color: #fff;
}

.accentback a:not(.mybutton) {
    color: #fff;
}

/* --------------------------------------------------------------- columns */
.cols_2,
.cols_3,
.cols_4 {
    display: grid;
    gap: 2rem;
}

.cols_2 {
    grid-template-columns: repeat(2, 1fr);
}

.cols_3 {
    grid-template-columns: repeat(3, 1fr);
}

.cols_4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1000px) {
    .cols_4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {

    .cols_2,
    .cols_3,
    .cols_4 {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------- layout */
.bottom_links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

.justify_center {
    justify-content: center;
}

.ontop {
    position: relative;
    z-index: 1;
}

/* --------------------------------------------------------------- buttons
   .mybutton is THE button hook, everywhere — templates emit it via
   starter_button(), Gravity Forms submits are filtered onto it. The look
   here is a neutral placeholder; per-site designs restyle these classes
   (the .btn_face inner span exists so pseudo-element designs have a host).
--------------------------------------------------------------------------- */
.mybutton {
    display: inline-flex;
    background: var(--primary);
    color: #fff;
    text-decoration: none;
    border: 2px solid var(--primary);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    padding: 0;
    transition: background-color .2s ease, color .2s ease;
}

.mybutton .btn_face {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    padding: .8rem 1.6rem;
}

/* The optional icon from starter_button()'s third argument. Neutral base --
   size and alignment only; per-site designs restyle it. Target buttons that
   HAVE an icon with .mybutton:has(.buttonicon), never a modifier class. */
.mybutton .buttonicon {
    display: block;
    flex: 0 0 auto;
    width: 1em;
    height: auto;
}

.mybutton:hover,
.mybutton:focus-visible {
    background: transparent;
    color: var(--primary);
}

.darkback .mybutton:hover,
.darkback .mybutton:focus-visible,
.accentback .mybutton:hover,
.accentback .mybutton:focus-visible {
    color: #fff;
    border-color: #fff;
}

/* ---------------------------------------------------------- accessibility */
.skip_link {
    z-index: 999;
    position: absolute;
    padding: 10px;
    background: var(--primary);
    color: #fff;
    text-decoration: none;
    left: -50%;
    transition: left .2s ease;
}

.skip_link:focus {
    left: 0;
}

.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;
}

/* =========================================================================
   ANIMATION SYSTEM — ported from the proven engine. DO NOT REDESIGN.

   .hsr = "has scroll reveal". The variant class names the keyframe
   (.fadeInUp, .zoom, ...) and sets the hidden starting state; main.js adds
   .animated when the element is 8% of the VIEWPORT inside it, which starts
   the paused animation. .cascadeN on a PARENT staggers its direct .hsr children
   by 100ms steps (cascade3 for three-column grids, etc.) — the delays only
   reach DIRECT children, so never put a wrapper div between the cascade
   parent and its .hsr items.

   Every variant MUST appear in the reduced-motion block at the end of this
   file — .hsr content ships at opacity:0, so a variant missing from that
   block is content reduced-motion users never see.
   ========================================================================= */
.cascade>.hsr:nth-child(2),
.cascade2>.hsr:nth-child(even),
.cascade3>.hsr:nth-child(3n-1),
.cascade4>.hsr:nth-child(4n-2),
.cascade5>.hsr:nth-child(5n-3) {
    animation-delay: 100ms;
}

.cascade>.hsr:nth-child(3),
.cascade3>.hsr:nth-child(3n),
.cascade4>.hsr:nth-child(4n-1),
.cascade5>.hsr:nth-child(5n-2) {
    animation-delay: 200ms;
}

.cascade>.hsr:nth-child(4),
.cascade4>.hsr:nth-child(4n),
.cascade5>.hsr:nth-child(5n-1) {
    animation-delay: 300ms;
}

.cascade>.hsr:nth-child(5),
.cascade5>.hsr:nth-child(5n) {
    animation-delay: 400ms;
}

.cascade>.hsr:nth-child(6) {
    animation-delay: 500ms;
}

.cascade>.hsr:nth-child(7) {
    animation-delay: 600ms;
}

.cascade>.hsr:nth-child(8) {
    animation-delay: 700ms;
}

.hsr,
.hsr:after {
    animation-play-state: paused;
}

/* .animated sets duration unconditionally — a per-element duration must be
   declared AFTER this rule to win. */
.animated,
.animated:after {
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-play-state: running !important;
}

.fadeInLeft {
    opacity: 0;
    transform: translateX(-100px);
    animation-name: fadeInLeft;
}

@keyframes fadeInLeft {
    50% {
        transform: translateX(20px);
    }

    100% {
        transform: none;
        opacity: 1;
    }
}

.fadeInRight {
    opacity: 0;
    transform: translateX(100px);
    animation-name: fadeInRight;
}

@keyframes fadeInRight {
    50% {
        transform: translateX(-50px);
    }

    100% {
        transform: none;
        opacity: 1;
    }
}

.fadeInDown {
    opacity: 0;
    transform: translateY(-100px);
    animation-name: fadeInDown;
}

@keyframes fadeInDown {
    50% {
        transform: translateY(50px);
        opacity: 1;
    }

    100% {
        transform: none;
        opacity: 1;
    }
}

/* Intentional: .fadeInUp rides the plain `reveal` keyframes — the offset
   lives on the class, the keyframes just settle to rest. Do not "fix" the
   name mismatch. */
.fadeInUp {
    opacity: 0;
    transform: translateY(100px);
    animation-name: reveal;
}

.reveal {
    opacity: 0;
    animation-name: reveal;
}

@keyframes reveal {
    to {
        opacity: 1;
        transform: none;
    }
}

.stop {
    opacity: 0;
    transform: translateX(-200px);
    transform-origin: right bottom;
    animation-name: reveal;
    animation-duration: .5s;
}

/* .zoom scales to 1.2x at its midpoint, so it may only ride a box NARROWER
   than its column — on a full-width element the reveal transiently
   overflows the viewport and flashes a horizontal scrollbar. Full-width
   boxes take .fadeInUp / .fadeInDown (translate only). */
.zoom {
    opacity: 0;
    animation-name: zoom;
}

@keyframes zoom {
    50% {
        opacity: 1;
        transform: scale(1.2);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

/* ------------------------------------------------------------- parallax
   CSS scroll-driven, no JS. The element drifts by ±--parallax-travel as it
   crosses the viewport — scroll-linked interpolation, so it can never jump.
   Unsupporting browsers simply render the element static (correct
   fallback). Decorative parallax layers still get aria-hidden="true".
   Compose with reveals on NESTED boxes: parallax host outside, .hsr inside.
--------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {

        .parallax-slow,
        .parallax-xslow,
        .parallax-fast {
            animation: parallax-shift linear both;
            animation-timeline: view();
            animation-range: cover 0% cover 100%;
        }

        .parallax-slow {
            --parallax-travel: 40px;
            /* lags the scroll */
        }

        .parallax-xslow {
            --parallax-travel: 80px;
        }

        .parallax-fast {
            --parallax-travel: -40px;
            /* leads the scroll */
        }
    }
}

@keyframes parallax-shift {
    from {
        transform: translateY(calc(-1 * var(--parallax-travel, 0px)));
    }

    to {
        transform: translateY(var(--parallax-travel, 0px));
    }
}

/* -------------------------------------------------------- carousel mask
   THE no-invisible-walls fix for slick (and any horizontal clipper whose
   clip edge sits in open space): slides fade across a gradient mask on the
   CLIPPING element instead of vanishing at an invisible line. Add
   .carousel_mask to the section/wrapper around the slider. Skip it only
   when the track genuinely runs to a visible edge of its box.
   Prefix FIRST, standard LAST — the build drops the standard otherwise.
--------------------------------------------------------------------------- */
.carousel_mask .slick-list {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

/* =========================================================================
   CHROME — functional reference only. Every site rebuilds the nav and
   footer LOOK to its design; the mechanics (markup contract, aria wiring,
   one nav renderer) are what carry over.
   ========================================================================= */

/* --------------------------------------------------------------- nav bar */
#nav {
    position: sticky;
    top: 0;
    z-index: 99;
    background: #fff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .08);
}

.nav_bar {
    min-height: var(--navHeight);
    display: flex;
    align-items: center;
    gap: 2rem;
}

.homelink {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.nav_logo {
    max-height: calc(var(--navHeight) - 30px);
    width: auto;
}

@media (max-width: 1000px) {
    .nav_logo {
        max-height: calc(var(--mobileNavHeight) - 20px);
    }
}

.nav_sitename {
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--text);
}

/* The nav's ONE link row: a flex row inside the bar here, the full-screen
   panel below 1000px (#site_menu, in the query further down). */
.nav_links {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-left: auto;
}

.navitem {
    color: var(--text);
    text-decoration: none;
}

.navitem:hover {
    color: var(--primary);
}

.navitem_wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: .25rem;
}

.dropdown_toggle {
    background: none;
    border: 0;
    padding: .25rem;
    cursor: pointer;
    color: inherit;
    display: inline-flex;
}

.navitem_wrap.open .dropdown_toggle svg {
    transform: scaleY(-1);
}

.dropdown_menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    margin: 0;
    padding: .5rem 0;
    list-style: none;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}

.navitem_wrap.open .dropdown_menu {
    opacity: 1;
    visibility: visible;
}

.dropdown_link {
    display: block;
    padding: .5rem 1.25rem;
    color: var(--text);
    text-decoration: none;
}

/* background-COLOR, never the `background` shorthand. The shorthand resets
   every background longhand it does not name, so on a site whose dropdown
   links carry a gradient fill (the usual per-site treatment) it wipes
   background-image and background-size the instant the pointer lands — the
   fill vanishes on hover instead of sweeping in, and on mouse-out the
   gradient reappears at the hover position and animates out from there. That
   cost Buena Vista a live `!important` override to work around. The longhand
   sets the resting colour and touches nothing else. */
.dropdown_link:hover {
    color: var(--primary);
    background-color: var(--light);
}

/* Holds the hamburger, so it exists only below 1000px. Hiding the BOX and
   not just the button is the point: an empty flex item still takes a `gap`
   from .nav_bar, which would hold the nav row short of the right gutter. */
.nav_right {
    display: none;
    align-items: center;
    gap: 1rem;
    margin-left: auto;
}

.menu_toggle {
    display: none;
    background: none;
    border: 0;
    cursor: pointer;
    align-items: center;
    gap: .5rem;
    font: inherit;
    font-weight: 700;
    color: var(--text);
    padding: .5rem;
}

.hamb_lines {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
}

.hamb_lines span {
    width: 22px;
    height: 2px;
    background: currentColor;
}

@media (max-width: 1000px) {
    .nav_bar {
        min-height: var(--mobileNavHeight);
    }

    [id] {
        scroll-margin-top: calc(var(--mobileNavHeight) + 1rem);
    }

    .nav_right {
        display: flex;
    }

    .menu_toggle {
        display: inline-flex;
    }

    /* ------------------------------------------------ the bar IS the panel
       One element, one render (inc/nav.php): below this line the bar's link
       row leaves the flow and becomes the full-screen menu.

       `visibility`, NOT the `hidden` attribute. The attribute was the one
       piece of the old two-render nav no media query could undo — hiding
       the panel with it hid the desktop bar too, which is why the panel had
       to be a second copy of the links in the first place. visibility takes
       the subtree out of the accessibility tree AND the tab order, and
       delaying it off by the length of the slide keeps the panel painted on
       the way out. So main.js has no re-hide timer left to lose. */
    #site_menu {
        position: fixed;
        inset: 0;
        overflow-y: auto;
        display: grid;
        align-content: start;
        justify-content: center;
        grid-template-columns: min(900px, 100%);
        gap: 2rem;
        margin: 0;
        padding: calc(var(--mobileNavHeight) + 2rem) 2rem 3rem;
        background: var(--dark);
        color: #fff;
        visibility: hidden;
        opacity: 0;
        transform: translateX(100%);
        transition: transform .35s ease, opacity .35s ease, visibility 0s linear .35s;
    }

    body.menu_open #site_menu {
        visibility: visible;
        opacity: 1;
        transform: none;
        transition: transform .35s ease, opacity .35s ease, visibility 0s;
    }

    /* The panel is now a SIBLING of the logo and the hamburger inside #nav,
       and a positioned element paints over non-positioned ones whatever the
       DOM order says — so the two controls take a z-index and the panel
       takes none. That is what keeps the hamburger reachable while the menu
       is open, with no rule anywhere having to out-rank the panel. */
    .homelink,
    .nav_right {
        position: relative;
        z-index: 1;
    }

    /* The panel is a dark surface; the bar's colours are for a light one. */
    .navitem,
    .dropdown_toggle {
        color: #fff;
    }

    .navitem {
        font-size: 1.3rem;
    }

    .dropdown_link {
        color: rgba(255, 255, 255, .8);
    }

    .dropdown_link:hover {
        color: #fff;
        background: none;
    }

    /* ------------------------------------------------------- the accordion
       The house 0fr -> 1fr reveal (docs/animation.md), on the WRAP: the
       sub-list is that grid's single item, so exactly one row animates while
       the parent link and its toggle stay on the row above. The item has to
       STRETCH — centred in a zero-height row it would spill out of a row
       that does no clipping of its own — and it carries the overflow, the
       way .tenet_card_text does on the card reveal.

       No new JS: the dropdown module's hover-open is gated behind
       (hover: hover), so on a touch pointer .dropdown_toggle is already a
       tap-to-expand button (main.js). */
    .navitem_wrap {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto 0fr;
        align-items: center;
        transition: grid-template-rows .35s ease;
    }

    .navitem_wrap.open {
        grid-template-rows: auto 1fr;
    }

    .dropdown_menu {
        position: static;
        grid-column: 1 / -1;
        align-self: stretch;
        display: grid;
        gap: .5rem;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
        margin: 0;
        padding: .75rem 0 0;
        background: transparent;
        box-shadow: none;
        opacity: 1;
        transition: visibility 0s linear .35s;
    }

    .navitem_wrap.open .dropdown_menu {
        transition: visibility 0s;
    }
}

/* Keep the page from scrolling behind the open panel */
body.menu_open {
    overflow: hidden;
}

/* ---------------------------------------------------------------- footer */
#footer {
    background: var(--dark);
    color: #fff;
    margin-top: auto;
}

.footer_link {
    color: rgba(255, 255, 255, .8);
    text-decoration: none;
}

.footer_link:hover {
    color: #fff;
}

.footer_bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .15);
}

.footer_copyright {
    margin: 0;
    color: rgba(255, 255, 255, .6);
    font-size: .9rem;
}

.footer_legal {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    font-size: .9rem;
}
.faq_panel a {
	color:white;
}
/* ---------------------------------------------------------- cookie banner */
.cookie_bar {
    position: fixed;
    inset: auto 0 0;
    z-index: 200;
    background: var(--dark);
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem 2rem;
    padding: 1rem var(--container-pad);
    box-shadow: 0 -6px 30px rgba(0, 0, 0, .25);
}

.cookie_bar_text {
    margin: 0;
    max-width: 640px;
}

.cookie_bar_policy {
    color: var(--primary-2);
    margin-left: .5rem;
}

.cookie_bar_actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.cookie_decline {
    background: none;
    border: 0;
    color: rgba(255, 255, 255, .7);
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
}

.cookie_decline:hover {
    color: #fff;
}

/* ---------------------------------------------------- legal / prose pages
   .legal_body styles everything the editor can emit — it also wraps single
   posts and the classic-content fallback on pages, so all three stay
   consistent for free.
--------------------------------------------------------------------------- */
/* min(), not a flat 820px: .container's own `max-width: 100%` is what keeps
   it inside a narrow viewport, and overriding it with a bare pixel value
   took that floor away — so on a phone the column stayed 820px wide inside a
   390px screen and the prose ran off the side. Found on Buena Vista's
   Privacy Policy, 2026-09-09. One value rather than a breakpoint: the cap
   applies where there is room for it and the viewport wins where there is
   not, at every width. */
.legal .container,
.legal_body {
    max-width: min(820px, 100%);
}

.legal_body {
    margin-inline: auto;
}

.legal_updated {
    opacity: .6;
    font-size: .9rem;
    margin-bottom: 2rem;
}

.legal_body h2 {
    margin-top: 2.5rem;
}

.legal_body h3 {
    margin-top: 2rem;
}

.legal_body li {
    margin-bottom: .5rem;
}

.legal_body blockquote {
    border-left: 4px solid var(--primary);
    margin: 1.5rem 0;
    padding: .25rem 0 .25rem 1.25rem;
    font-style: italic;
}

.legal_body figure {
    margin: 2rem 0;
}

.legal_body figcaption {
    font-size: .85rem;
    opacity: .7;
    margin-top: .5rem;
}

/* Wide content scrolls inside its own box — the page never scrolls
   horizontally. */
.legal_body table {
    border-collapse: collapse;
    width: 100%;
}

.legal_body .wp-block-table {
    overflow-x: auto;
}

.legal_body td,
.legal_body th {
    border: 1px solid rgba(0, 0, 0, .15);
    padding: .5rem .75rem;
    text-align: left;
}

/* ------------------------------------------------------------- blog cards */
.post_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 2rem;
}

@media (max-width: 1000px) {
    .post_grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .post_grid {
        grid-template-columns: 1fr;
    }
}

.post_card {
    background: #fff;
    box-shadow: 0 2px 20px rgba(0, 0, 0, .08);
}

.post_card_link {
    display: block;
    color: inherit;
    text-decoration: none;
    height: 100%;
}

.post_card_media img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
}

.post_card_body {
    padding: 1.5rem;
}

.post_card_date {
    font-size: .85rem;
    opacity: .6;
    margin: 0 0 .5rem;
}

.post_card_title {
    font-size: 1.2rem;
    margin: 0 0 .5rem;
}

.post_card_link:hover .post_card_title {
    color: var(--primary);
}

.post_card_excerpt {
    margin: 0;
    font-size: .95rem;
    opacity: .85;
}

.single_media img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.post_pagination {
    margin-top: 3rem;
    text-align: center;
}

/* =========================================================================
   ADDED: reduced-motion fallbacks. EVERY animation system above must appear
   here. Without this block, .hsr content ships at opacity:0 and only
   becomes visible via animation — reduced-motion users must still get the
   content, just without movement. New .hsr variants get added to the first
   selector list the moment they are created.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    .hsr,
    .fadeInLeft,
    .fadeInRight,
    .fadeInDown,
    .fadeInUp,
    .reveal,
    .stop,
    .zoom {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .parallax-slow,
    .parallax-xslow,
    .parallax-fast {
        animation: none !important;
        transform: none !important;
    }

    #nav,
    #site_menu,
    .navitem_wrap,
    .dropdown_menu,
    .skip_link,
    .mybutton {
        transition: none !important;
    }
}