/* ============================================================
   Mappa Scuole GPS : holding page 2026→2027 ("Sportello Calmo")
   CSS autonomo: stesse variabili dell'app, senza l'app.
   Serve index.html (holding) + contatti/privacy/termini.
   ============================================================ */

@font-face { font-family: 'Hanken Grotesk'; font-weight: 400; font-display: swap;
  src: url('../assets/fonts/hanken-grotesk-400.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-weight: 600; font-display: swap;
  src: url('../assets/fonts/hanken-grotesk-600.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-weight: 700; font-display: swap;
  src: url('../assets/fonts/hanken-grotesk-700.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 500; font-display: swap;
  src: url('../assets/fonts/jetbrains-mono-500.woff2') format('woff2'); }

:root {
  --bg: #F6F3ED;
  --ink: #211C16;
  --accent: #B5551D;
  --accent-on-bg: #9C4913;
  --accent-soft: #F7E7D5;
  --muted: #746A5D;
  --line: #E2DBD0;
  --r: 12px;
  --font: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;
  --topbar-h: 56px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg);
}
a { color: var(--accent-on-bg); }

/* ---------- Pagine statiche (contatti, privacy, termini) ---------- */
body.page { overflow: auto; }
.page-wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: calc(var(--topbar-h) + 32px) 20px 64px;
}
.page-wrap h1 { font-size: 26px; letter-spacing: -0.01em; margin-bottom: 6px; }
.page-updated { font-family: var(--mono); font-size: 13px; color: var(--muted); margin-bottom: 28px; }
.page-wrap h2 { font-size: 19px; margin: 28px 0 8px; }
.page-wrap p, .page-wrap li { font-size: 16px; color: var(--ink); margin-bottom: 10px; }
.page-wrap ul { padding-left: 22px; margin-bottom: 14px; }
.page-wrap .note {
  background: var(--accent-soft);
  border-radius: var(--r);
  padding: 14px 16px;
  font-size: 15px;
}
.page-topbar {
  position: fixed; inset: 0 0 auto 0; height: var(--topbar-h); z-index: 40;
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.page-topbar a { text-decoration: none; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.brand-logo { width: 27px; height: 27px; display: block; flex: none; }
.page-footer {
  max-width: 680px;
  margin: 0 auto;
  padding: 24px 20px 48px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted);
}
.page-footer a { color: var(--muted); }
.page-footer a:hover { color: var(--accent-on-bg); }

/* ---------- Holding (index.html) ---------- */
body.holding { display: flex; flex-direction: column; min-height: 100%; overflow: auto; }
.holding-main {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  max-width: 560px;
  margin: 0 auto;
  padding: 48px 20px;
  text-align: center;
}
.holding-logo { width: 64px; height: 64px; margin-bottom: 20px; }
.holding-main h1 { font-size: 28px; letter-spacing: -0.01em; margin-bottom: 8px; }
.holding-kicker {
  font-family: var(--mono); font-size: 13px; color: var(--muted);
  margin-bottom: 24px;
}
.holding-main p { color: var(--ink); margin-bottom: 12px; }
.holding-main .note {
  background: var(--accent-soft);
  border-radius: var(--r);
  padding: 14px 16px;
  font-size: 15px;
  margin-top: 16px;
  text-align: left;
}
.holding-footer {
  border-top: 1px solid var(--line);
  padding: 20px;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}
.holding-footer a { color: var(--muted); }
.holding-footer a:hover { color: var(--accent-on-bg); }