/* =============================================================================================
 * JURA Club — Fondamenta / Base stylesheet
 * =============================================================================================
 * IT: Azzeramento ragionato, tipografia di base, struttura di pagina (barra superiore, barra
 *     laterale, contenuto, piè di pagina) e accessibilità di base. Nessun componente: quelli
 *     stanno in `componenti.css`. Nessun valore letterale: tutto viene da `tokens.css`.
 * EN: Reset, base typography, page shell, base accessibility. No components, no literal values.
 * ============================================================================================= */

/* ---------------------------------------------------------------------------------------------
 * 1. AZZERAMENTO
 * --------------------------------------------------------------------------------------------- */

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

html {
  /* Un ancora interna non deve far saltare la pagina sotto la barra superiore fissa. */
  scroll-padding-top: calc(var(--altezza-topbar) + var(--sp-4));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-testo);
  font-size: var(--testo-md);
  line-height: var(--interlinea);
  color: var(--colore-testo);
  background: var(--colore-fondo);
  -webkit-font-smoothing: antialiased;
  /* Rete di sicurezza: una parola più lunga del contenitore va a capo invece di sfondarlo.
   * Vale per gli indirizzi, per gli identificativi e per le parole composte lunghe. */
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--sp-4); line-height: var(--interlinea-stretta); }
p, ul, ol, dl, table, figure, pre { margin: 0 0 var(--sp-5); }
ul, ol { padding-left: var(--sp-5); }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---------------------------------------------------------------------------------------------
 * 2. TIPOGRAFIA
 *
 * I titoli sono in serif (Spectral) e in Blu Notte: è la voce editoriale e istituzionale del
 * marchio. Il corpo resta in sans, perché deve reggere tabelle dense e moduli lunghi.
 * --------------------------------------------------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--font-titolo);
  font-weight: var(--peso-forte);
  color: var(--colore-testo-forte);
  letter-spacing: -0.01em;
}

h1 { font-size: var(--testo-2xl); }
h2 { font-size: var(--testo-xl); }
h3 { font-size: var(--testo-lg); }

/* h4 e oltre tornano al sans: a quel corpo il serif perde leggibilità e guadagna solo rumore. */
h4, h5, h6 {
  font-family: var(--font-testo);
  font-size: var(--testo-md);
  font-weight: var(--peso-forte);
  color: var(--colore-testo-forte);
}

a {
  color: var(--stato-info);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--colore-primario); }

small, .tenue { color: var(--colore-testo-tenue); font-size: var(--testo-sm); }

/* Il monospazio non è uno stile: è una dichiarazione di natura del dato. Ogni valore
 * verificabile on-chain — hash, indirizzo, identificativo, transazione — si rende così, ed è la
 * convenzione fissata dal Wireframe §1.1 e dalle Linee Guida §9.1. */
/* `overflow-wrap: anywhere` e NON `word-break: break-all`, ed è la differenza fra un difetto e
 * il suo contrario: `break-all` spezza a metà parola SEMPRE che la riga finisca, quindi rendeva
 * «ERC-1155» come «ERC-115 / 5» anche con spazio a sufficienza. `anywhere` interviene solo quando
 * la parola non ci sta davvero, ed è il comportamento che serve a un hash. */
.mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------------------------
 * 3. ACCESSIBILITÀ
 * --------------------------------------------------------------------------------------------- */

/* Contorno di focus visibile e uniforme. Non si rimuove mai: chi naviga da tastiera perderebbe
 * la posizione. `:focus-visible` lo mostra solo quando serve davvero, non a ogni clic di mouse. */
:focus-visible {
  outline: var(--focus-spessore) solid var(--colore-focus);
  outline-offset: var(--focus-scarto);
  /* IT: Il raggio è dichiarato perché l'anello segua la forma dell'elemento invece di squadrarla.
   *     Su un componente che dichiara un raggio proprio quello vince — e va bene così: l'anello
   *     deve seguire la forma di ciò che circonda, non imporne una. */
  border-radius: var(--raggio-sm);
}

/* Salto al contenuto: primo elemento focalizzabile della pagina, invisibile finché non riceve il
 * fuoco. Evita a chi usa tastiera o lettore di schermo di riattraversare la navigazione a ogni
 * cambio di pagina. */
.salta-al-contenuto {
  position: absolute;
  left: var(--sp-3);
  top: calc(-1 * var(--sp-8));
  z-index: 100;
  padding: var(--sp-2) var(--sp-4);
  background: var(--jura-oro);
  color: var(--jura-blu-notte);
  font-weight: var(--peso-forte);
  border-radius: 0 0 var(--raggio) var(--raggio);
  transition: top var(--transizione);
}
.salta-al-contenuto:focus { top: 0; }

/* Testo destinato ai soli lettori di schermo. */
.solo-lettore {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------------------------
 * 4. STRUTTURA DI PAGINA
 * --------------------------------------------------------------------------------------------- */

.pagina { display: flex; flex-direction: column; min-height: 100vh; }

/* --- Barra superiore: comune a tutte le aree, sempre Blu Notte (Wireframe §1.1) ------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  height: var(--altezza-topbar);
  padding: 0 var(--sp-5);
  background: var(--jura-blu-notte);
  color: var(--colore-testo-inverso);
  border-bottom: 2px solid var(--jura-oro);
}

.topbar__logo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--jura-avorio);   /* governa il `currentColor` dell'SVG del logo */
  text-decoration: none;
  flex: 0 0 auto;
}
.topbar__logo svg, .topbar__logo img { height: 21px; width: auto; display: block; }
/* Al sorvolo il marchio va in ORO, non nel Blu Notte che erediterebbe da `a:hover`: su una barra
 * Blu Notte quel colore lo farebbe sparire. Il marchio è in `currentColor`, quindi basta il
 * colore del contenitore — e l'oro è il colore che il marchio ha già come sigillo. */
.topbar__logo:hover, .topbar__logo:focus-visible { color: var(--jura-oro); }

/* Il contesto (nome dell'area) è separato dal logo da un filetto verticale: dice «dove sono»
 * senza competere col marchio. */
.topbar__contesto {
  padding-left: var(--sp-4);
  border-left: 1px solid rgba(247, 244, 236, 0.22);
  font-size: var(--testo-sm);
  color: rgba(247, 244, 236, 0.72);
  letter-spacing: 0.02em;
}

.topbar__destra { margin-left: auto; display: flex; align-items: center; gap: var(--sp-3); }

.topbar__nav { display: flex; gap: var(--sp-4); }
.topbar__nav a {
  color: rgba(247, 244, 236, 0.82);
  text-decoration: none;
  font-size: var(--testo-sm);
  padding: var(--sp-1) 0;
  border-bottom: 2px solid transparent;
}
.topbar__nav a:hover { color: var(--jura-avorio); }
.topbar__nav a[aria-current="page"] { color: var(--jura-oro); border-bottom-color: var(--jura-oro); }

/* --- Corpo: barra laterale + contenuto ------------------------------------------------------ */
.corpo { display: flex; flex: 1 1 auto; align-items: stretch; }

.sidebar {
  flex: 0 0 var(--larghezza-sidebar);
  background: var(--ui-bianco);
  border-right: 1px solid var(--colore-bordo);
  padding: var(--sp-5) 0;
}

.sidebar__gruppo + .sidebar__gruppo { margin-top: var(--sp-5); }

.sidebar__titolo {
  padding: 0 var(--sp-5) var(--sp-2);
  font-size: var(--testo-xs);
  font-weight: var(--peso-forte);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--colore-testo-tenue);
}

.sidebar__voce {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  color: var(--colore-testo);
  text-decoration: none;
  font-size: var(--testo-sm);
  border-left: 3px solid transparent;
}
.sidebar__voce {
  transition: background   var(--durata-svelta) var(--curva),
              border-color var(--durata-svelta) var(--curva),
              color        var(--durata-svelta) var(--curva);
}
.sidebar__voce:hover { background: var(--colore-superficie-alt); color: var(--colore-testo-forte); }

/* IT: Il filetto si accenna al sorvolo e alla pressione (T-189). La voce corrente lo porta d'oro
 *     pieno; questo è un grigio, cioè un «potrebbe essere qui» che non si confonde con «sei qui».
 *     Senza, il sorvolo su una voce di menù cambiava solo il fondo, e sul fondo chiaro della barra
 *     la differenza era quasi impercettibile. */
.sidebar__voce:hover:not([aria-current="page"]) { border-left-color: var(--colore-bordo-ui); }
.sidebar__voce:active { background: var(--jura-avorio); }

/* La voce attiva è marcata da un filetto d'oro, non da un fondo pieno: l'oro è una firma, non
 * una vernice (Linee Guida §4.4, regola 70/20/10). */
.sidebar__voce[aria-current="page"] {
  background: var(--jura-avorio);
  border-left-color: var(--jura-oro);
  color: var(--colore-testo-forte);
  font-weight: var(--peso-forte);
}

.contenuto { flex: 1 1 auto; min-width: 0; padding: var(--sp-6) var(--sp-7) var(--sp-8); }
.contenuto__interno { max-width: var(--larghezza-contenuto); margin: 0 auto; }

/* --- Intestazione di pagina ------------------------------------------------------------------ */
.intestazione { margin-bottom: var(--sp-6); }
.intestazione__riga { display: flex; align-items: flex-start; gap: var(--sp-4); flex-wrap: wrap; }
.intestazione__riga > .intestazione__azioni { margin-left: auto; display: flex; gap: var(--sp-2); }
.intestazione__occhiello {
  font-size: var(--testo-xs);
  font-weight: var(--peso-forte);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--colore-testo-tenue);
  margin-bottom: var(--sp-1);
}
.intestazione__sommario {
  color: var(--colore-testo-tenue);
  max-width: var(--larghezza-editoriale);
  margin: 0;
}

/* --- Piè di pagina --------------------------------------------------------------------------- */
.piede {
  margin-top: auto;
  padding: var(--sp-5) var(--sp-6);
  background: var(--jura-blu-notte);
  color: rgba(247, 244, 236, 0.7);
  font-size: var(--testo-sm);
}
.piede a { color: rgba(247, 244, 236, 0.9); }
.piede__righe { display: flex; gap: var(--sp-5); flex-wrap: wrap; align-items: center; }
/* IT: L'ultima voce va a destra solo finché la riga è UNA. Andate a capo, `margin-left: auto` la
 *     lasciava appesa da sola all'estremità destra di una riga tutta sua — un elemento orfano che
 *     sembra un errore di resa. Sopra la soglia il comportamento non cambia. */
@media (min-width: 721px) {
  .piede__righe > :last-child { margin-left: auto; }
}

/* ---------------------------------------------------------------------------------------------
 * 5. RETICOLO
 * --------------------------------------------------------------------------------------------- */

.griglia { display: grid; gap: var(--sp-5); }
.griglia--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.griglia--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.griglia--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Reticolo che si adatta da solo: usato per le griglie di schede-titolo, dove il numero di
 * colonne deve dipendere dallo spazio e non da una classe scelta a mano. */
.griglia--auto { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }

.colonne-principale-laterale {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--sp-6);
  align-items: start;
}

.pila { display: flex; flex-direction: column; gap: var(--sp-5); }
.riga { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.riga--fine { justify-content: flex-end; }

/* ---------------------------------------------------------------------------------------------
 * 6. ADATTAMENTO — mobile-first nella sostanza, non solo nella dichiarazione
 *
 * Wireframe §8: la barra laterale collassa in menù sotto 1024px; le tabelle dense diventano
 * liste di schede; i moduli passano a uno step per schermata.
 * --------------------------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .corpo { flex-direction: column; }
  .sidebar {
    flex: 0 0 auto;
    border-right: 0;
    border-bottom: 1px solid var(--colore-bordo);
    padding: var(--sp-3) 0;
    overflow-x: auto;
  }
  .sidebar__voci { display: flex; gap: var(--sp-1); padding: 0 var(--sp-3); }
  .sidebar__gruppo { padding: 0; }
  .sidebar__gruppo + .sidebar__gruppo { margin-top: var(--sp-2); }
  .sidebar__voci > li { flex: 0 0 auto; }
  .sidebar__titolo { display: none; }
  .sidebar__voce {
    white-space: nowrap;
    border-left: 0;
    border-bottom: 3px solid transparent;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--raggio-sm);
  }
  .sidebar__voce[aria-current="page"] { border-left: 0; border-bottom-color: var(--jura-oro); }
  .colonne-principale-laterale { grid-template-columns: minmax(0, 1fr); }
  .griglia--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .contenuto { padding: var(--sp-4) var(--sp-4) var(--sp-7); }
  .topbar { padding: 0 var(--sp-4); gap: var(--sp-3); }
  .topbar__contesto { display: none; }
  .topbar__nav { display: none; }
  .griglia--2, .griglia--3, .griglia--4 { grid-template-columns: minmax(0, 1fr); }
  h1 { font-size: var(--testo-xl); }
}

/* ---------------------------------------------------------------------------------------------
 * 7. STAMPA
 *
 * Le pagine di questa piattaforma finiscono davanti a un notaio o a un consulente, e allora
 * vengono stampate. Navigazione e azioni spariscono; resta il contenuto.
 * --------------------------------------------------------------------------------------------- */
@media print {
  .topbar, .sidebar, .piede, .bottone, .banner-dimostrativo { display: none !important; }
  body { background: var(--ui-bianco); }
  .contenuto { padding: 0; }
  /* IT: Su carta l'avorio non si stampa e i bordi chiari spariscono: serve un grigio più deciso,
     che resta comunque un token. */
  .scheda { break-inside: avoid; border-color: var(--ui-grigio); box-shadow: none; }

  /* IT: LA STAMPA ANNULLA OGNI STATO DI INGRESSO (T-191), e questa mancanza è lo stesso difetto
   *     delle figure invisibili riaperto su un altro canale.
   *
   *     Gli elementi in attesa di comparire partono da `opacity: 0` e diventano visibili quando
   *     entrano nella finestra. Chi apre una pagina lunga e stampa **senza averla prima scorsa
   *     fino in fondo** manda in stampa a `opacity: 0` tutto ciò che non ha ancora guardato: sulla
   *     carta restano blocchi bianchi, e non si legge come «animazione in attesa» — si legge come
   *     un documento venuto male. Su una piattaforma le cui pagine finiscono davanti a un notaio è
   *     il momento peggiore in cui poteva capitare.
   *
   *     `!important` è necessario: queste regole devono vincere sullo stato applicato dallo
   *     script, che è più specifico. È l'uso per cui `!important` esiste — un contesto di resa
   *     diverso che annulla una scelta di schermo, non una scorciatoia di specificità. */
  .entra, .figura--pronta .figura__parte {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}