/* ==========================================================================
   La cornice di home.eurekabike: le regole del menu che il sito condivide con
   le pagine delle piattaforme (KOSMOS, AGORA, HERMES), piu' la barra di
   piattaforma. Il markup sta in _inc/chrome.php. Caricato dopo site.css nel
   sito e dopo il foglio di ogni piattaforma, che ha gia' le regole di base del
   kit (nav, langsel, navmenu, footer). Identico fra site-it/ e site-en/.
   ========================================================================== */

/* --- RUOLI DI COLORE E TEMA SCURO (26/10/2026) ------------------------------
   Le stesse regole di eurekago.it: i componenti usano questi ruoli, mai i
   colori del marchio direttamente, e il tema scuro li ridefinisce. --ink,
   --white e --cream restano i valori del marchio e non cambiano mai (il testo
   su azzurro resta bianco). Stanno qui perche' questo foglio lo caricano tutte
   le pagine: sito, KOSMOS, AGORA e HERMES. Scuro col buio del dispositivo (tema
   automatico) o scelto dall'interruttore nel menu; la scelta e' applicata nel
   <head> prima del primo disegno (_inc/chrome.php, chrome_theme_head()). */
:root {
  --bg: #FFFFFF;            /* fondo delle sezioni */
  --surface: #F5F3EC;       /* superficie: crema in chiaro, mai crema in scuro */
  --raise: #FFFFFF;         /* schede, menu, campi */
  --text: #0A0A0A;
  --text-60: rgba(10, 10, 10, .6);
  --line: rgba(10, 10, 10, .08);
  --line-strong: rgba(10, 10, 10, .2);
  --deep: #0A0A0A;          /* barra in alto, sezioni scure, footer */
  --nav-bg: rgba(255, 255, 255, .94);
  --mark-filter: none;      /* il lettering EUREKA e' nero: in scuro si inverte */
  --dot: rgba(10, 10, 10, .05);
  --field-line: #8A8780;    /* bordo dei campi: 3,6:1 sul bianco */
  --text-soft: #6B6860;     /* testo piccolo secondario: 5,6:1 sul bianco */
  --form-box: #EDEDEB;      /* fondo grigio del riquadro dei moduli: i campi bianchi ci si staccano sopra */
  --tag-live: #3F7519; --tag-pipe: #057688; --msg-ok: #3F7519; --msg-err: #C32F18;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A0A0A; --surface: #121211; --raise: #161615; --text: #F5F3EC;
    --text-60: rgba(245, 243, 236, .68); --line: rgba(245, 243, 236, .10); --line-strong: rgba(245, 243, 236, .26);
    --deep: #121211; --nav-bg: rgba(10, 10, 10, .86); --mark-filter: invert(1); --dot: rgba(245, 243, 236, .06);
    --fuchsia: #FF3D9A; --fog: #A3A098; --field-line: #7A776F; --text-soft: #B5B2AA; --form-box: #1F1F1E;
    --tag-live: #8CCB5E; --tag-pipe: #4CC8F5; --msg-ok: #8CCB5E; --msg-err: #FF7A66;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0A0A0A; --surface: #121211; --raise: #161615; --text: #F5F3EC;
  --text-60: rgba(245, 243, 236, .68); --line: rgba(245, 243, 236, .10); --line-strong: rgba(245, 243, 236, .26);
  --deep: #121211; --nav-bg: rgba(10, 10, 10, .86); --mark-filter: invert(1); --dot: rgba(245, 243, 236, .06);
  --fuchsia: #FF3D9A; --fog: #A3A098; --field-line: #7A776F; --text-soft: #B5B2AA; --form-box: #1F1F1E;
    --tag-live: #8CCB5E; --tag-pipe: #4CC8F5; --msg-ok: #8CCB5E; --msg-err: #FF7A66;
  color-scheme: dark;
}
/* Il lettering EUREKA "light" (nero, per il fondo chiaro) si inverte in scuro,
   ovunque compaia: menu, pagine, HERMES. Quello del footer e' gia' bianco. */
img[src*="wordmark_eureka_light"] { filter: var(--mark-filter); }

/* --- INTERRUTTORE DEL TEMA ----------------------------------------------
   Come su eurekago.it e in STOÀ: icona sola, area di tocco 34px, nome del tema
   nel tooltip. Chiaro (sole) -> Scuro (luna) -> Automatico (cerchio a meta'). */
.theme-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; flex-shrink: 0;
  border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--raise); color: var(--text); cursor: pointer;
  transition: border-color .15s; }
.theme-btn[hidden] { display: none; }
.theme-btn:hover { border-color: var(--line-strong); }
.theme-btn svg { display: none; grid-area: 1 / 1; }
.theme-btn[data-stato="light"] .ico-light, .theme-btn[data-stato="dark"] .ico-dark, .theme-btn[data-stato="auto"] .ico-auto { display: block; }

/* Menu del telefono: le voci in ink, solo la pagina attuale in azzurro (playbook
   cap. 12, Mobile Navigation). ".navmenu-list a" (0,1,1) perdeva contro
   "li a:not(.btn)" dei siti (0,1,2, azzurro) e tutte le voci erano azzurre. */
.navmenu-list li a:not(.btn) { color: var(--text); }
.navmenu-list li a.active:not(.btn) { color: var(--azure); }

/* --- LARGHEZZA DELLA PAGINA (25/10/2026) ------------------------------------
   Playbook cap. 12, Page Width: la pagina corre da bordo a bordo, niente
   colonna centrata ne' max-width sul guscio. Dal bordo stacca solo un margine
   fisso: 32px su contenuto e footer, 24px sulla barra in alto e sul menu, 16px
   sotto gli 860px. Sta qui perche' questo foglio lo caricano, dopo il proprio,
   il sito, KOSMOS, AGORA e HERMES: una sola regola per tutti. */
.container { width: 100%; max-width: none; margin: 0; padding: 0 32px; }
.nav .container { padding: 0 24px; }
.top-bar { padding: 0 24px; }
.top-bar-inner { max-width: none; }
@media (max-width: 860px) {
  .container, .nav .container { padding: 0 16px; }
  .top-bar { padding: 0 16px; }
}

/* --- MENU ---------------------------------------------------------------- */
/* The sector word carries the vertical's own primary — but ONLY where the
   vertical is the subject of the page, as it is on this site. Playbook ch. 04
   is explicit that an endorser "appears in Ink on light surfaces, White on
   dark — never in the vertical's primary color", so on a product site such as
   HERMES or AGORA this lockup stays monochrome and must not take this class. */
.eb-lockup.eb-subject .eb-bike { color: var(--azure); }

/* Six items since Data Policy joined the menu: a label never wraps onto two
   lines, and between the mobile breakpoint and a full desktop the gap gives
   way instead, so the bar still fits beside the logo and the actions. */
.nav-links a { white-space: nowrap; }
@media (max-width: 1120px) { .nav-links { gap: 20px; } }
/* Dropdown in the bar (Prodotti / Products, 24/10/2026, as on eurekago.it).
   The summary reads as one more link; the panel is the language switcher's,
   so the two look like one family. The ::before strip bridges the gap under
   the summary, otherwise the pointer would leave the <details> on its way
   down and hover would close it. */
.navdrop { position: relative; }
.navdrop > summary {
  list-style: none; cursor: pointer; user-select: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: var(--text); opacity: .7; transition: opacity .15s;
}
.navdrop > summary::-webkit-details-marker { display: none; }
.navdrop > summary:hover, .navdrop[open] > summary, .navdrop > summary.active { opacity: 1; color: var(--azure); }
.navdrop > summary .langsel-caret { border-top-color: currentColor; }
.navdrop[open] .langsel-caret { transform: rotate(180deg); }
.navdrop-menu {
  position: absolute; left: -10px; top: calc(100% + 12px); z-index: 120;
  min-width: 190px; margin: 0; padding: 6px; list-style: none;
  background: var(--raise); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: 0 12px 32px var(--line-strong);
}
.navdrop-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav-links .navdrop-menu a { display: block; padding: 9px 10px; border-radius: var(--r-sm); opacity: 1; }
.nav-links .navdrop-menu a:hover { background: var(--surface); color: var(--text); }
.nav-links .navdrop-menu a.active { color: var(--azure); }

/* A dropdown of the bar becomes a labelled group here: on a phone a menu
   inside a menu is one tap too many. */
.navmenu-group ul { list-style: none; margin: 0; padding: 0 0 4px; }
.navmenu-head {
  display: block; padding: 10px 12px 4px;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--fog);
}
.navmenu-group a { padding-left: 22px; }

/* --- BARRA DI PIATTAFORMA (25/10/2026) ------------------------------------
   Sotto il menu del sito, solo nelle pagine di una piattaforma: wordmark e
   claim su una riga, poi il sotto-menu delle sue pagine. Fondo crema, come le
   barre delle schede nei casi d'uso, cosi' si legge come un livello sotto il
   sito e non come un secondo menu concorrente.
   Link: sottolineati solo al passaggio, mai cambio di colore (18/10/2026);
   la pagina corrente in azzurro. */
.pbar { background: var(--surface); border-bottom: 1px solid var(--line); }
/* Agganciata sotto il menu del sito, sempre visibile mentre si scorre (Jacopo
   26/10/2026). --nav-h e --chrome-h (menu + barra) li misura lo script del
   footer; i valori di riserva sono le altezze di oggi, per il primo disegno. */
.pbar { position: sticky; top: var(--nav-h, 65px); z-index: 99; }
/* Un'ancora si ferma sotto il menu e, sulle piattaforme, sotto la barra. */
html { scroll-padding-top: var(--chrome-h, 65px); }
/* HERMES (pagine HTML a se'): l'indice delle FAQ stava agganciato a 64px, cioe'
   sotto il solo menu, e le ancore compensavano il menu a mano. Ora si
   aggancia sotto la barra, e le ancore aggiungono solo quello che c'e' oltre
   le due barre (l'indice, alto circa 106px; 16px di respiro sul flywheel). */
.faq-index { top: var(--chrome-h, 124px); }
.faq-cat { scroll-margin-top: 106px; }
.flywheel { scroll-margin-top: 16px; }
.pbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 10px 32px; min-height: 58px; padding: 10px 0; }
/* Freccia, wordmark e claim centrati in verticale fra loro e con il sotto-menu
   (26/10/2026): sulla baseline il wordmark, tutto maiuscolo, stava 4px sopra. */
.pbar-id { display: flex; align-items: center; gap: 14px; min-width: 0; margin: 0; }
.pbar-mark { flex-shrink: 0; font-size: 22px; font-weight: 900; letter-spacing: -.02em; line-height: 1; color: var(--text); white-space: nowrap; }
.pbar-mark .h-accent { color: var(--azure); }
/* Il wordmark sta in un <p>: senza .pbar davanti vince "p a:not(.btn)" dei siti
   (azzurro) e la parola diventa tutta azzurra. Prima lettera azzurra, resto
   ink, anche in hover; niente sottolineatura, e' un marchio (26/10/2026). */
.pbar .pbar-mark, .pbar .pbar-mark:hover { color: var(--text); text-decoration: none; }
.pbar .pbar-mark .h-accent { color: var(--azure); }
/* Freccia "tutte le piattaforme", a sinistra del wordmark (26/10/2026). */
.pbar .pbar-back { align-self: center; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-right: -4px; border: 1px solid var(--line); border-radius: 50%; background: var(--raise); color: var(--text); transition: border-color .15s, background-color .15s; }
.pbar .pbar-back:hover { border-color: var(--text); color: var(--text); text-decoration: none; }
.pbar .pbar-back:focus-visible { outline: 2px solid var(--azure); outline-offset: 2px; }
.pbar-claim { min-width: 0; font-size: 14px; color: var(--fog); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pbar-menu ul { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; }
.pbar .pbar-menu a { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.pbar .pbar-menu a:hover { color: var(--text); text-decoration: underline; }
.pbar .pbar-menu a.active { color: var(--azure); }
@media (max-width: 1120px) { .pbar-menu ul { gap: 18px; } }
/* Sotto la larghezza in cui il menu del sito diventa un pannello, la barra va
   su due righe: wordmark e claim sopra, il sotto-menu sotto, che scorre di lato
   invece di andare a capo. */
@media (max-width: 900px) {
  .pbar-inner { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 0 0; }
  .pbar-mark { font-size: 19px; }
  .pbar-claim { font-size: 13px; }
  /* Il sotto-menu arriva ai bordi dello schermo, quindi esce dal margine del
     .container (32px, 16px sotto gli 860px) e lo rimette come padding. */
  .pbar-menu { margin: 0 -32px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .pbar-menu::-webkit-scrollbar { display: none; }
  .pbar-menu ul { gap: 20px; padding: 6px 32px 12px; }
}
@media (max-width: 860px) {
  .pbar-menu { margin: 0 -16px; }
  .pbar-menu ul { padding: 6px 16px 12px; }
}