/* I token del sito nuovo applicati a Bootstrap.
 *
 * Non si traduce dataroom a Tailwind (sarebbero 69 template, i moduli di
 * crispy-forms e Form.io, che il markup se lo genera da sé): si cambia accento.
 * Bootstrap 5.3 espone 446 variabili CSS, e ridefinirne una manciata avvicina
 * tutto — Form.io compreso, che essendo su Bootstrap eredita gli stessi valori.
 *
 * Questo foglio va caricato DOPO il guscio, ed è anche l'unico posto in cui
 * scrivere una regola che debba battere il CSS del tema: il tema è tutto fuori dai
 * livelli, e nessuna regola dentro un livello lo batte, per quanta specificità le si
 * dia. Quello che deve battere Bootstrap sta invece in `@layer guscio`, nel ponte.
 *
 * Le sei facce qui sotto sono l'UNICA dichiarazione dei caratteri della pagina,
 * guscio compreso: l'endpoint non manda i `@font-face` del sito, perché puntano ai
 * suoi .woff2 e un'altra origine non è autorizzata a usarli. Toglierne una spegne
 * quel peso ovunque. Cfr. design §4.6.
 *
 * I valori sono letti da `assets/main.css` del tema e misurati sulla pagina resa,
 * non copiati dal piano: il piano dava Rajdhani al testo e Abel ai titoli, mentre
 * sul sito è l'opposto (`theme.json` mette Abel sul corpo, `.prose-fiaso h2/h3`
 * mettono Rajdhani sui titoli).
 */

/* I sei del tema, copiati in casa. I percorsi sono relativi a questo foglio, e
 * reggono anche su S3 perché l'albero degli statici è lo stesso. */
@font-face {
  font-family: Rajdhani; font-style: normal; font-weight: 300; font-display: swap;
  src: url("../fonts/rajdhani-latin-300.woff2") format("woff2");
}
@font-face {
  font-family: Rajdhani; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/rajdhani-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: Rajdhani; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/rajdhani-latin-500.woff2") format("woff2");
}
@font-face {
  font-family: Rajdhani; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/rajdhani-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: Rajdhani; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/rajdhani-latin-700.woff2") format("woff2");
}
@font-face {
  font-family: Abel; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/abel-latin-400.woff2") format("woff2");
}

/* I colori sono i token del tema: --color-navy #005596, --color-navy-dark #003d6e,
 * --color-foreground #1a1a1a, --color-blue-link #0061a5. */
:root {
  --bs-primary: #005596;
  --bs-primary-rgb: 0, 85, 150;
  --bs-body-color: #1a1a1a;
  --bs-body-color-rgb: 26, 26, 26;
  --bs-body-font-family: Abel, sans-serif;
  --bs-heading-color: #1a1a1a;
  --bs-link-color: #0061a5;
  --bs-link-color-rgb: 0, 97, 165;
  --bs-link-hover-color: #003d6e;
  --bs-link-hover-color-rgb: 0, 61, 110;
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
}

/* I titoli del sito sono in Rajdhani, non nel carattere del testo, che è Abel.
 * L'unico titolo dentro il guscio (il richiamo alla newsletter) è già in Rajdhani,
 * quindi questa regola non lo sposta. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: Rajdhani, sans-serif;
}

/* Il bottone del sito ha l'angolo tagliato: è il segno più riconoscibile.
 * Il taglio del tema (`.btn-cut`) è di 10px.
 *
 * I colori non si prendono da `--bs-primary`: Bootstrap 5.3 compila `.btn-primary`
 * coi valori scritti dentro (`--bs-btn-bg: #0d6efd`) e quella variabile non la legge
 * mai. Vanno quindi impostate le variabili del bottone, una per una. Qui basta una
 * regola normale: questo foglio è fuori dai livelli e arriva dopo tutti, quindi
 * batte il `.btn-primary` di Bootstrap, che sta in `@layer bootstrap`.
 *
 * Il fondo pieno del sito è navy con testo bianco (`bg-navy text-background` sul
 * bottone «Iscriviti» del footer): 7,7:1 di contrasto, contro i 6,6:1 dell'azzurrino
 * #e1efff che dataroom ci metteva prima.
 *
 * Restano fuori di qui i due `!important` di `project.css`, che nessuna regola non
 * stratificata può battere: stanno in `@layer sovrascritture`, in guscio-bridge.css,
 * e leggono le variabili impostate qui. */
.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #003d6e;
  --bs-btn-hover-border-color: #003d6e;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #003d6e;
  --bs-btn-active-border-color: #003d6e;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-btn-disabled-color: #fff;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}

/* L'onda in testa al footer, collocata.
 *
 * Sul sito risale di 80px (`.numeri-wave-geo--sm` porta `--wave-h: var(--wave-morso)`
 * e `margin-top: calc(-1 * var(--wave-h))`) dentro il fondo bianco della pagina, e ci
 * disegna il proprio gradino grigio. Qui sopra c'è `#container`, che ha lo sfondo
 * azzurro: sarebbe il fondale sbagliato. Azzerando la risalita, l'onda occupa quegli
 * 80px in cima al footer e disegna lo stesso gradino sul bianco del footer — gli
 * stessi pixel del sito.
 *
 * Non si riserva lo spazio con un margine su `#container`: i margini fra fratelli
 * si fondono e 80 positivi più 80 negativi fanno zero.
 *
 * Sta qui e non nel ponte perché deve battere il tema, che non sta in nessun
 * livello: dentro `@layer guscio` questa riga non farebbe niente. */
footer .wave-geo {
  margin-top: 0;
}

/* Il layout del contenuto, che arrivava dal tema legacy.
 *
 * Fino al 2026-09-17 dataroom caricava `css/responsive.css` da www.fiaso.it, e
 * quel foglio — 59 regole su cinque soglie — faceva anche il layout di dataroom,
 * non solo del guscio legacy. Tre toccavano il suo markup davvero:
 *
 *   #container { margin: 0 auto }        a ogni larghezza  -> la centratura
 *   #content   { padding: 50px }         oltre i 1200px    -> il respiro laterale
 *   #container { padding: 50px 0 0 0 }   sotto i 480px     -> il rientro in testa
 *
 * Sparito quel foglio, il contenuto si appoggiava al bordo sinistro dello schermo.
 * Qui si ricostruisce l'EFFETTO, non l'impianto: due soglie invece di cinque, e
 * quelle di Bootstrap che dataroom usa già, invece di ereditare il sistema di
 * griglia di un tema che stiamo lasciando.
 *
 * Verificato contro la produzione, che il foglio legacy ce l'ha ancora: a 1440
 * `#container` parte a 49,875px con 1325,25px di larghezza, e `#inner-content`
 * comincia 50px più dentro. */
#container {
  margin-inline: auto;
}

#content {
  padding: 0 1rem;
}

@media (min-width: 1200px) {
  #content {
    padding: 50px;
  }
}

/* E la testata ridotta delle pagine di compilazione, che veniva dallo stesso
 * foglio: `#branding { margin: 0 auto; padding: 2vh 0 0 0; width: 95% }`.
 * Senza, il logo si appoggiava al bordo sinistro mentre il contenuto restava
 * centrato. Il 95% non è il 93% di `#container`: era così anche prima, e il logo
 * stava un filo più fuori del contenuto. */
#branding {
  margin-inline: auto;
  padding-top: 2vh;
  width: 95%;
}

/* Il guscio sopra la mappa, e sotto i modali.
 *
 * Sul sito l'header vive in una pagina dove niente sale: gli bastano `z-40` e
 * `z-50` per la fascia. Dentro dataroom no — Leaflet impila i propri riquadri a
 * 400 e i controlli a 1000, quindi scorrendo la scheda di un'azienda la mappa
 * passava sopra l'header fisso.
 *
 * I due valori sono scelti fra due soglie, non a caso: sopra il 1000 di Leaflet,
 * e sotto il 1050 dello sfondo dei modali di Bootstrap — così la finestra di
 * accesso continua a coprire il guscio, come deve. L'ordine fra i due resta
 * quello del sito: la fascia sopra l'header.
 *
 * Non serve `!important`: le due classi del tema (`z-40`, `z-50`) stanno in un
 * livello, questo foglio è fuori da tutti, e per le dichiarazioni normali chi
 * sta fuori vince. */
#site-header {
  z-index: 1010;
}

.topbar-top {
  z-index: 1020;
}