/*
Theme Name: NM Squash
Theme URI: https://nmsquash.com
Author: Snowcha Design
Author URI: https://snowchadesign.com
Description: Custom theme for the New Mexico Squash Racquets Association. Classic PHP templates with block editor support for content.
Version: 7.2.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: nmsquash
Tags: custom, sports, blog
*/

/* ============================================================
   FONTS
   Loaded from the theme, not the WordPress Font Library. Drop the
   woff2 files into /fonts/ and they work. See fonts/README.txt.
   ============================================================ */
@font-face {
  font-family: "Fjalla One";
  src: url("../../uploads/fonts/fjalla-one.woff2") format("woff2"),
       url("../../uploads/fonts/fjalla-one.ttf") format("truetype"),
       url("fonts/fjalla-one.woff2") format("woff2"),
       url("fonts/fjalla-one.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../../uploads/fonts/barlow-400.woff2") format("woff2"),
       url("../../uploads/fonts/barlow-400.ttf") format("truetype"),
       url("fonts/barlow-400.woff2") format("woff2"),
       url("fonts/barlow-400.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../../uploads/fonts/barlow-600.woff2") format("woff2"),
       url("../../uploads/fonts/barlow-600.ttf") format("truetype"),
       url("fonts/barlow-600.woff2") format("woff2"),
       url("fonts/barlow-600.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   TOKENS
   Change these first. Almost everything else follows.
   ============================================================ */
:root {
  --nms-ink:        #16181a;
  --nms-ink-soft:   #5b6167;
  --nms-paper:      #ffffff;
  --nms-wall:       #f2f2ef;   /* court wall off-white */
  --nms-wall-deep:  #e4e4df;
  --nms-line:       #8d2424;   /* the red court line */
  --nms-line-dark:  #6d1b1b;
  --nms-floor:      #caa172;   /* maple */
  --nms-active:     #b0522a;   /* nav active, rust */

  --nms-font-display: "Fjalla One", sans-serif;
  --nms-font-body:    "Barlow", "Helvetica Neue", Arial, sans-serif;
  --nms-font-nav:     "Fjalla One", sans-serif;

  --nms-logo-max: 100%;     /* masthead logo width; set a px value to cap it */
  --nms-content: 1100px;
  --nms-wide:    1440px;
  --nms-gutter:  clamp(1rem, 4vw, 2.5rem);

  --nms-rule: 3px;
  --nms-rule-hair: #b9b9b2;

  /* masthead */
  --nms-mast-bg:    #e8e8e3;   /* grey behind the wordmark */
  --nms-nav-active: #b5502a;   /* rust on the current page */
  --nms-nav-rule:   #a9a9a3;
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
img, picture, video { max-width: 100%; height: auto; display: block; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--nms-font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--nms-ink);
  background: var(--nms-paper);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--nms-line); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--nms-line-dark); }

:focus-visible {
  outline: 3px solid var(--nms-line);
  outline-offset: 2px;
}

/* ============================================================
   TYPE
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--nms-font-display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--nms-ink);
}
h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.35rem, 2.5vw, 1.75rem); }
h4 { font-size: 1.2rem; }

p + p, p + ul, p + ol, p + h2, p + h3 { margin-top: 1.1em; }
h2 + p, h3 + p { margin-top: 0.5em; }

/* ============================================================
   LAYOUT
   ============================================================ */
.nms-wrap {
  width: 100%;
  max-width: var(--nms-content);
  margin-inline: auto;
  padding-inline: var(--nms-gutter);
}
.nms-wrap--wide { max-width: var(--nms-wide); }

.nms-main { padding-block: clamp(2rem, 5vw, 4rem); }

/* The page header already carries its own padding, so main should not
   add a second helping underneath it. Applies to single posts, pages,
   archives and search. */
.nms-pagehead + .nms-main { padding-block-start: clamp(1.25rem, 2.5vw, 2rem); }

/* Front page has no page header, and the banner should sit close to
   the navigation. */
.home .nms-main { padding-block-start: 0; }

.nms-layout {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
}

/* Grid and flex children default to min-width:auto, so they refuse to
   shrink below the intrinsic width of their content. A 1200px photo
   then forces the whole column wider than the screen. */
.nms-layout > * { min-width: 0; }
@media (min-width: 60rem) {
  .nms-layout--sidebar { grid-template-columns: minmax(0,1fr) 18rem; }
}

/* ============================================================
   HEADER
   Logo lockup on its own row, navigation below it between two
   hairline rules. The masthead sits on the court-wall grey so the
   white active-nav box has something to read against.
   ============================================================ */
.nms-header {
  background: var(--nms-wall);
}
.nms-header__inner {
  padding-block: clamp(1.5rem, 4vw, 3rem) 0;
}

.nms-brand {
  display: block;
  text-decoration: none;
  max-width: var(--nms-logo-max);
}
.nms-brand img {
  width: 100%;
  height: auto;
  max-height: none;
}

/* text fallback if no logo image is set */
.nms-brand__text {
  font-family: var(--nms-font-display);
  font-size: clamp(1.9rem, 6vw, 4.5rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 0.92;
  color: var(--nms-ink);
  display: block;
}
.nms-brand__tag {
  display: block;
  font-family: var(--nms-font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nms-ink-soft);
  margin-top: 0.6rem;
}

/* ---- navigation ---- */
.nms-navbar { background: var(--nms-wall); }
.nms-navbar__inner {
  border-top: 1px dotted #9a9a92;
  border-bottom: 1px dotted #9a9a92;
  margin-top: clamp(1.25rem, 3vw, 2.25rem);
}

.nms-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.5rem, 3vw, 3rem);
}
.nms-nav li { position: relative; }

.nms-nav a {
  display: block;
  padding: 0.85rem 1.1rem;
  font-family: var(--nms-font-nav);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--nms-ink);
  text-decoration: none;
}
.nms-nav a:hover { color: var(--nms-active); }

.nms-nav .current-menu-item > a,
.nms-nav .current_page_item > a,
.nms-nav .current-menu-ancestor > a,
.nms-nav .current-page-ancestor > a {
  background: var(--nms-paper);
  color: var(--nms-active);
}

.nms-nav .sub-menu {
  display: none;
  position: absolute;
  top: 100%; left: 0; right: auto;
  width: 14rem;
  background: var(--nms-paper);
  border: 1px solid var(--nms-wall-deep);
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  z-index: 60;
  flex-direction: column;
  gap: 0;
  padding: 0.3rem 0;
}
.nms-nav li:hover > .sub-menu,
.nms-nav li:focus-within > .sub-menu { display: flex; }
.nms-nav .sub-menu a { padding: 0.5rem 0.9rem; font-size: 1rem; white-space: normal; }

/* Third level stacks inside the same panel rather than flying out to
   the side, which was running off the edge of the screen. */
.nms-nav .sub-menu .sub-menu {
  display: flex;
  position: static;
  min-width: 0;
  border: none;
  box-shadow: none;
  background: transparent;
  padding: 0 0 0.25rem;
}
.nms-nav .sub-menu .sub-menu a {
  padding-left: 1.6rem;
  font-size: 0.95rem;
  color: var(--nms-ink-soft);
}
.nms-nav .sub-menu .sub-menu a:hover { color: var(--nms-line); }



.nms-nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--nms-ink-soft);
  padding: 0.55rem 0.9rem;
  margin: 0.7rem 0;
  font-family: var(--nms-font-display);
  font-size: 1rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  color: var(--nms-ink);
}

@media (max-width: 60rem) {
  .nms-nav-toggle { display: block; }

  .nms-nav { display: none; }
  .nms-nav.is-open { display: block; padding-bottom: 0.6rem; }

  .nms-nav ul { flex-direction: column; justify-content: flex-start; gap: 0; }
  .nms-nav a {
    padding: 0.75rem 0.4rem;
    border-bottom: 1px dotted var(--nms-wall-deep);
    white-space: normal;
  }

  /* everything stacks; no flyouts on a phone */
  .nms-nav .sub-menu,
  .nms-nav .sub-menu .sub-menu,
  .nms-nav > ul > li:first-child .sub-menu {
    display: flex;
    position: static;
    left: auto;
    right: auto;
    min-width: 0;
    border: none;
    box-shadow: none;
    padding: 0 0 0 1.1rem;
    background: transparent;
  }
  .nms-nav .sub-menu .sub-menu a { padding-left: 1.1rem; }
}

/* ============================================================
   BANNER
   Used on the news index when the posts page has a featured image.
   Replaces the text page header rather than sitting above it.
   ============================================================ */
.nms-banner { padding-block: clamp(1rem, 3vw, 2rem) 0; }
.nms-banner img { width: 100%; height: auto; display: block; }

.nms-blogintro { padding-top: clamp(1rem, 3vw, 2rem); }

/* ============================================================
   PAGE HEADER
   ============================================================ */
.nms-pagehead { background: var(--nms-wall); padding-block: clamp(2rem, 5vw, 3.5rem); }
.nms-pagehead h1 { margin: 0; }
.nms-pagehead__meta {
  font-family: var(--nms-font-body);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nms-ink-soft);
  margin-bottom: 0.7rem;
}

/* ============================================================
   POSTS
   ============================================================ */
.nms-intro { margin-bottom: 2.5rem; }
.nms-postlist { display: grid; gap: 2.5rem; }
.nms-card { border-bottom: 1px solid var(--nms-wall-deep); padding-bottom: 2.25rem; }
.nms-card:last-child { border-bottom: none; }
.nms-card__thumb { margin-bottom: 1rem; }
.nms-card__thumb img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.nms-card h2 { margin-bottom: 0.4rem; }
.nms-card h2 a { color: var(--nms-ink); text-decoration: none; }
.nms-card h2 a:hover { color: var(--nms-line); }
.nms-meta {
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nms-ink-soft);
  margin-bottom: 0.6rem;
}
.nms-meta a { color: var(--nms-ink-soft); }
.nms-more {
  display: inline-block;
  margin-top: 0.9rem;
  font-family: var(--nms-font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.95rem;
  text-decoration: none;
  border-bottom: 2px solid var(--nms-line);
  padding-bottom: 2px;
}

/* ============================================================
   ENTRY CONTENT / BLOCK EDITOR OUTPUT
   ============================================================ */
.nms-content > * { max-width: 100%; margin-inline: auto; }
.nms-content > .alignwide {
  max-width: var(--nms-wide);
  width: calc(100vw - (2 * var(--nms-gutter)));
}
.nms-content > .alignfull { max-width: none; margin-inline: calc(50% - 50vw); width: 100vw; }
.nms-content > * + * { margin-top: 1.35rem; }
.nms-content > h2 { margin-top: 2.4rem; }
.nms-content > h3 { margin-top: 1.9rem; }

.nms-content ul, .nms-content ol { padding-left: 1.4rem; }
.nms-content li + li { margin-top: 0.35rem; }

.nms-content blockquote {
  border-left: var(--nms-rule) solid var(--nms-line);
  padding-left: 1.2rem;
  font-size: 1.15rem;
}

.nms-content table { width: 100%; border-collapse: collapse; }
.nms-content th, .nms-content td {
  text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--nms-wall-deep);
}
.nms-content th { font-family: var(--nms-font-display); text-transform: uppercase; letter-spacing: 0.04em; }

.nms-content figcaption {
  font-size: 0.85rem;
  color: var(--nms-ink-soft);
  margin-top: 0.5rem;
  line-height: 1.45;
}

/* galleries: square crops read better for tournament photo sets */
.wp-block-gallery.has-nested-images figure.wp-block-image img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }

/* buttons */
.wp-block-button__link, .nms-btn {
  display: inline-block;
  background: var(--nms-line);
  color: #fff;
  font-family: var(--nms-font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.75rem 1.6rem;
  border-radius: 0;
  text-decoration: none;
  border: none;
}
.wp-block-button__link:hover, .nms-btn:hover { background: var(--nms-line-dark); color: #fff; }
.is-style-outline .wp-block-button__link {
  background: transparent; color: var(--nms-line); border: 2px solid var(--nms-line);
}

/* ============================================================
   GALLERY SLIDESHOW
   Applied when a Gallery block is set to the Slideshow style.
   Large stage, thumbnail strip beneath. Manual only.
   ============================================================ */
/* core styles .wp-block-gallery.has-nested-images with display:flex,
   which outranks a single class, so this needs the extra weight */
.wp-block-gallery.nms-slider__source,
.nms-slider__source { display: none !important; }

.nms-slider { margin-block: 1.5rem; }

.nms-slider__stage {
  position: relative;
  background: var(--nms-wall);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.nms-slider__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nms-slider__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  line-height: 1;
  color: var(--nms-ink);
  background: rgba(255,255,255,.86);
  border: none;
  cursor: pointer;
}
.nms-slider__nav:hover { background: #fff; color: var(--nms-line); }
.nms-slider__nav--prev { left: 0; }
.nms-slider__nav--next { right: 0; }

.nms-slider__caption {
  margin: 0.7rem 0 0;
  font-size: 0.9rem;
  color: var(--nms-ink-soft);
  line-height: 1.45;
}
.nms-slider__counter {
  margin: 0.35rem 0 0;
  font-family: var(--nms-font-display);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--nms-ink-soft);
}

.nms-slider__thumbs {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0 0 0.6rem;
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.nms-slider__thumbs li {
  flex: 0 0 auto;
  width: 7.5rem;
  scroll-snap-align: start;
}
.nms-slider__thumbs::-webkit-scrollbar { height: 8px; }
.nms-slider__thumbs::-webkit-scrollbar-track { background: var(--nms-wall); }
.nms-slider__thumbs::-webkit-scrollbar-thumb { background: var(--nms-wall-deep); }
.nms-slider__thumbs::-webkit-scrollbar-thumb:hover { background: var(--nms-line); }
.nms-slider__thumbs button {
  display: block;
  width: 100%;
  padding: 0;
  border: 2px solid transparent;
  background: none;
  cursor: pointer;
  line-height: 0;
}
.nms-slider__thumbs img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  opacity: 0.65;
  transition: opacity 140ms ease;
}
.nms-slider__thumbs button:hover img { opacity: 1; }
.nms-slider__thumbs button[aria-current="true"] { border-color: var(--nms-line); }
.nms-slider__thumbs button[aria-current="true"] img { opacity: 1; }

@media (max-width: 48rem) {
  .nms-slider__thumbs li { width: 6rem; }
  .nms-slider__nav { width: 2.5rem; height: 2.5rem; font-size: 1.6rem; }
}

/* ============================================================
   VENUE ROWS
   Where to play. One row per club, separated by a hairline so the
   list scans without boxes or cards competing with the photos.
   ============================================================ */
.nms-venue {
  padding-block: 1.75rem;
  border-bottom: 1px solid var(--nms-wall-deep);
  gap: 1.75rem;
}
.nms-venue:last-of-type { border-bottom: none; }

.nms-venue__photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.nms-venue__info h3 { margin-bottom: 0.35rem; }
.nms-venue__info p { margin-top: 0.5rem; }
.nms-venue__info em { color: var(--nms-ink-soft); font-style: italic; }

.nms-venue__contact p { margin-top: 0.5rem; }
.nms-contact-title {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--nms-line);
}

.nms-venue__map img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.nms-venue__map .wp-block-buttons { margin-top: 0.75rem; }

/* city headings act as the spine of the page */
.nms-city {
  margin-top: 2.5rem;
  padding-bottom: 0.4rem;
  border-bottom: var(--nms-rule) solid var(--nms-line);
  letter-spacing: 0.04em;
}

@media (max-width: 48rem) {
  .nms-venue { padding-block: 1.25rem; }
  .nms-venue__photo img { aspect-ratio: 16 / 9; }
}

/* ============================================================
   GALLERY WITH HOVER CAPTIONS
   Applied when a Gallery block is set to the "Captions on hover"
   style. Touch devices get the captions permanently, since there is
   no hover state to reveal them.
   ============================================================ */
/* Core styles gallery captions with a gradient and a backdrop blur at
   .wp-block-gallery.has-nested-images figure.wp-block-image figcaption,
   so these selectors have to match that weight to win. */
.wp-block-gallery.has-nested-images.is-style-nms-hover figure.wp-block-image {
  position: relative;
  overflow: hidden;
}
.wp-block-gallery.has-nested-images.is-style-nms-hover figure.wp-block-image img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.wp-block-gallery.has-nested-images.is-style-nms-hover figure.wp-block-image figcaption {
  position: absolute;
  inset: auto 0 0 0;
  margin: 0;
  padding: 0.75rem 0.85rem;
  background: #16181a90;
  background-image: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #fff;
  font-size: 0.82rem;
  line-height: 1.35;
  max-height: 100%;
  overflow: auto;
  text-shadow: none;
  display: none;
}
.wp-block-gallery.has-nested-images.is-style-nms-hover figure.wp-block-image:hover figcaption,
.wp-block-gallery.has-nested-images.is-style-nms-hover figure.wp-block-image:focus-within figcaption {
  display: block;
}

@media (hover: none) {
  .wp-block-gallery.has-nested-images.is-style-nms-hover figure.wp-block-image figcaption {
    display: block;
    position: static;
    background: transparent;
    color: var(--nms-ink-soft);
    padding: 0.5rem 0 0;
  }
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.nms-sidebar { font-size: 0.97rem; }
.nms-widget + .nms-widget { margin-top: 2.25rem; }
.nms-widget h2, .nms-widget .widget-title {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding-bottom: 0.5rem;
  border-bottom: var(--nms-rule) solid var(--nms-line);
  margin-bottom: 0.9rem;
}
.nms-widget ul { list-style: none; margin: 0; padding: 0; }
.nms-widget li { padding: 0.35rem 0; border-bottom: 1px solid var(--nms-wall-deep); }
.nms-widget a { color: var(--nms-ink); text-decoration: none; }
.nms-widget a:hover { color: var(--nms-line); }

/* ============================================================
   SECTION SUB-NAVIGATION
   Shown beside pages that have children, so the Kiva Classic
   sub-pages stay reachable without going back to the main menu.
   ============================================================ */
.nms-subnav h2 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding-bottom: 0.5rem;
  border-bottom: var(--nms-rule) solid var(--nms-line);
  margin-bottom: 0.9rem;
}
.nms-subnav ul { list-style: none; margin: 0; padding: 0; }
.nms-subnav li { border-bottom: 1px solid var(--nms-wall-deep); }
.nms-subnav a {
  display: block;
  padding: 0.55rem 0;
  color: var(--nms-ink);
  text-decoration: none;
}
.nms-subnav a:hover { color: var(--nms-line); }
.nms-subnav .is-current > a {
  color: var(--nms-line);
  font-weight: 600;
}

/* ============================================================
   PREVIOUS / NEXT POST
   Arrows are drawn with pseudo-elements so there is no icon font or
   SVG to maintain. Older sits left, newer right, matching the reading
   direction of the archive.
   ============================================================ */
.nms-postnav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--nms-wall-deep);
}

.nms-postnav__link {
  display: block;
  text-decoration: none;
  color: var(--nms-ink);
  padding: 0.9rem 1rem;
  border: 1px solid var(--nms-wall-deep);
}
.nms-postnav__link:hover {
  border-color: var(--nms-line);
  color: var(--nms-line);
}

.nms-postnav__link--next { text-align: right; }

.nms-postnav__label {
  display: block;
  font-family: var(--nms-font-display);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nms-line);
  margin-bottom: 0.3rem;
}
.nms-postnav__link--prev .nms-postnav__label::before { content: "\2039  "; }
.nms-postnav__link--next .nms-postnav__label::after  { content: "  \203A"; }

.nms-postnav__title {
  display: block;
  font-family: var(--nms-font-display);
  font-size: 1.05rem;
  line-height: 1.25;
}

@media (max-width: 40rem) {
  .nms-postnav { grid-template-columns: 1fr; }
  .nms-postnav__link--next { text-align: left; }
}

/* ============================================================
   PAGINATION
   ============================================================ */
.nms-pagination { margin-top: 3rem; }
.nms-pagination .page-numbers {
  display: inline-block;
  padding: 0.5rem 0.85rem;
  font-family: var(--nms-font-display);
  text-decoration: none;
  color: var(--nms-ink);
  border: 1px solid var(--nms-wall-deep);
}
.nms-pagination .current { background: var(--nms-line); color: #fff; border-color: var(--nms-line); }

/* ============================================================
   FOOTER
   ============================================================ */
.nms-footer {
  background: var(--nms-ink);
  color: #cfd2d5;
  padding-block: 3rem;
  margin-top: 4rem;
  border-top: var(--nms-rule) solid var(--nms-line);
}
.nms-footer a { color: #fff; }
.nms-footer__grid { display: grid; gap: 2rem; }
@media (min-width: 45rem) { .nms-footer__grid { grid-template-columns: repeat(3, 1fr); } }
.nms-footer h2 {
  color: #fff; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 0.8rem;
}
.nms-footer ul { list-style: none; margin: 0; padding: 0; }
.nms-footer li { padding: 0.2rem 0; }
.nms-footernav {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.15);
}
.nms-footernav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
}
.nms-footernav a {
  font-family: var(--nms-font-nav);
  font-size: 1rem;
  color: #cfd2d5;
  text-decoration: none;
}
.nms-footernav a:hover { color: #fff; text-decoration: underline; }

.nms-colophon {
  margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.15);
  font-size: 0.85rem; color: #9aa0a6;
}


/* ============================================================
   LINK BOXES
   Photo fills the box, the label sits in a solid band along the
   bottom. No scrim over the photograph: the band carries the
   contrast instead, so the burgundy stays legible over any image.
   The whole box is clickable via a stretched pseudo-element.
   ============================================================ */
.nms-linkboxes { gap: 1.25rem; }

.nms-linkbox {
  position: relative;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  transition: transform 160ms ease;
}
.nms-linkbox:hover { transform: translateY(-3px); }

/* Boxes made with the earlier pattern carry a solid background colour
   and a description paragraph. Neither belongs in this design, so the
   photo wins and the paragraph is dropped. Clearing the colour in the
   editor is still tidier, but this keeps old boxes looking right. */
.nms-linkbox.has-background { background-color: transparent; }
.nms-linkbox > p,
.nms-linkbox .wp-block-paragraph { display: none; }

.nms-linkbox h3 {
  margin: 0;
  width: 100%;
  padding: 1rem 1.2rem 1.2rem;
  text-align: left;
  background: transparent;
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  line-height: 1.05;
}
.nms-linkbox h3 a {
  color: var(--nms-line);
  text-decoration: none;
}
.nms-linkbox h3 a::after { content: ""; position: absolute; inset: 0; }
.nms-linkbox:hover h3 a { text-decoration: underline; text-underline-offset: 3px; }
.nms-linkbox h3 a:focus-visible { outline: none; }
.nms-linkbox:has(h3 a:focus-visible) { outline: 3px solid var(--nms-line); outline-offset: 3px; }

/* ============================================================
   UPCOMING EVENTS
   Date block on the left, details on the right. Past events drop off
   the list on their own; see inc/events.php.
   ============================================================ */
.nms-event {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 0.9rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--nms-wall-deep);
}
.nms-event:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.nms-event__date {
  margin: 0;
  font-family: var(--nms-font-display);
  line-height: 0.95;
  color: var(--nms-ink);
}
.nms-event__month {
  display: block;
  font-size: 2.5rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.nms-event__days {
  display: block;
  font-size: 2.5rem;
}

.nms-event__body h3 {
  margin: 0 0 0.35rem;
  font-size: 1.25rem;
}
.nms-event__body p {
  margin: 0 0 0.7rem;
  font-size: 0.92rem;
  line-height: 1.45;
}
.nms-event__body .nms-btn {
  font-size: 0.85rem;
  padding: 0.45rem 0.9rem;
}
/* .nms-widget a sets its own colour, so the button needs to win here */
.nms-widget .nms-btn,
.nms-widget .nms-btn:hover,
.nms-widget .nms-btn:focus,
.nms-events .nms-btn,
.nms-events .nms-btn:hover,
.nms-events .nms-btn:focus { color: #fff; }

/* ============================================================
   SIDEBAR PHOTO LINKS
   Consistent dark overlay and white text over any photo, built with a
   shortcode rather than the Cover block so the effect is guaranteed
   the same regardless of which image gets dropped in.
   ============================================================ */
.nms-photolinks { margin-top: 2.25rem; }

.nms-photolink {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 130px;
  margin-bottom: 0.6rem;
  padding: 0;
  background-color: var(--nms-wall-deep);
  background-size: cover;
  background-position: center;
  text-decoration: none;
}
.nms-photolink::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.25);
}
.nms-photolink span {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0.8rem 1rem;
  font-family: var(--nms-font-nav);
  font-size: 1.05rem;
  color: #fff;
}
.nms-photolink:hover::before { background: rgba(0,0,0,.15); }
.nms-photolink:hover span { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   HOME NEWS SECTION
   ============================================================ */
.nms-homenews {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-top: clamp(2rem, 5vw, 3.5rem);
  border-top: 1px dotted #9a9a92;
}
.nms-sectionhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}
.nms-sectionhead h2 { margin: 0; }
.nms-sectionhead .nms-more { margin-top: 0; }

/* ============================================================
   FLOATED IMAGES AND CAPTIONS
   Classic editor output: [caption] shortcodes and alignleft /
   alignright on images. Blocks use the same class names, so these
   cover both editors.
   ============================================================ */
.nms-content .alignright,
.nms-content img.alignright,
.nms-content figure.alignright,
.nms-content .wp-caption.alignright {
  float: right;
  margin: 0.4rem 0 1rem 1.5rem;
  max-width: 50%;
  height: auto;
}
.nms-content .alignleft,
.nms-content img.alignleft,
.nms-content figure.alignleft,
.nms-content .wp-caption.alignleft {
  float: left;
  margin: 0.4rem 1.5rem 1rem 0;
  max-width: 50%;
  height: auto;
}
.nms-content .aligncenter,
.nms-content img.aligncenter,
.nms-content .wp-caption.aligncenter {
  display: block;
  margin-inline: auto;
}

/* the [caption] shortcode wrapper */
.nms-content .wp-caption { max-width: 100%; }
.nms-content .wp-caption img { display: block; width: 100%; height: auto; }
.nms-content .wp-caption-text {
  font-size: 0.85rem;
  color: var(--nms-ink-soft);
  margin-top: 0.4rem;
  line-height: 1.4;
}

/* stop a float from escaping its paragraph run */
.nms-content::after { content: ""; display: table; clear: both; }

@media (max-width: 40rem) {
  .nms-content .alignright,
  .nms-content .alignleft,
  .nms-content .wp-caption.alignright,
  .nms-content .wp-caption.alignleft {
    float: none;
    max-width: 100%;
    margin-inline: 0;
  }
}

/* ============================================================
   MOBILE SAFETY
   Long unbroken strings in the imported tournament result lists were
   forcing the page wider than the viewport, which made everything else
   look wrong. These rules contain that.
   ============================================================ */
body { overflow-x: hidden; }

.nms-content { overflow-wrap: break-word; word-break: normal; }
.nms-content pre { overflow-x: auto; }
.nms-content table { display: block; max-width: 100%; overflow-x: auto; }

.nms-slider,
.nms-slider__stage,
.nms-slider__thumbs { max-width: 100%; min-width: 0; }
.nms-slider__stage > * { min-width: 0; }
.wp-block-columns > .wp-block-column { min-width: 0; }

@media (max-width: 48rem) {
  /* a 3:2 stage is very tall on a phone held upright */
  .nms-slider__stage { aspect-ratio: 4 / 3; }
  .nms-slider__caption { font-size: 0.85rem; }
}

@media (max-width: 30rem) {
  .nms-slider__stage { aspect-ratio: 1 / 1; }
  .nms-slider__thumbs li { width: 5rem; }
}

/* ============================================================
   UTILITY
   ============================================================ */
.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: 0.5rem; left: 0.5rem; z-index: 999;
  width: auto; height: auto; clip: auto;
  background: var(--nms-line); color: #fff; padding: 0.7rem 1.1rem;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}