/*
Theme Name: Venue
Theme URI: https://rezzyhub.com
Author: RezzyHub
Description: A mobile-first theme for a venue that sells time by the hour — bays, lanes, courts, studios. Every name, photo and detail is set under Appearance → Customize; nothing about one venue is written into the theme.
Version: 2.4.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: venue
*/

/* ---------------------------------------------------------------
   Design tokens
   Near-black, maroon and gold. Every one of these is a setting a venue can
   override; nothing here is anybody's brand.
--------------------------------------------------------------- */
:root {
  --ink: #0b0d0c;
  --ink-2: #121614;
  /* What the promo band's translucent stops lie over. The default scheme
     prints no inline CSS — these :root values ARE its scheme — so this has to
     be declared here too, or var(--band-base) resolves to nothing and takes
     the band's whole background declaration down with it. A colour scheme
     overrides it with whichever base keeps the band's text readable. */
  --band-base: #0b0d0c;
  /* Lodge's accent lifted to where it reads on that band. Declared here for
     the same reason as --band-base: the default scheme prints no inline CSS,
     so these :root values are its scheme. */
  --band-accent: #f0e1b7;
  --surface: #171d1a;
  --surface-2: #1e2622;
  /* What an edge is made of. White on a dark scheme, black on a pale one —
     so every hairline, hover tint and divider flips with the palette
     instead of disappearing into the page. */
  --contrast-rgb: 255 255 255;
  --line: rgb(var(--contrast-rgb) / 0.10);
  --line-strong: rgb(var(--contrast-rgb) / 0.18);

  --text: #f2f1ec;
  --text-rgb: 242 241 236;
  --text-muted: #a8b0aa;

  --gold: #d8b44a;
  --gold-bright: #f0cf72;
  --maroon: #7b1e2b;
  --turf: #34894a;
  --turf-bright: #55b06c;

  /* The same colours as channels, for the places that need them at an
     opacity: a glow, a gradient, the glass behind the header. Written this
     way rather than as a second hex so a colour scheme sets each hue once
     and everything transparent that is made from it follows. */
  --ink-rgb: 11 13 12;
  --surface-rgb: 23 29 26;
  --gold-rgb: 216 180 74;
  --maroon-rgb: 123 30 43;
  --turf-rgb: 52 137 74;

  /* What reads on the accent. A dark brown belongs under gold and nowhere
     else, so it travels with the accent rather than being written into the
     button rule. */
  --accent-contrast: #171106;

  /* What reads on a saturated band — the promo strip and the .band section,
     both of which paint their own colour and are not the page, so what reads
     on them has nothing to do with --text. White here because that is what
     both rules said before they were tokenised; a scheme whose warm hue is a
     mid-tone gold sets it dark instead. */
  --on-colour: #ffffff;

  /* The midpoint of the promo bar's gradient: the warm hue, lifted. */
  --warm-bright: #a32b3c;

  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 6px 20px rgba(0, 0, 0, 0.30);

  --wrap: 1180px;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --header-h: 74px;

  --font-display: "Bricolage Grotesque", "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* The tick used by .checklist, as a mask so it takes its colour from
     the CSS rather than from a fill baked into the file. */
  --venue-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.075rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.nav-open { overflow: hidden; }

img, video, svg, iframe { max-width: 100%; height: auto; display: block; }

a { color: var(--gold-bright); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gold); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  font-weight: 800;
}
h1 { font-size: clamp(2.3rem, 1.5rem + 4vw, 4.4rem); }
h2 { font-size: clamp(1.85rem, 1.25rem + 2.6vw, 3rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem); }
p { margin: 0 0 1.1em; }

:focus-visible {
  outline: 3px solid var(--gold-bright);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  width: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
}
.wrap--narrow { width: min(100% - (var(--gutter) * 2), 780px); margin-inline: auto; }

.section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.section--tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.section--alt { background: var(--ink-2); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gold);
  color: #14100a;
  padding: 0.75rem 1.25rem;
  font-weight: 700;
  z-index: 999;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* ---------------------------------------------------------------
   Shared bits
--------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.9rem;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.lede {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  color: var(--text-muted);
  max-width: 60ch;
}

.btn,
.wp-block-button > .wp-block-button__link {
  --btn-bg: var(--gold);
  --btn-fg: var(--accent-contrast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.95rem 1.7rem;
  min-height: 50px;
  border: 0;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-weight: 750;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s var(--ease);
  box-shadow: 0 8px 24px rgb(var(--gold-rgb) / 0.22);
}
.btn svg,
.wp-block-button > .wp-block-button__link svg { flex: none; width: 20px; height: 20px; }
.btn:hover,
.wp-block-button > .wp-block-button__link:hover {
  color: var(--btn-fg);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgb(var(--gold-rgb) / 0.30);
}
.btn:active,
.wp-block-button > .wp-block-button__link:active { transform: translateY(0); }

.btn--ghost,
.wp-block-button.is-style-venue-ghost > .wp-block-button__link {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  border: 1.5px solid var(--line-strong);
  box-shadow: none;
}
.btn--ghost:hover,
.wp-block-button.is-style-venue-ghost > .wp-block-button__link:hover {
  color: var(--text);
  background: rgb(var(--contrast-rgb) / 0.06);
  border-color: var(--gold);
  box-shadow: none;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.9rem;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 3vw, 2.1rem);
}

/* ---------------------------------------------------------------
   Announcement bar
--------------------------------------------------------------- */
.promo-bar {
  background: linear-gradient(90deg, var(--maroon), var(--warm-bright) 55%, var(--maroon));
  color: var(--on-colour);
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.6rem var(--gutter);
  position: relative;
  /* Below the header, so the sticky header slides cleanly over it. */
  z-index: 1;
}
/* Scroll is locked while the nav is open, so the bar can safely sit above
   the overlay rather than leaving a dead band at the top of the screen. */
body.nav-open .promo-bar { z-index: 55; }
/* Both of these paint on the bar's own maroon gradient, so neither can use a
   colour chosen to read on the page.

   `strong` was the page's link colour: a dark terracotta on a dark terracotta
   bar, measuring 1.03:1 on Linen — the alert's own headline, invisible. The
   link was a hardcoded #ffe9a8, which owes nothing to the scheme and fell to
   2.85:1 on Court.

   Both now use the colour the bar already trusts for its text. The emphasis
   survives on weight, and the link keeps its underline. */
.promo-bar a { color: var(--on-colour); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.promo-bar strong { color: var(--on-colour); }

/* ---------------------------------------------------------------
   Header / navigation
--------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}
/*
 * The blur lives on a pseudo-element, not on .site-header itself. A
 * backdrop-filter would make the header a containing block for its
 * position:fixed descendants, which would trap the mobile nav overlay
 * inside the header's own box instead of letting it fill the viewport.
 */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(var(--ink-rgb) / 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background-color 0.3s var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--line); }
.site-header.is-stuck::before { background: rgb(var(--ink-rgb) / 0.95); }
/* While the overlay is open the header must read as solid, not glass. */
body.nav-open .site-header::before {
  background: var(--ink);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.header-inner { position: relative; }

.header-inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

/*
 * The nav overlay is a descendant of the header, so it stacks inside the
 * header's own context. Lifting the brand and the controls above the
 * overlay's z-index keeps the logo and hamburger tappable while it's open.
 */
.brand, .header-cta { position: relative; z-index: 45; }

.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--text); }
.brand img { height: 52px; width: auto; }
@media (max-width: 480px) {
  .brand img { height: 42px; }
}
.brand-text { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; line-height: 1.1; }
.brand-text span { display: block; font-family: var(--font-body); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.19em; text-transform: uppercase; color: var(--gold); }

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  padding: 0;
  place-items: center;
}
.nav-toggle-bars { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; position: relative; transition: background-color 0.2s var(--ease); }
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.28s var(--ease), top 0.28s var(--ease);
}
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { top: 0; transform: rotate(-45deg); }

.primary-nav { display: flex; align-items: center; gap: 0.35rem; }
.primary-nav ul { display: flex; align-items: center; gap: 0.15rem; list-style: none; margin: 0; padding: 0; }
.primary-nav a:not(.btn) {
  display: block;
  padding: 0.6rem 0.85rem;
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.primary-nav a:hover { background: rgb(var(--contrast-rgb) / 0.07); color: var(--gold-bright); }
/* The nav's own CTA is for the mobile overlay only; the header keeps its own. */
.primary-nav > .btn { display: none; }
.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a { color: var(--gold); }
/* An ancestor of the current page is marked too, so a season page keeps
   "Leaderboard" lit in the bar above it. */
.primary-nav .current-menu-ancestor > a,
.primary-nav .current-page-ancestor > a { color: var(--gold); }

/* Dropdowns. The parent stays a link to its own page — the submenu adds to it
   rather than standing in for it, so Leaderboard still goes to Leaderboard and
   the seasons hang underneath. Opened by hover and by :focus-within, so tabbing
   through the nav reveals it exactly the way pointing at it does; no script. */
.primary-nav .menu-item-has-children { position: relative; }
.primary-nav .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin-left: 0.45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
  opacity: 0.5;
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}
.primary-nav .menu-item-has-children:hover > a::after,
.primary-nav .menu-item-has-children:focus-within > a::after {
  opacity: 1;
  transform: translateY(0.05em) rotate(225deg);
}

.primary-nav .sub-menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  display: block;          /* beats the flex laid on .primary-nav ul */
  min-width: max(100%, 13rem);
  margin: 0;
  padding: 0.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgb(var(--ink-rgb) / 0.97);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
  z-index: 60;
}
/* Bridges the gap above the panel. Without it the pointer crosses dead space
   on the way down and the menu closes underneath it. */
.primary-nav .sub-menu::before {
  content: "";
  position: absolute;
  inset: -0.5rem 0 auto 0;
  height: 0.5rem;
}
.primary-nav .menu-item-has-children:hover > .sub-menu,
.primary-nav .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.primary-nav .sub-menu li { width: 100%; }
.primary-nav .sub-menu a:not(.btn) { white-space: nowrap; }

.header-cta { display: flex; align-items: center; gap: 0.6rem; }
.header-cta .btn { padding: 0.7rem 1.3rem; min-height: 44px; font-size: 0.93rem; }
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text);
  text-decoration: none;
  font-weight: 650;
  font-size: 0.93rem;
  padding: 0.55rem 0.4rem;
  white-space: nowrap;
}
.header-phone svg { flex: none; width: 20px; height: 20px; }
.header-phone:hover { color: var(--gold-bright); }

@media (max-width: 980px) {
  .nav-toggle { display: grid; }
  .header-cta .btn { display: none; }
  .header-phone .header-phone-label { display: none; }

  .primary-nav {
    position: fixed;
    inset: 0;
    display: block;
    /* --nav-offset is set from the header's real bottom edge, so the first
       link clears the promo bar and admin bar as well as the header. */
    padding: calc(var(--nav-offset, var(--header-h)) + 1.5rem) var(--gutter) 3rem;
    background: var(--ink);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
    z-index: 40;
  }
  .primary-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .primary-nav ul { display: block; }
  .primary-nav li { border-bottom: 1px solid var(--line); }
  .primary-nav a:not(.btn) {
    padding: 1.05rem 0.25rem;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    border-radius: 0;
  }
  .primary-nav a:not(.btn):hover { background: transparent; }

  /* The overlay is a full screen with room to spare, so the submenu is simply
     open. Hiding two items behind a tap-to-expand costs the reader a gesture
     and a guess to save space that is not scarce here. Indented under its
     parent and set smaller, so the hierarchy is legible without a control. */
  .primary-nav .menu-item-has-children > a::after { display: none; }
  .primary-nav .sub-menu {
    position: static;
    min-width: 0;
    margin: -0.25rem 0 0.9rem;
    padding: 0 0 0 0.95rem;
    border: 0;
    border-left: 2px solid var(--line);
    border-radius: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .primary-nav .sub-menu::before { display: none; }
  .primary-nav .sub-menu li { border-bottom: 0; }
  .primary-nav .sub-menu a:not(.btn) {
    padding: 0.5rem 0.25rem;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 650;
    white-space: normal;
  }

  /* Re-show the nav's own CTA, which is hidden at desktop widths. */
  .primary-nav > .btn { display: inline-flex; width: 100%; margin-top: 1.75rem; }
}

/* ---------------------------------------------------------------
   Hero
--------------------------------------------------------------- */
.hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: min(88svh, 780px);
  padding: clamp(5rem, 14vw, 9rem) 0 clamp(2.5rem, 6vw, 4.5rem);
  overflow: hidden;
  isolation: isolate;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Bias right so the bright simulator screen sits clear of the headline. */
  object-position: 72% 45%;
  filter: brightness(1.22) contrast(1.06) saturate(1.05);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgb(var(--ink-rgb) / 0.92) 0%, rgb(var(--ink-rgb) / 0.74) 40%, rgb(var(--ink-rgb) / 0.30) 72%, rgb(var(--ink-rgb) / 0.14) 100%),
    linear-gradient(to top, var(--ink) 1%, rgb(var(--ink-rgb) / 0.30) 42%, rgb(var(--ink-rgb) / 0.70) 100%);
}
.hero-inner { max-width: 46rem; }
.hero h1 { margin-bottom: 0.35em; text-wrap: balance; }
.hero h1 em {
  font-style: normal;
  color: var(--gold);
  display: block;
}
.hero .lede { color: rgb(var(--text-rgb) / 0.88); font-size: clamp(1.08rem, 1rem + 0.55vw, 1.32rem); }

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 5vw, 3.25rem);
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.hero-stat b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  color: var(--gold);
  line-height: 1;
}
.hero-stat span {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------------------------------------------------------------
   Feature grid
--------------------------------------------------------------- */
.grid { display: grid; gap: clamp(1rem, 2.2vw, 1.5rem); }
/* Cap at three tracks so a six-card set reads as 3+3, never 4+2. */
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }

.feature { position: relative; transition: transform 0.3s var(--ease), border-color 0.3s var(--ease); }
.feature:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.feature-icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: rgb(var(--gold-rgb) / 0.13);
  color: var(--gold);
  margin-bottom: 1.1rem;
}
.feature-icon svg { width: 24px; height: 24px; }
.feature h3 { margin-bottom: 0.4rem; }
.feature p { color: var(--text-muted); margin: 0; font-size: 0.97rem; }

.section-head { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .lede { margin-inline: auto; }

/* ---------------------------------------------------------------
   Award band
--------------------------------------------------------------- */
.award {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 4vw, 2.75rem);
  flex-wrap: wrap;
}
.award-badge {
  flex: none;
  width: clamp(96px, 16vw, 148px);
  height: auto;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.45));
}
.award h2 { font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.2rem); }
.award .lede { margin-bottom: 0; }
.award > div { flex: 1 1 320px; }

/* ---------------------------------------------------------------
   Split / media rows
--------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(1.75rem, 5vw, 4rem);
  align-items: center;
}
.split-media img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.split--reverse .split-media { order: 2; }
@media (max-width: 780px) {
  .split--reverse .split-media { order: 0; }
}

.checklist { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.8rem; }
.checklist li { display: flex; gap: 0.8rem; align-items: flex-start; }
.checklist svg { flex: none; width: 21px; height: 21px; color: var(--turf-bright); margin-top: 0.25rem; }
/* The tick comes from the list, not from something typed into every item.
   A tick list used to need [venue_icon name="check"] at the start of each
   line, which is three things to get right per bullet and invisible when
   it goes wrong. Now anyone can add a line by pressing Enter.

   Drawn with ::before rather than a background image so it inherits the
   turf colour and scales with the text. Items that still carry an inline
   SVG from before keep it and lose this one, so no page shows two. */
.checklist li:not(:has(svg))::before {
  content: "";
  flex: none;
  width: 21px;
  height: 21px;
  margin-top: 0.25rem;
  background: currentColor;
  color: var(--turf-bright);
  -webkit-mask: var(--venue-tick) center / contain no-repeat;
  mask: var(--venue-tick) center / contain no-repeat;
}
/* Without :has(), every item gets the tick and an inline SVG would sit
   beside it. The older pages are the ones with inline SVGs, so they keep
   working; only a browser that is both old and looking at an old page
   sees the doubling. */
@supports not selector(:has(svg)) {
  .checklist li::before { content: none; }
}

/* ---------------------------------------------------------------
   Promo band
--------------------------------------------------------------- */
.band {
  /* Over --band-base, not the page tone. The stops are translucent, and on a
     pale scheme the weaker one washed out to a mid grey-green that took the
     band's own white heading down to 2.6:1. The base is picked per scheme,
     next to the colours it is picked from. */
  background:
    /* The cool stop at 0.55 was letting too much of the base through, which
       left the far end of the band closer to the tone underneath than to the
       colour it is meant to be. 0.80 is as far as it goes: at 0.90 the palest
       scheme's band no longer carries its own text. */
    linear-gradient(120deg, rgb(var(--maroon-rgb) / 0.85), rgb(var(--turf-rgb) / 0.80)),
    var(--band-base, var(--ink-2));
  border-block: 1px solid var(--line);
  color: var(--on-colour);
  text-align: center;
}

/* The eyebrow is the page's accent everywhere else, and the page's accent is
   chosen to read on the page — on a pale scheme it is dark, and on this band's
   dark ground it vanished. Painting it in the band's text colour fixed that and
   cost the section its lead: eyebrow, heading and lede all one white.

   --band-accent is the scheme's accent at a lightness that clears the band,
   with its hue and saturation untouched. Same colour, turned up. */
.band .eyebrow { color: var(--band-accent, var(--on-colour)); }
.band h2 { text-wrap: balance; }
.band .lede { color: var(--on-colour); opacity: 0.85; margin-inline: auto; }
.band .btn-row { justify-content: center; }

/* ---------------------------------------------------------------
   Gallery
--------------------------------------------------------------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 0.85rem;
}
.gallery-item {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
  cursor: zoom-in;
  aspect-ratio: 4 / 3;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease), opacity 0.3s var(--ease);
}
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent 55%);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.gallery-item:hover::after { opacity: 1; }
.gallery-item--tall { grid-row: span 2; aspect-ratio: 3 / 4; }
@media (max-width: 640px) {
  .gallery-item--tall { grid-row: span 1; aspect-ratio: 4 / 3; }
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgb(var(--ink-rgb) / 0.94);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: 100%;
  max-height: 82svh;
  width: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.lightbox-btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgb(var(--surface-rgb) / 0.85);
  color: var(--text);
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  transition: background-color 0.2s var(--ease);
}
.lightbox-btn:hover { background: rgb(var(--contrast-rgb) / 0.15); }
.lightbox-close { top: clamp(0.75rem, 2vw, 1.5rem); right: clamp(0.75rem, 2vw, 1.5rem); }
.lightbox-prev { left: clamp(0.5rem, 2vw, 1.75rem); top: 50%; transform: translateY(-50%); }
.lightbox-next { right: clamp(0.5rem, 2vw, 1.75rem); top: 50%; transform: translateY(-50%); }
.lightbox-counter {
  position: absolute;
  bottom: clamp(0.75rem, 2vw, 1.5rem);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.85rem;
  color: var(--text-muted);
  letter-spacing: 0.08em;
}

/* ---------------------------------------------------------------
   Booking
--------------------------------------------------------------- */
/* Quiet aside under a block — "prefer to talk to a human?" and friends. */
.section-note {
  margin-top: 1rem;
  color: var(--text-muted);
  font-size: 0.92rem;
}
.booking-frame {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* Not a token, on purpose: this frames a booking form served from somewhere
     else, and that document is white whatever this site is. Tinting the frame
     to match a dark scheme would just draw a border around a white rectangle. */
  background: #fff;
  min-height: 640px;
  box-shadow: var(--shadow);
}
.booking-frame iframe { width: 100%; min-height: 640px; border: 0; display: block; }

.steps { counter-reset: step; display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.steps li {
  counter-increment: step;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.steps li::before {
  content: counter(step);
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgb(var(--gold-rgb) / 0.14);
  color: var(--gold);
  font-family: var(--font-display);
  font-weight: 800;
}

/* ---------------------------------------------------------------
   Contact
--------------------------------------------------------------- */
.info-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; }
.info-list li { display: flex; gap: 1rem; align-items: flex-start; }
.info-list svg { flex: none; width: 22px; height: 22px; color: var(--gold); margin-top: 0.3rem; }
.info-list b { display: block; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.info-list a { color: var(--text); text-decoration: none; font-weight: 600; }
.info-list a:hover { color: var(--gold-bright); }

.map-embed {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  min-height: 340px;
  filter: grayscale(0.25) contrast(1.05);
}
.map-embed iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }

/* Forms (comment form, plugin forms, search) */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="search"], input[type="number"], input[type="date"], textarea, select {
  width: 100%;
  padding: 0.85rem 1rem;
  min-height: 48px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 1rem; /* 16px keeps iOS from zooming on focus */
}
textarea { min-height: 150px; resize: vertical; }
label { display: block; font-weight: 650; margin-bottom: 0.4rem; font-size: 0.93rem; }
input[type="submit"], button[type="submit"] {
  border: 0;
  border-radius: 999px;
  padding: 0.95rem 1.9rem;
  min-height: 50px;
  background: var(--gold);
  color: #171106;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

/* ---------------------------------------------------------------
   Page + post content
--------------------------------------------------------------- */
.page-hero {
  padding: clamp(3.5rem, 9vw, 6rem) 0 clamp(2rem, 4vw, 3rem);
  background:
    radial-gradient(80% 130% at 100% 0%, rgb(var(--turf-rgb) / 0.20), transparent 60%),
    radial-gradient(70% 120% at 0% 0%, rgb(var(--maroon-rgb) / 0.28), transparent 62%),
    var(--ink-2);
  border-bottom: 1px solid var(--line);
}
.page-hero h1 { text-wrap: balance; margin-bottom: 0.25em; }

.entry-content { max-width: 72ch; }
.entry-content > * + * { margin-top: 1.15rem; }
.entry-content img { border-radius: var(--radius); }
.entry-content ul, .entry-content ol { padding-left: 1.3rem; }
.entry-content li + li { margin-top: 0.4rem; }
.entry-content blockquote {
  margin: 2rem 0;
  padding: 0.4rem 0 0.4rem 1.4rem;
  border-left: 3px solid var(--gold);
  font-size: 1.15rem;
  color: var(--text);
}
.entry-content h2, .entry-content h3 { margin-top: 2.2rem; }
.entry-content a { font-weight: 600; }
.wp-caption-text, figcaption { font-size: 0.88rem; color: var(--text-muted); margin-top: 0.5rem; }
.alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { margin-inline: auto; }
.alignwide, .alignfull { max-width: none; }

.post-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.post-card:hover { transform: translateY(-4px); border-color: var(--line-strong); color: inherit; }
.post-card img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.post-card-body { padding: 1.4rem 1.5rem 1.6rem; }
.post-card time { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.post-card h3 { margin: 0.5rem 0 0; }

.pagination { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 3rem; }
.pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 46px;
  min-height: 46px;
  padding: 0 0.75rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--text);
  font-weight: 650;
}
.pagination .current { background: var(--gold); color: #171106; border-color: transparent; }

/* ---------------------------------------------------------------
   Footer
--------------------------------------------------------------- */
.site-footer {
  background: #070908;
  border-top: 1px solid var(--line);
  padding: clamp(3rem, 6vw, 4.5rem) 0 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(2rem, 4vw, 3rem);
}
.footer-grid h4 {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; }
/* Dropdown children come down here as a plain indented list — the footer has
   no hover to hide them behind, and a link in the menu should be a link in the
   footer. The indent is what says "under Leagues" without a second heading. */
.footer-menu .sub-menu {
  margin-top: 0.65rem;
  padding-left: 0.9rem;
  border-left: 1px solid var(--line);
  font-size: 0.92rem;
}
/* Exclude buttons: these selectors outrank .btn and would otherwise repaint
   the footer CTA's text muted grey on its gold background. */
.footer-grid a:not(.btn) { color: var(--text-muted); text-decoration: none; }
.footer-grid a:not(.btn):hover { color: var(--gold-bright); }
.footer-brand img { height: 56px; width: auto; margin-bottom: 1rem; }
.footer-brand p { color: var(--text-muted); font-size: 0.95rem; max-width: 34ch; }

.footer-bottom {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  font-size: 0.87rem;
  color: var(--text-muted);
}

/* Sticky mobile action bar — booking is the primary conversion on phones. */
.mobile-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 45;
  display: none;
  gap: 0.6rem;
  padding: 0.7rem var(--gutter) calc(0.7rem + env(safe-area-inset-bottom));
  background: rgb(var(--ink-rgb) / 0.93);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.mobile-bar .btn { flex: 1; padding: 0.8rem 1rem; min-height: 48px; font-size: 0.95rem; box-shadow: none; }
@media (max-width: 780px) {
  .mobile-bar { display: flex; }
  body { padding-bottom: 76px; }
}

/* ---------------------------------------------------------------
   Scroll-in animation
--------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* WordPress admin bar offset for the sticky header */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}