/* The whole navigation lives here: base bar, logo, hamburger drawer, language
   picker. It used to sit in style.css, but the Next-exported pages do not load
   style.css, and they need the same nav — so it owns its own tokens below. */
/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--pad, clamp(20px, 4vw, 64px));
  transition: background 0.4s, backdrop-filter 0.4s, box-shadow 0.4s;
}
.nav.scrolled {
  background: rgba(10, 10, 14, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line-dark, rgba(244, 241, 234, 0.14));
}
.theme-light .nav.scrolled {
  background: rgba(244, 241, 234, 0.78);
  box-shadow: 0 1px 0 var(--line-light, rgba(10, 10, 14, 0.14));
}
.nav-logo {
  font-family: var(--font-text, 'Archivo', 'Helvetica Neue', sans-serif); font-size: 19px; font-weight: 400;
  letter-spacing: -0.01em;
}
.nav-logo b { font-weight: 700; }
.nav-logo .flag {
  display: inline-block; width: 9px; height: 9px; margin-right: 9px;
  background:
    conic-gradient(at 50% 50%, currentColor 25%, transparent 0 50%, currentColor 0 75%, transparent 0);
  opacity: 0.9;
}

/* real RaceLabs helmet logo (teal source; rendered white on dark surfaces) */
.logo-img {
  /* height-based sizing keeps aspect ratio: square helmet stays 24x24,
     the tall athletics oval scales to ~18x24 instead of squishing */
  width: auto; height: 24px; margin-right: 10px;
  vertical-align: -7px; display: inline-block;
  filter: brightness(0) invert(1);
}
/* athletics page is light-themed → show the coral logo in its own color */
.theme-light .logo-img { filter: none; height: 34px; vertical-align: -11px; margin-right: 12px; }

.nav-links { display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); }
.nav-links a {
  font-family: var(--font-mono, 'Archivo', 'Helvetica Neue', Arial, sans-serif); font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  opacity: 0.75; transition: opacity 0.25s;
  position: relative;
}
.nav-links a:hover, .nav-links a.active { opacity: 1; }
.nav-links a.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 2px; background: var(--engine, #6e62ff);
}
.theme-light .nav-links a.active::after { background: var(--coral, #ff4d2e); }
/* phone: header is just logo left + contact right — page links hidden */
@media (max-width: 760px) {
  .nav-links a:not(.nav-cta) { display: none; }
}
/* solid filled contact button — keeps the nav's mono caps, fills with the
   page accent so it reads as the clear action */
.nav-links a.nav-cta {
  border: 1.5px solid #fff; border-radius: 999px;
  padding: 9px 20px; opacity: 1;
  background: transparent; color: #fff;
  transition: transform 0.2s, background 0.25s, color 0.25s, border-color 0.25s;
}
.nav-links a.nav-cta:hover { background: rgba(255,255,255,0.14); transform: translateY(-1px); }
.theme-home .nav-links a.nav-cta { border-color: #fff; color: #fff; background: transparent; }
/* light (athletics) page: dark outline so it stays visible on the pale nav */
.theme-light .nav-links a.nav-cta { border-color: var(--ink, #0a0a0e); color: var(--ink, #0a0a0e); background: transparent; }
.theme-light .nav-links a.nav-cta:hover { background: rgba(10,10,14,0.08); }

/* ===== nav — persistent hamburger menu (all widths) ===== */
.nav-check{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.nav-more{display:none!important}
.nav-more,.nav-lang{order:5}
.nav-links .nav-cta{order:9}
.nav{position:relative}
.nav-top-contact{margin-left:auto}
/* header Contact stays a pill (like the old cabecera CTA) — it lives outside
   .nav-links so it needs its own pill rules, not the .nav-links a.nav-cta ones */
.nav-top-contact.nav-cta{font-family:var(--font-mono, 'Archivo', 'Helvetica Neue', Arial, sans-serif);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;border:1.5px solid #fff;border-radius:999px;padding:9px 20px;color:#fff;background:transparent;transition:transform .2s,background .25s}
.nav-top-contact.nav-cta:hover{background:rgba(255,255,255,.14);transform:translateY(-1px)}
.theme-light .nav-top-contact.nav-cta{border-color:var(--ink, #0a0a0e);color:var(--ink, #0a0a0e)}
.theme-light .nav-top-contact.nav-cta:hover{background:rgba(10,10,14,.08)}
.nav-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:0;margin-left:12px;background:none;border:0;cursor:pointer;color:inherit}
.nav-burger span{display:block;width:24px;height:2px;background:currentColor;border-radius:2px;transition:transform .25s,opacity .25s}
.nav-check:checked ~ .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-check:checked ~ .nav-burger span:nth-child(2){opacity:0}
.nav-check:checked ~ .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav .nav-links{position:absolute;top:calc(100% + 10px);right:0;flex-direction:column;align-items:stretch;gap:0;min-width:232px;background:var(--ink, #0a0a0e);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:6px 16px;max-height:0;overflow:hidden;opacity:0;pointer-events:none;transform:translateY(-6px);transition:max-height .3s ease,opacity .2s ease,transform .2s ease;box-shadow:0 24px 60px rgba(0,0,0,.45);z-index:60}
.theme-light .nav .nav-links{background:var(--paper, #f4f1ea);border-color:rgba(0,0,0,.12)}
.nav-check:checked ~ .nav-links{max-height:70vh;opacity:1;pointer-events:auto;transform:translateY(0)}
.nav .nav-links > a{padding:13px 4px;width:100%;border-bottom:1px solid rgba(255,255,255,.07)}
.theme-light .nav .nav-links > a{border-bottom-color:rgba(0,0,0,.08)}
.nav .nav-links > a:last-child{border-bottom:0}
/* Contact inside the dropdown is a plain link, NOT a pill — the extra .nav
   selector out-specifies the base .nav-links a.nav-cta pill rule above */
.nav .nav-links a.nav-cta{border:0;background:none;border-radius:0;padding:13px 4px}
.nav .nav-links a.nav-cta:hover{background:none;transform:none;opacity:1}

/* Motorsport disciplines are subordinate destinations inside the main menu. */
.nav .nav-links{width:min(320px,calc(100vw - 32px));min-width:0;visibility:hidden}
.nav-check:checked ~ .nav-links{visibility:visible;overflow-y:auto;overscroll-behavior:contain;max-height:min(70vh,calc(100dvh - 100px))}
.nav-check:focus-visible ~ .nav-burger{outline:2px solid currentColor;outline-offset:4px;border-radius:4px}
.nav .nav-links a{display:flex;align-items:center;min-height:44px;line-height:1.5}
.nav .nav-category{padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.07)}
.nav .nav-category > a{padding:13px 4px;opacity:1}
.nav .nav-category > a.active::after{left:4px;right:auto;width:28px;bottom:5px}
.nav .nav-children{list-style:none;margin:0 0 0 10px;padding:0 0 0 14px;border-left:1px solid rgba(255,255,255,.22)}
.nav .nav-children li{margin:0;padding:0}
.nav .nav-children a{padding:9px 8px;font-size:12px;letter-spacing:.02em;text-transform:none;opacity:.8}
.nav .nav-children a:hover,.nav .nav-children a:focus-visible{opacity:1}
.theme-light .nav .nav-category{border-bottom-color:rgba(0,0,0,.08)}
.theme-light .nav .nav-children{border-left-color:rgba(0,0,0,.2)}

@media (max-width:360px) {
  .nav-logo { white-space: nowrap; flex-shrink: 0; font-size: 17px; }
  .nav-top-contact.nav-cta { font-size: 11px; padding-inline: 14px; }
  .nav-burger { margin-left: 6px; }
}

/* Shared navigation (home, motorsport and pages moving to the new layout):
   language picker, compact controls and the side drawer menu. */
/* The burger lines sit on the same edge as the logo on the other side. */
body.nav-v2 .nav-burger { align-items: flex-end; }

/* Menu: a side drawer below the nav (and above the footer on the one-screen home). Rows share the height;
   they never shrink below a comfortable size, so very short windows scroll instead. */
body.nav-v2 .nav .nav-links {
  position: fixed; top: var(--nav-drawer-top, 78px); bottom: var(--nav-drawer-bottom, 0px); right: 0; left: auto;
  width: min(304px, 100vw); max-height: none; min-width: 0;
  display: flex; flex-direction: column; gap: 0; padding: clamp(6px, 2vh, 24px) 28px;
  border: 0; border-left: 1px solid rgba(255,255,255,.1); border-radius: 0; background: #0a0b0f;
  box-shadow: -24px 0 60px rgba(0,0,0,.45); overflow: hidden;
  opacity: 1; visibility: hidden; transform: translateX(100%);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), visibility 0s linear .35s;
}
body.nav-v2 .nav-check:checked ~ .nav-links {
  max-height: none; visibility: visible; transform: none; overflow-y: auto;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), visibility 0s;
}
body.nav-v2 .nav .nav-category,
body.nav-v2 .nav .nav-children,
body.nav-v2 .nav .nav-children li { display: contents; }
body.nav-v2 .nav .nav-links a { display: flex; align-items: center; flex: 1 0 auto; min-height: 38px; max-height: 54px; padding: 0 4px; border: 0; }
body.nav-v2 .nav .nav-links > a,
body.nav-v2 .nav .nav-category > a { border-top: 1px solid rgba(255,255,255,.07); }
body.nav-v2 .nav .nav-links > :first-child > a { border-top: 0; }
body.nav-v2 .nav .nav-children a { min-height: 32px; max-height: 40px; margin-left: 10px; padding-left: 22px; border-left: 1px solid rgba(255,255,255,.22); }
body.nav-v2 .nav .nav-child-gap > a { margin-top: 10px; }
/* Vertical guide lines stop short of the horizontal dividers. */
body.nav-v2 .nav .nav-children li:first-child > a { margin-top: 6px; }
body.nav-v2 .nav .nav-children li:last-child > a { margin-bottom: 12px; }
/* Section colours match the scenes: indigo for motorsport, coral for athletics. */
body.nav-v2 .nav .nav-category[aria-label="Motorsport"] > a { color: var(--engine-bright, #8d83ff); }
body.nav-v2 .nav .nav-category[aria-label="Motorsport"] .nav-children a { border-left-color: rgba(141,131,255,.65); }
body.nav-v2 .nav .nav-category[aria-label="Motorsport"] .nav-children a:hover,
body.nav-v2 .nav .nav-category[aria-label="Motorsport"] .nav-children a:focus-visible { color: var(--engine-bright, #8d83ff); border-left-color: var(--engine-bright, #8d83ff); }
body.nav-v2 .nav .nav-category[aria-label="Athletics"] > a { color: #ff8a6b; }
body.nav-v2 .nav .nav-category[aria-label="Athletics"] .nav-children a { border-left-color: rgba(255,138,107,.65); }
body.nav-v2 .nav .nav-category[aria-label="Athletics"] .nav-children a:hover,
body.nav-v2 .nav .nav-category[aria-label="Athletics"] .nav-children a:focus-visible { color: #ff8a6b; border-left-color: #ff8a6b; }
body.nav-v2 .nav .nav-children a { color: #d6d4dc; opacity: 1; }
body.nav-v2 .nav .nav-links > a { color: #9f9daa; }
body.nav-v2 .nav .nav-links > a:hover, body.nav-v2 .nav .nav-links > a:focus-visible { color: #fff; }
body.nav-v2 .nav .nav-links > a.nav-cta { color: #fff; }
@media (max-width: 700px) {
  /* Mobile: full-width drawer, every row fits on screen, never scrolls. */
  body.nav-v2 .nav .nav-links { width: 100vw; border-left: 0; padding: 4px 20px; }
  body.nav-v2 .nav-check:checked ~ .nav-links { overflow: hidden; }
  body.nav-v2 .nav .nav-links a { flex: 1 1 0; min-height: 0; }
  body.nav-v2 .nav .nav-children a { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { body.nav-v2 .nav .nav-links { transition: none; } }

/* Language picker next to Contact: a native disclosure, so it works without JS. */
.nav .nav-lang { position: relative; order: 0; margin-left: auto; }
.nav .nav-lang + .nav-top-contact { margin-left: 16px; }
/* Contact pill matches the language button height. */
body.nav-v2 .nav-top-contact { display: inline-flex; align-items: center; justify-content: center; min-height: 0; height: 34px; padding-block: 0; line-height: 1; }
.nav-lang summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 9px 0 calc(9px + .14em); font: 500 12px/1 var(--font-mono, 'Archivo', 'Helvetica Neue', Arial, sans-serif); letter-spacing: .14em; color: #fff; cursor: pointer; background: transparent; border: 1px solid rgba(244,241,234,.18); border-radius: 7px; transition: background .2s, border-color .2s; }
.nav-lang summary::-webkit-details-marker { display: none; }
.nav-lang summary:hover, .nav-lang[open] summary { background: rgba(255,255,255,.05); border-color: rgba(244,241,234,.34); }
.nav-lang ul { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; min-width: 150px; margin: 0; padding: 6px; list-style: none; background: #121319; border: 1px solid var(--line-dark, rgba(244, 241, 234, 0.14)); border-radius: 8px; box-shadow: 0 12px 32px #0008; }
.nav-lang a { display: flex; align-items: center; min-height: 38px; padding: 0 12px; border-radius: 5px; font: 400 14px var(--font-text, 'Archivo', 'Helvetica Neue', sans-serif); color: #d8d6de; }
.nav-lang a:hover, .nav-lang a:focus-visible { background: rgba(255,255,255,.08); color: #fff; }
.nav-lang a[aria-current] { color: #fff; font-weight: 600; }
@media (max-width: 700px) {
  /* Right-hand controls sit close together as one group. */
  body.nav-v2 .nav .nav-lang + .nav-top-contact { margin-left: 8px; }
  body.nav-v2 .nav-lang summary { height: 32px; padding: 0 7px 0 calc(7px + .14em); font-size: 11px; }
  body.nav-v2 .nav-top-contact { height: 32px; padding-inline: 12px; font-size: 11px; letter-spacing: .1em; }
  body.nav-v2 .nav-burger { width: 34px; margin-left: 8px; }
}

/* Desktop keeps the header in view while reading; the one-screen home never
   scrolls, so it keeps its transparent bar over the scene. */
/* The header stays in view at every width; the one-screen home never scrolls,
   so it keeps its transparent bar over the scene. */
body.nav-v2:not(.theme-home) .nav { position: sticky; top: 0; background: var(--ink, #0a0a0e); }
body.nav-v2.theme-light .nav { background: var(--paper, #f4f1ea); }
/* Phone browsers draw their status bar over the page, so the strip above the
   stuck header showed the article scrolling past. This band carries the
   header's own colour up through it. */
body.nav-v2:not(.theme-home) .nav::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 100%;
  height: max(64px, env(safe-area-inset-top, 0px)); background: inherit; pointer-events: none;
}
/* WebKit collapses a fixed child of a stuck sticky parent when the page is
   scrolled, so the drawer states its height instead of stretching top to bottom. */
body.nav-v2 .nav .nav-links {
  bottom: auto;
  height: calc(100dvh - var(--nav-drawer-top, 78px) - var(--nav-drawer-bottom, 0px));
}

/* The open drawer never chains its scroll to the page behind it. */
body.nav-v2 .nav-check:checked ~ .nav-links { overscroll-behavior: contain; }