/* xFlowy — sito istituzionale. Sobrio, leggibile, due temi. */

:root {
  color-scheme: light dark;
  --fondo: #f4f7f6;
  --carta: #ffffff;
  --inchiostro: #10312f;
  --testo: #223836;
  --tenue: #5f7370;
  --linea: #7f9793;
  --accento: #1f7a6d;
  --accento-scuro: #155e54;
  --accento-tenue: #dcebe7;
  --codice-fondo: #0f2a28;
  --codice-testo: #d9ece8;
  --display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --corpo: "IBM Plex Sans", "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0e1a19;
    --carta: #142523;
    --inchiostro: #e8f0ee;
    --testo: #cfdcd9;
    --tenue: #91a5a1;
    --linea: #5e7b76;
    --accento: #4fb39f;
    --accento-scuro: #7fcbbb;
    --accento-tenue: #1c3834;
    --codice-fondo: #0a1615;
    --codice-testo: #cfe3de;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--testo);
  font-family: var(--corpo);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--display);
  color: var(--inchiostro);
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.08; font-weight: 700; max-width: 22ch; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 700; margin-bottom: 1.5rem; }
h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.4rem; }
p { margin: 0 0 1rem; max-width: 68ch; }
a { color: var(--accento-scuro); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accento); outline-offset: 3px; }
strong { color: var(--inchiostro); font-weight: 500; }
em { font-style: italic; }

.salta {
  position: absolute; left: -999px; top: 0;
  background: var(--inchiostro); color: var(--fondo); padding: 0.5rem 1rem;
}
.salta:focus { left: 1rem; top: 1rem; z-index: 10; }

/* Testata */
.testata {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem clamp(1rem, 4vw, 3rem);
  border-bottom: 1px solid color-mix(in srgb, var(--linea) 35%, transparent);
}
.marchio {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--display); font-weight: 700; font-size: 1.15rem;
  color: var(--inchiostro); text-decoration: none;
}
.testata nav { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.testata nav a { color: var(--testo); text-decoration: none; font-size: 0.95rem; }
.testata nav a:hover { color: var(--inchiostro); text-decoration: underline; }

/* Bottoni */
.bottone {
  display: inline-block; padding: 0.65rem 1.1rem; border-radius: 6px;
  font-weight: 500; text-decoration: none; font-size: 0.95rem;
  border: 1px solid transparent;
}
.bottone-primario { background: var(--accento); color: #fff; }
.bottone-primario:hover { background: var(--accento-scuro); color: #fff; }
.bottone-secondario { border-color: var(--linea); color: var(--inchiostro) !important; }
.bottone-secondario:hover { background: var(--accento-tenue); text-decoration: none !important; }
.bottone-testo { padding-left: 0.25rem; color: var(--accento-scuro); }

/* Apertura */
.apertura {
  padding: clamp(3rem, 8vw, 6rem) clamp(1rem, 4vw, 3rem) 2rem;
  max-width: 1100px; margin: 0 auto;
}
.sopratitolo {
  font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accento-scuro); margin-bottom: 1.2rem;
}
.sottotitolo { font-size: 1.15rem; max-width: 60ch; margin: 1.4rem 0 1.8rem; }
.azioni { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-bottom: 3rem; }

.schema { margin: 0; }
.schema svg { width: 100%; height: auto; display: block; font-family: var(--corpo); }
.schema .nodo rect, .schema .nodo path { fill: var(--carta); stroke: var(--linea); stroke-width: 1.5; }
.schema .nodo text { fill: var(--inchiostro); font-size: 13px; text-anchor: middle; dominant-baseline: middle; }
.schema .nodo-avvio rect { stroke: var(--accento); }
.schema .nodo-decisione path { stroke: #b08a2e; }
.schema .nodo-attivita rect { stroke: #6b5bb5; }
.schema .porta { fill: var(--tenue); font-size: 11px; font-family: var(--mono); }
.schema figcaption { font-size: 0.85rem; color: var(--tenue); margin-top: 0.6rem; }

/* Blocchi */
.blocco { padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 4vw, 3rem); max-width: 1100px; margin: 0 auto; }
.blocco-stretto { max-width: 820px; }
.blocco-scuro {
  max-width: none;
  background: var(--inchiostro); color: var(--fondo);
}
.blocco-scuro > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
.blocco-scuro h2, .blocco-scuro h3, .blocco-scuro strong { color: var(--fondo); }
.blocco-scuro h2 { margin-bottom: 1.5rem; }
.blocco-scuro p { color: color-mix(in srgb, var(--fondo) 85%, var(--inchiostro)); }
@media (prefers-color-scheme: dark) {
  .blocco-scuro { background: #061211; }
  /* Sull'accento chiaro del tema scuro il bianco non regge il contrasto. */
  .bottone-primario, .bottone-primario:hover { color: #06201c; }
}

.griglia { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.griglia article {
  background: var(--carta); border: 1px solid color-mix(in srgb, var(--linea) 35%, transparent);
  border-radius: 10px; padding: 1.4rem 1.5rem;
}
.griglia article p { margin: 0; font-size: 0.97rem; }

.colonne { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.promessa {
  border-left: 3px solid var(--accento); padding-left: 0.9rem; font-size: 0.95rem;
}

.codice {
  margin: 2.5rem auto 0; background: var(--codice-fondo); color: var(--codice-testo);
  border-radius: 8px; padding: 1.1rem 1.3rem; overflow-x: auto;
  font-family: var(--mono); font-size: 0.86rem; line-height: 1.6;
}
.codice .c { color: var(--accento); }

.principi { display: grid; gap: 1.5rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin: 0; }
.principi div { border-top: 1px solid color-mix(in srgb, var(--linea) 45%, transparent); padding-top: 1rem; }
.principi dt { font-family: var(--display); font-weight: 700; color: var(--inchiostro); font-size: 1.05rem; margin-bottom: 0.35rem; }
.principi dd { margin: 0; font-size: 0.97rem; }

.pie {
  border-top: 1px solid color-mix(in srgb, var(--linea) 35%, transparent);
  padding: 1.5rem clamp(1rem, 4vw, 3rem); font-size: 0.85rem; color: var(--tenue);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.pie p { margin: 0; }
.pie a { color: var(--tenue); }

@media (max-width: 640px) {
  .testata { flex-direction: column; align-items: flex-start; }
  .schema { overflow-x: auto; }
  .schema svg { min-width: 640px; }
}