:root {
  --navy: #0F2A47;
  --gold: #F2B705;
  --off-white: #FAFAF8;
  --ink: #14213D;
  --pale-navy: #E7ECF3;
  --muted-gold: #C9A227;

  /* Venue Hire sub-brand: the same navy/gold shifted into a darker, more
     muted register on a cream background, per the spec's "event space, not
     grassroots rugby club" brief for these pages. */
  --vh-charcoal-navy: #0A192F;
  --vh-brass-gold: #B8912F;
  --vh-cream: #F5F1E8;
  /* Shared header/footer bar height for the Venue Hire microsite (see the
     "Venue Hire microsite header & footer" section below) — keeping both
     tied to one variable is what keeps them visually identical in height. */
  --vh-bar-height: 60px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--off-white);
  color: var(--ink);
  line-height: 1.5;
}

a { color: var(--navy); }

.site-header {
  background: var(--navy);
  color: var(--off-white);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.site-header__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--off-white);
  text-decoration: none;
}

.site-logo__mark {
  height: 48px;
  width: 48px;
  display: block;
}

.site-logo__text {
  font-weight: bold;
  font-size: 1.25rem;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--off-white);
  text-decoration: none;
  margin-left: 1.5rem;
  font-weight: 500;
}

.nav-icon {
  flex-shrink: 0;
}

.site-nav a:hover {
  color: var(--gold);
}

.site-nav__external {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.site-nav {
  display: flex;
  align-items: center;
}

.nav-dropdown {
  position: relative;
  margin-left: 1.5rem;
}

.nav-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  color: var(--off-white);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
}

.nav-dropdown__trigger:hover,
.nav-dropdown.is-open .nav-dropdown__trigger {
  color: var(--gold);
}

.nav-dropdown__chevron {
  transition: transform 0.2s ease;
}

.nav-dropdown.is-open .nav-dropdown__chevron {
  transform: rotate(180deg);
}

.nav-dropdown__menu {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 0;
  min-width: 180px;
  background: var(--off-white);
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.nav-dropdown.is-open .nav-dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown__menu a {
  display: block;
  margin-left: 0;
  padding: 0.5rem 0.75rem;
  border-radius: 0.35rem;
  color: var(--ink);
  font-weight: 500;
}

/* A label grouping the links that follow it within a dropdown menu (e.g.
   "Senior Teams" / "Junior Teams" / "All Ages" in the Teams menu). Not a
   link itself, so it's styled apart from the items: small, muted, and with
   breathing room above it to separate it from the previous group. */
.nav-dropdown__menu-heading {
  margin: 0.6rem 0.25rem 0.3rem;
  padding: 0 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-gold);
}

.nav-dropdown__menu-heading:first-child {
  margin-top: 0.25rem;
}

.nav-dropdown__menu a:hover {
  background: var(--pale-navy);
  color: var(--navy);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.5rem;
  height: 2.5rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.nav-toggle__bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--off-white);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle.is-open .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-open .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle.is-open .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 760px) {
  .nav-toggle {
    display: flex;
  }

  .site-nav {
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    background: var(--navy);
    padding: 0.5rem 0 1rem;
  }

  .site-nav.is-open {
    display: flex;
    /* The header is sticky, so a menu taller than the screen would be cut off
       with no way to reach the bottom. Cap it to what is left below the
       header and let it scroll inside itself. */
    max-height: calc(100vh - 5rem);
    max-height: calc(100dvh - 5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .site-nav a {
    margin-left: 0;
    padding: 0.75rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .nav-dropdown {
    margin-left: 0;
  }

  /* Left-aligned like the plain links (icon, then label), with the chevron
     pushed to the far right. */
  .nav-dropdown__trigger {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    padding: 0.75rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .nav-dropdown__chevron {
    margin-left: auto;
  }

  .nav-dropdown__menu {
    position: static;
    box-shadow: none;
    background: var(--pale-navy);
    opacity: 1;
    visibility: visible;
    transform: none;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    transition: max-height 0.2s ease;
  }

  .nav-dropdown.is-open .nav-dropdown__menu {
    /* main.js sets an inline max-height equal to the menu's real height when
       it opens, so the slide animation fits any number of teams. This 9999px
       is only the fallback if that script has not run. */
    max-height: 9999px;
    padding: 0.5rem;
  }
}

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.info-card {
  background: var(--pale-navy);
  border-radius: 0.75rem;
  padding: 1.5rem 1.75rem;
  margin: 1.5rem 0 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
  align-items: stretch;
}

.info-card__details {
  display: flex;
  flex-direction: column;
}

.info-card__map {
  border-radius: 0.5rem;
  overflow: hidden;
  min-height: 260px;
}

.info-card__map iframe {
  width: 100%;
  height: 100%;
  min-height: 260px;
  display: block;
  border: 0;
}

@media (max-width: 640px) {
  .info-card {
    grid-template-columns: 1fr;
  }
}

.info-card h2 {
  margin-top: 0;
  color: var(--navy);
}

.info-card address {
  font-style: normal;
  line-height: 1.7;
  margin: 0 0 1rem;
}

.info-card__cta {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.4rem;
  background: var(--navy);
  color: var(--off-white);
  text-decoration: none;
  font-weight: 600;
  padding: 0.6rem 1.25rem;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}

.info-card__cta:hover {
  background: var(--muted-gold);
  color: var(--navy);
}

.placeholder-note {
  border: 2px dashed var(--muted-gold);
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0 2rem;
  background: rgba(201, 162, 39, 0.08);
  color: var(--ink);
}

.placeholder-note strong {
  color: var(--navy);
}

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

.committee-card {
  background: var(--pale-navy);
  border-radius: 0.75rem;
  padding: 1.5rem;
}

.committee-card h3 {
  margin: 0 0 0.25rem;
  color: var(--navy);
}

.committee-card__role {
  margin: 0 0 0.75rem;
  font-weight: 600;
  color: var(--muted-gold);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

.committee-card__remit {
  margin: 0 0 1rem;
  color: var(--ink);
}

.committee-card__email {
  display: inline-block;
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.committee-card__email:hover,
.committee-card__phone:hover {
  color: var(--muted-gold);
}

/* A volunteer's phone number sits on its own line, under any email. */
.committee-card__phone {
  display: block;
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
}

/* A team's schedule: up to two single-line rows (Training, Match days) in one
   panel, label on the left and the line on the right, stacking on a phone. */
.team-times {
  margin: 2rem 0;
  padding: 0.5rem 1.5rem;
  background: var(--pale-navy);
  border-left: 4px solid var(--gold);
  border-radius: 0.75rem;
}

.team-times__row {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 0.25rem 1.5rem;
  /* Line the small label up with the first line of the larger text beside it
     on their baselines, so the two rows look the same. */
  align-items: baseline;
  padding: 0.9rem 0;
}

.team-times__row + .team-times__row {
  border-top: 1px solid rgba(15, 42, 71, 0.15);
}

.team-times dt {
  margin: 0;
  color: var(--navy);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.team-times dd {
  margin: 0;
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  .team-times {
    padding: 0.25rem 1.1rem;
  }
  .team-times__row {
    grid-template-columns: 1fr;
  }
}

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

.facility-card {
  background: var(--pale-navy);
  border-radius: 0.75rem;
  padding: 1.5rem;
}

.facility-card h2 {
  margin: 0 0 0.75rem;
  color: var(--navy);
  font-size: 1.1rem;
}

.facility-card p {
  margin: 0 0 0.75rem;
}

.facility-card p:last-child,
.facility-card ul:last-child {
  margin-bottom: 0;
}

.facility-card ul {
  margin: 0;
  padding-left: 1.25rem;
}

.facility-card li {
  margin-bottom: 0.4rem;
}

.site-footer {
  background: var(--navy);
  color: var(--off-white);
  padding: 2rem 1.5rem;
  margin-top: 3rem;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  max-width: 1100px;
  margin: 1.5rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.footer-bottom__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.footer-bottom__logo {
  height: 36px;
  width: 36px;
  display: block;
}

.footer-bottom__address {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--off-white);
  opacity: 0.85;
}

.footer-bottom__address strong {
  opacity: 1;
}

.footer-bottom__copyright {
  margin: 0;
  font-size: 0.8rem;
  color: var(--off-white);
  opacity: 0.7;
  text-align: right;
}

.footer-bottom__privacy-link {
  background: none;
  border: none;
  padding: 0;
  margin-left: 0.4rem;
  font: inherit;
  font-size: 0.8rem;
  color: var(--gold);
  opacity: 1;
  text-decoration: underline;
  cursor: pointer;
}

.footer-bottom__privacy-link:hover,
.footer-bottom__privacy-link:focus-visible {
  color: var(--muted-gold);
}

.privacy-dialog {
  border: none;
  border-radius: 0.75rem;
  padding: 0;
  width: min(90vw, 600px);
  max-height: 85vh;
  box-shadow: 0 10px 40px rgba(15, 42, 71, 0.35);
}

.privacy-dialog::backdrop {
  background: rgba(15, 42, 71, 0.55);
}

.privacy-dialog__panel {
  display: flex;
  flex-direction: column;
  max-height: 85vh;
}

.privacy-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--pale-navy);
  flex-shrink: 0;
}

.privacy-dialog__header h2 {
  margin: 0;
  color: var(--navy);
  font-size: 1.15rem;
}

.privacy-dialog__close {
  background: none;
  border: none;
  padding: 0.25rem;
  display: flex;
  color: var(--navy);
  cursor: pointer;
  border-radius: 0.25rem;
}

.privacy-dialog__close:hover,
.privacy-dialog__close:focus-visible {
  background: var(--pale-navy);
}

.privacy-dialog__body {
  padding: 1.1rem 1.4rem 1.4rem;
  overflow-y: auto;
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.6;
}

.privacy-dialog__body h3 {
  color: var(--navy);
  font-size: 1rem;
  margin: 1.25rem 0 0.4rem;
}

.privacy-dialog__body h3:first-of-type {
  margin-top: 0;
}

.privacy-dialog__body p {
  margin: 0 0 0.75rem;
}

.privacy-dialog__body a {
  color: var(--navy);
}

@media (max-width: 640px) {
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-bottom__copyright {
    text-align: left;
  }
}

/* Social links (2026-10-05). Follow Us page cards plus small icon links in
   the main-site footer. Links out only — no embedded feeds (they set
   third-party cookies on load and X/Instagram feeds are unreliable). */
.social-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.social-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
  background: var(--pale-navy);
  border-radius: 0.75rem;
  padding: 2rem 1.5rem;
  color: var(--navy);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.social-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(15, 42, 71, 0.15);
}

.social-card:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}

.social-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  margin-bottom: 0.5rem;
}

.social-card__icon .social-icon {
  width: 28px;
  height: 28px;
}

.social-card__name {
  font-size: 1.25rem;
  font-weight: 700;
}

.social-card__handle {
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.social-card__blurb {
  color: var(--ink);
  margin-bottom: 0.75rem;
}

.social-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  background: var(--navy);
  color: var(--off-white);
  font-weight: 700;
  padding: 0.65rem 1.4rem;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}

.social-card:hover .social-card__cta {
  background: var(--gold);
  color: var(--navy);
}

.footer-bottom__end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

.footer-socials {
  display: flex;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--off-white);
  transition: color 0.15s ease, background 0.15s ease;
}

.footer-socials a:hover {
  color: var(--gold);
  background: rgba(255, 255, 255, 0.1);
}

.footer-socials a:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

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

@media (max-width: 640px) {
  .footer-bottom__end {
    align-items: flex-start;
  }
}

.sponsor-strip {
  overflow: hidden;
  width: 100%;
  padding: 1.25rem 0;
  -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.sponsor-strip__track {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  width: max-content;
  /* Deliberately not gated behind prefers-reduced-motion: a reduced-motion
     fallback would freeze the strip wherever it happened to stop, hiding
     most sponsors from view and effectively giving unequal prominence to
     whichever few are left showing. The gentle, pausable scroll keeps every
     sponsor visible on an equal footing instead. */
  animation: sponsor-scroll 75s linear infinite; /* was 50s; 75s = two-thirds of the speed (2026-10-07) */
}

.sponsor-strip:hover .sponsor-strip__track {
  animation-play-state: paused;
}

.sponsor-strip__item {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 150px;
  background: #ffffff;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(15, 42, 71, 0.18);
  padding: 0.75rem 0.85rem 0.6rem;
}

.sponsor-strip__item img {
  max-height: 34px;
  max-width: 100%;
  object-fit: contain;
}

.sponsor-strip__name {
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  color: var(--navy);
  max-height: 2.3em;
  overflow: hidden;
}

/* Some sponsor logos are light-coloured marks on a transparent background
   (designed to sit on a dark backdrop, not a white one), or have their own
   fixed dark/mid-tone background baked into the image. Flag these in
   _data/sponsors.json with "theme": "dark" to swap the white card for a
   translucent navy one instead, so the logo stays legible. */
.sponsor-strip__item--dark {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: none;
}

.sponsor-strip__item--dark .sponsor-strip__name {
  color: var(--off-white);
}

.sponsor-strip__item--text-only {
  min-height: 64px;
}

.sponsor-strip__item--text-only .sponsor-strip__name {
  font-size: 0.78rem;
}

@keyframes sponsor-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.timeline {
  position: relative;
  max-width: 900px;
  margin: 3rem auto;
  padding: 0 1rem;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background: var(--pale-navy);
  transform: translateX(-50%);
}

.timeline__item {
  position: relative;
  width: 50%;
  padding: 0 2.5rem 3rem;
  box-sizing: border-box;
}

.timeline__item:nth-child(odd) {
  left: 0;
  text-align: right;
}

.timeline__item:nth-child(even) {
  left: 50%;
  text-align: left;
}

.timeline__marker {
  position: absolute;
  top: 0;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--off-white);
  box-shadow: 0 0 0 3px var(--navy);
}

.timeline__marker svg {
  display: block;
}

.timeline__year {
  margin: 0 0 0.25rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--muted-gold);
  letter-spacing: 0.02em;
}

.timeline__item:nth-child(odd) .timeline__marker {
  right: -1.75rem;
}

.timeline__item:nth-child(even) .timeline__marker {
  left: -1.75rem;
}

.timeline__content {
  background: var(--pale-navy);
  border-radius: 0.5rem;
  padding: 1.25rem 1.5rem;
}

.timeline__content h3 {
  margin-top: 0;
  color: var(--navy);
}

@media (max-width: 640px) {
  .timeline::before { left: 1.5rem; }
  .timeline__item,
  .timeline__item:nth-child(odd),
  .timeline__item:nth-child(even) {
    width: 100%;
    left: 0;
    text-align: left;
    padding-left: 4rem;
    padding-right: 0.5rem;
  }
  .timeline__item:nth-child(odd) .timeline__marker,
  .timeline__item:nth-child(even) .timeline__marker {
    left: 0;
    right: auto;
  }
  .timeline__item:nth-child(odd) .timeline__tags,
  .timeline__item:nth-child(even) .timeline__tags {
    justify-content: flex-start;
  }
}

.scroll-hint {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  color: var(--off-white);
  background: var(--navy);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 0.6rem 1rem;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(15, 42, 71, 0.35);
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0.95;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 50;
}

.scroll-hint svg {
  color: var(--gold);
  animation: scroll-hint-bounce 1.6s ease-in-out infinite;
}

.scroll-hint.is-hidden {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-hint svg {
    animation: none;
  }
}

@keyframes scroll-hint-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

.timeline__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.timeline__item:nth-child(odd) .timeline__tags { justify-content: flex-end; }
.timeline__item:nth-child(even) .timeline__tags { justify-content: flex-start; }

.timeline__tag {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}

.timeline__tag--primary {
  background: var(--navy);
  color: var(--off-white);
}

.timeline__tag--accent {
  background: transparent;
  border: 1.5px solid var(--muted-gold);
  color: var(--muted-gold);
}

/* A single team's page: photo + name + section label + blurb up top,
   generated by teams/team.md (one page per active team in _data/teams.js). */
.team-hero {
  display: flex;
  gap: 2rem;
  align-items: center;
  margin: 1.5rem 0 2rem;
  flex-wrap: wrap;
}

.team-hero__photo {
  width: 220px;
  height: 220px;
  object-fit: cover;
  border-radius: 0.75rem;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(15, 42, 71, 0.18);
}

.team-hero__section {
  margin: 0 0 0.35rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.75rem;
  color: var(--muted-gold);
}

.team-hero__text h1 {
  margin: 0 0 0.5rem;
}

.team-hero__blurb {
  margin: 0;
  color: var(--ink);
}

/* A team's own sponsors (distinct from the club-wide footer strip) — same
   card look as the footer ticker's cards, just laid out as a plain
   wrapping row instead of a scrolling one. */
.team-sponsors {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 1.5rem 0 2rem;
}

.team-sponsors__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 150px;
  min-height: 64px;
  background: #ffffff;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(15, 42, 71, 0.18);
  padding: 0.75rem 0.85rem 0.6rem;
  text-decoration: none;
  color: var(--navy);
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
}

/* Light-artwork logos (flagged "dark" in sponsors.json) sit on navy, as in
   the footer strip. */
.team-sponsors__item--dark {
  background: var(--navy);
  color: var(--off-white);
}

.team-sponsors__item img {
  max-height: 40px;
  max-width: 100%;
  object-fit: contain;
}

/* Venue Hire — a deliberately different sub-brand for the event-space pages:
   more whitespace, larger imagery, a calmer palette than the rest of the
   club site (see the --vh-* variables above), while the header/nav/footer
   stay exactly the same so the site still reads as one site, not two. This
   is why there's no separate venue layout file — these pages still use
   base.liquid, and base.liquid adds the "venue-theme" class to <body>
   whenever page.url contains "/venue/", which is what the rules below
   hook into. Sponsors are deliberately excluded from the footer on these
   pages too (handled in base.liquid), keeping the tone uncluttered by club
   sponsorship branding, per the spec. */

.venue-theme main {
  background: var(--vh-cream);
}

.venue-theme h1,
.venue-theme h2 {
  color: var(--vh-charcoal-navy);
}

.vh-hero {
  max-width: 760px;
  margin: 0 auto 2.5rem;
  text-align: center;
  padding: 1rem 1rem 0;
}

.vh-hero h1 {
  font-size: 2.25rem;
  margin: 0 0 0.75rem;
}

.vh-hero p {
  font-size: 1.1rem;
  color: var(--ink);
  margin: 0;
}

/* Hero photo (2026-10-04, made page-specific 2026-10-03): a real shot of
   the clubhouse set up for an event, used as the hero background on all
   three Venue Hire pages (restored after the tabs restructure, which had
   dropped it along with the old landing page). The dark radial vignette
   (strongest at the edges, lightest in the centre) keeps the heading and
   intro text readable without flattening the photo into a uniform grey
   wash, and it's what tones down each photo's own busy coloured ceiling
   lighting so it doesn't fight the charcoal-navy/brass-gold palette.
   Each page can set its own photo via a `heroImage` front-matter value,
   which the page template turns into a `--hero-image` custom property on
   the hero div (same data-driven approach as `galleryImages` for the
   gallery, so adding a page-specific hero needs no CSS changes). Pages
   that don't set `heroImage` fall through to the shared clubhouse photo
   below. */
.vh-hero--photo {
  max-width: none;
  text-align: center;
  padding: 4.5rem 1.5rem;
  margin: 0 0 2.5rem;
  border-radius: 0.75rem;
  position: relative;
  overflow: hidden;
  background-image: var(--hero-image, url('/images/venue/clubhouse-hero.jpg'));
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
}

.vh-hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(10, 25, 47, 0.7) 0%, rgba(10, 25, 47, 0.86) 60%, rgba(10, 25, 47, 0.94) 100%);
}

.vh-hero--photo h1,
.vh-hero--photo p {
  position: relative;
  z-index: 1;
}

.vh-hero--photo h1 {
  color: var(--vh-cream);
}

.vh-hero--photo p {
  color: var(--vh-cream);
  opacity: 0.9;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 640px) {
  .vh-hero--photo {
    padding: 3rem 1.25rem;
  }
}

.vh-photo-placeholder {
  background: var(--vh-cream);
  border: 2px dashed var(--vh-brass-gold);
  border-radius: 0.75rem;
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vh-charcoal-navy);
  font-weight: 600;
  margin: 0 0 2.5rem;
}

/* Tabs underneath the hero (2026-10-04): Weddings & Parties, Corporate &
   Meetings and Community & Fundraising are three real, separately linkable
   pages sharing one layout, not JS-driven panels on one page — so these
   are plain links styled as tabs (marked with aria-current, not an ARIA
   tablist, since that pattern is for same-page panel-switching, which
   this isn't) rather than role="tab". The active page's tab is in the
   "reverse" treatment Rich asked for: solid charcoal-navy fill with cream
   text, the inverse of the inactive tabs' navy-on-transparent. */
.vh-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 2.5rem;
  border-bottom: 2px solid var(--vh-brass-gold);
}

.vh-tab {
  padding: 0.65rem 1.25rem;
  border-radius: 0.5rem 0.5rem 0 0;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--vh-charcoal-navy);
  background: transparent;
  transition: background 0.15s ease, color 0.15s ease;
}

.vh-tab:hover {
  background: rgba(10, 25, 47, 0.08);
}

.vh-tab--active,
.vh-tab--active:hover {
  background: var(--vh-charcoal-navy);
  color: var(--vh-cream);
}

/* What's included + pricing & enquiry, side by side, even split (2026-10-04, corrected to 50/50) */
.vh-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
  margin: 0 0 2.5rem;
}

.vh-info-grid .vh-amenities,
.vh-info-grid .vh-pricing {
  margin: 0;
  height: 100%;
}

@media (max-width: 760px) {
  .vh-info-grid {
    grid-template-columns: 1fr;
  }
}

/* Gallery (2026-10-04): shows the venue in use. Each page lists its own
   photos in front matter (galleryImages), padded with dashed-border
   placeholders until more are supplied — rendered by
   _includes/venue-gallery.liquid, shared by all three pages so they
   never drift out of sync with each other. Each photo is a button that
   opens the lightbox (see the Lightbox section below). */
.vh-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 0 0 2.5rem;
}

.vh-gallery img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 0.75rem;
  display: block;
}

/* Lightbox trigger (2026-10-05): the button is just a transparent wrapper
   so the thumbnail looks exactly as it did before, plus a pointer cue. */
.vh-gallery__item {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0.75rem;
  cursor: zoom-in;
  overflow: hidden;
}

.vh-gallery__item img {
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.vh-gallery__item:hover img {
  transform: scale(1.03);
  opacity: 0.92;
}

.vh-gallery__item:focus-visible {
  outline: 3px solid var(--vh-charcoal-navy);
  outline-offset: 3px;
}

.vh-gallery .vh-photo-placeholder {
  height: 220px;
  min-height: 0;
  margin: 0;
}

.vh-amenities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin: 0 0 2.5rem;
  padding: 2rem;
  background: #ffffff;
  border-radius: 0.75rem;
}

.vh-amenities h2 {
  grid-column: 1 / -1;
  margin: 0 0 0.5rem;
}

.vh-amenities ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.vh-amenities li {
  margin-bottom: 0.5rem;
  padding-left: 1.4rem;
  position: relative;
}

.vh-amenities li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--vh-brass-gold);
}

.vh-pricing {
  background: var(--vh-charcoal-navy);
  color: var(--vh-cream);
  border-radius: 0.75rem;
  padding: 2rem;
  margin: 0 0 2.5rem;
  text-align: center;
}

.vh-pricing h2 {
  color: var(--vh-cream);
  margin: 0 0 0.75rem;
}

.vh-pricing__price {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--vh-brass-gold);
  margin: 0 0 0.35rem;
}

.vh-pricing__note {
  margin: 0 0 1.25rem;
  font-size: 0.9rem;
  opacity: 0.85;
}

.vh-enquiry-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--vh-brass-gold);
  color: var(--vh-charcoal-navy);
  text-decoration: none;
  font-weight: 700;
  padding: 0.85rem 2rem;
  border-radius: 999px;
  transition: opacity 0.15s ease;
}

.vh-enquiry-cta__icon {
  flex-shrink: 0;
}

.vh-pricing__fallback {
  margin: 1rem 0 0;
  font-size: 0.9rem;
}

.vh-pricing__fallback a {
  color: var(--vh-brass-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.vh-pricing__fallback a:hover {
  color: var(--vh-cream);
}

.vh-pricing__fallback a:focus-visible,
.vh-enquiry-cta:focus-visible {
  outline: 3px solid var(--vh-cream);
  outline-offset: 3px;
  border-radius: 4px;
}

.vh-enquiry-cta:hover {
  opacity: 0.85;
}

/* Venue Hire microsite header & footer (2026-10-03, updated 2026-10-03):
   Rich asked for the Venue Hire pages to feel like more of a standalone
   "microsite" rather than a child section of the main club site. The
   header collapses the full About Us/Teams/Follow Us/Store nav down to
   a single link back to the main site, and the footer condenses to one
   line (club name, address, copyright, Privacy Notice — no logo image,
   no two-column layout). Scoped entirely to .site-header--vh/
   .footer-bottom--vh, which base.liquid only applies on /venue/
   URLs, so the rest of the site's header/nav/footer are completely
   untouched.

   Update: header and footer are now pinned to the same fixed height
   (--vh-bar-height) and the footer is position: fixed like the header
   already was (sticky) — Rich wanted both bars to read as identical,
   fixed-in-place strips, with the middle content area doing the visual
   work instead, a deliberately different balance from the main site's
   ordinary scrolling header/footer. .venue-theme main gets a
   matching padding-bottom so content never sits underneath the fixed
   footer. */

.site-header--vh {
  background: var(--vh-charcoal-navy);
  height: var(--vh-bar-height);
  display: flex;
  align-items: center;
}

.site-header--vh .site-header__inner {
  width: 100%;
  padding: 0 1.5rem;
}

.site-logo--vh .site-logo__mark {
  height: 34px;
  width: 34px;
}

.site-logo--vh .site-logo__text {
  font-size: 1.05rem;
  line-height: 1.2;
}

.site-logo__tagline {
  display: block;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vh-brass-gold);
}

.site-nav--vh {
  margin-left: 0;
}

.vh-back-to-club {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--vh-cream);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  opacity: 0.9;
}

.vh-back-to-club:hover {
  color: var(--vh-brass-gold);
  opacity: 1;
}

/* Phones (2026-10-13): the main site's "collapse the nav behind a hamburger"
   rule (max-width 760px) also hid this link, which lives in a .site-nav, so
   there was no way back to the club site. Show it again as a round back-arrow
   button at the top right (the words stay available to screen readers),
   inside the same 60px bar. The selectors start with .site-nav--vh so they
   beat the plain .site-nav and .site-nav a rules in the 760px block. */
@media (max-width: 760px) {
  .site-header--vh .site-header__inner {
    flex-wrap: nowrap;
    gap: 0.5rem;
  }

  .site-header--vh .site-logo--vh {
    min-width: 0;
  }

  .site-nav--vh {
    display: flex;
    flex: 0 0 auto;
    width: auto;
    padding: 0;
    background: none;
  }

  .site-nav--vh .vh-back-to-club {
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    opacity: 1;
  }

  .site-nav--vh .vh-back-to-club svg {
    width: 20px;
    height: 20px;
  }

  .site-nav--vh .vh-back-to-club:hover {
    border-color: var(--vh-brass-gold);
  }

  .vh-back-to-club__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

@media (max-width: 400px) {
  .site-logo--vh .site-logo__text {
    font-size: 0.9rem;
  }
}

.venue-theme main {
  padding-bottom: calc(var(--vh-bar-height) + 2rem);
}

.venue-theme .site-footer {
  background: var(--vh-charcoal-navy);
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  min-height: var(--vh-bar-height);
  margin-top: 0;
  padding: 0.4rem 0;
  z-index: 100;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-bottom--vh {
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding: 0 1.5rem;
  padding-top: 0;
  border-top: none;
}

.footer-bottom__condensed {
  margin: 0;
  font-size: 0.8rem;
  color: var(--vh-cream);
  opacity: 0.85;
  text-align: center;
  line-height: 1.4;
}

.footer-bottom__condensed strong {
  opacity: 1;
}

.footer-bottom--vh .footer-bottom__privacy-link {
  color: var(--vh-brass-gold);
}

.footer-bottom--vh .footer-bottom__privacy-link:hover,
.footer-bottom--vh .footer-bottom__privacy-link:focus-visible {
  color: var(--vh-cream);
}

@media (max-width: 640px) {
  .footer-bottom__condensed {
    text-align: left;
  }

  .venue-theme main {
    padding-bottom: calc(var(--vh-bar-height) + 3.5rem);
  }
}

/* Lightbox (2026-10-05): a native <dialog> (same approach as the privacy
   notice) opened by the gallery thumbnails. showModal() gives us the
   backdrop, Escape-to-close, a focus trap and an inert page behind it for
   free. The photo fills the viewport; the close X sits in the top right
   corner of the photo itself, and the previous/next arrows sit at the left
   and right edges of the screen. */
.vh-lightbox {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(10, 25, 47, 0.96);
  color: var(--vh-cream);
  overflow: hidden;
  /* Nothing in the lightbox should ever be selectable: clicking Next in
     quick succession counts as a double-click, which would otherwise select
     the photo and turn it blue, and that selection then carries over to
     every photo that follows. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.vh-lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.vh-lightbox::backdrop {
  background: rgba(10, 25, 47, 0.96);
}

/* The figure is sized to the photo's own aspect ratio (--ar, set from
   main.js as each photo is shown) and then as large as the viewport allows,
   so a photo scales up to fill the screen rather than stopping at its
   natural size, and the X can sit on the photo's own corner. */
.vh-lightbox__figure {
  --ar: 1.5;
  position: relative;
  margin: 0;
  line-height: 0;
  aspect-ratio: var(--ar);
  width: min(100vw, calc(100vh * var(--ar)));
  width: min(100vw, calc(100dvh * var(--ar)));
}

.vh-lightbox__img {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-user-drag: none;
}

.vh-lightbox__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgba(245, 241, 232, 0.35);
  border-radius: 50%;
  background: rgba(10, 25, 47, 0.7);
  color: var(--vh-cream);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.vh-lightbox__btn:hover,
.vh-lightbox__btn:focus-visible {
  background: var(--vh-brass-gold);
  border-color: var(--vh-brass-gold);
  color: var(--vh-charcoal-navy);
}

.vh-lightbox__btn:focus-visible {
  outline: 3px solid var(--vh-cream);
  outline-offset: 2px;
}

.vh-lightbox__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
}

.vh-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.vh-lightbox__nav--prev { left: 0.75rem; }
.vh-lightbox__nav--next { right: 0.75rem; }

@media (max-width: 640px) {
  .vh-lightbox__btn {
    width: 2.5rem;
    height: 2.5rem;
  }
}

/* Stops the page behind the lightbox scrolling while it's open. */
html.is-lightbox-open {
  overflow: hidden;
}

/* Venue Hire polish pass (2026-10-05) ----------------------------------

   Keyboard focus: the browser's default 1px dark ring disappears on the
   navy header, the navy active tab and the navy footer, so Venue Hire
   pages get a 3px ring that always contrasts with what it sits on —
   navy on the cream page, brass gold on the navy header and footer. The
   :where() wrappers give these rules zero extra specificity, so the more
   specific rings already defined for the pricing panel (cream) and the
   lightbox buttons still win. */
:where(.venue-theme) :where(a, button):focus-visible {
  outline: 3px solid var(--vh-charcoal-navy);
  outline-offset: 3px;
}

:where(.site-header--vh, .site-footer) :where(a, button):focus-visible {
  outline-color: var(--vh-brass-gold);
}

/* Bigger tap targets for the two links in the header. The bar is 60px
   tall, so 44px fits. */
.site-logo--vh,
.vh-back-to-club {
  min-height: 44px;
}

/* Narrow phones (320px wide is the WCAG reflow test): the long email
   address in the pricing panel can't wrap by itself, which pushed the
   whole page sideways. Let it break, let the grid children shrink, and
   trim the panels' padding. */
.vh-info-grid > * {
  min-width: 0;
}

.vh-pricing__fallback a {
  overflow-wrap: anywhere;
}

@media (max-width: 400px) {
  .vh-pricing,
  .vh-amenities {
    padding: 1.25rem;
  }
}

/* Respect "reduce motion" for the gallery's hover zoom. (The sponsor
   ticker is a deliberate, documented exception — see above.) */
@media (prefers-reduced-motion: reduce) {
  .vh-gallery__item img {
    transition: none;
  }

  .vh-gallery__item:hover img {
    transform: none;
  }
}

/* Home page (2026-10-05) -------------------------------------------------
   Hero, the "Find your team" finder, joining steps, team list, section
   tiles and the Venue Hire teaser. Classes are prefixed `home-`; the page
   itself is index.liquid and the finder's behaviour lives in main.js.
   Palette is the main club one (navy/gold); the Venue Hire band at the
   bottom deliberately borrows the Venue Hire sub-brand colours. */

.home-top,
.home-finder-section,
.home-steps,
.home-teams,
.home-explore {
  margin: 0 0 2.5rem;
}

.home-hero h1,
.home-steps h2,
.home-teams h2,
.home-explore h2 {
  margin-top: 0;
}

.home-steps h2,
.home-teams h2,
.home-explore h2 {
  color: var(--navy);
}

/* The header is sticky (80px tall on desktop, 64px on phones), so jumps to
   #find-your-team stop short of the section's top edge, leaving the title
   clear of the header instead of hidden behind it. */
.home-finder-section {
  scroll-margin-top: 6rem;
}

/* "Find your team" title sits above its panel, like the Sponsor spotlight's. */
.home-finder-section__heading {
  margin: 0 0 0.75rem;
  color: var(--navy);
}

/* Buttons shared by the hero, finder and venue band. 44px minimum height
   keeps them comfortable to tap. */
.home-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.65rem 1.5rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.home-btn--gold {
  background: var(--gold);
  color: var(--navy);
}

.home-btn--gold:hover {
  background: var(--off-white);
}

.home-btn--ghost {
  border-color: rgba(250, 250, 248, 0.65);
  color: var(--off-white);
}

.home-btn--ghost:hover {
  background: rgba(250, 250, 248, 0.14);
  border-color: var(--off-white);
}

.home-btn--navy {
  background: var(--navy);
  color: var(--off-white);
}

.home-btn--navy:hover {
  background: var(--gold);
  color: var(--navy);
}

.home-btn--brass {
  background: var(--vh-brass-gold);
  color: var(--vh-charcoal-navy);
}

.home-btn--brass:hover {
  background: var(--vh-cream);
}

:where(.home-finder, .home-teams, .home-explore, .home-steps) :where(a, button, input):focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}

.home-hero :where(a):focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.home-venue :where(a):focus-visible {
  outline: 3px solid var(--vh-brass-gold);
  outline-offset: 3px;
}

/* Hero: the club banner image with the hero panel directly beneath it, no
   gap and no rounded corners where they meet. The wrapper rounds (and
   clips) the outer corners of the pair. The wrapper's navy shows behind the
   image while it loads, so the fade-in comes up from the same colour as the
   panel below. Where scripting is on, the image starts invisible and the
   inline onload on the <img> adds .is-loaded; with scripting off it is
   simply visible. */
.home-top {
  --panel-lit: #1d4474;
  overflow: hidden;
  border-radius: 0.75rem;
  background: var(--navy);
}

/* The banner's bottom edge fades into the hero panel's colour. The overlay
   repeats the panel's own radial gradient (same colours, same horizontal
   radius and centre, so at its bottom edge it is exactly the colour of the
   panel's top edge, left to right) and is masked from transparent at the top
   to solid at the bottom. Kept short (5% of the banner's height, only close to solid over
   the last ~10 source pixels, which hold no text) so the benefit strip along
   the banner's bottom edge stays readable. */
.home-top__banner {
  position: relative;
}

.home-top__banner::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 5%;
  pointer-events: none;
  background: radial-gradient(120% 400% at 88% 100%, var(--panel-lit) 0%, var(--navy) 60%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.12) 58%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.12) 58%, #000 100%);
}

.home-top__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1894 / 696;
  transition: opacity 0.9s ease;
}

@media (scripting: enabled) {
  .home-top__img:not(.is-loaded) {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-top__img {
    transition: none;
  }
}

.home-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: 1.5rem 2rem;
  background: radial-gradient(120% 220% at 88% 0%, var(--panel-lit) 0%, var(--navy) 60%);
  color: var(--off-white);
}

.home-hero__text {
  flex: 1 1 24rem;
  min-width: 0;
}

.home-hero h1 {
  margin-bottom: 0.4rem;
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  line-height: 1.15;
  text-wrap: balance;
}

.home-hero__lead {
  margin: 0;
  max-width: 60ch;
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Finder */
.home-finder {
  background: var(--pale-navy);
  border-radius: 0.75rem;
  padding: 1.75rem;
}

.home-finder__intro,
.home-finder__fallback {
  margin: 0 0 1.25rem;
  max-width: 60ch;
}

.home-finder__form label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 700;
  color: var(--navy);
}

.home-finder__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.home-finder__row input {
  flex: 1 1 12rem;
  max-width: 16rem;
  min-height: 44px;
  padding: 0.5rem 0.85rem;
  border: 2px solid var(--navy);
  border-radius: 0.5rem;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

.home-finder__result:empty {
  display: none;
}

.home-finder__result {
  margin-top: 1.25rem;
}

.home-result {
  background: #fff;
  border: 2px solid var(--muted-gold);
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
}

.home-result h3 {
  margin: 0 0 0.5rem;
  color: var(--navy);
  font-size: 1.35rem;
}

.home-result p {
  margin: 0 0 0.6rem;
}

.home-result__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 1rem;
}

/* The "Also open at this age" heading: same look as the team title above it,
   set off from the main result by a rule and some space. */
.home-result h3.home-result__also {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--pale-navy);
}

.home-result__list {
  margin: 0.5rem 0 0;
  padding-left: 1.2rem;
}

.home-result a:not(.home-btn) {
  overflow-wrap: anywhere;
}

/* How joining works: a real sequence, so the steps are numbered. */
.home-steps__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.home-steps__list li {
  position: relative;
  min-width: 0;
  padding-top: 3.25rem;
  counter-increment: step;
}

.home-steps__list li::before {
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  font-weight: 700;
}

/* Teams */
.home-teams h3 {
  margin: 1.5rem 0 0.6rem;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
}

.home-teams__list,
.home-explore__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Five section tiles: a slightly narrower minimum so all five share one
   row at the full 1100px content width instead of leaving one on its own. */
.home-explore__list {
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
}

.home-team,
.home-tile {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  height: 100%;
  padding: 0.9rem 1rem;
  border-radius: 0.5rem;
  color: var(--navy);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.home-team {
  background: var(--pale-navy);
}

.home-tile {
  background: #fff;
  border: 1px solid #d3dbe6;
}

.home-team:hover,
.home-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 14px rgba(15, 42, 71, 0.14);
}

.home-team__name,
.home-tile__title {
  font-weight: 700;
}

.home-team__meta,
.home-tile__text {
  color: var(--ink);
  font-size: 0.9rem;
}

/* Venue Hire teaser: the sub-brand palette, so it reads as a different
   kind of offer from the club content around it. */
.home-venue {
  display: grid;
  grid-template-columns: 5fr 6fr;
  margin: 0 0 2.5rem;
  overflow: hidden;
  border-radius: 0.75rem;
  background: var(--vh-charcoal-navy);
  color: var(--vh-cream);
}

.home-venue__photo {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
}

.home-venue__text {
  align-self: center;
  min-width: 0;
  padding: 2rem 2.25rem;
}

.home-venue__kicker {
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vh-brass-gold);
}

.home-venue h2 {
  margin: 0 0 0.6rem;
  color: var(--vh-cream);
}

.home-venue p:not(.home-venue__kicker) {
  margin: 0 0 1.25rem;
}

/* "Join" button at the end of the main header nav. The extra class on the
   selector beats the plain nav-link and hover rules above it. */
.site-nav a.site-nav__join {
  min-height: 44px;
  padding: 0.4rem 1.1rem;
  border-radius: 999px;
  background: var(--gold);
  color: var(--navy);
  font-weight: 700;
}

.site-nav a.site-nav__join:hover {
  background: var(--off-white);
  color: var(--navy);
}

.site-header :where(a, button):focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

@media (max-width: 760px) {
  .site-nav a.site-nav__join {
    justify-content: center;
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    border-top: 0;
  }
}

@media (max-width: 700px) {
  .home-hero {
    padding: 1.25rem;
  }

  .home-finder {
    padding: 1.25rem;
  }

  .home-venue {
    grid-template-columns: 1fr;
  }

  .home-venue__photo {
    min-height: 0;
    height: 200px;
  }

  .home-venue__text {
    padding: 1.5rem 1.25rem;
  }
}

/* Phone header (2026-10-05): at 390px wide and below, the club name plus the
   menu button didn't fit on one row, so the button dropped under the logo
   and the header grew taller. A slightly smaller logo and name, and a bit
   less side padding, keep them on one line down to 320px. Main-site header
   only; the Venue Hire header has its own sizing. */
@media (max-width: 430px) {
  .site-header:not(.site-header--vh) .site-header__inner {
    padding: 0.75rem 1rem;
  }

  .site-header:not(.site-header--vh) .site-logo__mark {
    width: 40px;
    height: 40px;
  }

  .site-header:not(.site-header--vh) .site-logo__text {
    font-size: 1.05rem;
  }
}

@media (max-width: 350px) {
  .site-header:not(.site-header--vh) .site-logo {
    gap: 0.4rem;
  }

  .site-header:not(.site-header--vh) .site-logo__mark {
    width: 36px;
    height: 36px;
  }

  .site-header:not(.site-header--vh) .site-logo__text {
    font-size: 0.95rem;
  }
}

/* Sponsor spotlight: one sponsor picked at random per visit (main.js). Name,
   description and address on the left; logo on the right. Logos flagged
   "dark" in sponsors.json are made for a dark background, so their panel is
   navy; every other logo sits on white. */
.home-spotlight {
  margin: 0 0 2.5rem;
}

.home-spotlight__heading {
  margin: 0 0 0.75rem;
  color: var(--navy);
}

.home-spotlight :where(a):focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}

.home-spotlight__card {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(240px, 2fr);
  overflow: hidden;
  border: 1px solid var(--pale-navy);
  border-radius: 0.75rem;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 42, 71, 0.08);
}

/* With JavaScript on, hold the card back for a moment so the server-built
   sponsor never flashes before the random one replaces it. */
@media (scripting: enabled) {
  .home-spotlight__card:not(.is-ready) {
    visibility: hidden;
  }
}

.home-spotlight__text {
  align-self: center;
  min-width: 0;
  padding: 1.75rem 2rem;
}

.home-spotlight__name {
  margin: 0 0 0.5rem;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.15;
  color: var(--navy);
  overflow-wrap: anywhere;
}

.home-spotlight__desc {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  max-width: 52ch;
}

.home-spotlight__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
}

.home-spotlight__link:hover {
  text-decoration-thickness: 2px;
}

.home-spotlight__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  padding: 1.5rem 2rem;
  background: #fff;
  border-left: 1px solid var(--pale-navy);
}

.home-spotlight__logo img {
  display: block;
  width: 100%;
  max-width: 280px;
  height: 140px;
  object-fit: contain;
}

.home-spotlight__card--dark .home-spotlight__logo {
  background: var(--navy);
  border-left-color: var(--navy);
}

/* A sponsor with no logo: the text takes the full width. */
.home-spotlight__card:not(:has(.home-spotlight__logo)) {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 700px) {
  .home-spotlight__card {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-spotlight__text {
    padding: 1.25rem 1.25rem 0.75rem;
  }

  .home-spotlight__logo {
    min-height: 140px;
    padding: 1.25rem;
    border-left: 0;
    border-top: 1px solid var(--pale-navy);
  }

  .home-spotlight__card--dark .home-spotlight__logo {
    border-top-color: var(--navy);
  }
}

/* Visit Us: "Good to know" notes. Plain illustrated rows on the page background: no cards, borders or rules. */
.visit-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  column-gap: 3rem;
  row-gap: 2rem;
  margin: 1.5rem 0 2.5rem;
}

.visit-note {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.visit-note img {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
}

.visit-note h3 {
  margin: 0 0 0.25rem;
  color: var(--navy);
  font-size: 1.15rem;
}

.visit-note p {
  margin: 0;
}

.visit-closing {
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0;
}

@media (max-width: 760px) {
  .visit-notes {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
  }
  .visit-note img {
    width: 72px;
    height: 72px;
  }
  .visit-note {
    gap: 1rem;
  }
}

/* Facilities page (redesigned 2026-10-07). The hero reuses .home-top / .home-hero from the home page. */
.fac-hero__img {
  display: block;
  width: 100%;
  height: clamp(150px, 27vw, 285px);
  object-fit: cover;
  object-position: 40% center;
}

/* Hero panel in the calm "Find us" palette (pale navy, navy text) rather than the home page's dark navy: this is an information page, not the hook. */
.fac-hero {
  background: var(--pale-navy);
}

.fac-hero .home-hero {
  background: var(--pale-navy);
  color: var(--ink);
}

.fac-hero .home-hero h1 {
  color: var(--navy);
}

.fac-hero .home-hero :where(a):focus-visible {
  outline-color: var(--navy);
}

.home-btn--outline {
  border-color: var(--navy);
  color: var(--navy);
}

.home-btn--outline:hover {
  background: var(--navy);
  color: var(--off-white);
}

.fac-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem 2rem;
  margin: 2.5rem 0;
  padding: 0;
  list-style: none;
}

.fac-stats li {
  min-width: 0;
}

.fac-stats strong {
  display: block;
  color: var(--navy);
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.1;
}

.fac-stats strong::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 4px;
  margin: 0.35rem 0 0.5rem;
  border-radius: 2px;
  background: var(--gold);
}

.fac-stats span {
  display: block;
  line-height: 1.35;
}

.fac-section {
  margin: 0 0 3rem;
}

.fac-section h2,
.fac-cta h2 {
  margin-top: 0;
}

.fac-section h2 {
  color: var(--navy);
}

.fac-section h3 {
  margin: 0 0 0.25rem;
  color: var(--navy);
  font-size: 1.15rem;
}

.fac-clubhouse {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}

.fac-clubhouse__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
}

.fac-ticks {
  margin: 1rem 0 1.25rem;
  padding: 0;
  list-style: none;
}

.fac-ticks li {
  position: relative;
  margin-bottom: 0.5rem;
  padding-left: 1.9rem;
}

.fac-ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23F2B705' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5l2.7 2.7L12 5.5'/%3E%3C/svg%3E") center / 70% no-repeat;
}

.fac-pitches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem 2.5rem;
}

.fac-pitch img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 1rem;
  border-radius: 0.75rem;
}

.fac-pitch .fac-ticks {
  margin-bottom: 0;
}

.fac-rooms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem 2rem;
}

.fac-room {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.fac-room img {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
}

.fac-room p {
  margin: 0;
}

.fac-cta {
  border-radius: 0.75rem;
  padding: 2rem;
  background: var(--pale-navy);
  color: var(--ink);
}

.fac-cta h2 {
  margin-bottom: 0.5rem;
  color: var(--navy);
}

.fac-cta :where(a):focus-visible {
  outline-color: var(--navy);
}

@media (max-width: 760px) {
  .fac-clubhouse {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .fac-room img {
    width: 72px;
    height: 72px;
  }
  .fac-room {
    gap: 1rem;
  }
}

/* Contact buttons (2026-10-09): "Email us" / "Call us", used in the footer and on Follow Us. Built on .home-btn. */
.contact-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.contact-buttons .home-btn {
  gap: 0.5rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}