/* ============================= Header & navigation ============================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-navy);
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--header-height);
  /* Logo and search/login sit flush against the actual browser edges, so
     this opts out of .container's usual content-width-capped, centered,
     padded box entirely — not just its padding. */
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

/* Groups the hamburger, the member-login link and the search widget into a
   single flex item, always rendered last within .nav-bar, i.e. at the
   top-right. */
.nav-bar-end {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

@media (min-width: 1280px) {
  .nav-bar-end {
    gap: var(--space-4);
  }

  /* True centering for .primary-nav regardless of how wide the logo or the
     nav-bar-end group are: two equal 1fr tracks flank a content-sized
     middle track, so the middle track's midpoint is always the row's
     midpoint (unlike flex's space-between, which only centers the middle
     item when the two flanking items happen to be equal width). */
  .nav-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }

  .nav-bar-end {
    justify-self: end;
  }
}

.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  justify-self: start;
}

.logo img {
  height: 4.125rem;
  width: auto;
  /* Overrides base.css's global `img { max-width: 100% }` reset — without
     this, if .logo's grid track (>=1280px, see .nav-bar) or flex space
     (<1280px) ever computes narrower than the logo's natural ~205px width,
     the browser clamps width down to fit while height stays fixed at
     4.125rem, distorting (squishing) the image instead of just shrinking
     it proportionally. */
  max-width: none;
}

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

.nav-toggle-bar {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--color-white);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.primary-nav {
  position: fixed;
  inset: var(--header-height) 0 0 0;
  background: var(--color-navy);
  overflow-y: auto;
  padding: var(--space-3);
  transform: translateX(100%);
  transition: transform 0.25s ease;
}

.primary-nav.is-open {
  transform: translateX(0);
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.nav-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.nav-item-row > a {
  display: block;
  padding: var(--space-2) 0;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 600;
  font-variant: small-caps;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.nav-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease;
}

.nav-item-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--color-white);
  width: 2.5rem;
  height: 2.5rem;
  /* The ▾ glyph renders at roughly 0.46× its font-size in this font stack —
     much shorter than a capital letter's cap-height (~0.67× its font-size) —
     so this is deliberately larger than the menu item's own text size to
     make the two appear visually comparable, not a mismatch. */
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.nav-item.is-open .nav-item-toggle {
  transform: rotate(180deg);
}

.nav-dropdown {
  list-style: none;
  margin: 0 0 var(--space-2);
  padding-left: var(--space-2);
  background: var(--color-navy);
  display: none;
}

.nav-item.is-open .nav-dropdown {
  display: block;
}

.nav-dropdown a {
  display: block;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  font-size: var(--step--1);
  transition: background-color 0.15s ease;
}

.nav-dropdown a:hover,
.nav-dropdown a:focus-visible {
  background-color: rgba(255, 255, 255, 0.14);
}

@media (min-width: 1280px) {
  .nav-toggle {
    display: none;
  }

  .primary-nav {
    position: static;
    inset: auto;
    background: transparent;
    padding: 0;
    overflow: visible;
    transform: none;
    transition: none;
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }

  .nav-list {
    flex-direction: row;
    align-items: center;
    gap: 0;
  }

  .nav-item {
    position: relative;
    border-bottom: 0;
  }

  .nav-item-row {
    display: flex;
    align-items: center;
    /* Horizontal padding is squeezed at the 1280px breakpoint (where space
       is tightest) and grows back to its full size by ~1440px. */
    padding: 0.4rem clamp(0.45rem, -0.75rem + 1.5vw, 0.6rem) 0.4rem
      clamp(0.6rem, -1.4rem + 2.5vw, 0.85rem);
  }

  .nav-item-row:hover,
  .nav-item:focus-within .nav-item-row {
    background-color: rgba(255, 255, 255, 0.14);
  }

  .nav-item-row > a {
    padding: 0;
    font-size: var(--nav-font);
    white-space: nowrap;
  }

  .nav-item-toggle {
    width: 1.5rem;
    height: 1.5rem;
    margin-left: 0.35rem;
    font-size: 0.7rem;
  }

  .nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 14rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--space-2);
    z-index: 10;
  }

  .nav-item.is-open .nav-dropdown,
  .nav-item:hover .nav-dropdown,
  .nav-item:focus-within .nav-dropdown {
    display: block;
  }
}

/* ============================= Member login ============================= */

/* Styled like a .nav-item-row > a link (same font/weight/small-caps/
   letter-spacing, and the same font-size at each breakpoint) but in the cta
   yellow (--color-yellow), with a person icon to its left — sits
   immediately left of the search icon in .nav-bar-end. */
.member-login {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm);
  color: var(--color-yellow);
  font-family: var(--font-heading);
  font-weight: 600;
  font-variant: small-caps;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.member-login:hover,
.member-login:focus-visible {
  background-color: rgba(255, 255, 255, 0.14);
}

.icon-person {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
}

@media (min-width: 1280px) {
  .member-login {
    font-size: var(--nav-font);
  }
}

/* Below this, .nav-toggle + full member-login (icon+label) + search-toggle
   don't all fit alongside the logo without overflowing the viewport (this is
   what was pushing the search icon off-screen on narrow phones) — drop the
   "Login" text and keep just the person icon to claw back width. */
@media (max-width: 480px) {
  .nav-bar {
    gap: var(--space-1);
  }

  .nav-bar-end {
    gap: var(--space-1);
  }

  .member-login {
    padding: 0.4rem;
    gap: 0;
  }

  .member-login-label {
    display: none;
  }
}

/* ============================= Search ============================= */

.site-search {
  position: relative;
}

.search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-white);
  cursor: pointer;
}

.icon-search {
  width: 1.15rem;
  height: 1.15rem;
}

/* Icon-only until clicked, at every breakpoint — a permanently visible
   inline bar didn't fit alongside the full desktop nav without widening the
   header, so search opens as a dropdown here the same way it does on
   mobile. */
.search-bar {
  display: none;
}

.search-bar.is-open {
  display: block;
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: min(90vw, 20rem);
  background: var(--color-navy);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 60;
}

.search-form {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding-inline-start: 0.9rem;
}

.search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--color-white);
  padding: 0.5rem 0;
  font-family: inherit;
  font-size: var(--step--1);
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.65);
}

.search-input:focus {
  outline: none;
}

/* Removes the default WebKit "clear" (x) affordance so it doesn't collide
   with the search icon button that follows it. */
.search-input::-webkit-search-cancel-button {
  display: none;
}

.search-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-white);
  cursor: pointer;
}

.search-submit:hover,
.search-submit:focus-visible {
  background: rgba(255, 255, 255, 0.18);
}

.search-results {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--color-white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.search-results[hidden] {
  display: none;
}

.search-results li + li {
  border-top: 1px solid var(--color-border);
}

.search-results a {
  display: block;
  padding: 0.6rem 0.8rem;
  text-decoration: none;
}

.search-results a:hover,
.search-results a:focus-visible {
  background: var(--color-surface-alt);
}

.search-result-title {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--step--1);
  color: var(--color-ink);
}

.search-result-snippet {
  display: block;
  font-size: 0.8rem;
  color: var(--color-ink-soft);
  margin-top: 0.15rem;
}

.search-result-snippet mark {
  background: none;
  color: var(--color-accent-dark);
  font-weight: 600;
}

.search-no-results {
  padding: 0.6rem 0.8rem;
  font-size: var(--step--1);
  color: var(--color-ink-soft);
}

/* ============================= Buttons ============================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.5em;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  font-size: var(--step--1);
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-white);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--color-accent-dark);
  color: var(--color-white);
}

.btn-outline {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}

.btn-outline:hover,
.btn-outline:focus-visible {
  background: rgba(255, 255, 255, 0.12);
}

/* Call-to-action style: used for links/buttons flagged as a "CTA" — white,
   6px corners, a narrow gold border that shades gently from light to deeper
   gold, navy text and a soft shadow; fills gold with black text on hover.
   The gradient border is a second background painted under the border
   (border-box) with the white fill clipped to the padding-box on top. */
.btn-cta {
  background:
    linear-gradient(var(--color-white), var(--color-white)) padding-box,
    linear-gradient(135deg, #f8d653, var(--color-yellow) 50%, #dcab0c) border-box;
  color: var(--color-navy);
  border-color: transparent;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 20, 50, 0.06), 0 3px 8px rgba(0, 20, 50, 0.06);
}

.btn-cta:hover,
.btn-cta:focus-visible {
  background:
    linear-gradient(var(--color-yellow), var(--color-yellow)) padding-box,
    linear-gradient(135deg, #f8d653, var(--color-yellow) 50%, #dcab0c) border-box;
  color: #14110a;
}

/* ============================= Hero ============================= */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(38rem, 85vh);
  color: var(--color-white);
  overflow: hidden;
  padding-block: var(--space-6);
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero-media video,
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 23, 61, 0.55), rgba(0, 23, 61, 0.75));
}

.hero-content {
  max-width: 42rem;
}

.hero h1 {
  color: var(--color-white);
  margin-bottom: var(--space-3);
}

.hero p {
  font-size: var(--step-1);
  margin-bottom: var(--space-4);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Simple hero for interior/content pages (image, no video) */

.page-hero {
  position: relative;
  color: var(--color-white);
  padding-block: var(--space-6);
  overflow: hidden;
}

.page-hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.page-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 30, 74, 0.65);
}

.page-hero h1 {
  color: var(--color-white);
  margin: 0;
}

.page-hero .meta {
  margin-top: var(--space-2);
  font-size: var(--step-0);
  opacity: 0.9;
}

/* Compact variant (page2.njk) — a plain navy title strip with no hero
   image, taking up noticeably less vertical space than the standard
   .page-hero: less padding, and a smaller heading size than the h1
   default. */
.page-hero-compact {
  padding-block: var(--space-3);
}

.page-hero-compact h1 {
  font-size: var(--step-3);
}

.page-hero-compact .meta {
  margin-top: var(--space-1);
  font-size: var(--step--1);
}

/* Full-bleed image sections (page2.njk's headImage/tailImage) — no
   .container wrapper, so the image runs edge-to-edge at the page's full
   visible width and simply scales with it (img/picture already default to
   width:100%/height:auto via base.css). No vertical padding or the usual
   section-to-section divider, so the image sits flush against the
   sections above and below it. */
.page-media {
  padding-block: 0;
  border-top: 0;
}

.page-media picture,
.page-media img {
  display: block;
  width: 100%;
}

/* video gets its own rule (rather than joining the picture/img selector
   above): explicit height:auto + object-fit:contain, so it always scales to
   the full page width with its height adapting to preserve the source
   video's aspect ratio. (A head video is the exception: it's height-capped
   and cropped by the .page-media--head rule below.) */
.page-media video {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* headImage/headVideo (but not tailImage): capped in height so a tall
   image doesn't push the page content off a wide screen (see
   --head-image-fit in tokens.css). One that fits at full width runs edge
   to edge as normal; a taller one still runs edge to edge but is cropped
   to the cap. The crop point defaults to "center 30%" (less trimmed off
   the top than the bottom); a page can move it with headImagePosition in
   its front matter, which page.njk passes in as --head-image-position. */
.page-media--head img,
.page-media--head video {
  height: auto;
  max-height: calc(
    var(--head-image-fit) *
      (100svh - var(--header-height) - var(--head-image-title-allowance))
  );
  object-fit: cover;
  object-position: var(--head-image-position, center 30%);
}

/* ============================= Prose grid (listFrom shortcode) ============================= */
/* An arbitrary number of rows, each pairing prose text with a square image,
   alternating which side the image sits on from row to row. */

.prose-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-bottom: var(--space-4);
}

.prose-grid-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 960px) {
  .prose-grid-row {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: var(--space-6);
  }

  /* Sides alternate row-to-row — .is-reversed is added to every other row in
     partials/grid.njk. Only meaningful once the row is a real two-column grid, so
     it's scoped to this breakpoint: single-column mobile always shows text
     then image, in document order, regardless of which row it is. */
  .prose-grid-row.is-reversed .prose-grid-text {
    order: 2;
  }
}

.prose-grid-image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.prose-grid-image picture,
.prose-grid-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Overrides .prose img's margin-block (base.css) — that spacing is meant
     for a standalone image sitting in the vertical flow of body text, and
     here would shift the image down inside this fixed-aspect-ratio box
     (clipped by overflow:hidden), breaking the top-edge alignment with
     .prose-grid-text. */
  margin-block: 0;
}

/* ============================= CTA row (text + button) ============================= */
/* A short paragraph paired with one or more CTA buttons, laid out as a
   table would (a fixed-width text column, buttons left-aligned in a second
   column right after it — so the button column starts at the same x on
   every row, rather than trailing wherever that row's particular text
   happens to end) — but done with grid rather than a real <table> so it can
   collapse to a single stacked column below the breakpoint, flowing the
   button(s) under the text, which a table can't do without extra markup/JS.
   40rem needs a wider breakpoint than a narrower column would (raised from
   960px, where .prose is only ~717px wide — too little left over for the
   widest button group, Racing + Results, alongside a 640px-wide first
   column) — 1200px is where .prose's own width plateaus at ~909px (both
   capped by base.css's .container and this file's .prose rule), leaving a
   comfortable margin for that button group without wrapping.
   Authored as a raw <div class="cta-row"> in Markdown, directly wrapping
   the paragraph and a {{ ctaButton(...) }} call — both render as plain <p>
   elements, which become this row's grid items with no extra wrapper
   markup needed. */
.cta-row {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.cta-row > p {
  margin: 0;
}

/* Text of more than one paragraph goes in a plain <div>, so that it's
   still one grid item beside the button. */
.cta-row > div > p:last-child {
  margin-bottom: 0;
}

@media (min-width: 1200px) {
  .cta-row {
    grid-template-columns: 40rem auto;
    align-items: center;
    gap: var(--space-4);
  }
}

/* ============================= Cards & grids ============================= */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card:hover,
.card:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.card img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.card-body {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
}

.card-body h3 {
  font-size: var(--step-1);
  margin: 0;
}

.card-meta {
  font-size: var(--step--1);
  color: var(--color-ink-soft);
}

/* ============================= Section helpers ============================= */

.section-alt {
  background: var(--color-surface-alt);
}

.section-navy {
  background: var(--color-navy);
  color: var(--color-white);
}

.section-navy h2,
.section-navy h3 {
  color: var(--color-white);
}

.section-header {
  max-width: var(--prose-width);
  margin-bottom: var(--space-4);
}

/* ============================= Forms ============================= */

.form-notice {
  background: #fff8e6;
  border: 1px solid #f2d98a;
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
  font-size: var(--step--1);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-3);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}

.form-field.full-width {
  grid-column: 1 / -1;
}

label {
  font-weight: 600;
  font-size: var(--step--1);
}

input,
textarea {
  font: inherit;
  padding: 0.65em 0.8em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-ink);
}

input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 1px;
}

fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}

legend {
  font-weight: 600;
  font-size: var(--step--1);
  padding-inline: 0.3em;
}

.checkbox-option {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 400;
  margin-block: 0.35em;
}

.checkbox-option input {
  width: auto;
}

/* ============================= Blog post ============================= */

.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--step--1);
  color: var(--color-ink-soft);
  margin-bottom: var(--space-4);
}

.lightbox-trigger {
  border: 0;
  padding: 0;
  background: none;
  cursor: zoom-in;
}

.lightbox-dialog {
  border: 0;
  padding: 0;
  max-width: min(90vw, 60rem);
  max-height: 90vh;
  background: transparent;
}

.lightbox-dialog::backdrop {
  background: rgba(0, 10, 30, 0.85);
}

.lightbox-dialog img {
  max-height: 90vh;
}

.recent-posts {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.recent-posts-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

/* ============================= Results tree ============================= */
/* Nested event > sub-event > class list, e.g. Racing Results. Top-level
   events lose their bullet (they're bold labels, not links) and get a
   divider between them; deeper levels keep normal nested-list bullets. */

.results-tree li {
  list-style: none;
}

.results-tree > ul {
  padding-left: 0;
}

.results-tree > ul > li {
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.results-tree > ul > li:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.results-tree > ul > li > ul {
  margin-top: var(--space-2);
}

/* The innermost list (no further nested list inside it) is the row of
   individual class/result links — lay it out horizontally, wrapping as the
   page width requires, with a thin divider between each link. */
.results-tree ul:not(:has(ul)) {
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.5rem;
}

.results-tree ul:not(:has(ul)) li:not(:last-child) {
  padding-right: 0.85rem;
  margin-right: 0.85rem;
  border-right: 1px solid var(--color-border);
}

/* ============================= Opening hours ============================= */
/* Live "Club open, Reception closed, ..." line, computed and filled in by
   src/js/opening-status.js — see opening-hours.md's `hours:` front matter. */

.opening-status {
  font-weight: 600;
  margin-bottom: var(--space-3);
}

/* Dark shades (not the usual bright green/red/orange) for readable contrast
   against the page's white background. */
.opening-status-item.is-open {
  color: #1a7a37;
}

.opening-status-item.is-closed {
  color: #b3261e;
}

.opening-status-item.is-closing-soon {
  color: #b45309;
}

/* ============================= Contact page ============================= */

.contact-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: var(--space-2) 0 var(--space-5);
  padding: 0;
  list-style: none;
}

.contact-social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: var(--color-surface-alt);
  color: var(--color-navy);
}

.contact-social-links a:hover {
  background: var(--color-border);
}

.contact-social-links .icon-social {
  width: 1.1rem;
  height: 1.1rem;
}

.affiliations-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-navy);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-2) 0 var(--space-5);
}

.affiliations-panel img {
  height: 3rem;
  width: auto;
  display: block;
}

/* Row of small external-partner logo cards (front-matter driven — `imageLinks`
   in page.njk). Each card is a single <a> so the whole 150px tile is
   clickable, not just the image or label text. */
.partner-logos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-2) 0 var(--space-5);
}

.partner-logos-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 150px;
  flex: 0 0 150px;
  gap: var(--space-1);
  text-decoration: none;
  color: var(--color-ink);
  text-align: center;
}

.partner-logos-image {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4rem;
  width: 100%;
  padding: var(--space-1);
}

.partner-logos-image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  /* Overrides .prose img's margin-block (base.css) — that spacing is meant
     for a standalone image in the vertical flow of body text, and here
     would push the image off-center within this fixed-height flex box. */
  margin-block: 0;
}

.partner-logos-label {
  font-size: var(--step--1);
  color: var(--color-ink-soft);
}

/* ============================= Race cards (image + overlaid link) ============================= */

/* Three linked images (Racing & Regattas' sub-pages) side by side, each
   card's page name overlaid centrally on the image in cta yellow. The whole
   card, image and label, is a single <a> — the label is a child of it, not
   a separate element next to it. */
.race-cards {
  display: flex;
  flex-wrap: wrap;
}

.race-card {
  position: relative;
  display: block;
  margin: 2px;
  flex: 1 1 240px;
  text-decoration: none;
}

.race-card picture,
.race-card img {
  display: block;
  width: 100%;
  height: auto;
  /* Overrides .prose img's margin-block (base.css) — that spacing is meant
     for a standalone image in body text, and here would offset the image
     within its card. */
  margin-block: 0;
}

.race-card-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-2);
  font-family: var(--font-heading);
  font-weight: 600;
  /* Matches .prose h1's size (a markdown single-# heading). */
  font-size: calc(var(--step-0) * 1.728);
  color: var(--color-yellow);
}

.map-embed {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: var(--space-2) 0 var(--space-5);
}

.map-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Same responsive-embed pattern as .map-embed, but a 16:9 video-style ratio
   rather than a 4:3 map — used for the LiveCam page's <iframe>. */
.video-embed {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: var(--space-2) 0 var(--space-5);
}

.video-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ============================= Footer ============================= */

.site-footer {
  background: var(--color-navy);
  color: rgba(255, 255, 255, 0.85);
  padding-block: var(--space-1) 0.7rem;
  box-shadow: 0 -2px 10px rgba(0, 20, 50, 0.2);
}

/* Wider than the standard .container content column — the footer has its
   own two clusters (contact/legal text, and the accreditation logos) that
   need clear separation, so it's given more room to spread them apart
   rather than squeezing both into the same width every other page section
   uses. From 640px up they sit side by side as two grid columns: the text
   block takes the remaining space (1fr) and the logos take exactly what
   they need (auto), so there's no manual width math to keep in sync and no
   risk of the two overlapping. */
.footer-inner {
  max-width: 90rem;
  padding-inline: var(--space-4);
}

@media (min-width: 640px) {
  .footer-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: var(--space-6);
  }
}

.footer-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
}

.footer-contact {
  margin: 0;
  font-size: var(--step--1);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
}

.footer-contact a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}

.footer-contact a:hover {
  color: var(--color-white);
  text-decoration: underline;
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-white);
}

.social-links a:hover {
  background: rgba(255, 255, 255, 0.22);
}

.icon-social {
  width: 0.8rem;
  height: 0.8rem;
}

.footer-bottom {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: var(--step--1);
}

.footer-bottom a {
  color: rgba(255, 255, 255, 0.85);
}

.footer-bottom a:hover {
  color: var(--color-white);
}

/* On narrow screens this simply flows below .footer-main as its own row
   (see .footer-inner above). From 640px up it becomes the grid's second
   column, at the far right of the (now wider) footer, vertically centered
   against the text column beside it. */
.footer-accreditations {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.footer-accreditations img {
  height: 2.25rem;
  width: auto;
  display: block;
}

@media (min-width: 640px) {
  .footer-accreditations {
    margin: 0;
  }
}