/* ===========================================================================
   LocaRide - identita' grafica (passo 1). Caricato per ULTIMO, insieme a js/signage.js.
   Segnaletica italiana dei passi: targa marrone, carattere stradale (Overpass, OFL),
   grigio asfalto e bianco; l'unico colore acceso e' la scala delle pendenze.
   Per tornare indietro basta togliere il <link> e lo <script> di signage.js.
   =========================================================================== */
@font-face { font-family: "Overpass"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("../fonts/overpass-latin-wght-normal.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: "Overpass"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("../fonts/overpass-latin-ext-wght-normal.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; }

:root {
  --bg: #F1F3F4; --bg2: #FFFFFF; --txt: #1D2125; --txt2: #59626C; --bdr: #DCE1E5;
  --ac: #1D4F91;              /* blu dei cartelli stradali */
  --plate: #5A3A22;           /* marrone dei cartelli turistici */
  --sg-sheet: 62vh;
}
.dark { --bg: #121518; --bg2: #1B1F23; --txt: #EEF1F3; --txt2: #9AA4AE; --bdr: #2E353C; --ac: #6E9FE0; }
body, button, input, select, textarea { font-family: "Overpass", system-ui, -apple-system, sans-serif; }
.sg-ic { display: inline-block; vertical-align: -3px; flex: none; }

/* ------------------------------ targa ------------------------------ */
.dp-hdr.sg-hdr { background: var(--bg2); color: var(--txt); padding: 14px 16px 6px; position: relative; }
.sg-plate {
  background: var(--plate); color: #fff; border: 2px solid #fff; outline: 2px solid var(--plate);
  border-radius: 6px; padding: 9px 14px 8px; margin: 2px 46px 0 2px;
}
.sg-plate-n { margin: 0; font-size: 1.35rem; font-weight: 800; line-height: 1.12; letter-spacing: -.2px; }
.sg-plate-s { font-size: .9rem; opacity: .92; margin-top: 2px; }
.sg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 2px 0; font-size: .82rem; color: var(--txt2); }
.sg-cat { color: #fff; font-weight: 800; padding: 1px 8px; border-radius: 6px; font-size: .78rem; }
.sg-st::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; background: #3E9E4B; }
.sg-st-seasonal::before { background: #D9A21B; } .sg-st-closed::before { background: #C93A2E; }
.sg-close { position: absolute; top: 14px; right: 12px; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--bdr);
  background: var(--bg2); color: var(--txt); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sg-close:hover { background: var(--bg); }

/* ------------------------------ numeri + versanti ------------------------------ */
#sg-key { margin: 2px 0 6px; }
.sg-seg { display: flex; gap: 3px; background: var(--bg); border-radius: 10px; padding: 3px; margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
.sg-seg button { flex: 1 0 auto; border: 0; background: transparent; color: var(--txt2); font: inherit; font-size: .84rem; padding: 7px 10px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.sg-seg button[aria-selected="true"] { background: var(--bg2); color: var(--txt); font-weight: 700; box-shadow: 0 0 0 1px var(--bdr); }
.sg-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.sg-nums b { display: block; font-size: 1.45rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sg-nums span { font-size: .72rem; color: var(--txt2); }

/* ------------------------------ sezioni ------------------------------ */
#dp .section-title { color: var(--txt); border-bottom: 1px solid var(--bdr); font-size: 1rem; font-weight: 800; margin: 22px 0 10px; padding-bottom: 6px;
  display: flex; align-items: center; gap: 8px; }
#dp .section-title .sg-ic { color: var(--txt2); }
.vtable th { font-weight: 700; }

/* ------------------------------ scheda dal basso (telefono) ------------------------------ */
.sg-grab { display: none; }
@media (max-width: 760px) {
  #dp { top: auto; height: var(--sg-sheet); max-height: 96vh; border-radius: 16px 16px 0 0; transform: translateY(105%);
    box-shadow: 0 -10px 30px rgba(15, 23, 42, .18); z-index: 1350; transition: transform .28s ease, height .22s ease; }
  #dp.open { transform: translateY(0); }
  #dp.sg-dragging { transition: none; }
  .sg-grab { display: flex; position: sticky; top: 0; z-index: 6; height: 22px; align-items: center; justify-content: center;
    background: var(--bg2); touch-action: none; cursor: grab; }
  .sg-grab::before { content: ""; width: 40px; height: 4px; border-radius: 2px; background: var(--bdr); }
  .dp-hdr.sg-hdr { padding-top: 4px; }
  .sg-close { top: 4px; }
  .sg-plate-n { font-size: 1.2rem; }
  .sg-nums b { font-size: 1.25rem; }
}
/* ------------------------------ testata pulita (telefono, passo 2) ------------------------------ */
@media (max-width: 640px) {
  body.sg-hdr-clean #hdr #uk-plus, body.sg-hdr-clean #hdr #uk-gear, body.sg-hdr-clean #hdr #acct,
  body.sg-hdr-clean #hdr #uk-center, body.sg-hdr-clean #hdr #uk-right { display: none !important; }
  body.sg-hdr-clean #uk-left { flex: 1 1 auto; min-width: 0; }
  body.sg-hdr-clean #search-wrap { flex: 1 1 auto; min-width: 0; }
  body.sg-hdr-clean #search { width: 100%; }
  #mapctl .btn .bi .sg-ic { vertical-align: middle; }
}
@media (prefers-reduced-motion: reduce) { #dp { transition: none; } }

/* link to the v2 beta (/v2/): next to the Bike Day button, in the v2 colours */
#v2-pill { position: fixed; bottom: 20px; left: 150px; z-index: 998; display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px; border-radius: 24px; background: #0B0F14; color: #C8F560; border: 1px solid #C8F560;
  font-size: .85rem; font-weight: 700; text-decoration: none; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
#v2-pill span { font-size: .7rem; font-weight: 600; color: #0B0F14; background: #C8F560; border-radius: 8px; padding: 1px 6px; }
#v2-pill:hover { background: #141A22; }
body.rb-open #v2-pill, body.fp-open #v2-pill { display: none; }
@media (max-width: 768px) {
  #v2-pill { bottom: max(16px, env(safe-area-inset-bottom)); left: auto; right: 12px; padding: 12px 14px; font-size: .84rem; }
}
@media (max-width: 640px) {   /* above the bottom tabs, level with Bike Day (uikit.js puts it at 74px) */
  #v2-pill { bottom: 74px; right: 8px; }
}