/* Stile comune alle pagine di aidufficio.it: font ospitati qui (nessuna richiesta a Google), colori, intestazione e piè di pagina.
   Materiali di una scrivania: carta, penna blu ed evidenziatore giallo. */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/bricolage-grotesque-500-800.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-400-600.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-500.woff2) format('woff2');
}

:root {
  --paper: #f4f6fb;
  --surface: #ffffff;
  --ink: #161a2b;
  --muted: #586079;
  --line: #dce0eb;
  --biro: #2340c9;
  --biro-soft: #e5e9fb;
  --marker: #ffd84d;
  --marker-ink: #161a2b;
  --marker-hl: #ffd84d;
  --ok: #1d7a4f;
  --warn: #9a5b00;

  --f-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-body: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --r: 14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0f121b; --surface: #171b28; --ink: #e9ebf3; --muted: #9ba2bb;
    --line: #2a3046; --biro: #93a5ff; --biro-soft: #1f2742; --marker: #f0cc3c;
    --marker-ink: #161a2b; --marker-hl: rgba(240, 204, 60, .38); --ok: #5fcf98; --warn: #f2b45a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0f121b; --surface: #171b28; --ink: #e9ebf3; --muted: #9ba2bb;
  --line: #2a3046; --biro: #93a5ff; --biro-soft: #1f2742; --marker: #f0cc3c;
  --marker-ink: #161a2b; --marker-hl: rgba(240, 204, 60, .38); --ok: #5fcf98; --warn: #f2b45a;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--biro); }
.wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Intestazione */
.brand {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  padding-block: 20px 0;
  font-family: var(--f-display); font-weight: 700; font-size: 18px; letter-spacing: -0.01em;
}
.brand a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.brand-mark { width: 26px; height: 26px; flex: none; }
.brand-name { white-space: nowrap; }
.brand small {
  font-family: var(--f-body); font-weight: 400; font-size: 13px; color: var(--muted);
  border-left: 1px solid var(--line); padding-left: 10px;
}
@media (max-width: 480px) { .brand small { flex-basis: 100%; border-left: 0; padding-left: 0; } }

/* Pulsanti */
.btn {
  appearance: none; border: 1px solid var(--biro); background: var(--biro); color: var(--surface);
  font: 600 14.5px var(--f-body); padding: 10px 16px; border-radius: 10px; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
}
.btn.ghost { background: transparent; color: var(--biro); }
.btn:hover { filter: brightness(1.08); }
.btn:focus-visible { outline: 2px solid var(--biro); outline-offset: 2px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* Pagine di testo (ringraziamento, privacy) */
.page { max-width: 720px; padding-block: 40px 56px; }
.page h1 {
  font-family: var(--f-display); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05;
  font-size: clamp(32px, 5vw, 48px); margin: 0 0 16px; text-wrap: balance;
}
.page h1 em {
  font-style: normal;
  background: linear-gradient(transparent 58%, var(--marker-hl) 58%, var(--marker-hl) 92%, transparent 92%);
}
.page h2 { font-family: var(--f-display); font-weight: 700; font-size: 21px; letter-spacing: -0.015em; margin: 32px 0 8px; }
.page p, .page li { color: var(--ink); }
.page .lead { font-size: 18px; color: var(--muted); }
.page ul, .page ol { padding-left: 22px; }
.page li { margin-bottom: 6px; }
.page .meta { font-size: 13.5px; color: var(--muted); }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 24px; margin: 24px 0;
}
.card ol { margin: 0; }
.steps li::marker { font-family: var(--f-mono); color: var(--biro); }

/* Piè di pagina */
.site-footer { border-top: 1px solid var(--line); padding-block: 22px 32px; font-size: 13px; color: var(--muted); }
.site-footer p { margin: 0 0 6px; max-width: 80ch; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; }
.site-footer a { color: var(--muted); }