/* ==========================================================================
   VELO-ATLAS THEME — theme.css
   Bikepacking / Ultra Cycling Event Directory
   Field Journal Aesthetic
   ========================================================================== */

/* ==========================================================================
   0. SELF-HOSTED FONTS
   ========================================================================== */
/* Self-hosted rather than loaded from fonts.googleapis.com -- removes a
   cross-origin DNS lookup + connection setup + two sequential network
   requests (CSS file, then font files) from the critical rendering path,
   which was contributing to a slow Largest Contentful Paint. Files load
   from assets/fonts/ in this theme, same server as everything else.
   font-display: swap matches the &display=swap parameter the old Google
   Fonts URL used -- text renders immediately in a fallback font, then
   swaps to the real font once it loads, rather than staying invisible. */

@font-face {
  font-family: 'Oswald';
  src: url('../fonts/oswald-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Oswald';
  src: url('../fonts/oswald-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Oswald';
  src: url('../fonts/oswald-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Oswald';
  src: url('../fonts/oswald-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Courier Prime';
  src: url('../fonts/courier-prime-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Courier Prime';
  src: url('../fonts/courier-prime-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Courier Prime';
  src: url('../fonts/courier-prime-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Serif';
  src: url('../fonts/noto-serif-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Serif';
  src: url('../fonts/noto-serif-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Serif';
  src: url('../fonts/noto-serif-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Serif';
  src: url('../fonts/noto-serif-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Serif';
  src: url('../fonts/noto-serif-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/Fraunces-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
  /* Colors — remapped palette (Morning Snow / Toxic Orange) */
  --paper: #f5f4ed;
  --paper-light: #ffffff;
  --paper-cream: #ececdc;
  --paper-mid: #ddd9c8;
  --forest: #351e1c;
  --ink: #351e1c;
  --ink-warm: #733635;
  --ink-soft: #5c4644;
  --olive: #733635;
  --gold: #a0c9cb;
  --rust: #D0431F;

  /* Fonts */
  --font-display: 'Fraunces', 'Oswald', sans-serif;
  --font-mono: 'Courier Prime', monospace;
  --font-body: 'Noto Serif', serif;

  /* Spacing */
  --nav-h: 61px;
  --max-w: 1200px;
  --pad-x: 64px;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.65;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

p {
  margin: 0 0 1em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: var(--font-display);
}

/* Sentence case on h2/h3/h4 site-wide -- overrides any component-level
   text-transform: uppercase applied via class selectors on these tags */
h2,
h3,
h4 {
  text-transform: none !important;
}

/* ==========================================================================
   3. PAPER GRAIN TEXTURE
   ========================================================================== */

.va-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: 0.06;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 160px 160px;
}

/* ==========================================================================
   4. NAVIGATION
   ========================================================================== */

.va-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--paper-mid);
  box-shadow: 0 1px 8px rgba(44, 53, 49, 0.07);
  transition: top 0.25s ease;
}

.va-nav__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 12px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  box-sizing: border-box;
}

.va-nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}





.va-nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.va-nav__links ul,
.va-nav__links > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.va-nav__links li {
  list-style: none;
}

.va-nav__links a {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-warm);
  padding: 8px 14px;
  border-radius: 6px;
  transition: color 0.18s, background 0.18s;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  display: block;
}

.va-nav__links a:hover {
  color: var(--ink);
  background: var(--paper-mid);
}

.va-nav__links a.active {
  color: var(--rust);
  border-bottom-color: var(--rust);
}

.va-nav__cta {
  background: var(--rust) !important;
  color: var(--paper-cream) !important;
  border-radius: 6px !important;
  border-bottom-color: transparent !important;
  padding: 9px 16px !important;
}

/* ── Dropdown submenu (e.g. "Prep & Plan" grouping Field Manual, Checklist,
   Pace Calculator) ──────────────────────────────────────────────────────
   wp_nav_menu() outputs a nested <ul> for any menu item with children,
   with .menu-item-has-children automatically added to that parent <li>.
   The base .va-nav__links ul rule above applies display:flex to EVERY ul
   inside .va-nav__links (it has no > child combinator), so without this
   override the dropdown <ul> would render as a horizontal row inline in
   the middle of the top-level nav instead of a vertical dropdown -- this
   block corrects that and adds the actual dropdown positioning/behavior. */

.va-nav__links .menu-item-has-children {
  position: relative;
}

.va-nav__links .menu-item-has-children > a {
  display: flex;
  align-items: center;
  gap: 5px;
}

.va-nav__links .menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  position: static;
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  background-color: transparent;
  background-image: url('../images/chevron-down.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none;
  margin-top: 1px;
  opacity: 0.8;
}

.va-nav__links .menu-item-has-children .sub-menu,
.va-nav__links .menu-item-has-children ul {
  /* Override the inherited horizontal flex from the base ul rule above */
  display: block;
  flex-direction: unset;

  position: absolute;
  top: 100%;
  left: 0;
  /* Small negative margin closes the visual/hover gap between the parent
     link and the dropdown, so moving the mouse straight down doesn't
     momentarily leave both elements and trigger the dropdown to close. */
  margin-top: -2px;
  padding-top: 8px;

  min-width: 200px;
  background: var(--paper-light);
  border: 1px solid var(--paper-mid);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(44, 53, 49, 0.16);

  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;

  z-index: 60;
  gap: 0;
}

.va-nav__links .menu-item-has-children:hover .sub-menu,
.va-nav__links .menu-item-has-children:focus-within .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.va-nav__links .sub-menu li {
  width: 100%;
}

.va-nav__links .sub-menu a {
  display: block;
  padding: 11px 18px;
  font-size: 12px;
  letter-spacing: 0.07em;
  border-radius: 0;
  border-bottom: none;
  white-space: nowrap;
}

.va-nav__links .sub-menu a:hover {
  background: var(--paper-mid);
}

.va-nav__links .sub-menu a.active {
  color: var(--rust);
  background: rgba(168, 62, 44, 0.08);
}

.va-nav__cta:hover {
  background: #A43518 !important;
  color: #fff !important;
}

/* ── Mobile nav hamburger ──────────────────────────────────────────────────
   Hidden by default (desktop). Shown only inside the 700px media query
   below, where .va-nav__links is hidden and this becomes the only way to
   open the menu. */
.va-nav__hamburger {
  display: none;
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: var(--ink);
  flex-shrink: 0;
  margin-left: auto;
}

.va-nav__hamburger-line {
  transition: transform 0.22s ease, opacity 0.18s ease;
  transform-origin: center;
}

/* Morph the three lines into an X when the menu is open. */
.va-nav--mobile-open .va-nav__hamburger-line--top {
  transform: translateY(5px) rotate(45deg);
}

.va-nav--mobile-open .va-nav__hamburger-line--mid {
  opacity: 0;
}

.va-nav--mobile-open .va-nav__hamburger-line--bottom {
  transform: translateY(-5px) rotate(-45deg);
}

/* ==========================================================================
   5. FOOTER
   ========================================================================== */

/* ==========================================================================
   5. FOOTER
   ========================================================================== */

.va-footer {
  background: var(--forest);
  color: var(--paper);
  padding: 56px var(--pad-x) 32px;
}

.va-footer__inner {
  max-width: var(--max-w);
  margin: 0 auto;
}

/* ── Top row: brand left, nav columns right ── */
.va-footer__top {
  display: flex;
  justify-content: space-between;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(236, 226, 207, 0.1);
  flex-wrap: wrap;
}

.va-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex-shrink: 0;
}

.va-footer__brand a {
  display: block;
  opacity: 0.95;
  transition: opacity 0.15s;
}

.va-footer__brand a:hover {
  opacity: 1;
}

.va-footer__tagline {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(236, 226, 207, 0.45);
  margin: 0;
  text-transform: uppercase;
}

/* ── Nav columns ── */
.va-footer__nav {
  display: flex;
  gap: 64px;
  flex-wrap: wrap;
}

.va-footer__nav-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 120px;
}

.va-footer__nav-heading {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(207, 174, 112, 0.7);
}

.va-footer__nav-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.va-footer__nav-col a {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(236, 226, 207, 0.65);
  text-decoration: none;
  transition: color 0.15s;
}

.va-footer__nav-col a:hover {
  color: var(--paper);
}

/* ── Bottom bar ── */
.va-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  gap: 16px;
  flex-wrap: wrap;
}

.va-footer__copy {
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(236, 226, 207, 0.35);
  letter-spacing: 0.04em;
}

.va-footer__bottom-right {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(207, 174, 112, 0.5);
}

/* ==========================================================================
   6. HOMEPAGE HERO
   ========================================================================== */

.va-hero {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  background-repeat: no-repeat;
  min-height: 620px;
}

.va-hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 72px var(--pad-x) 80px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.va-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--olive);
  text-transform: uppercase;
  margin-bottom: 20px;
}

.va-hero__title {
  font-family: var(--font-display);
  font-size: 62px;
  font-weight: 600;
  text-transform: none;
  line-height: 1.05;
  color: var(--ink);
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}

.va-hero__title-accent {
  color: var(--rust);
  font-style: normal;
  display: block;
}

/* On mobile, letting "challenge" flow inline with the rest of the sentence
   (rather than forcing it onto its own line) avoids an awkward 3-line
   wrap where an orphaned word sits alone between the main heading and
   the accent word. */
@media (max-width: 700px) {
  .va-hero__title-accent {
    display: inline;
  }
}

.va-hero__underline {
  display: none;
}

.va-hero__body {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 32px;
  max-width: 500px;
}

.va-hero__body-link {
  color: var(--rust);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(168, 62, 44, 0.4);
  transition: text-decoration-color 0.18s ease;
}

.va-hero__body-link:hover {
  text-decoration-color: var(--rust);
}

.va-hero__search-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--olive);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.va-hero__search {
  margin-bottom: 20px;
}

.va-hero__search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--paper-light);
  border: 1.5px solid var(--paper-mid);
  border-radius: 14px;
  padding: 10px 10px 10px 18px;
  box-shadow: 0 8px 24px rgba(44, 53, 49, 0.16);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.va-hero__search-bar:focus-within {
  border-color: var(--gold);
  box-shadow: 0 8px 28px rgba(207, 174, 112, 0.24);
}

.va-hero__search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  outline: none;
}

.va-hero__search-input::placeholder {
  color: var(--olive);
}

.va-hero__search-btn {
  background: var(--rust);
  color: #fff;
  border: none;
  border-radius: 9px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 12px 22px;
  cursor: pointer;
  transition: background 0.18s;
}

.va-hero__search-btn:hover {
  background: #A43518;
}

.va-hero__chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.va-hero__chips-label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--olive);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.va-hero__chip {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--ink-warm);
  background: var(--paper-mid);
  border: 1px solid var(--paper-mid);
  border-radius: 20px;
  padding: 5px 14px;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  text-transform: uppercase;
}

.va-hero__chip:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

/* ==========================================================================
   7. HERO PRINTS SECTION
   ========================================================================== */

.va-hero__prints {
  position: relative;
  min-height: 580px;
}

.va-hero__stamp {
  position: absolute;
  top: -10px;
  right: 10px;
  width: 170px;
  opacity: 1;
  pointer-events: none;
}

.va-print {
  position: absolute;
  background: var(--paper-light);
  border: 10px solid var(--paper-light);
  box-shadow: 3px 6px 24px rgba(44, 53, 49, 0.26), 0 0 0 1px rgba(44, 53, 49, 0.08);
  border-radius: 3px;
  width: 286px; /* 220px base, +30% per request */
  overflow: hidden;
}

.va-print__tape {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 73px; /* 56px base, +30% */
  height: 26px; /* 20px base, +30% */
  background: rgba(207, 174, 112, 0.45);
  border-radius: 2px;
  z-index: 5;
}

.va-print__img,
.va-print__img-wrap {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
  overflow: hidden;
}

.va-print__scene {
  width: 100%;
  height: 240px;
  overflow: hidden;
}

.va-print__scene .va-scene-wrap {
  width: 100%;
  height: 240px;
}

.va-print__scene .va-scene-wrap svg {
  width: 100%;
  height: 100%;
}

.va-print__caption {
  padding: 10px 12px 8px;
  background: var(--paper-light);
}

.va-print__caption-title {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.06em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.va-print__caption-dist {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--olive);
}

/* ==========================================================================
   8. EVENTS SECTION (HOMEPAGE)
   ========================================================================== */

.va-events-section {
  position: relative;
  background: var(--paper-mid);
  padding: 0;
  overflow: hidden;
}

.va-events-section__inner {
  position: relative;
  z-index: 2;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 72px var(--pad-x);
  box-sizing: border-box;
}

/* Map view breaks out of the centered, max-width container to sit fully
   edge-to-edge across the whole viewport, while the list grid stays
   contained at max-width like the rest of the page. The 50vw/-50% trick
   pulls each edge out to the viewport border regardless of how wide the
   parent container is. */
.va-events-map-view {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  /* Cancel the inner's vertical padding too, so the map sits fully
     edge-to-edge on all four sides rather than being pushed down/up
     and leaving a gap. Only the list grid should get the 72px gutter. */
  margin-top: -72px;
  margin-bottom: -72px;
}

.va-events-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 36px;
  gap: 20px;
  flex-wrap: wrap;
}

.va-section-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--olive);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.va-events-section__title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  text-transform: none;
  color: var(--ink);
  line-height: 1;
}

.va-events-section__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* The [hidden] attribute is set via JS when switching to Map view, but
   display:grid above has equal specificity to the browser's built-in
   [hidden] { display:none } rule and loads later in the cascade, so it
   silently won -- the grid stayed visually visible (stacked above the
   map) even though the DOM correctly showed hidden=true. This rule wins
   the specificity/cascade fight explicitly instead of relying on the
   browser default. */
.va-events-section__grid[hidden] {
  display: none;
}

/* Desktop: hide the below-grid button */
.va-events-section__cta--mobile {
  display: none !important;
}

/* ==========================================================================
   9. EVENT CARDS (SHARED)
   ========================================================================== */

.va-event-card {
  background: var(--paper-light);
  border: none;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(44, 53, 49, 0.07);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  display: flex;
  flex-direction: column;
}

/* Same class of bug as .va-events-section__grid[hidden] below: display:flex
   above has equal specificity to the browser's built-in
   [hidden] { display:none } rule and loads later in the cascade, so it
   silently won -- individual cards never visually hid when
   events-filters.js set card.hidden = true, even though the map (which
   uses a different show/hide mechanism) updated correctly. This explicit
   rule wins the specificity fight instead of relying on the browser default. */
.va-event-card[hidden] {
  display: none;
}

.va-event-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 32px rgba(44, 53, 49, 0.14);
}

.va-event-card__img-wrap {
  position: relative;
  height: 190px;
  overflow: hidden;
}

.va-event-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.va-event-card:hover .va-event-card__img {
  transform: scale(1.04);
}

.va-event-card__img-wrap .va-scene-wrap {
  width: 100%;
  height: 100%;
}

.va-event-card__img-wrap .va-scene-wrap svg {
  width: 100%;
  height: 100%;
}

.va-event-card__date {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--paper-cream);
  border-radius: 6px;
  padding: 6px 10px;
  text-align: center;
  min-width: 44px;
  box-shadow: 0 1px 6px rgba(44, 53, 49, 0.15);
}

.va-date-num {
  display: block;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}

.va-date-mon {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--olive);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
}

.va-event-card__tag {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: var(--forest);
  color: var(--paper-cream);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
}

.va-event-card__body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  background: #f5f4ed;
}

.va-event-card__name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.va-event-card__name a {
  color: inherit;
  text-decoration: none;
  transition: color 0.18s;
}

.va-event-card__name a:hover {
  color: var(--rust);
}

.va-event-card__location {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--olive);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 4px;
}

.va-event-card__divider {
  border: none;
  border-top: 1.5px dashed var(--paper-mid);
  margin: 2px 0;
}

.va-event-card__stats {
  display: flex;
  align-items: center;
  gap: 18px;
}

.va-event-card__stat {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-warm);
}

.va-event-card__stat svg {
  color: var(--olive);
  flex-shrink: 0;
}

.va-event-card__country {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--olive);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: auto;
}

/* ==========================================================================
   10. GENERIC BUTTONS
   ========================================================================== */

.va-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink);
  background: var(--paper-cream);
  border: 1.5px solid var(--paper-mid);
  border-radius: 6px;
  padding: 10px 20px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
  box-shadow: 0 1px 6px rgba(44, 53, 49, 0.08);
}

.va-btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 3px 12px rgba(207, 174, 112, 0.25);
}

.va-btn--rust {
  background: var(--rust);
  color: var(--paper-cream);
  border-color: var(--rust);
}

.va-btn--rust:hover {
  background: #A43518;
  border-color: #A43518;
  color: #fff;
}

.va-btn--outline {
  background: transparent;
  color: var(--paper-light);
  border-color: var(--paper-mid);
}

.va-btn--outline:hover {
  background: rgba(236, 226, 207, 0.12);
  color: var(--gold);
  border-color: var(--gold);
}

/* ==========================================================================
   11. ARCHIVE HERO
   ========================================================================== */

.va-archive-hero {
  background: var(--forest);
  color: var(--paper-light);
  padding: 56px 0 52px;
  position: relative;
  overflow: hidden;
}

.va-archive-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
  text-align: center;
}

.va-archive-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 18px;
}

.va-archive-hero__title {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 600;
  text-transform: none;
  color: var(--paper-light);
  letter-spacing: 0.02em;
  margin-bottom: 14px;
}

.va-archive-hero__desc {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(244, 236, 219, 0.72);
  max-width: 600px;
  margin: 0 auto 28px;
}

.va-archive-hero__stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}

.va-archive-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--gold);
  letter-spacing: 0.04em;
}

.va-archive-stat svg {
  color: var(--gold);
  opacity: 0.7;
}

/* ==========================================================================
   12. FILTER BAR
   ========================================================================== */

.va-filter-bar {
  position: sticky;
  top: var(--nav-offset, var(--nav-h));
  z-index: 15;
  background: var(--paper);
  border-bottom: 1.5px solid var(--paper-mid);
  box-shadow: 0 2px 12px rgba(44, 53, 49, 0.07);
  transition: top 0.25s ease;
}

.va-filter-bar__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 12px var(--pad-x);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.va-filter-bar__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.va-filter-bar__section-label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

/* The List/Map toggle reuses .va-checklist-mode, whose default styling
   (semi-transparent dark pill, light cream inactive text) was designed
   to sit on the hero's dark photo background. That reads wrong in the
   sticky filter bar's light background, so this instance gets its own
   light-themed look matching the Filters button / country pills. */
.va-filter-bar__view-toggle.va-checklist-mode {
  margin-top: 0;
  background: #DED9C6;
  flex-shrink: 0;
}

.va-filter-bar__view-toggle .va-checklist-mode__btn {
  font-family: var(--font-display);
  color: var(--ink-warm);
}

.va-filter-bar__view-toggle .va-checklist-mode__btn.active {
  background: var(--rust);
  color: #fff;
}

/* Mobile (default): show the toggle in the filter bar in place of the
   old "Filters options" label; hide the original hero copy so it's not
   duplicated on screen. */
.va-archive-hero .va-checklist-mode {
  display: none;
}

/* Desktop only: mobile's stacked "label+button row, then pills row" layout
   stays exactly as-is (unchanged) below this breakpoint. On desktop, drop
   the label and float the Filters button inline at the end of the same
   row as the country pills instead of on its own row above them. */
@media (min-width: 769px) {
  .va-filter-bar__inner {
    flex-direction: row;
    align-items: center;
  }

  .va-filter-bar__section-label {
    display: none;
  }

  .va-filter-bar__cats {
    order: 1;
  }

  .va-filter-bar__top {
    order: 2;
    flex-shrink: 0;
  }

  /* Desktop keeps the toggle up in the hero (unchanged); hide the
     mobile-only copy that replaced the filter bar's label. Doubled
     class selector (both classes already sit on this element) so this
     reliably beats the base .va-checklist-mode { display: inline-flex }
     rule regardless of which one appears later in the stylesheet. */
  .va-filter-bar__view-toggle.va-checklist-mode {
    display: none;
  }

  .va-archive-hero .va-checklist-mode {
    display: inline-flex;
  }
}

.va-filter-bar__search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--paper-light);
  border: 1.5px solid var(--paper-mid);
  border-radius: 6px;
  padding: 8px 12px;
  max-width: 420px;
  transition: border-color 0.2s;
}

.va-filter-bar__search:focus-within {
  border-color: var(--gold);
}

.va-filter-bar__input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  outline: none;
}

.va-filter-bar__input::placeholder {
  color: var(--olive);
}

.va-filter-bar__search-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--olive);
  padding: 2px;
  display: flex;
}

/* ── Field Manual hero: wider inner container ───────────────────────────────
   Scoped to .va-fm-hero (already on the <section> in page-field-manual.php)
   so only this page's hero gets the wider container -- the shared
   .va-archive-hero__inner max-width: 720px is used by several other
   archive heroes and shouldn't change for all of them just to fit this
   page's wider search box. */
.va-fm-hero .va-archive-hero__inner {
  max-width: 1000px;
}

/* ── Field Manual search field: moved into the hero, centered + bigger +
   twice as wide ─────────────────────────────────────────────────────────
   Was previously scoped to .va-fm-filter-bar (a separate section below
   the hero); the search box itself moved into the hero in the markup, so
   this is re-scoped to .va-fm-hero__search, the class added to it there.
   The box itself grows by 16px (padding), with font-size and the icon
   scaled up proportionally rather than literally +16px, since a 30px
   input font would be wildly out of scale with the rest of the site's
   13-17px body text. Width is doubled per request (460px base -> 920px),
   which needs the wider .va-fm-hero__inner container above to actually
   have room to render at that width. */
.va-fm-hero__search {
  margin: 24px auto 0; /* top margin separates it from the description text above */
  padding: 19px 28px; /* was 24px vertical, -10px height total (-5px per side) */
  max-width: 920px; /* 460px doubled */
  border-radius: 9px;
}

/* Mobile search in sticky bar — hidden on desktop */
.va-fm-filter-bar__search--mobile {
  display: none;
}

.va-fm-hero__search svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.va-fm-hero__search .va-filter-bar__input {
  font-size: 18px;
}

@media (max-width: 768px) {
  /* Hide hero search on mobile — it lives in the sticky bar instead */
  .va-fm-hero__search {
    display: none;
  }

  /* Show the sticky bar search on mobile */
  .va-fm-filter-bar__search--mobile {
    display: flex;
  }
}

.va-filter-bar__clear {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--olive);
  font-size: 18px;
  line-height: 1;
  padding: 0 2px;
  transition: color 0.15s;
}

.va-filter-bar__clear:hover {
  color: var(--rust);
}

.va-filter-bar__cats,
.va-filter-bar__tags {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
  flex: 1;
  min-width: 0;
}

/* Chevron scroll buttons */
.va-pills-chevron {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--paper-light);
  border: 1px solid var(--paper-mid);
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  z-index: 2;
}

.va-pills-chevron:hover {
  background: var(--paper-mid);
}

.va-pills-chevron--left { margin-right: 8px; }
.va-pills-chevron--right { margin-left: 8px; }

@media (max-width: 768px) {
  .va-pills-chevron { display: none !important; }
}

.va-pills-chevron.hidden {
  opacity: 0.25;
  pointer-events: none;
  cursor: default;
}

.va-filter-bar__label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--olive);
  white-space: nowrap;
  flex-shrink: 0;
}

.va-filter-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding-bottom: 2px;
}

.va-filter-tabs::-webkit-scrollbar {
  display: none;
}

.va-tab {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-warm);
  background: var(--paper-light);
  border: 1px solid var(--paper-mid);
  border-radius: 5px;
  padding: 6px 14px;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.va-tab:hover {
  background: var(--paper-mid);
}

.va-tab.active {
  background: var(--forest);
  color: var(--paper-light);
  border-color: var(--forest);
}

/* field-manual.js generates "va-tab--active" (a BEM-style modifier), which
   is a different class name from the plain ".active" used by the Ultra
   Events archive's filter tabs above — so it needs its own rule rather than
   relying on .va-tab.active, which never matched it. Styled in rust red
   per request, distinct from the Ultra Events page's forest-green active
   tabs, which are untouched. */
.va-tab.va-tab--active {
  background: var(--rust);
  color: var(--paper-light);
  border-color: var(--rust);
}

.va-filter-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}

.va-filter-pills::-webkit-scrollbar {
  display: none;
}

.va-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-warm);
  background: var(--paper-light);
  border: 1px solid var(--paper-mid);
  border-radius: 20px;
  padding: 5px 14px;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  transition: background 0.15s, color 0.15s;
}

.va-pill:hover {
  background: var(--paper-mid);
}

.va-pill.active {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}

/* Same situation as .va-tab--active above: field-manual.js generates
   "va-pill--active" rather than the plain ".active" used by the Ultra
   Events archive's terrain pills, so it needs its own rule. Rust red per
   request, distinct from the Ultra Events page's gold active pills. */
.va-pill.va-pill--active {
  background: var(--rust);
  color: var(--paper-light);
  border-color: var(--rust);
}

/* ==========================================================================
   13. ARCHIVE BODY / GRID
   ========================================================================== */

.va-archive-body {
  padding: 40px 0 64px;
}

.va-archive-body__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.va-archive-count {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--olive);
  letter-spacing: 0.04em;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.va-active-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.va-active-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink);
  background: var(--gold);
  border-radius: 20px;
  padding: 3px 10px 3px 12px;
  text-decoration: none;
}

.va-active-filter-chip:hover {
  background: #b89a52;
}

.va-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  /* Without this, CSS Grid's default align-items:stretch makes every card in
     a row match the height of the tallest card in that row. For Field
     Manual's accordion cards, this meant expanding the left card (taller
     once its body is shown) visually stretched the right card's background
     to match — looking like the right card had also opened, even though
     its own content/state was untouched. align-items:start lets each card
     size to its own content instead. */
  align-items: start;
}

.va-no-results {
  text-align: center;
  padding: 80px 20px;
}

.va-no-results svg {
  margin: 0 auto 20px;
  opacity: 0.4;
}

.va-no-results__title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 10px;
}

.va-no-results__desc {
  color: var(--olive);
  margin-bottom: 24px;
}

.va-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1.5px dashed var(--paper-mid);
}

.va-pagination .page-numbers {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-warm);
  background: var(--paper-light);
  border: 1px solid var(--paper-mid);
  border-radius: 5px;
  padding: 8px 14px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.va-pagination .page-numbers:hover {
  background: var(--paper-mid);
}

.va-pagination .page-numbers.current {
  background: var(--forest);
  color: var(--paper-light);
  border-color: var(--forest);
}

/* ==========================================================================
   14. SINGLE EVENT HERO
   ========================================================================== */

.va-single-hero {
  position: relative;
  height: 560px;
  overflow: hidden;
}

.va-single-hero__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.va-single-hero .va-scene-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.va-single-hero .va-scene-wrap svg {
  width: 100%;
  height: 100%;
}

.va-single-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(42, 35, 23, 0.72) 0%, rgba(42, 35, 23, 0.35) 60%, rgba(42, 35, 23, 0.15) 100%);
  z-index: 1;
}

.va-single-hero__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 40px var(--pad-x);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
}

.va-single-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--paper-light);
  background: rgba(244, 236, 219, 0.12);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(244, 236, 219, 0.2);
  border-radius: 5px;
  padding: 7px 14px;
  margin-bottom: 14px;
  align-self: flex-start;
  transition: background 0.18s;
}

.va-single-hero__back:hover {
  background: rgba(244, 236, 219, 0.22);
}

.va-single-hero__cat-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--gold);
  border-radius: 4px;
  padding: 4px 12px;
  margin-bottom: 12px;
  align-self: flex-start;
}

.va-single-hero__title {
  font-family: var(--font-display);
  font-size: 74px;
  font-weight: 600;
  text-transform: none;
  color: var(--paper-light);
  letter-spacing: 0.01em;
  line-height: 1.0;
  margin-bottom: 14px;
  max-width: 900px;
}

.va-single-hero__subtitle {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(244, 236, 219, 0.75);
  max-width: 600px;
}

.va-single-hero__author {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
}

.va-single-hero__author-avatar {
  border-radius: 50%; /* get_avatar() outputs a square <img> by default */
  display: block;
}

/* ==========================================================================
   15. SINGLE EVENT BODY
   ========================================================================== */

.va-single-body {
  background: var(--paper);
  padding-bottom: 80px;
}

.va-single-body__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 52px var(--pad-x);
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 48px;
  align-items: start;
}

/* Modifier for templates with no .va-single-body__right sidebar (e.g. the
   blog single.php article layout) — collapses the grid to one full-width
   column instead of leaving the 380px sidebar track empty. */
.va-single-body__inner--full {
  grid-template-columns: 1fr;
}

.va-single-section {
  margin-bottom: 48px;
}

.va-single-section__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.va-single-section__head span {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink);
  white-space: nowrap;
}

.va-dashed-rule {
  flex: 1;
  border: none;
  border-top: 1.5px dashed var(--paper-mid);
  margin: 0;
}

.va-single-section__note {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--olive);
  letter-spacing: 0.03em;
  line-height: 1.6;
  margin-bottom: 20px;
}

/* Links inside blog post body content -- rust red with a subtle underline,
   matching the hero body link convention. Scoped to the content wrapper
   so it doesn't affect navigation, event cards, or anything else. */
.va-single-section__content a {
  color: var(--rust);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(168, 62, 44, 0.4);
  transition: text-decoration-color 0.18s ease;
}

.va-single-section__content a:hover {
  text-decoration-color: var(--rust);
}

.va-event-content {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-soft);
}

.va-event-content p {
  margin-bottom: 1.2em;
}

.va-event-content h2,
.va-event-content h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  margin: 1.5em 0 0.5em;
  color: var(--ink);
}

.va-komoot-wrap {
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
}

.va-komoot-wrap iframe {
  width: 100%;
  min-height: 400px;
  border: none;
  border-radius: 8px;
}

/* ==========================================================================
   16. EVENT DETAILS CARD (SIDEBAR)
   ========================================================================== */

.va-single-body__right {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
}

.va-event-details-card {
  background: var(--forest);
  border-radius: 14px;
  padding: 28px;
  box-shadow: 0 6px 32px rgba(44, 53, 49, 0.22);
}

.va-event-details-card__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.1em;
  color: var(--paper-light);
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(236, 226, 207, 0.15);
}

.va-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(236, 226, 207, 0.08);
}

.va-detail-row:last-of-type {
  border-bottom: none;
}

.va-detail-icon {
  width: 40px;
  height: 40px;
  background: rgba(207, 174, 112, 0.15);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--gold);
}

.va-detail-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(236, 226, 207, 0.5);
  margin-bottom: 2px;
}

.va-detail-value {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--paper-light);
  letter-spacing: 0.02em;
}

.va-detail-col {
  flex: 1;
  min-width: 0;
}

.va-event-details-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 20px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink);
  background: var(--paper-cream);
  border-radius: 8px;
  padding: 13px 20px;
  text-decoration: none;
  transition: background 0.18s, box-shadow 0.18s;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.va-event-details-card__cta:hover {
  background: var(--gold);
  box-shadow: 0 4px 20px rgba(207, 174, 112, 0.4);
}

.va-share {
  border-top: 1px solid rgba(236, 226, 207, 0.12);
}

.va-share__title {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0.08em;
  color: rgba(236, 226, 207, 0.5);
  margin-bottom: 12px;
}

.va-share__buttons {
  display: flex;
  gap: 8px;
}

.va-share-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #351e1c;
  border: 1px solid rgba(236, 226, 207, 0.12);
  border-radius: 6px;
  color: #FFFFFF;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}

.va-share-btn:hover {
  background: rgba(207, 174, 112, 0.2);
  color: var(--gold);
}

/* ==========================================================================
   17. FIELD MANUAL SPECIFIC
   ========================================================================== */

.va-fm-hero {
  /* inherits va-archive-hero */
}

.va-fm-body .va-archive-body {
  /* inherits */
}

.va-fm-cards {
  grid-template-columns: repeat(2, 1fr);
}

.va-fm-card {
  background: var(--paper-light);
  border: 1px solid var(--paper-mid);
  border-left: 4px solid var(--paper-mid);
  border-radius: 0 8px 8px 0;
  overflow: hidden;
  transition: transform 0.18s, box-shadow 0.18s;
  cursor: pointer;
}

.va-fm-card:hover {
  transform: translateX(3px);
  box-shadow: 3px 4px 20px rgba(44, 53, 49, 0.1);
}

.va-fm-card--critical {
  border-left-color: var(--rust);
}

.va-fm-card--important {
  border-left-color: #a9762b;
}

.va-fm-card--useful {
  border-left-color: #5e7a4e;
}

.va-fm-card__header {
  padding: 16px 18px 12px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.va-fm-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.va-fm-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 3px 9px;
  border-radius: 3px;
  font-weight: 400;
}

.va-fm-badge--critical {
  background: rgba(168, 62, 44, 0.12);
  color: var(--rust);
}

.va-fm-badge--important {
  background: rgba(169, 118, 43, 0.12);
  color: #8a6010;
}

.va-fm-badge--useful {
  background: rgba(94, 122, 78, 0.12);
  color: #3a5a2e;
}

.va-fm-cat {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--olive);
}

.va-fm-card__title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.03em;
  color: var(--ink);
  line-height: 1.25;
  margin: 0;
}

.va-fm-card__chevron {
  flex-shrink: 0;
  color: var(--olive);
  transition: transform 0.2s;
  margin-top: 2px;
}

.va-fm-card.expanded .va-fm-card__chevron {
  transform: rotate(180deg);
}

.va-fm-card__body {
  display: none;
  padding: 0 18px 16px;
  border-top: 1.5px dashed var(--paper-mid);
  margin-top: 4px;
  padding-top: 14px;
}

.va-fm-card.expanded .va-fm-card__body {
  display: block;
}

.va-fm-card__tip {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 12px;
}

.va-fm-card__why-head {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--olive);
  margin-bottom: 6px;
}

.va-fm-card__why {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-warm);
}

/* ==========================================================================
   18. SCENE SVG WRAPPER
   ========================================================================== */

.va-scene-wrap {
  position: relative;
  overflow: hidden;
  height: 100%;
}

.va-scene-wrap svg {
  display: block;
  width: 100%;
  height: 100%;
}

.va-scene-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, transparent 60%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* ==========================================================================
   19. PAGE TEMPLATES
   ========================================================================== */

.va-page {
  background: var(--paper);
  min-height: 60vh;
}

.va-page__inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 64px var(--pad-x);
}

.va-page__title {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 600;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 32px;
  letter-spacing: 0.02em;
}

.va-page__content.va-content {
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-soft);
}

.va-page__content.va-content p {
  margin-bottom: 1.2em;
}

.va-page__content.va-content h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 26px;
  margin: 2em 0 0.6em;
}

/* ==========================================================================
   19B. ABOUT ME PAGE (page-about.php)
   ========================================================================== */

.va-about {
  background: var(--paper);
}

.va-about__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 56px var(--pad-x) 80px;
}

.va-about__title {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 32px;
  letter-spacing: 0.01em;
}

.va-about__hero-image {
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 48px;
}

.va-about__hero-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Intro row: bold statement + small aside note */
.va-about__intro {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 48px;
  margin-bottom: 56px;
}

.va-about__intro-main p {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
}

.va-about__intro-aside {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 6px 0 0;
  padding-top: 6px;
}

/* About / Why columns + secondary photo.
   Grid areas let the photo sit visually between the two text blocks on
   mobile (matching the design) while floating to the right on desktop,
   without needing to reorder the markup itself. */
.va-about__columns {
  display: grid;
  grid-template-columns: 1fr 1fr minmax(260px, 320px);
  grid-template-areas: "about why image";
  gap: 40px;
  align-items: start;
}

.va-about__col--about { grid-area: about; }
.va-about__col--why   { grid-area: why; }
.va-about__col-image  { grid-area: image; }

.va-about__col-heading {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 14px;
}

.va-about__col-text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-soft);
}

.va-about__col-text p {
  margin: 0 0 1.1em;
}

.va-about__col-text p:last-child {
  margin-bottom: 0;
}

.va-about__col-image {
  border-radius: 20px;
  overflow: hidden;
}

.va-about__col-image img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

/* Closing CTA band */
.va-about__cta {
  background: var(--paper-cream);
  padding: 72px var(--pad-x);
  text-align: center;
}

.va-about__cta-inner {
  max-width: 720px;
  margin: 0 auto;
}

.va-about__cta-eyebrow {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 28px;
}

.va-about__cta-text {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 28px;
}

.va-about__cta-link {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--rust);
  text-decoration: underline;
}

.va-about__cta-link:hover {
  color: var(--ink);
}

@media (max-width: 900px) {
  .va-about__columns {
    grid-template-columns: 1fr;
    grid-template-areas:
      "about"
      "image"
      "why";
    gap: 32px;
  }

  .va-about__col-image img {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 768px) {
  .va-about__inner {
    padding: 40px var(--pad-x) 56px;
  }

  .va-about__title {
    font-size: 38px;
  }

  .va-about__hero-image img {
    aspect-ratio: 4 / 3;
  }

  .va-about__intro {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 40px;
  }

  .va-about__intro-main p {
    font-size: 24px;
  }

  .va-about__cta {
    padding: 56px var(--pad-x);
  }

  .va-about__cta-text {
    font-size: 22px;
  }
}

/* ==========================================================================
   20. INDEX / BLOG
   ========================================================================== */

.va-index__header {
  margin-bottom: 40px;
}

.va-index__grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.va-index__post {
  background: var(--paper-light);
  border: 1px solid var(--paper-mid);
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 280px 1fr;
}

.va-index__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.va-index__post-body {
  padding: 24px 28px;
}

.va-index__date {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--olive);
  margin-bottom: 8px;
  display: block;
}

.va-index__post-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 12px;
  line-height: 1.2;
}

.va-index__post-title a {
  color: inherit;
  text-decoration: none;
}

.va-index__post-title a:hover {
  color: var(--rust);
}

.va-index__excerpt {
  color: var(--ink-soft);
  line-height: 1.7;
  margin-bottom: 18px;
}

/* ==========================================================================
   21. 404 PAGE
   ========================================================================== */

.va-404 {
  background: var(--paper);
}

.va-404__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 80px var(--pad-x);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.va-404__illustration {
  width: 100%;
  max-width: 440px;
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(44, 53, 49, 0.18);
}

.va-404__code {
  display: block;
  font-family: var(--font-display);
  font-size: 100px;
  font-weight: 700;
  color: var(--paper-mid);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}

.va-404__title {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 600;
  text-transform: none;
  color: var(--ink);
  letter-spacing: 0.02em;
  margin-bottom: 16px;
}

.va-404__desc {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 32px;
}

.va-404__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ==========================================================================
   22. RESPONSIVE
   ========================================================================== */

@media (max-width: 1100px) {
  :root {
    --pad-x: 32px;
  }

  .va-hero__inner {
    grid-template-columns: 1fr;
  }

  .va-hero__prints {
    display: none;
  }

  .va-hero__title {
    font-size: 46px;
  }

  .va-events-section__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .va-archive-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .va-single-body__inner {
    grid-template-columns: 1fr;
  }

  .va-single-body__right {
    position: static;
  }

  .va-single-hero__title {
    font-size: 52px;
  }

  .va-fm-cards {
    grid-template-columns: 1fr;
  }

  .va-404__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .va-404__illustration {
    margin: 0 auto;
  }

  .va-404__actions {
    justify-content: center;
  }

  .va-index__post {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  :root {
    --pad-x: 20px;
  }

  .va-hero {
    min-height: 520px;
  }

  .va-hero__inner {
    padding-bottom: 16px;
    margin-bottom: 16px;
  }

  .va-nav__links {
    display: none;
  }

  .va-nav__hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* When toggled open via main.js's initMobileNav(), .va-nav__links drops
     down as a full-width panel directly beneath the sticky header instead
     of staying hidden. .va-nav is already position:sticky (see rule near
     the top of this file), which is enough to anchor this absolutely
     positioned dropdown. */
  .va-nav--mobile-open .va-nav__links {
    display: block;
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--paper);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 200;
  }

  .va-nav--mobile-open .va-nav__links ul,
  .va-nav--mobile-open .va-nav__links > ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--pad-x) 16px;
    width: 100%;
  }

  .va-nav--mobile-open .va-nav__links li {
    width: 100%;
    text-align: center;
  }

  .va-nav--mobile-open .va-nav__links a {
    padding: 14px 4px;
    font-size: 15px;
    border-bottom: 1px solid var(--paper-mid);
    border-radius: 0;
    width: 100%;
    text-align: center;
  }

  .va-nav--mobile-open .va-nav__links li:last-child a {
    border-bottom: none;
  }

  /* The CTA already stands out via background color; drop the extra
     border-bottom override so it doesn't get a stray line under it from
     the rule above, and give it some breathing room from the link list. */
  .va-nav--mobile-open .va-nav__cta {
    margin-top: 10px;
    text-align: center;
    border-bottom: none !important;
  }

  /* Submenu on mobile: hover doesn't exist on touch, so rather than try
     to replicate desktop's hover-reveal dropdown, the submenu just shows
     as an always-visible indented section directly under its parent
     item once the whole mobile panel is open. Overrides the desktop
     absolute-positioning/opacity-hidden rules above, which don't apply
     inside the mobile panel context. */
  .va-nav--mobile-open .menu-item-has-children > a::after {
    display: none; /* desktop-only chevron, redundant once always-expanded */
  }

  .va-nav--mobile-open .menu-item-has-children > a {
    justify-content: center;
  }

  .va-nav--mobile-open .sub-menu,
  .va-nav--mobile-open .menu-item-has-children ul {
    position: static;
    display: block;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
    background: rgba(42, 35, 23, 0.03);
    margin: 0;
    padding: 0;
    min-width: 0;
  }

  .va-nav--mobile-open .sub-menu a {
    padding-left: 4px;
    font-size: 14px;
    text-align: center;
  }

  .va-hero__title {
    font-size: 34px;
  }

  .va-archive-hero__title {
    font-size: 34px;
  }

  .va-single-hero__title {
    font-size: 36px;
  }

  .va-single-hero {
    height: 400px;
  }

  .va-events-section__grid {
    grid-template-columns: 1fr;
  }

  /* The eyebrow/title/button row above the grid used a 3-item flex
     space-between layout that, once it had to wrap at this width, packed
     the first two items onto one line and pushed the button to its own
     line below — the disorganized "GRAVEL & ROAD ... EVENTS" / button
     underneath layout seen on mobile. Stack them top-to-bottom instead. */
  .va-events-section__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .va-archive-grid {
    grid-template-columns: 1fr;
  }

  .va-filter-bar__inner {
    gap: 8px;
  }

  .va-filter-bar__cats,
  .va-filter-bar__tags {
    flex-wrap: nowrap;
    /* Bleed the row out to the true screen edges, cancelling the parent
       .va-filter-bar__inner's padding -- that padding only ever created a
       gutter at scrollLeft:0; the moment the row scrolled even slightly,
       it was just ordinary scrollable space that vanished for good,
       leaving pills flush-cropped against the raw edge with no margin. */
    margin-left: calc(-1 * var(--pad-x));
    margin-right: calc(-1 * var(--pad-x));
  }

  .va-filter-bar__cats .va-filter-tabs,
  .va-filter-bar__tags .va-filter-tabs,
  .va-filter-bar__tags .va-filter-pills {
    /* The gutter now lives INSIDE the scrollable track itself, so it's
       part of the scroll content rather than a static ancestor gap --
       and scroll-padding tells the snap logic to always land a full pill
       with this same margin, at the start, the end, and everywhere in
       between, instead of snapping flush with zero margin. */
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
    scroll-padding-left: var(--pad-x);
    scroll-padding-right: var(--pad-x);
  }

  .va-footer__top {
    flex-direction: column;
    gap: 36px;
  }

  .va-footer__nav {
    gap: 36px;
  }

  .va-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .va-404__code {
    font-size: 64px;
  }

  .va-404__title {
    font-size: 30px;
  }
}

/* =============================================================================
   Single Post (Field Journal Article) — single.php

   single.php reuses the same .va-single-hero / .va-single-body /
   .va-single-section / .va-event-content classes defined above for
   single-ultra_cycling_events.php (see "15. SINGLE EVENT BODY" and the
   hero rules just before it), plus the .va-single-body__inner--full
   modifier (defined alongside .va-single-body__inner). The rules below
   are the article-specific extras that have no event-template
   equivalent: tag pills, pagination links, prev/next nav, and comments.
   ============================================================================= */

.va-article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--paper-mid);
}

.va-article-tags__tag {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-soft);
  background: var(--paper-mid);
  padding: 5px 10px;
  border-radius: 3px;
  text-decoration: none;
}

.va-article-pages {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 28px;
}

.va-article-nav {
  max-width: 720px;
  margin: 0 auto 56px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.va-article-nav__link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border: 1.5px solid var(--paper-mid);
  border-radius: 6px;
  text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.va-article-nav__link:hover {
  border-color: var(--gold);
  background: var(--paper-light);
}

.va-article-nav__link--next {
  text-align: right;
  align-items: flex-end;
}

.va-article-nav__label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rust);
}

.va-article-nav__title {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.4;
}

.va-article-comments {
  max-width: 720px;
  margin: 0 auto 64px;
  padding: 0 24px;
}

@media (max-width: 640px) {
  .va-article-nav {
    grid-template-columns: 1fr;
  }

  .va-article-nav__link--next {
    text-align: left;
    align-items: flex-start;
  }
}

/* ==========================================================================
   PRE-RACE CHECKLIST
   ========================================================================== */

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.va-checklist-hero .va-archive-hero__inner {
  max-width: 720px;
}

/* ── Mode toggle (segmented control) ─────────────────────────────────────── */
.va-checklist-mode {
  display: inline-flex;
  background: rgba(0,0,0,0.25);
  border-radius: 10px;
  padding: 4px;
  gap: 4px;
  margin-top: 28px;
}

.va-checklist-mode__btn {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(244, 236, 219, 0.6);
  background: transparent;
  border: none;
  border-radius: 7px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.va-checklist-mode__btn.active {
  background: var(--rust);
  color: var(--paper-light);
}

/* ── Progress bar ─────────────────────────────────────────────────────────── */
.va-checklist-progress {
  background: var(--paper-mid);
  border-bottom: 2px solid rgba(185, 168, 120, 0.4);
  padding: 14px 0;
  position: sticky;
  top: var(--nav-offset, var(--nav-h)); /* sits just below the sticky nav bar */
  z-index: 40;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: top 0.25s ease;
}

/* Push body content below the progress bar so first item isn't hidden */
/* ── Checklist PDF downloads bar ─────────────────────────────────────────── */
.va-checklist-downloads {
  background: var(--paper);
  border-bottom: 1px solid rgba(185, 168, 120, 0.3);
}

.va-checklist-downloads__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 900px;
  margin: 0 auto;
  padding: 10px var(--pad-x);
  flex-wrap: wrap;
}

.va-checklist-downloads__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-right: 4px;
}

.va-checklist-downloads__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rust);
  border: 1px solid var(--rust);
  border-radius: 4px;
  padding: 5px 10px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.va-checklist-downloads__btn:hover {
  background: var(--rust);
  color: var(--paper-light);
}

.va-checklist-body {
  padding-top: 16px;
}

.va-checklist-progress__inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: flex;
  align-items: center;
  gap: 16px;
}

.va-checklist-progress__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--olive);
  white-space: nowrap;
  flex-shrink: 0;
}

.va-checklist-progress__bar {
  flex: 1;
  height: 6px;
  background: var(--paper);
  border-radius: 3px;
  overflow: hidden;
}

.va-checklist-progress__fill {
  height: 100%;
  background: var(--gold);
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* ── Body layout ──────────────────────────────────────────────────────────── */
.va-checklist-body .va-archive-body__inner {
  max-width: 900px;
}

/* Reset link -- moved into the progress bar's own row (was previously a
   separate full-width button row below it); styled as a plain text link
   rather than a button, since it now sits inline with the progress label
   and bar rather than needing its own visual weight as a standalone CTA. */
.va-checklist-reset-link {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--rust);
  background: none;
  border: none;
  padding: 4px 2px;
  margin: 0;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.va-checklist-reset-link:hover {
  opacity: 0.7;
}

/* ── Category section ─────────────────────────────────────────────────────── */
.va-checklist-category {
  margin-bottom: 40px;
}

.va-checklist-category__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 2px solid var(--paper-mid);
  padding-bottom: 10px;
  margin-bottom: 8px;
}

.va-checklist-category__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: 0;
}

.va-checklist-category__count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--olive);
  text-transform: uppercase;
}

/* ── Item list ────────────────────────────────────────────────────────────── */
.va-checklist-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.va-checklist-item {
  border-bottom: 1px solid var(--paper-mid);
}

.va-checklist-item__label {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 4px;
  cursor: pointer;
  transition: background 0.15s;
}

.va-checklist-item__label:hover {
  background: rgba(185, 168, 120, 0.06);
}

/* Hide native checkbox */
.va-checklist-item__checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Custom checkbox */
.va-checklist-item__check {
  width: 20px;
  height: 20px;
  border: 2px solid var(--olive);
  border-radius: 5px;
  flex-shrink: 0;
  margin-top: 2px;
  transition: border-color 0.15s, background 0.15s;
  position: relative;
}

.va-checklist-item__checkbox:checked ~ .va-checklist-item__check {
  background: var(--rust);
  border-color: var(--rust);
}

.va-checklist-item__checkbox:checked ~ .va-checklist-item__check::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 6px;
  height: 10px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

/* Text area */
.va-checklist-item__text {
  flex: 1;
  min-width: 0;
}

.va-checklist-item__name {
  display: block;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  transition: color 0.15s;
}

.va-checklist-item__note {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--olive);
  margin-top: 3px;
  line-height: 1.5;
}

/* Checked state: strike through name */
.va-checklist-item.checked .va-checklist-item__name {
  text-decoration: line-through;
  color: var(--olive);
}

/* Required/Recommended badge */
.va-checklist-item__badge {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 4px;
  flex-shrink: 0;
  align-self: center;
}

.va-checklist-item__badge--required {
  background: rgba(168, 62, 44, 0.12);
  color: var(--rust);
}

.va-checklist-item__badge--optional {
  background: var(--paper-mid);
  color: var(--olive);
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .va-checklist-mode__btn {
    padding: 9px 14px;
    font-size: 11px;
  }

  .va-checklist-item__badge {
    display: none;
  }

  .va-checklist-progress__inner {
    flex-wrap: wrap;
    gap: 8px 12px;
  }

  .va-checklist-progress__label {
    flex: 1;
  }

  .va-checklist-progress__bar {
    flex: 1 1 100%; /* overrides the base flex: 1 (flex-basis: 0%), which was preventing width:100% from actually taking effect on this flex item and causing it to squeeze onto the same row instead of wrapping */
    width: 100%;
    order: 3; /* bar drops to its own full-width row below label + reset */
  }
}

/* ==========================================================================
   MICRO-ANIMATIONS — SCROLL REVEAL
   ========================================================================== */

/* Base state: slightly offset down + invisible, but NOT display:none or
   visibility:hidden -- if JS fails for any reason, content still exists
   in its final position, just without the animation. Kept subtle (16px
   offset, not 60px+) so it reads as a gentle rise, not a slide-in effect,
   matching the restrained feel of the existing event card hover. */
.va-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.va-reveal.va-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger modifiers for grids of cards, so siblings don't all animate in
   simultaneously -- small, deliberately restrained increments. */
.va-reveal--d1 { transition-delay: 0.08s; }
.va-reveal--d2 { transition-delay: 0.16s; }
.va-reveal--d3 { transition-delay: 0.24s; }
.va-reveal--d4 { transition-delay: 0.32s; }
.va-reveal--d5 { transition-delay: 0.4s; }
.va-reveal--d6 { transition-delay: 0.48s; }

/* Respect reduced-motion preference: skip the animation, show content
   in its final state immediately. */
@media (prefers-reduced-motion: reduce) {
  .va-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   MICRO-ANIMATIONS — HOVER STATES
   ========================================================================== */

/* Nav links: underline animation removed per request -- plain hover only */
.va-nav__links a {
  position: relative;
}

/* Buttons: gentle lift + shadow, same language as the event card hover
   (translateY + shadow, 0.22s ease) so it reads as the same design
   vocabulary rather than a different animation style. */
.va-btn {
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.va-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(44, 53, 49, 0.15);
}

.va-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(44, 53, 49, 0.12);
}

/* Tabs and pills: gentle background/border transition, no movement
   (movement on small inline controls reads as jittery rather than smooth). */
.va-tab,
.va-pill {
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.va-tab:hover:not(.active):not(.va-tab--active),
.va-pill:hover:not(.active):not(.va-pill--active) {
  transform: translateY(-1px);
}

/* Field Manual cards: same lift language as event cards, slightly smaller
   since these cards are denser/more numerous on the page. */
.va-fm-card {
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.va-fm-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(44, 53, 49, 0.12);
}

/* Checklist items: subtle background tint on the row, already present
   via .va-checklist-item__label:hover -- extending the transition to be
   slightly smoother/longer here for consistency with the rest of the site. */
.va-checklist-item__label {
  transition: background 0.18s ease;
}

/* Footer brand logo: very subtle scale on hover, signals
   interactivity without being showy on something users rarely hover.
   (Nav logo animation removed per request -- main nav logo is now static.) */
.va-footer__brand svg {
  transition: transform 0.25s ease;
}

.va-footer__brand:hover svg {
  transform: scale(1.04);
}

/* Share icon buttons on the single event page sidebar */
.va-share-btn {
  transition: transform 0.18s ease, background 0.18s ease, opacity 0.18s ease;
}

.va-share-btn:hover {
  transform: translateY(-2px);
}

/* Disable all of the above for users who've asked for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .va-btn,
  .va-tab,
  .va-pill,
  .va-fm-card,
  .va-event-card,
  .va-checklist-item__label,
  .va-footer__brand svg,
  .va-share-btn {
    transition: none !important;
  }

  .va-btn:hover,
  .va-tab:hover,
  .va-pill:hover,
  .va-fm-card:hover,
  .va-event-card:hover,
  .va-footer__brand:hover svg,
  .va-share-btn:hover {
    transform: none !important;
  }
}

/* ==========================================================================
   PACE & STRATEGY CALCULATOR
   ========================================================================== */

.va-pc {
  background: var(--paper);
  padding: 56px 0 80px;
}

.va-pc__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.va-pc__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 32px;
}

.va-pc__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rust);
  margin: 0 0 6px;
}

.va-pc__title {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}

/* ── Mode segmented control ──────────────────────────────────────────────── */
.va-pc-mode {
  display: inline-flex;
  background: var(--paper-mid);
  border-radius: 10px;
  padding: 4px;
  gap: 4px;
  align-self: center;
}

.va-pc-mode__btn {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-warm);
  background: transparent;
  border: none;
  border-radius: 7px;
  padding: 10px 18px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}

.va-pc-mode__btn.active {
  background: var(--rust);
  color: var(--paper-light);
}

.va-pc-mode__btn:hover:not(.active) {
  background: rgba(42, 35, 23, 0.08);
}

/* ── Layout grid ──────────────────────────────────────────────────────────── */
.va-pc__grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.va-pc-panel {
  background: var(--paper-light);
  border: 1px solid var(--paper-mid);
  border-radius: 12px;
  padding: 28px;
}

.va-pc-panel__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0 0 18px;
}

.va-pc-panel__label--rust {
  color: var(--rust);
}

/* ── Terrain selector ─────────────────────────────────────────────────────── */
.va-pc-terrain {
  display: flex;
  background: var(--paper-mid);
  border-radius: 9px;
  padding: 4px;
  gap: 4px;
  margin-bottom: 12px;
}

.va-pc-terrain__btn {
  flex: 1;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-warm);
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 10px 8px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.va-pc-terrain__btn.active {
  background: var(--rust);
  color: var(--paper-light);
}

.va-pc-terrain__btn:hover:not(.active) {
  background: rgba(42, 35, 23, 0.08);
}

/* ── Unit toggle (km/mi) ── same visual language as terrain selector ── */
.va-pc-unit {
  display: flex;
  background: var(--paper-mid);
  border-radius: 9px;
  padding: 4px;
  gap: 4px;
  margin-bottom: 20px;
}

.va-pc-unit__btn {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-warm);
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 8px 8px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.va-pc-unit__btn.active {
  background: var(--rust);
  color: var(--paper-light);
}

.va-pc-unit__btn:hover:not(.active) {
  background: rgba(42, 35, 23, 0.08);
}

.va-pc-terrain__note {
  font-family: var(--font-body);
  font-size: 13px;
  font-style: italic;
  color: var(--olive);
  line-height: 1.5;
  margin: 0 0 24px;
}

/* ── Slider fields ────────────────────────────────────────────────────────── */
.va-pc-field {
  margin-bottom: 22px;
}

.va-pc-field__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}

.va-pc-field__head label {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.va-pc-field__val {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.va-pc-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--paper-mid);
  outline: none;
  cursor: pointer;
}

.va-pc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--rust);
  border: 2px solid var(--paper-light);
  box-shadow: 0 1px 4px rgba(44, 53, 49, 0.25);
  cursor: pointer;
}

.va-pc-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--rust);
  border: 2px solid var(--paper-light);
  box-shadow: 0 1px 4px rgba(44, 53, 49, 0.25);
  cursor: pointer;
}

.va-pc-rule {
  border: none;
  border-top: 1px dashed var(--paper-mid);
  margin: 8px 0 16px;
}

.va-pc-profile-line {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--olive);
  margin: 0;
}

/* ── Right column ─────────────────────────────────────────────────────────── */
.va-pc-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Stat cards ───────────────────────────────────────────────────────────── */
.va-pc-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* Avg Route Speed and Avg Moving Speed sit together as a highlighted pair
   spanning the two right-hand columns, reading as summary-level numbers
   distinct in kind from the four day-level stats above them. */
.va-pc-stat--highlight {
  grid-column: span 2;
  background: var(--paper);
  border-color: var(--rust);
}

.va-pc-stat__sublabel {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--olive);
  margin: 6px 0 0;
}
.va-pc-stat {
  background: var(--paper-light);
  border: 1px solid var(--paper-mid);
  border-radius: 12px;
  padding: 20px;
}

.va-pc-stat__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0 0 10px;
}

.va-pc-stat__val {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

.va-pc-stat__unit {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--olive);
}

/* ── Daily Load bar ───────────────────────────────────────────────────────── */
.va-pc-load__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.va-pc-load__head .va-pc-panel__label {
  margin-bottom: 0;
}

.va-pc-load__fatigue {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--olive);
}

.va-pc-load__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 16px 0 10px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}

.va-pc-load__awake {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  color: var(--olive);
}

.va-pc-load__bar {
  position: relative;
  height: 14px;
  border-radius: 7px;
  background: var(--paper-mid);
  overflow: hidden;
}

.va-pc-load__fill {
  height: 100%;
  border-radius: 7px;
  background: var(--gold); /* Aqua Mist -- sustainable/good state */
  transition: width 0.25s ease, background 0.2s ease;
}

.va-pc-load__fill.va-pc-load-fill--warn {
  background: #c99a3f; /* amber -- distinct from Aqua Mist sustainable state and rust bad state */
}

.va-pc-load__fill.va-pc-load-fill--bad {
  background: var(--rust);
}

.va-pc-load__recovery-line {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--ink);
  opacity: 0.4;
}

.va-pc-load__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--olive);
}

.va-pc-load__scale-mid {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Status / insights panel ──────────────────────────────────────────────── */
.va-pc-status {
  background: var(--ink);
  border-radius: 12px;
  padding: 28px;
  flex: 1;
}

.va-pc-status__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(244, 236, 219, 0.7);
  margin-bottom: 14px;
}

.va-pc-status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4d7c4a;
}

.va-pc-status--warn .va-pc-status__dot { background: var(--gold); }
.va-pc-status--bad .va-pc-status__dot { background: var(--rust); }

.va-pc-status__headline {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--paper-light);
  margin: 0 0 22px;
}

.va-pc-insights {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.va-pc-insight {
  display: flex;
  gap: 14px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: rgba(244, 236, 219, 0.88);
}

.va-pc-insight__num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--rust);
  flex-shrink: 0;
  padding-top: 2px;
}

/* ── Fuel & Nutrition section ─────────────────────────────────────────────── */
.va-pc-nutrition {
  margin-top: 8px;
}

.va-pc-nutrition__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.va-pc-nutrition__title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.va-pc-nutrition__burn {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--olive);
}

.va-pc-stats--nutrition .va-pc-stat {
  background: var(--paper);
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .va-pc__grid {
    grid-template-columns: 1fr;
  }

  .va-pc-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .va-pc__title {
    font-size: 28px;
  }

  .va-pc-status__headline {
    font-size: 20px;
  }

  /* ── Mobile compactness pass: more of the calculator's results fit on
     screen without scrolling, since that's the actual usability goal
     (not just smaller numbers for their own sake). ──────────────────── */

  .va-pc {
    padding: 32px 0 56px; /* was 56px 0 80px */
  }

  .va-pc__head {
    margin-bottom: 20px; /* was 32px */
  }

  .va-pc__grid {
    gap: 14px; /* was 24px */
  }

  .va-pc-right {
    gap: 10px; /* was 16px */
  }

  .va-pc-stats {
    gap: 10px; /* was 16px */
  }

  /* Eyebrow label ("Ultra-Cycling · Pace Engine") hidden on mobile --
     the page title alone is enough context at this size, and removing
     it recovers vertical space for the actual results below. */
  .va-pc__eyebrow {
    display: none;
  }

  /* Panel padding 28px -> 16px (inputs panel, status/insights panel) */
  .va-pc-panel,
  .va-pc-status {
    padding: 16px;
  }

  /* Slider thumb: 18px is comfortable for a mouse cursor but small for a
     fingertip -- 28px gives a genuinely easier touch target without
     looking oversized relative to the rest of the compact mobile layout. */
  .va-pc-slider::-webkit-slider-thumb {
    width: 28px;
    height: 28px;
  }

  .va-pc-slider::-moz-range-thumb {
    width: 28px;
    height: 28px;
  }

  /* Slider field blocks: tighter vertical rhythm between Distance,
     Elevation, Days, and Sleep so all four fit with less scrolling. */
  .va-pc-field {
    margin-bottom: 14px; /* was 22px */
  }

  .va-pc-field__head {
    margin-bottom: 6px; /* was 8px */
  }

  .va-pc-terrain {
    margin-bottom: 8px; /* was 12px */
  }

  .va-pc-terrain__note {
    margin-bottom: 16px; /* was 24px */
  }

  .va-pc-nutrition {
    margin-top: 4px; /* was 8px */
  }

  .va-pc-nutrition__head {
    margin-bottom: 14px; /* was 24px */
  }

  /* Result stat cards (Daily Distance, Daily Climbing, etc.) -- tightened
     for consistency with the rest of the compactness pass above. */
  .va-pc-stat {
    padding: 14px; /* was 20px */
  }
}

@media (max-width: 600px) {
  .va-pc__head {
    flex-direction: column;
  }

  .va-pc-mode {
    width: 100%;
  }

  .va-pc-mode__btn {
    flex: 1;
    padding: 10px 6px;
  }

  .va-pc-stats,
  .va-pc-stats--nutrition {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==========================================================================
   WOOCOMMERCE — SINGLE PRODUCT PAGE
   ========================================================================== */

/* ── WooCommerce global resets inside VeloAtlas context ─────────────────── */
.woocommerce-message,
.woocommerce-info {
  background: var(--paper-light);
  border-top-color: var(--rust);
  color: var(--ink);
}

.woocommerce-message::before { color: var(--rust); }

/* ── Page layout ─────────────────────────────────────────────────────────── */
.va-shop-product {
  background: var(--paper);
  padding: 56px 0 80px;
}

.va-shop-product__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.va-shop-product__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
  margin-bottom: 64px;
}

/* ── Gallery ─────────────────────────────────────────────────────────────── */
.va-shop-product__img-wrap {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
}

.va-shop-product__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  background: var(--paper-mid);
}

.va-shop-product__thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.va-shop-product__thumb {
  width: 72px;
  height: 72px;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid transparent;
  background: none;
  padding: 0;
  cursor: pointer;
  transition: border-color 0.18s ease;
}

.va-shop-product__thumb.active,
.va-shop-product__thumb:hover {
  border-color: var(--rust);
}

.va-shop-product__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Product details column ─────────────────────────────────────────────── */
.va-shop-product__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rust);
  margin: 0 0 10px;
}

.va-shop-product__title {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 16px;
  line-height: 1.1;
}

.va-shop-product__price {
  margin-bottom: 20px;
}

.va-shop-product__price .price,
.va-shop-product__price .woocommerce-Price-amount {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--ink);
}

.va-shop-product__desc {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px dashed var(--paper-mid);
}

/* ── WooCommerce variation/quantity/cart form ───────────────────────────── */
.va-shop-product__details .variations {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.va-shop-product__details .variations td,
.va-shop-product__details .variations th {
  padding: 0;
  border: none;
  text-align: left;
  vertical-align: top;
}

.va-shop-product__details .variations label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink);
  display: block;
  margin-bottom: 8px;
}

.va-shop-product__details .variations select,
.va-shop-product__details select {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink);
  background: var(--paper-light);
  border: 1px solid var(--paper-mid);
  border-radius: 8px;
  padding: 12px 16px;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  margin-bottom: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a4231' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px;
}

.va-shop-product__details .quantity {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.va-shop-product__details .quantity label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink);
}

.va-shop-product__details .quantity input[type="number"] {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper-light);
  border: 1px solid var(--paper-mid);
  border-radius: 8px;
  padding: 12px 16px;
  width: 80px;
  text-align: center;
  -moz-appearance: textfield;
}

.va-shop-product__details .quantity input[type="number"]::-webkit-inner-spin-button,
.va-shop-product__details .quantity input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Add to cart button */
.va-shop-product__details .single_add_to_cart_button,
.va-shop-product__details .button {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-light);
  background: var(--rust);
  border: none;
  border-radius: 8px;
  padding: 16px 32px;
  cursor: pointer;
  width: 100%;
  transition: background 0.18s ease, transform 0.15s ease;
  display: block;
  text-align: center;
  text-decoration: none;
}

.va-shop-product__details .single_add_to_cart_button:hover,
.va-shop-product__details .button:hover {
  background: var(--ink);
  transform: translateY(-1px);
}

/* Reset variation */
.va-shop-product__details .reset_variations {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--olive);
  text-decoration: underline;
  cursor: pointer;
  display: inline-block;
  margin-top: 8px;
}

/* ── Long description section ───────────────────────────────────────────── */
.va-shop-product__long-desc {
  border-top: 1px solid var(--paper-mid);
  padding-top: 48px;
  max-width: 680px;
}

.va-shop-product__section-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.05em;
  color: var(--ink);
  margin: 0 0 20px;
}

.va-shop-product__body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-soft);
}

.va-shop-product__body p {
  margin-bottom: 1em;
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .va-shop-product {
    padding: 32px 0 56px;
  }

  .va-shop-product__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .va-shop-product__img-wrap {
    position: static;
  }

  .va-shop-product__title {
    font-size: 26px;
  }
}

/* ── WooCommerce-generated elements inside our product template ─────────── */

/* Title output by woocommerce_template_single_title */
.va-shop-product__details .product_title {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 16px;
  line-height: 1.1;
}

/* Price output by woocommerce_template_single_price */
.va-shop-product__details .woocommerce-Price-amount,
.va-shop-product__details p.price {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--ink);
  display: block;
  margin-bottom: 20px;
}

/* Short description */
.va-shop-product__details .woocommerce-product-details__short-description {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px dashed var(--paper-mid);
}

/* Add to cart button -- high specificity to override WooCommerce defaults */
.va-shop-product__details .single_add_to_cart_button.button,
.va-shop-product__details button.single_add_to_cart_button,
.va-shop-product__details input.button,
.woocommerce .va-shop-product__details .button {
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--paper-light) !important;
  background: var(--rust) !important;
  background-color: var(--rust) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 16px 32px !important;
  cursor: pointer !important;
  width: 100% !important;
  transition: background 0.18s ease !important;
  display: block !important;
  text-align: center !important;
}

.va-shop-product__details .single_add_to_cart_button.button:hover,
.va-shop-product__details button.single_add_to_cart_button:hover {
  background: var(--ink) !important;
  background-color: var(--ink) !important;
}

/* SKU / meta -- hidden since we removed the hook but just in case */
.va-shop-product__details .product_meta {
  display: none;
}

/* ==========================================================================
   WOOCOMMERCE — SHOP ARCHIVE PAGE
   ========================================================================== */

.va-shop-archive {
  background: var(--paper);
  padding: 40px 0 80px;
}

.va-shop-archive__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.va-shop-archive__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.va-shop-archive__empty {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--olive);
}

/* ── Product card ─────────────────────────────────────────────────────────── */
.va-shop-card {
  background: var(--paper-light);
  border: 1px solid var(--paper-mid);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  display: block;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.va-shop-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(44, 53, 49, 0.12);
}

.va-shop-card__img-wrap {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--paper-mid);
}

.va-shop-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.va-shop-card:hover .va-shop-card__img {
  transform: scale(1.03);
}

.va-shop-card__body {
  padding: 20px;
}

.va-shop-card__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: 0 0 8px;
}

.va-shop-card__price {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 14px;
}

.va-shop-card__price .woocommerce-Price-amount {
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
}

.va-shop-card__cta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rust);
}

@media (max-width: 768px) {
  .va-shop-archive__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .va-shop-archive__grid {
    grid-template-columns: 1fr;
  }
}

/* ── WooCommerce notices (cart confirmation, errors etc.) ────────────────── */
.woocommerce-notices-wrapper {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background: var(--paper-light);
  border: none;
  border-bottom: 3px solid var(--rust);
  border-radius: 0;
  padding: 14px var(--pad-x);
  margin-bottom: 0;
  list-style: none;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 16px;
}

.woocommerce-message::before,
.woocommerce-info::before {
  display: none;
}

.woocommerce-message .button,
.woocommerce-info .button {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--rust) !important;
  background: none !important;
  border: 1px solid var(--rust) !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  white-space: nowrap !important;
  width: auto !important;
}

/* ── WooCommerce gallery wrapper compatibility ───────────────────────────── */
/* WooCommerce adds its own styles to .woocommerce-product-gallery and
   .woocommerce-product-gallery__image -- override those to keep our layout */
.va-shop-product__img-wrap.woocommerce-product-gallery {
  opacity: 1 !important; /* WC sets opacity:0 until JS initialises gallery */
}

.woocommerce-product-gallery__image {
  margin: 0;
  padding: 0;
}

.woocommerce-product-gallery__image img.va-shop-product__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

/* ==========================================================================
   WOOCOMMERCE — CART PAGE
   ========================================================================== */

.va-cart {
  background: var(--paper);
  padding: 56px 0 80px;
}

.va-cart__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.va-cart__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rust);
  margin: 0 0 8px;
}

.va-cart__title {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  text-transform: none;
  color: var(--ink);
  margin: 0 0 36px;
  letter-spacing: -0.01em;
}

.va-cart__grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 40px;
  align-items: start;
}

/* ── Cart item rows ─────────────────────────────────────────────────────── */
.va-cart__items {
  background: var(--paper-light);
  border: 1px solid var(--paper-mid);
  border-radius: 12px;
  overflow: hidden;
}

.va-cart-item {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--paper-mid);
}

.va-cart-item:last-of-type {
  border-bottom: none;
}

.va-cart-item__img img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

.va-cart-item__name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin-bottom: 4px;
}

.va-cart-item__name a {
  color: inherit;
  text-decoration: none;
}

.va-cart-item__name a:hover {
  color: var(--rust);
}

/* Variation data (Size: S / Color: Forest) */
.va-cart-item__details dl.variation {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--olive);
  letter-spacing: 0.04em;
  margin: 4px 0 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.va-cart-item__details dl.variation dt,
.va-cart-item__details dl.variation dd {
  margin: 0;
  display: inline;
}

.va-cart-item__details dl.variation dt::after {
  content: ':';
}

.va-cart-item__price {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}

.va-cart-item__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

/* Quantity input in cart */
.va-cart-item__actions .quantity {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--paper-mid);
  border-radius: 8px;
  overflow: hidden;
  background: var(--paper);
}

.va-cart-item__actions .quantity input[type="number"] {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  border: none;
  padding: 8px 10px;
  width: 48px;
  text-align: center;
  -moz-appearance: textfield;
}

.va-cart-item__actions .quantity input[type="number"]::-webkit-inner-spin-button,
.va-cart-item__actions .quantity input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.va-cart-item__remove {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--olive);
  text-decoration: none;
  line-height: 1;
  transition: color 0.15s ease;
}

.va-cart-item__remove:hover {
  color: var(--rust);
}

/* Update cart button */
.va-cart__update {
  padding: 16px 24px;
  display: flex;
  justify-content: flex-end;
}

.va-cart__update-btn {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--olive);
  background: none;
  border: 1px solid var(--paper-mid);
  border-radius: 6px;
  padding: 8px 16px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.va-cart__update-btn:hover {
  color: var(--ink);
  border-color: var(--ink);
}

/* ── Cart totals sidebar ─────────────────────────────────────────────────── */
.va-cart__totals .cart_totals {
  background: var(--paper-light);
  border: 1px solid var(--paper-mid);
  border-radius: 12px;
  padding: 28px;
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  margin-top: 57px; /* visually aligns with the items table, below the Cart title */
}

.va-cart__totals h2 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink);
  margin: 0 0 20px;
}

.va-cart__totals table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.va-cart__totals table th,
.va-cart__totals table td {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink-soft);
  padding: 10px 0;
  border-bottom: 1px solid var(--paper-mid);
  text-align: left;
  vertical-align: top;
}

.va-cart__totals table td {
  text-align: right;
}

.va-cart__totals table .order-total th,
.va-cart__totals table .order-total td {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  border-bottom: none;
  padding-top: 16px;
}

/* Proceed to checkout button */
.va-cart__totals .wc-proceed-to-checkout .checkout-button,
.va-cart__totals .wc-proceed-to-checkout a.button {
  display: block !important;
  width: 100% !important;
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  color: var(--paper-light) !important;
  background: var(--rust) !important;
  background-color: var(--rust) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 24px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.18s ease !important;
  margin-top: 16px !important;
}

.va-cart__totals .wc-proceed-to-checkout .checkout-button:hover,
.va-cart__totals .wc-proceed-to-checkout a.button:hover {
  background: var(--ink) !important;
  background-color: var(--ink) !important;
}

/* Coupon field */
.va-cart__totals .woocommerce-form-coupon-toggle,
.va-cart__totals .coupon {
  margin-bottom: 16px;
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .va-cart__grid {
    grid-template-columns: 1fr;
  }

  .va-cart__totals .cart_totals {
    position: static;
  }

  .va-cart-item {
    grid-template-columns: 64px 1fr;
    grid-template-rows: auto auto;
  }

  .va-cart-item__actions {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* ==========================================================================
   WOOCOMMERCE — BLOCK CHECKOUT
   Block checkout is React-rendered and can't be overridden via PHP
   templates -- CSS is the only approach for a classic theme.
   ========================================================================== */

/* ── Page wrapper ─────────────────────────────────────────────────────────── */
.wp-block-woocommerce-checkout,
.woocommerce-checkout-payment {
  font-family: var(--font-body);
  color: var(--ink);
}

/* Remove gap between "Checkout" h1 title and the block below */
.woocommerce-checkout .va-page__title,
body.woocommerce-checkout .va-page__title {
  margin-bottom: 0 !important;
}

/* ── Section headings (Contact Information, Shipping Address etc.) ────────── */
.wp-block-woocommerce-checkout .wc-block-components-title,
.wp-block-woocommerce-checkout h2,
.wp-block-woocommerce-checkout h3 {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0.05em !important;
  color: var(--ink) !important;
}

/* ── Form fields ──────────────────────────────────────────────────────────── */
.wp-block-woocommerce-checkout .wc-block-components-text-input input,
.wp-block-woocommerce-checkout .wc-block-components-select select,
.wp-block-woocommerce-checkout input[type="text"],
.wp-block-woocommerce-checkout input[type="email"],
.wp-block-woocommerce-checkout input[type="tel"],
.wp-block-woocommerce-checkout select {
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  color: var(--ink) !important;
  background: var(--paper-light) !important;
  border: 1px solid var(--paper-mid) !important;
  border-radius: 8px !important;
}

.wp-block-woocommerce-checkout .wc-block-components-text-input input:focus,
.wp-block-woocommerce-checkout input[type="text"]:focus,
.wp-block-woocommerce-checkout input[type="email"]:focus,
.wp-block-woocommerce-checkout input[type="tel"]:focus {
  border-color: var(--rust) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(168, 62, 44, 0.12) !important;
}

.wp-block-woocommerce-checkout .wc-block-components-text-input label,
.wp-block-woocommerce-checkout label {
  font-family: var(--font-body) !important;
  color: var(--ink-soft) !important;
}

/* ── Shipping option radio buttons ───────────────────────────────────────── */
.wp-block-woocommerce-checkout .wc-block-components-shipping-rates-control__package {
  background: var(--paper-light) !important;
  border: 1px solid var(--paper-mid) !important;
  border-radius: 8px !important;
}

.wp-block-woocommerce-checkout .wc-block-components-radio-control__input:checked {
  accent-color: var(--rust);
}

/* ── Order summary sidebar ───────────────────────────────────────────────── */
.wp-block-woocommerce-checkout-order-summary-block {
  background: var(--paper-light) !important;
  border: 1px solid var(--paper-mid) !important;
  border-radius: 12px !important;
  padding: 0 !important;
  overflow: hidden;
}

/* Inner container adds its own padding — zero it and use the block's border-radius.
   Scoped to the summary/toggle wrappers only (not every child) so item rows
   keep their own internal flex layout and don't get squeezed. */
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary__toggle,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-item,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-coupon,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-footer-item {
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box;
}

.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__description {
  flex: 1;
  min-width: 0;
}

.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__total-price,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-product-price {
  flex-shrink: 0;
  white-space: nowrap;
}

.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary__toggle {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

.wc-block-checkout__sidebar {
  background: transparent !important;
  border: none !important;
}

/* Remove browser focus outline on the collapsible order summary toggle */
.wc-block-components-order-summary__toggle,
.wc-block-components-order-summary__toggle:focus,
.wc-block-components-order-summary__toggle:focus-visible,
.wp-block-woocommerce-checkout-order-summary-block button,
.wp-block-woocommerce-checkout-order-summary-block button:focus,
.wp-block-woocommerce-checkout-order-summary-block button:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-title {
  font-family: var(--font-display) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: none !important;
}

.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
  font-family: var(--font-body) !important;
  color: var(--ink-soft) !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}

/* ── Place order / payment button ────────────────────────────────────────── */
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button,
.wc-block-checkout__place-order .wc-block-components-button,
.wc-block-components-checkout-place-order-button {
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  background: var(--rust) !important;
  background-color: var(--rust) !important;
  border: none !important;
  border-radius: 8px !important;
  color: var(--paper-light) !important;
  width: 100% !important;
  padding: 16px !important;
  transition: background 0.18s ease !important;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:hover,
.wc-block-components-checkout-place-order-button:hover {
  background: var(--ink) !important;
  background-color: var(--ink) !important;
}

/* ── Coupon/discount section ─────────────────────────────────────────────── */
.wc-block-components-totals-coupon__button {
  color: var(--rust) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

/* ── Checkbox (marketing opt-in, same address etc.) ─────────────────────── */
.wp-block-woocommerce-checkout .wc-block-components-checkbox__input:checked {
  accent-color: var(--rust);
  background: var(--rust) !important;
}

/* ── Step numbers/indicators ─────────────────────────────────────────────── */
.wc-block-checkout__step-heading {
  font-family: var(--font-display) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

/* ── Block checkout spacing fixes ────────────────────────────────────────── */

/* Reduce the large vertical gaps between checkout sections */
.wp-block-woocommerce-checkout .wc-block-checkout__step,
.wc-block-checkout__step {
  margin-bottom: 24px !important;
  padding-bottom: 24px !important;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-step,
.wc-block-components-checkout-step {
  margin-bottom: 20px !important;
  padding-bottom: 20px !important;
}

/* Section heading gaps */
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__heading,
.wc-block-components-checkout-step__heading {
  margin-bottom: 14px !important;
}

/* Gap between fields within a section */
.wc-block-components-address-form,
.wc-block-checkout__contact-fields {
  gap: 12px !important;
}

/* Remove the left padding/margin from the order summary sidebar */
.wc-block-checkout__sidebar,
.woocommerce-checkout-payment {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Remove the 2em top/bottom margin that .va-page__content h2 applies
   globally -- on the checkout page this adds unwanted vertical space
   between the stepped sections */
.wp-block-woocommerce-checkout h2,
.wc-block-components-checkout-step__heading h2,
.wc-block-checkout h2 {
  margin: 0 0 14px !important;
}

/* ── Product page: quantity stepper beside size dropdown ─────────────────── */
/* WooCommerce outputs variations table then quantity as separate blocks.
   Wrap them visually into one row using flex on a shared parent. */
.va-shop-product__details .variations_form {
  display: flex;
  flex-direction: column;
}

/* Put the last variation row (size) and quantity on the same line */
.va-shop-product__details .variations {
  margin-bottom: 0 !important;
}

.va-shop-product__details .woocommerce-variation-add-to-cart {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* Quantity stepper -- +/- buttons flanking the number input */
.va-shop-product__details .quantity {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--paper-mid);
  border-radius: 8px;
  overflow: hidden;
  background: var(--paper-light);
  margin-bottom: 0;
  flex-shrink: 0;
}

.va-shop-product__details .quantity label {
  display: none; /* hidden -- quantity is self-evident next to the select */
}

.va-shop-product__details .quantity input[type="number"] {
  width: 44px !important;
  padding: 12px 4px !important;
  border: none !important;
  border-left: 1px solid var(--paper-mid) !important;
  border-right: 1px solid var(--paper-mid) !important;
  border-radius: 0 !important;
  text-align: center;
  font-size: 15px;
}

/* Add to cart button takes remaining width beside quantity */
.va-shop-product__details .woocommerce-variation-add-to-cart .single_add_to_cart_button {
  flex: 1;
  width: auto !important;
  min-width: 140px;
}

/* ── Cart totals h2 -- remove WooCommerce's own large margin ─────────────── */
.va-cart__totals .cart_totals > h2,
.va-cart__totals h2 {
  margin: 0 0 16px !important;
  padding: 0 !important;
}

/* ── Checkout section headings -- remove the huge default margins ────────── */
.wp-block-woocommerce-checkout h2,
.wc-block-components-checkout-step__heading,
.wc-block-checkout h2,
.wc-block-components-title {
  margin: 0 0 12px !important;
  padding: 0 !important;
}

/* ── Cart proceed to checkout -- higher specificity to beat WC defaults ──── */
.woocommerce .va-cart__totals .wc-proceed-to-checkout a,
.woocommerce .va-cart__totals .wc-proceed-to-checkout .button,
.va-cart__totals .wc-proceed-to-checkout a.checkout-button,
a.checkout-button.button.alt {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  color: var(--paper-light) !important;
  background: var(--rust) !important;
  background-color: var(--rust) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 24px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.18s ease !important;
  margin-top: 16px !important;
}

.woocommerce .va-cart__totals .wc-proceed-to-checkout a:hover,
a.checkout-button.button.alt:hover {
  background: var(--ink) !important;
  background-color: var(--ink) !important;
}

/* ==========================================================================
   [va_shop_banner] SHORTCODE
   ========================================================================== */

.va-shop-banner {
  display: flex;
  align-items: stretch;
  background: var(--paper-light);
  border: none;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  max-width: 760px;
  margin: 32px auto;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* Reset underlines on all children -- the banner is an <a> tag so
   any inherited text-decoration or link styles would apply throughout */
.va-shop-banner,
.va-shop-banner *,
.va-shop-banner:hover,
.va-shop-banner:visited {
  text-decoration: none !important;
}

.va-shop-banner:hover {
  box-shadow: 0 8px 28px rgba(44, 53, 49, 0.14);
  transform: translateY(-2px);
}

.va-shop-banner__img-wrap {
  flex-shrink: 0;
  width: 200px;
  overflow: hidden;
  align-self: stretch;
}

.va-shop-banner__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.va-shop-banner:hover .va-shop-banner__img {
  transform: scale(1.04);
}

.va-shop-banner__body {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

/* Free Shipping pill -- gold/olive background matching the screenshot */
.va-shop-banner__pill {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: var(--gold);
  border-radius: 6px;
  padding: 4px 10px;
}

.va-shop-banner__title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  margin: 0 !important;
}

.va-shop-banner__desc {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 !important;
}

/* CTA button */
.va-shop-banner__cta {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-light);
  background: var(--rust);
  border-radius: 8px;
  padding: 10px 20px;
  margin-top: 4px;
  transition: background 0.18s ease;
}

.va-shop-banner:hover .va-shop-banner__cta {
  background: var(--ink);
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .va-shop-banner {
    flex-direction: column;
  }

  .va-shop-banner__img-wrap {
    width: 100%;
    height: 180px; /* explicit height so object-fit:cover has something to fill */
  }

  .va-shop-banner__body {
    padding: 20px;
  }

  .va-shop-banner__title {
    font-size: 20px;
  }
}

/* ── Shop banner inside event single sidebar ─────────────────────────────── */
.va-single-body__right .va-shop-banner {
  flex-direction: column;
  max-width: 100%;
  margin: 20px 0 0;
}

.va-single-body__right .va-shop-banner__img-wrap {
  width: 100%;
  height: 160px;
}

.va-single-body__right .va-shop-banner__title {
  font-size: 18px !important;
}

/* ==========================================================================
   SHIPPING & RETURNS PAGE
   ========================================================================== */

.va-policy {
  background: var(--paper);
  padding: 64px 0 96px;
}

.va-policy__inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.va-policy__header {
  margin-bottom: 56px;
  text-align: center;
}

.va-policy__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rust);
  margin: 0 0 12px;
}

.va-policy__title {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 16px;
  line-height: 1.1;
}

.va-policy__intro {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
}

/* ── Sections ─────────────────────────────────────────────────────────────── */
.va-policy__section {
  margin-bottom: 48px;
}

.va-policy__section-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 28px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--paper-mid);
}

.va-policy__block {
  margin-bottom: 28px;
}

.va-policy__block-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.va-policy__block p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0 0 8px;
}

.va-policy__block p:last-child {
  margin-bottom: 0;
}

.va-policy__list {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 8px 0 12px 20px;
  padding: 0;
}

.va-policy__list li {
  margin-bottom: 4px;
}

.va-policy__block a,
.va-policy__section--contact a {
  color: var(--rust);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.va-policy__block a:hover,
.va-policy__section--contact a:hover {
  opacity: 0.75;
}

.va-policy__divider {
  border: none;
  border-top: 1px dashed var(--paper-mid);
  margin: 48px 0;
}

.va-policy__section--contact p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-soft);
}

@media (max-width: 600px) {
  .va-policy__title {
    font-size: 32px;
  }

  .va-policy {
    padding: 40px 0 64px;
  }
}

/* ── Cart count badge in nav ─────────────────────────────────────────────── */
.va-nav-cart-count {
  display: none; /* hidden when empty */
  position: absolute;
  top: -6px;
  right: -10px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--rust);
  color: var(--paper-light);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  border-radius: 9px;
  pointer-events: none;
}

.va-nav-cart-count--visible {
  display: inline-block;
}

/* The Cart nav link needs position:relative so the badge can be
   positioned absolutely relative to it */
.va-nav__links a[href*="cart"] {
  position: relative;
}

/* ==========================================================================
   WOOCOMMERCE BLOCK CART
   The cart is rendered as a React block (like the checkout), so PHP template
   overrides don't apply -- CSS targeting WooCommerce's block class names is
   the only approach.
   ========================================================================== */

/* ── Proceed to Checkout button ─────────────────────────────────────────── */
.wc-block-cart__submit-button,
.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-cart .wc-block-components-button:not(.wc-block-components-coupon__button) {
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--paper-light) !important;
  background: var(--rust) !important;
  background-color: var(--rust) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 16px 24px !important;
  width: 100% !important;
  transition: background 0.18s ease !important;
}

.wc-block-cart__submit-button:hover,
.wp-block-woocommerce-cart .wc-block-cart__submit-button:hover {
  background: var(--ink) !important;
  background-color: var(--ink) !important;
}

/* ── Block cart general typography ─────────────────────────────────────── */
.wp-block-woocommerce-cart {
  font-family: var(--font-body);
  color: var(--ink);
}

.wp-block-woocommerce-cart h1,
.wp-block-woocommerce-cart h2 {
  font-family: var(--font-display) !important;
  color: var(--ink) !important;
  margin: 0 0 16px !important;
}

/* ── Coupon apply button ────────────────────────────────────────────────── */
.wc-block-components-coupon__button,
.wc-block-components-totals-coupon .wc-block-components-button,
.wc-block-components-totals-coupon button[type="submit"],
.wc-block-components-totals-coupon button {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--paper-light) !important;
  background: var(--rust) !important;
  background-color: var(--rust) !important;
  border: none !important;
  border-radius: 0 6px 6px 0 !important;
  padding: 14px 20px !important;
  height: 100% !important;
}

.wc-block-components-coupon__button:hover,
.wc-block-components-totals-coupon .wc-block-components-button:hover,
.wc-block-components-totals-coupon button:hover {
  color: var(--paper-light) !important;
  background: var(--ink) !important;
  background-color: var(--ink) !important;
}

/* ── Totals section ─────────────────────────────────────────────────────── */
.wc-block-cart-items__row,
.wc-block-components-totals-item {
  font-family: var(--font-body) !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}

/* ── Coupon input field ─────────────────────────────────────────────────── */
.wc-block-components-totals-coupon__input input,
.wc-block-components-coupon input[type="text"] {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  color: var(--ink) !important;
  background: var(--paper-light) !important;
  border: 1px solid var(--paper-mid) !important;
  border-right: none !important;
  border-radius: 6px 0 0 6px !important;
  padding: 14px 16px !important;
}

.wc-block-components-totals-coupon__input input:focus,
.wc-block-components-coupon input[type="text"]:focus {
  border-color: var(--rust) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ── Free shipping overlay badge on product image ────────────────────────── */
.va-shop-product__img-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-light);
  background: var(--rust);
  border-radius: 8px;
  padding: 5px 12px;
  pointer-events: none;
}

/* ==========================================================================
   PRINTFUL SIZE GUIDE — LINK + POPUP
   Printful injects these via their WooCommerce plugin. Class names confirmed
   from Printful's plugin source. If any selector doesn't apply, inspect the
   live element and share the class name so I can update it.
   ========================================================================== */

/* ── Size Guide link ─────────────────────────────────────────────────────── */
.printful-size-guide-link,
.wc-pao-addon-size-guide a,
a.printful-size-guide,
.printful_size_guide_link {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--rust) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  text-decoration-color: rgba(168, 62, 44, 0.4) !important;
  transition: text-decoration-color 0.18s ease !important;
  display: inline-block !important;
  margin-top: 8px !important;
}

.printful-size-guide-link:hover,
a.printful-size-guide:hover,
.printful_size_guide_link:hover {
  text-decoration-color: var(--rust) !important;
}

/* ── Size Guide popup overlay ────────────────────────────────────────────── */
.printful-size-guide-popup,
.printful-size-guide-modal,
#printful-size-guide-modal,
.pf-size-guide-popup {
  font-family: var(--font-body) !important;
  color: var(--ink) !important;
}

/* Popup backdrop */
.printful-size-guide-overlay,
.printful-size-guide-modal-overlay,
.pf-size-guide-overlay {
  background: rgba(42, 35, 23, 0.7) !important;
}

/* Popup container */
.printful-size-guide-popup .popup-content,
.printful-size-guide-modal .modal-content,
.printful-size-guide-popup-content,
.pf-size-guide-content {
  background: var(--paper-light) !important;
  border-radius: 12px !important;
  border: 1px solid var(--paper-mid) !important;
  box-shadow: 0 20px 60px rgba(42, 35, 23, 0.2) !important;
  padding: 32px !important;
  font-family: var(--font-body) !important;
  color: var(--ink) !important;
}

/* Popup title */
.printful-size-guide-popup h2,
.printful-size-guide-popup h3,
.printful-size-guide-modal h2,
.printful-size-guide-modal h3,
.pf-size-guide-content h2,
.pf-size-guide-content h3 {
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin: 0 0 20px !important;
}

/* Close button */
.printful-size-guide-popup .close,
.printful-size-guide-modal .close,
.printful-size-guide-close,
.pf-size-guide-close {
  font-family: var(--font-mono) !important;
  font-size: 20px !important;
  color: var(--ink-soft) !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  transition: color 0.15s ease !important;
}

.printful-size-guide-popup .close:hover,
.printful-size-guide-close:hover,
.pf-size-guide-close:hover {
  color: var(--rust) !important;
}

/* Size table */
.printful-size-guide-popup table,
.printful-size-guide-modal table,
.pf-size-guide-content table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
}

.printful-size-guide-popup table th,
.printful-size-guide-modal table th,
.pf-size-guide-content table th {
  background: var(--ink) !important;
  color: var(--paper-light) !important;
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 10px 14px !important;
  text-align: left !important;
  border: none !important;
}

.printful-size-guide-popup table td,
.printful-size-guide-modal table td,
.pf-size-guide-content table td {
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--paper-mid) !important;
  color: var(--ink-soft) !important;
}

.printful-size-guide-popup table tr:nth-child(even) td,
.printful-size-guide-modal table tr:nth-child(even) td,
.pf-size-guide-content table tr:nth-child(even) td {
  background: var(--paper) !important;
}

/* Unit toggle (cm/in) tabs if present */
.printful-size-guide-popup .unit-toggle,
.pf-size-guide-units {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 16px !important;
}

.printful-size-guide-popup .unit-toggle button.active,
.pf-size-guide-units .active {
  background: var(--rust) !important;
  color: var(--paper-light) !important;
  border-radius: 6px !important;
}

/* ── Single product: gaps between Add to Cart + express payment buttons ───── */
/* Stripe express (Apple Pay / Google Pay) */
.va-shop-product__details #wc-stripe-express-checkout-element,
.va-shop-product__details .wc-stripe-express-checkout-button-separator-container,
.va-shop-product__details .woocommerce-PaymentRequestButton,
.va-shop-product__details #payment-request-button {
  margin-top: 16px !important;
}

/* PayPal express button */
.va-shop-product__details .paypal-button-container,
.va-shop-product__details .wc_ppec_cart_button_wrap,
.va-shop-product__details [id^="paypal-button"],
.va-shop-product__details .ppc-button-wrapper {
  margin-top: 16px !important;
}

/* Generic fallback: any direct child div injected after the add-to-cart form */
.va-shop-product__details .woocommerce-variation-add-to-cart ~ div,
.va-shop-product__details form.cart ~ div {
  margin-top: 16px !important;
}

/* ── Mobile padding overrides ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .va-checklist-downloads__label {
    display: none;
  }

  .va-events-section__inner {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .va-events-map-view {
    margin-top: -32px;
    margin-bottom: -32px;
  }

  .va-journal-body {
    padding-top: 24px;
  }

  /* Move "View All Events" button below grid on mobile */
  .va-events-section__head .va-btn {
    display: none !important;
  }

  .va-events-section__cta--mobile {
    display: inline-block !important;
    margin-top: 24px;
  }
}

/* ==========================================================================
   JOURNAL LISTING (home.php) — .va-journal-card and friends
   These classes had no CSS defined anywhere in the theme, so the journal
   grid rendered completely unstyled (no card borders, spacing, image
   sizing, or typography). Styled here to match .va-event-card conventions
   already used elsewhere on the site.
   ========================================================================== */

.va-journal-body__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 48px var(--pad-x) 80px;
}

.va-journal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.va-journal-card {
  background: var(--paper-light);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(44, 53, 49, 0.07);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  display: flex;
  flex-direction: column;
}

.va-journal-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 24px rgba(44, 53, 49, 0.12);
}

.va-journal-card__img-wrap {
  position: relative;
  aspect-ratio: 4 / 2.4;
  overflow: hidden;
}

.va-journal-card__img,
.va-journal-card__img-wrap svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.va-journal-card__body {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.va-journal-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.va-journal-card__cat {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rust);
  text-decoration: none;
}

.va-journal-card__date {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--olive);
}

.va-journal-card__title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 10px;
}

.va-journal-card__title a {
  color: var(--ink);
  text-decoration: none;
}

.va-journal-card__title a:hover {
  color: var(--rust);
}

.va-journal-card__excerpt {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 16px;
  flex: 1;
}

.va-journal-card__readmore {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rust);
  text-decoration: none;
  align-self: flex-start;
}

.va-journal-card__readmore:hover {
  text-decoration: underline;
}

/* ── Empty state ──────────────────────────────────────────────────────────── */
.va-journal-empty {
  text-align: center;
  padding: 80px 24px;
}

.va-journal-empty__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  color: var(--paper-mid);
}

.va-journal-empty__title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}

.va-journal-empty__desc {
  font-family: var(--font-body);
  color: var(--ink-soft);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 968px) {
  .va-journal-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

  .va-journal-body__inner {
    padding: 32px var(--pad-x) 56px;
  }
}

/* ==========================================================================
   WOOCOMMERCE PRODUCT GRID BLOCK (e.g. "New in Store" in the Cart block's
   empty-cart pattern) — restyled to match .va-event-card conventions.
   Scoped strictly to .wp-block-woocommerce-product-template (the block's
   own wrapper) so this cannot affect the main shop grid, which uses
   different markup/classes and must not be touched here.
   ========================================================================== */

.wp-block-woocommerce-product-template {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

.wp-block-woocommerce-product-template > li {
  background: var(--paper-light);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(44, 53, 49, 0.07);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  list-style: none;
}

.wp-block-woocommerce-product-template > li:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 24px rgba(44, 53, 49, 0.12);
}

.wp-block-woocommerce-product-template img {
  width: 100%;
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
  display: block;
}

.wp-block-woocommerce-product-template .wc-block-components-product-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  padding: 16px 16px 4px;
  display: block;
}

.wp-block-woocommerce-product-template .wc-block-components-product-title:hover {
  color: var(--rust);
}

.wp-block-woocommerce-product-template .wc-block-components-product-price {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-soft);
  padding: 0 16px;
  display: block;
}

.wp-block-woocommerce-product-template .wc-block-components-product-price ins {
  text-decoration: none;
  color: var(--rust);
}

.wp-block-woocommerce-product-template .wp-block-button__link {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  background: var(--ink);
  color: var(--paper-light);
  border: none;
  border-radius: 999px;
  padding: 10px 22px;
  margin: 14px 16px 18px;
  display: block;
  text-align: center;
  transition: background 0.15s ease;
}

.wp-block-woocommerce-product-template .wp-block-button__link:hover {
  background: var(--rust);
  color: #fff;
}

/* ==========================================================================
   TOOLS CAROUSEL (home page) — Pace Calculator / Field Manual / Checklist
   Desktop: image right, content left, nav row (prev / dots / next) beneath
   the CTA button. Mobile: image on top, content stacked below, same nav row.
   ========================================================================== */

.va-tools-carousel {
  background: var(--paper);
  padding: 64px 0;
}

.va-tools-carousel__viewport {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  position: relative;
  overflow: hidden;
}

.va-tools-carousel__slide {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.va-tools-carousel__slide.is-active {
  display: grid;
}

/* Animate only the media and text content on slide change -- the nav row
   (prev/next arrows + dots) stays static so it doesn't visually "jump"
   every time the slide advances, since the user's eyes/fingers are
   already anchored on those controls. */
.va-tools-carousel__slide.is-active .va-tools-carousel__media,
.va-tools-carousel__slide.is-active .va-tools-carousel__title,
.va-tools-carousel__slide.is-active .va-tools-carousel__body,
.va-tools-carousel__slide.is-active .va-tools-carousel__cta {
  animation: va-carousel-fade-in 0.45s ease;
}

@keyframes va-carousel-fade-in {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .va-tools-carousel__slide.is-active .va-tools-carousel__media,
  .va-tools-carousel__slide.is-active .va-tools-carousel__title,
  .va-tools-carousel__slide.is-active .va-tools-carousel__body,
  .va-tools-carousel__slide.is-active .va-tools-carousel__cta {
    animation: none;
  }
}

/* ── Media ────────────────────────────────────────────────────────────────── */
.va-tools-carousel__media {
  order: 2;
  border-radius: 20px;
  overflow: hidden;
  background: var(--paper-mid);
  aspect-ratio: 16 / 11;
}

.va-tools-carousel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Content ──────────────────────────────────────────────────────────────── */
.va-tools-carousel__content {
  order: 1;
}

.va-tools-carousel__title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
}

.va-tools-carousel__body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0 0 28px;
  max-width: 460px;
}

.va-tools-carousel__cta {
  display: inline-block;
  margin-bottom: 40px;
  background: var(--rust) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 9px !important;
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 12px 22px !important;
  cursor: pointer;
  transition: background 0.18s !important;
}

.va-tools-carousel__cta:hover {
  background: #A43518 !important;
}

/* ── Nav row: prev arrow / dots / next arrow ─────────────────────────────── */
.va-tools-carousel__nav {
  display: flex;
  align-items: center;
  gap: 14px;
}

.va-tools-carousel__arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}

.va-tools-carousel__arrow svg {
  width: 22px;
  height: 22px;
}

.va-tools-carousel__arrow--prev {
  background: var(--rust);
  color: #fff;
}

.va-tools-carousel__arrow--prev:hover {
  background: #A43518;
}

.va-tools-carousel__arrow--next {
  background: var(--rust);
  color: #fff;
}

.va-tools-carousel__arrow--next:hover {
  background: #A43518;
}

.va-tools-carousel__dots {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--paper-light);
  border-radius: 999px;
  padding: 8px 14px;
}

.va-tools-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: var(--paper-mid);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, transform 0.15s ease;
}

.va-tools-carousel__dot.is-active {
  background: var(--rust);
  transform: scale(1.2);
}

/* ── Mobile: image on top, stacked content, same nav row ─────────────────── */
@media (max-width: 900px) {
  .va-tools-carousel {
    padding: 32px 0;
  }

  .va-tools-carousel__slide {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .va-tools-carousel__media {
    order: 1;
    aspect-ratio: 16 / 10;
  }

  .va-tools-carousel__content {
    order: 2;
  }

  .va-tools-carousel__title {
    font-size: 24px;
  }

  .va-tools-carousel__cta {
    display: block;
    text-align: center;
    margin-bottom: 24px;
  }
}

/* ==========================================================================
   EVENTS PAGE — Map view
   The List/Map toggle itself reuses .va-checklist-mode directly (same
   markup as the Checklist page's Ultra Distance/Bikepacking toggle), so
   no separate toggle CSS is needed here -- only the map container/popup.
   ========================================================================== */

/* ── Map view ─────────────────────────────────────────────────────────────── */
.va-events-map {
  width: 100%;
  height: 700px;
  border-radius: 0;
  overflow: hidden;
  background: var(--paper-mid);
}

@media (max-width: 700px) {
  .va-events-map {
    height: 700px;
  }
}

/* ── Mapbox popup: recolor to match theme instead of default Mapbox styling ── */
.va-map-popup .mapboxgl-popup-content {
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
  font-family: var(--font-body);
  width: 260px;
}

.va-map-popup .mapboxgl-popup-close-button {
  color: #fff;
  font-size: 20px;
  padding: 4px 8px;
  z-index: 2;
}

.va-map-popup__img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
}

.va-map-popup__body {
  padding: 14px 16px 16px;
}

.va-map-popup__date {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--rust);
  margin: 0 0 6px;
}

.va-map-popup__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.va-map-popup__excerpt {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-soft);
  margin: 0 0 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.va-map-popup__cta {
  display: block;
  text-align: center;
  background: var(--rust);
  color: #fff;
  border: none;
  border-radius: 9px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 12px 22px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s;
  outline: none;
}

.va-map-popup__cta:hover {
  background: #A43518;
}

/* Replace the browser's default blue focus ring (shown when Mapbox
   focuses the popup's first interactive element on open, or on
   keyboard/tab focus) with an on-brand outline instead of removing
   focus indication altogether. */
.va-map-popup__cta:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ==========================================================================
   EVENTS FILTERING REDESIGN — Filters button, active chips, drawer,
   quick presets, radios/checkboxes, dual-range sliders, sort select.
   ========================================================================== */

/* ── "Filters" button (sticky bar, right-aligned) ─────────────────────────── */
.va-filters-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  background: var(--paper-light);
  border: 1px solid var(--paper-mid);
  border-radius: 8px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.va-filters-btn:hover {
  background: var(--paper-mid);
}

.va-filters-btn__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--rust);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
}

/* ── Overlay + drawer ───────────────────────────────────────────────────────── */
.va-filters-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 24, 20, 0.45);
  z-index: 199;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.va-filters-overlay.is-open {
  opacity: 1;
}

.va-filters-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 100%;
  background: var(--paper);
  z-index: 200;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 32px rgba(28, 24, 20, 0.18);
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.va-filters-drawer.is-open {
  transform: translateX(0);
}

@media (max-width: 1024px) {
  .va-filters-drawer {
    width: 380px;
  }
}

@media (max-width: 700px) {
  .va-filters-drawer {
    width: 100%;
  }
}

@media (max-width: 400px) {
  .va-date-range {
    gap: 8px;
  }

  .va-date-range label {
    padding: 11px 10px;
    gap: 6px;
    font-size: 14px;
  }
}

.va-filters-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px;
  border-bottom: 1px solid var(--paper-mid);
  flex-shrink: 0;
}

.va-filters-drawer__title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

.va-filters-drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s;
}

.va-filters-drawer__close:hover {
  background: var(--paper-mid);
}

.va-filters-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px 8px;
}

.va-filters-drawer__footer {
  display: flex;
  gap: 12px;
  padding: 18px 28px;
  border-top: 1px solid var(--paper-mid);
  flex-shrink: 0;
  background: var(--paper);
}

.va-filters-drawer__footer .va-btn {
  text-align: center;
  justify-content: center;
}

/* .va-btn--outline sets color: var(--paper-light) (white), intended for
   dark-background contexts. This drawer's footer is a light background,
   so that would render as invisible white-on-cream text -- override just
   within this scope rather than touching the shared class site-wide. */
.va-filters-drawer__footer .va-btn--outline {
  color: var(--ink);
  border-color: var(--paper-mid);
  background: transparent;
}

.va-filters-drawer__footer .va-btn--outline:hover {
  background: var(--paper-mid);
  border-color: var(--paper-mid);
}

.va-filters-drawer__footer #va-filters-reset-btn {
  flex-shrink: 0;
}

.va-filters-apply-btn {
  flex: 1;
  background: var(--rust) !important;
  color: #fff !important;
  border: none !important;
}

.va-filters-apply-btn:hover {
  background: #A43518 !important;
}

/* ── Section wrapper ────────────────────────────────────────────────────────── */
.va-filters-section {
  padding: 12px 0;
  border-bottom: 1px solid var(--paper-mid);
}

.va-filters-section:first-child {
  padding-top: 0;
}

.va-filters-section__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 18px;
}

.va-filters-section__title svg {
  color: var(--ink-soft);
  flex-shrink: 0;
}

.va-range-value {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
}

/* ── Terrain pills (multi-select toggle; none active = no filter) ─────────── */
.va-terrain-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.va-terrain-pill {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-warm);
  background: var(--paper-light);
  border: 1.5px solid var(--paper-mid);
  border-radius: 999px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.va-terrain-pill:hover {
  background: var(--paper-mid);
}

.va-terrain-pill.active {
  background: var(--rust);
  color: #fff;
  border-color: var(--rust);
}

/* ── Radio groups (custom styled) ──────────────────────────────────────────── */
.va-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
}

.va-radio,
.va-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
}

.va-radio input,
.va-checkbox input {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--paper-mid);
  background: var(--paper-light);
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s, background 0.15s;
}

.va-radio input {
  border-radius: 50%;
}

.va-checkbox input {
  border-radius: 4px;
}

.va-radio input:checked,
.va-checkbox input:checked {
  border-color: var(--rust);
  background: var(--rust);
}

.va-radio input:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}

.va-checkbox input:checked::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 5px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ── Date range (always visible, replaces the old Season quarter picker) ──── */
.va-date-range {
  display: flex;
  gap: 12px;
}

.va-date-range label {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden; /* clamp Safari's native date-widget intrinsic width so
                       it clips inside its own box instead of pushing the
                       sibling field out of view on narrow screens */
  font-family: var(--font-body);
  font-size: 15px;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink-soft);
  border: 1.5px solid var(--paper-mid);
  border-radius: 10px;
  padding: 13px 16px;
  background: var(--paper-light);
}

/* "From"/"To" label text is mutually exclusive with the date value --
   shown only while the field is empty and not focused. The moment the
   user clicks in (is-active, set via JS on focus) or picks a date
   (has-value), the label disappears so only the date itself shows. */
.va-date-range label.is-active .va-date-range__label-text,
.va-date-range label.has-value .va-date-range__label-text {
  display: none;
}

.va-date-range svg {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  color: var(--ink-soft);
}

.va-date-range input[type="date"] {
  flex: 1;
  width: 100%;
  position: relative;
  font-family: var(--font-body);
  font-size: 15px;
  color: transparent; /* hide the native dd/mm/yyyy placeholder text by default */
  border: none;
  background: transparent;
  padding: 0;
  min-width: 0;
}

/* Reveal the date text once a real value is picked (label.has-value,
   set via JS -- persists after blur), or while the field is actively
   focused (browser :focus state, no JS needed for this part). Stays
   transparent (placeholder hidden) otherwise. */
.va-date-range input[type="date"]:focus,
.va-date-range label.has-value input[type="date"] {
  color: var(--ink);
}

/* Hide the browser's own native calendar-picker icon -- redundant since
   we already show our own custom calendar SVG on the left of each field.
   Stretched to cover the full input (rather than display:none) so the
   whole field stays clickable to open the date picker, just without the
   visible duplicate icon. */
.va-date-range input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  margin: 0;
}

/* ── Dual-range slider ──────────────────────────────────────────────────────── */
.va-dual-slider {
  position: relative;
  height: 20px;
  margin: 4px 0 10px;
}

.va-dual-slider__track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--paper-mid);
  border-radius: 999px;
  transform: translateY(-50%);
}

.va-dual-slider__range {
  position: absolute;
  top: 50%;
  height: 4px;
  background: var(--rust);
  border-radius: 999px;
  transform: translateY(-50%);
}

.va-dual-slider__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20px;
  margin: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: none;
}

.va-dual-slider__input::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--rust);
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  margin-top: 0;
}

.va-dual-slider__input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--rust);
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.va-dual-slider__input::-webkit-slider-runnable-track {
  background: transparent;
  height: 20px;
}

.va-dual-slider__bounds {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--olive);
}

/* ==========================================================================
   SINGLE EVENT PAGE — Useful Tools + Similar Races sections
   ========================================================================== */

.va-single-tools {
  background: var(--paper-cream);
  padding: 56px 0;
}

.va-single-tools__inner,
.va-similar-races__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.va-single-tools__title,
.va-similar-races__title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 32px;
  text-align: left;
}

.va-single-tools__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.va-single-tools__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--paper-light);
  border-radius: 10px;
  padding: 28px;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(44, 53, 49, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.va-single-tools__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(44, 53, 49, 0.12);
}

.va-single-tools__card svg {
  color: var(--rust);
  margin-bottom: 16px;
}

.va-single-tools__card h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
}

.va-single-tools__card p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

.va-similar-races {
  background: var(--paper);
  padding: 56px 0 72px;
}

.va-similar-races__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 968px) {
  .va-single-tools__grid {
    grid-template-columns: 1fr;
  }

  .va-similar-races__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .va-similar-races__grid {
    grid-template-columns: 1fr;
  }

  .va-single-tools,
  .va-similar-races {
    padding: 40px 0;
  }
}

/* ==========================================================================
   SINGLE EVENT PAGE — redesigned hero, difficulty gauges, quick facts,
   actions row, about (collapsible), route, bike recommendation
   ========================================================================== */

.va-single-hero-v2 {
  position: relative;
  height: 460px;
  overflow: hidden;
}

.va-single-hero-v2__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.va-single-hero-v2__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28,19,16,0.15) 0%, rgba(28,19,16,0.75) 100%);
}

.va-single-hero-v2__content {
  position: relative;
  z-index: 2;
  max-width: var(--max-w);
  margin: 0 auto;
  height: 100%;
  padding: 24px var(--pad-x) 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.va-single-hero-v2__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 24px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255,255,255,0.18);
  border-radius: 8px;
  padding: 10px 18px;
  text-decoration: none;
  backdrop-filter: blur(4px);
}

.va-single-hero-v2__title {
  font-family: var(--font-display);
  font-size: 72px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 14px;
  line-height: 1.1;
}

.va-single-hero-v2__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.va-single-hero-v2__meta-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 16px;
  color: rgba(255,255,255,0.92);
}

.va-single-hero-v2__meta-item svg {
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .va-single-hero-v2 {
    height: 270px;
  }
  .va-single-hero-v2__title {
    font-size: 36px;
  }
  .va-single-hero-v2__content {
    padding: 24px 20px 28px;
  }
}

/* ── Difficulty gauges ──────────────────────────────────────────────────────── */
/* ── Facts row: difficulty gauges card + 4 individual fact cards ───────────── */
.va-facts-row {
  background: var(--paper);
  padding: 24px 0;
}

.va-facts-row__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: flex;
  gap: 16px;
  align-items: stretch;
}

.va-difficulty-card {
  background: var(--forest);
  border-radius: 10px;
  padding: 20px 24px;
  flex: 2.4 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}

.va-difficulty-card__header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.va-difficulty-card__title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(245,239,224,0.75);
}

.va-difficulty-card__info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(245,239,224,0.5);
  background: transparent;
  color: rgba(245,239,224,0.85);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}

.va-difficulty-card__info:hover {
  background: rgba(245,239,224,0.15);
  border-color: rgba(245,239,224,0.8);
}

.va-difficulty-card__gauges {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  justify-content: space-between;
  width: 100%;
}

.va-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  flex: 1 1 0;
  gap: 4px;
}

.va-gauge svg {
  width: 100%;
  height: auto;
  max-width: 90px;
}

.va-gauge__arc {
  transition: stroke-dashoffset 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}

.va-gauge__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(245,239,224,0.75);
}

.va-facts-row__grid {
  display: flex;
  gap: 16px;
  flex: 3.6 1 0;
  min-width: 0;
}

.va-fact-card {
  flex: 1 1 0;
  min-width: 0;
  background: var(--paper-cream);
  border-radius: 10px;
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
}

.va-fact-card__value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.va-fact-card__label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

@media (max-width: 900px) {
  .va-facts-row__inner {
    flex-direction: column;
  }

  .va-facts-row__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  /* Break out of the row's side padding so the card spans the full
     viewport width edge-to-edge, with no left/right/top margin. */
  .va-facts-row {
    padding-top: 0;
  }

  .va-difficulty-card {
    margin: 0 calc(-1 * var(--pad-x));
    margin-top: 0;
    width: calc(100% + (var(--pad-x) * 2));
    border-radius: 0;
  }
}

@media (max-width: 480px) {
  .va-difficulty-card__gauges {
    gap: 6px;
  }

  .va-gauge svg {
    max-width: 68px;
  }

  .va-gauge__label {
    font-size: 9px;
  }

  .va-fact-card__value {
    font-size: 18px;
  }
}

/* ── Fullscreen info modal (Difficulty Profile explainer, reusable elsewhere) ─ */

.va-info-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
}

.va-info-modal--open {
  display: block;
}

.va-info-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(42, 35, 23, 0.6);
}

.va-info-modal__panel {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
  height: 100%;
  overflow-y: auto;
  background: var(--paper);
  padding: 32px var(--pad-x) 60px;
}

.va-info-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.va-info-modal__title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

.va-info-modal__close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--paper-mid);
  background: var(--paper-light);
  color: var(--ink);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}

.va-info-modal__close:hover {
  background: var(--paper-mid);
}

.va-info-modal__intro {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 28px;
}

.va-info-modal__list {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.va-info-modal__item {
  padding-bottom: 22px;
  border-bottom: 1px solid var(--paper-mid);
}

.va-info-modal__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.va-info-modal__item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.va-info-modal__item-label {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}

.va-info-modal__item-value {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--rust);
  white-space: nowrap;
}

.va-info-modal__item-text {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
}

@media (max-width: 768px) {
  .va-info-modal__panel {
    padding: 24px 20px 48px;
  }

  .va-info-modal__title {
    font-size: 22px;
  }
}

/* ── Share + Visit Official Website: same row on desktop ─────────────────────
   Share aligns to the Description column's width, the button to Bike
   Recommendation's width -- same 1.6:1 ratio as .va-content-columns so
   the two rows visually line up. Stacked on mobile (Share above button). */
.va-share-website-row {
  background: var(--paper);
  padding: 24px 0 48px;
  border-top: 1px solid var(--paper-mid);
}

.va-share-website-row__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: flex;
  align-items: center;
  gap: 48px;
}

.va-share-website-row__share {
  flex: 1.6 1 0;
  min-width: 0;
}

.va-share-website-row__website {
  flex: 1 1 0;
  min-width: 0;
}

.va-share-website-row .va-share {
  display: flex;
  align-items: center;
  gap: 12px;
}

.va-share-website-row .va-share__title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
}

.va-website-cta__btn {
  width: 100%;
  justify-content: center;
}

@media (max-width: 900px) {
  .va-share-website-row__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  .va-share-website-row .va-share {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* ── Event Description + Bike Recommendation: two columns on desktop,
   stacked on mobile with Bike Recommendation appearing first ──────────────── */
.va-content-columns {
  background: var(--paper);
  padding: 24px 0 8px;
}

.va-content-columns__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: flex;
  gap: 48px;
  align-items: flex-start;
}

.va-content-columns .va-single-about {
  flex: 1.6 1 0;
  min-width: 0;
  order: 1;
}

.va-content-columns .va-bike-rec {
  flex: 1 1 0;
  min-width: 0;
  order: 2;
  padding-top: 0;
  margin-top: -24px;
}

@media (max-width: 900px) {
  .va-content-columns__inner {
    flex-direction: column;
    gap: 8px;
  }

  /* On mobile, flex-direction:column makes align-items:flex-start
     (kept for desktop's height behavior) shrink each column to fit its
     own content width instead of filling the row -- invisible on the
     long-form description text (which wraps wide enough to fill the
     space anyway) but very visible on Bike Recommendation's short
     label/value rows. Force both to full width explicitly instead of
     relying on cross-axis sizing. */
  .va-content-columns .va-single-about,
  .va-content-columns .va-bike-rec {
    width: 100%;
  }

  /* Bike Recommendation appears first on mobile, before the description */
  .va-content-columns .va-bike-rec {
    order: 1;
  }

  .va-content-columns .va-single-about {
    order: 2;
  }
}

/* ── About (collapsible) ─────────────────────────────────────────────────────── */
.va-single-about__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 16px;
}

.va-single-about__content {
  position: relative;
  transition: max-height 0.3s ease;
}

.va-single-about__content.is-collapsed {
  mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
}

.va-single-about__toggle {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--rust);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Route ──────────────────────────────────────────────────────────────────── */
.va-single-route {
  background: var(--paper);
  padding: 8px 0 48px;
}

.va-single-route__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* ── Bike recommendation ────────────────────────────────────────────────────── */
.va-bike-rec__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.va-bike-rec__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px dashed var(--paper-mid);
}

.va-bike-rec__row:last-child {
  border-bottom: none;
}

.va-bike-rec__label {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.va-bike-rec__value {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink-soft);
}

/* ── Similar Races subtitle + View All button ──────────────────────────────── */
.va-similar-races__subtitle {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink-soft);
  margin: -20px 0 32px;
}

.va-similar-races__view-all {
  display: block;
  width: fit-content;
  margin: 40px auto 0;
  text-align: center;
}

/* ── Mobile: all single-event content section titles share one size ────────── */
@media (max-width: 700px) {
  .va-bike-rec__title,
  .va-single-about__title,
  .va-single-section__head span,
  .va-single-tools__title,
  .va-similar-races__title {
    font-size: 24px;
  }
}