/* ==========================================================================
   Dean Entertainment public site styles.
   Brand is DATA: palette lives in these tokens; components never use raw hex.
   Motion is CSS-only and reduced-motion safe.
   ========================================================================== */

:root {
  --red: #F2000B;
  --red-dark: #b3000a;
  --red-soft: #e13d3a;
  --ink: #1b1b1e;
  --ink-soft: #32373c;
  --body: #3f3f46;
  --muted: #71717a;
  --line: #e4e4e7;
  --surface: #f6f6f7;
  --paper: #ffffff;
  --gold: #ffd166;
  --ok: #15803d;

  --font-display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --font-body: "Inter", "Open Sans", Helvetica, Arial, sans-serif;

  --shell: 1160px;
  --radius: 12px;
  --shadow: 0 10px 30px rgba(24, 24, 27, 0.10);
  --shadow-lift: 0 18px 44px rgba(24, 24, 27, 0.16);
  --header-h: 72px;
}

/* --- Reset-lite ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--body);
  background: var(--paper);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--red-dark); }
a:hover { color: var(--red); }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.08;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 700; }
h2 { font-size: clamp(1.9rem, 4vw, 2.75rem); font-weight: 700; }
h3 { font-size: clamp(1.35rem, 2.5vw, 1.7rem); font-weight: 600; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.3em; }

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 20px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--ink); color: #fff; padding: 10px 16px; z-index: 100;
}
.skip-link:focus { left: 0; color: #fff; }

.kicker {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 0.6em;
}
.lead { font-size: 1.15rem; color: var(--ink-soft); }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  padding: 0.7em 1.6em;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-solid { background: var(--red); color: #fff; }
.btn-solid:hover { background: var(--red-dark); color: #fff; }
.btn-outline { border-color: #fff; color: #fff; background: transparent; }
.btn-outline:hover { background: #fff; color: var(--ink); }
.btn-outline-onlight { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-outline-onlight:hover { background: var(--ink); color: #fff; }
/* The brand outline, never white-on-white. */
.btn-ghost { border-color: var(--red); color: var(--red-dark); background: var(--paper); }
.btn-ghost:hover { background: var(--red); color: #fff; }

/* --- Header --------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--ink);
  border-bottom: 3px solid var(--red);
}
.header-row {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--header-h); gap: 16px;
}
.brand-logo { height: 46px; width: auto; }
.main-nav > ul {
  display: flex; align-items: center; gap: 6px;
  list-style: none; margin: 0; padding: 0;
}
.main-nav a {
  font-family: var(--font-display);
  font-weight: 600; font-size: 1.02rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #e4e4e7; text-decoration: none;
  padding: 10px 12px; border-radius: 8px; display: inline-block;
}
.main-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
/* The header buttons are LIGHT-on-dark by default from the rule above; the Player Sign In
   ghost button sits on a white fill, so it must restate its dark text (the generic
   .btn-ghost rule is declared earlier and loses). */
.main-nav .btn-ghost { color: var(--ink); background: var(--paper); }
.main-nav .btn-ghost:hover { color: var(--red-dark); background: var(--paper); border-color: var(--red); }
/* Active section marker driven by body.nav-<section> */
.nav-solutions .main-nav > ul > li > a[data-nav="solutions"],
.nav-industries .main-nav > ul > li > a[data-nav="industries"],
.nav-leagues .main-nav > ul > li > a[data-nav="leagues"],
.nav-locations .main-nav > ul > li > a[data-nav="locations"],
.nav-about .main-nav > ul > li > a[data-nav="about"] {
  color: #fff; box-shadow: inset 0 -3px 0 var(--red);
}
.has-menu { position: relative; }
.has-menu .menu {
  position: absolute; top: 100%; left: 0;
  min-width: 250px;
  background: var(--paper);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-lift);
  list-style: none; margin: 0; padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 140ms ease, transform 140ms ease, visibility 140ms;
}
.has-menu:hover .menu, .has-menu:focus-within .menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.has-menu .menu a {
  display: block; color: var(--ink);
  font-size: 0.98rem; letter-spacing: 0.04em;
  padding: 9px 12px; border-radius: 8px;
}
.has-menu .menu a:hover { background: var(--surface); color: var(--red-dark); }
/* Menu-in-menu: non-clickable Darts/Pool group labels with their entries indented. */
.has-menu .menu .menu-group {
  padding: 10px 12px 2px;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--red);
}
.has-menu .menu li.grouped a { padding-left: 22px; }
.nav-cta-group { display: flex; gap: 10px; margin-left: 10px; }
.nav-cta-group .btn { font-size: 0.92rem; padding: 0.55em 1.2em; }

.nav-toggle {
  display: none; background: none; border: 0; padding: 10px; cursor: pointer;
}
.nav-toggle span {
  display: block; width: 26px; height: 3px; margin: 5px 0;
  background: #fff; border-radius: 2px; transition: transform 160ms ease, opacity 160ms ease;
}
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.mobile-nav {
  display: none;
  background: var(--ink);
  padding: 14px 20px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
/* The menu lives inside the STICKY header, so page scrolling can never reveal its overflow —
   it must scroll itself, or a long menu (the grouped submenus) gets stuck on a phone. dvh tracks
   the mobile URL bar; the vh line is the older-browser fallback. */
.nav-open .mobile-nav {
  display: grid; gap: 10px;
  max-height: calc(100vh - var(--header-h));
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* One scrollable thing while the menu is open: the menu. */
body.nav-open { overflow: hidden; }
.mobile-nav a {
  color: #e4e4e7; text-decoration: none;
  font-family: var(--font-display); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 8px 4px; display: block;
}
.mobile-nav details { border-bottom: 1px solid rgba(255, 255, 255, 0.12); padding-bottom: 6px; }
.mobile-nav details .menu-group {
  display: block; padding: 8px 4px 0 12px;
  color: var(--red); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  font-family: var(--font-display);
}
.mobile-nav details a.grouped { padding-left: 30px; }
.mobile-nav summary {
  color: #fff; cursor: pointer;
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 10px 4px;
}
.mobile-nav details a { padding-left: 18px; font-weight: 500; }
.mobile-nav .btn { text-align: center; }

/* --- Hero ------------------------------------------------------------------ */
.hero {
  position: relative;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0.38;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(27, 27, 30, 0.2) 0%, rgba(27, 27, 30, 0.75) 100%);
}
.hero .shell { position: relative; z-index: 2; padding-top: 84px; padding-bottom: 84px; }
.hero h1 { color: #fff; max-width: 18ch; }
.hero .lead { color: #e7e7ea; max-width: 60ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero-secondary { margin-top: 18px; }
.hero-secondary a { color: var(--gold); font-weight: 600; }
.hero-sub {
  border-top: 4px solid var(--red);
}
.hero-sub .shell { padding-top: 56px; padding-bottom: 56px; }

/* Path-picker hero (three-audience chooser: games-B2B / ATM-B2B / players) */
.hero-chooser .shell { padding-top: 64px; padding-bottom: 64px; }
.hero-paths {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin-top: 34px;
}
.path-choice {
  display: flex; flex-direction: column; gap: 7px;
  background: var(--paper);
  border-top: 5px solid var(--red);
  border-radius: var(--radius);
  padding: 22px 22px 18px;
  text-decoration: none; color: inherit;
  box-shadow: var(--shadow);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.path-choice:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); color: inherit; }
.path-kicker {
  font-family: var(--font-display); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  font-size: 0.85rem; color: var(--red-dark);
}
.path-choice h2 { font-size: 1.5rem; margin: 0; }
.path-choice p { font-size: 0.93rem; color: var(--body); margin: 0; }
.path-go {
  margin-top: auto; padding-top: 10px;
  font-family: var(--font-display); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  font-size: 0.95rem; color: var(--red-dark);
}
.path-choice:hover .path-go { color: var(--red); }
@media (max-width: 860px) {
  .hero-paths { grid-template-columns: 1fr; }
  .hero-chooser .shell { padding-top: 48px; padding-bottom: 48px; }
}

/* --- Sections -------------------------------------------------------------- */
.section { padding: 72px 0; }
.section-tight { padding: 48px 0; }
.section-alt { background: var(--surface); }
.section-dark { background: var(--ink); color: #d4d4d8; }
.section-dark h2, .section-dark h3 { color: #fff; }
.section-head { max-width: 760px; margin-bottom: 36px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* --- Card grids ------------------------------------------------------------ */
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
a.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); border-color: transparent; color: inherit; }
.card-img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-body h3 { margin: 0; }
.card-body p { margin: 0; color: var(--body); font-size: 0.97rem; }
.card-more {
  margin-top: auto; padding-top: 10px;
  font-family: var(--font-display); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--red-dark); font-size: 0.95rem;
}
a.card:hover .card-more { color: var(--red); }

/* Path cards (audience split) */
.path-card {
  border-top: 5px solid var(--red);
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 30px 28px;
}
.path-card h3 { font-size: 1.6rem; }
.path-card .btn { margin-top: 14px; }

/* --- How it works strip ---------------------------------------------------- */
.steps { counter-reset: step; }
.step { position: relative; padding-top: 66px; }
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; top: 0; left: 0;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--red); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
  display: grid; place-items: center;
}
.step h3 { margin-bottom: 0.3em; }
.step p { font-size: 0.97rem; margin: 0; }

/* --- Benefit list ----------------------------------------------------------- */
.benefits { list-style: none; padding: 0; display: grid; gap: 14px; }
.benefits li { padding-left: 34px; position: relative; }
.benefits li::before {
  content: "";
  position: absolute; left: 0; top: 6px;
  width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at center, var(--paper) 0 28%, var(--red) 30% 62%, var(--ink) 64% 100%);
}
.benefits strong { color: var(--ink); }

/* --- Accordion -------------------------------------------------------------- */
.accordion { display: grid; gap: 12px; }
.accordion details {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 22px;
}
.accordion summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display); font-weight: 600; font-size: 1.2rem;
  color: var(--ink);
  padding: 16px 30px 16px 0;
  position: relative;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: "+";
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; color: var(--red); font-weight: 600;
  transition: transform 160ms ease;
}
.accordion details[open] summary::after { content: "–"; }
.accordion details[open] { border-color: var(--red-soft); }
.accordion .acc-body { padding: 0 0 18px; }
.accordion .acc-body :last-child { margin-bottom: 0; }

/* --- Tables ------------------------------------------------------------------ */
.table-wrap { overflow-x: auto; }
.table {
  width: 100%; border-collapse: collapse;
  background: var(--paper);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  font-size: 0.98rem;
}
.table th {
  font-family: var(--font-display); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--ink); color: #fff;
  text-align: left; padding: 12px 16px;
}
.table td { padding: 12px 16px; border-top: 1px solid var(--line); vertical-align: top; }
.table tbody tr:hover { background: var(--surface); }
.table th.num, .table td.num { text-align: right; }

/* Phones: a wide table stacks into one card per row, each cell naming its
   column from data-label (main.js labels the static tables; league-data.js labels the live
   ones). No sideways scrolling to find the forms column. */
@media (max-width: 640px) {
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; box-sizing: border-box; }
  .table tr { border-top: 1px solid var(--line); padding: 8px 0; }
  .table tr:first-child { border-top: 0; }
  .table td { border-top: 0; padding: 4px 16px; display: flex; gap: 12px; align-items: baseline; }
  .table td.num { text-align: left; }
  .table td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 34%;
    font-family: var(--font-display); font-weight: 600; font-size: 0.78rem;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  }
  .table td .file-links { flex: 1; }
}

/* --- Live league data (league-data.js progressive enhancement) ---------------- */
.event-card .event-date { font-weight: 700; color: var(--red-dark, #c00007); margin: 0 0 8px; }

/* --- Open registration offerings (register page) ------------------------------- */
.offer-grid { margin-top: 8px; }
.offer-card .offer-facts { font-weight: 700; color: var(--red-dark, #c00007); margin: 0 0 4px; }
.offer-card .offer-deadline { font-size: 0.85rem; color: var(--ink-soft, #52525b); margin: 0 0 10px; }
.offer-card .btn { margin-top: 4px; }
/* The entry cap: how full an open event is, and Sold out where Register was. */
.offer-card .offer-spots { font-size: 0.9rem; font-weight: 700; margin: -4px 0 10px; }
.offer-card .offer-spots.full { color: var(--red-dark, #c00007); }
.offer-card .offer-sold-out {
  display: inline-block; margin-top: 4px; padding: 8px 18px; border-radius: 999px;
  background: var(--red, #f2000b); color: #fff;
  font-family: var(--font-display); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
/* The bundled logo default shouldn't crop like a photo. */
.offer-img-default { object-fit: contain; padding: 22px; background: var(--surface, #f7f7f8); }

/* An offering's formatted description: the API's sanitised HTML - paragraphs, line
   breaks, bold/italic/underline/strike-through, bulleted and numbered lists, two heading sizes and
   http(s) links, nothing else. The same rules as the app's styles.scss, so the card reads like the
   player's Register panel. Long words and links wrap: no sideways scroll on a phone. */
.rich-text { overflow-wrap: anywhere; }
.rich-text > :first-child { margin-top: 0; }
.rich-text > :last-child { margin-bottom: 0; }
.rich-text p { margin: 0 0 0.6em; }
.rich-text h2,
.rich-text h3 { font-family: var(--font-display); color: var(--ink); line-height: 1.15; margin: 0.8em 0 0.3em; }
.rich-text h2 { font-size: 1.3rem; }
.rich-text h3 { font-size: 1.12rem; }
.rich-text ul,
.rich-text ol { margin: 0 0 0.6em; padding-left: 1.4em; }
.rich-text ul { list-style: disc; }
.rich-text ol { list-style: decimal; }
.rich-text li { margin: 0.15em 0; }
.rich-text a { color: var(--red-dark); text-decoration: underline; }
.rich-text a:hover { color: var(--red); }
.offer-card .offer-desc { font-size: 0.97rem; color: var(--body); margin: 0 0 6px; }

/* --- Day list (schedules) ---------------------------------------------------- */
.day-files { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.day-files a {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--surface);
  border-radius: 8px; padding: 10px 14px;
  text-decoration: none; color: var(--ink); font-weight: 500;
}
.day-files a:hover { background: var(--line); color: var(--red-dark); }
.day-files .tag { font-size: 0.8rem; color: var(--muted); }
.empty-day { color: var(--muted); font-style: italic; }
/* Operating-cities list (84 MN cities) — responsive newspaper columns. */
.city-columns {
  list-style: none; margin: 0; padding: 0;
  columns: 5 150px; column-gap: 28px;
}
.city-columns li { padding: 4px 0; break-inside: avoid; }

/* Discipline group headings between card grids (Player Center) — the nav's Darts/Pool
   grouping carried onto the page. */
.cards-group {
  margin: 34px 0 14px;
  color: var(--red);
  font-size: 0.85rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
}

/* Live by-night groups on the Where to Play page (league-data.js). */
.night-group { margin-bottom: 20px; }
.night-group h3 { margin: 0 0 8px; }
/* Venue entries are informational, not links — same pill as .day-files a, no hover.
   Fixed tag columns (not space-between) so "Dart league" sits at the same x on every row
   regardless of how wide the format tag to its right is. */
.day-files .night-item {
  display: grid; grid-template-columns: minmax(0, 1fr) 10rem 14rem; align-items: center; gap: 10px;
  background: var(--surface);
  border-radius: 8px; padding: 10px 14px;
  color: var(--ink); font-weight: 500;
}
.night-item .tag { grid-column: 2; text-align: left; }
.night-item .tag-format { grid-column: 3; text-align: right; }
.night-venue { display: flex; flex-direction: column; gap: 1px; }
.night-venue small { color: var(--muted); font-weight: 400; }

/* --- Forms -------------------------------------------------------------------- */
.form-card {
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 30px 28px;
  max-width: 720px;
}
.form-grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.form-grid .full { grid-column: 1 / -1; }
.field label {
  display: block;
  font-weight: 600; color: var(--ink);
  font-size: 0.95rem; margin-bottom: 5px;
}
.field .hint { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%;
  font: inherit;
  padding: 11px 12px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--red-soft);
  box-shadow: 0 0 0 3px rgba(242, 0, 11, 0.12);
}
/* Selects: same recipe as the app — appearance:none + our own chevron, so dropdowns read
   as controls instead of flat text with a stock arrow, identically in every browser. */
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2352525b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}
.field textarea { min-height: 120px; resize: vertical; }
.choices { display: flex; flex-wrap: wrap; gap: 10px 18px; padding-top: 2px; }
.choices label { display: flex; align-items: center; gap: 7px; font-weight: 500; color: var(--body); margin: 0; }
.choices input { width: auto; }
.hp { position: absolute !important; left: -5000px; }
.form-note {
  margin-top: 14px; padding: 12px 14px; border-radius: 8px;
  background: #fdf2f2; color: var(--red-dark); font-weight: 500;
}
.form-note-ok { background: #f0fdf4; color: var(--ok); }
.form-fine { font-size: 0.88rem; color: var(--muted); margin-top: 12px; }

.subscribe-form .subscribe-row { display: flex; gap: 8px; }
.subscribe-form input {
  flex: 1; font: inherit; padding: 10px 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px; background: rgba(255, 255, 255, 0.08); color: #fff;
}
.subscribe-form input::placeholder { color: #a1a1aa; }
.subscribe-form .btn { padding: 0.55em 1.2em; font-size: 0.9rem; }
.subscribe-consent { font-size: 0.82rem; color: #a1a1aa; margin: 8px 0 0; }

/* --- CTA band ------------------------------------------------------------------ */
.cta-band {
  background: linear-gradient(120deg, var(--red-dark), var(--red));
  color: #fff;
}
.cta-band .shell { padding: 56px 20px; display: grid; gap: 18px; justify-items: start; }
.cta-band h2 { color: #fff; margin: 0; }
.cta-band p { color: #ffe4e6; margin: 0; max-width: 62ch; }
.cta-band .btn-solid { background: #fff; color: var(--red-dark); }
.cta-band .btn-solid:hover { background: var(--ink); color: #fff; }

/* --- Footer --------------------------------------------------------------------- */
.site-footer { background: var(--ink); color: #a1a1aa; margin-top: 0; }
.footer-grid {
  display: grid; grid-template-columns: 1.3fr 0.9fr 1.5fr 1.1fr;
  gap: 30px; padding-top: 40px; padding-bottom: 22px;
}
/* The Players menu is the site's biggest — flowed as two side-by-side lists so it no
   longer sets the height of the entire footer. */
.footer-cols { display: flex; gap: 22px; align-items: flex-start; }
/* align-content: start — the lists are grids; without it the shorter (Pool) list is stretched
   to the Darts list's height and its rows float apart on mobile. */
.footer-cols .footer-links { flex: 1; min-width: 0; align-content: start; }
.footer-logo { height: 44px; width: auto; margin-bottom: 14px; }
.footer-tag { color: #e4e4e7; font-weight: 600; margin-bottom: 4px; }
.footer-lines { font-size: 0.85rem; margin-bottom: 16px; }
.site-footer address { font-style: normal; line-height: 1.7; }
.site-footer address a { color: #e4e4e7; }
.footer-h {
  color: #fff; font-size: 1.05rem;
  letter-spacing: 0.14em;
  margin: 0 0 10px;
}
.footer-h + .footer-h, .subscribe-form + .footer-h { margin-top: 18px; }
.footer-links { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 7px; font-size: 0.92rem; }
.footer-links a { color: #a1a1aa; text-decoration: none; }
.footer-links a:hover { color: #fff; }
/* Darts/Pool group labels in the Players column — mirrors the nav's menu-in-menu, toned
   for the dark footer (the nav uses --red on white; that reads harshly on --ink). */
.footer-links .footer-group {
  margin-top: 6px;
  color: #e4e4e7; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.footer-links .footer-group:first-child { margin-top: 0; }
.footer-links li.grouped { padding-left: 12px; }
.footer-partners {
  display: flex; flex-wrap: wrap; gap: 26px; align-items: center;
  padding-top: 4px; padding-bottom: 14px;
  opacity: 0.85;
}
.footer-partners img { height: 44px; width: auto; filter: grayscale(35%); }
.footer-fine {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 16px; padding-bottom: 22px;
  font-size: 0.85rem;
}
.footer-fine p { margin: 0; }
/* Legal links must stay findable against the dark footer - underlined rather than relying
   on colour alone, since they sit in the low-contrast fine print row. */
.footer-legal a { color: #d4d4d8; text-decoration: underline; }
.footer-legal a:hover { color: #fff; }

/* --- Sticky mobile actions -------------------------------------------------------- */
.sticky-actions {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--paper);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(24, 24, 27, 0.12);
  padding: 10px 14px;
  gap: 10px;
}
.sticky-actions .btn { flex: 1; text-align: center; font-size: 0.95rem; padding: 0.65em 0.5em; }

/* --- Reveal motion ------------------------------------------------------------------ */
/* Hidden-before-reveal applies ONLY when JS is running (html.js, set inline in <head>).
   No JS, or an observer that never fires, must never leave content invisible. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 500ms ease, transform 500ms ease; }
.js .reveal.in-view { opacity: 1; transform: none; }
.js .reveal-stagger > * { opacity: 0; transform: translateY(22px); transition: opacity 500ms ease, transform 500ms ease; }
.js .reveal-stagger.in-view > * { opacity: 1; transform: none; }
.reveal-stagger.in-view > *:nth-child(2) { transition-delay: 90ms; }
.reveal-stagger.in-view > *:nth-child(3) { transition-delay: 180ms; }
.reveal-stagger.in-view > *:nth-child(4) { transition-delay: 270ms; }
.reveal-stagger.in-view > *:nth-child(5) { transition-delay: 360ms; }
.reveal-stagger.in-view > *:nth-child(6) { transition-delay: 450ms; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn, .card { transition: none; }
}

/* --- Page helpers -------------------------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.split-img { border-radius: var(--radius); box-shadow: var(--shadow-lift); object-fit: cover; width: 100%; }
/* Photos side by side in a grid share one shape, cropped to fill, so no photo in a row shows
   shorter than its neighbours. A .split-img beside text keeps its own shape. */
.grid > .split-img { aspect-ratio: 3 / 2; height: auto; }
.owner-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.owner-card { display: grid; grid-template-columns: 120px 1fr; gap: 20px; align-items: start; }
.owner-card img { border-radius: 50%; width: 120px; height: 120px; object-fit: cover; }
.contact-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.file-row { display: flex; flex-wrap: wrap; gap: 12px; }
/* Entry forms in a tournament's own table row: small pills that wrap. */
.file-links { display: flex; flex-wrap: wrap; gap: 6px; }
.btn-sm { font-size: 0.78rem; padding: 0.4em 0.95em; letter-spacing: 0.05em; white-space: nowrap; }
.btn-sm:hover { transform: none; box-shadow: none; }
.crumbs { font-size: 0.9rem; color: var(--muted); margin-bottom: 18px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--red-dark); }
.notice {
  border-left: 4px solid var(--gold);
  background: #fffbeb;
  padding: 14px 18px; border-radius: 0 8px 8px 0;
  color: #713f12;
}

/* --- Styleguide ------------------------------------------------------------------------ */
.swatches { display: flex; flex-wrap: wrap; gap: 14px; }
.swatch { width: 130px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); font-size: 0.8rem; }
.swatch > div { height: 64px; }
.swatch p { margin: 0; padding: 8px 10px; }

/* --- Responsive ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-cta-group { display: none; }
}
@media (max-width: 860px) {
  .main-nav { display: none; }
  .nav-toggle { display: block; }
  .split { grid-template-columns: 1fr; }
  .owner-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .contact-cards { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  /* One column for the Players lists on phones — two columns wrap every long label. */
  .footer-cols { display: block; }
  .footer-cols .footer-links + .footer-links { margin-top: 6px; }
  .hero .shell { padding-top: 60px; padding-bottom: 60px; }
  .section { padding: 52px 0; }
  .sticky-actions { display: flex; }
  body { padding-bottom: 64px; } /* room for the sticky bar */
  .owner-card { grid-template-columns: 88px 1fr; }
  .owner-card img { width: 88px; height: 88px; }
  /* Narrow screens: venue on top, tags stacked beneath. */
  .day-files .night-item { grid-template-columns: 1fr; gap: 4px; }
  .night-item .tag, .night-item .tag-format { grid-column: 1; text-align: left; }
}

/* --- Long-form legal copy (/privacy/, /terms/) ------------------------------
   Dense reference text, not marketing: a measure that stays readable, headings
   that scan, and list spacing loose enough to follow a clause at a time. */
.prose { max-width: 74ch; }
.prose h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  margin: 2.2em 0 0.6em;
  padding-top: 1.1em;
  border-top: 1px solid var(--line, #e4e4e7);
}
.prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-size: 1.1rem; margin: 1.6em 0 0.5em; }
.prose p, .prose li { line-height: 1.7; }
.prose ul { margin: 0 0 1.2em; padding-left: 1.25em; }
.prose li { margin-bottom: 0.6em; }
.prose address { font-style: normal; margin: 0 0 1em; line-height: 1.7; }

/* --- Proof strip (home) — numbers come from site.config.json proof.* ------ */
.proof-strip .shell { padding-top: 48px; padding-bottom: 48px; }
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; text-align: center; }
.proof-item { display: grid; gap: 8px; justify-items: center; }
.proof-num {
  font-family: var(--font-display); font-weight: 700; line-height: 1;
  font-size: clamp(2.8rem, 6vw, 4.2rem); color: var(--red-soft); letter-spacing: 0.01em;
}
.proof-label {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 0.95rem; color: #d4d4d8; max-width: 22ch;
}
@media (max-width: 640px) { .proof-grid { grid-template-columns: 1fr; gap: 22px; } }

/* Testimonials on the home page. A quote card: brand-red left rule, muted attribution; three
   across, the .grid rules collapse it. */
.quote { background: var(--surface); border-left: 3px solid var(--red); border-radius: 0 var(--radius) var(--radius) 0; padding: 22px 24px; margin: 0; display: grid; gap: 12px; }
.quote p { margin: 0; font-size: 1.02rem; line-height: 1.55; color: var(--ink-soft); }
.quote footer { font-size: 0.88rem; color: var(--muted); }
/* The note at the top of the service form. */
.form-fine-top { margin: 0 0 18px; }