/* Base condivisa da tutte le pagine: variabili, reset, testata, pulsanti, footer.
   Le regole specifiche di una pagina stanno in index.css / patrocinio.css / privacy.css. */
:root{
  --night:#0e1a2b;        /* blu notte, base */
  --night-2:#16273d;      /* blu un po' più chiaro */
  --ink:#0a121d;          /* quasi nero per testi su chiaro */
  --paper:#f5f3ee;        /* avorio caldo per sezioni chiare */
  --paper-2:#ece8df;
  --amber:#d8a24a;        /* la "luce accesa": accento caldo */
  --amber-soft:#e9c98a;
  --amber-dark:#8a5e13;   /* stesso accento, scurito per contrasto AA su fondo avorio */
  --mist:#9fb0c4;         /* testo tenue su scuro */
  --mist-ink:#6b7686;     /* testo tenue su fondo chiaro */
  --line:#27384e;         /* filetti su scuro */
  --line-light:#e2ddd2;   /* filetti su chiaro */
  --radius:4px;
  --maxw:1080px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color:var(--ink);
  background:var(--night);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:Georgia,'Times New Roman',serif;
  font-weight:600;
  line-height:1.15;
  letter-spacing:-0.01em;
}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- accessibilità ---------- */
.skip-link{position:absolute;left:12px;top:-60px;z-index:200;background:var(--amber);color:var(--ink);padding:10px 16px;border-radius:var(--radius);font-weight:600;text-decoration:none}
.skip-link:focus{top:12px}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 4px var(--amber)} /* doppio anello: si vede sia su fondo scuro che su avorio */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ---------- testata ---------- */
header.top{
  position:sticky;top:0;z-index:50;
  background:rgba(14,26,43,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;height:64px}
/* Il brand non deve mai allargare la pagina: può restringersi (min-width:0) e, se proprio
   non ci sta, si tronca con i puntini invece di spingere fuori schermo Contatti e menu. */
.brand{font-family:Georgia,serif;color:#fff;font-size:1.1rem;letter-spacing:.02em;text-decoration:none;white-space:nowrap;display:flex;align-items:baseline;min-width:0}
.brand-name{overflow:hidden;text-overflow:ellipsis}
.brand-sep{color:var(--amber);margin:0 8px}
/* Sotto i 640px i due nomi non stanno su una riga accanto a Contatti e menu: si impilano
   su due righe volute, una per avvocato. Senza questo il brand (nowrap) allargava la pagina
   oltre lo schermo del telefono. Il carattere scala con la larghezza fino ai 320px. */
@media(max-width:40em){
  .brand{flex-direction:column;align-items:flex-start;font-size:clamp(.75rem,3.9vw,.95rem);line-height:1.3}
  .brand-name{max-width:100%}
  .brand-sep{display:none}
}
/* Telefoni da 320px (i più stretti in circolazione): si recupera ogni pixel perché
   "Avv. Giovanni Sammarco" resti intero invece di finire troncato. */
@media(max-width:22em){
  .brand{letter-spacing:0}
}

.top .back{color:var(--mist);text-decoration:none;font-size:.9rem;white-space:nowrap;flex-shrink:0}
.top .back:hover{color:#fff}
@media(max-width:40em){.top .back{font-size:.85rem}}

/* ---------- pulsanti ---------- */
.btn-primary{
  background:var(--amber);color:var(--ink);padding:14px 26px;border-radius:var(--radius);
  text-decoration:none;font-weight:600;transition:transform .15s,background .2s;
}
.btn-primary:hover{background:var(--amber-soft);transform:translateY(-1px)}
/* Bordo in --mist e non in --line: sul blu notte il filetto scuro aveva contrasto ~1,5:1
   e il pulsante secondario sembrava testo sciolto (minimo per un controllo: 3:1). */
.btn-ghost{
  border:1px solid var(--mist);color:#fff;padding:14px 26px;border-radius:var(--radius);
  text-decoration:none;font-weight:500;transition:border-color .2s;
}
.btn-ghost:hover{border-color:var(--amber)}

/* ---------- footer ---------- */
/* padding-bottom 96px: lascia spazio sotto l'ultima riga perché la bolla "Aiuto?" fissa in
   basso a destra non copra le partite IVA a fine pagina. Corpi ≥ 14px. */
footer.foot{background:var(--night);color:var(--mist);padding:40px 0 96px;border-top:1px solid var(--line)}
.foot .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;font-size:.9rem}
.foot a{color:var(--mist);text-decoration:none}
.foot a:hover{color:#fff}
.foot .wrap.foot-note{padding-top:0;padding-bottom:6px;font-size:.875rem;color:var(--mist);display:block}
.foot .wrap.foot-note-last{padding-bottom:14px}
@media(max-width:600px){.foot .wrap{flex-direction:column;align-items:flex-start}}