/* =========================================================
   MTBonline — navigazione globale
   Header, menu M (pannello Explore) e icona M. Unico file per la navigazione:
   header, utility bar, logo, voci rapide, contesto, pulsante Explore, pannello.
   Colori solo da token (tokens.css): la palette si cambia senza toccare questo file.
   ========================================================= */

/* ---------- 1. Header: posizione e comportamento ----------
   Fisso in alto; scendendo si nasconde, alla prima risalita riappare (mtb-navigation.js).
   Cambio invisibile tra foto e contenuto: stessa altezza nei due stati; la carta e uno strato
   (::before) che sfuma insieme a testo e logo in .2s; scendendo, la barra lascia la foto
   nascondendosi e diventa carta solo a scomparsa finita (ritardo .28s su .is-nav-hidden). */
.site-header {position: fixed; inset: 0 0 auto; z-index: 1070; transform: translate3d(0,0,0); transition: transform .28s cubic-bezier(.22,.61,.36,1), color .2s ease; will-change: transform;
  /* Sopra le foto: trasparente, testo bianco sulla velatura. */
  --header-ink: var(--color-white); --header-line: rgb(var(--color-white-rgb) / .22); --header-surface: rgb(var(--color-white-rgb) / .1);
  color: var(--header-ink); background: linear-gradient(180deg, rgb(var(--bg-dark-rgb) / .5), rgb(var(--bg-dark-rgb) / 0)); box-shadow: none;}

/* La carta della barra: uno strato che compare e scompare, con il filetto in basso (dentro, senza cambiare l'altezza). */
.site-header::before {content: ""; position: absolute; z-index: -1; inset: 0; background: var(--mtb-paper); box-shadow: inset 0 -1px 0 var(--mtb-rule); opacity: 0; transition: opacity .2s ease; pointer-events: none;}

.site-header.is-nav-hidden {transform: translate3d(0,-100%,0); transition: transform .28s cubic-bezier(.22,.61,.36,1), color 0s linear .28s;}

.site-header.is-nav-hidden::before {transition: opacity 0s linear .28s;}

.site-header:focus-within,
body.nav-open .site-header {transform: translate3d(0,0,0);}

/* Solido o dopo lo scroll: carta, testo in ardesia (18:1). L'azzurro resta al footer:
   le due cornici della pagina non si ripetono (ardesia in alto, azzurro in fondo). */
.site-header.is-scrolled,
.site-header--solid {--header-ink: var(--mtb-ink); --header-line: var(--mtb-rule); --header-surface: var(--mtb-paper); color: var(--header-ink); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;}

.site-header.is-scrolled::before,
.site-header--solid::before {opacity: 1;}

/* Sopra una hero chiara (data-header-tone='light', articoli News): resta trasparente, testo e logo in ardesia. */
.site-header.is-on-light:not(.is-scrolled) {--header-ink: var(--mtb-ink); --header-line: var(--mtb-rule); --header-surface: var(--mtb-paper); color: var(--header-ink); background: transparent;}

.site-header.is-on-light:not(.is-scrolled) .brand-logo-white {filter: brightness(0);}

/* Sulla carta il logo e in ardesia; sopra le foto resta bianco. */
.site-header .brand-logo-white {transition: opacity .3s ease, filter .2s ease;}

.site-header.is-nav-hidden .brand-logo-white {transition: opacity .3s ease, filter 0s linear .28s;}

.site-header:is(.is-scrolled, .site-header--solid) .brand-logo-white {filter: brightness(0);}

.site-header .container-fluid,
.site-header .header-navigation {width: 100%; max-width: none;}

.site-header .header-navigation {position: relative;}

/* Un'altezza sola, sopra la foto e sul contenuto: il cambio di stato non sposta nulla. */
.navbar {min-height: 68px;}

.site-header .navbar {width: 100%; max-width: none;}

.header-trail-signal {display: none;}

/* ---------- 2. Utility bar ---------- */
/* Utility bar: sempre ardesia, in ogni stato dell'header. */
.utility-bar {height: 30px; color: rgb(var(--color-white-rgb) / .86); background: var(--mtb-night); border-bottom: 0; font: var(--weight-medium) .72rem/1 var(--font-body); letter-spacing: 0; text-transform: none;}

.utility-bar > div {height: 100%; gap: .72rem;}

.utility-date {min-width: 3.4rem;}

.utility-divider {width: 1px; height: 10px; background: currentColor; opacity: .24;}

.online-now {display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;}

.online-now strong {font-weight: var(--weight-regular);}

.online-now i {width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .75;}

.utility-message {margin-left: auto; color: inherit; opacity: .75;}

/* La sezione corrente (smartphone, dove le voci in alto non ci stanno): prende il posto di "online",
   con il punto in rosso accent sullo scuro come la voce attiva del menu. */
.utility-section {display: none; align-items: center; gap: .4rem; color: var(--color-white); white-space: nowrap;}

.utility-section i {width: 6px; height: 6px; border-radius: 50%; background: var(--mtb-signal-on-dark);}

.utility-section strong {font-weight: var(--weight-bold);}

/* ---------- 3. Logo ----------
   Regole generiche (valgono anche nel footer); nell'header il logo e sempre bianco. */
.brand {display: inline-flex; align-items: center;}

.brand--header {min-height: 44px;}

.brand-logo {position: relative; display: block; width: clamp(188px, 17vw, 250px); aspect-ratio: 8 / 1;}

.brand-logo img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: left center;}

.brand-logo-base {opacity: 1; transition: opacity .3s ease;}

.brand-logo-white {filter: brightness(0) invert(1); opacity: 0; transition: opacity .3s ease;}

.brand--light .brand-logo-base,
.site-header .brand-logo-base {opacity: 0;}

.brand--light .brand-logo-white,
.site-header .brand-logo-white {opacity: 1;}

/* ---------- 4. Voci rapide ---------- */
.primary-header-nav {display: flex; align-items: center; gap: clamp(1.25rem, 2.2vw, 2.25rem); margin-left: auto;}

/* Una regola sola in ogni stato: a riposo il colore pieno della barra; al passaggio e al focus
   l'azzurro del fondo (ciano luce sulla foto, azzurro profondo sulla carta e sulle hero chiare).
   Rosso solo per "sei qui", azzurro solo per "puoi andarci". */
.site-header {--header-hover: var(--mtb-sky);}

.site-header:is(.is-scrolled, .site-header--solid, .is-on-light) {--header-hover: var(--mtb-trail);}

.primary-header-nav a {position: relative; padding: var(--space-4) 0; color: inherit; font: var(--weight-bold) .95rem/1 var(--font-body); letter-spacing: 0; text-transform: none; transition: color .2s ease;}

.primary-header-nav a:not(.active):is(:hover, :focus-visible) {color: var(--header-hover);}

/* Voce attiva (aria-current="page"): il contesto in rosso accent, sotto la voce. */
.primary-header-nav a.active {box-shadow: inset 0 -3px 0 var(--color-accent);}

.site-header :is(a, button):focus-visible {outline: 2px solid currentColor; outline-offset: 3px;}

/* ---------- 5. Contesto: dove sei ---------- */
.nav-context {min-width: 0; align-items: center; gap: .55rem; margin-left: clamp(1rem,2vw,2rem); padding-left: clamp(1rem,2vw,2rem); border-left: 1px solid var(--header-line);}

.nav-context span {color: inherit; opacity: .6; font: var(--weight-medium) .72rem/1 var(--font-body); letter-spacing: 0; text-transform: lowercase;}

.nav-context strong {max-width: 16ch; overflow: hidden; color: inherit; font: var(--weight-bold) .85rem/1 var(--font-body); letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap;}

.nav-context i {width: 5px; height: 5px; margin-left: .12rem; background: currentColor; border-radius: 50%;}

/* In prova: la posizione la dice l'unita PageX (linguetta sotto la barra).
   Per ripristinare l'etichetta basta togliere questa regola. */
.site-header .nav-context {display: none !important;}

.nav-context [data-mtb-nav-context-label] {transition: opacity .14s ease;}

.nav-context.is-updating [data-mtb-nav-context-label] {opacity: .35;}

.nav-context[data-context-source="section"] [data-mtb-nav-context-kicker] {color: var(--bg-muted);}

/* ---------- 6. Azioni: cerca ed Explore ---------- */
.header-actions {display: flex; align-items: center; gap: .35rem; margin-left: auto;}

.site-header .header-actions {gap: .65rem;}

.icon-button {display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; color: inherit; background: transparent; border: 0;}

.site-header .icon-button {width: 46px; min-width: 46px; height: 46px; min-height: 46px; color: currentColor; background: var(--header-surface); border: 1px solid var(--header-line); border-radius: 50%; transition: none;}

.site-header .icon-button:hover,
.site-header .icon-button:focus-visible {color: var(--mtb-paper); background: var(--mtb-night); border-color: var(--mtb-night); transform: none;}

/* Pulsante Explore: la M compatta, senza fondo in nessuno stato. */
.explore-button {min-height: 44px; display: inline-flex; align-items: center; gap: .8rem; padding: var(--space-2) .9rem; color: inherit; background: transparent; border: 0; border-radius: 0; box-shadow: none; font: var(--weight-display) .68rem/1 var(--font-body); letter-spacing: .11em; text-transform: uppercase;}

.explore-button--m {min-width: 92px; justify-content: center; gap: .65rem; padding: var(--space-1) .55rem var(--space-1) .7rem;}

/* Nell'header la M chiude la barra sul margine, come il logo la apre: niente spazio a destra. */
.site-header .explore-button--m {justify-content: flex-end; padding-right: 0;}

.explore-label {font: var(--weight-bold) .85rem/1 var(--font-body); letter-spacing: 0; text-transform: none;}

/* Icona M: l'ordine conta (.m-mini, poi .nav-mini, poi il contesto header). */
.m-mini {position: relative; display: block; flex: 0 0 auto; width: 48px; height: 30px;}

.nav-mini {position: relative; display: block; width: 48px; height: 30px; flex: 0 0 48px;}

.site-header .m-mini {display: grid; width: 38px; height: 38px; place-items: center; background: transparent; border-radius: 0;}

.nav-mini__svg {display: block; width: 48px; height: 30px; overflow: visible;}

.nav-mini__path {fill: none; stroke: currentColor; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round;}

/* Il punto sulla M piccola: "sei qui", lo stesso ciano del pannello. La M e ridotta a un
   quarto, quindi il punto e una perla piu larga del tratto; un filo d'inchiostro lo stacca
   anche dal tratto bianco sopra le foto. */
.nav-mini__marker {r: 10px; fill: var(--mtb-sky); stroke: rgb(var(--bg-dark-rgb) / .55); stroke-width: 3; paint-order: stroke; pointer-events: none;}

/* La scia del giro di anteprima: luce ciano dentro il tratto (mtb-navigation.js). */
.nav-mini__trail {fill: none; stroke: var(--mtb-sky); stroke-width: 8; stroke-linecap: round; opacity: 0; pointer-events: none; transition: opacity .35s ease;}

.nav-mini__trail.is-riding {opacity: .9;}

/* ---------- 7. Pannello M: la mappa e il percorso ----------
   In alto la didascalia a sinistra e la M a destra, alte uguali (stesso ritmo verticale).
   In basso la M aperta e distesa: il percorso che attraversa le sezioni.
   Nessun rosso nel pannello: la posizione corrente e il punto ciano. */
body.nav-open {overflow: hidden;}

.nav-panel {position: fixed; z-index: 1080; inset: 0; width: 100%; height: 100dvh; overflow: hidden; color: var(--color-text); background: var(--bg-stone);
  --nav-gutter: clamp(1.25rem,4.4vw,4rem);
  --nav-rule: rgb(var(--bg-dark-rgb) / .12);}

.nav-panel[hidden] {display: none !important;}

.nav-panel__backdrop {display: none;}

.nav-panel__sheet {position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0,1fr) auto; width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; overflow: hidden; color: var(--color-text); background: var(--bg-stone); box-shadow: none;}

.nav-panel__head {display: flex; min-height: 80px; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-3) var(--nav-gutter); border-bottom: 1px solid var(--nav-rule);}

.nav-panel__brand img {width: clamp(165px,17vw,220px); height: auto; filter: brightness(0);}

/* Close: testo pieno e una X grande, facile da trovare e da colpire. */
.nav-close {display: inline-flex; min-height: 56px; align-items: center; gap: .875rem; padding: .25rem 0; color: var(--color-text); background: transparent; border: 0; font: var(--weight-bold) 1.1875rem/1 var(--font-body); letter-spacing: 0; text-transform: none;}

.nav-close i {font-size: 2.5rem; line-height: 1; -webkit-text-stroke: .6px currentColor;}

.nav-close:is(:hover, :focus-visible) {color: var(--color-link);}

.nav-panel__grid {position: relative; isolation: isolate; display: grid; min-height: 0; height: 100%; grid-template-rows: auto auto; align-content: space-between; gap: var(--space-6); padding: clamp(1.25rem,4.4vh,2.5rem) var(--nav-gutter) clamp(1rem,2.6vh,1.5rem); overflow: hidden;}

/* La carta: curve di livello in ardesia, reticolo e valori in azzurro profondo,
   come su una carta topografica. Sotto tutto il contenuto, appena percettibile. */
.nav-terrain {position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .9s ease-out;}

.nav-terrain.is-drawn {opacity: 1;}

.nav-terrain__contour {fill: none; stroke: var(--mtb-ink); stroke-opacity: .07; stroke-width: 1; stroke-linecap: round;}

.nav-terrain__contour--index {stroke-opacity: .13; stroke-width: 1.25;}

.nav-terrain__grid {fill: none; stroke: var(--mtb-trail); stroke-opacity: .16; stroke-width: 1;}

.nav-terrain__label {fill: var(--mtb-trail); font: var(--weight-bold) .625rem/1 var(--font-data); font-variant-numeric: tabular-nums; letter-spacing: .02em;}

/* Didascalia e M su un ritmo comune: l'altezza della M e la somma delle righe del testo. */
.nav-panel__intro {position: static; display: grid; min-width: 0; grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto auto auto; column-gap: clamp(2rem,5vw,6rem); align-items: start;
  --kick-lh: 1.5rem; --kick-gap: 1rem;
  --h2-lh: clamp(3rem,5.5vw,5rem); --h2-gap: 1.5rem;
  --p-lh: 1.5rem; --p-lines: 2;
  --intro-h: calc(var(--kick-lh) + var(--kick-gap) + 2 * var(--h2-lh) + var(--h2-gap) + var(--p-lines) * var(--p-lh));}

.nav-panel__intro .text-kicker {grid-column: 1; grid-row: 1; margin: 0; color: var(--color-muted); font: var(--weight-medium) .9375rem/var(--kick-lh) var(--font-body); letter-spacing: 0; text-transform: none;}

.nav-panel__intro h2 {grid-column: 1; grid-row: 2; max-width: 9em; margin: var(--kick-gap) 0 0; color: var(--color-text); font: var(--weight-display) calc(var(--h2-lh) * 1.05)/var(--h2-lh) var(--font-display); font-stretch: 115%; letter-spacing: -.04em;}

.nav-panel__intro > p:last-child {grid-column: 1; grid-row: 3; max-width: 40ch; margin: var(--h2-gap) 0 0; color: var(--color-muted); font-size: 1rem; line-height: var(--p-lh);}

/* La M: si trascina il punto lungo la traccia. */
.nav-mapmark {position: relative; grid-column: 2; grid-row: 1 / -1; height: var(--intro-h); aspect-ratio: 209 / 131; margin: 0; cursor: crosshair; touch-action: none; user-select: none;}

.nav-mapmark > img {position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; filter: brightness(0); opacity: .9;}

.nav-course {position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; overflow: visible; touch-action: none; cursor: crosshair; pointer-events: all;}

.nav-course__hitarea {fill: transparent; pointer-events: all;}

.nav-course__path {fill: none; stroke: transparent; stroke-width: 18; stroke-linecap: round; stroke-linejoin: round; pointer-events: stroke;}

/* La scia: una luce ciano che scorre dentro il tratto e sfuma dietro il punto.
   Il raggio in CSS prevale su quello scritto dal JS: i punti si fondono in una linea sottile. */
.nav-course__trail {opacity: 0; pointer-events: none; transition: opacity .7s ease-out;}

.nav-course__trail circle {r: 2.6px; fill: var(--mtb-sky);}

.nav-course__marker {r: 3.6px; fill: var(--mtb-sky); stroke: none; pointer-events: none; filter: none;}

/* Le tappe: sette voci in un unico flusso, da Home a Live, senza stacchi.
   Sopra le voci corre il percorso: la M aperta in Home e distesa in linea spezzata.
   Lo disegna mtb-navigation.js leggendo il layout: --route-axis e --route-band dicono
   in che direzione corre e quanto spazio ha. Ogni tappa cade dove inizia il testo della voce. */
.nav-map {position: relative; display: grid; min-height: 0; grid-template-columns: repeat(7, minmax(0,1fr)); align-self: end; padding-top: var(--route-band); border-top: 0;
  --route-axis: horizontal; --route-band: 160px;}

.nav-map a {position: relative; display: flex; min-width: 0; flex-direction: column; gap: .5rem; padding: .75rem 1.125rem 1rem; color: var(--color-text); transition: background-color .28s ease, color .28s ease;}

/* Il percorso ha il tratto della M: stesso inchiostro, capi e angoli arrotondati.
   Le tappe sono fori nel tratto; il punto ciano pedala dentro, con la sua scia. */
.nav-route {position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none;}

.nav-route__line {fill: none; stroke: var(--mtb-ink); stroke-opacity: .9; stroke-width: 16; stroke-linecap: round; stroke-linejoin: round;}

.nav-route__ticks line {stroke: rgb(var(--bg-dark-rgb) / .28); stroke-width: 1;}

.nav-route__checkpoints circle {r: 3.5px; fill: var(--bg-stone);}

.nav-route__trail {opacity: 0; transition: opacity .7s ease-out;}

.nav-route__trail circle {r: 3px; fill: var(--mtb-sky);}

.nav-route__rider {r: 5px; fill: var(--mtb-sky);}

/* Mentre la M si distende, il percorso aspetta: arriva lei a disegnarlo. */
.nav-route.is-waiting,
.nav-panel .nav-map .nav-route__coords.is-waiting {visibility: hidden;}

/* La M che si apre: una copia del tratto, stesso inchiostro e stessi capi arrotondati,
   sopra tutto il pannello per il tempo del viaggio (mtb-navigation.js). */
.nav-unfold {position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; visibility: hidden;}

.nav-unfold.is-active {visibility: visible;}

.nav-unfold__line {fill: none; stroke: var(--mtb-ink); stroke-opacity: .9; stroke-linecap: round; stroke-linejoin: round;}

/* Le coordinate del punto, come su un GPS da bici: seguono il punto sul percorso e
   scorrono mentre pedala. Pseudo-geografiche, ricavate dalla M (mtb-navigation.js). */
.nav-map .nav-route__coords {position: absolute; z-index: 1; left: calc(var(--coords-x, 0px) + 12px); top: calc(var(--coords-y, 0px) - 12px); display: grid; grid-template-rows: auto auto; grid-auto-flow: column; gap: .1875rem .75rem; color: var(--color-text); font: var(--weight-display) .75rem/1 var(--font-display); font-stretch: 78%; font-variant-numeric: tabular-nums; letter-spacing: .02em; white-space: nowrap; pointer-events: none; transform: translateY(-100%); visibility: hidden;}

.nav-map .nav-route__coords.is-ready {visibility: visible;}

.nav-map .nav-route__coords.is-below {top: calc(var(--coords-y, 0px) + 12px); transform: none;}

.nav-map .nav-route__coords span {font: inherit; letter-spacing: inherit;}

/* Quota e distanza da Home: la seconda colonna, un tono sotto le coordinate. */
.nav-map .nav-route__coords :is([data-coords-alt], [data-coords-km]) {color: var(--color-muted);}

.nav-map b {color: var(--color-muted); font: var(--weight-display) 1rem/1.5rem var(--font-data); font-variant-numeric: tabular-nums; letter-spacing: 0;}

.nav-map span {min-width: 0; font: var(--weight-display) 1.625rem/2rem var(--font-display); font-stretch: 108%; letter-spacing: -.035em;}

.nav-map small {color: var(--color-muted); font-size: .8125rem; line-height: 1rem;}

/* Stati. Corrente e anteprima: carta. Al passaggio: il campo azzurro. Nessun bordo aggiunto. */
.nav-map a:is([aria-current="page"], .is-context-current, .is-map-preview) {color: var(--color-text); background: var(--bg-page);}

.nav-map a:is([aria-current="page"], .is-context-current, .is-map-preview) :is(b, small) {color: var(--color-text);}

.nav-map a:is(:hover, :focus-visible) {color: var(--mtb-on-azzurro); background: var(--mtb-azzurro);}

.nav-map a:is(:hover, :focus-visible) :is(span, b, small) {color: var(--mtb-on-azzurro);}

.nav-panel__foot {display: flex; min-height: 38px; align-items: center; justify-content: space-between; gap: var(--space-4); padding: .55rem var(--nav-gutter); color: var(--color-muted); border-top: 1px solid var(--nav-rule); font: var(--weight-medium) .72rem/1.4 var(--font-body); letter-spacing: 0; text-transform: none;}

/* Nord e scala grafica nel margine della carta, come nel cartiglio di un foglio topografico.
   La scala alterna ardesia e carta; la sua lunghezza segue la scala della M. */
.nav-legend {display: inline-flex; flex: 0 0 auto; align-items: center; gap: .375rem; color: var(--color-text); white-space: nowrap;}

.nav-panel__foot > span {min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.nav-legend:has(.nav-legend__label:empty) {visibility: hidden;}

.nav-legend__north {width: 9px; height: 14px; fill: currentColor;}

.nav-legend b {font: var(--weight-display) .6875rem/1 var(--font-data); font-variant-numeric: tabular-nums; letter-spacing: .02em;}

.nav-legend__n {margin-right: .625rem;}

.nav-legend__bar {display: block; width: var(--scale-px, 0px); height: 6px; box-sizing: border-box; background: linear-gradient(90deg, currentColor 50%, var(--mtb-paper) 50%) left / 50% 100% repeat-x; border: 1px solid currentColor;}

.nav-panel :is(a, button):focus-visible {outline: 3px solid var(--color-text); outline-offset: 3px;}

.nav-map a:focus-visible {outline-offset: -3px;}

/* ---------- 8. Eccezioni di pagina ---------- */
/* Pagine dati con header solido: sopra la foto resta trasparente finche non si scorre. */
.result-detail-page .site-header--solid:not(.is-scrolled) {color: white; background: transparent; backdrop-filter: none; box-shadow: inset 0 -1px 0 rgb(var(--color-white-rgb) / .16);}

.result-detail-page .site-header--solid:not(.is-scrolled)::before {opacity: 0;}

.result-detail-page .site-header--solid:not(.is-scrolled) .brand-logo-white {filter: brightness(0) invert(1);}

/* ---------- 8b. Ciclocomputer (pagine senza sezioni) ----------
   Un solo strato di navigazione alla volta: quando la barra si nasconde compare un piccolo
   display di ardesia con la sezione e una riga di lettura. E un pulsante: riapre la barra.
   Stessa geometria e posizione dell'unita PageX: in basso, dal lato del pollice (destro di
   default), su ogni dispositivo. Le pagine con sezioni usano l'unita (mtb-pagex.css). */
.mtb-computer {position: fixed; z-index: 1060; right: max(.625rem, env(safe-area-inset-right)); bottom: max(.75rem, env(safe-area-inset-bottom)); display: inline-flex; width: min(20rem, calc(100vw - 1.25rem)); min-height: 44px; align-items: center; justify-content: center; padding: .4rem .75rem; color: var(--mtb-paper); background: var(--mtb-night); border: 0; border-radius: 12px; box-shadow: 0 6px 18px rgb(var(--bg-dark-rgb) / .28); font: var(--weight-medium) .8125rem/1.1 var(--font-body); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .22s ease, transform .24s var(--ease-shift), visibility .22s;}

html[data-hand="left"] .mtb-computer {left: max(.625rem, env(safe-area-inset-left)); right: auto;}

html.mtb-computer-on .mtb-computer {opacity: 1; visibility: visible; transform: none;}

.mtb-computer__logo {display: none;}

.mtb-computer__screen {display: grid; min-width: 0; justify-items: center; gap: 5px;}

.mtb-computer__section {max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

/* Traccia: tacche tutte uguali, linea appena percettibile; la corrente in ciano luce. */
.mtb-computer__route {position: relative; display: flex; width: 7.5rem; height: 5px; justify-content: space-between;}

.mtb-computer__route::before {content: ""; position: absolute; left: 2px; right: 2px; top: 2px; height: 1px; background: rgb(var(--color-white-rgb) / .14);}

.mtb-computer__route i {position: relative; width: 5px; height: 5px; border-radius: 50%; background: rgb(var(--color-white-rgb) / .28);}

.mtb-computer__route i.is-passed {background: rgb(var(--color-white-rgb) / .6);}

.mtb-computer__route i.is-current {background: var(--mtb-sky);}

/* Senza sezioni: una riga di lettura sottile al posto delle tacche. */
.mtb-computer__route.is-line {height: 2px; background: rgb(var(--color-white-rgb) / .14);}

.mtb-computer__route.is-line::before {display: none;}

.mtb-computer__route.is-line span {display: block; width: var(--read, 0%); height: 2px; background: var(--mtb-sky);}

/* La traccia come piccolo percorso (window.MTBMiniRoute, stili in mtb-pagex.css):
   bianca sull'ardesia, il punto ciano avanza leggendo. Senza sezioni niente tappe intermedie. */
.mtb-computer__route.is-map {--mini-rgb: var(--color-white-rgb); --mini-rider: var(--mtb-sky); display: block; height: 14px;}

.mtb-computer__route.is-map::before {display: none;}

.mtb-computer__route.is-reading .pagex-route__stops {display: none;}

/* Con le sezioni il computer e l'unita PageX: niente doppioni. */
body:has(#mtb-pagex-nav) .mtb-computer {display: none;}

.mtb-computer:hover {box-shadow: 0 0 0 2px var(--mtb-azzurro), 0 6px 18px rgb(var(--bg-dark-rgb) / .28);}

.mtb-computer:focus-visible {outline: 2px solid var(--mtb-sky); outline-offset: 3px;}

@media (max-width: 991.98px) {
  /* Su smartphone l'avanzamento sta nello schermo dell'unita: con la barra nascosta
     la barra rossa in cima si ritira. */
  body:has(.site-header.is-nav-hidden) .reading-progress {display: none;}
}

@media (prefers-reduced-motion: reduce) {
  .mtb-computer {transition: none;}
}

/* Il mese in testa sale in cima quando l'header si nasconde. */
body:is(.results-page, .events-page, .stories-page, .palmares-page):not(.nav-open):has(.site-header.is-nav-hidden:not(:focus-within)) .list-month__head {top: 0;}

/* Anche il tabellone delle partenze del singolo risultato (Risultato.asp). */
body.result-race-page:not(.nav-open):has(.site-header.is-nav-hidden:not(:focus-within)) .race-side {top: 1rem;}

@media (max-width: 991.98px) {
  body.result-race-page:not(.nav-open):has(.site-header.is-nav-hidden:not(:focus-within)) .race-board {top: 0;}
}

/* ---------- 9. Responsive ---------- */

/* Tre blocchi: logo a sinistra, voci al centro esatto dello schermo, azioni a destra
   (colonne laterali uguali, quindi la larghezza del logo non sposta le voci). */
@media (min-width: 768px) {
  .site-header .navbar {display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;}

  .site-header .navbar > .brand {justify-self: start;}

  .site-header .primary-header-nav {margin-left: 0;}

  .site-header .header-actions {justify-self: end; margin-left: 0;}
}

/* Le quattro voci restano anche su tablet: sotto i 768 px il contesto passa alla utility bar. */
@media (max-width: 767.98px) {
  .primary-header-nav {display: none;}
}

@media (max-width: 991.98px) {
  .utility-message {display: none;}
}

@media (max-width: 767.98px) {
  .brand-logo {width: 178px;}

  .utility-bar:has(.utility-section) .online-now {display: none;}

  .utility-section {display: inline-flex;}

  .explore-button > span {display: none;}

  .explore-button {width: 44px; justify-content: center; padding-inline: 0;}

  .explore-button--m {width: 58px; min-width: 58px; padding-inline: .35rem;}

  .explore-label {display: none;}

  /* Larga quanto il disegno (48 px): la M non sporge oltre il margine destro. */
  .nav-mini {width: 48px; height: 28px; flex-basis: 48px;}
}

@media (max-width: 575.98px) {
  .utility-bar > div {justify-content: center;}

  .m-mini {width: 44px; height: 28px;}

  .site-header .brand-logo {width: clamp(142px,43vw,180px);}
  .site-header .header-actions {gap: .35rem;}

  .site-header .icon-button {width: 44px; min-width: 44px; height: 44px; min-height: 44px;}

  .site-header .m-mini {width: 34px; height: 34px;}
}

/* Pannello M su notebook stretti: sette colonne piu compatte. */
@media (min-width: 768px) and (max-width: 1099.98px) {
  /* Colonna di testo piu stretta: il paragrafo va sempre su tre righe. */
  .nav-panel__intro {--p-lines: 3;}

  .nav-panel__intro > p:last-child {max-width: 30ch;}

  .nav-map a {padding-inline: .625rem;}

  .nav-map span {font-size: 1.125rem; line-height: 1.5rem;}

  .nav-map small {font-size: .75rem;}
}

/* Pannello M su notebook e schermi bassi: tutto resta in una schermata. */
@media (max-height: 820px) and (min-width: 768px) {
  .nav-panel__head {min-height: 64px; padding-block: .5rem;}

  .nav-panel__brand img {width: 160px;}

  .nav-close {min-height: 48px;}

  .nav-panel__grid {padding-block: 1rem .75rem;}

  .nav-panel__intro {--h2-lh: clamp(2.5rem,4.4vw,4rem); --kick-gap: .5rem; --h2-gap: 1rem;}

  .nav-map {--route-band: 128px;}

  .nav-map a {gap: .25rem; padding-bottom: .75rem;}

  .nav-panel__foot {min-height: 30px; padding-block: .35rem;}
}

@media (max-height: 680px) and (min-width: 768px) {
  .nav-panel__head {min-height: 54px; padding-block: .35rem;}

  .nav-panel__brand img {width: 145px;}

  .nav-close {min-height: 44px; font-size: 1.0625rem;}

  .nav-close i {font-size: 2rem;}

  .nav-panel__intro {--h2-lh: 2.75rem; --p-lines: 0; --h2-gap: 0rem;}

  .nav-panel__intro > p:last-child {display: none;}

  .nav-map {--route-band: 96px;}

  .nav-route__line {stroke-width: 12;}

  .nav-route__checkpoints circle {r: 2.8px;}

  .nav-route__rider {r: 4px;}

  .nav-route__trail circle {r: 2.2px;}

  .nav-map small {display: none;}

  .nav-panel__foot {min-height: 25px; padding-block: .25rem;}
}

/* Smartphone: il percorso scende lungo lo schermo, le voci in righe uguali che si
   dividono l'altezza disponibile, in un unico flusso. */
@media (max-width: 767.98px) {
  .nav-panel__head {min-height: 64px; padding: .5rem 1rem;}

  .nav-panel__brand img {width: 138px;}

  .nav-close {min-height: 48px; gap: .625rem; font-size: 1.0625rem;}

  .nav-close i {font-size: 2rem;}

  .nav-panel__grid {grid-template-rows: auto minmax(0,1fr); align-content: stretch; gap: 1rem; padding: 1rem 1rem .5rem;}

  .nav-panel__intro {grid-template-columns: minmax(96px,30vw) minmax(0,1fr); column-gap: 1rem; align-items: center; --h2-lh: 1.5rem; --kick-gap: .375rem;}

  .nav-mapmark {grid-column: 1; grid-row: 1 / 3; width: 100%; height: auto;}

  .nav-panel__intro .text-kicker {grid-column: 2; grid-row: 1; font-size: .8125rem; line-height: 1rem;}

  .nav-panel__intro h2 {grid-column: 2; grid-row: 2; max-width: none;}

  .nav-panel__intro > p:last-child {display: none;}

  .nav-map {grid-template-columns: minmax(0,1fr); grid-template-rows: repeat(7, minmax(0,1fr)); align-self: stretch; padding: 0 0 0 var(--route-band);
    --route-axis: vertical; --route-band: 140px; --route-sway: 48px;}

  .nav-map a {justify-content: center; gap: .125rem; padding: 0 .75rem;}

  .nav-route__line {stroke-width: 11;}

  .nav-route__checkpoints circle {r: 2.5px;}

  .nav-route__rider {r: 3.8px;}

  .nav-route__trail circle {r: 2px;}

  /* La fascia del percorso lascia posto alla lettura: a destra del punto, a meta altezza. */
  .nav-map .nav-route__coords,
  .nav-map .nav-route__coords.is-below {top: var(--coords-y, 0px); grid-template-rows: none; grid-auto-flow: row; font-size: .6875rem; transform: translateY(-50%);}

  /* A sinistra la fascia del percorso non lascia posto ai valori delle latitudini. */
  .nav-terrain__label--lat {display: none;}

  .nav-map b {font-size: .8125rem; line-height: 1rem;}

  .nav-map span {font-size: 1.3125rem; line-height: 1.5rem;}

  .nav-map small {font-size: .75rem; line-height: 1rem;}

  .nav-panel__foot {min-height: 28px; gap: var(--space-1); padding: .32rem 1rem;}

  .nav-panel__foot span:last-child {display: none;}
}

@media (max-width: 767.98px) and (max-height: 650px) {
  .nav-panel__head {min-height: 52px; padding-block: .25rem;}

  .nav-panel__intro .text-kicker {display: none;}

  .nav-panel__intro h2 {grid-row: 1 / 3;}

  .nav-map small {display: none;}

  .nav-panel__foot {min-height: 22px; padding-block: .18rem;}
}

@media (prefers-reduced-motion: reduce) {
  .nav-unfold {display: none;}

  .site-header,
  .site-header.is-nav-hidden,
  .primary-header-nav a,
  .nav-course__trail,
  .nav-route__trail,
  .nav-terrain,
  .nav-map a,
  .nav-context [data-mtb-nav-context-label] {transition: none;}
}