/* =====================================================================
   STADIA GLOBAL — brand background colors (shared by every page)
   Each product owns one signature color. Home is white with grey.
   ===================================================================== */
:root {
  --stadia-grey: #6e6e73;        /* mid grey — home hero photo stage */
  --stadia-grey-light: #e8e8ed;  /* light grey — contact band */
  --stadia-grey-dark: #1d1d1f;   /* graphite — dark utility bands */
  --stadia-black: #000000;

  --stadia-green: #00d959;       /* Asher's Harvest — vivid */
  --stadia-green-deep: #00361b;  /* Asher's Harvest — deep canvas */
  --stadia-green-ink: #062a14;   /* text on vivid green */

  --stadia-orange: #ff6a13;      /* Space Boot & Apparel — neon orange */
  --stadia-orange-ink: #311400;  /* text on neon orange (Ember Black) */

  --stadia-blue: #0071e3;        /* Fitness Combine — vivid */
  --stadia-blue-deep: #001a3d;   /* Fitness Combine — deep canvas */
}

/* =====================================================================
   PP Neue Machina — home page display face (header, nav, titles, figures).
   Registered under the family name the stylesheets already ask for first.
   ===================================================================== */
@font-face {
  font-family: 'pp-neue-machina-plain';
  src: url('../fonts/neue-machina-regular.woff') format('woff'),
       url('../fonts/neue-machina-regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Neue Haas Grotesk (home page body text) — add your licensed web font files here, e.g.:
@font-face { font-family: 'neue-haas-grot-text'; src: url('../fonts/NHaasGroteskTXPro-55Rg.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'neue-haas-grot-text'; src: url('../fonts/NHaasGroteskTXPro-65Md.woff2') format('woff2'); font-weight: 500; font-display: swap; }
   Until then the system UI font is used. */

/* =====================================================================
   STADIA wordmark — Nasalization Regular (Typodermic Fonts)
   Every visible "STADIA" in the brand name is wrapped in
   <span class="wm-stadia">STADIA</span>. "GLOBAL" and everything else
   keep the surrounding header font, so the lockup stays uniform.
   ===================================================================== */
@font-face {
  font-family: 'Nasalization';
  src: url('../fonts/nasalization-rg.woff') format('woff'),
       url('../fonts/Nasalization-Rg.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.wm-stadia {
  font-family: 'Nasalization', var(--font-display, var(--u-display, sans-serif));
  font-weight: 400;
  font-style: normal;
  font-synthesis: none;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
/* Nasalization runs wide: trim it inside the big hero title so STADIA and GLOBAL line up */
.display .wm-stadia, .h-hero__title .wm-stadia { font-size: 0.86em; letter-spacing: 0; }
/* Home hero: GLOBAL at half the size of the display line */
.h-hero__title .h-hero__global { font-size: 0.5em; margin-top: 0.08em; }

/* Spam-trap fields: off-screen for people and screen readers, still present for bots */
.hp-field { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Visually hidden, still read by screen readers */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Language picker (built by js/i18n.js inside any [data-lang-switch]) */
.lang-switch { display: inline-flex; align-items: center; gap: 6px; color: inherit; flex: none; }
.lang-switch__label { display: inline-flex; align-items: center; color: inherit; opacity: .8; cursor: pointer; }
.lang-switch__select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  font: inherit; font-size: 12px; letter-spacing: 0.02em; line-height: 1;
  color: inherit; background: transparent;
  border: 1px solid currentColor; border-radius: 999px; padding: 6px 12px;
  opacity: .85; transition: opacity .2s ease;
}
.lang-switch__select:hover, .lang-switch__select:focus-visible { opacity: 1; }
.lang-switch__select option { color: #111; background: #fff; }
@media (max-width: 767px) {
  .lang-switch__label { display: none; }
  .lang-switch__select { padding: 6px 10px; font-size: 11px; }
}
/* Keep the home logo on one line next to the language picker on phones */
.brand-mark { white-space: nowrap; }
@media (max-width: 767px) { .site-header { gap: 12px; } .site-header .lang-switch { margin-left: auto; } }

/* =====================================================================
   Other scripts and right-to-left (set by js/i18n.js on <html>)
   ===================================================================== */
/* Arabic and Hindi letters join or stack: letter-spacing would break them apart */
html[lang="ar"] *, html[lang="hi"] * { letter-spacing: 0 !important; }
html[lang="ar"] body, html[lang="hi"] body { line-height: 1.6; }
/* Numbers that animate digit by digit always read left to right */
.tumble, .u-table .u-num, .u-metric { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] .u-table th, html[dir="rtl"] .u-table td { text-align: right; }
html[dir="rtl"] .u-table .u-num { text-align: left; }
/* Sideways gallery: in right-to-left the extra cards sit to the left, so slide the other way */
html.motion-ok[dir="rtl"] .h-track { transform: translateX(calc(var(--t, 0) * max(0px, 100% - 100vw))); }
/* Popup arrows swap sides and direction */
html[dir="rtl"] .u-lightbox__prev { left: auto; right: clamp(12px, 3vw, 40px); transform: scaleX(-1); }
html[dir="rtl"] .u-lightbox__next { right: auto; left: clamp(12px, 3vw, 40px); transform: scaleX(-1); }
html[dir="rtl"] .u-lightbox__close { right: auto; left: clamp(12px, 3vw, 40px); }