/*
Theme Name: Hospitality & Events
Theme URI: https://hospitalityandevents.co.uk/
Author: Hospitality & Events
Description: A fixture-led theme for corporate sport and event hospitality. The front end is driven entirely by the H&E Events plugin, so dates, availability and packages are edited as records rather than as pages. Requires the H&E Events plugin.
Version: 1.3.4
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hospitality-events
Tags: business, custom-menu, featured-images, translation-ready
*/

/* ---------------------------------------------------------------------------
   Design tokens. Every colour on the site resolves from here, in all three
   theme states: light, an explicit dark choice, and the OS-level dark default.
   --------------------------------------------------------------------------- */

  :root{
    --ground:#EAECEA;
    --surface:#FFFFFF;
    --surface-2:#F4F6F4;
    --ink:#0D1520;
    --ink-muted:#5A6572;
    --line:rgba(13,21,32,0.14);
    --line-strong:rgba(13,21,32,0.26);
    --accent:#1C3FC4;
    --accent-hover:#152F94;
    --accent-ink:#FFFFFF;
    --accent-soft:#DFE5FB;
    --masthead:#0D1520;
    --masthead-ink:#F2F3F1;
    --masthead-muted:#98A3AE;
    --masthead-line:rgba(242,243,241,0.18);
    --warm:#9A6206;
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --ground:#0B111A;
      --surface:#131C27;
      --surface-2:#18222E;
      --ink:#E9EDF2;
      --ink-muted:#98A4B1;
      --line:rgba(233,237,242,0.14);
      --line-strong:rgba(233,237,242,0.28);
      --accent:#8AA1FF;
      --accent-hover:#A6B7FF;
      --accent-ink:#0A1020;
      --accent-soft:#1E2B50;
      --masthead:#060B12;
      --masthead-ink:#E9EDF2;
      --masthead-muted:#8B97A4;
      --masthead-line:rgba(233,237,242,0.14);
      --warm:#D9A54F;
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"]{
    --ground:#0B111A;
    --surface:#131C27;
    --surface-2:#18222E;
    --ink:#E9EDF2;
    --ink-muted:#98A4B1;
    --line:rgba(233,237,242,0.14);
    --line-strong:rgba(233,237,242,0.28);
    --accent:#8AA1FF;
    --accent-hover:#A6B7FF;
    --accent-ink:#0A1020;
    --accent-soft:#1E2B50;
    --masthead:#060B12;
    --masthead-ink:#E9EDF2;
    --masthead-muted:#8B97A4;
    --masthead-line:rgba(233,237,242,0.14);
    --warm:#D9A54F;
    color-scheme: dark;
  }


/* ---------------------------------------------------------------------------
   The [hidden] attribute must beat the layout rules below.

   Rows in the fixture list are display:grid, and an author rule like that
   outranks the browser's own [hidden]{display:none}. Without this line the
   sport filter sets the attribute, updates the count, and nothing visibly
   disappears. Keep it above the component styles.
   --------------------------------------------------------------------------- */
[hidden] { display: none !important; }

  *{ box-sizing:border-box; }
  body{
    margin:0;
    background:var(--ground);
    color:var(--ink);
    font-family:"Archivo", ui-sans-serif, system-ui, sans-serif;
    font-size:16px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{ max-width:1240px; margin:0 auto; padding:0 clamp(18px,3.5vw,44px); }

  .display{
    font-family:"Archivo", sans-serif;
    font-variation-settings:"wdth" 116, "wght" 640;
    text-transform:uppercase;
    letter-spacing:-0.005em;
    line-height:0.98;
    text-wrap:balance;
    margin:0;
  }
  .serif{ font-family:"Newsreader", Georgia, serif; font-weight:300; }
  .label{
    font-size:0.7rem;
    font-weight:600;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--ink-muted);
    font-variation-settings:"wdth" 96;
  }
  a{ color:inherit; }
  button{ font:inherit; }
  :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

  /* ---------- MASTHEAD ---------- */
  .masthead{
    background:var(--masthead);
    color:var(--masthead-ink);
    position:sticky; top:0; z-index:50;
    border-bottom:1px solid var(--masthead-line);
  }
  .masthead-inner{
    max-width:1240px; margin:0 auto;
    padding:12px clamp(18px,3.5vw,44px);
    display:flex; align-items:center; justify-content:space-between; gap:20px;
  }
  .logo{
    font-variation-settings:"wdth" 112, "wght" 700;
    text-transform:uppercase;
    font-size:0.94rem;
    letter-spacing:0.02em;
    white-space:nowrap;
  }
  .logo span{ color:var(--accent); }
  :root:not([data-theme="light"]) .logo span{ color:inherit; }
  .mast-links{ display:flex; gap:clamp(12px,2.2vw,26px); align-items:center; font-size:0.8rem; font-weight:500; }
  .mast-links a{ color:var(--masthead-muted); text-decoration:none; }
  .mast-links a:hover{ color:var(--masthead-ink); }
  .mast-mail{
    color:var(--masthead-ink) !important;
    border:1px solid var(--masthead-line);
    padding:7px 14px;
    border-radius:999px;
    white-space:nowrap;
  }
  .mast-mail:hover{ border-color:var(--masthead-ink); }
  @media (max-width:720px){ .mast-links .hide-sm{ display:none; } }

  /* ---------- HERO ---------- */
  .hero{
    background:var(--surface);
    border-bottom:1px solid var(--line);
    padding:clamp(40px,6vw,72px) 0 clamp(32px,4vw,52px);
  }
  .hero-grid{
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(300px,0.85fr);
    gap:clamp(28px,5vw,60px);
    align-items:start;
  }
  .hero h1{
    font-size:clamp(2.35rem,6.2vw,4.6rem);
    margin:14px 0 0;
  }
  .hero h1 .thin{
    font-variation-settings:"wdth" 118, "wght" 420;
    color:var(--ink-muted);
    display:block;
  }
  .hero-lede{
    font-family:"Newsreader", Georgia, serif;
    font-size:clamp(1.06rem,1.7vw,1.32rem);
    line-height:1.5;
    color:var(--ink-muted);
    max-width:44ch;
    margin:22px 0 0;
  }
  .hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
  .btn{
    display:inline-flex; align-items:center; gap:9px;
    padding:13px 22px;
    font-size:0.86rem; font-weight:600;
    font-variation-settings:"wdth" 100;
    letter-spacing:0.02em;
    text-decoration:none;
    border-radius:999px;
    border:1px solid transparent;
    cursor:pointer;
    transition:background .15s ease, border-color .15s ease, color .15s ease;
  }
  .btn-primary{ background:var(--accent); color:var(--accent-ink); }
  .btn-primary:hover{ background:var(--accent-hover); }
  .btn-outline{ border-color:var(--line-strong); color:var(--ink); background:transparent; }
  .btn-outline:hover{ border-color:var(--ink); }

  /* next-up panel */
  .nextup{
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:4px;
    padding:18px 20px 8px;
  }
  .nextup-head{
    display:flex; align-items:center; justify-content:space-between;
    padding-bottom:12px; border-bottom:1px solid var(--line);
  }
  .nextup-head .dot{
    width:7px; height:7px; border-radius:50%; background:var(--warm);
    display:inline-block; margin-right:7px; vertical-align:middle;
  }
  .nextup ul{ list-style:none; margin:0; padding:0; }
  .nextup li{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:14px;
    align-items:baseline;
    padding:13px 0;
    border-bottom:1px solid var(--line);
  }
  .nextup li:last-child{ border-bottom:none; }
  .nextup .when{
    font-size:0.72rem; font-weight:700; letter-spacing:0.1em;
    text-transform:uppercase; color:var(--warm);
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
  }
  .nextup .what{ font-size:0.92rem; font-weight:600; }
  .nextup .where{ font-size:0.78rem; color:var(--ink-muted); font-weight:400; display:block; }

  /* ---------- INDEX ---------- */
  .index-section{ padding:clamp(44px,6vw,76px) 0; }
  .index-head{
    display:flex; justify-content:space-between; align-items:flex-end;
    gap:24px; flex-wrap:wrap; margin-bottom:22px;
  }
  .index-head h2{ font-size:clamp(1.5rem,3vw,2.15rem); margin-top:8px; }
  .index-head .serif{ color:var(--ink-muted); max-width:42ch; font-size:1rem; }

  .filters{
    display:flex; flex-wrap:wrap; gap:8px;
    padding:16px 0 18px;
    border-top:1px solid var(--line-strong);
    border-bottom:1px solid var(--line);
    margin-bottom:2px;
  }
  .chip{
    padding:7px 14px;
    font-size:0.78rem; font-weight:600;
    border-radius:999px;
    border:1px solid var(--line-strong);
    background:transparent;
    color:var(--ink-muted);
    cursor:pointer;
    transition:all .13s ease;
  }
  .chip:hover{ color:var(--ink); border-color:var(--ink); }
  .chip[aria-pressed="true"]{
    background:var(--accent); border-color:var(--accent); color:var(--accent-ink);
  }
  .count-row{
    display:flex; justify-content:space-between; align-items:center;
    padding:12px 0; color:var(--ink-muted); font-size:0.78rem;
    font-variant-numeric:tabular-nums;
    border-bottom:1px solid var(--line);
  }

  .fixtures{ border-bottom:1px solid var(--line-strong); }
  .fixture{
    display:grid;
    grid-template-columns:118px minmax(0,1.5fr) 130px minmax(0,1fr) auto;
    gap:20px;
    align-items:center;
    padding:16px 12px 16px 14px;
    border-bottom:1px solid var(--line);
    border-left:2px solid transparent;
    background:var(--surface);
    transition:border-color .13s ease, background .13s ease;
  }
  .fixture:hover{ border-left-color:var(--accent); background:var(--surface-2); }
  .fx-when{
    font-size:0.74rem; font-weight:700; letter-spacing:0.09em; text-transform:uppercase;
    color:var(--ink-muted); font-variant-numeric:tabular-nums;
  }
  .fx-name{ font-size:1rem; font-weight:600; font-variation-settings:"wdth" 104; }
  .fx-venue{ font-size:0.81rem; color:var(--ink-muted); }
  .fx-sport{
    font-size:0.72rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
    color:var(--ink-muted);
  }
  .fx-formats{ font-size:0.82rem; color:var(--ink-muted); }
  .fx-cta{
    font-size:0.78rem; font-weight:600; color:var(--accent);
    text-decoration:none; white-space:nowrap;
    border-bottom:1px solid transparent;
  }
  .fx-cta:hover{ border-bottom-color:var(--accent); }
  .empty{ padding:34px 14px; color:var(--ink-muted); background:var(--surface); }
  .index-note{ margin-top:14px; font-size:0.78rem; color:var(--ink-muted); }

  @media (max-width:900px){
    .fixture{
      grid-template-columns:1fr auto;
      grid-template-areas:"when cta" "name name" "sport formats";
      gap:6px 16px;
      padding:16px 12px;
    }
    .fx-when{ grid-area:when; } .fx-main{ grid-area:name; }
    .fx-sport{ grid-area:sport; } .fx-formats{ grid-area:formats; text-align:right; }
    .fx-cta{ grid-area:cta; }
  }

  /* ---------- STEPS ---------- */
  .steps-section{ background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:clamp(44px,6vw,76px) 0; }
  .steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(20px,3vw,40px); margin-top:30px; }
  .step{ border-top:2px solid var(--ink); padding-top:16px; }
  .step .n{
    font-size:0.72rem; font-weight:700; letter-spacing:0.14em;
    color:var(--accent); font-variant-numeric:tabular-nums;
  }
  .step h3{ font-size:1.1rem; margin:8px 0 6px; font-variation-settings:"wdth" 106,"wght" 620; }
  .step p{ margin:0; font-size:0.9rem; color:var(--ink-muted); }

  /* ---------- FORMATS ---------- */
  .formats-section{ padding:clamp(44px,6vw,76px) 0; }
  .format-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(228px,1fr)); gap:16px; margin-top:28px; }
  .format-card{
    background:var(--surface); border:1px solid var(--line); border-radius:4px;
    padding:20px; display:flex; flex-direction:column; gap:9px;
  }
  .format-card h3{ font-size:1.04rem; margin:0; font-variation-settings:"wdth" 106,"wght" 620; }
  .format-card p{ margin:0; font-size:0.87rem; color:var(--ink-muted); }
  .format-card .size{
    margin-top:auto; padding-top:12px; border-top:1px solid var(--line);
    font-size:0.74rem; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums;
  }

  /* ---------- ENQUIRE ---------- */
  .enquire-section{
    background:var(--masthead); color:var(--masthead-ink);
    padding:clamp(48px,7vw,84px) 0;
  }
  .enquire-grid{ display:grid; grid-template-columns:minmax(0,0.9fr) minmax(320px,1.1fr); gap:clamp(28px,5vw,64px); align-items:start; }
  .enquire-grid h2{ font-size:clamp(1.7rem,3.4vw,2.6rem); }
  .enquire-grid .serif{ color:var(--masthead-muted); font-size:1.08rem; margin-top:16px; max-width:38ch; }
  .trust{ margin-top:28px; display:grid; gap:10px; }
  .trust div{ display:flex; gap:11px; align-items:baseline; font-size:0.88rem; color:var(--masthead-muted); }
  .trust b{ color:var(--masthead-ink); font-weight:600; }
  form{ display:grid; gap:14px; }
  .field{ display:grid; gap:6px; }
  /*
   * Form fields default to the LIGHT context, because the form appears on the
   * light sidebar of every event page as well as in the dark enquiry band.
   * Getting this the wrong way round means white text on a white card: the
   * visitor types and sees nothing, which looks like a disabled field.
   * The dark treatment is scoped to .enquire-section below.
   */
  .field label{ font-size:0.72rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-muted); }
  .field input, .field select, .field textarea{
    font:inherit; font-size:0.92rem;
    background:var(--surface);
    border:1px solid var(--line-strong);
    color:var(--ink);
    border-radius:3px;
    padding:11px 13px;
    width:100%;
  }
  .field textarea{ min-height:88px; resize:vertical; }
  .field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--accent); outline:2px solid var(--accent); outline-offset:1px; }
  .field input::placeholder, .field textarea::placeholder{ color:var(--ink-muted); opacity:0.75; }
  .field select option{ color:var(--ink); background:var(--surface); }

  /* Dark enquiry band on the front page and archives. */
  .enquire-section .field label{ color:var(--masthead-muted); }
  .enquire-section .field input,
  .enquire-section .field select,
  .enquire-section .field textarea{
    background:rgba(255,255,255,0.06);
    border-color:var(--masthead-line);
    color:var(--masthead-ink);
  }
  .enquire-section .field input::placeholder,
  .enquire-section .field textarea::placeholder{ color:var(--masthead-muted); opacity:0.85; }
  .enquire-section .field input:focus,
  .enquire-section .field select:focus,
  .enquire-section .field textarea:focus{ border-color:var(--masthead-ink); outline-color:var(--masthead-ink); }
  /* Native dropdown lists are painted by the OS, so pin readable colours. */
  .enquire-section .field select option{ color:#0D1520; background:#FFFFFF; }
  .form-note{ font-size:0.76rem; color:var(--ink-muted); }
  .enquire-section .form-note{ color:var(--masthead-muted); }
  .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .form-note{ font-size:0.76rem; color:var(--masthead-muted); }

  footer{ background:var(--ground); padding:26px 0; border-top:1px solid var(--line); }
  .foot{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:0.78rem; color:var(--ink-muted); }
  .foot a{ color:var(--ink-muted); text-decoration:none; }
  .foot a:hover{ color:var(--ink); }

  @media (max-width:900px){
    .hero-grid{ grid-template-columns:1fr; }
    .enquire-grid{ grid-template-columns:1fr; }
    .field-row{ grid-template-columns:1fr; }
  }

/* ---------------------------------------------------------------------------
   Single event page
   --------------------------------------------------------------------------- */
.event-hero{ background:var(--surface); border-bottom:1px solid var(--line); padding:clamp(32px,5vw,56px) 0 clamp(28px,4vw,44px); }
.event-hero-grid{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(280px,0.8fr); gap:clamp(24px,4vw,56px); align-items:start; }
.event-hero h1{ font-size:clamp(2rem,4.6vw,3.4rem); margin:12px 0 0; }
.breadcrumbs{ font-size:0.78rem; color:var(--ink-muted); margin-bottom:14px; }
.breadcrumbs a{ color:var(--ink-muted); text-decoration:none; }
.breadcrumbs a:hover{ color:var(--accent); }
.event-facts{ display:grid; gap:0; margin-top:24px; border-top:1px solid var(--line); }
.event-fact{ display:grid; grid-template-columns:150px 1fr; gap:16px; padding:12px 0; border-bottom:1px solid var(--line); font-size:0.92rem; }
.event-fact dt{ font-size:0.72rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-muted); padding-top:3px; }
.event-fact dd{ margin:0; }
@media (max-width:640px){ .event-fact{ grid-template-columns:1fr; gap:2px; } }

.status-badge{ display:inline-flex; align-items:center; gap:7px; padding:6px 14px; border-radius:999px; font-size:0.76rem; font-weight:600; border:1px solid; }
.status-badge::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.status-good{ color:var(--good); border-color:var(--good); }
.status-warn{ color:var(--warm); border-color:var(--warm); }
.status-gone{ color:var(--ink-muted); border-color:var(--line-strong); }
.status-neutral{ color:var(--accent); border-color:var(--accent); }

.event-body{ padding:clamp(36px,5vw,60px) 0; }
.event-layout{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(280px,0.75fr); gap:clamp(28px,5vw,56px); align-items:start; }
.event-prose{ font-size:1.02rem; max-width:66ch; }
.event-prose h2{ font-size:1.4rem; margin:32px 0 10px; }
.event-prose h3{ font-size:1.1rem; margin:24px 0 8px; }
.event-prose p{ margin:0 0 16px; }
.event-prose ul{ padding-left:20px; }
.event-prose li{ margin-bottom:7px; }
.event-prose img{ max-width:100%; height:auto; border-radius:3px; }

.packages{ display:grid; gap:14px; margin:22px 0 0; }
.package{ background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:20px 22px; }
.package-head{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:12px; }
.package-head h3{ font-size:1.1rem; margin:0; font-variation-settings:"wdth" 106,"wght" 620; }
.package-price{ font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; white-space:nowrap; }
.package p{ margin:0 0 10px; font-size:0.92rem; color:var(--ink-muted); }
.package .guests{ font-size:0.74rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-muted); font-weight:600; font-variant-numeric:tabular-nums; }

.sidebar-card{ background:var(--surface-2); border:1px solid var(--line); border-radius:4px; padding:22px; position:sticky; top:82px; }
.sidebar-card h2{ font-size:1.1rem; margin:0 0 8px; }
.sidebar-card p{ font-size:0.88rem; color:var(--ink-muted); margin:0 0 16px; }

.related{ background:var(--surface); border-top:1px solid var(--line); padding:clamp(36px,5vw,56px) 0; }
.related-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; margin-top:22px; }
.related-card{ background:var(--ground); border:1px solid var(--line); border-radius:4px; padding:18px 20px; text-decoration:none; display:block; transition:border-color .14s ease; }
.related-card:hover{ border-color:var(--accent); }
.related-card .when{ font-size:0.72rem; font-weight:700; letter-spacing:0.09em; text-transform:uppercase; color:var(--ink-muted); }
.related-card h3{ font-size:1rem; margin:6px 0 3px; font-variation-settings:"wdth" 104; }
.related-card p{ margin:0; font-size:0.8rem; color:var(--ink-muted); }

/* thumbnails in listing rows */
.fx-thumb{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:3px; margin-bottom:10px; display:block; }
.event-figure{ margin:0 0 22px; }
.event-figure img{ width:100%; height:auto; border-radius:4px; display:block; }

/* generic page + posts */
.page-hero{ background:var(--surface); border-bottom:1px solid var(--line); padding:clamp(36px,5vw,60px) 0 clamp(24px,3vw,36px); }
.page-body{ padding:clamp(32px,5vw,56px) 0; }
.prose{ max-width:66ch; font-size:1.02rem; }
.prose h2{ font-size:1.4rem; margin:30px 0 10px; }
.prose p{ margin:0 0 16px; }
.prose a{ color:var(--accent); }

/* WordPress core classes */
.alignleft{ float:left; margin:0 20px 16px 0; }
.alignright{ float:right; margin:0 0 16px 20px; }
.aligncenter{ display:block; margin-left:auto; margin-right:auto; }
.wp-caption-text, .wp-element-caption{ font-size:0.8rem; color:var(--ink-muted); }
.screen-reader-text{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }
.skip-link:focus{ position:fixed; top:10px; left:10px; z-index:200; width:auto; height:auto; clip:auto; background:var(--accent); color:var(--accent-ink); padding:10px 16px; border-radius:3px; }
.admin-bar .masthead{ top:32px; }
.admin-bar .sidebar-card{ top:114px; }
@media (max-width:782px){ .admin-bar .masthead{ top:46px; } }

/* filter links behave as links, not buttons, so they work without JS */
a.chip{ text-decoration:none; display:inline-block; }
a.chip[aria-current="true"]{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }

.no-events{ padding:34px 14px; color:var(--ink-muted); background:var(--surface); border:1px solid var(--line); border-radius:3px; }

@media (max-width:900px){
  .event-hero-grid{ grid-template-columns:1fr; }
  .event-layout{ grid-template-columns:1fr; }
  .sidebar-card{ position:static; }
}

/* ---------------------------------------------------------------------------
   Light masthead option, for a dark-coloured logo
   --------------------------------------------------------------------------- */
body.masthead-light .masthead{ background:var(--surface); border-bottom:1px solid var(--line); }
body.masthead-light .logo{ color:var(--ink); }
body.masthead-light .mast-links a{ color:var(--ink-muted); }
body.masthead-light .mast-links a:hover{ color:var(--ink); }
body.masthead-light .mast-mail{ color:var(--ink) !important; border-color:var(--line-strong); }
body.masthead-light .mast-mail:hover{ border-color:var(--accent); color:var(--accent) !important; }
.logo img{ max-height:44px; width:auto; display:block; }

/* ---------------------------------------------------------------------------
   Front page banner (optional)
   --------------------------------------------------------------------------- */
.hero-banner{ position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
.hero-banner img{ width:100%; height:clamp(260px,42vh,460px); object-fit:cover; display:block; }
.hero-banner::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(13,21,32,0.10), rgba(13,21,32,0.55));
}
.hero-banner-copy{
  position:absolute; inset:auto 0 0 0; z-index:2;
  padding:clamp(20px,4vw,40px) 0;
}
.hero-banner-copy .display{ color:#fff; font-size:clamp(1.8rem,4vw,3.2rem); }
.hero-banner-copy .label{ color:#fff; opacity:0.9; }

/* ---------------------------------------------------------------------------
   Event photographs
   --------------------------------------------------------------------------- */
.event-banner{ border-bottom:1px solid var(--line); }
.event-banner img{ width:100%; height:clamp(200px,30vh,280px); object-fit:cover; display:block; }

/* Photographs beside the enquiry card */
.side-gallery{ margin-top:18px; }
.side-gallery-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
.side-gallery-all{
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; font-size:0.78rem; font-weight:600; color:var(--accent);
}
.side-gallery-all:hover{ text-decoration:underline; }
.side-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.side-thumb{
  position:relative; padding:0; border:1px solid var(--line); background:none;
  cursor:zoom-in; overflow:hidden; border-radius:3px; line-height:0;
  transition:border-color .14s ease;
}
.side-thumb:hover{ border-color:var(--accent); }
.side-thumb img{ width:100%; height:130px; object-fit:cover; display:block; }
/* Images kept in the lightbox set but not drawn as tiles. */
.side-thumb.is-offscreen{ display:none; }
.side-more{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(13,21,32,0.62); color:#fff;
  font-size:1.05rem; font-weight:700; letter-spacing:0.02em;
}
@media (max-width:900px){
  .side-thumb img{ height:150px; }
}

/*
 * A closed <dialog> is hidden by the browser's own rule, but an author
 * display:flex outranks it and leaves the lightbox sitting in the page. Paint
 * the layout only while it is open.
 */
.lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(8,12,18,0.94);
  display:none; align-items:center; justify-content:center;
  padding:24px; border:0;
}
.lightbox[open]{ display:flex; }
.lightbox img{ max-width:100%; max-height:86vh; object-fit:contain; border-radius:3px; }
.lightbox-close{
  position:absolute; top:16px; right:20px;
  background:none; border:1px solid rgba(255,255,255,0.4); color:#fff;
  width:40px; height:40px; border-radius:50%; cursor:pointer; font-size:1.2rem;
}
.lightbox-close:hover{ border-color:#fff; }
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:none; border:1px solid rgba(255,255,255,0.4); color:#fff;
  width:44px; height:44px; border-radius:50%; cursor:pointer; font-size:1.2rem;
}
.lightbox-prev{ left:18px; }
.lightbox-next{ right:18px; }
.lightbox-caption{ position:absolute; bottom:20px; left:0; right:0; text-align:center; color:#fff; font-size:0.84rem; opacity:0.85; }

/* ---------------------------------------------------------------------------
   Consent + form messages
   --------------------------------------------------------------------------- */
.consent{ display:grid; gap:10px; margin:4px 0 4px; }
.consent-line{
  display:flex; gap:10px; align-items:flex-start;
  font-size:0.82rem; line-height:1.5; color:var(--ink-muted); cursor:pointer;
}
.consent-line input{ margin-top:3px; flex:none; width:16px; height:16px; accent-color:var(--accent); }
.consent-line a{ color:var(--accent); }
.enquire-section .consent-line{ color:var(--masthead-muted); }
.enquire-section .consent-line a{ color:var(--accent); }
.form-message{ font-size:0.9rem; padding:11px 14px; border-radius:3px; margin:0 0 4px; }
.form-message-good{ background:var(--good-bg,#E4EFE8); color:var(--good); border:1px solid var(--good); }
.form-message-bad{ background:transparent; color:var(--warm); border:1px solid var(--warm); }
.cf-turnstile{ margin:4px 0; }

/* ---------------------------------------------------------------------------
   Calendar view
   --------------------------------------------------------------------------- */
.calendar-section{ padding:clamp(32px,5vw,56px) 0; }
.calendar-month{ margin-bottom:clamp(28px,4vw,44px); }
.calendar-month-head{
  display:flex; align-items:baseline; gap:14px;
  border-bottom:2px solid var(--ink); padding-bottom:8px; margin-bottom:18px;
}
.calendar-month.is-current .calendar-month-head{ border-bottom-color:var(--accent); }
.calendar-month-head h2{ font-size:clamp(1.3rem,2.4vw,1.7rem); font-variation-settings:"wdth" 110,"wght" 650; text-transform:uppercase; }
.calendar-now{
  font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; font-weight:700;
  background:var(--accent); color:var(--accent-ink); padding:3px 10px; border-radius:999px;
}
.calendar-count{ margin-left:auto; font-size:0.76rem; color:var(--ink-muted); font-variant-numeric:tabular-nums; }
.calendar-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; }
.calendar-card{
  background:var(--surface); border:1px solid var(--line); border-radius:4px;
  text-decoration:none; color:inherit; overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .14s ease, transform .14s ease;
}
.calendar-card:hover{ border-color:var(--accent); transform:translateY(-2px); }
.calendar-thumb{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.calendar-card-body{ padding:16px 18px; display:flex; flex-direction:column; gap:4px; flex:1; }
.calendar-card .when{ font-size:0.7rem; font-weight:700; letter-spacing:0.09em; text-transform:uppercase; color:var(--accent); }
.calendar-card h3{ font-size:1rem; margin:2px 0; font-variation-settings:"wdth" 104,"wght" 620; }
.calendar-card p{ margin:0; font-size:0.8rem; color:var(--ink-muted); }
.calendar-sport{
  margin-top:auto; padding-top:10px;
  font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-muted);
}

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */
.site-footer{ background:var(--masthead); color:var(--masthead-muted); padding:clamp(36px,5vw,56px) 0 0; margin-top:0; }
.footer-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:clamp(24px,4vw,48px); padding-bottom:32px;
}
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-brand{
  font-family:"Archivo",sans-serif; font-variation-settings:"wdth" 112,"wght" 700;
  text-transform:uppercase; font-size:1rem; color:var(--masthead-ink); margin:0 0 8px;
}
.footer-tagline{ font-size:0.86rem; margin:0 0 14px; max-width:34ch; }
.footer-contact{ font-size:0.86rem; margin:0; }
.footer-contact a{ color:var(--masthead-ink); text-decoration:none; }
.footer-contact a:hover{ color:var(--accent); }
.footer-block h3{
  font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--masthead-ink); margin:0 0 12px; font-weight:600;
}
.footer-links{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.footer-links a{ color:var(--masthead-muted); text-decoration:none; font-size:0.86rem; }
.footer-links a:hover{ color:var(--masthead-ink); }
.footer-muted{ color:var(--masthead-muted); opacity:0.75; font-size:0.78rem; }
.footer-legal{
  border-top:1px solid var(--masthead-line); padding:20px 0 28px;
  display:grid; gap:6px; font-size:0.78rem;
}
.footer-legal p{ margin:0; }

/* ---------------------------------------------------------------------------
   Testimonials (hidden entirely until real quotes exist)
   --------------------------------------------------------------------------- */
.testimonials-section{ background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:clamp(40px,6vw,72px) 0; }
.testimonial-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; margin-top:28px; }
.testimonial{
  margin:0; padding:24px 26px;
  background:var(--ground); border:1px solid var(--line);
  border-left:3px solid var(--accent); border-radius:0 4px 4px 0;
  display:flex; flex-direction:column;
}
.testimonial h3{ font-size:1.02rem; margin:0 0 10px; font-variation-settings:"wdth" 106,"wght" 620; }
.testimonial blockquote{
  margin:0 0 16px; padding:0;
  font-family:"Newsreader",Georgia,serif; font-size:1.04rem; line-height:1.55; color:var(--ink);
}
.testimonial blockquote p{ margin:0 0 10px; }
.testimonial blockquote p:last-child{ margin-bottom:0; }
.testimonial figcaption{ margin-top:auto; padding-top:14px; border-top:1px solid var(--line); display:grid; gap:2px; }
.testimonial-name{ font-size:0.88rem; font-weight:700; }
.testimonial-role{ font-size:0.8rem; color:var(--ink-muted); }
.testimonial-event{ font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); margin-top:4px; }