:root {
  --ukvr-racing-green: #004225;
  --ukvr-accent-green: #0f6b45;
  --ukvr-accent-green-bright: #16a35e;
  --ukvr-silver: #c0c0c0;
  --ukvr-gold: #d4af37;
  --ukvr-signature-red: #e10600;

  /* ---- HEADER GRADIENT ----
     Was Racing Green top-to-bottom. Now Accent Green, per Steve's call -
     a touch brighter/more energetic at the top of the page, distinct
     from Racing Green which now does the "whole page" job instead. */
  --ukvr-header-1: var(--ukvr-accent-green);
  --ukvr-header-2: #0c5837;
  --ukvr-header-3: #094529;

  /* ---- BODY CANVAS: dark, Racing Green ----
     Previous iteration tried a light silver-tint body; both you and
     Steve preferred the darker, more premium feel, so this reverts to
     a dark canvas - but using the brand's own Racing Green rather than
     the near-black originally used in the first draft, so the page
     colour is explicitly on-brand rather than "dark mode grey". Cards
     sit on a lighter elevated green so they still lift off the page. */
  --ukvr-bg: #04331d;
  --ukvr-bg-elevated: #0c4227;
  --ukvr-border: #1c5837;
  --ukvr-text-primary: #f2f5f3;
  --ukvr-text-secondary: #b7cabf;
  --ukvr-text-muted: #82a091;

  /* ---- "ink" variables ----
     These existed to keep gold/bright-green text readable on a LIGHT
     background (their contrast on white fails accessibility checks).
     Now the canvas is dark again, the original colours have plenty of
     contrast, so both ink tokens simply point back to the normal
     brand colours. Kept as named variables rather than removed, so
     any future light/dark toggle only needs these two lines changed. */
  --ukvr-gold-ink: var(--ukvr-gold);
  --ukvr-accent-ink: var(--ukvr-accent-green-bright);

  --font-display: "Archivo Black", "Arial Black", sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 40px;
  --radius: 10px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--ukvr-bg);
  color: var(--ukvr-text-primary);
  font-family: var(--font-body);
}

body {
  /* Subtle gold glow rather than the green glow used before - green-on-green
     was barely visible against the new Racing Green canvas, gold gives a
     touch of the "prestige" brand essence without changing the base colour. */
  background-image: radial-gradient(circle at 15% 0%, rgba(212,175,55,0.06), transparent 50%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Watermark - a large, very low-opacity version of the real logo artwork,
   fixed in the corner behind all page content. Purely decorative texture
   for the flat Racing Green canvas; pointer-events:none so it never
   intercepts clicks, and z-index:-1 so it always sits behind the
   header/main/footer regardless of scroll position.
   Asset is 451x237 (roughly 1.9:1) - sized up while keeping that ratio. */
body::before {
  content: "";
  position: fixed;
  bottom: -30px;
  right: -40px;
  width: 620px;
  height: 326px;
  z-index: -1;
  pointer-events: none;
  opacity: 0.10;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom right;
  background-image: url("/assets/images/watermark-runner.png");
}

@media (max-width: 760px) {
  body::before { width: 360px; height: 189px; opacity: 0.08; }
}

a { color: var(--ukvr-accent-ink); }

/* Site header - now Accent Green gradient instead of Racing Green */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: linear-gradient(135deg, var(--ukvr-header-1) 0%, var(--ukvr-header-2) 60%, var(--ukvr-header-3) 100%);
  border-bottom: 3px solid var(--ukvr-gold);
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
.site-header__row {
  max-width: 1160px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 88px; gap: 16px;
}
.site-branding { display: flex; align-items: center; gap: 14px; flex-shrink: 0; text-decoration: none; }
.site-branding img { height: 80px; width: auto; display: block; }
.site-branding__text { display: flex; flex-direction: column; line-height: 1.15; }
.site-branding__title {
  font-family: var(--font-display); font-size: 1.4rem; color: #fff; letter-spacing: 0.01em;
}
.site-branding__tagline {
  font-size: 0.72rem; color: var(--ukvr-gold); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px;
}

@media (max-width: 600px) {
  .site-branding__text { display: none; }
  .site-branding img { height: 56px; }
}

.site-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.site-nav nav { display: flex; flex-wrap: wrap; gap: 2px; }
.site-nav nav a {
  color: rgba(255,255,255,0.85); text-decoration: none; font-weight: 600; font-size: 0.875rem;
  padding: 7px 14px; border-radius: 999px; transition: background 0.18s ease, color 0.18s ease;
}
.site-nav nav a:hover { background: rgba(255,255,255,0.14); color: #fff; }
.site-nav nav a.active { background: rgba(255,255,255,0.2); color: #fff; }
.site-nav nav a.nav-cta { background: var(--ukvr-gold); color: #08150e; font-weight: 700; }
.site-nav nav a.nav-cta:hover { background: #e8c766; }
.site-nav nav a.nav-cta.active { background: #e8c766; }

.large-ui-toggle {
  background: transparent; border: 1px solid rgba(255,255,255,0.35); color: rgba(255,255,255,0.85);
  border-radius: 999px; padding: 6px 12px; font-size: 0.8rem; font-weight: 700; cursor: pointer;
}
.large-ui-toggle:hover { background: rgba(255,255,255,0.14); color: #fff; }

.mobile-menu-toggle {
  display: none; background: transparent; border: 1px solid rgba(255,255,255,0.35); color: #fff;
  border-radius: 999px; padding: 8px 14px; font-size: 0.85rem; font-weight: 600; cursor: pointer;
  align-items: center; gap: 8px;
}

@media (max-width: 760px) {
  .mobile-menu-toggle { display: inline-flex; }
  .site-nav { display: none; width: 100%; flex-direction: column; align-items: stretch; padding-bottom: 10px; }
  .site-nav.mobile-open { display: flex; }
  .site-nav nav { flex-direction: column; }
  .site-header__row { flex-wrap: wrap; }
}

.site-main {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: var(--space-5) var(--space-4); min-height: calc(100vh - 116px - 140px);
}

/* Site footer - kept as its own near-black tone, distinct from both the
   Accent Green header and the Racing Green body, so all three page zones
   stay visually distinguishable from one another. */
.site-footer { background: #040d09; color: rgba(255,255,255,0.85); padding: var(--space-4) var(--space-4); margin-top: auto; }
.site-footer__legal {
  max-width: 1160px; margin: 0 auto; text-align: center; padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.12); font-size: 0.82rem;
}
.site-footer__legal a { color: rgba(255,255,255,0.65); text-decoration: none; }
.site-footer__legal a:hover { color: #fff; text-decoration: underline; }
.footer-divider { color: rgba(255,255,255,0.3); margin: 0 10px; }
.site-footer__bottom {
  max-width: 1160px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; font-size: 0.85rem;
}
.site-footer__bottom p { margin: 0; }
.site-footer__small { font-size: 0.72rem; color: rgba(255,255,255,0.45); margin-top: 3px !important; }
.site-footer__credit { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: rgba(255,255,255,0.6); }
.site-footer__credit a { color: var(--ukvr-gold); text-decoration: none; font-weight: 600; }
.site-footer__credit a:hover { text-decoration: underline; }

/* Large UI accessibility mode - unchanged */
body.large-ui { font-size: 18px; }
body.large-ui p, body.large-ui li, body.large-ui label { font-size: 1.05em !important; }
body.large-ui h1 { font-size: 2.1rem !important; }
body.large-ui .btn, body.large-ui input { font-size: 1.1rem !important; min-height: 48px; }

/* Card - login, check-email, verify, challenge pages */
.card {
  width: 100%; max-width: 440px;
  background: var(--ukvr-bg-elevated);
  border: 1px solid var(--ukvr-border);
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.card h1 { font-family: var(--font-display); font-size: 1.5rem; margin: 0 0 var(--space-2) 0; color: var(--ukvr-text-primary); }
.card p { color: var(--ukvr-text-secondary); line-height: 1.5; margin: 0 0 var(--space-3) 0; }

.field-label { font-size: 0.85rem; color: var(--ukvr-text-secondary); margin: var(--space-2) 0 4px; display: block; }
.field-optional { color: var(--ukvr-text-muted); font-weight: 400; }

input[type="text"], input[type="email"], input[type="password"], input[type="file"] {
  width: 100%; background: var(--ukvr-bg); border: 1px solid var(--ukvr-border);
  border-radius: var(--radius); padding: 12px 14px; color: var(--ukvr-text-primary); font-size: 1rem;
}
input:focus { outline: none; border-color: var(--ukvr-accent-green-bright); }

.btn {
  display: inline-block; background: var(--ukvr-accent-green); color: #ffffff;
  border: none; border-radius: var(--radius); padding: 13px 20px; font-size: 1rem; font-weight: 600;
  cursor: pointer; text-decoration: none; text-align: center;
}
.btn:hover { background: var(--ukvr-accent-green-bright); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn-block { width: 100%; margin-top: var(--space-3); }
.btn-gold { background: transparent; border: 1px solid var(--ukvr-gold); color: var(--ukvr-gold-ink); }
.btn-gold:hover { background: var(--ukvr-gold); color: var(--ukvr-bg); }

.error-text { color: var(--ukvr-signature-red); font-size: 0.85rem; margin-top: var(--space-2); }
.banner { padding: var(--space-2) var(--space-3); border-radius: var(--radius); font-size: 0.85rem; margin-bottom: var(--space-4); }
.banner-success { background: rgba(15,107,69,0.25); border: 1px solid var(--ukvr-accent-green-bright); }
.banner-cancelled { background: rgba(225,6,0,0.12); border: 1px solid var(--ukvr-signature-red); }

/* Dashboard */
.dashboard { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: var(--space-4); }
.dashboard h1 { font-family: var(--font-display); font-size: 1.5rem; margin: 0; color: var(--ukvr-text-primary); }
.dashboard-card { background: var(--ukvr-bg-elevated); border: 1px solid var(--ukvr-border); border-radius: var(--radius); padding: var(--space-4); box-shadow: 0 2px 8px rgba(0,0,0,0.25); }
.dashboard-card h2 { margin: 0 0 var(--space-2) 0; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ukvr-text-secondary); }
.entry-link {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--ukvr-bg); border: 1px solid var(--ukvr-border); border-radius: var(--radius);
  padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2); text-decoration: none; color: var(--ukvr-text-primary);
}
.entry-link:hover { background: var(--ukvr-border); }
.entry-distance { color: var(--ukvr-accent-ink); font-weight: 600; }
.meta-row { display: flex; justify-content: space-between; font-size: 0.88rem; border-bottom: 1px solid var(--ukvr-border); padding-bottom: var(--space-2); margin-bottom: var(--space-2); }
.meta-row dt { color: var(--ukvr-text-muted); }
.meta-row dd { margin: 0; color: var(--ukvr-text-secondary); }

/* Route divider - the recurring brand motif */
.route-divider { display: flex; align-items: center; width: 100%; margin: var(--space-2) 0 var(--space-4); }
.route-divider__track {
  flex: 1; height: 6px; border-radius: 999px;
  background-image: repeating-linear-gradient(to right, var(--ukvr-silver) 0, var(--ukvr-silver) 4px, transparent 4px, transparent 11px);
  opacity: 0.7;
}

/* Challenge page */
.eyebrow { display: inline-block; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ukvr-gold-ink); margin-bottom: var(--space-2); }
.challenge-meta { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--ukvr-text-muted); border-top: 1px solid var(--ukvr-border); border-bottom: 1px solid var(--ukvr-border); padding: var(--space-3) 0; margin-bottom: var(--space-4); }
.distance-row { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); }
.distance-btn { flex: 1; background: var(--ukvr-bg); border: 1px solid var(--ukvr-border); color: var(--ukvr-text-primary); padding: 12px; border-radius: var(--radius); text-align: center; font-weight: 600; text-decoration: none; display: block; }
.distance-btn--done { opacity: 0.6; border-color: var(--ukvr-gold); color: var(--ukvr-gold-ink); }
.entries-section { margin-top: var(--space-4); border-top: 1px solid var(--ukvr-border); padding-top: var(--space-4); }
.entry-box { border: 1px solid var(--ukvr-border); border-radius: var(--radius); padding: var(--space-3); margin-bottom: var(--space-2); }
.status-pending { color: var(--ukvr-gold-ink); font-size: 0.85rem; }
.status-approved { color: var(--ukvr-accent-ink); font-size: 0.85rem; }
.status-rejected { color: var(--ukvr-signature-red); font-size: 0.85rem; }
.address-prompt { background: rgba(212,175,55,0.08); border: 1px solid var(--ukvr-gold); border-radius: var(--radius); padding: var(--space-3); margin-top: var(--space-2); }

/* Homepage */
.home-hero { width: 100%; max-width: 780px; text-align: center; }
.home-hero__tagline { font-family: var(--font-display); font-size: 2rem; line-height: 1.25; margin: 0 0 var(--space-3) 0; color: var(--ukvr-text-primary); }
.home-hero__tagline .accent { color: var(--ukvr-accent-green-bright); }
.home-hero__intro { color: var(--ukvr-text-secondary); font-size: 1.05rem; line-height: 1.6; max-width: 560px; margin: 0 auto var(--space-4); }
.home-hero__ctas { display: flex; gap: var(--space-3); justify-content: center; margin-bottom: var(--space-5); flex-wrap: wrap; }
.home-hero__ctas .btn { width: auto; padding: 14px 28px; }

.ethos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--space-3); margin-top: var(--space-4); text-align: left; }
.ethos-item { background: var(--ukvr-bg-elevated); border: 1px solid var(--ukvr-border); border-radius: var(--radius); padding: var(--space-3); }
.ethos-item h3 { font-size: 0.85rem; color: var(--ukvr-gold-ink); margin: 0 0 4px 0; text-transform: uppercase; letter-spacing: 0.03em; }
.ethos-item p { font-size: 0.82rem; color: var(--ukvr-text-secondary); margin: 0; line-height: 1.4; }

@media (max-width: 600px) {
  .home-hero__tagline { font-size: 1.5rem; }
}
/* Events / Challenges listing tiles - shared tile pattern for both pages */
.listing-page { width: 100%; max-width: 1100px; }
.page-heading { max-width: 780px; margin: 0 auto var(--space-2); text-align: center; }
.page-heading h1 { font-family: var(--font-display); font-size: 1.8rem; margin: 0 0 var(--space-2); color: var(--ukvr-text-primary); }
.page-heading p { color: var(--ukvr-text-secondary); font-size: 1rem; line-height: 1.55; margin: 0 auto; max-width: 560px; }

.tile-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-3);
  width: 100%; max-width: 1000px; margin: var(--space-4) auto 0;
}
.tile {
  background: var(--ukvr-bg-elevated); border: 1px solid var(--ukvr-border); border-radius: 14px;
  overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.25); display: flex; flex-direction: column;
  text-decoration: none; color: var(--ukvr-text-primary); transition: transform .15s ease, border-color .15s ease;
}
.tile:hover { transform: translateY(-2px); border-color: var(--ukvr-accent-green-bright); }
.tile__image {
  height: 120px; background: linear-gradient(120deg, var(--ukvr-accent-green), var(--ukvr-accent-green-bright));
  position: relative; display: flex; align-items: flex-end; padding: var(--space-2);
}
/* .tile__image can also take a background-image via inline style once real
   event photography/illustration exists - the gradient is the placeholder. */
.tile__tag {
  background: var(--ukvr-gold); color: #1a1408; font-size: 11px; font-weight: 800;
  padding: 4px 10px; border-radius: 999px; letter-spacing: 0.3px;
}
.tile__body { padding: var(--space-3); flex: 1; display: flex; flex-direction: column; gap: 6px; }
.tile__body h3 { margin: 0; font-size: 1rem; color: var(--ukvr-text-primary); }
.tile__meta { font-size: 0.82rem; color: var(--ukvr-text-muted); line-height: 1.5; margin: 0; }
.tile__cta { margin-top: auto; font-size: 0.82rem; font-weight: 700; color: var(--ukvr-accent-ink); }
.tile--placeholder { opacity: 0.55; }
.tile--placeholder .tile__image { background: var(--ukvr-border); }
.tile--placeholder .tile__tag { background: var(--ukvr-text-muted); color: var(--ukvr-bg); }

.empty-state {
  text-align: center; color: var(--ukvr-text-muted); font-size: 0.92rem;
  padding: var(--space-5) var(--space-3); max-width: 480px; margin: var(--space-4) auto 0;
}

.admin-body { background: var(--ukvr-bg); min-height: 100vh; }

/* Admin dashboard pages reuse the shared site header/footer (like the
   rest of the site), which wraps page content in .site-main - a flex
   ROW that centers a single child. Without this wrapper, the dashboard's
   several sibling divs (stat cards, each section) each become their own
   flex item and get squeezed into a row instead of stacking. This forces
   the whole dashboard to count as one flex item, sized to a sensible
   reading width. */
.admin-page { width: 100%; max-width: 1100px; margin: 0 auto; }

/* Admin dashboard - stat cards + sectioned link tiles, matching the
   pattern already used on the UKRR admin dashboard, in UKVR's palette. */
.dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 28px; }
.dash-stat { background: var(--ukvr-bg-elevated); border: 1px solid var(--ukvr-border); border-radius: 10px; padding: 16px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.dash-stat-num { font-size: 1.8rem; font-weight: 900; color: var(--ukvr-accent-ink); line-height: 1; font-family: var(--font-display); }
.dash-stat-label { font-size: 0.72rem; color: var(--ukvr-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px; }

.dash-section { margin-bottom: 28px; }
.dash-section-title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ukvr-text-secondary); margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--ukvr-border); }

.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.dash-link {
    display: flex; align-items: center; gap: 12px;
    background: var(--ukvr-bg-elevated); border: 1px solid var(--ukvr-border); border-radius: 10px;
    padding: 14px 16px; text-decoration: none; transition: all 0.15s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.dash-link:hover { border-color: var(--ukvr-accent-green-bright); box-shadow: 0 4px 14px rgba(0,0,0,0.3); transform: translateY(-1px); }
.dash-link-icon { font-size: 1.5rem; flex-shrink: 0; }
.dash-link-text strong { display: block; color: var(--ukvr-text-primary); font-size: 0.9rem; }
.dash-link-text small { color: var(--ukvr-text-muted); font-size: 0.76rem; }
.dash-link.danger:hover { border-color: var(--ukvr-signature-red); }
.dash-badge {
    margin-left: auto; background: var(--ukvr-signature-red); color: #fff; font-size: 0.68rem; font-weight: 700;
    padding: 2px 8px; border-radius: 999px; flex-shrink: 0;
}
.admin-header { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--ukvr-border); }
.admin-tabs { display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-5) 0; border-bottom: 1px solid var(--ukvr-border); }
.admin-tab { padding: var(--space-2) var(--space-3); color: var(--ukvr-text-secondary); text-decoration: none; border-bottom: 2px solid transparent; font-size: 0.9rem; }
.admin-tab--active { color: var(--ukvr-text-primary); border-bottom-color: var(--ukvr-accent-green-bright); }
.admin-content { padding: var(--space-5); max-width: 1100px; margin: 0 auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.admin-table th { text-align: left; color: var(--ukvr-text-muted); font-weight: 600; padding: var(--space-2); border-bottom: 1px solid var(--ukvr-border); text-transform: uppercase; font-size: 0.72rem; }
.admin-table td { padding: var(--space-2); border-bottom: 1px solid var(--ukvr-border); color: var(--ukvr-text-secondary); }
.admin-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; }
.admin-badge--pending { background: rgba(212,175,55,0.18); color: var(--ukvr-gold-ink); }
.admin-badge--approved { background: rgba(15,107,69,0.25); color: var(--ukvr-accent-ink); }
.admin-badge--rejected { background: rgba(225,6,0,0.15); color: var(--ukvr-signature-red); }
.admin-badge--not_submitted { background: rgba(255,255,255,0.06); color: var(--ukvr-text-muted); }