/* ==========================================================================
   Nostra Dalmine — foglio di stile condiviso
   Estratto dal CSS inline duplicato nelle pagine e modernizzato seguendo le
   modern-web-guidance (vedi CLAUDE.md / BACKLOG-modern-web.md).
   ========================================================================== */

/* Ordine esplicito dei cascade layer */
@layer reset, base, theme, components, utilities;

/* --------------------------------------------------------------------------
   Design token (Tier semantico, dalla palette esistente)
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light; /* dark mode = follow-up: i token la rendono già pronta */

  --color-ink: #34495e;
  --color-accent: #95c3cf;
  --color-azzurrino: #e0f1f7;
  --color-muted: #6c757d;
  --color-footer-bg: #34495e;
  --color-footer-ink: #95c3cf;
  --color-card-border: rgba(0, 0, 0, 0.125);

  /* Verde scuro di WhatsApp, per il bottone di condivisione. Non e' il verde
     acceso del marchio (#25d366): quello e' un colore *chiaro*, e col bianco
     sopra sta a 1,98 di contrasto. Questo ci sta a 7,67. */
  --color-whatsapp: #075e54;
  --color-whatsapp-hover: #096b60;

  --grad-from: #acb6e5;
  --grad-to: #74ebd5;

  --radius: 0.25rem;
  --shadow-img: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);

  /* https://gist.github.com/don1138/5761014 */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  /* Fallback per l'interpolazione gradiente in oklab (pre-2024) */
  --in-oklab: ;
  --brand-gradient: linear-gradient(
    to right var(--in-oklab),
    var(--grad-from),
    var(--grad-to)
  );
}

@supports (background: linear-gradient(in oklab, white, black)) {
  :root {
    --in-oklab: in oklab;
  }
}

/* --------------------------------------------------------------------------
   Reset mirati (niente reset globale su *)
   -------------------------------------------------------------------------- */
@layer reset {
  body {
    margin: 0;
  }

  /* box model prevedibile sui contenitori con padding/bordo */
  .container,
  .column,
  .card,
  .btn {
    box-sizing: border-box;
  }

  .nav-links,
  .breadcrumb {
    list-style: none;
    margin-block: 0; /* azzera i margini di default di ul/ol */
    padding-inline-start: 0;
  }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
@layer base {
  /* La tela del browser prende il colore del footer, e il body resta bianco.
     Il body copre tutto il contenuto; quello che sta FUORI dal suo riquadro —
     lo spazio sotto il documento, il rimbalzo dello scroll, l'area della barra
     di sistema sui telefoni — mostra questo colore, e sembra il footer che
     continua invece di una barra bianca.

     Segnalato da Roberto il 01/09/2026 su /contatti/: una striscia bianca in
     fondo. Nel browser vero a 390px non si riproduce; nella sua schermata pero'
     si vede il logo del footer, che sotto i 768px e' nascosto — quindi quella
     pagina era resa a larghezza desktop e rimpicciolita (browser interno di
     Telegram, o "richiedi sito desktop"). Cosi' il documento non arriva in
     fondo allo schermo e sotto resta la tela. */
  html {
    background-color: var(--color-footer-bg);
  }

  body {
    background-color: #fff;
    font-family: var(--font-body);
    color: var(--color-ink);
    accent-color: var(--color-accent);
  }

  a {
    color: var(--color-ink);
    text-decoration: none;
  }

  /* I link dentro il testo devono sembrare link: senza sottolineatura sono
     identici al paragrafo che li contiene, e da telefono non c'e' nemmeno il
     passaggio del mouse a rivelarli. Vale solo nel corpo della pagina, e solo
     per i link "nudi": quelli con una classe se la vedono da soli.
     Sta in `base` apposta — cosi' breadcrumb, footer e schede, che stanno in
     `components`, restano come sono senza bisogno di eccezioni. */
  main :is(p, li, dd, td, figcaption, blockquote) a:not([class]) {
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

  h1,
  h2,
  h3 {
    text-wrap: balance;
  }

  h1 {
    font-weight: 300;
    font-size: clamp(2.5rem, 2rem + 2.2vw, 3.5rem);
    margin-block: 15px 0;
    text-align: center;
  }

  h2 {
    font-weight: 400;
    font-size: clamp(2rem, 1.7rem + 1.5vw, 2.5rem);
    margin-block: 0 10px;
  }

  h3 {
    font-weight: 400;
    font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem);
    margin-block: 0 10px;
  }

  p {
    line-height: 1.5;
    text-wrap: pretty;
  }

  svg {
    vertical-align: middle;
  }

  /* Con width/height come attributi (per evitare CLS), height:auto mantiene
     l'aspect-ratio quando la larghezza è vincolata via CSS (es. #logo);
     max-inline-size:100% evita che immagini più grandi sforino il contenitore */
  img {
    max-inline-size: 100%;
    block-size: auto;
  }

  /* Liste di contenuto come i paragrafi (il template usava `p, ul`) */
  main :where(ul, ol) {
    line-height: 1.5;
  }

  hr {
    margin-block: 30px;
    border: 0.5px solid var(--color-ink);
  }

  /* Focus ring visibile da tastiera */
  :where(a, button, .btn):focus-visible {
    outline: 2px solid var(--color-ink);
    outline-offset: 2px;
  }
}

/* --------------------------------------------------------------------------
   Componenti
   -------------------------------------------------------------------------- */
@layer components {
  /* Header / sfondo gradiente */
  .gradient {
    background: var(--brand-gradient);
  }

  .azzurrino {
    background-color: var(--color-azzurrino);
  }

  header {
    padding: 20px;
  }

  /* Navigazione / loghi centrati */
  .nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .nav-links img {
    display: block;
    margin-inline: auto;
  }

  .nav-links li {
    margin: 5px;
  }

  .nav-links li a {
    text-decoration: none;
    color: var(--color-ink);
  }

  /* Griglia a colonne */
  .container {
    display: flex;
    padding-block: 20px;
  }

  .column {
    flex-grow: 1;
    margin-block-start: 5px;
    margin-inline: 10px;
  }

  /* Bottoni */
  .btn {
    display: inline-block;
    inline-size: 100%;
    padding: 8px;
    margin-block-end: 8px;
    text-align: center;
    text-decoration: none;
    color: var(--color-ink);
    background: var(--color-accent);
    border-radius: var(--radius);
  }

  /* Bottone "condividi", in fondo al corpo della pagina.
     E' un <a> e non un <button> perche' wa.me e' un indirizzo: funziona senza
     JavaScript, si apre in una scheda nuova e si copia col tasto destro.
     Verde scuro di WhatsApp col testo bianco: 7,67 di contrasto, sopra anche
     l'AAA. Il verde acceso del marchio col bianco starebbe a 1,98 — vedi il
     commento sul token. Non usa `.btn`, che e' largo il 100%: qui deve stare
     largo quanto la sua etichetta. */
  /* La colonna che porta il bottone. `justify-content` lo centra in
     orizzontale; lo spazio sopra e sotto lo pareggia il `padding-block-end`.
     **I due numeri sono diversi apposta**: sopra il bottone arrivano gia' una
     quarantina di pixel che non nascono qui — il margine di fondo dell'ultimo
     paragrafo piu' il `padding-block` del contenitore precedente — e da dentro
     questo blocco non si possono togliere. Quindi si compensa sotto.
     Misurato dal browser, non stimato: vedi BACKLOG-modern-web.md. */
  .condividi-blocco {
    display: flex;
    justify-content: center;
    margin-block-start: 0;
    padding-block-end: 40px;
  }

  .condividi {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    margin-block: 0;
    color: #fff;
    background: var(--color-whatsapp);
    border-radius: var(--radius);
    text-decoration: none;
  }

  /* Schiarisce, ma resta a 6,4 di contrasto col bianco. */
  .condividi:hover {
    background: var(--color-whatsapp-hover);
  }

  /* Immagini */
  .img-open {
    block-size: auto;
    border-radius: var(--radius);
    margin-block-end: 30px;
    box-shadow: var(--shadow-img);
  }

  .img-responsive {
    inline-size: 100%;
    block-size: auto;
    border-radius: var(--radius);
    margin-block-end: 30px;
    box-shadow: var(--shadow-img);
  }

  /* Breadcrumb */
  .breadcrumb {
    display: flex;
    padding-block-end: 15px;
  }

  .breadcrumb li {
    display: inline-block;
  }

  .breadcrumb li a {
    text-decoration: none;
    color: var(--color-ink);
  }

  .breadcrumb li a:hover {
    text-decoration: underline;
  }

  .breadcrumb li:last-child {
    color: var(--color-muted);
  }

  .breadcrumb li::after {
    content: "/";
    margin: 5px;
  }

  .breadcrumb li:last-child::after {
    content: "";
  }

  /* Card */
  .cards {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
  }

  .card {
    padding: 20px;
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius);
  }

  /* Titolo card: <h2> per la gerarchia (no salto h1→h3), dimensione del vecchio <h3> */
  .card h2 {
    font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  }

  /* Ultime notizie dal blog (home) — lista riempita via JS, vedi
     /assets/js/ultime-notizie.js. Resta `hidden` finche' non arrivano i dati. */
  .notizie {
    list-style: none;
    margin-block: 0 20px;
    padding-inline-start: 0;
  }

  .notizie[hidden] {
    display: none; /* batte il display:flex di .cards */
  }

  .notizia {
    position: relative;
    background-color: #fff;
    transition: box-shadow 0.2s ease;
  }

  .notizia-data {
    display: block;
    color: var(--color-muted);
    font-size: 0.875rem;
  }

  .notizia h3 {
    font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
    margin-block: 0.25rem 0.5rem;
  }

  /* Link "esteso": tutta la card e' cliccabile, comodo da mobile.
     Il focus da tastiera resta sul titolo, dove si vede. */
  .notizia h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  .notizia p {
    margin-block: 0;
    color: var(--color-muted);
  }

  .notizia:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  }

  .notizia:hover h3 a,
  .notizia h3 a:focus-visible {
    text-decoration: underline;
  }

  /* Footer */
  footer {
    background-color: var(--color-footer-bg);
    color: var(--color-footer-ink);
  }

  footer a {
    text-decoration: none;
    color: var(--color-footer-ink);
  }

  /* Liste di link del footer: nessun pallino/rientro, spaziatura come i vecchi <p> */
  footer nav ul {
    list-style: none;
    margin-block: 0;
    padding-inline-start: 0;
  }

  footer nav li {
    margin-block: 1em;
  }

  /* L'avviso cookie non sta qui: lo stile se lo porta dietro site.js, che
     lo inietta da solo. Serve perche' il banner deve funzionare anche sulle
     pagine vecchie sotto progetti/, che non caricano questo foglio di stile
     e avrebbero il layout stravolto se lo facessero. */
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
@layer utilities {
  /* `both` mantiene opacity:0 prima dell'avvio e 1 alla fine,
     senza lasciare contenuti invisibili se l'animazione non parte */
  .fade-in {
    animation: fadeIn 1s ease-in both;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
/* Desktop */
@media screen and (min-width: 769px) {
  @layer components {
    .container {
      padding-inline: 50px;
    }

    .column {
      flex: 1 0 0%;
      margin-inline: 1%;
    }

    .column:nth-child(2) {
      flex: 3 0 0%; /* colonna centrale più larga */
    }

    #logo {
      inline-size: 12vw;
    }

    footer .column {
      flex: 1 0 0% !important;
    }

    .img-open {
      max-inline-size: 50%;
    }
  }
}

/* Mobile */
@media screen and (max-width: 768px) {
  @layer base {
    p {
      font-size: 1.125rem; /* leggibilità su piccoli schermi */
    }
    main :where(ul, ol) {
      font-size: 1.125rem; /* come i paragrafi su mobile */
    }
  }

  @layer components {
    .container {
      flex-direction: column;
    }

    /* Barra di navigazione ancorata in basso: SOLO quella dell'header.
       Il selettore era `nav` nudo e colpiva ogni <nav> della pagina — i due
       del footer e il breadcrumb — che finivano sovrapposti e fissi sopra il
       contenuto (bug visibile da mobile). L'header nav e' commentato in tutte
       le pagine: la regola resta pronta per quando lo si riattiva. */
    header nav {
      position: fixed;
      inset-block-end: 0;
      inset-inline-start: 0;
      inline-size: 100%;
      background: var(--brand-gradient);
    }

    .nav-links {
      justify-content: space-evenly;
    }

    #logo {
      inline-size: 25vw;
    }

    footer {
      padding-block-end: 50px;
    }

    footer .container {
      flex-direction: row;
    }

    #logo-footer {
      display: none;
    }

    .img-open {
      max-inline-size: 90%;
    }
  }
}

/* Accessibilità: rispetta la preferenza di movimento ridotto */
@media (prefers-reduced-motion: reduce) {
  @layer utilities {
    .fade-in {
      animation: none;
    }
  }
}