/*
Theme Name: Wealden Sailability
Theme URI: https://wealdensailability.org
Author: P. Wagner
Copyright: P. Wagner
Description: Custom theme for Wealden Sailability with full-width header, hero slideshow, and customizable donate button.
Version: 1.30
Requires at least: 6.9.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wealden-sailability
*/

/*
 * Table of contents — line numbers point to each section banner comment below (search "=======").
 * Update this block when you add/remove/reorder major sections (search for those banners).
 *
 *    41  CSS Variables (Custom Properties)
 *   130  Focus Styles (WCAG 2.4.7)
 *   575  Reset & Base Styles
 *   643  Header - Full Width
 *   718  Navigation & Dropdown Menus
 *   866  Dropdown sub-menus
 *  1333  Hero Slideshow
 *  1444  Page Hero (single image)
 *  1535  Awards Carousel
 *  1600  404 Page
 *  1620  Main Content
 *  1974  Bulletin Board / bulletin-board (above link boxes)
 *  2345  Racing Archive page template
 *  2441  Racing News page template
 *  2581  Homepage Link Boxes
 *  2743  Homepage Content Containers (below link boxes)
 *  2894  Supporter Logos Slider
 *  2961  Footer
 *  3088  Responsive Optimization Overrides (mobile/tablet)
 *
 * Dynamic overrides: many `--ws-*` values are set from PHP (`ws_donate_button_css` in
 * `functions.php`) and echoed as inline CSS after this stylesheet loads.
 */

/* ==========================================================================
   CSS Variables (Custom Properties)
   ========================================================================== */
/* 
 * These CSS variables are dynamically updated via inline CSS from functions.php
 * based on Customizer settings. Default values are defined here as fallbacks.
 * 
 * Variables can be overridden in the WordPress Customizer:
 * - Appearance → Customize → Theme Colours & Settings
 */
:root {
  --ws-background: #65adec;        /* Page background (pale blue; overridden by Customizer) */
  --ws-primary: #000000;           /* Primary colour (site title) */
  --ws-primary-dark: #0d3d4d;      /* Dark primary (reserved) */
  --ws-blue: #0981D1;              /* Royal blue (header, menu, footer background) */
  --ws-accent: #e8a838;             /* Accent colour (footer links) */
  --ws-off-white: #E7E6E4;          /* Off-white (text on blue backgrounds) */
  --ws-text: #000000;               /* Main text colour */
  --ws-text-light: #555555;         /* Secondary/lighter text colour */
  --ws-focus: #ffffff;              /* Keyboard focus outline colour */
  --ws-volunteer-pink: #f2138c;     /* Volunteer pink (for volunteer button) */
  --ws-text-scale: 1;               /* Visitor text-size scale */
  --ws-header-height: 100px;        /* Header height (default: 320px via Customizer) */

  /* Typography: stacks are grouped here; where each applies is listed in “Font usage map” after this block. */
  --ws-font-system: "Segoe UI", Aptos, Calibri, Verdana, "Marker Felt", "Segoe Print", "Segoe Marker", "Bradley Hand", sans-serif; /* Base stack incl. handwriting fallbacks */
  --ws-font-body: var(--ws-font-system);     /* Body / paragraphs / UI copy */
  --ws-font-heading: var(--ws-font-system);  /* Headings, site title, hero captions (unless Customizer hero font) */
  --ws-font-bulletin-heading: "Marker Felt", "Segoe Marker", "Segoe Print", Aptos, "Segoe UI", var(--ws-font-heading); /* Bulletin Board title display stack */
  --ws-font-content-note: "Chalkboard", "Chalkboard SE", "Segoe Print", "Segoe Marker", "Bradley Hand", Arial, Helvetica, sans-serif, var(--ws-font-system); /* Homepage content containers & float boxes (via alias) */
  --ws-float-font: var(--ws-font-content-note);

  /* Bulletin Board + Homepage Content Container decorative colours (centralized). */
  --ws-bulletin-cork: #c9a56a;
  --ws-bulletin-frame: #9a6a38;
  --ws-bulletin-frame-width: 12px;
  --ws-bulletin-frame-accent-width: 0px;
  --ws-bulletin-note: #f7de74;
  --ws-bulletin-shadow: 0.24;
  --ws-bulletin-woodgrain: 0.24;
  --ws-bulletin-tack: #8f96a1;
  --ws-bulletin-tack-left-pct: 50;
  --ws-bulletin-tack-head-top: -14px;
  --ws-bulletin-tack-tilt: -9deg;
  --ws-bulletin-rope-light: #e7d0a3;
  --ws-bulletin-rope-mid: #c39a63;
  --ws-bulletin-rope-dark: #a6743f;
  --ws-bulletin-rope-ring-outer: #7b5a33;
  --ws-bulletin-rope-ring-inner: #d9c095;
  --ws-bulletin-rope-tilt-left: -9deg;
  --ws-bulletin-rope-tilt-right: 9deg;
  --ws-link-physics-rotate: 0deg;
  --ws-link-physics-lift: 0px;
  --ws-content-note: #fff4a9;
  --ws-content-note-line: #a48934;
  --ws-content-text: #2f2a17;
  --ws-content-title: #0d3d4d;
  --ws-content-tack: #8f96a1;
  --ws-content-tack-left-pct: 50;
  --ws-content-tack-head-top: -14px;
  --ws-content-tack-tilt: -9deg;
  --ws-float-bg: #ffffff;
  --ws-float-text: #2a2a2a;
  --ws-float-border: #cfd7df;
  --ws-float-border-width: 1px;
  --ws-float-radius: 12px;
  --ws-float-padding: 16px;
  --ws-float-shadow: 0.14;
  --ws-float-width: 46%;
  --ws-float-gap: 20px;
  --ws-float-heading: #0d3d4d;
  --ws-float-h-p1: #0d3d4d;
  --ws-float-h-p2: #0981d1;
  --ws-float-h-p3: #92400e;
  --ws-float-h-p4: #166534;
  --ws-float-h-p5: #6d28d9;
}

/*
 * Font usage map (tokens are in :root above)
 * ─────────────────────────────────────────────
 * --ws-font-body          → body (Reset & Base)
 * --ws-font-heading       → h1–h6, .entry-title, .site-title; .hero-slideshow .slide-caption; .page-hero-caption
 * --ws-font-bulletin-heading → .bulletin-board-heading
 * --ws-font-content-note  → .home-content-box, .home-content-box-title (body text uses same stack inside those cards)
 * --ws-float-font         → .entry-content .ws-float-box (float headings use font-family: inherit → same stack)
 * Dyslexia-friendly mode  → :root.ws-dyslexia-friendly … uses OpenDyslexic for body/buttons/inputs (overrides tokens via !important)
 */

/* ==========================================================================
   Focus Styles (WCAG 2.4.7)
   ========================================================================== */
:focus-visible {
  outline: 3px solid var(--ws-focus, var(--ws-blue));
  outline-offset: 3px;
}

/* Visitor-controlled high contrast mode (html.ws-high-contrast) */
:root.ws-high-contrast {
  --ws-background: #ffffff;
  --ws-primary: #ffffff;
  --ws-primary-dark: #0b2239;
  --ws-blue: #003a63;
  --ws-accent: #ffd24d;
  --ws-text: #111111;
  --ws-text-light: #222222;
  --ws-focus: #000000;
}

.ws-high-contrast body {
  background-color: #ffffff;
  color: #111111;
}

.ws-high-contrast main a {
  color: #003a63;
}

.ws-high-contrast main a:hover,
.ws-high-contrast main a:focus-visible {
  color: #001f33;
}

.ws-high-contrast .site-footer a {
  color: #ffd24d;
}

.ws-high-contrast .site-footer a:hover,
.ws-high-contrast .site-footer a:focus-visible {
  color: #ffffff;
}

/* Ensure high-contrast mode also covers key homepage/content feature blocks. */
.ws-high-contrast .bulletin-board,
.ws-high-contrast .bulletin-board-inner,
.ws-high-contrast .home-link-box,
.ws-high-contrast .home-content-box,
.ws-high-contrast .entry-content .ws-float-box {
  background: #ffffff !important;
  color: #111111 !important;
  border-color: #111111 !important;
  box-shadow: none !important;
}

.ws-high-contrast .bulletin-board-heading,
.ws-high-contrast .home-link-box-title,
.ws-high-contrast .home-content-box-title,
.ws-high-contrast .entry-content .ws-float-box :is(h1, h2, h3, h4, h5, h6) {
  color: #111111 !important;
}

.ws-high-contrast .bulletin-board a,
.ws-high-contrast .home-link-box a,
.ws-high-contrast .home-content-box a,
.ws-high-contrast .entry-content .ws-float-box a {
  color: #003a63 !important;
  text-decoration: underline !important;
}

.ws-high-contrast .bulletin-board a:hover,
.ws-high-contrast .home-link-box a:hover,
.ws-high-contrast .home-content-box a:hover,
.ws-high-contrast .entry-content .ws-float-box a:hover,
.ws-high-contrast .bulletin-board a:focus-visible,
.ws-high-contrast .home-link-box a:focus-visible,
.ws-high-contrast .home-content-box a:focus-visible,
.ws-high-contrast .entry-content .ws-float-box a:focus-visible {
  color: #001f33 !important;
}

/* Default readability: links are visibly underlined, not colour-only */
:where(main a, .site-footer a) {
  text-decoration: underline;
  text-underline-offset: 0.14em;
  text-decoration-thickness: 0.08em;
}

:where(main a, .site-footer a):hover,
:where(main a, .site-footer a):focus-visible {
  text-decoration-thickness: 0.11em;
}

/* Skip link for keyboard/screen reader users */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 10px 16px;
  background: var(--ws-blue);
  color: var(--ws-off-white);
  border-radius: 6px;
  z-index: 9999;
  text-decoration: none;
  font-weight: 700;
}

.skip-link:focus-visible {
  left: 16px;
  top: 16px;
}

.ws-accessibility-panel {
  position: fixed;
  right: var(--ws-a11y-offset-x, 0px);
  bottom: var(--ws-a11y-offset-y, 16px);
  z-index: 1100;
  background: var(--ws-a11y-panel-bg, var(--ws-background));
  border: 2px solid var(--ws-a11y-panel-border, var(--ws-blue));
  border-radius: 12px;
  padding: 10px;
  min-width: 190px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  transform-origin: right bottom;
  will-change: transform, opacity, box-shadow;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s ease, box-shadow 0.3s ease;
}

.ws-accessibility-panel.is-collapsed {
  transform: translateX(8px);
  opacity: 1;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  padding: 0;
  min-width: auto;
}

.ws-accessibility-panel-toggle {
  width: 56px;
  height: 56px;
  border: 2px solid var(--ws-a11y-ring, #ffffff);
  background: linear-gradient(180deg, var(--ws-a11y-btn-start, #0a8dff) 0%, var(--ws-a11y-btn-end, #0062dc) 100%);
  color: var(--ws-off-white);
  border-radius: 999px;
  padding: 0;
  font-size: 0;
  font-weight: 700;
  cursor: pointer;
  margin: 0 0 8px auto;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  box-shadow: 0 10px 20px rgba(0, 54, 135, 0.35), 0 0 0 3px rgba(0, 122, 255, 0.28);
}

.ws-accessibility-panel-toggle::after {
  content: "";
}

.ws-accessibility-panel-toggle-icon {
  width: 30px;
  height: 30px;
  display: block;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(1);
}

.ws-accessibility-panel-title,
.ws-text-size-control label {
  color: var(--ws-a11y-panel-text, var(--ws-primary-dark));
}

body.ws-a11y-side-left .ws-accessibility-panel {
  left: var(--ws-a11y-offset-x, 0px);
  right: auto;
  transform-origin: left bottom;
}

body.ws-a11y-side-left .ws-accessibility-panel.is-collapsed {
  transform: translateX(-8px);
}

body.ws-a11y-side-left .ws-accessibility-panel-toggle {
  margin: 0 auto 8px 0;
}

.ws-accessibility-toggle-text {
  display: none;
}

.ws-accessibility-panel-toggle:hover {
  transform: translateY(-1px);
}

.ws-accessibility-panel-title,
.ws-accessibility-panel-actions {
  opacity: 1;
  max-height: none;
  overflow: visible;
  transform: translateX(0);
  transition: opacity 0.22s ease, max-height 0.28s ease, transform 0.28s ease, margin 0.2s ease;
}

#ws-accessibility-panel-content {
  max-height: min(70vh, 520px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
}

.ws-accessibility-panel.is-collapsed .ws-accessibility-panel-title,
.ws-accessibility-panel.is-collapsed .ws-accessibility-panel-actions {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  margin: 0;
  transform: translateX(8px);
  pointer-events: none;
}

.ws-accessibility-panel.is-collapsed .ws-accessibility-toggle-text {
  display: none;
}

.ws-accessibility-panel.is-collapsed .ws-accessibility-panel-toggle {
  justify-content: center;
  margin: 0 0 0 auto;
}

body.ws-a11y-side-left .ws-accessibility-panel.is-collapsed .ws-accessibility-panel-toggle {
  margin: 0 auto 0 0;
}

.ws-accessibility-panel.is-collapsed .ws-accessibility-panel-toggle-icon {
  width: 30px;
  height: 30px;
}

.ws-accessibility-panel.is-collapsed .ws-accessibility-panel-toggle:hover,
.ws-accessibility-panel.is-collapsed .ws-accessibility-panel-toggle:focus-visible {
  transform: translateY(-1px) scale(1.03);
}

.ws-accessibility-panel-title {
  margin: 0 0 8px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ws-a11y-panel-text, var(--ws-primary-dark));
}

.ws-accessibility-panel-actions {
  display: grid;
  gap: 8px;
}

.ws-accessibility-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ws-accessibility-option-toggle {
  border: 1px solid rgba(13, 61, 77, 0.22);
  background: #ffffff;
  color: #12222a;
  border-radius: 10px;
  padding: 10px 8px;
  min-height: 58px;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.ws-accessibility-option-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(13, 61, 77, 0.16);
}

.ws-accessibility-option-toggle.is-active,
.ws-accessibility-option-toggle[aria-pressed="true"] {
  border-color: #0a8dff;
  background: linear-gradient(180deg, #e6f4ff 0%, #d7ecff 100%);
  box-shadow: 0 6px 14px rgba(10, 141, 255, 0.2);
}

.ws-contrast-toggle {
  border: 2px solid color-mix(in srgb, var(--ws-off-white) 45%, var(--ws-blue) 55%);
  background: color-mix(in srgb, var(--ws-blue) 76%, black 24%);
  color: var(--ws-off-white);
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  text-align: center;
}

.ws-contrast-toggle[aria-pressed="true"] {
  background: var(--ws-accent);
  border-color: var(--ws-accent);
  color: var(--ws-primary-dark);
}

.ws-text-size-control label {
  display: block;
  margin: 0 0 4px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ws-a11y-panel-text, var(--ws-primary-dark));
}

.ws-text-size-control input[type="range"] {
  width: 100%;
}

/* Visitor accessibility: pointer size + colour (SVG data URIs); classes on <html> from accessibility menu */
.ws-cursor-size-control {
  border: 0;
  margin: 0;
  padding: 0;
  min-inline-size: 0;
}

.ws-cursor-size-legend {
  display: block;
  margin: 0 0 6px;
  padding: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ws-a11y-panel-text, var(--ws-primary-dark));
}

.ws-cursor-size-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.ws-cursor-size-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #12222a;
  cursor: pointer;
}

.ws-cursor-size-label input {
  width: 1rem;
  height: 1rem;
  accent-color: #0a8dff;
}

/* Pointer colour (paired with Medium/Large); SVG fill/stroke per palette */
.ws-cursor-colour-control {
  border: 0;
  margin: 0;
  padding: 0;
  min-inline-size: 0;
}

.ws-cursor-colour-legend {
  display: block;
  margin: 0 0 4px;
  padding: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ws-a11y-panel-text, var(--ws-primary-dark));
}

.ws-cursor-colour-hint {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.35;
  color: color-mix(in srgb, var(--ws-a11y-panel-text, var(--ws-primary-dark)) 72%, #ffffff);
}

.ws-cursor-colour-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.ws-cursor-colour-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #12222a;
  cursor: pointer;
}

.ws-cursor-colour-label input {
  width: 1rem;
  height: 1rem;
  accent-color: #0a8dff;
}

html.ws-cursor-size-medium.ws-cursor-palette-default body,
html.ws-cursor-size-medium.ws-cursor-palette-default body *,
html.ws-cursor-size-medium.ws-cursor-palette-default body *::before,
html.ws-cursor-size-medium.ws-cursor-palette-default body *::after {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23111827' stroke='%23f9fafb' stroke-width='1' stroke-linejoin='round' d='M2 2L2 24L8 18L12 27L16 25L11 15H26V10H10L10 2Z'/%3E%3C/svg%3E") 2 2, auto !important;
}

html.ws-cursor-size-medium.ws-cursor-palette-yellow body,
html.ws-cursor-size-medium.ws-cursor-palette-yellow body *,
html.ws-cursor-size-medium.ws-cursor-palette-yellow body *::before,
html.ws-cursor-size-medium.ws-cursor-palette-yellow body *::after {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23facc15' stroke='%23111827' stroke-width='1' stroke-linejoin='round' d='M2 2L2 24L8 18L12 27L16 25L11 15H26V10H10L10 2Z'/%3E%3C/svg%3E") 2 2, auto !important;
}

html.ws-cursor-size-medium.ws-cursor-palette-light body,
html.ws-cursor-size-medium.ws-cursor-palette-light body *,
html.ws-cursor-size-medium.ws-cursor-palette-light body *::before,
html.ws-cursor-size-medium.ws-cursor-palette-light body *::after {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23ffffff' stroke='%23111827' stroke-width='1' stroke-linejoin='round' d='M2 2L2 24L8 18L12 27L16 25L11 15H26V10H10L10 2Z'/%3E%3C/svg%3E") 2 2, auto !important;
}

html.ws-cursor-size-medium.ws-cursor-palette-cyan body,
html.ws-cursor-size-medium.ws-cursor-palette-cyan body *,
html.ws-cursor-size-medium.ws-cursor-palette-cyan body *::before,
html.ws-cursor-size-medium.ws-cursor-palette-cyan body *::after {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%2322d3ee' stroke='%23111827' stroke-width='1' stroke-linejoin='round' d='M2 2L2 24L8 18L12 27L16 25L11 15H26V10H10L10 2Z'/%3E%3C/svg%3E") 2 2, auto !important;
}

html.ws-cursor-size-large.ws-cursor-palette-default body,
html.ws-cursor-size-large.ws-cursor-palette-default body *,
html.ws-cursor-size-large.ws-cursor-palette-default body *::before,
html.ws-cursor-size-large.ws-cursor-palette-default body *::after {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath fill='%23111827' stroke='%23f9fafb' stroke-width='1.5' stroke-linejoin='round' d='M3 3L3 36L12 27L18 41L24 37L16 22H39V14H14L14 3Z'/%3E%3C/svg%3E") 3 3, auto !important;
}

html.ws-cursor-size-large.ws-cursor-palette-yellow body,
html.ws-cursor-size-large.ws-cursor-palette-yellow body *,
html.ws-cursor-size-large.ws-cursor-palette-yellow body *::before,
html.ws-cursor-size-large.ws-cursor-palette-yellow body *::after {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath fill='%23facc15' stroke='%23111827' stroke-width='1.5' stroke-linejoin='round' d='M3 3L3 36L12 27L18 41L24 37L16 22H39V14H14L14 3Z'/%3E%3C/svg%3E") 3 3, auto !important;
}

html.ws-cursor-size-large.ws-cursor-palette-light body,
html.ws-cursor-size-large.ws-cursor-palette-light body *,
html.ws-cursor-size-large.ws-cursor-palette-light body *::before,
html.ws-cursor-size-large.ws-cursor-palette-light body *::after {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath fill='%23ffffff' stroke='%23111827' stroke-width='1.5' stroke-linejoin='round' d='M3 3L3 36L12 27L18 41L24 37L16 22H39V14H14L14 3Z'/%3E%3C/svg%3E") 3 3, auto !important;
}

html.ws-cursor-size-large.ws-cursor-palette-cyan body,
html.ws-cursor-size-large.ws-cursor-palette-cyan body *,
html.ws-cursor-size-large.ws-cursor-palette-cyan body *::before,
html.ws-cursor-size-large.ws-cursor-palette-cyan body *::after {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath fill='%2322d3ee' stroke='%23111827' stroke-width='1.5' stroke-linejoin='round' d='M3 3L3 36L12 27L18 41L24 37L16 22H39V14H14L14 3Z'/%3E%3C/svg%3E") 3 3, auto !important;
}

html.ws-cursor-size-medium:is(.ws-cursor-palette-default, .ws-cursor-palette-yellow, .ws-cursor-palette-light, .ws-cursor-palette-cyan) body :is(input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], textarea),
html.ws-cursor-size-medium:is(.ws-cursor-palette-default, .ws-cursor-palette-yellow, .ws-cursor-palette-light, .ws-cursor-palette-cyan) body [contenteditable="true"],
html.ws-cursor-size-large:is(.ws-cursor-palette-default, .ws-cursor-palette-yellow, .ws-cursor-palette-light, .ws-cursor-palette-cyan) body :is(input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], textarea),
html.ws-cursor-size-large:is(.ws-cursor-palette-default, .ws-cursor-palette-yellow, .ws-cursor-palette-light, .ws-cursor-palette-cyan) body [contenteditable="true"] {
  cursor: text !important;
}

.ws-focus-colour-control {
  display: grid;
  gap: 6px;
}

.ws-focus-colour-control label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ws-a11y-panel-text, var(--ws-primary-dark));
}

.ws-focus-colour-control input[type="color"] {
  width: 100%;
  height: 40px;
  border: 1px solid rgba(13, 61, 77, 0.28);
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
}

.ws-focus-colour-reset {
  border: 1px solid rgba(13, 61, 77, 0.26);
  background: #ffffff;
  color: #123243;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.ws-saturation-control {
  display: grid;
  gap: 6px;
}

.ws-saturation-control label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ws-a11y-panel-text, var(--ws-primary-dark));
}

.ws-saturation-control input[type="range"] {
  width: 100%;
}

:root.ws-saturation-active .site-header,
:root.ws-saturation-active main,
:root.ws-saturation-active .site-footer,
:root.ws-saturation-active .ws-accessibility-panel {
  filter: saturate(var(--ws-saturation, 1));
}

:root.ws-highlight-links main a {
  text-decoration-thickness: 0.16em;
  text-underline-offset: 0.2em;
  text-decoration-skip-ink: none;
}

:root.ws-highlight-links main a:not(.wp-block-button__link) {
  background-color: rgba(255, 235, 59, 0.22);
  box-shadow: inset 0 -0.56em 0 rgba(255, 235, 59, 0.55);
  border-radius: 3px;
  padding: 0 0.12em;
}

:root.ws-highlight-links main a:not(.wp-block-button__link):hover,
:root.ws-highlight-links main a:not(.wp-block-button__link):focus-visible {
  background-color: rgba(255, 224, 102, 0.34);
  box-shadow: inset 0 -0.62em 0 rgba(255, 224, 102, 0.68);
}

:root.ws-text-spacing body {
  letter-spacing: 0.03em;
  word-spacing: 0.08em;
}

:root.ws-text-spacing p,
:root.ws-text-spacing li,
:root.ws-text-spacing blockquote {
  line-height: 1.9;
}

:root.ws-pause-animations *,
:root.ws-pause-animations *::before,
:root.ws-pause-animations *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

:root.ws-hide-images img,
:root.ws-hide-images svg,
:root.ws-hide-images figure:not(.ws-accessibility-panel),
:root.ws-hide-images video {
  visibility: hidden !important;
}

:root.ws-hide-images .ws-accessibility-panel img,
:root.ws-hide-images .ws-accessibility-panel svg {
  visibility: visible !important;
}

:root.ws-dyslexia-friendly body,
:root.ws-dyslexia-friendly button,
:root.ws-dyslexia-friendly input,
:root.ws-dyslexia-friendly select,
:root.ws-dyslexia-friendly textarea {
  font-family: "OpenDyslexic", Calibri, Verdana, "Arial", sans-serif !important;
}

:root.ws-line-height p,
:root.ws-line-height li,
:root.ws-line-height blockquote,
:root.ws-line-height h1,
:root.ws-line-height h2,
:root.ws-line-height h3,
:root.ws-line-height h4,
:root.ws-line-height h5,
:root.ws-line-height h6 {
  line-height: 1.9 !important;
}

/* ==========================================================================
   Reset & Base Styles
   ========================================================================== */
/* 
 * Box-sizing reset ensures padding/borders are included in element width
 * This prevents layout issues with padding calculations
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 
 * HTML element setup
 * overflow-x: auto allows horizontal scroll when embeds/tables are wider than the viewport.
 */
html {
  min-height: 100%;
  overflow-x: auto;
}

/* 
 * Body element setup
 * 
 * Layout strategy for sticky footer:
 * - min-height: 100vh ensures body fills viewport height
 * - display: flex + flex-direction: column enables flexbox layout
 * - Footer will be pushed to bottom via margin-top: auto
 * 
 * overflow-x: auto — wide tables/embeds can scroll horizontally instead of being clipped.
 */
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;                    /* Full viewport height */
  display: flex;                        /* Enable flexbox */
  flex-direction: column;                /* Stack children vertically */
  background-color: var(--ws-background);    /* Main page background */
  font-family: var(--ws-font-body);
  font-size: calc(17px * var(--ws-text-scale, 1));
  line-height: calc(1.7 * var(--ws-text-scale, 1));
  color: var(--ws-text);
  overflow-x: auto;
}

/* Make visitor text-size scaling apply to feature blocks with fixed typography. */
.bulletin-board,
.home-link-box,
.home-content-box,
.entry-content .ws-float-box {
  font-size: calc(1rem * var(--ws-text-scale, 1));
  line-height: calc(1.5 * var(--ws-text-scale, 1));
}

.home-link-box-title,
.home-content-box-title,
.entry-content .ws-float-box :is(h1, h2, h3, h4, h5, h6) {
  font-size: calc(1em * var(--ws-text-scale, 1));
}

/* Headings and titles use the heading stack; override --ws-font-heading in :root to diverge from body */
h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
  font-family: var(--ws-font-heading);
}

/* ==========================================================================
   Header - Full Width
   ========================================================================== */
/* 
 * Site Header
 * - Full-width royal blue background
 * - Sticky positioning (stays at top when scrolling)
 * - Contains: Logo, Site Title, Spacer, Menu, Donate Button, Image
 */
.site-header {
  width: 100%;
  background: var(--ws-blue);           /* Royal blue background */
  border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Subtle bottom border */
  position: sticky;                     /* Stays at top when scrolling */
  top: 0;
  z-index: 1000;                        /* Above other content */
  transition: box-shadow var(--ws-header-compact-duration, 220ms) var(--ws-header-compact-ease, ease), background-color var(--ws-header-compact-duration, 220ms) var(--ws-header-compact-ease, ease);
}

/* 
 * Header Inner Container
 * - Max-width container centers content on large screens
 * - Flexbox layout arranges header elements horizontally
 * - Height controlled by CSS variable (default: 320px)
 */
.header-inner {
  max-width: none;                      /* Allow full-width header content */
  width: 100%;
  margin: 0;
  padding: 0 24px;                     /* Horizontal padding */
  box-sizing: border-box;
  height: var(--ws-header-height);     /* Dynamic height from Customizer */
  display: flex;                        /* Flexbox layout */
  align-items: center;                 /* Vertically center items */
  gap: 24px;                           /* Space between flex items */
  transition: height var(--ws-header-compact-duration, 220ms) var(--ws-header-compact-ease, ease), padding var(--ws-header-compact-duration, 220ms) var(--ws-header-compact-ease, ease), gap var(--ws-header-compact-duration, 220ms) var(--ws-header-compact-ease, ease), transform var(--ws-header-compact-duration, 220ms) var(--ws-header-compact-ease, ease);
}

/* Logo */
.site-logo {
  flex-shrink: 0;
}

.site-logo img {
  width: 150px;
  height: 150px;
  display: block;
  object-fit: contain;
  transition: width var(--ws-header-compact-duration, 220ms) var(--ws-header-compact-ease, ease), height var(--ws-header-compact-duration, 220ms) var(--ws-header-compact-ease, ease), filter var(--ws-header-compact-duration, 220ms) var(--ws-header-compact-ease, ease);
}

.site-logo a {
  display: block;
}

/* Site Name */
.site-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ws-off-white);
  transition: font-size var(--ws-header-compact-duration, 220ms) var(--ws-header-compact-ease, ease), letter-spacing var(--ws-header-compact-duration, 220ms) var(--ws-header-compact-ease, ease);
}

.site-title a {
  color: inherit;
  text-decoration: none;
}

/* Spacer - pushes menu right */
.header-spacer {
  flex: 1 1 auto;
  min-width: 24px;
}

/* ==========================================================================
   Navigation & Dropdown Menus
   ========================================================================== */

/* Top-level nav container */
.main-nav {
  background: var(--ws-blue);
  padding: 8px 16px;
  border-radius: 4px;
  flex: 1 1 auto;
  margin-left: auto;
  min-width: 0;
  overflow: visible;
}

/* Top-level menu list - horizontal flex row */
.main-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  width: auto;
  min-width: 0;
  justify-content: flex-end;
}

/* Each menu item is positioned relatively so the dropdown can anchor to it */
.main-nav li {
  margin: 0;
  position: relative;
}

/* All nav links */
.main-nav a {
  display: block;
  padding: 8px 16px;
  color: var(--ws-off-white);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;                 /* Prevent link text wrapping */
  transition: background-color 0.2s, color 0.2s;
  border-radius: 4px;
}

/* Compact-on-scroll state for desktop/laptop headers (only when enabled in Customizer). */
.site-header.is-compact {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.16);
}

.site-header.is-compact .header-inner {
  height: max(64px, calc(var(--ws-header-height, 100px) - 22px));
  padding-left: 16px;
  padding-right: 16px;
  gap: 14px;
}

.site-header.is-compact .site-logo img {
  width: 96px;
  height: 96px;
}

.site-header.is-compact .site-title {
  font-size: 1.25rem;
}

.site-header.is-compact .main-nav {
  padding: 5px 8px;
}

.site-header.is-compact .main-nav a {
  padding: 6px 10px;
}

.site-header.is-compact .header-donate a {
  min-height: 38px;
  padding: 8px 14px;
}

.site-header.is-compact .header-image img {
  height: min(var(--ws-header-image-height, 64px), 52px);
}

/* Animation presets selected in Customizer. */
body.ws-header-anim-gentle {
  --ws-header-compact-duration: 260ms;
  --ws-header-compact-ease: cubic-bezier(0.2, 0.68, 0.2, 1);
}

body.ws-header-anim-snappy {
  --ws-header-compact-duration: 180ms;
  --ws-header-compact-ease: cubic-bezier(0.2, 0.9, 0.2, 1);
}

body.ws-header-anim-dramatic {
  --ws-header-compact-duration: 360ms;
  --ws-header-compact-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

.header-inner {
  transform-origin: top center;
}

body.ws-header-anim-gentle .site-header.is-compact .header-inner {
  animation: wsHeaderCompactIn 260ms cubic-bezier(0.2, 0.68, 0.2, 1);
}

body.ws-header-anim-snappy .site-header.is-compact .header-inner {
  animation: wsHeaderCompactIn 180ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

body.ws-header-anim-dramatic .site-header.is-compact .header-inner {
  animation: wsHeaderCompactInDramatic 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes wsHeaderCompactIn {
  from { transform: translateY(-4px) scaleY(0.985); }
  to { transform: translateY(0) scaleY(1); }
}

@keyframes wsHeaderCompactInDramatic {
  0% { transform: translateY(-8px) scaleY(0.975); }
  70% { transform: translateY(0) scaleY(1.01); }
  100% { transform: translateY(0) scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .header-inner,
  .site-logo img,
  .site-title {
    transition: none !important;
    animation: none !important;
  }
}

/* Hover colours set via Customizer inline CSS (background-color, colour applied there) */

/* Highlight active (current page) menu item */
.main-nav .current-menu-item > a,
.main-nav .current-menu-ancestor > a {
  background-color: rgba(255, 255, 255, 0.15);
  color: var(--ws-off-white);
}

/* -----------------------------------------------------------------------
   Dropdown sub-menus
   ----------------------------------------------------------------------- */

/*
 * WordPress generates sub-menus as nested <ul> inside <li> elements.
 * We hide them by default and reveal on :hover of the parent <li>.
 * A small downward arrow (▾) is added via ::after pseudo-element
 * on any menu item that has a child sub-menu.
 */

/* Hidden by default - shown on hover */
.main-nav ul ul {
  display: none;                       /* Hide dropdown */
  position: absolute;
  top: 100%;                           /* Directly below parent link */
  left: 0;
  min-width: 200px;
  background: var(--ws-blue);
  border-top: 2px solid rgba(255, 255, 255, 0.3); /* Visual separator */
  border-radius: 0 0 4px 4px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  z-index: 9999;                       /* Above page content */
  padding: 4px 0;
  list-style: none;
  margin: 0;
  flex-direction: column;              /* Stack items vertically */
  gap: 0;
}

/* Show dropdown when hovering the parent <li> */
.main-nav li:hover > ul,
.main-nav li:focus-within > ul {
  display: flex;                       /* Reveal sub-menu */
}

/* Dropdown items stacked vertically */
.main-nav ul ul li {
  width: 100%;
}

/* Dropdown links */
.main-nav ul ul a {
  padding: 10px 20px;
  border-radius: 0;                    /* No rounded corners inside dropdown */
  font-weight: 400;                    /* Lighter weight than top-level */
  font-size: 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* Subtle row separator */
}

.main-nav ul ul li:last-child a {
  border-bottom: none;                 /* No border on last item */
}

/* Third-level dropdowns (sub-sub-menus) - open to the right */
.main-nav ul ul ul {
  top: 0;
  left: 100%;                          /* Position to the right of parent */
  border-top: none;
  border-left: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 0 4px 4px 0;
}

/* Down-arrow indicator on top-level items that have children */
.main-nav li.menu-item-has-children > a::after {
  content: ' ▾';                       /* Unicode down-pointing small triangle */
  font-size: 0.75em;
  opacity: 0.8;
}

/* Right-arrow indicator on nested items that have further children */
.main-nav ul ul li.menu-item-has-children > a::after {
  content: ' ▸';                       /* Right-pointing triangle */
}

/*
 * Sub-menu toggle button (.submenu-toggle)
 * Injected by navigation.js next to parent links on mobile.
 * Hidden on desktop - dropdowns are handled by CSS :hover there.
 */
.submenu-toggle {
  display: none;                        /* Hidden on desktop */
  background: none;
  border: none;
  color: var(--ws-off-white);
  font-size: 1rem;
  cursor: pointer;
  padding: 4px 10px;
  line-height: 1;
  vertical-align: middle;
}

@media (max-width: 992px) {
  .submenu-toggle {
    display: inline-block;              /* Visible on mobile */
  }

  /* On mobile, remove the CSS ::after arrow since the button handles it */
  .main-nav.is-open li.menu-item-has-children > a::after {
    content: none;
  }
}

/* Donate modal */
.donate-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

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

.donate-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.donate-modal-content {
  position: relative;
  width: 100%;
  max-width: 800px;
  max-height: 90vh;
  background: var(--ws-off-white);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.donate-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 28px;
  line-height: 1;
  color: var(--ws-text);
  background: var(--ws-off-white);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

.donate-modal-close:hover {
  background: #eee;
}

.donate-modal-content iframe {
  width: 100%;
  height: 80vh;
  min-height: 400px;
  display: block;
  border: none;
}

/* Donate / Just Giving — colours from Customizer inline CSS; chrome here so it reads as a real button */
.header-donate {
  flex-shrink: 0;
  align-self: center;
}

.header-donate a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 10px 22px;
  min-height: 44px;
  text-decoration: none;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.12),
    0 5px 14px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* Optional JS-driven Donate button motion physics. */
.header-donate a.ws-donate-physics-enabled {
  transform-origin: 50% 50%;
  will-change: transform;
}

.header-donate a:hover {
  transform: translateY(-2px);
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.1),
    0 10px 22px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.header-donate a:active {
  transform: translateY(0);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.14),
    inset 0 2px 5px rgba(0, 0, 0, 0.12);
}

.header-donate a:focus-visible {
  outline: 2px solid var(--ws-off-white, #f5f5f5);
  outline-offset: 3px;
}

@media (max-width: 1240px) and (min-width: 993px) {
  .header-inner {
    gap: 14px;
    padding: 0 14px;
  }

  .main-nav {
    padding: 6px 8px;
  }

  .main-nav a {
    padding: 7px 10px;
    font-size: 0.88rem;
  }

  .site-title {
    font-size: 1.35rem;
  }

  .header-donate a {
    padding: 9px 16px;
    min-height: 40px;
    font-size: 0.9rem;
  }
}

@media (max-width: 1360px) and (min-width: 1241px) {
  .site-logo img {
    width: 120px;
    height: 120px;
  }

  .site-title {
    font-size: 1.2rem;
  }

  .main-nav a {
    padding: 6px 8px;
    font-size: 0.82rem;
  }

  .header-image img {
    height: min(var(--ws-header-image-height, 64px), 52px);
  }
}

/* Header Image (--ws-header-image-height set in Customizer via inline CSS) */
.header-image img {
  height: var(--ws-header-image-height, 64px);
  width: auto;
  display: block;
  object-fit: contain;
}

/* Mobile menu toggle (hidden by default) */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 8px;
}

@media (max-width: 992px) {
  :root {
    --ws-header-height: 72px;
  }

  .site-logo img {
    width: 64px;
    height: 64px;
  }

  .site-title {
    font-size: 1.1rem;
  }

  .main-nav,
  .header-donate {
    display: none !important;
  }

  .header-image {
    display: block;
  }

  .header-image img {
    height: min(var(--ws-header-image-height, 64px), 40px);
  }

  .main-nav.is-open {
    display: block !important;
  }

  /* Donate link inside mobile menu – last item in the blue menu block */
  .main-nav.is-open ~ .header-donate {
    display: block !important;
    width: 100%;
    order: 11;
    background: var(--ws-blue);
    margin-top: -12px; /* Pull up to sit flush with nav above */
  }

  .main-nav.is-open ~ .header-donate a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 20px;
    min-height: 48px;
    white-space: nowrap;
    text-decoration: none;
    font-weight: 700;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.14);
    box-shadow:
      0 2px 0 rgba(0, 0, 0, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.22);
  }

  .main-nav.is-open ~ .header-donate a:hover {
    transform: none;
    box-shadow:
      0 2px 0 rgba(0, 0, 0, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.28);
  }

  .menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: 8px;
    color: var(--ws-off-white);
    font-size: 0;
  }

  .menu-toggle::before {
    content: '☰';
    font-size: 1.4rem;
  }

  .menu-toggle.is-active::before {
    content: '✕';
  }

  .header-inner {
    flex-wrap: wrap;
    padding: 8px 16px;
    gap: 12px;
  }

  .main-nav.is-open {
    order: 10;
    width: 100%;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    border-radius: 0;
    background: var(--ws-blue);
  }

  .main-nav.is-open ul {
    flex-direction: column;
    gap: 0;
  }

  .main-nav.is-open li.menu-item-has-children {
    display: flex;
    flex-wrap: wrap;
  }

  .main-nav.is-open li.menu-item-has-children > a {
    flex: 1;
    min-width: 0;
  }

  .main-nav.is-open li.menu-item-has-children > ul {
    width: 100%;
    order: 2;
  }

  .main-nav.is-open .submenu-toggle {
    flex-shrink: 0;
    margin-left: auto;
    padding: 8px 14px;
    font-size: 1rem;
    color: var(--ws-off-white);
    background: transparent;
    border-radius: 4px;
    transition: background 0.2s;
  }

  .main-nav.is-open .submenu-toggle:hover,
  .main-nav.is-open .submenu-toggle:focus {
    background: rgba(255, 255, 255, 0.25);
  }

  .main-nav.is-open ul ul {
    display: none;
    position: static;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    background: rgba(0, 0, 0, 0.2);
    border-left: 4px solid rgba(255, 255, 255, 0.4);
  }

  .main-nav.is-open li.submenu-open > ul {
    display: flex;
    flex-direction: column;
  }

  .main-nav.is-open li {
    width: 100%;
    list-style: none;
  }

  .main-nav.is-open a {
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--ws-off-white) !important;
    text-decoration: none;
  }

  .main-nav.is-open ul ul a {
    padding: 10px 20px 10px 24px;
  }
}

@media (max-width: 480px) {
  .site-logo img {
    width: 64px;
    height: 64px;
  }

  .site-title {
    font-size: 1rem;
  }
}

/* ==========================================================================
   Hero Slideshow
   ========================================================================== */
.hero-slideshow {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.hero-slideshow .slides {
  position: relative;
  width: 100%;
  height: 400px;
}

.hero-slideshow .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.hero-slideshow .slide.active {
  opacity: 1;
  z-index: 1;
}

.hero-slideshow .slide img,
.hero-slideshow .slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-slideshow .slide-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4); /* overridden by Customizer */
  pointer-events: none;
}

.hero-slideshow .slide-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  z-index: 1;
  font-family: var(--ws-font-heading);
}

.hero-slideshow .slide-title {
  margin: 0 0 8px;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: inherit;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
}

.hero-slideshow .slide.active .slide-title {
  opacity: 1;
  transform: translateY(0);
}

.hero-slideshow .slide-subtitle {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: inherit;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease 0.4s, transform 0.6s ease 0.4s;
}

.hero-slideshow .slide.active .slide-subtitle {
  opacity: 1;
  transform: translateY(0);
}

/* Slideshow nav dots */
.hero-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 8px;
}

.hero-dots button {
  border-radius: 50%;
  border: 2px solid;
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s;
}

/* ==========================================================================
   Page Hero (single image)
   ========================================================================== */
.page-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #000;
}

.page-hero img {
  width: 100%;
  height: 400px;
  display: block;
  object-fit: cover;
}

.page-hero .slide-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

.page-hero-caption {
  position: absolute;
  z-index: 1;
  color: var(--ws-off-white);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  font-family: var(--ws-font-heading);
  box-sizing: border-box;
  max-width: min(92vw, 56rem);
  padding: 0 12px;
}

/* Featured-image hero title placement (Customizer default + per-item meta → ws-hero-caption--* on caption) */
.page-hero-caption.ws-hero-caption--center {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  text-align: center;
}

.page-hero-caption.ws-hero-caption--top {
  top: 8%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translateX(-50%);
  text-align: center;
}

.page-hero-caption.ws-hero-caption--bottom {
  bottom: 8%;
  top: auto;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  text-align: center;
}

.page-hero-caption.ws-hero-caption--left {
  top: 50%;
  left: 4%;
  right: auto;
  bottom: auto;
  transform: translateY(-50%);
  text-align: left;
}

.page-hero-caption.ws-hero-caption--right {
  top: 50%;
  right: 4%;
  left: auto;
  bottom: auto;
  transform: translateY(-50%);
  text-align: right;
}

.page-hero-caption.ws-hero-caption--top-left {
  top: 8%;
  left: 4%;
  right: auto;
  bottom: auto;
  transform: none;
  text-align: left;
}

.page-hero-caption.ws-hero-caption--top-right {
  top: 8%;
  right: 4%;
  left: auto;
  bottom: auto;
  transform: none;
  text-align: right;
}

.page-hero-caption.ws-hero-caption--bottom-left {
  bottom: 8%;
  left: 4%;
  top: auto;
  right: auto;
  transform: none;
  text-align: left;
}

.page-hero-caption.ws-hero-caption--bottom-right {
  bottom: 8%;
  right: 4%;
  top: auto;
  left: auto;
  transform: none;
  text-align: right;
}

.page-hero .entry-title {
  margin: 0;
  font-size: 2.5rem;
  opacity: 0;
  transform: translateY(10px);
  animation: pageHeroFadeIn 0.7s ease 0.3s forwards;
}

@keyframes pageHeroFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Page hero title animation */
  .page-hero .entry-title {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Disable hero slideshow transitions/slide title motion */
  .hero-slideshow .slide {
    transition: none !important;
  }
  .hero-slideshow .slide-title,
  .hero-slideshow .slide-subtitle {
    transition: none !important;
  }

  /* Disable hover scaling transitions */
  .awards-carousel-item img {
    transition: none !important;
  }
  .awards-carousel-item:hover img {
    transform: none !important;
  }

  .supporter-logo-item img {
    transition: none !important;
  }

  .header-donate a,
  .header-donate a:hover,
  .header-donate a:active {
    transform: none !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
  }
}

/* ==========================================================================
   Awards Carousel (horizontal slider, same pattern as supporter logos)
   ========================================================================== */
.awards-carousel {
  width: 100%;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 48px 0;
  background: var(--ws-background);
  overflow: hidden;
  box-sizing: border-box;
}

.awards-carousel-container {
  width: 100%;
  overflow: hidden;
}

.awards-carousel-track {
  display: flex;
  gap: 40px;
  align-items: center;
  will-change: transform;
}

@keyframes awardsCarouselScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.awards-carousel-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
}

.awards-carousel-item img {
  max-height: 150px;
  max-width: 200px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.awards-carousel-item a {
  display: block;
  text-decoration: none;
}

.awards-carousel-item:hover img {
  transform: scale(1.04);
}


/* ==========================================================================
   404 Page
   ========================================================================== */
.error-404 .entry-content .error-404-button-wrap {
  text-align: center;
  margin-top: 1.5em;
}

.error-404 .entry-content .button {
  display: inline-block;
  cursor: pointer;
  padding: 0.75em 1.75em;
  line-height: 1.25;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  border: 1px solid rgba(0, 0, 0, 0.14);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.12s ease;
}

.error-404 .entry-content .button:hover {
  box-shadow:
    0 5px 14px rgba(0, 0, 0, 0.14),
    0 1px 2px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
}

.error-404 .entry-content .button:active {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.14),
    inset 0 2px 6px rgba(0, 0, 0, 0.12);
  transform: translateY(1px);
}

.error-404 .entry-content .button:focus-visible {
  outline: 3px solid var(--ws-focus, var(--ws-blue));
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .error-404 .entry-content .button,
  .error-404 .entry-content .button:hover,
  .error-404 .entry-content .button:active {
    transition: none;
    transform: none;
  }
}

/* ==========================================================================
   Main Content
   ========================================================================== */
.site-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 24px;
}

/* Content width options */
.site-content.content-full-width {
  max-width: 100%;
}

.site-content.content-full-width .entry-content {
	max-width: none;
}

.site-content.content-two-thirds {
  max-width: 66.67%;
}

.site-content.content-three-quarters {
  max-width: 75%;
}

.site-content.content-half {
  max-width: 50%;
}

.site-content.content-one-third {
  max-width: 33.33%;
}

.entry-content {
  max-width: 72ch;
}

article.post-racing-news .entry-content {
  max-width: none;
}

/* Racing Archive / Racing News / Jib Sheet page: outer .entry-content must not use 72ch (float + lists fill <main>). */
.page-template-racing-archive .site-content > article .entry-content,
.page-template-racing-news .site-content > article .entry-content,
.page-template-jib-sheet-archive .site-content > article .entry-content,
.page-template-jib-sheet-news .site-content > article .entry-content {
  max-width: none;
}

/* Current post body inside hub float re-used .entry-content — do not shrink to 72ch. */
.page-template-racing-news .ws-float-box .entry-content,
.page-template-jib-sheet-news .ws-float-box .entry-content {
  max-width: none;
}

/* The Jib Sheet single post: fill main column (standard block content). */
article.post-jib-sheet {
  width: 100%;
  max-width: none;
}

/* Racing News single post: fill main column so ws-float-box can span full width. */
article.post-racing-news {
  width: 100%;
  max-width: none;
}

article.post-racing-news .entry-content.racing-news-layout,
article.post-jib-sheet .entry-content.racing-news-layout {
  width: 100%;
}

.racing-news-layout {
  max-width: none;
}

.racing-news-layout > section + section {
  margin-top: 1.5rem;
}

.racing-news-layout-heading {
  margin: 0 0 0.6rem;
  color: var(--ws-primary-dark);
}

/* Layout meta embeds (Sway, OneDrive): keep explicit height; do not use entry-content height:auto rule. */
.ws-layout-embed {
  width: 100%;
  max-width: 100%;
  margin: 0 0 1rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.racing-news-layout-results-body,
.racing-news-layout-text-body,
.racing-news-layout-media-body,
.entry-content {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/*
 * Scrollbars on wide-content areas: hidden by default, shown on hover.
 * Scrolling still works via trackpad, touch, keyboard, and scrollbar drag when visible.
 */
:is(
  html,
  body,
  .ws-layout-embed,
  .racing-news-layout-results-body,
  .racing-news-layout-text-body,
  .racing-news-layout-media-body,
  .entry-content
) {
  scrollbar-width: none;
}

:is(
  html,
  body,
  .ws-layout-embed,
  .racing-news-layout-results-body,
  .racing-news-layout-text-body,
  .racing-news-layout-media-body,
  .entry-content
):hover {
  scrollbar-width: thin;
  scrollbar-color: rgba(13, 61, 77, 0.45) transparent;
}

:is(
  html,
  body,
  .ws-layout-embed,
  .racing-news-layout-results-body,
  .racing-news-layout-text-body,
  .racing-news-layout-media-body,
  .entry-content
)::-webkit-scrollbar {
  height: 0;
  width: 0;
}

:is(
  html,
  body,
  .ws-layout-embed,
  .racing-news-layout-results-body,
  .racing-news-layout-text-body,
  .racing-news-layout-media-body,
  .entry-content
):hover::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

:is(
  html,
  body,
  .ws-layout-embed,
  .racing-news-layout-results-body,
  .racing-news-layout-text-body,
  .racing-news-layout-media-body,
  .entry-content
):hover::-webkit-scrollbar-thumb {
  background-color: rgba(13, 61, 77, 0.45);
  border-radius: 5px;
}

:is(
  html,
  body,
  .ws-layout-embed,
  .racing-news-layout-results-body,
  .racing-news-layout-text-body,
  .racing-news-layout-media-body,
  .entry-content
):hover::-webkit-scrollbar-track {
  background: transparent;
}

.racing-news-layout :is(table, .wp-block-table table) {
  display: block;
  width: max-content;
  max-width: none;
}

.racing-news-layout :is(pre, code) {
  max-width: none;
}

.entry-content .ws-layout-embed iframe,
.racing-news-layout-results-body .ws-layout-embed iframe,
.racing-news-layout-media-body .ws-layout-embed iframe {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: var(--ws-layout-embed-height, 520px) !important;
  aspect-ratio: unset !important;
  min-height: 320px;
  border: 0;
}

.racing-news-layout-media-body :is(img, video) {
  max-width: 100%;
  height: auto;
}

.racing-news-layout-results-body .racing-news-results-image,
.racing-news-layout-results-body img {
  max-width: 100%;
  height: auto;
  display: block;
}

.racing-news-layout-empty {
  color: var(--ws-text-light);
  font-style: italic;
}

/* Multi-column layout - applied per-page or via Customizer */
.entry-content[style*="column-count"],
.entry-content.columns-2,
.entry-content.columns-3 {
  max-width: 100%;
}

.entry-content[style*="column-count"] > *,
.entry-content.columns-2 > *,
.entry-content.columns-3 > * {
  break-inside: avoid;
}

.entry-content p {
  margin: 0 0 1.1em;
  line-height: 1.75;
}

.entry-content h1,
.entry-content h2,
.entry-content h3 {
  margin: 1.5em 0 0.5em;
}

.entry-header {
  margin-bottom: 1.5em;
}

.entry-title {
  margin: 0 0 0.5em;
  font-size: 2rem;
}

.entry-meta {
  font-size: 0.95rem;
  color: var(--ws-text-light);
}

/* Responsive embeds in editor body content (not layout-meta .ws-layout-embed wrappers). */
.entry-content iframe {
  max-width: 100% !important;
  width: 100% !important;
  display: block;
}

.entry-content > :not(.ws-layout-embed) iframe,
.entry-content .racing-news-layout-text-body iframe {
  height: auto !important;
  aspect-ratio: 18 / 10;
}

/* Wrapped media system (images/video/embed) for editor content */
.entry-content::after {
  content: "";
  display: table;
  clear: both;
}

/* Optional PDF tilt utility: add `ws-pdf-tilt` to an embed wrapper/block. */
.entry-content .ws-pdf-tilt {
  overflow: visible;
}

.entry-content .ws-pdf-tilt iframe {
  transition: transform 0.2s ease;
}

/* Optional floating content boxes (posts/pages): add classes in editor. */
.entry-content .ws-float-box {
  float: none;
  width: 100%;
  margin: 0.2rem 0 1rem;
  padding: var(--ws-float-padding, 16px);
  border: var(--ws-float-border-width, 1px) solid var(--ws-float-border, #cfd7df);
  border-radius: var(--ws-float-radius, 12px);
  background: var(--ws-float-bg, #ffffff);
  color: var(--ws-float-text, #2a2a2a);
  box-shadow: 0 8px 20px rgba(13, 61, 77, var(--ws-float-shadow, 0.14));
  font-family: var(--ws-float-font, var(--ws-font-content-note));
  transform: rotate(-0.52deg);
  transform-origin: 50% 6%;
}

.entry-content .ws-float-box.ws-float-tilt-alt {
  transform: rotate(0.48deg);
}

.entry-content .ws-float-box.ws-float-straight {
  transform: none;
}

.entry-content .ws-float-box :is(h1, h2, h3, h4, h5, h6):not(.has-text-color) {
  color: var(--ws-float-heading, var(--ws-primary-dark));
  font-family: inherit;
}

.entry-content .ws-float-box.ws-float-h-p1 {
  --ws-float-heading: var(--ws-float-h-p1);
}
.entry-content .ws-float-box.ws-float-h-p2 {
  --ws-float-heading: var(--ws-float-h-p2);
}
.entry-content .ws-float-box.ws-float-h-p3 {
  --ws-float-heading: var(--ws-float-h-p3);
}
.entry-content .ws-float-box.ws-float-h-p4 {
  --ws-float-heading: var(--ws-float-h-p4);
}
.entry-content .ws-float-box.ws-float-h-p5 {
  --ws-float-heading: var(--ws-float-h-p5);
}

.entry-content .ws-float-box.ws-float-h-match {
  --ws-float-heading: var(--ws-float-text);
}
.entry-content .ws-float-box.ws-float-h-primary {
  --ws-float-heading: var(--ws-primary-dark);
}
.entry-content .ws-float-box.ws-float-h-accent {
  --ws-float-heading: var(--ws-accent);
}
.entry-content .ws-float-box.ws-float-h-blue {
  --ws-float-heading: var(--ws-blue);
}

.entry-content .ws-float-box.ws-float-left {
  float: left;
  width: min(var(--ws-float-width, 46%), 560px);
  margin: 0.2rem var(--ws-float-gap, 20px) 1rem 0;
}

.entry-content .ws-float-box.ws-float-right {
  float: right;
  width: min(var(--ws-float-width, 46%), 560px);
  margin: 0.2rem 0 1rem var(--ws-float-gap, 20px);
}

/* Centered single box (no text wrap around it). */
.entry-content .ws-float-box.ws-float-center {
  float: none;
  clear: both;
  width: min(var(--ws-float-width, 46%), 560px);
  margin: 0.75rem auto 1.25rem;
}

/* Force one box per line at full content width. */
.entry-content .ws-float-box.ws-float-one-per-line {
  float: none;
  clear: both;
  width: 100%;
  max-width: none;
  margin: 0.75rem 0 1.25rem;
}

/* Explicit full-width utility (alias of one-per-line for editor clarity). */
.entry-content .ws-float-box.ws-float-full-width {
  float: none;
  clear: both;
  width: 100%;
  max-width: none;
  margin: 0.75rem 0 1.25rem;
}

/* Optional spacing utility for clearer vertical separation between boxes. */
.entry-content .ws-float-box.ws-float-spacious {
  margin-top: 1.25rem !important;
  margin-bottom: 2rem !important;
}

.entry-content .ws-float-box.ws-float-small {
  width: min(32%, 320px);
}

.entry-content .ws-float-box.ws-float-large {
  width: min(58%, 680px);
}

/* Stacked layout: boxes one under another (no side-by-side float). */
.entry-content .ws-float-box.ws-float-stack {
  float: none;
  clear: both;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0.75rem;
  margin-bottom: 1.25rem;
}

/* Optional: stacked but not full content width (centred card column). */
.entry-content .ws-float-box.ws-float-stack.ws-float-stack-narrow {
  max-width: min(100%, 36rem);
  margin-left: auto;
  margin-right: auto;
}

.entry-content .ws-float-box :is(img, video, iframe) {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: max(0px, calc(var(--ws-float-radius, 12px) - 2px));
}

.entry-content :is(
  .alignleft,
  .wp-block-image.alignleft,
  .wp-block-video.alignleft,
  .wp-block-embed.alignleft,
  .ws-wrap-left
) {
  float: left;
  width: min(46%, 420px);
  margin: 0.2rem 1.25rem 1rem 0;
}

.entry-content :is(
  .alignright,
  .wp-block-image.alignright,
  .wp-block-video.alignright,
  .wp-block-embed.alignright,
  .ws-wrap-right
) {
  float: right;
  width: min(46%, 420px);
  margin: 0.2rem 0 1rem 1.25rem;
}

/* Optional size modifiers for wrapped media */
.entry-content :is(.ws-wrap-small, .ws-wrap-small.alignleft, .ws-wrap-small.alignright) {
  width: min(32%, 300px);
}

.entry-content :is(.ws-wrap-large, .ws-wrap-large.alignleft, .ws-wrap-large.alignright) {
  width: min(58%, 560px);
}

.entry-content :is(
  .wp-block-image.alignleft img,
  .wp-block-image.alignright img,
  .wp-block-video.alignleft video,
  .wp-block-video.alignright video,
  .wp-block-embed.alignleft iframe,
  .wp-block-embed.alignright iframe,
  .ws-wrap-left img,
  .ws-wrap-right img,
  .ws-wrap-left video,
  .ws-wrap-right video,
  .ws-wrap-left iframe,
  .ws-wrap-right iframe
) {
  width: 100%;
  max-width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .entry-content :is(
    .alignleft,
    .alignright,
    .wp-block-image.alignleft,
    .wp-block-image.alignright,
    .wp-block-video.alignleft,
    .wp-block-video.alignright,
    .wp-block-embed.alignleft,
    .wp-block-embed.alignright,
    .ws-wrap-left,
    .ws-wrap-right,
    .ws-wrap-small,
    .ws-wrap-large,
    .ws-float-box,
    .ws-float-box.ws-float-left,
    .ws-float-box.ws-float-right,
    .ws-float-box.ws-float-center,
    .ws-float-box.ws-float-one-per-line,
    .ws-float-box.ws-float-full-width,
    .ws-float-box.ws-float-spacious,
    .ws-float-box.ws-float-small,
    .ws-float-box.ws-float-large,
    .ws-float-box.ws-float-stack,
    .ws-float-box.ws-float-stack.ws-float-stack-narrow
  ) {
    float: none;
    width: 100%;
    margin: 0.5rem 0 1rem;
    transform: none;
  }
}

/* ==========================================================================
   Bulletin Board / bulletin-board (above link boxes)
   ========================================================================== */
.bulletin-board {
  width: 100%;
  padding: 20px;
  /* Solid frame ensures wood/cork show even if layered backgrounds fail to parse in older browsers. */
  border: var(--ws-bulletin-frame-width, 12px) solid var(--ws-bulletin-frame, #9a6a38);
  border-radius: 8px;
  background-color: var(--ws-bulletin-cork, #c9a56a);
  /* Cork panel + subtle grain (padding-box only; frame is the border above). */
  background-image:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.13) 0 3px, transparent 3px),
    radial-gradient(circle at 78% 36%, rgba(255, 255, 255, 0.1) 0 2px, transparent 2px),
    radial-gradient(circle at 34% 70%, rgba(0, 0, 0, 0.09) 0 2px, transparent 2px),
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--ws-bulletin-cork, #c9a56a) 92%, #ffffff) 0%,
      color-mix(in srgb, var(--ws-bulletin-cork, #c9a56a) 96%, #5a3d1f) 100%
    ),
    repeating-linear-gradient(
      32deg,
      rgba(255, 255, 255, 0.06) 0 3px,
      rgba(0, 0, 0, 0.04) 3px 7px
    ),
    /* Optional woodgrain (avoid calc() inside rgba — can invalidate whole shorthand). */
    repeating-linear-gradient(
      90deg,
      color-mix(in srgb, var(--ws-bulletin-frame, #9a6a38) 40%, transparent) 0 3px,
      color-mix(in srgb, var(--ws-bulletin-cork, #c9a56a) 88%, var(--ws-bulletin-frame, #9a6a38)) 3px 14px,
      color-mix(in srgb, var(--ws-bulletin-frame, #9a6a38) 35%, transparent) 14px 17px
    );
  background-origin: padding-box, padding-box, padding-box, padding-box, padding-box, padding-box;
  background-clip: padding-box, padding-box, padding-box, padding-box, padding-box, padding-box;
  box-shadow:
    0 12px 26px rgba(38, 22, 7, var(--ws-bulletin-shadow, 0.24)),
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    inset 0 0 0 var(--ws-bulletin-frame-accent-width, 0px)
      color-mix(in srgb, var(--ws-bulletin-frame, #9a6a38) 74%, #4b2c13 26%);
}

/* Optional hanging-board variant (enabled by Customizer toggle). */
.bulletin-board.ws-bulletin-board-hanging {
  margin-top: 70px;
  position: relative;
  transform-origin: 50% 0%;
  /* Inline CSS can set overflow:hidden when border radius is enabled; keep hangers visible. */
  overflow: visible !important;
  /* Add more separation from the wall/background when hanging mode is active. */
  box-shadow:
    0 22px 36px rgba(28, 17, 6, 0.34),
    0 8px 14px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Optional JS-driven sway when physics is enabled in Customizer. */
.bulletin-board.ws-bulletin-board-physics-enabled {
  will-change: transform;
}

.bulletin-board.ws-bulletin-board-hanging.ws-bulletin-board-depth-dramatic {
  box-shadow:
    0 32px 52px rgba(22, 13, 4, 0.44),
    0 12px 20px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.bulletin-board.ws-bulletin-board-hanging::before,
.bulletin-board.ws-bulletin-board-hanging::after {
  content: "";
  position: absolute;
  top: -90px;
  width: 9px;
  height: 102px;
  border-radius: 999px;
  background:
    radial-gradient(
      circle at 50% 8%,
      rgba(0, 0, 0, 0) 0 3px,
      color-mix(in srgb, var(--ws-bulletin-rope-ring-outer, #7b5a33) 90%, #3b2615) 3px 5px,
      color-mix(in srgb, var(--ws-bulletin-rope-ring-inner, #d9c095) 85%, #fff9ed) 5px 6px,
      rgba(0, 0, 0, 0) 6px
    ),
    /* Small bottom cap only — default-sized radial was covering most of the rope and hiding the twist texture. */
    radial-gradient(
      circle 12px at 50% calc(100% - 5px),
      color-mix(in srgb, var(--ws-bulletin-rope-light, #e7d0a3) 68%, var(--ws-bulletin-rope-mid, #c39a63)) 0 40%,
      color-mix(in srgb, var(--ws-bulletin-rope-mid, #c39a63) 85%, var(--ws-bulletin-rope-dark, #a6743f)) 40% 72%,
      rgba(0, 0, 0, 0) 72%
    ),
    repeating-linear-gradient(
      35deg,
      var(--ws-bulletin-rope-light, #e7d0a3) 0 3px,
      var(--ws-bulletin-rope-mid, #c39a63) 3px 6px,
      var(--ws-bulletin-rope-dark, #a6743f) 6px 9px
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 4px 7px rgba(0, 0, 0, 0.28);
  z-index: 3;
  transform-origin: 50% 0%;
}

/* Chain variant */
.bulletin-board.ws-bulletin-board-hanging.ws-bulletin-board-hang-chain::before,
.bulletin-board.ws-bulletin-board-hanging.ws-bulletin-board-hang-chain::after {
  width: 12px;
  background:
    repeating-radial-gradient(
      circle at 50% 10px,
      rgba(0, 0, 0, 0) 0 3px,
      #8f98a2 3px 5px,
      #d7dde3 5px 6px,
      rgba(0, 0, 0, 0) 6px 14px
    );
  box-shadow:
    0 3px 6px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

/* Bracket variant */
.bulletin-board.ws-bulletin-board-hanging.ws-bulletin-board-hang-bracket::before,
.bulletin-board.ws-bulletin-board-hanging.ws-bulletin-board-hang-bracket::after {
  top: -34px;
  width: 18px;
  height: 40px;
  border-radius: 3px;
  background:
    linear-gradient(
      to bottom,
      #e4e8ec 0%,
      #b8c0c8 45%,
      #8d96a0 100%
    );
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

.bulletin-board.ws-bulletin-board-hanging.ws-bulletin-board-hang-bracket::before {
  transform: rotate(-4deg);
}

.bulletin-board.ws-bulletin-board-hanging.ws-bulletin-board-hang-bracket::after {
  transform: rotate(4deg);
}

/* Picture-frame wire variant */
.bulletin-board.ws-bulletin-board-hanging.ws-bulletin-board-hang-picture::before,
.bulletin-board.ws-bulletin-board-hanging.ws-bulletin-board-hang-picture::after {
  top: -76px;
  width: 4px;
  height: 88px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 8%, #d7dce2 0 3px, #6e7883 3px 4px, rgba(0, 0, 0, 0) 4px),
    radial-gradient(circle at 50% 92%, #d7dce2 0 3px, #6e7883 3px 4px, rgba(0, 0, 0, 0) 4px),
    linear-gradient(to bottom, #d0d7df 0%, #7f8995 50%, #5f6872 100%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.26);
}

.bulletin-board.ws-bulletin-board-hanging.ws-bulletin-board-hang-picture::before {
  transform: rotate(-5deg);
}

.bulletin-board.ws-bulletin-board-hanging.ws-bulletin-board-hang-picture::after {
  transform: rotate(5deg);
}

.bulletin-board.ws-bulletin-board-hanging::before {
  left: clamp(34px, 13%, 148px);
  /* Rope length: use height multiplier (physics) — scaleY after rotate distorted stretch along tilted axis */
  height: calc(102px * var(--ws-bulletin-rope-left-scale, 1));
  transform: rotate(calc(var(--ws-bulletin-rope-tilt-left, -9deg) + var(--ws-bulletin-rope-left-angle-offset, 0deg)));
}

.bulletin-board.ws-bulletin-board-hanging::after {
  right: clamp(34px, 13%, 148px);
  height: calc(102px * var(--ws-bulletin-rope-right-scale, 1));
  transform: rotate(calc(var(--ws-bulletin-rope-tilt-right, 9deg) + var(--ws-bulletin-rope-right-angle-offset, 0deg)));
}

.bulletin-board.ws-bulletin-board-hanging.ws-bulletin-board-rope-clean::before,
.bulletin-board.ws-bulletin-board-hanging.ws-bulletin-board-rope-clean::after {
  background:
    radial-gradient(
      circle at 50% 8%,
      rgba(0, 0, 0, 0) 0 3px,
      color-mix(in srgb, var(--ws-bulletin-rope-ring-outer, #7b5a33) 80%, #5e4024) 3px 5px,
      color-mix(in srgb, var(--ws-bulletin-rope-ring-inner, #d9c095) 92%, #fffaf0) 5px 6px,
      rgba(0, 0, 0, 0) 6px
    ),
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--ws-bulletin-rope-light, #e7d0a3) 88%, #fff4df) 0%,
      color-mix(in srgb, var(--ws-bulletin-rope-mid, #c39a63) 85%, var(--ws-bulletin-rope-light, #e7d0a3)) 55%,
      color-mix(in srgb, var(--ws-bulletin-rope-dark, #a6743f) 75%, var(--ws-bulletin-rope-mid, #c39a63)) 100%
    );
}

.bulletin-board.ws-bulletin-board-hanging.ws-bulletin-board-sag-realistic::before {
  height: calc(108px * var(--ws-bulletin-rope-left-scale, 1));
  top: -94px;
  transform: rotate(calc(var(--ws-bulletin-rope-tilt-left, -9deg) + var(--ws-bulletin-rope-left-angle-offset, 0deg))) skewX(4deg) scaleX(1.08);
}

.bulletin-board.ws-bulletin-board-hanging.ws-bulletin-board-sag-realistic::after {
  height: calc(108px * var(--ws-bulletin-rope-right-scale, 1));
  top: -94px;
  transform: rotate(calc(var(--ws-bulletin-rope-tilt-right, 9deg) + var(--ws-bulletin-rope-right-angle-offset, 0deg))) skewX(-4deg) scaleX(1.08);
}

@media (max-width: 768px) {
  .bulletin-board.ws-bulletin-board-hanging {
    margin-top: 44px;
  }

  .bulletin-board.ws-bulletin-board-hanging::before,
  .bulletin-board.ws-bulletin-board-hanging::after {
    top: -56px;
    width: 7px;
  }

  /* Per-side heights (rope physics multiplier) override shared default height */
  .bulletin-board.ws-bulletin-board-hanging::before {
    height: calc(62px * var(--ws-bulletin-rope-left-scale, 1));
  }

  .bulletin-board.ws-bulletin-board-hanging::after {
    height: calc(62px * var(--ws-bulletin-rope-right-scale, 1));
  }

  .bulletin-board.ws-bulletin-board-hanging.ws-bulletin-board-hang-chain::before,
  .bulletin-board.ws-bulletin-board-hanging.ws-bulletin-board-hang-chain::after {
    width: 10px;
  }

  .bulletin-board.ws-bulletin-board-hanging.ws-bulletin-board-hang-bracket::before,
  .bulletin-board.ws-bulletin-board-hanging.ws-bulletin-board-hang-bracket::after {
    top: -28px;
    width: 14px;
    height: 30px;
  }

  .bulletin-board.ws-bulletin-board-hanging.ws-bulletin-board-hang-picture::before,
  .bulletin-board.ws-bulletin-board-hanging.ws-bulletin-board-hang-picture::after {
    top: -50px;
    width: 3px;
    height: 56px;
  }

  .bulletin-board.ws-bulletin-board-hanging.ws-bulletin-board-sag-realistic::before {
    top: -60px;
    height: calc(68px * var(--ws-bulletin-rope-left-scale, 1));
    transform: rotate(calc(var(--ws-bulletin-rope-tilt-left, -9deg) + var(--ws-bulletin-rope-left-angle-offset, 0deg))) skewX(4deg) scaleX(1.08);
  }

  .bulletin-board.ws-bulletin-board-hanging.ws-bulletin-board-sag-realistic::after {
    top: -60px;
    height: calc(68px * var(--ws-bulletin-rope-right-scale, 1));
    transform: rotate(calc(var(--ws-bulletin-rope-tilt-right, 9deg) + var(--ws-bulletin-rope-right-angle-offset, 0deg))) skewX(-4deg) scaleX(1.08);
  }
}

.bulletin-board-inner {
  max-width: none;
  width: 100%;
  position: relative;
  padding: 28px 22px 22px;
  /* Inner pinned note colour is separately customizable from the cork board. */
  border: 1px solid color-mix(in srgb, var(--ws-bulletin-note, #f7de74) 78%, #9e8a42);
  border-radius: 4px;
  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.28) 0%,
      rgba(255, 255, 255, 0.05) 22%,
      rgba(255, 255, 255, 0) 40%
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(164, 137, 52, 0.08) 0 1px,
      rgba(255, 255, 255, 0) 1px 28px
    ),
    var(--ws-bulletin-note, #f7de74);
  box-shadow:
    0 10px 20px rgba(48, 34, 8, 0.28),
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 -1px 0 rgba(149, 120, 38, 0.2) inset;
  transform: rotate(-0.7deg);
  transform-origin: 50% 8%;
}

@media (max-width: 768px) {
  .bulletin-board-inner {
    transform: none;
  }
}

.bulletin-board-inner::before {
  content: "";
  position: absolute;
  top: var(--ws-bulletin-tack-head-top, -14px);
  left: calc(var(--ws-bulletin-tack-left-pct, 50) * 1%);
  width: 20px;
  height: 20px;
  /* Slight tilt; Customizer can override via --ws-bulletin-tack-tilt. */
  transform: translateX(-50%) rotate(var(--ws-bulletin-tack-tilt, -9deg));
  transform-origin: 50% 85%;
  border-radius: 50%;
  /* Push-pin head colour: Customizer sets --ws-bulletin-tack in inline CSS. */
  background: radial-gradient(
    circle at 35% 30%,
    color-mix(in srgb, var(--ws-bulletin-tack, #8f96a1) 18%, #ffffff) 0 28%,
    var(--ws-bulletin-tack, #8f96a1) 52%,
    color-mix(in srgb, var(--ws-bulletin-tack, #8f96a1) 62%, #111111) 100%
  );
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.34),
    inset 0 -1px 1px rgba(0, 0, 0, 0.28);
  z-index: 2;
}

.bulletin-board-inner::after {
  content: "";
  position: absolute;
  /* Pin needle sits under the head (head height ~20px; tweak gap via +18px). */
  top: calc(var(--ws-bulletin-tack-head-top, -14px) + 18px);
  left: calc(var(--ws-bulletin-tack-left-pct, 50) * 1%);
  width: 3px;
  height: 16px;
  transform: translateX(-50%) rotate(var(--ws-bulletin-tack-tilt, -9deg));
  transform-origin: 50% 0;
  border-radius: 2px;
  background: linear-gradient(
    to bottom,
    #f8f8f8 0%,
    #c9cdd2 35%,
    #8e949d 70%,
    #6f757f 100%
  );
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
  z-index: 1;
}

.bulletin-board-heading {
  margin: 0 0 1rem;
  text-align: center;
  color: var(--ws-primary-dark);
  /* font-weight: set by Customiser via inline CSS (default 700) */
  letter-spacing: 0.02em;
  /* Bulletin Board title uses centralized display font token. */
  font-family: var(--ws-font-bulletin-heading);
  /* Inner note font-size already includes --ws-text-scale from Customizer inline CSS. */
  font-size: 1em;
}

/* Full-width news text: global .entry-content { max-width: 72ch } would sit this block on the left */
.bulletin-board .entry-content {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

/* Block editor alignment utilities override inherited text-align from .bulletin-board-inner */
.bulletin-board .entry-content [class*="has-text-align-"] {
  text-align: inherit;
}

/* News typography: alignment, weight, size, line height, max-width — Customizer (inline CSS) */

/* ==========================================================================
   Racing Archive page template
   ========================================================================== */
.racing-archive-year-jumps {
  margin-top: 1.5rem;
}

.racing-archive-collapsible > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.35em;
}

.racing-archive-collapsible > summary::-webkit-details-marker {
  display: none;
}

.racing-archive-collapsible > summary::marker {
  content: '';
}

.racing-archive-collapsible > summary::before {
  content: '\25B8';
  display: inline-block;
  font-size: 0.75em;
  line-height: 1;
  transition: transform 0.15s ease;
}

.racing-archive-collapsible[open] > summary::before {
  transform: rotate(90deg);
}

.racing-archive-quick-links-heading,
.racing-archive-year-heading {
  color: var(--ws-racing-archive-heading-color, var(--ws-primary-dark, #0d3d4d));
  font-weight: var(--ws-racing-archive-heading-weight, 600);
}

.racing-archive-quick-links-heading {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
}

.racing-archive-quick-links-details .racing-archive-year-jumps-list {
  margin-top: 0.35rem;
}

.racing-archive-year-jumps-list {
  margin: 0;
  padding-left: 1.25rem;
  list-style: disc;
}

.racing-archive-year-jumps-list li {
  margin-bottom: 0.35em;
}

.racing-archive-year-jumps-list a {
  text-decoration: underline;
}

.racing-archive-year {
  margin-bottom: 2rem;
  scroll-margin-top: 1.5rem;
}

.racing-archive-by-year {
  margin-top: 2rem;
}

.racing-archive-year-heading {
  margin: 0 0 0.75rem;
  font-size: 1.35rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  padding-bottom: 0.35rem;
}

.racing-archive-year > .racing-archive-list {
  margin-top: 0.35rem;
}

.racing-archive-list {
  margin: 0;
  padding-left: 1.25rem;
  list-style: disc;
}

.racing-archive-list li {
  margin-bottom: 0.35em;
}

.racing-archive-empty {
  margin-top: 1.5rem;
  color: var(--ws-text-light, #555);
}

/* ==========================================================================
   Racing News page template
   ========================================================================== */
.racing-news-intro {
  margin-bottom: 1.75rem;
}

.racing-news-intro p {
  margin: 0 0 1em;
}

.racing-news-intro p:last-child {
  margin-bottom: 0;
}

/* Latest Current Racing News post (replaces embedded documents) */
.racing-news-current {
  margin-bottom: 2rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background: var(--ws-primary, #fff);
}

.racing-news-current-title {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
}

.racing-news-current-meta {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  color: var(--ws-text-light, #555);
}

.racing-news-current-content {
  max-width: none;
}

.racing-news-archive-heading {
  margin: 2rem 0 1rem;
  font-size: 1.35rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.racing-news-list {
  margin-top: 0;
}

.racing-news-item {
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.racing-news-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.racing-news-item-title {
  margin: 0 0 0.35rem;
  font-size: 1.35rem;
}

.racing-news-item-title a {
  color: var(--ws-primary-dark, #0d3d4d);
  text-decoration: none;
}

.racing-news-item-title a:hover {
  text-decoration: underline;
}

.racing-news-item-meta {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  color: var(--ws-text-light, #555);
}

.racing-news-item-summary {
  margin-bottom: 0.75rem;
}

.racing-news-item-summary p:last-child {
  margin-bottom: 0;
}

.racing-news-read-more {
  font-weight: 600;
}

.racing-news-empty {
  margin-top: 1.5rem;
  color: var(--ws-text-light, #555);
}

.racing-news-pagination {
  margin-top: 2rem;
}

.racing-news-pagination ul.page-numbers {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.racing-news-pagination ul.page-numbers li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.racing-news-pagination a.page-numbers {
  display: inline-block;
  padding: 0.35rem 0.65rem;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  text-decoration: none;
  color: var(--ws-text, #333);
}

.racing-news-pagination span.page-numbers.current,
.racing-news-pagination a.page-numbers:hover {
  background: var(--ws-blue, #0981d1);
  border-color: var(--ws-blue, #0981d1);
  color: #fff;
}

.racing-news-pagination span.page-numbers.dots {
  border: none;
  padding: 0.35rem 0.25rem;
}

/* Galleries hub (page-templates/galleries.php) */
.galleries-intro {
  margin-bottom: 1.5rem;
}

.galleries-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
  margin: 0;
}

.galleries-card {
  margin: 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  overflow: hidden;
  background: var(--ws-background, #fff);
}

.galleries-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.galleries-card-link:hover .galleries-card-title,
.galleries-card-link:focus-visible .galleries-card-title {
  color: var(--ws-primary-dark, #0d3d4d);
}

.galleries-card-link:focus-visible {
  outline: 2px solid var(--ws-primary-dark, #0d3d4d);
  outline-offset: 2px;
}

.galleries-card-media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: rgba(13, 61, 77, 0.08);
}

.galleries-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.galleries-card-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(13, 61, 77, 0.12), rgba(13, 61, 77, 0.04));
}

.galleries-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem 1.1rem 1.15rem;
  flex: 1;
}

.galleries-card-title {
  font-family: var(--ws-font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ws-text, #222);
}

.galleries-card-meta {
  font-size: 0.9rem;
  color: var(--ws-text-light, #666);
}

.galleries-card-cta {
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ws-primary-dark, #0d3d4d);
}

.galleries-empty {
  margin: 1rem 0;
  color: var(--ws-text-light, #666);
  font-style: italic;
}

.galleries-pagination {
  margin-top: 2rem;
}

.galleries-pagination ul.page-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
}

.galleries-pagination ul.page-numbers li {
  margin: 0;
}

.galleries-pagination a.page-numbers {
  display: inline-block;
  padding: 0.4rem 0.75rem;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  text-decoration: none;
  color: var(--ws-primary-dark, #0d3d4d);
}

.galleries-pagination span.page-numbers.current,
.galleries-pagination a.page-numbers:hover {
  background: var(--ws-primary-dark, #0d3d4d);
  border-color: var(--ws-primary-dark, #0d3d4d);
  color: #fff;
}

.galleries-pagination span.page-numbers.dots {
  padding: 0.35rem 0.25rem;
}

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

/* ==========================================================================
   Homepage Link Boxes
   ========================================================================== */
.home-link-boxes {
  width: 100%;
  padding: 48px 24px;
  background: var(--ws-background);
}

.home-link-boxes-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 24px;
  align-items: stretch;
}

.home-link-boxes-col {
  display: contents;
}

.home-link-box {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: row;
  justify-content: stretch;
  min-height: 120px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
  text-align: center;
  border-radius: 8px;
  transform: translateY(var(--ws-link-physics-lift)) rotate(var(--ws-link-physics-rotate));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease-out;
  overflow: hidden;
}

.home-link-box:active {
  transform: translateY(calc(0px + var(--ws-link-physics-lift))) rotate(var(--ws-link-physics-rotate)) scale(0.98);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  transition-duration: 0.1s;
}

.home-link-box .home-link-box-text {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	min-height: 120px;
	min-width: 0;
	padding: 24px;
	transition: filter 0.3s ease-out;
}

.home-link-box-has-image .home-link-box-text {
	flex: 1 1 auto;
	min-height: 0;
	padding: 16px 20px;
}

.home-link-box.home-link-box-has-image {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.home-link-box.home-link-box-has-image .home-link-box-image {
	width: 100%;
	min-width: 0;
	aspect-ratio: 16 / 9;
	flex: 0 0 auto;
}

/* Page Link Boxes: optional per-button “show whole image” (no crop). */
.home-link-box.home-link-box-has-image.home-link-box-image-fit-contain .home-link-box-image {
	aspect-ratio: auto;
	max-height: min(50vh, 420px);
	overflow: hidden;
	background: rgba(0, 0, 0, 0.04);
}

.home-link-box.home-link-box-has-image.home-link-box-image-fit-contain .home-link-box-image img {
	position: static;
	width: 100%;
	height: auto;
	max-height: min(50vh, 420px);
	object-fit: contain;
	object-position: center;
}

.home-link-box.home-link-box-has-image.home-link-box-image-fit-contain:hover .home-link-box-image img {
	transform: none;
}

.home-link-box.home-link-box-has-image .home-link-box-text {
	width: 100%;
	flex: 1 1 auto;
}

.home-link-box-image {
	display: block;
	position: relative;
	flex-shrink: 0;
	width: 40%;
	min-width: 100px;
	aspect-ratio: 1;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.05);
}

.home-link-box-image img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.home-link-box:hover .home-link-box-image img {
  transform: scale(1.05);
}

.home-link-box:hover {
  transform: translateY(calc(-4px + var(--ws-link-physics-lift))) rotate(var(--ws-link-physics-rotate));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.home-link-box:hover .home-link-box-text {
	filter: brightness(0.95);
}

.home-link-boxes[data-link-physics-enabled="1"] .home-link-box {
	will-change: transform;
}

/* Customizer-only physics indicator badges (debug aid while tuning motion). */
body.ws-customizer-preview .bulletin-board.ws-bulletin-board-physics-enabled,
body.ws-customizer-preview .header-donate a.ws-donate-physics-enabled,
body.ws-customizer-preview .home-link-boxes[data-link-physics-enabled="1"] .home-link-box {
  position: relative;
}

body.ws-customizer-preview .bulletin-board.ws-bulletin-board-physics-enabled::after,
body.ws-customizer-preview .header-donate a.ws-donate-physics-enabled::after,
body.ws-customizer-preview .home-link-boxes[data-link-physics-enabled="1"] .home-link-box::after {
  content: "Physics";
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 6;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: #ffffff;
  background: rgba(20, 36, 64, 0.86);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}

.home-link-box-title {
  line-height: 1.3;
}

@media (max-width: 768px) {
  .home-link-boxes-inner {
    flex-wrap: wrap;
  }
  .home-link-box {
    flex: 1 1 calc(50% - 12px);
    min-width: 140px;
  }
}

/* Page Link Boxes: strip layout + optional floating panel styling. */
.home-link-boxes.page-link-boxes.page-link-boxes--strip-full-width {
  padding-left: 0;
  padding-right: 0;
}

.home-link-boxes.page-link-boxes.page-link-boxes--strip-full-width .home-link-boxes-inner {
  max-width: none;
}

.home-link-boxes.page-link-boxes.page-link-boxes--strip-float-left,
.home-link-boxes.page-link-boxes.page-link-boxes--strip-float-right,
.home-link-boxes.page-link-boxes.page-link-boxes--strip-center {
  padding-top: 0.2rem;
  padding-bottom: 1rem;
  background: transparent;
}

.home-link-boxes.page-link-boxes .page-link-boxes-strip.page-link-boxes-inner--float-left {
  float: left;
  width: min(var(--ws-float-width, 46%), 560px);
  margin: 0.2rem var(--ws-float-gap, 20px) 1rem 0;
}

.home-link-boxes.page-link-boxes .page-link-boxes-strip.page-link-boxes-inner--float-right {
  float: right;
  width: min(var(--ws-float-width, 46%), 560px);
  margin: 0.2rem 0 1rem var(--ws-float-gap, 20px);
}

.home-link-boxes.page-link-boxes .page-link-boxes-strip.page-link-boxes-inner--center {
  float: none;
  clear: both;
  width: min(var(--ws-float-width, 46%), 560px);
  margin: 0.75rem auto 1.25rem;
}

.home-link-boxes.page-link-boxes .page-link-boxes-strip .home-link-boxes-inner {
  max-width: none;
}

.home-link-boxes.page-link-boxes .page-link-boxes-strip.ws-float-box {
  float: none;
  width: 100%;
  margin: 0.2rem 0 1rem;
  padding: var(--ws-float-padding, 16px);
  border: var(--ws-float-border-width, 1px) solid var(--ws-float-border, #cfd7df);
  border-radius: var(--ws-float-radius, 12px);
  background: var(--ws-float-bg, #ffffff);
  color: var(--ws-float-text, #2a2a2a);
  box-shadow: 0 8px 20px rgba(13, 61, 77, var(--ws-float-shadow, 0.14));
  font-family: var(--ws-float-font, var(--ws-font-content-note));
  transform: none;
}

.home-link-boxes.page-link-boxes .page-link-boxes-strip.ws-float-box.ws-float-left {
  float: left;
  width: min(var(--ws-float-width, 46%), 560px);
  margin: 0.2rem var(--ws-float-gap, 20px) 1rem 0;
}

.home-link-boxes.page-link-boxes .page-link-boxes-strip.ws-float-box.ws-float-right {
  float: right;
  width: min(var(--ws-float-width, 46%), 560px);
  margin: 0.2rem 0 1rem var(--ws-float-gap, 20px);
}

.home-link-boxes.page-link-boxes .page-link-boxes-strip.ws-float-box.ws-float-center {
  float: none;
  clear: both;
  width: min(var(--ws-float-width, 46%), 560px);
  margin: 0.75rem auto 1.25rem;
}

.home-link-boxes.page-link-boxes .page-link-boxes-strip.ws-float-box.ws-float-full-width {
  float: none;
  clear: both;
  width: 100%;
  max-width: none;
  margin: 0.75rem 0 1.25rem;
}

@media (max-width: 768px) {
  .home-link-boxes.page-link-boxes .page-link-boxes-strip.page-link-boxes-inner--float-left,
  .home-link-boxes.page-link-boxes .page-link-boxes-strip.page-link-boxes-inner--float-right,
  .home-link-boxes.page-link-boxes .page-link-boxes-strip.page-link-boxes-inner--center,
  .home-link-boxes.page-link-boxes .page-link-boxes-strip.ws-float-box.ws-float-left,
  .home-link-boxes.page-link-boxes .page-link-boxes-strip.ws-float-box.ws-float-right,
  .home-link-boxes.page-link-boxes .page-link-boxes-strip.ws-float-box.ws-float-center {
    float: none;
    width: 100%;
    margin: 0.5rem 0 1rem;
  }
}

/* ==========================================================================
   Homepage Content Containers (below link boxes)
   ========================================================================== */
.home-content-boxes {
  width: 100%;
  padding: 0 24px 48px;
  background: var(--ws-background);
}

.home-content-boxes-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.home-content-box {
  position: relative;
  font-family: var(--ws-font-content-note);
  color: var(--ws-content-text, #2f2a17);
  /* Sticky-note look for content containers; can be disabled in Customizer. */
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--ws-content-note, #fff4a9) 78%, var(--ws-content-note-line, #a48934));
  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.28) 0%,
      rgba(255, 255, 255, 0.05) 22%,
      rgba(255, 255, 255, 0) 40%
    ),
    repeating-linear-gradient(
      to bottom,
      color-mix(in srgb, var(--ws-content-note-line, #a48934) 34%, transparent) 0 1px,
      rgba(255, 255, 255, 0) 1px 28px
    ),
    var(--ws-content-note, #fff4a9);
  padding: 28px 20px 20px;
  box-shadow:
    0 9px 18px rgba(48, 34, 8, 0.2),
    0 1px 0 rgba(255, 255, 255, 0.56) inset,
    0 -1px 0 color-mix(in srgb, var(--ws-content-note-line, #a48934) 22%, transparent) inset;
  transform: rotate(-0.5deg);
  transform-origin: 50% 8%;
}

.home-content-box:nth-child(even) {
  /* Alternating tilt keeps cards from looking mechanically aligned. */
  transform: rotate(0.45deg);
}

/* Optional folded bottom-right corner (per-container toggle in Customizer). */
.home-content-box-curl {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 26px;
  height: 26px;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 0.75) 50% 100%);
  box-shadow:
    -2px -2px 4px rgba(98, 76, 18, 0.18),
    inset 1px 1px 1px rgba(255, 255, 255, 0.55);
  border-bottom-right-radius: 3px;
  z-index: 3;
}

.home-content-box-curl::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--ws-content-note-line, #a48934) 18%, transparent) 0 55%,
    color-mix(in srgb, var(--ws-content-note-line, #a48934) 52%, #52380d) 56% 100%
  );
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  opacity: 0.9;
}

/* Push-pin (shared decorative vars are set globally via inline CSS). */
.home-content-box::before {
  content: "";
  position: absolute;
  top: var(--ws-content-tack-head-top, -14px);
  left: calc(var(--ws-content-tack-left-pct, 50) * 1%);
  width: 20px;
  height: 20px;
  transform: translateX(-50%) rotate(var(--ws-content-tack-tilt, -9deg));
  transform-origin: 50% 85%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 30%,
    color-mix(in srgb, var(--ws-content-tack, #8f96a1) 18%, #ffffff) 0 28%,
    var(--ws-content-tack, #8f96a1) 52%,
    color-mix(in srgb, var(--ws-content-tack, #8f96a1) 62%, #111111) 100%
  );
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.34),
    inset 0 -1px 1px rgba(0, 0, 0, 0.28);
  z-index: 2;
}

.home-content-box::after {
  content: "";
  position: absolute;
  top: calc(var(--ws-content-tack-head-top, -14px) + 18px);
  left: calc(var(--ws-content-tack-left-pct, 50) * 1%);
  width: 3px;
  height: 16px;
  transform: translateX(-50%) rotate(var(--ws-content-tack-tilt, -9deg));
  transform-origin: 50% 0;
  border-radius: 2px;
  background: linear-gradient(
    to bottom,
    #f8f8f8 0%,
    #c9cdd2 35%,
    #8e949d 70%,
    #6f757f 100%
  );
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
  z-index: 1;
}

.home-content-box-title {
  margin: 0 0 0.75rem;
  color: var(--ws-content-title, var(--ws-primary-dark));
  font-family: var(--ws-font-content-note);
}

.home-content-box-content > *:first-child {
  margin-top: 0;
}

.home-content-box-content > *:last-child {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .home-content-boxes-inner {
    grid-template-columns: 1fr;
  }

  .home-content-box,
  .home-content-box:nth-child(even) {
    transform: none;
  }
}

/* ==========================================================================
   Supporter Logos Slider
   ========================================================================== */
.supporter-logos {
  width: 100%;
  position: relative;
  left: 50%;
  right: 50%;
  height: auto;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 48px 0;
  background: var(--ws-background);
  overflow: hidden;
  box-sizing: border-box;
}

.supporter-logos-container {
  width: 100%;
  overflow: hidden;
}

.supporter-logos-track {
  display: flex;
  gap: 40px;
  align-items: center;
  will-change: transform;
}

@keyframes supporterLogosScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.supporter-logo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
}

.supporter-logo-item img {
  max-height: 150px;
  max-width: 200px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: filter 0.3s, opacity 0.3s;
}

.supporter-logo-item:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

.supporter-logo-item a {
  display: block;
  text-decoration: none;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  margin-top: auto;
  padding-top: 48px;
  padding: 32px 24px;
  background: var(--ws-blue);
  color: var(--ws-off-white);
}

.footer-content {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}

.footer-image {
  flex-shrink: 0;
}

/* Optional link wrapping Customiser footer image */
.footer-image .footer-image-link {
  display: inline-block;
  line-height: 0;
}

.footer-image img {
  max-height: 100px;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}

.footer-left {
  flex: 1;
  text-align: center;
  min-width: 200px;
}

.footer-right {
  text-align: right;
  flex-shrink: 0;
}

.footer-info {
  margin: 0 0 4px;
  font-size: 0.9rem;
}

.footer-info:last-child {
  margin-bottom: 0;
}

.site-footer a {
  color: var(--ws-accent);
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

.footer-social {
  margin-bottom: 24px;
}

.footer-social-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-social-list li {
  margin: 0;
}

.footer-social .social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--ws-off-white);
  transition: opacity 0.2s;
}

.footer-social .social-icon:hover {
  color: inherit;
}

.footer-social .social-icon svg {
  width: 24px;
  height: 24px;
}

.footer-copyright {
  margin: 0;
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  .footer-content {
    flex-direction: column;
    text-align: center;
  }

  .footer-image {
    order: -1;
    margin-bottom: 16px;
  }

  .footer-right {
    text-align: center;
    margin-top: 16px;
  }
}

/* ==========================================================================
   Responsive Optimization Overrides (mobile/tablet)
   ========================================================================== */
@media (max-width: 992px) {
  .site-content {
    padding: 36px 20px;
  }

  .site-content.content-two-thirds,
  .site-content.content-three-quarters,
  .site-content.content-half,
  .site-content.content-one-third {
    max-width: 100%;
  }

  .home-link-boxes,
  .home-content-boxes {
    padding-left: 20px;
    padding-right: 20px;
  }

  .awards-carousel,
  .supporter-logos {
    padding: 36px 0;
  }

  .awards-carousel-track,
  .supporter-logos-track {
    gap: 28px;
  }

  .awards-carousel-item img,
  .supporter-logo-item img {
    max-height: 120px;
    max-width: 170px;
  }
}

@media (max-width: 768px) {
  .site-content {
    padding: 28px 16px;
  }

  .entry-content[style*="column-count"] {
    column-count: 1 !important;
  }

  .page-hero img {
    height: 300px;
  }

  .page-hero .entry-title {
    font-size: clamp(1.5rem, 5.5vw, 2rem);
  }

  .home-link-boxes,
  .home-content-boxes {
    padding-left: 16px;
    padding-right: 16px;
  }

  .home-link-boxes {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .home-content-boxes {
    padding-bottom: 36px;
  }

  .home-link-box {
    min-height: 108px;
    font-size: 1rem;
  }

  .home-link-box .home-link-box-text {
    min-height: 108px;
    padding: 18px;
  }

  .home-content-box {
    padding: 26px 16px 16px;
  }

  .home-content-box-title {
    font-size: 1.15rem;
  }

  .donate-modal {
    padding: 12px;
  }

  .donate-modal-content iframe {
    min-height: 300px;
  }

  .footer-social .social-icon {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 600px) {
  .home-link-boxes-inner {
    gap: 12px;
  }

  .home-link-box {
    flex: 1 1 100%;
    min-width: 0;
  }

  .home-link-box-image {
    width: 36%;
    min-width: 88px;
  }

  .home-link-box .home-link-box-text {
    padding: 14px;
  }

  .awards-carousel-track,
  .supporter-logos-track {
    gap: 20px;
  }

  .awards-carousel-item img,
  .supporter-logo-item img {
    max-height: 96px;
    max-width: 140px;
  }

  .ws-accessibility-panel {
    right: var(--ws-a11y-offset-x, 0px);
    min-width: 170px;
  }

  body.ws-a11y-side-left .ws-accessibility-panel {
    left: var(--ws-a11y-offset-x, 0px);
    right: auto;
  }

  #ws-accessibility-panel-content {
    max-height: min(62vh, 460px);
  }
}

@media (max-width: 480px) {
  .header-inner {
    padding: 8px 12px;
    gap: 8px;
  }

  .site-title {
    font-size: 0.95rem;
  }

  .menu-toggle {
    width: 40px;
    height: 40px;
  }

  .main-nav.is-open a {
    padding: 12px 16px;
  }

  .main-nav.is-open ul ul a {
    padding: 10px 16px 10px 20px;
  }

  .hero-dots {
    bottom: 10px;
  }

  .awards-carousel,
  .supporter-logos {
    padding: 28px 0;
  }
}