/* ══════════════════════════════════════════════════════════════════════════
   HejMap v2 — shared design layer (preview).
   Loaded AFTER the classic header.css / engine CSS on pages that opt in with
   <html class="v2">. It re-skins the existing HeaderEngine, panels and map
   chrome through tokens and scoped overrides, so every feature keeps working.
   ══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'InterVariable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../../assets/fonts/inter-var-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'InterVariable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../../assets/fonts/inter-var-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Display serif for greetings and country names (Instrument Serif, OFL). */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../../assets/fonts/instrument-serif-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../../assets/fonts/instrument-serif-latin-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../../assets/fonts/instrument-serif-latin-ext-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Display face for the wordmark and hero (ASCII subset, opsz/wght/wdth axes). */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(../../assets/fonts/bricolage-var-latin.woff2) format('woff2');
  unicode-range: U+0020-007E, U+00A0, U+00B7, U+2013-2014, U+2019, U+201C-201D, U+2026;
}

/* ── Tokens ───────────────────────────────────────────────────────────────── */
:root.v2 {
  --font: 'InterVariable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --display: 'Bricolage Grotesque', 'InterVariable', ui-sans-serif, system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;

  --canvas: #eff3f9;
  --surface: #ffffff;
  --surface-2: #edf1f7;
  --surface-3: #e2e8f1;
  --line: #dde4ee;
  --line-strong: #c9d3e1;
  --text: #0b1220;
  --text-2: #475467;
  --text-3: #8a94a6;
  --blue: #2563eb;
  --blue-soft: #eaf1fe;
  --cyan: #06b6d4;
  --brand: #e8553d;
  --brand-soft: #fdf0ed;
  --good: #16a34a;
  --bad: #dc2626;
  /* Signature gradient (chosen: "ocean"). */
  --accent-grad: linear-gradient(90deg, #2563eb, #06b6d4);

  --radius-sm: 7px;
  --radius: 11px;
  --radius-lg: 16px;
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 2px 6px -2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 32px -12px rgba(16, 24, 40, 0.16);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Legacy tokens consumed by header.css and the map engines. */
  --bg: var(--canvas);
  --bg-warm: var(--surface-2);
  --paper: var(--surface);
  --ink: var(--text);
  --ink-soft: var(--text-2);
  --ink-faint: var(--text-3);
  --rule: var(--line);
  --accent: var(--brand);
  --popup-bg: var(--surface);
  --nav-warm-surface: var(--surface);
  --nav-warm-muted: var(--surface-2);
  --nav-warm-border: var(--line);
  --nav-warm-shadow: rgba(16, 24, 40, 0.16);
  --nav-card-surface: var(--surface);
  --nav-card-hover: var(--surface-2);

  /* Header: 10px gap + 52px pill. Overlays and mega menus anchor to this. */
  --header-gap: 10px;
  --header-h: 52px;
  --nav-h: calc(var(--header-gap) + var(--header-h));

  /* Content column shared by the header and page sections (pages may override). */
  --col-max: 1080px;
  --col-pad: 20px;

  color-scheme: light;
}

:root.v2[data-theme="dark"] {
  --canvas: #070c14;
  --surface: #0e1521;
  --surface-2: #141d2b;
  --surface-3: #1c2738;
  --line: #1d2738;
  --line-strong: #2b384d;
  --text: #eef1f6;
  --text-2: #a3adbd;
  --text-3: #6c7688;
  --blue: #6b9bff;
  --blue-soft: #16213a;
  --cyan: #22d3ee;
  --accent-grad: linear-gradient(90deg, #6b9bff, #22d3ee);
  --brand: #f26a52;
  --brand-soft: #2a1714;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px -2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 40px -14px rgba(0, 0, 0, 0.6);
  --nav-warm-shadow: rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
.v2 body {
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font);
  font-feature-settings: 'cv11';
  -webkit-font-smoothing: antialiased;
  transition: none;
}
/* The classic stylesheets hard-code Nunito / Plex Mono on many components. */
/* Everything is Inter except SVG, code and the elements that deliberately use the display serif. */
.v2 body :where(*:not(svg, svg *, code, kbd, pre, samp, .v2-serif, .v2-serif *, .v2-display, .v2-display *, .brand-l, .brand-l *, .v2-tour-title-sub, .v2-hello-pop, .pg2-title em, .pg2-h2, .pg2-logo-art figcaption, .cmp-title i, .cmp-swap span, .cmp-pairs i, .xp-year-big, .xp-year-big *, .xp-pop, .xp-book-rows span, .xp-book-num span, .gm2-prompt em, .gm2-vs, .gm2-result-card h2)) { font-family: var(--font) !important; }
.v2 .v2-serif { font-family: var(--serif) !important; }
.v2 .v2-display, .v2 .brand-l { font-family: var(--display) !important; }
.v2 :is(code, kbd, pre, samp) { font-family: var(--mono) !important; }
.v2 ::selection { background: color-mix(in srgb, var(--blue) 22%, transparent); }
.v2 :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ── Persistent header across page loads ─────────────────────────────────────
   Cross-document View Transitions: the header is captured on the old page and
   matched on the new one, so it stays put while only the content cross-fades.
   Browsers without support simply navigate normally.
   A view-transition-name clips descendants (the mega menus), so the name is
   only applied while a transition runs: the inline head script toggles
   html.vt-on from the pageswap / pagereveal events. */
@view-transition { navigation: auto; }

.v2.vt-on .hej-header { view-transition-name: hej-header; }
.v2.vt-on .hej-bottom-nav { view-transition-name: hej-bottom-nav; }

/* Map stage: a clicked card on the landing page grows into the explorer stage
   (js/v2/explore.js) and shrinks back on return. */
.v2.vt-on .v2-explore .xp-stage { view-transition-name: map-stage; }
::view-transition-group(map-stage) { overflow: clip; border-radius: 14px; animation-duration: 0.5s; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
::view-transition-old(map-stage),
::view-transition-new(map-stage) { height: 100%; object-fit: cover; }
::view-transition-old(map-stage) { animation: 0.16s ease-out both v2-vt-out; }
::view-transition-new(map-stage) { animation: 0.5s ease-out both v2-vt-fade; }

::view-transition-group(hej-header),
::view-transition-group(hej-bottom-nav) { animation-duration: 0.18s; }
::view-transition-old(root) { animation: 0.12s ease-out both v2-vt-out; }
::view-transition-new(root) { animation: 0.24s cubic-bezier(0.22, 1, 0.36, 1) both v2-vt-in; }
@keyframes v2-vt-out { to { opacity: 0; } }
@keyframes v2-vt-fade { from { opacity: 0; } }
@keyframes v2-vt-in { from { opacity: 0; transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ── Header shell: floating pill ──────────────────────────────────────────── */
.v2 .hej-header {
  position: sticky;
  top: var(--header-gap);
  z-index: 1000;
  width: min(var(--col-max), calc(100% - 2 * var(--col-pad)));
  height: var(--header-h);
  margin: var(--header-gap) auto 0;
  padding: 0 8px 0 10px;
  gap: 8px;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  transition: none;
}

/* Crawlable copy of the menu baked into the HTML by build-header.mjs; the
   header engine renders the real header over it. */
.v2 .app-nav[data-baked] { display: none !important; }

/* Brand: mark + wordmark + tagline */
.v2 .brand {
  flex: 1 1 0;
  min-width: 0;
  align-items: center;
  gap: 10px;
  margin-right: 42px; /* = .header-right width + gap, so the nav sits dead centre */
  font-size: 19px;
  font-weight: 780;
  letter-spacing: -0.035em;
  color: var(--text);
  opacity: 1;
}
/* Logo "A to B": blue tile, dotted route, coral pin; wordmark "hej" ink + "map" blue.
   On hover the route runs and the pin hops. */
.v2 .v2-logo {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  overflow: visible;
  filter: none;
  transition: transform 0.35s var(--ease);
}
.v2 .v2-logo-pin { transform-box: fill-box; transform-origin: 50% 100%; }
.v2 .brand:hover .v2-logo, .v2 .v2f-logo:hover .v2-logo { transform: rotate(-4deg) scale(1.05); }
.v2 .brand:hover .v2-logo-pin, .v2 .v2f-logo:hover .v2-logo-pin { animation: v2-pin-hop 0.7s var(--ease); }
.v2 .brand:hover .v2-logo-route, .v2 .v2f-logo:hover .v2-logo-route { animation: v2-route-run 0.9s linear; }
@keyframes v2-pin-hop { 40% { transform: translateY(-4px) scale(1.06); } 70% { transform: translateY(0) scale(0.97); } }
@keyframes v2-route-run { to { stroke-dashoffset: -11.4; } }
.v2 .brand-map {
  color: var(--blue);
}
.v2 .brand.fonts-loaded { transition: none; }
.v2 .brand-tld { display: none; }
.v2 .brand--tagline { flex-direction: row; align-items: center; gap: 10px; }
.v2 .brand-wordmark { align-items: baseline; }
.v2 .brand-l { font-size: 1.08em; font-weight: 800; letter-spacing: -0.04em; }
.v2 .brand-tagline {
  display: inline-block;
  min-width: 0;
  padding-left: 11px;
  border-left: 1px solid var(--line);
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 450;
  letter-spacing: 0;
  line-height: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Segmented primary nav */
.v2 .app-nav {
  margin: 0;
  padding: 3px;
  gap: 2px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.v2 .app-nav-link,
.v2 .app-nav-group-btn {
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border: 0;
  border-radius: 7px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 550;
  letter-spacing: -0.005em;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.v2 .app-nav-link::before,
.v2 .app-nav-group-btn::before {
  content: '';
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  background: currentColor;
  -webkit-mask: var(--nav-icon) center / contain no-repeat;
  mask: var(--nav-icon) center / contain no-repeat;
  opacity: 0.85;
}
.v2 .app-nav > :nth-child(1) { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5 8.5 4 15 6.5 21 4v13.5L15 20l-6.5-2.5L3 20z'/%3E%3Cpath d='M8.5 4v13.5M15 6.5V20'/%3E%3C/svg%3E"); }
.v2 .app-nav > :nth-child(2) { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4m0 1c5-3 8 3 14 0v10c-6 3-9-3-14 0'/%3E%3C/svg%3E"); }
.v2 .app-nav > :nth-child(3) { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 7h7a5.5 5.5 0 0 1 5.2 7.3l-1 2.9a2.2 2.2 0 0 1-3.7.8l-1.5-1.6h-5L8 18a2.2 2.2 0 0 1-3.7-.8l-1-2.9A5.5 5.5 0 0 1 8.5 7Z'/%3E%3Cpath d='M7 11v4M5 13h4'/%3E%3C/svg%3E"); }
.v2 .app-nav > :nth-child(4) { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7.5v.5'/%3E%3C/svg%3E"); }
.v2 .app-nav > :nth-child(5) { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8 8 0 0 1-11.6 7.1L4 20.5l1.9-5.3A8 8 0 1 1 21 11.5z'/%3E%3C/svg%3E"); }
.v2 .app-nav-link:hover,
.v2 .app-nav-group-btn:hover,
.v2 .app-nav-group.open .app-nav-group-btn { color: var(--text); background: color-mix(in srgb, var(--surface) 60%, transparent); }
.v2 .app-nav-link--active,
.v2 .app-nav-group-btn--active,
.v2 .app-nav-group.open .app-nav-group-btn--active {
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), 0 0 0 1px var(--line);
}
.v2 .app-nav-group-btn::after { display: none; }
.v2 .app-nav-group-chevron { width: 10px; height: 10px; opacity: 0.6; }

/* Mega menus: flat cards */
.v2 .app-nav-group-dropdown {
  top: calc(var(--nav-h) + 8px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.v2 .app-nav-group-dropdown::before { top: var(--nav-h); height: 10px; }
.v2 .app-nav-mega-intro { background: var(--surface-2); }
.v2 .app-nav-dropdown-link,
.v2 .app-nav-section-link { border-radius: 9px; }
.v2 .app-nav-dropdown-link:hover,
.v2 .app-nav-section-link:hover { background: var(--surface-2); }

/* Compact search pill (right-aligned; grows on focus) */
.v2 .nav-search { flex: 1 1 0; padding: 0; justify-content: flex-end; }
.v2 .hsearch-wrap { max-width: 230px; transition: max-width 0.2s var(--ease); }
.v2 .hsearch-wrap:focus-within { max-width: 320px; }
.v2 .hsearch-input {
  height: 34px;
  padding: 0 12px 0 32px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text);
  font-size: 13px;
  font-weight: 450;
  letter-spacing: 0;
  text-overflow: ellipsis;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.v2 .hsearch-input::placeholder { color: var(--text-3); }
.v2 .hsearch-input:focus {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--blue) 55%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 14%, transparent);
}
.v2 .hsearch-icon { left: 11px; width: 14px; height: 14px; color: var(--text-3); }
.v2 .hsearch-wrap:focus-within .hsearch-icon { color: var(--blue); }
.v2 .hsearch-results {
  left: auto;
  width: min(360px, calc(100vw - 24px));
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  padding: 4px;
}
.v2 .hsearch-item { border-radius: 8px; border-bottom: 0; padding: 8px 10px; }
.v2 .hsearch-item:hover,
.v2 .hsearch-item.is-active { background: var(--surface-2); }
.v2 .hsearch-name { font-weight: 550; font-size: 13.5px; }
.v2 .hsearch-results mark { color: var(--blue); font-weight: 700; }

/* Right-side icon buttons */
.v2 .header-right { gap: 4px; }
.v2 .theme-toggle,
.v2 .mobile-search-btn,
.v2 .nav-menu-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text-2);
  box-shadow: var(--shadow-xs);
}
.v2 .theme-toggle svg,
.v2 .mobile-search-btn svg { width: 15px; height: 15px; }
.v2 .nav-menu-btn svg { width: 17px; height: 17px; }
.v2 .theme-toggle:hover,
.v2 .mobile-search-btn:hover,
.v2 .nav-menu-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--line-strong); }

/* Mobile overlays anchor under the floating pill, styled as cards */
.v2 .nav-menu-panel,
.v2 .nav-search.mobile-open {
  top: calc(var(--nav-h) + 6px) !important;
  left: var(--header-gap);
  right: var(--header-gap);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
}
.v2 .nav-menu-panel { max-height: calc(100dvh - var(--nav-h) - 20px); }
.v2 .nav-search.mobile-open .hsearch-wrap { max-width: 100%; }
.v2 .nav-search.mobile-open .hsearch-results { width: 100%; left: 0; }

@media (max-width: 1260px) {
  .v2 .brand-tagline { display: none; }
}
/* The standard 1080px column is too narrow for the tagline beside the centred nav. */
.v2 body:not(.v2-home):not(.v2-explore) .brand-tagline { display: none; }
@media (max-width: 980px) {
  .v2 .brand { margin-right: 0; }
}
@media (max-width: 820px) {
  .v2 .hej-header { height: var(--header-h); padding: 0 6px 0 8px; }
  .v2 .brand { font-size: 16px; }
}

/* Bottom tab bar (≤640px) — floating pill to match the header */
@media (max-width: 640px) {
  .v2 .hej-bottom-nav {
    left: 8px;
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    height: 56px;
    padding-bottom: 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow-md);
  }
  .v2 .hej-bn-tab { border-radius: 12px; color: var(--text-3); }
  .v2 .hej-bn-tab.active { color: var(--text); }
  .v2 .hej-bn-label { font-weight: 600; }
  /* Menu and search sheets stop above the floating tab bar so it stays tappable. */
  .v2 body.has-bottom-nav .nav-menu-panel {
    max-height: calc(100dvh - var(--nav-h) - 6px - 72px - env(safe-area-inset-bottom, 0px));
  }
}

/* ── Shared primitives ────────────────────────────────────────────────────── */
.v2-wrap { width: min(var(--col-max), calc(100% - 2 * var(--col-pad))); margin-inline: auto; }
@media (max-width: 640px) {
  :root.v2 { --col-pad: 12px; }
}

.v2-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-2);
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}

.v2-tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 10.5px;
  font-weight: 500;
  white-space: nowrap;
}

.v2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 34px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.v2-btn:hover { background: var(--surface-2); border-color: var(--line-strong); }
.v2-btn:active { transform: translateY(1px); }
.v2-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.v2-btn--primary { background: var(--text); border-color: var(--text); color: var(--surface); }
.v2-btn--primary:hover { background: color-mix(in srgb, var(--text) 86%, var(--surface)); border-color: transparent; }

.v2-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--blue);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
}
.v2-link svg { width: 13px; height: 13px; transition: transform 0.18s var(--ease); }
.v2-link:hover svg,
a:hover .v2-link svg { transform: translateX(3px); }

/* Section heading: dark icon tile + title/sub + optional meta pill */
.v2-sec-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.v2-sec-icon {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--text);
  color: var(--surface);
}
.v2-sec-icon svg { width: 16px; height: 16px; }
.v2-sec-title { margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.25; }
.v2-sec-sub { margin: 1px 0 0; color: var(--text-2); font-size: 12.5px; line-height: 1.4; }
.v2-sec-head > .v2-pill,
.v2-sec-head > .v2-sec-meta { margin-left: auto; }

.v2-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 26px 0 12px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.v2-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* ── Footer: one floating card, identical on every v2 page ──────────────────
   Markup: scripts/lib/v2-footer.mjs (sync with scripts/sync-v2-footer.mjs). */
.v2 .site-footer.v2f { margin: 72px 0 0; padding: 0 0 24px; border: 0; background: none; }
.v2 .v2f-inner {
  display: grid;
  grid-template-columns: minmax(220px, 1.15fr) minmax(0, 3fr);
  gap: 32px 48px;
  width: min(var(--col-max), calc(100% - 2 * var(--col-pad)));
  margin-inline: auto;
  padding: 36px 40px 20px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-sm);
  color: var(--text-2);
  font-size: 14px;
}
.v2 .v2f-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-size: 23px; font-weight: 800; letter-spacing: -0.04em; text-decoration: none; }
.v2 .v2f-logo .brand-l { font-size: 1em; }
.v2 .v2f-logo .v2-logo { flex: 0 0 36px; width: 36px; height: 36px; overflow: visible; transition: transform 0.35s var(--ease); }
.v2 .v2f-tag { max-width: 24ch; margin: 12px 0 0; color: var(--text-2); font-size: 15px; line-height: 1.5; }
.v2 .v2f-social { display: flex; gap: 8px; margin-top: 18px; }
.v2 .v2f-social a {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text-2);
  transition: color 0.15s, border-color 0.15s, transform 0.2s var(--ease);
}
.v2 .v2f-social a:hover { border-color: var(--line-strong); color: var(--text); transform: translateY(-2px); }
.v2 .v2f-social svg { width: 16px; height: 16px; }
.v2 .v2f-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.v2 .v2f-h { margin: 0 0 12px; color: var(--text); font-size: 13px; font-weight: 700; }
.v2 .v2f-col ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.v2 .v2f-col a,
.v2 .v2f-cookie { padding: 0; border: 0; background: none; color: var(--text-2); cursor: pointer; font: inherit; font-size: 14px; line-height: 1.35; text-align: left; text-decoration: none; transition: color 0.15s; }
.v2 .v2f-col a:hover,
.v2 .v2f-cookie:hover { color: var(--blue); }
.v2 .v2f-bottom {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--text-3);
  font-size: 12.5px;
  line-height: 1.6;
}
.v2 .v2f-bottom p { margin: 0; }
.v2 .v2f-bottom p:last-child { display: flex; gap: 8px; }
.v2 .v2f-bottom a { color: var(--text-2); text-decoration: none; }
.v2 .v2f-bottom a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 899px) {
  .v2 .v2f-inner { grid-template-columns: 1fr; gap: 28px; padding: 28px 22px 18px; border-radius: 20px; }
  .v2 .v2f-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
}
@media (max-width: 640px) {
  .v2 body.has-bottom-nav .site-footer.v2f { padding-bottom: 90px; }
}

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

/* ── Shared components (landing tour + country pages) ─────────────────────── */
@keyframes v2-rise { from { opacity: 0; transform: translateY(8px); } }
.v2-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.v2-chip:hover { color: var(--text); border-color: var(--line-strong); }
.v2-chip svg { width: 13px; height: 13px; color: var(--blue); }
.v2-chip i { color: var(--text-3); font-style: normal; font-size: 11px; }
.v2-chip .hej-flag { width: 16px; height: 11px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06); }
.v2-chip-flags { display: inline-flex; }
.v2-chip-flags .hej-flag + .hej-flag { margin-left: -4px; box-shadow: 0 0 0 1.5px var(--surface); }
.v2-kicker { color: var(--text-3); font-size: 11px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; }
.v2-floaters { position: absolute; inset: 0; will-change: opacity; }
.v2-floater { position: absolute; display: block; width: calc(var(--w) * var(--fs, 1)); pointer-events: none; will-change: transform; }
.v2-floater svg { display: block; width: 100%; height: auto; overflow: visible; }
.v2-floater-bob { display: block; will-change: transform; animation: v2-bob var(--dur, 8s) ease-in-out var(--delay, 0s) infinite alternate; }
.v2-floater.is-pop svg { animation: v2-pop 0.5s var(--ease); }
:root.v2[data-theme="dark"] .v2-floater { opacity: 0.7; }
@keyframes v2-bob { from { transform: translate(0, -7px) rotate(-3deg); } to { transform: translate(0, 7px) rotate(3deg); } }
@keyframes v2-pop { 0% { transform: scale(0.8); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes v2-nudge { 50% { transform: translateY(4px); } }
.v2-panel-eyebrow { display: flex; align-items: center; gap: 7px; color: var(--text-3); font-size: 11px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; }
.v2-dot { width: 9px; height: 9px; border-radius: 3px; background: var(--c, var(--blue)); }
.v2-dot[data-c="eu"] { --c: #2563eb; }
.v2-dot[data-c="as"] { --c: #e8553d; }
.v2-dot[data-c="af"] { --c: #d97706; }
.v2-dot[data-c="na"] { --c: #7c3aed; }
.v2-dot[data-c="sa"] { --c: #16a34a; }
.v2-dot[data-c="oc"] { --c: #0891b2; }
.v2-greet { padding: 14px 16px 12px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); }
.v2-greet-word {
  display: block;
  font-size: clamp(46px, 5vw, 72px);
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  color: var(--blue);
  padding-bottom: 4px;
}
.v2-greet-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; color: var(--text-2); font-size: 12.5px; }
.v2-greet-meta b { color: var(--text); font-weight: 600; }
.v2-greet-play {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border: 0;
  border-radius: 999px;
  background: var(--text);
  color: var(--surface);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.v2-greet-play svg { width: 14px; height: 14px; }
.v2-greet-play.is-playing { background: var(--blue); }
.v2-greet-play.is-playing svg { animation: v2-pop 0.6s ease-in-out infinite; }
.v2-bubble-bg { fill: var(--text); }
.v2-bubble-text { fill: var(--surface); }
.v2-floaters--top { z-index: 2; pointer-events: none; }

/* ── v2 menus (js/v2/shell.js): Maps, Countries, Games ────────────────────── */
.v2 .app-nav-group-dropdown:has(.v2m) { padding: 0; overflow: hidden auto; }
.v2 .app-nav-group-dropdown:has(.v2m--maps) { width: min(1060px, calc(100vw - 40px)); }
.v2 .app-nav-group-dropdown:has(.v2m--countries) { width: min(760px, calc(100vw - 40px)); }
.v2 .app-nav-group-dropdown:has(.v2m--games) { width: min(920px, calc(100vw - 40px)); }
.v2m { display: grid; gap: 0; }
.v2m-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 16px 16px 10px; }
.v2m-col h3 { margin: 0 0 6px; padding: 0 8px; color: var(--t); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.v2 .v2m-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 0;
  border-radius: 12px;
  color: var(--text);
  text-decoration: none;
  transition: background 0.15s, transform 0.2s var(--ease);
}
.v2 .v2m-tile:hover { background: color-mix(in srgb, var(--t) 8%, var(--surface)); }
.v2 .v2m-tile:hover .v2m-ico { transform: scale(1.06) rotate(-4deg); }
.v2m-ico {
  display: grid;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--t) 14%, var(--surface));
  color: var(--t);
  transition: transform 0.25s var(--ease);
}
.v2m-ico svg { width: 18px; height: 18px; }
.v2m-copy { display: grid; min-width: 0; line-height: 1.25; }
.v2m-copy strong { overflow: hidden; font-size: 13.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.v2m-copy small { overflow: hidden; color: var(--text-3); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.v2m-badge { position: absolute; top: 4px; right: 6px; padding: 1px 6px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.v2m-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--surface-2); }
.v2m-foot p { margin: 0; color: var(--text-3); font-size: 12.5px; }
.v2m-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.v2m-chips > span { margin-right: 4px; color: var(--text-3); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.v2 .v2m-chip { display: inline-flex; height: 28px; align-items: center; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.v2 .v2m-chip:hover { border-color: var(--blue); color: var(--blue); background: var(--surface); }
.v2 .v2m-all { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--text); color: var(--surface); font-size: 13px; font-weight: 650; text-decoration: none; white-space: nowrap; }
.v2 .v2m-all:hover { background: var(--blue); color: #fff; }
.v2m-all svg { width: 14px; height: 14px; }
.v2 [aria-current="page"].v2m-tile,
.v2 .v2m-tile.app-nav-dropdown-link--active { background: color-mix(in srgb, var(--t) 10%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t) 35%, transparent); }
.v2 .v2m-chip.app-nav-dropdown-link--active { border-color: var(--blue); color: var(--blue); }

/* Countries: a flag grid and two ways in */
.v2m--countries { grid-template-columns: minmax(0, 1fr) 240px; }
.v2m-flags { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 14px; }
.v2 .v2m-flag { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 12px; color: var(--text); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.v2 .v2m-flag:hover { background: var(--surface-2); }
.v2m-flag img { flex: 0 0 auto; width: 30px; height: 22px; border-radius: 5px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); }
.v2m-flag span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2m-side { display: grid; align-content: start; gap: 4px; padding: 14px; border-left: 1px solid var(--line); background: var(--surface-2); }
.v2m-side .v2m-all { justify-content: center; margin-top: 8px; }

/* Games: cards with their regions */
.v2m-games { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 14px; }
.v2m-game { display: grid; align-content: start; gap: 8px; padding: 6px 6px 10px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--t) 4%, var(--surface)); }
.v2m-game .v2m-copy strong, .v2m-game .v2m-copy small { white-space: normal; }
.v2m-regions { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 6px; }
.v2 .v2m-regions a { display: inline-flex; height: 24px; align-items: center; padding: 0 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text-2); font-size: 11.5px; font-weight: 600; text-decoration: none; }
.v2 .v2m-regions a:hover { border-color: var(--t); color: var(--t); }
@media (max-width: 1180px) {
  .v2m-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .v2m-games { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phone menu */
.v2 .v2mm { padding: 6px; gap: 2px; background: var(--surface); }
.v2mm-group { border-bottom: 1px solid var(--line); }
.v2mm-group:last-of-type { border-bottom: 0; }
.v2mm-head { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 12px 10px; border: 0; background: none; color: var(--text); font: inherit; font-size: 16px; cursor: pointer; }
.v2mm-head strong { font-weight: 750; letter-spacing: -0.01em; }
.v2mm-head svg { width: 16px; height: 16px; color: var(--text-3); transition: transform 0.2s; }
.v2mm-head[aria-expanded="true"] svg { transform: rotate(180deg); }
.v2mm-body { display: grid; gap: 6px; padding: 0 4px 12px; }
.v2mm-body h4 { margin: 6px 6px 0; color: var(--text-3); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.v2mm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.v2 .v2mm .nav-menu-item { font-family: var(--font); }
.v2 .v2mm .v2m-tile { padding: 8px; border: 0; font-size: 13px; }
.v2 .v2mm .v2m-flag { padding: 8px; border: 0; }
.v2mm .v2m-flags { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; }
.v2mm .v2m-chips { padding: 0 4px; }
.v2 .v2mm .v2m-chip { padding: 0 10px; }
.v2 .v2mm .v2m-regions a { padding: 0 8px; }
.v2mm .v2m-game { margin: 0 4px; }
.v2 .v2mm .v2m-all { justify-self: start; margin: 4px 6px 0; padding: 0 14px; color: var(--surface); }
.v2 .v2mm-link { padding: 14px 10px; border: 0; color: var(--text); font-size: 16px; font-weight: 700; }

/* Reset the classic dropdown-link box for the v2 menu pieces. */
.v2 .v2m .app-nav-dropdown-link,
.v2 .v2mm .nav-menu-item { min-height: 0; grid-template-columns: none; border-bottom: 0; font-family: var(--font); }
.v2 .v2m .v2m-chip, .v2 .v2mm .v2m-chip { display: inline-flex; min-height: 0; height: 28px; padding: 0 10px; }
.v2 .v2m .v2m-regions a, .v2 .v2mm .v2m-regions a { display: inline-flex; min-height: 0; height: 24px; padding: 0 8px; }
.v2 .v2m .v2m-flag, .v2 .v2mm .v2m-flag { display: flex; min-height: 0; padding: 8px 10px; }
.v2 .v2m .v2m-tile, .v2 .v2mm .v2m-tile { display: flex; min-height: 0; padding: 8px; }
.v2 .v2m .v2m-all, .v2 .v2mm .v2m-all { display: inline-flex; min-height: 0; height: 34px; padding: 0 14px; border-radius: 999px; }
.v2 .v2mm .v2m-ico, .v2 .v2mm .v2m-ico svg { color: var(--t); }
.v2 .v2mm .v2m-copy strong, .v2 .v2mm .v2m-copy small { white-space: normal; }
.v2 .v2mm .v2m-copy strong { font-size: 13.5px; }

/* ── "Compare with …" suggestion bubbles (landing tour + country pages) ───── */
.v2-cmp-bubbles { display: grid; gap: 10px; justify-items: stretch; }
.v2-cmp-kicker { color: var(--text-2); font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.v2-cmp-bubble {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px 9px 10px;
  border: 1px solid var(--line);
  border-radius: 18px 18px 18px 5px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
  color: var(--text);
  text-decoration: none;
  transition: transform 0.2s var(--ease), border-color 0.2s, box-shadow 0.2s;
  animation: v2-cmp-float 7s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -2.3s);
}
.v2-cmp-bubble:hover { border-color: var(--blue); box-shadow: var(--shadow-lg, var(--shadow-md)); transform: translateX(-4px); }
.v2-cmp-flags { display: flex; flex: 0 0 auto; }
.v2-cmp-flags img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--surface); }
.v2-cmp-flags img + img { margin-left: -8px; }
.v2-cmp-copy { display: grid; flex: 1; min-width: 0; line-height: 1.2; }
.v2-cmp-copy b { overflow: hidden; font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.v2-cmp-copy small { color: var(--text-3); font-size: 11.5px; }
.v2-cmp-go { display: grid; color: var(--blue); }
.v2-cmp-go svg { width: 15px; height: 15px; transition: transform 0.2s var(--ease); }
.v2-cmp-bubble:hover .v2-cmp-go svg { transform: translateX(3px); }
@keyframes v2-cmp-float { 50% { translate: 0 -4px; } }
@keyframes v2-cmp-pop { from { opacity: 0; transform: translateX(18px) scale(0.94); } }
@media (prefers-reduced-motion: reduce) { .v2-cmp-bubble { animation: none; } }

/* ── Lite mode (js/v2/head.js: weak device, data saver or ?lite=1) ───────── */
.v2-lite *, .v2-lite *::before, .v2-lite *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.v2-lite .v2-floater-bob, .v2-lite .v2-cmp-bubble, .v2-lite .v2-tour-hint svg { animation: none !important; }
.v2-lite .v2-tt-ch { animation-name: v2-rise !important; filter: none !important; }
.v2-lite .v2-floater--wide { display: none; }