/* ==============================================================
 * Design tokens — single source of truth for brand fonts & colors.
 * To re-skin the site:
 *   1. swap the w3-theme-*.css include in inc/header.inc (structural purples)
 *   2. edit --accent / --brand-primary / fonts below (brand accent + type)
 * Status/widget colors below are intentionally FIXED (not part of a swap).
 * ============================================================== */
:root{
 /* fonts */
 --font-body:      "Trebuchet MS", Helvetica, sans-serif;  /* body + h1–h6 */
 --font-ui:        "Roboto", sans-serif;                   /* sidebar links */
 --font-fineprint: Verdana, Geneva, sans-serif;            /* small italic notes */

 /* brand */
 --accent:             #ffc107;   /* amber accent (titles, hero, countdown, hr) */
 --brand-primary:      #673ab7;   /* mirrors active w3-theme color; keep in sync */
 --brand-primary-dark: #341d5b;   /* mirrors active w3-theme d5; keep in sync */

 /* heading colors + shadows. NOTE: these status-* tokens are HEADING text
    colors (my-status-open / my-status-alert) — distinct from the fixed
    widget --status-* group further below. */
 --color-status-open:     green;    /* positive status heading (registration open) */
 --color-status-alert:    red;      /* alert/error heading (404, warnings) */
 --color-title-secondary: #000000;  /* sub-headings / labels (my-title-secondary) */
 --title-shadow:      #000000;      /* hard black title/hero shadow */
 --title-shadow-soft: #444;         /* h4 titles + .my-shadow */

 /* neutrals */
 --ui-white: #fff;
 --ui-black: #000;
 --ui-dark:  #333;   /* search-tip box bg */

 /* status / widget colors — FIXED, excluded from brand swap */
 --status-green:        #4CAF50;  /* faq hover, logo-selected */
 --status-green-dark:   #2e7d32;  /* NEW badge, faq arrow/border */
 --status-green-darker: #43a047;  /* faq expanded hover */
 --status-green-light:  #a5d6a7;  /* logo hover border */
 --status-red:          #c62828;  /* search-tip icon */
}

.w3-sidebar a {
 font-family: var(--font-ui)
}

body,h1,h2,h3,h4,h5,h6,.w3-wide {
 font-family: var(--font-body);
}

ul {
    list-style-position: inside;
}

/* Check-mark bullet list. The glyph is an escaped \2713 rather than a literal
   character so the rule survives any re-encoding of this file, and it is drawn
   with ::before (not ::marker, which Safari was late to support for content).
   Colored with --status-green-dark, the same green as the NEW badge.
   Note this deliberately opts out of the list-style-position:inside above:
   items get a hanging indent, so wrapped lines align under the text instead of
   running back under the check. The padding also indents the whole list from
   the surrounding copy — the checks sit inside it, not out in the margin. */
ul.check-list {
    list-style: none;
    padding-left: 3.25em;
}

ul.check-list li {
    position: relative;
    margin-bottom: 0.4em;
}

ul.check-list li::before {
    content: "\2713";
    position: absolute;
    left: -1.4em;
    color: var(--status-green-dark);
    font-weight: 700;
}

h1.my-title-primary {
 line-height: 1;
 font-weight: 800;
 color: var(--accent);
 text-shadow: 3px 2px 0px var(--title-shadow);
}

h1.my-status-alert {
 line-height: 1.3;
 font-weight: 800;
 color: var(--color-status-alert);
 text-shadow: 2px 1px 0px var(--title-shadow);
}

h2.my-title-primary {
 line-height: 1.3;
 font-weight: 600;
 color: var(--accent);
 text-shadow: 2px 1px 0px var(--title-shadow);
}

h2.my-status-alert {
 line-height: 1.3;
 font-weight: 600;
 color: var(--color-status-alert);
 text-shadow: 2px 1px 0px var(--title-shadow);
}

/* element-agnostic: used on h2/h3/h4 across guide & form pages */
.my-title-secondary {
 line-height: 1.3;
 font-weight: 600;
 color: var(--color-title-secondary);
}

h3.my-title-primary {
 line-height: 1.3;
 font-weight: 600;
 color: var(--accent);
 text-shadow: 1px 1px 0px var(--title-shadow);
}

h3.my-status-alert {
 line-height: 1.3;
 font-weight: 600;
 color: var(--color-status-alert);
 text-shadow: 1px 1px 0px var(--title-shadow);
}

h3.my-status-open {
 line-height: 1.3;
 font-weight: 600;
 color: var(--color-status-open);
 text-shadow: 1px 1px 0px var(--title-shadow);
}

h4.my-title-primary {
 font-weight: 300;
 color: var(--accent);
 text-shadow: 1px 1px 0 var(--title-shadow-soft);
}

h4.my-status-alert {
 font-weight: 300;
 color: var(--color-status-alert);
 text-shadow: 1px 1px 0 var(--title-shadow-soft);
}

h5.my-title-primary {
 font-weight: 200;
 color: var(--accent);
}

h5.my-status-alert {
 font-weight: 200;
 color: var(--color-status-alert);
}

/* Keep a phrase from wrapping internally, so a heading breaks only at the
   single normal space left between nowrap groups. */
.nowrap { white-space: nowrap; }

/* small italic fine-print note (e.g. "($X each)", helper hints) */
.fineprint {
 font-style: italic;
 font-size: 11px;
 font-family: var(--font-fineprint);
}

hr.my-hr {
 width: 50%;
 height: 2px;
 margin-left: auto;
 margin-right: auto;
 background-color: var(--accent);
 border-top: 1px solid var(--color-status-alert);
 margin-top: 64px;
 margin-bottom: 32px;
}

/* top padding on the main content wrapper, sets gap below the fixed title bar */
.my-content-top {
 padding-top: 80px !important;
}

/* standard page content card: full-width panel aligned to the title-bar gutter
   with a consistent bottom gutter (so pages don't rely on trailing <br>s). */
.content-card {
 margin: 16px 0 0;
 padding-bottom: 24px;
}

/* confirmation copy: hold the text to a comfortable measure so it wraps evenly
   instead of running the full card width (no hard <br>s in the paragraphs) */
.thankyou-copy {
 max-width: 62ch;
 margin: 0 auto;
}

.thankyou-copy h4 {
 text-wrap: balance;
}

.thankyou-copy p {
 margin: 1em 0;
 line-height: 1.6;
 text-wrap: pretty;
}

/* shared subtle drop-shadow used on amber headers and red/green status text */
.my-shadow {
 text-shadow: 1px 1px 0 var(--title-shadow-soft);
}

/* block of body copy styled like an amber title (for hero/promotional paragraphs) */
.my-lead-copy {
 color: var(--accent);
 text-shadow: 1px 1px 0 var(--title-shadow);
 font-weight: 600;
 line-height: 1.3;
}
.my-lead-copy p {
 margin: 0 0 1em;
 font-size: 1.17em;
}
/* prominent heading/lead copy in the theme's darkest purple, no shadow
   (index hero, preview "Too Soon!" block) */
.my-brand-heading {
 color: var(--brand-primary-dark);
 text-shadow: none;
 font-weight: 600;
}
/* fluid sizing on the heading-level uses: font size scales down smoothly as the
   viewport narrows (the index hero div is sized via .my-lead-copy, not here). */
h1.my-brand-heading { font-size: clamp(1.6rem, 5vw, 2.4rem); line-height: 1.2; }
h2.my-brand-heading { font-size: clamp(1.3rem, 4vw, 1.9rem); line-height: 1.2; }
h3.my-brand-heading { font-size: clamp(1.15rem, 3.2vw, 1.6rem); line-height: 1.2; }

/* body copy in the dark brand color at one uniform size, so all the lines
   after a .my-brand-heading match. Fluid font size scales down smoothly as the
   viewport narrows. Edit here to retune brand body size/color site-wide. */
.my-brand-body {
 color: var(--brand-primary-dark);
 font-size: clamp(1.1rem, 3vw, 1.5rem);
 line-height: 1.5;
}

/* Region banner with an overlaid label (apply / festival selection pages).
   The wrapper is a container so the label sizes proportionally to the banner. */
.region-banner {
 position: relative;
 display: block;
 container-type: inline-size;
}
.region-banner img {
 display: block;
 width: 100%;
 height: auto;
 border-radius: 8px;
}
.region-banner-label {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 90%;
 text-align: center;
 font-weight: 800;
 font-size: 11.25cqw;
 line-height: 1;
}
/* purple text with a thin pale-amber outline (production apply banners) */
.region-banner-label.is-purple {
 color: hsl(264, 48%, 49%);
 text-shadow:
   -1.5px -1.5px 0 hsl(58, 80%, 86%), 0 -1.5px 0 hsl(58, 80%, 86%), 1.5px -1.5px 0 hsl(58, 80%, 86%),
   -1.5px 0 0 hsl(58, 80%, 86%), 1.5px 0 0 hsl(58, 80%, 86%),
   -1.5px 1.5px 0 hsl(58, 80%, 86%), 0 1.5px 0 hsl(58, 80%, 86%), 1.5px 1.5px 0 hsl(58, 80%, 86%);
}
/* amber title-color text with a hard shadow (alternate banner styles) */
.region-banner-label.is-accent {
 color: var(--accent);
 text-shadow: 2px 1px 0 var(--title-shadow);
}

/* menu icon open and close */
div.container {
 display: inline-block;
 cursor: pointer;
 padding: 1px;
 }

div.container .bar1,
div.container .bar2,
div.container .bar3 {
 width: 35px;
 height: 5px;
 background-color: var(--ui-white);
 margin: 6px 0;
 transition: 0.4s;
 }

.change .bar1 {
 transform: translate(0, 11px) rotate(-45deg);
 }

.change .bar2 {
 opacity: 0;
 }

.change .bar3 {
 transform: translate(0, -11px) rotate(45deg);
 }

/* ===== Home page hero section ===== */
.home-hero {
 max-width: 900px;
 margin: 0 auto;
 padding: 24px 32px;
}

.home-logo {
 width: clamp(125px, 20%, 150px);
}

.home-hero-spacer {
 height: 16px;
}

.home-tagline {
 font-size: 1.1rem;
 line-height: 1.5;
 margin: 8px 0;
}

.home-cta-wrap {
 padding: 16px 0 8px;
}

.home-cta {
 min-height: 48px;
 min-width: 200px;
}
/* hover swaps to the amber accent (replaces w3-hover-amber so it tracks --accent) */
.home-cta:hover {
 color: var(--ui-black) !important;
 background-color: var(--accent) !important;
}

/* accent-colored button (e.g. "Check Availability") — tracks --accent so it
   recolors on a brand swap, unlike the fixed w3-amber it replaces */
.btn-accent {
 color: var(--ui-black) !important;
 background-color: var(--accent) !important;
}

/* registration status heading (index): larger, flat — overrides my-status-open.
   Uses h3.reg-status so it matches h3.my-status-open's specificity and wins by
   source order (this rule comes later). */
h3.reg-status {
 text-shadow: none;
 font-size: clamp(1.6rem, 5vw, 2.4rem);
}

/* ===== Registration countdown (segmented boxes) ===== */
.countdown-wrap {
 margin: 28px auto 52px;
 text-align: center;
}
/* The label and foot are brand purple on the silver page background, matching
   .my-brand-heading — the same token and the same no-shadow treatment the rest
   of the site uses for brand-colored text on a light background. (The amber
   --accent stays on .countdown-num, where it sits on the purple boxes.) */
.countdown-label {
 color: var(--brand-primary-dark);
 text-shadow: none;
 font-weight: 600;
 font-size: 1.6rem;
 margin-top: 8px;
 margin-bottom: 26px;
}
/* The decorative musical note in the label and foot. Red is deliberate contrast
   against the purple text, and uses the fixed --status-red so a brand swap
   leaves it alone. Only works on a text glyph (U+266B); the emoji note it
   replaced drew its own color and ignored this rule. */
.countdown-note {
 color: var(--status-red);
}
.countdown-boxes {
 display: flex;
 justify-content: center;
 gap: 10px;
 flex-wrap: wrap;
}
.countdown-box {
 min-width: 74px;
 padding: 10px 8px;
 background: var(--brand-primary);
 color: var(--ui-white);
}
.countdown-num {
 display: block;
 font-size: 2.3rem;
 font-weight: 800;
 line-height: 1;
 color: var(--accent);
 text-shadow: 2px 2px 0 var(--title-shadow);
 font-variant-numeric: tabular-nums;
}
.countdown-unit {
 display: block;
 margin-top: 5px;
 font-size: 0.68rem;
 letter-spacing: 1.5px;
 text-transform: uppercase;
 opacity: 0.9;
}
.countdown-foot {
 color: var(--brand-primary-dark);
 text-shadow: none;
 font-weight: 600;
 font-size: 1.35rem;
 margin-top: 22px;
 margin-bottom: 12px;
}
/* gentle pulse on the seconds box so the clock feels "alive" */
@keyframes countdownPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.countdown-box.is-seconds { animation: countdownPulse 1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
 .countdown-box.is-seconds { animation: none; }
}

/* ===== Cross-document page transitions =====
   The animation below is deliberately limited to ONE journey: into a park
   details page (inc/details.inc, which sets $htmlClass='page-details') and back
   out of it again. Every other navigation has no visible transition, exactly as
   it did before.

   The opt-in itself, however, cannot be limited that way. A cross-document
   transition only runs when BOTH documents opt in — the outgoing page has to
   opt in to be captured — so `@view-transition` has to stay in this shared
   stylesheet, which every public page loads via inc/header.inc. Restricting it
   to details.inc would mean glance -> details never animates at all. What the
   destination page DOES control is the styling, because the transition runs in
   the new document; that is the part scoped to .page-details / .vt-park below.

   The dashboard has its own stylesheet and is not opted in. Browsers without
   cross-document view transitions ignore the at-rule and navigate as before.
   Redirects (the `festivals` router) skip the transition, as they always did. */
@view-transition { navigation: auto; }

/* Default for every navigation that is NOT landing on a details page: no
   animation, so the transition finishes on the next frame — an instant swap. */
::view-transition-old(root),
::view-transition-new(root) { animation: none; }

/* Body of the transition: the outgoing page is held still and the incoming one
   fades in over it, while the park logo — the one element both pages share —
   morphs from its card position to its hero position (see below). A full-page
   effect was tried first and read as jitter: the sidebar and title bar are
   identical on both pages, so scaling or wiping them draws the eye to chrome
   that should look nailed down. Fading is invisible on those identical areas
   and the movement people actually see is the logo.

   The pseudo-elements hang off the ROOT element, not body, so the scoping hook
   is a class on <html>: page-details (inc/header.inc) on the way in, and
   vt-park, added by js/functions.js on pagereveal, for the Back trip out.

   The fade targets the whole page (the "root" group), not just the content
   region. A named content-only group snapshots WITHOUT the page background
   behind it, so the incoming content would composite over the old page's text
   instead of covering it — a double image. The root snapshot is opaque. */
html.page-details::view-transition-image-pair(root),
html.vt-park::view-transition-image-pair(root) {
 isolation: auto;   /* drop the isolation the UA adds for crossfade blending */
}
html.page-details::view-transition-old(root),
html.page-details::view-transition-new(root),
html.vt-park::view-transition-old(root),
html.vt-park::view-transition-new(root) {
 /* UA default is plus-lighter, which ADDS the two layers — both snapshots are
    fully opaque here, so the overlap would blow out to white. */
 mix-blend-mode: normal;
 display: block;
}
html.page-details::view-transition-old(root),
html.vt-park::view-transition-old(root) {
 animation: none;   /* hold the old page in place under the incoming fade */
}
html.page-details::view-transition-new(root),
html.vt-park::view-transition-new(root) {
 /* For a wipe instead, swap the name for pageWipeLTR (left-to-right) or
    pageWipeCenter (center-out). */
 animation: pageFadeIn 300ms ease both;
}

@keyframes pageFadeIn {
 from { opacity: 0; }
 to   { opacity: 1; }
}

/* The shared element. Naming the same view-transition-name in both documents is
   what makes the browser animate one logo into the other instead of treating
   them as unrelated. A details page has exactly one park logo, so it is named
   here in CSS; a listing page shows many, so js/functions.js names the matching
   one just before the snapshot. Both boxes size from the image's own aspect
   ratio (.glance-logo caps, .w3-image height:auto), so the morph is a clean
   scale with no squash. It outlasts the root fade on purpose — the logo is
   still travelling when the page underneath has settled. */
html.page-details .details-hero-logo { view-transition-name: park-logo; }

::view-transition-group(park-logo) {
 animation-duration: 480ms;
 animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}
::view-transition-old(park-logo),
::view-transition-new(park-logo) { animation-duration: 480ms; }

/* Center-out: the new page opens from a vertical seam at the middle. */
@keyframes pageWipeCenter {
 from { clip-path: inset(0 50% 0 50%); }
 to   { clip-path: inset(0 0 0 0); }
}
/* Left-to-right: the new page sweeps in from the left edge. */
@keyframes pageWipeLTR {
 from { clip-path: inset(0 100% 0 0); }
 to   { clip-path: inset(0 0 0 0); }
}

/* Reduced motion: drop back to the instant swap, logo included. */
@media (prefers-reduced-motion: reduce) {
 html.page-details::view-transition-old(root),
 html.page-details::view-transition-new(root),
 html.vt-park::view-transition-old(root),
 html.vt-park::view-transition-new(root),
 ::view-transition-group(park-logo),
 ::view-transition-old(park-logo),
 ::view-transition-new(park-logo) { animation: none; }
}

/* ===== Responsive form fields ===== */
.form-field {
 box-sizing: border-box;
}

/* w3.css gives .w3-main a `transition: margin-left .4s` (for collapsible-sidebar
   templates we don't use — this site has a fixed sidebar + transform). It made
   the content slide left-to-right when the print styles' margin-left:0 reverted
   to 250px, so disable it. */
.w3-main { transition: none; }

/* ===== Sidebar logo box =====
   The logo used to be w3-hide-small, which also took away the only "home" link
   on phones. Instead it now scales down: the sidebar is a fixed 250px, so the
   size is capped against viewport *height* (vh) as well, since the reason to
   shrink it on a phone is the vertical space the nav list needs. min() means
   the smallest of the three wins — a short screen shrinks it the same way a
   narrow one does. */
.sidebar-logo {
 display: block;
 width: min(96%, 230px);
 height: auto;
 margin: 0 auto;
}

@media screen and (max-width: 600px) {
 /* the wrap keeps w3-margin's 16px so the logo box lines up edge-to-edge with
    the menu block below it, which uses the same class */
 .sidebar-logo-box {
  padding: 4px 0;
 }

 .sidebar-logo {
  width: min(96%, 26vh, 42vw);
 }
}

/* ===== Sidebar slide animation ===== */
#mySidebar {
 transition: transform 0.3s ease;
}

/* screen-only: a printed page is narrower than 992px, so without "screen" this
   off-canvas transform would engage during print and then slide back in (with
   the transition above) when the print dialog closes. */
@media screen and (max-width: 992px) {
 #mySidebar {
  display: block !important;
  transform: translateX(-100%);
 }

 #mySidebar.menu-open {
  transform: translateX(0);
 }

 .w3-main {
  margin-left: 0 !important;
 }
}

/* ===== Sidebar overlay for mobile ===== */
.sidebar-overlay {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0,0,0,0);
 z-index: 9;
 pointer-events: none;
 transition: background 0.3s ease;
}

.sidebar-overlay.active {
 background: rgba(0,0,0,0.45);
 pointer-events: auto;
}

@media (max-width: 600px) {
 h1.my-title-primary {
  font-size: clamp(1.2rem, 5vw, 2rem);
  text-shadow: 1px 1px 0px var(--title-shadow);
  overflow-wrap: break-word;
  word-break: break-word;
 }

 h3.my-title-primary {
  font-size: clamp(1rem, 4vw, 1.5rem);
 }

 .home-hero {
  padding: 16px 12px;
 }

 .home-tagline {
  font-size: 1rem;
 }

 .home-cta {
  font-size: 1.1rem !important;
  padding: 12px 24px;
  width: 90%;
  max-width: 300px;
 }

 .countdown-box { min-width: 64px; padding: 8px 6px; }
 .countdown-num { font-size: 1.9rem; }

 .w3-bar-item.w3-button.sidebar-link {
  padding: 12px 16px;
  min-height: 44px;
 }

 .form-table {
  width: 100%;
 }

 .form-table td {
  display: block;
  width: 100% !important;
 }

 .form-table td.label {
  padding-bottom: 2px;
 }

 .form-table td input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]),
 .form-table td select,
 .form-table td textarea {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
 }

 .form-table td input[maxlength="3"],
 .form-table td input[maxlength="4"],
 .form-table td input[size="3"],
 .form-table td input[size="4"],
 .form-table td input[size="6"] {
  width: auto !important;
  max-width: none !important;
 }
}

/* ===== Performance Sites table ===== */
.perf-date {
    white-space: nowrap;
    width: 1%;
    padding-right: 16px;
}

@media (max-width: 600px) {
    .perf-sites-table td {
        display: table-cell !important;
        width: auto !important;
    }
    .perf-date {
        white-space: normal;
        width: 30% !important;
        padding-right: 8px;
    }
    /* Stack the details-top layout (logo, dates, cost) full width on phones.
       Scoped to direct children so the nested Performance Sites table is untouched. */
    .details-top,
    .details-top > tbody,
    .details-top > tbody > tr,
    .details-top > tbody > tr > td {
        display: block;
        width: 100% !important;
    }
    .details-top > tbody > tr > td > table,
    .details-top > tbody > tr > td > .w3-responsive > table {
        width: 100% !important;
        margin-bottom: 16px;
    }
    .details-top img.w3-image {
        max-width: 300px;
    }
    /* Reclaim the empty 5% side gutters on phones. The content keeps the
       w3-container's 16px padding so it stays a little off each edge. */
    .details-side {
        display: none;
    }
    /* Primary call-to-action: sized to its text (never full window width),
       centered, with extra space above it now that it wraps under the logo. */
    .details-cta {
        display: inline-block;
        width: auto;
        min-height: 44px;
        font-size: 1.1rem;
        margin: 24px 0 8px;
    }
    /* Drop the wide 10% side margin on phones; the w3-container's 16px
       padding keeps the content a little off each edge (matches details). */
    .guide-wrap {
        margin: 0 !important;
    }
}

/* Application Guide / similar content pages: content runs full width so it
   left-aligns with the title bar's gutter (the w3-container padding handles the
   small edge offset); phones get the same margin: 0 (see media query). */
.guide-wrap {
    margin: 0;
}

/* ===== Revise Group: clickable park-logo picker ===== */
.logo-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 18px;
    padding: 12px 10px 8px;
    max-width: 900px;
    margin: 0 auto;
}

.logo-pick {
    cursor: pointer;
    padding: 6px;
    border: 3px solid transparent;
    border-radius: 8px;
    filter: drop-shadow(2px 3px 6px rgba(0,0,0,0.3));
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.logo-pick img {
    display: block;
    max-width: 120px;
    max-height: 80px;
}

/* hover/selected straighten the scattered logo and highlight it */
.logo-pick:hover {
    transform: rotate(0deg) scale(1.08) !important;
    border-color: var(--status-green-light);
}

.logo-pick.logo-selected {
    transform: rotate(0deg) scale(1) !important;
    border-color: var(--status-green);
    box-shadow: 0 0 0 2px rgba(76,175,80,0.35);
}

/* ===== NEW! badge ===== */
.new {
    display: inline-block;
    background-color: var(--status-green-dark);
    color: var(--ui-white);
    font-size: 0.72em;
    font-weight: bold;
    padding: 2px 7px;
    border-radius: 4px;
    vertical-align: middle;
    letter-spacing: 0.03em;
}

/* ===== Glance / Preview cards ===== */
.glance-cards {
    margin: 0 auto;
}

/* ===== At-a-Glance park card grid ===== */
/* Responsive flex grid: ~3 across on desktop, fluidly down to 1 on phones.
   align-items:stretch (default) makes a row's cards equal height; the button's
   margin-top:auto then keeps the Details buttons bottom-aligned across a row. */
.glance-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    margin-top: 28px;
}
.glance-card {
    flex: 1 1 240px;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 18px 16px 20px;
    background: var(--ui-white);
}
.glance-logo {
    max-width: 150px;
    max-height: 80px;
    object-fit: contain;
    margin-bottom: 10px;
}
.glance-name {
    margin: 0 0 2px;
    color: var(--brand-primary-dark);
    font-weight: 700;
}
.glance-loc {
    margin: 0;
    font-style: italic;
    color: var(--ui-dark);
}
.glance-div {
    width: 60%;
    border: 0;
    border-top: 2px solid var(--accent);
    margin: 12px auto;
}
.glance-dates {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    font-weight: 600;
}
.glance-dates li { margin: 2px 0; }
/* push the Details button to the card bottom so a row's buttons line up */
.glance-btn { margin-top: auto; }

/* ===== Overview page floating images ===== */
.overview-para {
    overflow: hidden;
    margin-bottom: 24px;
}

.img-right {
    float: right;
    margin-left: 20px;
    margin-bottom: 12px;
    max-width: 55%;
}

.img-left {
    float: left;
    margin-right: 20px;
    margin-bottom: 12px;
    max-width: 55%;
}

@media (max-width: 800px) {
    .img-right, .img-left {
        float: none;
        display: block;
        width: 100%;
        max-width: 100%;
        margin: 0 auto 16px;
    }
}

/* ===== Sidebar nav item spacing ===== */
#mySidebar .w3-bar-item {
    padding-top: 2px;
    padding-bottom: 2px;
    line-height: 23px;
}

/* ===== FAQ accordion ===== */
.faq-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    border: none;
    text-align: left;
    outline: none;
    overflow: hidden;
    width: 100%;
    padding-top: 16px;
    padding-bottom: 16px;
}

.faq-btn span:first-child {
    flex: 1;
    text-align: left;
}

.faq-arrow {
    flex-shrink: 0;
    margin-left: 16px;
    align-self: center;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 9px solid var(--status-green-dark);
    transition: transform 0.3s ease, border-top-color 0.2s ease;
}

.faq-btn.w3-green .faq-arrow {
    transform: rotate(180deg);
    border-top-color: var(--ui-white);
}

.faq-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.faq-panel p {
    margin-top: 14px;
    margin-bottom: 14px;
}

/* search-term highlight inside FAQ question/answer text */
mark.faq-hl {
    background: var(--accent);
    color: #000;
    padding: 0 1px;
    border-radius: 2px;
}

/* ===== FAQ section header (faq2.html) ===== */
.faq-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    margin: 20px 0 6px;
    border-radius: 4px;
    color: var(--ui-white);
}

.faq-section-header span:first-child {
    font-size: 1.05rem;
    font-weight: 600;
}

.faq-section-count {
    font-size: 0.78rem;
    background: rgba(255, 255, 255, 0.22);
    border-radius: 12px;
    padding: 2px 10px;
    white-space: nowrap;
}

.faq-btn:hover {
    background-color: var(--status-green) !important;
    color: var(--ui-white) !important;
}

/* keep the arrow visible against the green hover background */
.faq-btn:hover .faq-arrow {
    border-top-color: var(--ui-white);
}

/* expanded buttons are already green — use a darker green on hover so there's still feedback */
.faq-btn.w3-green:hover {
    background-color: var(--status-green-darker) !important;
}

/* expanded (green) buttons get a darker green border instead of the amber closed-state border */
.faq-btn.w3-green {
    border-color: var(--status-green-dark) !important;
}

/* ==============================================================
 * Park-logo watermark for festival cards
 * ============================================================== */
/* The ::before holds the opacity-reduced logo so the card text is never
   dimmed; each card supplies its own logo via the --logo custom property. */
.pcard { position: relative; overflow: hidden; isolation: isolate; }
.pcard::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--logo);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
}
.pcard > * { position: relative; z-index: 1; }

/* ===== Search / filter tooltip (circle-i hover card) ===== */
.search-tip-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.search-tip-icon {
    cursor: default;
    color: var(--status-red);
    font-size: 1.2rem;
    line-height: 1;
    user-select: none;
    padding: 0 6px;
}
.search-tip-box {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 200;
    background: var(--ui-dark);
    color: var(--ui-white);
    font-size: 1rem;
    line-height: 1.6;
    padding: 12px 16px;
    border-radius: 6px;
    width: 340px;
    white-space: normal;
    box-shadow: 0 3px 10px rgba(0,0,0,0.25);
    pointer-events: none;
}
.search-tip-wrap:hover .search-tip-box { display: block; }

/* ===== Print support (opt-in: page sets $printable, adds body.printable) =====
   .print-bar  = the on-screen "Print this page" button (hidden when printing)
   .print-only = the print letterhead (logo/title/date), hidden on screen */
.print-only { display: none; }
/* float the print button to the upper-right so page text flows around it;
   top offset ~matches its inset from the right edge */
.print-bar { float: right; margin: 16px 0 8px 16px; }
/* Centered content cards (e.g. Private Festivals): text must center on the
   full card width, so the button gets its own right-aligned row instead of
   having the first lines wrap beside the float. */
.content-card.w3-center .print-bar {
    float: none;
    display: flex;
    justify-content: flex-end;
}
/* Details page: keep the Print button and the Apply/Closed CTA on a single row
   at every width. They are two separate right-floated .print-bar elements; once
   wrapped in .details-actions they become flex items (float is ignored), so the
   shorter one no longer drops below when the window is narrow. */
.details-actions {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
}
.details-actions .print-bar { margin: 16px 0 8px; }
.details-actions .details-cta { margin: 0; }   /* align buttons; drop phone wrap margin */
.details-cta-bar { order: -1; }                 /* CTA sits left of Print (old layout) */
@media print { .details-actions { display: block; } }
.print-header { margin-bottom: 18px; }
.print-logo { height: auto; }
.print-title { font-size: 1.6rem; font-weight: 700; color: var(--brand-primary-dark); }
.print-date { color: var(--ui-dark); }

@media print {
    /* Fixed-position chrome: hide with visibility, NOT display:none. display:none
       on position:fixed elements triggers Chrome's "blank page after the print
       dialog closes" bug; visibility keeps their layers intact and, being out of
       normal flow, they add no printed space. */
    body.printable #mySidebar,
    body.printable .sidebar-overlay,
    body.printable .w3-top { visibility: hidden !important; }
    /* In-flow chrome and the on-screen button: remove from the document. */
    body.printable .no-print { display: none !important; }
    /* reset the layout to a plain full-width document */
    body.printable .w3-main { margin-left: 0 !important; }
    body.printable .my-content-top { padding-top: 0 !important; }
    body.printable .content-card,
    body.printable .print-root {
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        /* Shrink the printed document to ~75% (e.g. 16px body text -> 12px) so
           more fits per page. zoom scales fonts and spacing together; Chrome
           honours it when printing. Apply it to the content wrapper, NOT to
           body/html: zoom on the root during print triggers Chrome's "blank
           page behind the print dialog / not restored on cancel" repaint bug
           (same family as the fixed-position note above). */
        zoom: 0.75;
    }
    body.printable {
        background: #fff !important; color: #000 !important;
        /* Safari/iOS drop background + brand colors unless this is set */
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    body.printable a { color: #000 !important; text-decoration: none; }
    /* FAQ: print each question with its answer expanded. Rows the search filter
       hid carry an inline display:none, which these rules leave alone — so the
       printout matches whatever the current filter shows. */
    body.printable .faq-panel {
        max-height: none !important;   /* beat the accordion's inline max-height */
        overflow: visible !important;
        transition: none;
    }
    body.printable .faq-btn { break-inside: avoid; }
    body.printable .faq-section-header { break-after: avoid; }
    body.printable .faq-arrow { display: none; }
    /* reveal the print letterhead: logo on the left, title/date stacked to its right */
    body.printable .print-only { display: block !important; }
    body.printable .print-header { display: flex !important; align-items: center; gap: 16px; }
    body.printable .print-logo { width: 110px; flex: none; }
    body.printable .print-meta { flex: 1; text-align: center; }
}