/*
 * design.css — il solo CSS custom del sito esterno.
 *
 * Regola guida (decisione 3): il meno possibile sopra Bootstrap 5. Qui sta
 * unicamente cio' che Bootstrap non copre, o che copre in modo incompatibile
 * con i nostri token. Tutto e' prefissato `.ld-` / `--ld-`.
 *
 * Perche' il prefisso e' obbligatorio: il CSS legacy definisce selettori
 * come `*.blue`, `*.orange`, `*.red` (evo-button.css) che colpiscono
 * QUALSIASI elemento con quella classe. Finche' quei fogli esistono, una
 * classe di colore nuda erediterebbe stili invisibili
 * (02-dipendenze-css-js.md § 5).
 *
 * Questo file NON viene mai caricato insieme a base.css: il layout nuovo e'
 * isolato per costruzione, non per scoping (decisione 6).
 */

/* ====================================================================
   1. FONDAMENTA
   ==================================================================== */

body {
  font-family: var(--ld-font-ui);
  color: var(--ld-testo);
  /* Fondo avorio, non bianco: le superfici (card, navbar, footer)
     restano bianche e si staccano dalla pagina (design-tokens.css). */
  background-color: var(--ld-sfondo-pagina);
  /* Cifre a larghezza fissa: senza, le colonne di prezzi e quantita'
     non si incolonnano. Requisito delle liste e del preventivo.       */
  font-variant-numeric: tabular-nums;
  /* Il footer resta in fondo anche sulle pagine corte, senza il
     position:absolute con altezza fissa del layout legacy.             */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1 0 auto;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ld-font-display);
  color: var(--ld-testo);
  /* Traccio piu' stretto: si nota solo dai 20px in su, dettaglio
     editoriale della direzione "Ibrido D3". */
  letter-spacing: var(--ld-tracciato-titolo);
  /* Evita che un titolo su due righe lasci una parola orfana. */
  text-wrap: balance;
}

h1 { font-size: var(--ld-dim-h1); font-weight: var(--ld-peso-semi);
     line-height: var(--ld-interlinea-titolo); }
h2 { font-size: var(--ld-dim-h2); font-weight: var(--ld-peso-semi);
     line-height: var(--ld-interlinea-titolo); }
h3 { font-size: var(--ld-dim-h3); font-weight: var(--ld-peso-semi);
     line-height: var(--ld-interlinea-titolo); }

/* Titolo di apertura, solo home e pagine istituzionali. */
.ld-display {
  font-family: var(--ld-font-display);
  font-size: var(--ld-dim-display);
  font-weight: var(--ld-peso-semi);
  line-height: var(--ld-interlinea-display);
  letter-spacing: var(--ld-tracciato-titolo);
  text-wrap: balance;
}

.ld-testo-muted   { color: var(--ld-testo-muted); }
.ld-piccolo       { font-size: var(--ld-dim-piccolo); }
.ld-caption       { font-size: var(--ld-dim-caption);
                    color: var(--ld-testo-muted); }
.ld-mono          { font-family: var(--ld-font-mono); }

/* Blocchi di testo lungo (privacy, chi siamo): riga leggibile, testo
   piu' morbido dell'inchiostro pieno dei titoli — e' il gesto
   editoriale della direzione scelta. */
.ld-prosa { max-width: var(--ld-misura-testo); }
.ld-prosa p { margin-bottom: var(--ld-space-4); color: var(--ld-testo-soft); }

/* Modificatore per i blocchi affiancati a un'immagine (es. chi siamo):
   qui il testo non ha una riga a misura fissa (la colonna la impone
   gia'), quindi la giustificazione non crea buchi come su una riga
   molto larga. */
.ld-testo-giustificato p { text-align: justify; }

/* ====================================================================
   2. ACCESSIBILITA'
   ==================================================================== */

/* Focus visibile e uniforme (WCAG 2.1 AA, 2.4.7). Si usa :focus-visible
   per non mostrare l'anello a chi clicca col mouse.                    */
:focus-visible {
  outline: var(--ld-focus-spessore) solid var(--ld-focus-colore);
  outline-offset: 2px;
  border-radius: var(--ld-radius-sm);
}

/* Salto al contenuto: primo elemento focusabile della pagina, visibile
   solo da tastiera. Serve a non far ripercorrere la navbar a ogni
   pagina a chi naviga con tastiera o screen reader.                    */
.ld-salta-al-contenuto {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1080;
  padding: var(--ld-space-3) var(--ld-space-4);
  background: var(--ld-primario);
  color: var(--ld-su-primario);
  border-radius: 0 0 var(--ld-radius-md) 0;
}
.ld-salta-al-contenuto:focus {
  left: 0;
}

/* Visibile solo agli screen reader. Bootstrap ha .visually-hidden: questa
   esiste per i punti in cui non vogliamo dipendere da Bootstrap.        */
.ld-solo-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

/* ====================================================================
   3. LAYOUT
   ==================================================================== */

.ld-contenitore {
  width: 100%;
  max-width: var(--ld-larghezza-contenuto);
  margin-inline: auto;
  padding-inline: var(--ld-space-4);
}

.ld-sezione {
  padding-block: var(--ld-space-8);
}

/* ====================================================================
   4. NAVBAR
   ==================================================================== */

.ld-navbar {
  background-color: var(--ld-superficie);
  border-bottom: 1px solid var(--ld-bordo-neutro);
  min-height: var(--ld-altezza-navbar);
}

.ld-navbar .navbar-brand img {
  height: var(--ld-logo-altezza);
  width: auto;
  /* Il logo del tenant arriva dal DB con proporzioni variabili:
     si vincola l'altezza e si lascia libera la larghezza.              */
  max-width: 100%;
  object-fit: contain;
}

.ld-navbar .nav-link {
  color: var(--ld-testo-soft);
  font-weight: var(--ld-peso-semi);
  padding: var(--ld-space-2) var(--ld-space-3);
  border-radius: var(--ld-radius-sm);
}
.ld-navbar .nav-link:hover,
.ld-navbar .nav-link:focus {
  color: var(--ld-testo);
  background-color: var(--ld-superficie-2);
}
.ld-navbar .nav-link.active {
  color: var(--ld-primario-testo);
  background-color: var(--ld-primario-chiaro);
  font-weight: var(--ld-peso-semi);
}

/* ====================================================================
   5. SELETTORE DI LINGUA
   ==================================================================== */

.ld-lingua-sigla {
  border: 0;
  background: none;
  padding: var(--ld-space-1) var(--ld-space-2);
  border-radius: var(--ld-radius-pill, 999px);
  font-size: var(--ld-dim-piccolo);
  font-weight: var(--ld-peso-semi);
  color: var(--ld-testo-muted);
  line-height: 1.2;
}
.ld-lingua-sigla:hover,
.ld-lingua-sigla:focus {
  color: var(--ld-testo);
  background-color: var(--ld-superficie-2);
}
.ld-lingua-sigla.attiva {
  color: var(--ld-primario-testo);
  background-color: var(--ld-primario-chiaro);
}

/* Sotto i 992px la navbar diventa l'offcanvas: lingua e blocco
   accedi/registrati, che nella riga orizzontale desktop stanno a
   fianco del resto, qui vanno staccati e centrati (non ha senso un
   gruppo di link allineato a sinistra in un pannello verticale). */
@media (max-width: 991.98px) {
  .ld-lingua {
    justify-content: center;
    margin-top: var(--ld-space-4);
  }

  .ld-menu-conto {
    position: relative;
    margin-top: var(--ld-space-4);
    padding-top: var(--ld-space-4);
  }

  /* Trattino corto e centrato, non un divisore a tutta larghezza:
     serve solo a staccare accedi/registrati dal resto del menu. */
  .ld-menu-conto::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 48px;
    height: 1px;
    transform: translateX(-50%);
    background-color: var(--ld-bordo-neutro);
  }
}

/* ====================================================================
   6. FOOTER
   ====================================================================
   Ospita `Sito.footer`, HTML libero salvato nel database e reso con
   |safe (02-dipendenze-css-js.md). Non possiamo prevederne il markup:
   ci limitiamo a contenerlo e a normalizzarne tipografia e link.
   ==================================================================== */

.ld-footer {
  flex-shrink: 0;
  background-color: var(--ld-superficie);
  border-top: 1px solid var(--ld-bordo-neutro);
  padding-block: var(--ld-space-6);
  font-size: var(--ld-dim-piccolo);
  color: var(--ld-testo-muted);
}

.ld-footer-db :is(p, div, span, td) {
  font-size: var(--ld-dim-piccolo);
  color: var(--ld-testo-muted);
}
.ld-footer-db a {
  color: var(--ld-primario-testo);
}
/* L'HTML dal DB puo' contenere tabelle a larghezza fissa. */
.ld-footer-db table {
  max-width: 100%;
}
.ld-footer-db img {
  max-width: 100%;
  height: auto;
}

/* ====================================================================
   7. TABELLE DELLE LISTE
   ====================================================================
   Decisione 8: le 13 pagine con DataTable NON si adattano al mobile.
   La tabella scorre in orizzontale dentro il proprio contenitore; la
   pagina, invece, non deve mai scorrere in orizzontale.
   ==================================================================== */

.ld-tabella-scroll {
  overflow-x: auto;
  /* Scorrimento fluido su touch e barra sempre percepibile su macOS. */
  -webkit-overflow-scrolling: touch;
}

.ld-tabella-scroll > table {
  margin-bottom: 0;
}

.ld-tabella th {
  background-color: var(--ld-superficie-3);
  font-weight: var(--ld-peso-semi);
  font-size: var(--ld-dim-piccolo);
  white-space: nowrap;
}

.ld-tabella td,
.ld-tabella th {
  padding: var(--ld-densita-riga) var(--ld-space-3);
  vertical-align: middle;
}

/* Colonna delle azioni: icone in riga, non a capo. */
.ld-azioni {
  white-space: nowrap;
  display: flex;
  gap: var(--ld-space-2);
  align-items: center;
}
.ld-azioni a {
  color: var(--ld-primario-testo);
  text-decoration: none;
  line-height: 1;
}
.ld-azioni a:hover,
.ld-azioni a:focus {
  color: var(--ld-primario-scuro);
}

/* ====================================================================
   8. STATI: VUOTO, CARICAMENTO, ERRORE
   ====================================================================
   Ogni lista e ogni form devono avere tutti e tre gli stati progettati,
   non lasciati al default (07-piano-di-sviluppo.md § A8).
   ==================================================================== */

.ld-stato-vuoto {
  text-align: center;
  padding: var(--ld-space-10) var(--ld-space-4);
  color: var(--ld-testo-muted);
}
.ld-stato-vuoto .ld-stato-icona {
  font-size: 2.5rem;
  color: var(--ld-testo-disabilitato);
  margin-bottom: var(--ld-space-3);
  display: block;
}
.ld-stato-vuoto .ld-stato-titolo {
  font-weight: var(--ld-peso-semi);
  color: var(--ld-testo);
  margin-bottom: var(--ld-space-2);
}

.ld-spinner {
  display: inline-block;
  width: 1.25rem; height: 1.25rem;
  border: 2px solid var(--ld-bordo-neutro);
  border-top-color: var(--ld-primario);
  border-radius: 50%;
  animation: ld-gira 0.7s linear infinite;
}
@keyframes ld-gira { to { transform: rotate(360deg); } }

/* Segnaposto di caricamento per liste e schede. */
.ld-skeleton {
  background: linear-gradient(90deg,
              var(--ld-grigio-100) 25%,
              var(--ld-grigio-50)  37%,
              var(--ld-grigio-100) 63%);
  background-size: 400% 100%;
  animation: ld-skeleton 1.4s ease infinite;
  border-radius: var(--ld-radius-sm);
  min-height: 1rem;
}
@keyframes ld-skeleton {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ====================================================================
   9. DETTAGLIO CHIAVE-VALORE
   ====================================================================
   Archetipo di dettaglio_ordine / dettaglio_preventivo / conferma_*.
   Due colonne su desktop, impilate sotto i 576px.
   ==================================================================== */

.ld-cv {
  display: grid;
  grid-template-columns: minmax(10rem, 16rem) 1fr;
  gap: var(--ld-space-2) var(--ld-space-4);
}
.ld-cv dt {
  color: var(--ld-testo-muted);
  font-weight: var(--ld-peso-normale);
  font-size: var(--ld-dim-piccolo);
}
.ld-cv dd {
  margin: 0;
  font-weight: var(--ld-peso-medio);
}
@media (max-width: 575.98px) {
  .ld-cv { grid-template-columns: 1fr; gap: 0; }
  .ld-cv dd { margin-bottom: var(--ld-space-3); }
}

/* ====================================================================
   10. RIEPILOGO PREZZO APPICCICATO (form preventivo, mobile-first)
   ====================================================================
   Il totale deve restare visibile mentre si compila il form da telefono.
   ==================================================================== */

.ld-riepilogo-sticky {
  position: sticky;
  bottom: 0;
  z-index: 1020;
  background-color: var(--ld-superficie);
  border-top: 1px solid var(--ld-bordo-neutro);
  box-shadow: var(--ld-ombra-3);
  padding: var(--ld-space-3) var(--ld-space-4);
}

@media (min-width: 992px) {
  /* Su desktop non serve appiccicarlo in fondo: torna nel flusso, in
     colonna a fianco del form.                                        */
  .ld-riepilogo-sticky {
    position: sticky;
    top: var(--ld-space-4);
    bottom: auto;
    border: 1px solid var(--ld-bordo-neutro);
    border-radius: var(--ld-radius-lg);
    box-shadow: var(--ld-ombra-1);
  }
}

/* ====================================================================
   11. HOME — HERO
   ====================================================================
   Niente piu' immagine di sfondo: il centraggio (orizzontale e
   verticale) e' affidato alle utility flex di Bootstrap sul markup
   (d-flex align-items-center justify-content-center), qui resta solo
   l'altezza del blocco. Bottoni e tipografia usano le utility standard
   di Bootstrap (btn-lg, lead, d-grid/d-flex) sul modello dell'esempio
   "Heroes" di Bootstrap. Colori di testo e bottoni sono quelli standard
   del resto del sito.
   ==================================================================== */

.ld-hero-home {
  min-height: calc(100vh - var(--ld-altezza-navbar));
}

/* Il blocco titolo/lead/bottoni sta in una card cosi' si stacca dal
   fondo avorio della pagina, invece di restare a contatto diretto col
   fondo (altrimenti sparirebbe visivamente, senza alcun contrasto). */
.ld-hero-card {
  max-width: 640px;
  background-color: var(--ld-superficie);
  border-radius: var(--ld-radius-lg);
}

/* ====================================================================
   12. STAMPA
   ==================================================================== */

@media print {
  .ld-navbar,
  .ld-footer,
  .ld-lingua,
  .ld-azioni,
  .ld-riepilogo-sticky,
  .ld-salta-al-contenuto { display: none !important; }

  body { min-height: auto; }
  .ld-tabella-scroll { overflow: visible; }
}