/* MTBonline PageX — l'unita sul manubrio: un ciclocomputer in ardesia.
   [ schermo: sezione + traccia ][ ▲ ][ ▼ ]
   Un solo strato di navigazione alla volta:
   - barra visibile: la posizione sta nella barra, accanto al logo (desktop);
   - barra nascosta: compare l'unita, in basso dal lato del pollice (destro di default),
     con i due tasti insieme nell'angolo: Giu, il piu usato, all'estremita. */
:root {--pagex-offset: 0px;}

.pagex {position: relative; min-height: auto; scroll-margin-top: 0;}

.pagex.pagex--fixed {height: 100svh; min-height: 0; overflow: hidden;}

.pagex.is-pagex-active {isolation: isolate;}

.pagex:focus {outline: none;}

/* ---------------------------------------------------------
   L'unita
   --------------------------------------------------------- */
.pagex-nav {--pagex-bg: var(--mtb-night); --pagex-fg: var(--mtb-paper); --pagex-fg-rgb: var(--color-white-rgb);
  position: fixed; z-index: 1060; right: max(.625rem, env(safe-area-inset-right)); bottom: max(.75rem, env(safe-area-inset-bottom)); width: min(20rem, calc(100vw - 1.25rem)); color: var(--pagex-fg); font-family: var(--font-body);}

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

body[data-pagex-nav="off"] .pagex-nav {display: none !important;}

.pagex-nav__shifter {display: flex; align-items: stretch; min-height: 44px; overflow: hidden; background: var(--pagex-bg); border-radius: 12px; box-shadow: 0 6px 18px rgb(var(--bg-dark-rgb) / .28); transition: opacity .22s ease, transform .24s var(--ease-shift), visibility .22s;}

/* Compare quando la barra si nasconde; scompare quando la barra torna, o sul footer. */
body:not(:has(.site-header.is-nav-hidden)) .pagex-nav__shifter,
.pagex-nav.is-at-footer .pagex-nav__shifter {opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(10px);}

body:not(:has(.site-header.is-nav-hidden)) .pagex-nav:not(.is-open-header) .pagex-nav__track,
.pagex-nav.is-at-footer .pagex-nav__track {display: none;}

/* Tasti Su e Giu. */
.pagex-nav__button {position: relative; display: grid; flex: 0 0 44px; place-items: center; margin: 0; padding: 0; color: var(--pagex-fg); background: transparent; border: 0; border-radius: 0; box-shadow: inset 1px 0 0 rgb(var(--pagex-fg-rgb) / .12); cursor: pointer; transition: background-color .16s ease, opacity .16s ease;}

.pagex-nav__button:hover:not(:disabled),
.pagex-nav__button:focus-visible:not(:disabled) {background: rgb(var(--pagex-fg-rgb) / .08);}

.pagex-nav__button:disabled {cursor: default;}

.pagex-nav__button:disabled .pagex-nav__triangle {opacity: .28;}

.pagex-nav__triangle {display: block; width: 0; height: 0;}

.pagex-nav__triangle--up {border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 9px solid currentColor;}

.pagex-nav__triangle--down {border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 9px solid currentColor;}

/* All'arrivo: il tasto Giu si spegne e mostra la bandiera a scacchi. */
.pagex-nav__flag {display: none; width: 12px; height: 12px; background: conic-gradient(var(--mtb-paper) 0 25%, var(--mtb-night) 0 50%, var(--mtb-paper) 0 75%, var(--mtb-night) 0); background-size: 6px 6px; box-shadow: 0 0 0 1px rgb(var(--pagex-fg-rgb) / .6);}

.pagex-nav__button.is-finish .pagex-nav__triangle {display: none;}

.pagex-nav__button.is-finish .pagex-nav__flag {display: block;}

.pagex-nav__button.is-shifted-up .pagex-nav__triangle {animation: pagex-shift-up .2s var(--ease-shift);}

.pagex-nav__button.is-shifted-down .pagex-nav__triangle {animation: pagex-shift-down .2s var(--ease-shift);}

@keyframes pagex-shift-up { 50% {translate: 0 -3px;} }

@keyframes pagex-shift-down { 50% {translate: 0 3px;} }

/* Schermo: sezione al centro, carattere appena sufficiente, traccia sotto. */
.pagex-nav__status {display: grid; flex: 1 1 auto; min-width: 0; align-content: center; justify-items: center; gap: 5px; padding: 0 .75rem; color: var(--pagex-fg); background: transparent; border: 0; font: var(--weight-medium) .8125rem/1.1 var(--font-body); text-align: center; cursor: pointer;}

.pagex-nav.is-open:not(.is-open-header) .pagex-nav__status {background: rgb(var(--pagex-fg-rgb) / .08);}

.pagex-nav__current,
.pagex-header-status__current {max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

.is-from-down {animation: pagex-label-from-down var(--dur-shift) var(--ease-shift);}

.is-from-up {animation: pagex-label-from-up var(--dur-shift) var(--ease-shift);}

@keyframes pagex-label-from-down { from {opacity: 0; transform: translateY(8px);} }

@keyframes pagex-label-from-up { from {opacity: 0; transform: translateY(-8px);} }

/* Il piccolo percorso della pagina: le sezioni sono tappe su una linea spezzata, il punto
   ciano avanza con lo scroll e la strada fatta si accende (mtb-pagex.js, MiniRoute).
   Stesso linguaggio del menu M: traccia, tappe, un punto che pedala. */
.pagex-nav__mini {--mini-rgb: var(--pagex-fg-rgb); --mini-rider: var(--mtb-sky); position: relative; display: block; width: min(100%, 8.5rem);}

.pagex-route {display: block; width: 100%; height: 14px; overflow: visible;}

.pagex-route__line {fill: none; stroke: rgb(var(--mini-rgb) / .3); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;}

.pagex-route__ridden {fill: none; stroke: var(--mini-rider); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;}

.pagex-route__stops circle {r: 1.7px; fill: rgb(var(--mini-rgb) / .45); transition: fill var(--dur-shift) ease;}

.pagex-route__stops circle.is-passed {fill: rgb(var(--mini-rgb) / .8);}

.pagex-route__rider {r: 2.8px; fill: var(--mini-rider);}

.pagex-nav__button:focus-visible,
.pagex-nav__status:focus-visible {outline: 2px solid var(--mtb-paper); outline-offset: -4px;}

/* ---------------------------------------------------------
   Menu: torna all'inizio, sezioni, navigazione del sito
   --------------------------------------------------------- */
.pagex-nav__track {position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); display: none; margin: 0; padding: .35rem 0; list-style: none; background: var(--pagex-bg); border-radius: 12px; box-shadow: 0 6px 18px rgb(var(--bg-dark-rgb) / .28);}

.pagex-nav.is-open .pagex-nav__track {display: block;}

.pagex-nav__track::before {content: ""; position: absolute; left: 22px; top: calc(.35rem + 44px + .35rem + 22px); bottom: calc(.35rem + 44px + .35rem + 22px); width: 1px; background: rgb(var(--pagex-fg-rgb) / .14);}

.pagex-nav__stop {position: relative; display: flex; height: 44px; align-items: center; padding-left: 44px; color: inherit; text-decoration: none;}

.pagex-nav__stop::before {content: ""; position: absolute; left: 22px; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: rgb(var(--pagex-fg-rgb) / .28); transform: translate(-50%, -50%);}

.pagex-nav__stop.is-passed::before {background: rgb(var(--pagex-fg-rgb) / .6);}

.pagex-nav__stop[aria-current]::before {background: var(--mtb-sky);}

/* Estremi: partenza (una barra) e arrivo (una bandiera a scacchi). */
.pagex-nav__item.is-first .pagex-nav__stop::before {width: 12px; height: 2px; border-radius: 0; background: rgb(var(--pagex-fg-rgb) / .75);}

.pagex-nav__item.is-last .pagex-nav__stop::before {width: 8px; height: 8px; border-radius: 0; background: conic-gradient(var(--mtb-paper) 0 25%, var(--mtb-night) 0 50%, var(--mtb-paper) 0 75%, var(--mtb-night) 0); box-shadow: 0 0 0 1px rgb(var(--pagex-fg-rgb) / .75);}

.pagex-nav__item.is-first .pagex-nav__stop[aria-current]::before {background: var(--mtb-sky);}

.pagex-nav__label {padding: 0 .25rem; color: rgb(var(--pagex-fg-rgb) / .78); font: var(--weight-medium) var(--step-sm)/1.2 var(--font-body);}

/* Roadbook: la distanza della tappa dall'inizio della pagina, allineata a destra. */
.pagex-nav__km {margin-left: auto; padding: 0 1rem 0 .75rem; color: rgb(var(--pagex-fg-rgb) / .5); font: var(--weight-bold) .6875rem/1 var(--font-data); font-variant-numeric: tabular-nums; letter-spacing: .02em; white-space: nowrap;}

.pagex-nav__stop[aria-current] .pagex-nav__km {color: var(--mtb-sky);}

.pagex-nav__stop[aria-current] .pagex-nav__label {color: var(--pagex-fg); font-weight: var(--weight-bold);}

.pagex-nav__stop:is(:hover, :focus-visible) .pagex-nav__label {color: var(--pagex-fg);}

.pagex-nav__stop:is(:hover, :focus-visible) {background: rgb(var(--pagex-fg-rgb) / .06);}

.pagex-nav__stop:focus-visible {outline: 2px solid var(--mtb-paper); outline-offset: -3px;}

.pagex-nav__top button,
.pagex-nav__menu button {width: 100%; min-height: 44px; padding: 0 .25rem 0 44px; color: var(--mtb-sky); background: transparent; border: 0; font: var(--weight-bold) var(--step-sm)/1 var(--font-body); text-align: left; cursor: pointer;}

.pagex-nav__top {margin-bottom: .35rem; border-bottom: 1px solid rgb(var(--pagex-fg-rgb) / .12);}

.pagex-nav__menu {margin-top: .35rem; border-top: 1px solid rgb(var(--pagex-fg-rgb) / .12);}

.pagex-nav__top button:focus-visible,
.pagex-nav__menu button:focus-visible,
.pagex-nav__hand button:focus-visible {outline: 2px solid var(--mtb-paper); outline-offset: -4px;}

/* Mano d'uso: solo su touch. Un interruttore piccolo, nella grammatica delle tacche. */
.pagex-nav__hand button {display: flex; width: 100%; min-height: 44px; align-items: center; gap: .75rem; padding: 0 .25rem 0 1rem; color: rgb(var(--pagex-fg-rgb) / .78); background: transparent; border: 0; font: var(--weight-medium) var(--step-sm)/1 var(--font-body); text-align: left; cursor: pointer;}

.pagex-nav__switch {position: relative; flex: none; width: 26px; height: 14px; border-radius: 999px; background: rgb(var(--pagex-fg-rgb) / .22); transition: background-color .16s ease;}

.pagex-nav__switch::after {content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--pagex-fg); transition: transform .16s var(--ease-shift);}

.pagex-nav__hand button[aria-pressed="true"] {color: var(--pagex-fg);}

.pagex-nav__hand button[aria-pressed="true"] .pagex-nav__switch {background: var(--mtb-sky);}

.pagex-nav__hand button[aria-pressed="true"] .pagex-nav__switch::after {transform: translateX(12px);}

@media (pointer: fine) {
  .pagex-nav__hand {display: none;}
}

/* Menu aperto dalla barra (desktop): scende sotto la posizione, accanto al logo. */
.pagex-nav.is-open-header .pagex-nav__track {position: fixed; top: calc(var(--site-header-height) + 6px); bottom: auto; left: var(--pagex-menu-left, 1rem); right: auto; width: 18rem;}

/* ---------------------------------------------------------
   Posizione nella barra (desktop, barra visibile)
   --------------------------------------------------------- */
.pagex-header-status {display: none;}

@media (min-width: 992px) {
  .pagex:not(.pagex--fixed) {min-height: auto;}

  .pagex-header-status {display: grid; min-width: 0; max-width: 16rem; align-content: center; justify-items: start; gap: 6px; margin-left: clamp(1rem, 2vw, 2rem); padding: .35rem 0 .35rem clamp(1rem, 2vw, 2rem); color: inherit; background: transparent; border: 0; border-left: 1px solid var(--header-line); font: var(--weight-bold) .85rem/1.1 var(--font-body); text-align: left; cursor: pointer;}

  /* Le tacche seguono il colore della barra: bianche sopra le foto, ardesia sulla carta. */
  .pagex-header-status .pagex-nav__mini {--mini-rgb: var(--color-white-rgb); width: 7rem;}

  .site-header:is(.is-scrolled, .site-header--solid, .is-on-light) .pagex-header-status .pagex-nav__mini {--mini-rgb: var(--bg-dark-rgb);}

  /* Sulla carta il ciano luce si perde: il punto e la strada fatta passano all'azzurro profondo. */
  .site-header:is(.is-scrolled, .site-header--solid, .is-on-light) .pagex-header-status .pagex-nav__mini {--mini-rider: var(--mtb-trail);}

  .pagex-header-status:hover .pagex-header-status__current,
  .pagex-header-status[aria-expanded="true"] .pagex-header-status__current {opacity: .78;}

  .pagex-header-status:focus-visible {outline: 2px solid currentColor; outline-offset: 3px;}
}

/* ---------------------------------------------------------
   Smartphone e tablet
   --------------------------------------------------------- */
/* Nessuna schermata intera: anche in Home le sezioni seguono il contenuto (2026-10-07). */

/* Mancini: unita speculare, tasti nell'angolo in basso a sinistra (html[data-hand="left"]). */
html[data-hand="left"] .pagex-nav {left: max(.625rem, env(safe-area-inset-left)); right: auto;}

html[data-hand="left"] .pagex-nav__status {order: 3;}

html[data-hand="left"] .pagex-nav__button--prev {order: 2; box-shadow: inset -1px 0 0 rgb(var(--pagex-fg-rgb) / .12);}

html[data-hand="left"] .pagex-nav__button--next {order: 1; box-shadow: none;}

@media (prefers-reduced-motion: reduce) {
  html {scroll-behavior: auto;}

  .pagex-nav__shifter,
  .pagex-route__stops circle,
  .pagex-nav__button {transition: none;}

  .pagex-nav__button .pagex-nav__triangle,
  .is-from-down,
  .is-from-up {animation: none !important;}
}