/* ============================================================
   Chrome condivisa delle pagine strumento (cartella /strumenti)
   Navbar del sito + hamburger mobile. Stili UNICI: modificarli
   qui si riflette su tutte le pagine tool.

   Contiene anche i TOKEN di colore e misura di tutte le pagine
   tool (blocco :root qui sotto): fino al 2026-08-26 ogni pagina
   aveva il proprio, con accento e raggio divergenti fra loro e
   rispetto al sito. Ora si curano qui, in un punto solo.
   ============================================================ */

/* ============================================================
   TOKEN — fonte unica per tutte le pagine strumento.
   Allineati ai token di assets/styles.css: dove il sito e i tool
   dicono la stessa cosa, il valore è lo stesso ed è annotato.
   Prima del 2026-08-26 ogni tool aveva il proprio :root, con
   accento e raggio divergenti: modificarli qui ora basta.
   ============================================================ */
:root {
  /* Neutri — già identici a quelli del sito */
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-text: #1a2128;           /* = --ink */
  --color-muted: #5a6b78;          /* = --muted */
  --color-primary: #0a2538;        /* = --navy */
  --color-primary-light: #163b54;  /* = --navy-light */
  --color-border: #e0e4e8;         /* = --line */

  /* Accento — portato al teal del brand (era #3b6fa3 su tre tool,
     #2a7e7e su altman: nessuno dei due era il colore del sito) */
  --color-accent: #1f7a78;         /* = --teal */
  --color-accent-light: #e7f1f0;   /* = --teal-pale */

  /* Semantici — valori già uguali ovunque; altman li chiamava
     safe / grey / distress, ora usa questi nomi */
  --color-success: #2d7a3e;
  --color-success-bg: #e8f3ea;
  --color-warning: #b8862b;
  --color-warning-bg: #faf2dd;
  --color-danger: #a33d3d;
  --color-danger-bg: #f6e3e3;

  /* Tipografia — stessi valori del sito */
  --sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  --radius: 3px;                   /* = --radius del sito (era 2px) */
  --shadow: none;
  --max-width: 760px;              /* = --maxw-narrow del sito (era 720/760) */
}


/* ============================================================
   CHROME COMUNE DELLE PAGINE STRUMENTO
   Estratta il 2026-08-26 dai <style> delle quattro pagine, che
   la ripetevano quasi identica. Modificarla qui si riflette su
   tutti i tool, presenti e futuri. Nelle pagine resta solo il
   CSS specifico del singolo strumento (grafici, scale, tabelle).
   ============================================================ */

/* --- BASE --- */

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--sans);
  line-height: 1.6;
  font-size: 16px;
  font-weight: 400;
}
.page { max-width: var(--max-width); margin: 0 auto; padding: 32px 24px 64px; }
.step { display: none; }
.step.active { display: block; }

/* --- INTESTAZIONE E TIPOGRAFIA --- */

header.brand { text-align: center; margin-bottom: 32px; padding-bottom: 28px; }
header.brand .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 12px;
  color: var(--color-muted);
  font-weight: 500;
  margin-bottom: 14px;
}
header.brand h1 {
  font-family: var(--serif);
  font-size: 26px;
  margin: 0 0 14px;
  color: var(--color-primary);
  font-weight: 600;
  line-height: 1.25;
}
header.brand h1::after {
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  background: var(--color-primary);
  margin: 18px auto 0;
}
header.brand p.subtitle {
  color: var(--color-muted);
  margin: 14px 0 0;
  font-size: 15px;
  font-weight: 400;
}
h2 {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--color-primary);
  margin: 0 0 14px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}
h2::after {
  content: '';
  display: block;
  width: 44px;
  height: 2px;
  background: var(--color-primary);
  margin: 14px auto 0;
}
/* Etichetta di sezione dentro un form: il ruolo che
   altman-zscore dava a <h2>. Ora ha un nome proprio. */
h2.form-section {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--color-primary);
  margin: 0 0 6px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding-bottom: 10px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.lede {
  color: var(--color-muted);
  margin: 0 auto 32px;
  font-size: 15px;
  text-align: center;
  max-width: 560px;
}

/* --- CAMPI DI FORM --- */

label.field-label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--color-text);
  font-size: 15px;
}
.field { margin-bottom: 22px; }
.field-hint { font-size: 13px; color: var(--color-muted); margin: -2px 0 8px; }
input[type="text"], input[type="number"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 15px;
  font-family: inherit;
  background: white;
  color: var(--color-text);
  transition: border-color 0.15s ease;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(26, 58, 74, 0.1); }
.radio-group { display: flex; flex-direction: column; gap: 8px; }
.radio-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  background: white;
}
.radio-card:hover { border-color: var(--color-primary-light); }
.radio-card:has(input:checked) { border-color: var(--color-primary); background: #f4f7f9; }
.radio-card input { margin-top: 3px; }
.radio-label { flex: 1; font-size: 15px; }
.radio-label .desc {
  display: block;
  font-size: 13px;
  color: var(--color-muted);
  margin-top: 2px;
}

/* --- BOTTONI --- */

button {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  padding: 14px 28px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.btn-primary { background: var(--color-primary); color: white; }
.btn-primary:hover { background: var(--color-primary-light); }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-secondary { background: transparent; color: var(--color-muted); border: 1px solid var(--color-border); }
.btn-secondary:hover { color: var(--color-primary); border-color: var(--color-primary); }
.btn-link {
  background: transparent;
  color: var(--color-primary);
  padding: 14px 0;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: underline;
}
.actions {
  display: flex;
  justify-content: space-between;
  margin-top: 32px;
  gap: 12px;
}

/* --- RISULTATO E CHIUSURA --- */
/* Numero grande del risultato. Era .ratio-display sui test pratici e
   .result-value su altman, con dichiarazione identica: ora e' una sola. */
.ratio-display,
.result-value {
  font-family: var(--sans);
  font-size: 64px;
  font-weight: 300;
  color: var(--color-primary);
  line-height: 1;
  margin: 14px 0 6px;
  letter-spacing: -0.01em;
}


.card {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px 8px 32px;
}
.progress { display: flex; gap: 4px; margin-bottom: 36px; }
.progress .pip {
  flex: 1;
  height: 2px;
  background: var(--color-border);
  transition: background 0.2s ease;
}
.result-hero {
  text-align: center;
  padding: 8px 0 24px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 28px;
}
.scenario-box {
  padding: 18px 20px;
  border-radius: var(--radius);
  margin-bottom: 28px;
  border-left: 4px solid;
}
.scenario-box p { margin: 0; font-size: 14px; line-height: 1.6; }
.scenario-box h3 {
  margin: 0 0 8px;
  font-size: 15px;
  font-family: var(--sans);
  color: var(--color-primary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.recommendations h3 {
  font-family: var(--sans);
  color: var(--color-primary);
  font-size: 13px;
  margin: 36px 0 16px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
}
.reco-item {
  padding: 18px 20px;
  border-left: 2px solid var(--color-accent);
  border-radius: 0;
  margin-bottom: 12px;
  background: #f7f9fb;
}
.reco-item p {
  margin: 0;
  font-size: 14px;
  color: var(--color-muted);
  line-height: 1.6;
}
.reco-item strong {
  color: var(--color-primary);
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
}
.cta-block {
  margin-top: 44px;
  padding: 36px 28px;
  background: var(--color-primary);
  color: white;
  border-radius: var(--radius);
  text-align: center;
}
.cta-block h3 {
  font-family: var(--sans);
  margin: 0 0 12px;
  font-size: 18px;
  color: white;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.cta-block p {
  margin: 0 auto 22px;
  color: rgba(255,255,255,0.8);
  font-size: 14px;
  max-width: 460px;
  line-height: 1.6;
}
.cta-block button { background: white; color: var(--color-primary); }
.cta-block button:hover { background: rgba(255,255,255,0.9); }
/* Chiusura del risultato: l'azione gratuita (scarica il PDF) e' quella
   principale e sta dentro .cta-block; il confronto e' secondario e
   visivamente piu' leggero. Nata sul self-check con "Export PDF dei
   risultati" §5.4, qui perche' vale per tutti e quattro i tool. */
/* Selettore discendente, non `.cta-note` da solo: `.cta-block p` ha una classe
   piu' un tipo e vincerebbe su una classe sola, lasciando la nota della stessa
   dimensione del testo sopra. Deve essere piu' minuta: e' un'istruzione d'uso,
   non un argomento. */
.cta-block .cta-note {
  font-size: 12px;
  color: rgba(255,255,255,0.75);
  margin: 12px auto 0;
}
.cta-secondary {
  margin-top: 18px;
  padding: 22px 24px;
  text-align: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.cta-secondary h3 {
  margin: 0 0 8px;
  font-size: 15px;
  color: var(--color-primary);
  font-weight: 600;
}
.cta-secondary p {
  margin: 0 auto 16px;
  color: var(--color-muted);
  font-size: 14px;
  max-width: 460px;
}
.disclaimer {
  font-size: 12px;
  color: var(--color-muted);
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  line-height: 1.5;
}

/* --- MOBILE --- */
/* Anche questi erano ripetuti: .card e header.brand h1 su tre pagine,
   il numero grande su due (e su altman mancava del tutto). */
@media (max-width: 600px) {
  .card { padding: 8px 0 24px; }
  header.brand h1 { font-size: 20px; }
  .ratio-display,
  .result-value { font-size: 52px; }
}

/* ============================================================
   NOMI IN COMUNE CON assets/styles.css — da sapere
   Queste classi esistono in entrambi i fogli con definizioni
   diverse: btn-primary, btn-secondary, eyebrow, label, num, step.
   Esempio: .btn-primary qui è navy pieno, sul sito è teal;
   .step qui è un pannello che si mostra e si nasconde, sul sito
   è una tappa numerata dentro .steps.

   Oggi non si scontrano perché i due fogli non vengono mai
   caricati insieme: le pagine del sito hanno styles.css, quelle
   dei tool hanno questo. Si scontrerebbero il giorno in cui una
   pagina tool caricasse styles.css per riusarne un componente.
   Prima di farlo, rinominare le classi di uno dei due lati.
   ============================================================ */

/* Barra di navigazione del sito */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-primary);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.site-nav .site-nav-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.site-nav .site-nav-logo img { height: 44px; width: auto; display: block; }
.site-nav .site-nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}
.site-nav .site-nav-links a {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: color 0.18s ease;
}
.site-nav .site-nav-links a:hover { color: #ffffff; }
.site-nav .site-nav-links a.active {
  color: #ffffff;
  box-shadow: inset 0 -2px 0 var(--color-accent);
  padding-bottom: 3px;
}
.site-nav .site-nav-links a.nav-btn {
  background: var(--color-accent);
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.6em 1.2em;
  border-radius: 3px;
  border: 1.5px solid transparent;
  box-shadow: none;
  transition: background 0.18s ease;
}
.site-nav .site-nav-links a.nav-btn:hover { background: var(--color-primary-light); color: #ffffff; }
.site-nav .nav-dropdown { position: relative; display: inline-flex; align-items: center; }
.site-nav .nav-dropdown-toggle {
  font-family: inherit; font-size: 14px; font-weight: 500; letter-spacing: 0.01em;
  text-transform: none;
  color: rgba(255,255,255,0.85); background: none; border: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.site-nav .nav-dropdown-toggle:hover { color: #ffffff; }
.site-nav .nav-dropdown-toggle .caret { font-size: 0.7em; transition: transform 0.18s ease; }
.site-nav .nav-dropdown:hover .nav-dropdown-toggle .caret,
.site-nav .nav-dropdown:focus-within .nav-dropdown-toggle .caret { transform: rotate(180deg); }
.site-nav .nav-dropdown-menu {
  position: absolute; top: calc(100% + 14px); left: 0; min-width: 210px;
  background: #ffffff; border: 1px solid var(--color-border); border-radius: 3px;
  box-shadow: 0 18px 36px -20px rgba(0,0,0,0.45); padding: 8px 0;
  opacity: 0; visibility: hidden; transition: opacity 0.15s ease; z-index: 200;
}
.site-nav .nav-dropdown-menu::before { content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.site-nav .nav-dropdown:hover .nav-dropdown-menu,
.site-nav .nav-dropdown:focus-within .nav-dropdown-menu { opacity: 1; visibility: visible; }
.site-nav .nav-dropdown-menu a {
  display: block; padding: 9px 20px; font-size: 14px; font-weight: 500;
  color: var(--color-text); white-space: nowrap;
}
.site-nav .nav-dropdown-menu a:hover { background: var(--color-accent-light, #f4f7f9); color: var(--color-primary); }
.site-nav .nav-dropdown.open .nav-dropdown-menu { opacity: 1; visibility: visible; }
.site-nav .nav-dropdown.open .nav-dropdown-toggle .caret { transform: rotate(180deg); }

/* Hamburger (mobile) */
.site-nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.site-nav-toggle span { display: block; width: 24px; height: 2px; background: #fff; margin: 5px 0; transition: 0.2s; }

@media (max-width: 720px) {
  .site-nav-toggle { display: block; }
  .site-nav .site-nav-links {
    display: none;
    position: absolute; top: 76px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--color-primary);
    border-top: 1px solid rgba(255,255,255,0.10);
    padding: 6px 0 12px;
  }
  .site-nav .site-nav-links.open { display: flex; }
  .site-nav .site-nav-links > a { padding: 12px 24px; }
  .site-nav .site-nav-links a.active { box-shadow: none; padding-bottom: 12px; }
  .site-nav .site-nav-links a.nav-btn { margin: 10px 24px 0; justify-content: center; }
  .site-nav .nav-dropdown { display: block; padding: 0; }
  .site-nav .nav-dropdown-toggle { width: 100%; justify-content: space-between; padding: 12px 24px; }
  .site-nav .nav-dropdown-menu {
    position: static; opacity: 1; visibility: visible; display: none;
    background: transparent; border: 0; box-shadow: none; padding: 0 0 4px; min-width: 0;
  }
  .site-nav .nav-dropdown-menu::before { display: none; }
  .site-nav .nav-dropdown.open .nav-dropdown-menu,
  .site-nav .nav-dropdown:focus-within .nav-dropdown-menu { display: block; }
  .site-nav .nav-dropdown-menu a { color: rgba(255,255,255,0.85); padding: 8px 24px; }
}

/* Identificazione e rientro — nato da "07 - Generazione statica e trovabilità" §3.3.
   Chi arriva su un tool mediato da un assistente conversazionale non passa dalla
   homepage: la pagina deve dire in una riga di chi è e offrire la via di rientro.
   Il testo è CS-02, ripreso verbatim da chi-siamo.html. */
.tool-identity {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border, rgba(0,0,0,0.12));
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-muted, #5a6b78);
}
.tool-identity p { margin: 0 0 10px; }
.tool-identity .tool-identity-links { margin: 0; }
.tool-identity a { color: var(--color-accent, #1f7a78); text-decoration: none; }
.tool-identity a:hover { text-decoration: underline; }

/* Dentro il footer di un tool che ne ha gia' uno, il separatore lo da' il footer. */
.tool-footer .tool-identity { margin-top: 20px; padding-top: 0; border-top: 0; }