/* =========================================================
   SNSI 2026 — base: variabili, reset, tipografia, utilità
   Versione chiara: base bianca, nero solo per hero e footer.
   Cambiando le variabili qui sotto cambia tutto il sito.
   ========================================================= */
:root {
  /* colori */
  --yellow: #F5C800;
  --yellow-d: #C9A200;
  --yellow-soft: #FFF6CC;
  --blue: #0077C8;
  --blue-d: #005FA0;
  --blue-soft: #E8F3FB;
  --blue-light: #4DB8FF;
  --grey: #6B6B6B;
  --black: #0A0A0A;
  --ink: #1B1B1B;
  --ink-2: #3A3A3A;
  --muted: #5F6368;
  --white: #FFFFFF;
  --off: #F5F5F2;
  --line: #E4E4DF;
  --danger: #C62828;
  --success: #1B7F4B;

  /* tipografia */
  --ff-h: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --ff-b: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --track: .14em;          /* spaziatura delle scritte in maiuscolo */

  /* misure */
  --pad: clamp(16px, 5vw, 56px);
  --maxw: 1240px;
  --hdr: 70px;      /* altezza totale dell'header fisso (barra + eventuale barra servizi) */
  --hdr-bar: 70px;  /* barra principale con logo e menu */
  --top: 0px;       /* barra servizi in alto (solo desktop) */
  --ease: cubic-bezier(.25, .46, .45, .94);
  --shadow: 0 14px 30px -20px rgba(0, 0, 0, .35);
}

/* alfabeti non coperti da Barlow */
html[lang="ru"] { --ff-h: "Roboto Condensed", "Arial Narrow", sans-serif; --ff-b: "Roboto", system-ui, sans-serif; }
html[lang="ar"], html[lang="fa"] { --ff-h: "Vazirmatn", system-ui, sans-serif; --ff-b: "Vazirmatn", system-ui, sans-serif; --track: 0; }
html[lang="ja"] { --ff-h: "Barlow Condensed", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif; --ff-b: "Barlow", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif; --track: .04em; }
html[lang="ko"] { --ff-h: "Barlow Condensed", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; --ff-b: "Barlow", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; --track: .04em; }
html[lang="zh-Hans"] { --ff-h: "Barlow Condensed", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif; --ff-b: "Barlow", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif; --track: .04em; }
html[lang="zh-Hant"] { --ff-h: "Barlow Condensed", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif; --ff-b: "Barlow", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif; --track: .04em; }

/* reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr) + 16px); }
body {
  font-family: var(--ff-b); font-size: 1.0625rem; line-height: 1.65; color: var(--ink-2); background: var(--white);
  -webkit-font-smoothing: antialiased; overflow-x: hidden; min-height: 100vh; display: flex; flex-direction: column;
}
main { flex: 1; outline: none; }
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
ul, ol { list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

h1, h2, h3, h4, h5 { font-family: var(--ff-h); font-weight: 700; line-height: 1.05; color: var(--ink); text-wrap: balance; }

/* testi in maiuscolo condensato: nelle lingue senza maiuscole niente spaziatura e interlinea più ampia */
html:is([lang="ja"], [lang="ko"], [lang^="zh"], [lang="ar"], [lang="fa"]) :is(h1, h2, h3, .h2) { line-height: 1.3; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.wrap--narrow { max-width: 860px; }

/* ---------- titoli ed etichette (come il bozzetto) ---------- */
.h2 { font-family: var(--ff-h); font-weight: 700; text-transform: uppercase; line-height: .95; letter-spacing: .005em; color: var(--ink); font-size: clamp(2.1rem, 5.5vw, 3.4rem); }
.h2 .b { color: var(--blue); }
.h2 .mark { background: linear-gradient(transparent 58%, var(--yellow) 58%); padding: 0 .08em; }
.label {
  display: inline-flex; align-items: center; gap: .6rem; margin-bottom: .9rem;
  font-family: var(--ff-h); font-size: .82rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
}
.label::before { content: ""; width: 24px; height: 2px; background: var(--yellow); flex: none; }
.label--blue::before { background: var(--blue); }
.label--light { color: rgba(255, 255, 255, .75); }
.lead { font-size: 1.12rem; color: var(--ink-2); max-width: 46ch; }
html:is([lang="ja"], [lang="ko"], [lang^="zh"], [lang="ar"], [lang="fa"]) :is(.label, .eyebrow) { letter-spacing: var(--track); }

/* occhiello dei contenuti migrati: stesso stile dell'etichetta */
.eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--ff-h); font-size: .82rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--yellow); flex: none; }
.eyebrow--block { display: flex; margin-bottom: .1rem; }

/* ---------- testo ricco (contenuti dall'editor) ---------- */
.prose { color: var(--ink-2); overflow-wrap: anywhere; }
/* "SNSI" e "MySNSI App" nei testi normali: un poco più spessi (span aggiunto da View::brand); nei titoli e nei grassetti restano come sono */
:where(p, li, dd, td, figcaption, label, small) > .brand { font-weight: 600; }
.prose > * + * { margin-top: .9em; }
.prose h2 { font-size: clamp(1.9rem, 4.6vw, 2.9rem); text-transform: uppercase; line-height: .98; }
.prose h3 { font-size: clamp(1.45rem, 3vw, 1.9rem); text-transform: uppercase; line-height: 1; }
.prose h4 { font-size: 1.3rem; text-transform: uppercase; }
.prose h5 { font-size: 1.1rem; }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: .7em; }
.prose a { color: var(--blue); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { color: var(--blue-d); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose ul, .prose ol { padding-inline-start: 1.3em; }
.prose ul { list-style: square; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: .35em; }
.prose li::marker { color: var(--yellow-d); }
.prose blockquote { border-inline-start: 4px solid var(--yellow); background: var(--yellow-soft); padding: 1rem 1.2rem; }
.prose hr { border: 0; border-top: 1px solid var(--line); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prose table { width: 100%; border-collapse: collapse; font-size: .97rem; }
.prose th, .prose td { padding: .7rem .8rem; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
.prose th { color: var(--ink); font-weight: 600; background: var(--off); }

/* ---------- utilità ---------- */
.accent-line { width: 56px; height: 3px; border: 0; background: var(--yellow); margin: .9rem 0 1.1rem; }
.muted { color: var(--muted); }
.anchor { display: block; position: relative; top: calc(-1 * var(--hdr)); visibility: hidden; height: 0; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.link-btn { padding: 0; color: inherit; font-size: inherit; text-decoration: underline; text-underline-offset: 3px; }
.link { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--ff-h); font-size: .9rem; font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; color: var(--blue); }
.link:hover { color: var(--blue-d); }
.skip-link { position: fixed; top: -100px; inset-inline-start: 12px; z-index: 100; background: var(--yellow); color: var(--black); padding: .7rem 1rem; font-weight: 600; }
.skip-link:focus { top: 12px; }

/* icone */
.icon { width: 20px; height: 20px; flex: none; }
.icon--xs { width: 14px; height: 14px; }
.icon--sm { width: 16px; height: 16px; }

/* animazioni in entrata (solo con JS attivo) */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* a capo per le lingue CJK */
html[lang="ja"] { word-break: auto-phrase; line-break: strict; }
html[lang="ko"] { word-break: keep-all; }
html[lang^="zh"] { line-break: strict; }

/* <picture> trasparente al layout: gli stili restano sull'<img> */
picture { display: contents; }
picture > source { display: none; }