/* ==========================================================
   Stili di base: colori, caratteri, struttura della pagina.
   I colori sono variabili, così il tema scuro cambia solo quelle.
   ========================================================== */

:root {
  color-scheme: light dark;

  /* Stile "Strumento", versione chiara (quella scura è poco sotto) */
  --fondo: #eef1f5;
  --sfondo: var(--fondo);
  --superficie: #ffffff;
  --superficie-tenue: #f0f3f7;
  --testo: #0f1720;
  --testo-tenue: #556375;
  --bordo: #d3dae4;
  --accento: #0a7d74;
  --accento-testo: #ffffff;
  --errore: #b3261e;
  --errore-sfondo: #fdecea;
  --ombra: none;

  --grafico-temperatura: #c2410c;
  --grafico-pioggia: #1c6fd1;
  --grafico-vento: #0a7d74;

  --rischio-basso: #8a6a00;
  --rischio-moderato: #c2410c;
  --rischio-alto: #c92a2a;

  /* Fasce dell'indice europeo di qualità dell'aria (colori ufficiali) */
  --aria-1: #50f0e6;
  --aria-2: #50ccaa;
  --aria-3: #f0e641;
  --aria-4: #ff5050;
  --aria-5: #960032;
  --aria-6: #7d2181;

  /* Fasce dell'indice UV */
  --uv-1: #4caf7a;
  --uv-2: #f0c93d;
  --uv-3: #f08c2e;
  --uv-4: #e0483e;
  --uv-5: #8e5bd0;

  --raggio: 12px;
  --spazio: 14px;
  --altezza-barra-schede: 62px;
  --larghezza-massima: 720px;
}

/* Tema scuro. L'attributo data-tema="scuro" viene messo su <html> da js/tema.js,
   in base alla scelta nelle impostazioni (Automatico, Scuro o Chiaro). */
:root[data-tema="scuro"] {
  color-scheme: dark;
  --fondo: #0b0f14;
  --superficie: #141b24;
  --superficie-tenue: #1c2531;
  --testo: #e8eef5;
  --testo-tenue: #93a1b3;
  --bordo: #273342;
  --accento: #37d6c8;
  --accento-testo: #06201e;
  --errore: #ff9d94;
  --errore-sfondo: #3a1f1d;
  --grafico-temperatura: #ffa25c;
  --grafico-pioggia: #5fb4ff;
  --grafico-vento: #37d6c8;
  --rischio-basso: #f2c94c;
  --rischio-moderato: #ff9f5a;
  --rischio-alto: #ff8787;
}
:root[data-tema="chiaro"] { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--testo);
  background: var(--sfondo);   /* lo sfondo vero (il cielo) è definito in temi.css */
}

h1, h2, h3, p { margin: 0; }

a { color: var(--accento); }

button, input { font: inherit; color: inherit; }

/* Contorno ben visibile per chi naviga da tastiera */
:focus-visible {
  outline: 3px solid var(--accento);
  outline-offset: 2px;
}

[hidden] { display: none !important; }

/* Niente scorrimento orizzontale della pagina, qualunque cosa succeda dentro.
   ("clip" non crea un'area di scorrimento, quindi la barra in alto resta agganciata.) */
html, body { overflow-x: clip; }

/* Le zone che scorrono in orizzontale fanno da riferimento per ciò che contengono.
   Senza questo, i testi "solo-lettori" (posizionati in modo assoluto) uscirebbero dalla
   zona di scorrimento e allargherebbero l'intera pagina: sul telefono tutto diventava
   minuscolo e la barra in basso finiva fuori vista. */
.striscia-oraria, .preferiti ul, .indice, .ricerca__lista { position: relative; }
.ora, .giorno__riga, .riquadro, .prossima-ora__passo { position: relative; }

/* Testo visibile solo ai lettori di schermo */
.solo-lettori {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.salta-contenuto {
  position: absolute;
  left: 8px; top: -60px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--superficie);
  color: var(--testo);
}
.salta-contenuto:focus { top: 8px; }

/* ---------- Struttura ---------- */

.barra-alta {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  /* La barra è larga quanto lo schermo; il contenuto resta allineato alla colonna centrale */
  padding: calc(10px + env(safe-area-inset-top))
           max(var(--spazio), calc((100% - var(--larghezza-massima)) / 2 + var(--spazio)))
           14px;
}

main {
  max-width: var(--larghezza-massima);
  margin: 0 auto;
  padding: 6px var(--spazio)
           calc(var(--altezza-barra-schede) + env(safe-area-inset-bottom) + 24px);
}
main:focus { outline: none; }

/* minmax(0, 1fr): il contenuto largo (es. striscia oraria) scorre invece di allargare la pagina */
.scheda { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spazio); }

.scheda__titolo { font-size: 1.6rem; letter-spacing: -0.01em; }

/* Le sezioni raggiunte dall'indice non finiscono sotto la barra in alto */
#astro-contenuto, #natura-contenuto, #storico-contenuto, #impostazioni, #installa, #fonti { scroll-margin-top: 84px; }

.segnaposto { color: var(--testo-tenue); }

/* ---------- Barra delle schede in basso ---------- */

.barra-schede {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--superficie);
  border-top: 1px solid var(--bordo);
}

.barra-schede a {
  flex: 1 1 0;
  max-width: 144px;
  min-height: var(--altezza-barra-schede);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--testo-tenue);
}

.barra-schede svg {
  width: 24px; height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.barra-schede a[aria-current="page"] { color: var(--accento); }

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