/* ===== Icon sizing - shared by three different icon mechanisms:
   - Tabler webfont glyphs (<i class="ti ti-*">) - sized via font-size, coloured via `color` like any text
   - the 5 custom Niki-supplied icons (<img src="...svg">) - sized via width/height, colour is baked into the file (pre-coloured variants exist per context, e.g. stall-icon-sage.svg)
   - any leftover inline SVG (Utils\Html::inlineSvg()) - sized via width/height, coloured via `color` + fill="currentColor" in the file
   Same class names work for all three since width/height are ignored by <i> and font-size is ignored by <svg>/<img>. ===== */
.icon-svg-xs { width: 13px; height: 13px; font-size: 13px; flex: none; vertical-align: middle; }
.icon-svg-sm { width: 18px; height: 18px; font-size: 18px; flex: none; vertical-align: middle; }
.icon-svg { width: 24px; height: 24px; font-size: 24px; flex: none; vertical-align: middle; }
.icon-svg-lg { width: 40px; height: 40px; font-size: 40px; flex: none; vertical-align: middle; }
.icon-svg-gold { color: var(--btn-highlight); }
.ti { vertical-align: middle; }

/* ===== Reset & base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
svg { vertical-align: middle; } /* inline SVG defaults to vertical-align:baseline, which reserves phantom space below it for a text descender - this is what was making some icons look like they had "more padding" than others */
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--btn-green);
  line-height: 1.15;
  margin: 0 0 var(--space-4);
  font-weight: 700;
}
p { margin: 0 0 var(--space-4); }

:focus-visible {
  outline: 3px solid var(--btn-highlight);
  outline-offset: 2px;
}

/* Screen-reader only - visually hidden but still announced, e.g. a page's
   real h1 when the visible hero text isn't a proper heading. */
.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;
}

/* Honeypot field for spam bots - hidden from everyone, including screen
   readers (unlike .sr-only above, this must never be announced or a real
   assistive-tech user could fill it in and get wrongly rejected as a bot).
   Off-screen rather than display:none/visibility:hidden, since some bots
   specifically skip fields hidden that way. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ===== Layout ===== */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-6);
}
/* Full-width - no max-width/centering, just edge padding. Content can then
   sit much closer to the true viewport edge than .container allows on wide
   screens (used by the hero, so its text isn't stranded in the middle of a
   1180px column with empty space on either side). */
.container-fluid {
  width: 100%;
  margin: 0;
  padding: 0 var(--space-8);
}
.site-main > section,
.site-main > .container {
  padding-top: var(--space-8);
  padding-bottom: var(--space-16);
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--btn-highlight) 70%, var(--btn-sage-dk));
  margin-bottom: var(--space-3);
}
.section-heading { text-align: center; margin-bottom: var(--space-12); }
.section-heading .eyebrow { justify-content: center; }
.section-heading h2 { font-size: var(--text-3xl); }
.section-heading__rule {
  width: 56px;
  height: 3px;
  background: var(--btn-highlight);
  margin: var(--space-3) auto 0;
  border-radius: var(--radius-pill);
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  padding: 0.75rem 1.375rem;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--btn-green); color: #fff; }
.btn--primary:hover { background: color-mix(in srgb, var(--btn-green) 85%, black); }
.btn--secondary { background: #fff; color: var(--btn-green); border-color: var(--color-border); box-shadow: var(--shadow-sm); }
.btn--secondary:hover { border-color: var(--btn-sage-md); }
.btn-account {
  background: #fff;
  color: var(--btn-green);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  padding: 0.65rem 1.25rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.btn-account:hover { background: color-mix(in srgb, #fff 85%, black); }

/* ===== Header ===== */
.site-header { position: relative; z-index: 100; background: var(--btn-green); }
.site-header__inner {
  /* Full-width, not centred at a max-width - matches .container-fluid's box
     model (used by the hero) so the logo and the hero text line up on the
     same left edge, and the nav lines up with the same right edge. */
  width: 100%;
  padding: var(--space-4) var(--space-8);
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
@media (min-width: 1200px) {
  .site-header__inner .site-logo { margin-left: 150px; }
  .btn-account { margin-right: 150px; }
}
.site-logo img { height: 100px; width: auto; }
.site-nav { display: flex; align-items: center; gap: var(--space-6); margin-left: auto; }
.site-nav a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  color: #fff;
}
.site-nav a:hover { color: var(--btn-highlight); }
.site-nav__home { display: flex; align-items: center; }
.site-nav__dropdown { position: relative; }
.site-nav__dropdown-toggle { display: flex; align-items: center; gap: var(--space-1); cursor: pointer; }
.site-nav__dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  /* Flush against the toggle (no margin-top gap) - a gap here is dead space
     the mouse has to cross to reach the menu, which drops :hover and closes
     it before a real cursor can ever get there. */
  padding: var(--space-3) 0 var(--space-2);
  background: var(--color-bg-card);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}
.site-nav__dropdown:hover .site-nav__dropdown-menu,
.site-nav__dropdown:focus-within .site-nav__dropdown-menu {
  display: block;
}
.site-nav__dropdown-menu a { display: block; padding: var(--space-2) var(--space-4); color: var(--btn-green); }
.site-nav__dropdown-menu a:hover { background: var(--color-bg-soft); color: var(--btn-green); }

/* ===== Hamburger nav (tablet/mobile) =====
   Breaks at 1200px - covers every iPad in landscape (1024px on the
   standard iPad up to 1194px on the 11" iPad Pro/Air), not just phones. */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: var(--space-2);
}
@media (max-width: 1199px) {
  /* Flush with the same edge .container content sits at (var(--space-6)),
     rather than the header's own wider var(--space-8) padding. */
  .site-header__inner { flex-wrap: wrap; padding-left: var(--space-6); padding-right: var(--space-6); }
  /* The logo is a wide wordmark (~640x155) - at the desktop-only fixed
     height of 100px it renders ~412px wide, wider than most phone screens
     on its own. That's what was actually pushing/overflowing everything,
     not the padding. */
  .site-logo img { height: 48px; }
  .nav-toggle { display: flex; align-items: center; justify-content: center; }
  /* .site-nav normally carries margin-left:auto to push it (and the account
     button after it) to the right of the logo - but it's out of flow here
     (display:none, or position:absolute once open), so that auto-margin no
     longer applies. Move it to the account button instead. */
  .btn-account { margin-left: auto; }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--btn-green);
    padding: var(--space-2) var(--space-6) var(--space-6);
    box-shadow: var(--shadow-lg);
  }
  .site-nav.is-open { display: flex; }
  .site-nav a,
  .site-nav__dropdown-toggle {
    padding: var(--space-3) 0;
    border-bottom: 1px solid color-mix(in srgb, #fff 15%, transparent);
    justify-content: space-between;
  }
  .site-nav__home { display: none; }

  /* Dropdowns become click-to-expand accordions, not hover flyouts - hover
     doesn't work reliably on touch, and the toggle is now a real nav link
     stacked in normal flow rather than a floating panel. */
  .site-nav__dropdown { position: static; }
  .site-nav__dropdown:hover .site-nav__dropdown-menu,
  .site-nav__dropdown:focus-within .site-nav__dropdown-menu {
    display: none;
  }
  .site-nav__dropdown-menu {
    position: static;
    min-width: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }
  .site-nav__dropdown.is-open .site-nav__dropdown-menu { display: block; }
  .site-nav__dropdown-menu a {
    color: rgba(255, 255, 255, 0.8);
    padding: var(--space-2) 0 var(--space-2) var(--space-4);
    border-bottom: none;
  }
  .site-nav__dropdown-menu a:hover { background: transparent; color: #fff; }
}

/* ===== Hero =====
   Full-bleed background photo with a dark overlay, all content centred on
   top in white - matches the old live site's hero treatment, ported in per
   Niki's request rather than the previous split text/photo layout. */
.hero--photo {
  position: relative;
  overflow: hidden;
  /* Full viewport height minus the header's own height (100px logo +
     var(--space-4) top/bottom padding = 132px), so hero + header together
     exactly fill the first screen. */
  min-height: calc(100vh - 132px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background-size: cover;
  background-position: center;
  padding: var(--space-16) var(--space-6);
}
.hero__center { position: relative; z-index: 1; max-width: 1170px; margin: 0 auto; text-align: center; color: #fff; }
.hero__location {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  margin-bottom: var(--space-6);
}
.hero__location .icon { color: var(--btn-highlight); }
.hero__panel {
  width: 100%;
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
  background: rgba(51, 51, 51, 0.3);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin-bottom: var(--space-8);
}
.hero__datetime { margin-bottom: var(--space-4); }
.hero__date,
.hero__time {
  display: block;
  font-family: var(--font-display);
  font-size: 105px;
  color: #fff;
  line-height: 107px;
  text-shadow: #000 4px 4px 6px;
}
.hero__date { font-weight: 700; }
.hero__time { font-weight: 300; }
@media (max-width: 1199px) {
  .hero__date,
  .hero__time {
    font-size: 76px;
    line-height: 79px;
  }
}
@media (max-width: 479px) {
  .hero__date,
  .hero__time {
    font-size: 49px;
    line-height: 59px;
  }
}
.hero__countdown-widget { margin: 0 auto; }
.hero__actions { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }

/* ===== Feature strip ===== */
.features { background: var(--btn-green); }
.features__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-6);
}
.feature { display: flex; flex-direction: column; gap: var(--space-2); }
.feature__icon { color: var(--btn-highlight); margin-bottom: var(--space-1); }
.feature__title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); color: #fff; }
.feature__caption { font-size: var(--text-xs); color: var(--color-text-on-dark); }

/* ===== Get Involved ===== */
.get-involved { background: var(--color-bg-soft); border-radius: var(--radius-lg); }
.get-involved__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}
.card {
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.card__icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-2);
  background: color-mix(in srgb, var(--btn-sage-md) 25%, transparent);
  color: var(--btn-green);
}
.get-involved .card__icon { background: var(--btn-highlight); color: #fff; }
.card__title { font-family: var(--font-display); font-size: var(--text-lg); margin-bottom: 0; }
.card__desc { color: var(--color-text-muted); font-size: var(--text-sm); margin-bottom: var(--space-3); }
.card .btn { margin-top: auto; }

/* ===== Supporters =====
   Sponsor tiers are communicated through card size and a thin top accent
   border in each tier's colour, plus a small caption - not the loud
   uppercase coloured text blocks the tiers used on the live site. */
.supporters-tier { margin: var(--space-12) 0; }
.supporters-tier:first-of-type { margin-top: var(--space-4); }
.supporters-tier h2 { font-size: var(--text-xl); text-align: center; margin-bottom: var(--space-6); }
.supporters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-6);
}
.supporter-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  border-top: 4px solid transparent;
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.supporter-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.supporter-card a { display: flex; align-items: center; justify-content: center; width: 100%; }
.supporter-card img { width: auto; max-width: 100%; }
.supporter-card__tier {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.supporters-grid--platinum { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); max-width: 640px; margin: 0 auto; }
.supporters-grid--platinum .supporter-card { border-top-color: #e5e4e2; padding: var(--space-8); }
.supporters-grid--platinum img { max-width: 250px; }

.supporters-grid--gold { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); max-width: 640px; margin: 0 auto; }
.supporters-grid--gold .supporter-card { border-top-color: var(--btn-highlight); padding: var(--space-8); }
.supporters-grid--gold img { max-width: 200px; }

.supporters-grid--silver .supporter-card { border-top-color: #a8a8a8; }
.supporters-grid--silver img { max-width: 150px; }

.supporters-grid--bronze .supporter-card { border-top-color: #b08d57; }
.supporters-grid--bronze img { max-width: 150px; }

.supporters-cta { text-align: center; color: var(--color-text-muted); }
.supporters-cta a { color: var(--btn-sage-dk); text-decoration: underline; }
.supporters-cta a:hover { color: var(--btn-green); }

.sponsors-empty { text-align: center; max-width: 480px; margin: var(--space-8) auto; }
.sponsors-empty p { color: var(--color-text-muted); }
.sponsors-empty .btn { margin-top: var(--space-2); }

/* ===== Stats band ===== */
.stats { background: var(--btn-green); border-radius: var(--radius-lg); color: #fff; }
.stats__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.stat {
  text-align: center;
  padding: 0 var(--space-4);
  border-left: 1px solid color-mix(in srgb, #fff 15%, transparent);
}
.stat:first-child { border-left: none; }
.stat__icon { color: var(--btn-highlight); margin-bottom: var(--space-2); }
.stat__number { font-family: var(--font-display); font-weight: 800; font-size: var(--text-2xl); color: var(--btn-highlight); }
.stat__label { font-size: var(--text-xs); color: var(--color-text-on-dark); }

/* ===== About ===== */
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-12);
  align-items: center;
}
.about__media img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); object-fit: cover; }
.about__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-6); }

/* ===== Content split - text with an image to the right, e.g. Stalls/Adverts/Trees ===== */
.content-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
  margin-top: var(--space-4);
}
.content-split__media img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); object-fit: cover; }
/* A .content-split__media used on its own (no .content-split__text sibling)
   is meant as a full-width row, not half a two-column grid. */
.content-split__media:only-child { grid-column: 1 / -1; }
.content-split__media:only-child img { width: 100%; }

/* What's On - portrait photo beside the running order. Unlike .content-split
   (tuned for a wide landscape photo, image-first on mobile), this keeps the
   programme as the priority content on mobile and caps the portrait image's
   width there so it doesn't dominate the screen. */
.whats-on-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}
.whats-on-layout__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
@media (max-width: 900px) {
  .whats-on-layout { grid-template-columns: 1fr; }
  .whats-on-layout__media { max-width: 320px; margin: var(--space-8) auto 0; }
}

/* Full-width photo above body text, e.g. Get Involved > Tree Dressing */
.wide-photo { width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); object-fit: cover; margin-bottom: var(--space-6); }

.section-divider { width: 100%; max-height: 10px; object-fit: cover; }

/* ===== Back to top - hidden until app.js adds .is-visible after scrolling
   past a threshold; scrolling itself is handled by `html { scroll-behavior:
   smooth }` already set above, app.js just needs to prevent the default `#`
   jump and call scrollTo. ===== */
.back-to-top {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: 50;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--btn-highlight);
  color: #fff;
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: color-mix(in srgb, var(--btn-highlight) 85%, black); }

/* ===== Footer ===== */
.site-footer { background: var(--btn-green); color: #fff; padding: var(--space-16) 0; }
.site-footer__top {
  display: grid;
  grid-template-columns: 1.3fr repeat(4, 1fr);
  gap: var(--space-8);
}
.footer-brand .site-logo { margin-bottom: var(--space-3); display: inline-flex; }
.footer-brand p { font-size: var(--text-sm); color: #fff; }
.footer-col__title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); margin-bottom: var(--space-3); color: #fff; }
.footer-col li { margin-bottom: var(--space-2); }
.footer-col a { font-size: var(--text-sm); color: #fff; }
.footer-col a:hover { text-decoration: underline; }
.site-footer__social { display: flex; gap: var(--space-3); margin-top: var(--space-2); }
.site-footer__social a {
  width: 36px; height: 36px;
  border: 1px solid color-mix(in srgb, #fff 35%, transparent);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.site-footer__social a:hover { text-decoration: none; border-color: #fff; }
.site-footer__licence {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-top: var(--space-8);
  margin-top: var(--space-8);
  border-top: 1px solid color-mix(in srgb, #fff 20%, transparent);
}
.site-footer__licence img { height: 60px; width: auto; flex: none; }
.site-footer__licence p { flex: 1 1 260px; min-width: 0; font-size: var(--text-xs); color: color-mix(in srgb, #fff 75%, transparent); margin: 0; }
.site-footer__licence a { color: #fff; text-decoration: underline; }

.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-size: var(--text-xs);
  color: #fff;
  padding-top: var(--space-8);
  margin-top: var(--space-8);
  border-top: 1px solid color-mix(in srgb, #fff 20%, transparent);
}
.site-footer__bottom a { text-decoration: underline; }

/* ===== Generic content pages (Plan Your Visit, What's On, etc.) ===== */
.page-header { position: relative; background: var(--color-bg-soft); padding: var(--space-12) 0; }
.page-header h1 { font-size: var(--text-3xl); margin-bottom: var(--space-2); }
.page-header p { color: var(--color-text); margin: 0; }
/* Background image at reduced opacity, on a ::before rather than the element
   itself, so the opacity doesn't also fade the h1/p text above it. */
.page-header-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(../images/secure_green_high_street_tree.png);
  background-position: bottom center;
  background-repeat: repeat-x;
  background-size: contain;
  opacity: 0.25;
  pointer-events: none;
}
.page-header-bg > .container { position: relative; z-index: 1; }
.wide-content h2 { font-size: var(--text-2xl); margin-top: var(--space-8); display: flex; align-items: center; gap: var(--space-3); }
.wide-content h2:first-child { margin-top: 0; }
/* Pages that group content into <section> blocks (e.g. Get Involved) put an
   h2 as the first child of *each* section, which would otherwise satisfy
   the :first-child rule above for every section, not just the page's first
   one. Move the spacing onto the section instead and neutralise the h2's
   own margin-top so it isn't applied twice. */
.wide-content section { margin-top: var(--space-8); scroll-margin-top: 5rem; }
.wide-content section:first-child { margin-top: 0; }
.wide-content section h2 { margin-top: 0; }
.wide-content h3 { font-size: var(--text-lg); margin-top: var(--space-6); }
.wide-content ul { list-style: disc; padding-left: 1.4em; margin-bottom: var(--space-4); }
.wide-content ol { list-style: decimal; padding-left: 1.4em; margin-bottom: var(--space-4); }
.wide-content li { margin-bottom: var(--space-2); }
.wide-content .timetable-list { list-style: none; padding-left: 0; border-top: 1px solid var(--color-border); }
.wide-content a:not(.btn) { color: var(--btn-sage-dk); text-decoration: underline; }
.wide-content a:hover { color: var(--btn-green); }
.policy-links { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-6); }
.timetable-list li {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}
.timetable-time { font-family: var(--font-display); color: var(--btn-sage-dk); flex: none; width: 5.5em; }

/* ===== Alerts (form success/error feedback) ===== */
.alert {
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
  margin-bottom: var(--space-6);
  font-weight: 500;
}
.alert--success { background: color-mix(in srgb, var(--btn-sage-lt) 45%, white); color: var(--btn-green); }
.alert--error { background: color-mix(in srgb, #c0392b 12%, white); color: #942a1f; }

/* ===== Forms (Get Involved sign-up forms, etc.) ===== */
.interest-form { max-width: 560px; margin-top: var(--space-6); }
.privacy-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.privacy-note .ti { flex: none; color: var(--btn-sage-dk); margin-top: 0.15em; }
.form-group { margin-bottom: var(--space-4); }
.form-group label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: 3px solid var(--btn-highlight);
  outline-offset: 1px;
}
.form-group textarea { min-height: 5em; resize: vertical; }

/* ===== Get Involved: sponsorship packages ===== */
.package-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6);
  margin: var(--space-6) 0;
}
.package-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.package-card__stars { margin-bottom: var(--space-2); }
.package-card h3 { margin-bottom: var(--space-1); }
.package-card__price { font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); color: var(--btn-green); margin-bottom: var(--space-3); }
.package-card ul { list-style: none; padding-left: 0; text-align: left; }
.package-card li { font-size: var(--text-sm); color: var(--color-text-muted); padding-left: 1.4em; position: relative; }
.package-card li::before { content: "\2713"; position: absolute; left: 0; color: var(--btn-sage-dk); font-weight: 700; }

.package-card__conditions { margin-top: var(--space-4); text-align: left; }
.package-card__conditions p { font-size: var(--text-xs); font-weight: 700; color: var(--color-text-muted); margin-bottom: var(--space-1); }
.package-card__conditions ol { list-style: decimal; padding-left: 1.2em; }
.package-card__conditions li { font-size: var(--text-xs); padding-left: 0.2em; }
.package-card__conditions li::before { content: none; }

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__media { order: -1; }
  .content-split { grid-template-columns: 1fr; }
  .content-split__media { order: -1; }
  .features__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
  .stats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
  .stat { border-left: none; }
  .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .features__list { grid-template-columns: 1fr; }
  .stats__list { grid-template-columns: 1fr; }
  .site-footer__top { grid-template-columns: 1fr; }

  .hero--photo { padding: var(--space-12) var(--space-4); }
}

/* ===== Snow effect (toggled by settings.snow_effect) =====
   Only rendered into .snowflakes when <body class="snow-on"> - see
   inc/header.php and app.js. Icons are Tabler's ti-snowflake webfont glyph,
   so they're plain text/DOM, no images or inline SVG. */
.snowflakes {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 200;
}
.snowflake {
  position: absolute;
  top: -10%;
  color: #a9cce3;
  animation-name: snow-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes snow-fall {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  8% { opacity: 1; }
  100% { transform: translateY(110vh) translateX(var(--drift, 0px)); opacity: 0.7; }
}
@media (prefers-reduced-motion: reduce) {
  .snowflakes { display: none; }
}