/* PERFORMA — sistema visivo unico. 1 settembre 2026.
 *
 * Caricato PER ULTIMO in ogni pagina di contenuto, cosi' a parita' di
 * specificita' vince questo. Un foglio solo e non 47 modifiche a mano: 47
 * modifiche sono 47 occasioni di rompere qualcosa, e un foglio si toglie con
 * una riga il giorno che una pagina non regge.
 *
 * TOCCA SOLO L IMPAGINAZIONE. Nessuna parola, nessuna cifra, nessun colore di
 * marca cambiato: la palette e' quella gia' approvata (navy 2F3A54, verde
 * 00C19E) e qui viene solo applicata dove mancava.
 *
 * TRE LIVELLI, dichiarati dalla classe sul body:
 *   .pf-service  solo barra e tipografia
 *   .pf-content  + colonna di lettura, spaziatura, tabelle   (articoli)
 *   .pf-report   + badge di provenienza                       (report-dati)
 */

/* ── 1. LA BARRA. Vale per tutte, servizio compreso. ─────────────────────── */
body[class*="pf-"]{--pf-head:66px}
body[class*="pf-"]{padding-top:var(--pf-head)}
html:has(body[class*="pf-"]){scroll-padding-top:calc(var(--pf-head) + 14px)}

body[class*="pf-"] .site-header,
body[class*="pf-"] .site-header.scrolled{
  background:#2F3A54;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  padding:13px 0;z-index:300;
  border-bottom:1px solid rgba(255,255,255,.12);
  box-shadow:0 2px 16px rgba(15,26,46,.22)}
/* Il tema chiaro della barra scrollata rimetteva il testo navy: su fondo navy
   sarebbe invisibile. Chiaro in tutti e due gli stati. */
body[class*="pf-"] .site-header .brand-text,
body[class*="pf-"] .site-header.scrolled .brand-text,
body[class*="pf-"] .site-header .nav-links a,
body[class*="pf-"] .site-header.scrolled .nav-links a,
body[class*="pf-"] .site-header .nav-right .link,
body[class*="pf-"] .site-header.scrolled .nav-right .link,
body[class*="pf-"] .site-header .mobile-toggle{color:#F4F6FA}
body[class*="pf-"] .site-header .nav-links a:hover,
body[class*="pf-"] .site-header.scrolled .nav-links a:hover{color:#00C19E}
body[class*="pf-"] .site-header .brand-mark,
body[class*="pf-"] .site-header.scrolled .brand-mark{color:#2F3A54;background:#00C19E}

/* ── 2. TIPOGRAFIA. Anche sulle pagine di servizio. ──────────────────────── */
body[class*="pf-"]{font-family:Inter,system-ui,-apple-system,sans-serif}
body[class*="pf-"] h1,body[class*="pf-"] h2,body[class*="pf-"] h3{
  font-family:'Plus Jakarta Sans',Inter,sans-serif;letter-spacing:-.015em}

/* ── 3. COLONNA DI LETTURA. Solo contenuto, non servizio. ────────────────── */
/* Si esclude cio' che deve restare largo: eroi, intestazioni d articolo,
   bande CTA, griglie. Il resto e' prosa e va in colonna. */
body.pf-content main section:not([class*="hero"]):not([class*="header"]):not([class*="cta"]):not([class*="band"]) > .container,
body.pf-report  main section:not([class*="hero"]):not([class*="header"]):not([class*="cta"]):not([class*="band"]) > .container{
  max-width:70ch;margin-left:auto;margin-right:auto;
  padding-left:24px;padding-right:24px}

body.pf-content main p,body.pf-report main p{line-height:1.72;margin:0 0 20px}
body.pf-content main li,body.pf-report main li{line-height:1.7}

/* ── 4. SPAZIATURA. Lo stacco sta PRIMA del titolo: e' li' che l occhio
       decide che e' cominciata un altra cosa. Si usa il margine dell H2 e non
       il padding della sezione, perche' le pagine vecchie hanno strutture
       diverse e il padding finirebbe su contenitori che non esistono ovunque. */
/* `:not(.pf-first)` non e' un vezzo: aggiunge una pseudo-classe e porta la
   specificita' a (0,2,3), abbastanza per battere le regole di pagina tipo
   `.content .container>h2{margin:3rem 0 1rem}` — che valgono (0,2,1) e
   vincevano. E 3rem fa esattamente 48px, quindi il difetto somigliava a quello
   del giro prima: due cause diverse, stesso numero sullo schermo. */
body.pf-content main h2:not(.pf-first),
body.pf-report  main h2:not(.pf-first){margin-top:104px;margin-bottom:22px}
/* IL PRIMO TITOLO PORTA UNA CLASSE, non si deduce dalla struttura.
   Il selettore per posizione sembrava giusto e prendeva TUTTI gli h2: queste
   pagine hanno una sezione di contenuto sola, quindi ogni titolo risultava
   "nella prima" e riceveva 48px invece di 104. Misurato: max 48 su tutte. */
body.pf-content main h2.pf-first,
body.pf-report  main h2.pf-first{margin-top:48px}
body.pf-content main h3,body.pf-report main h3{margin-top:44px;margin-bottom:12px}

/* ── 5. TABELLE. Stesso asse sinistro del testo, scarto gentile a destra. ── */
.pf-tablewrap{width:calc(100% + 132px);max-width:calc(100vw - 48px);
  margin-top:32px;margin-bottom:32px;overflow-x:auto;
  border:1px solid #E5E2DC;border-radius:14px;background:#fff}
.pf-tablewrap table{border-collapse:collapse;width:100%;min-width:0;font-size:15px}
.pf-tablewrap th,.pf-tablewrap td{padding:11px 10px;border-bottom:1px solid #E5E2DC;
  text-align:right}
/* NIENTE nowrap qui. Sulla pagina borough la prima colonna e' un NOME e non
   va spezzato; in queste tabelle e' un etichetta di prosa ("Prime central
   London", "Reddito tassato nel UK") e tenerla su una riga sola allargava la
   tabella fino a farla scorrere. Il nowrap resta dov e' giusto, nel foglio
   della pagina borough. */
.pf-tablewrap th:first-child,.pf-tablewrap td:first-child{text-align:left;
  padding-right:18px}
.pf-tablewrap thead th{background:#FBFAF7;font-size:12.5px;text-transform:uppercase;
  letter-spacing:.05em;color:#6B7280;white-space:normal;line-height:1.25;vertical-align:bottom}
.pf-tablewrap td{font-variant-numeric:tabular-nums}
@media (max-width:900px){ .pf-tablewrap{width:100%} }

/* ── 6. BADGE. Solo .pf-report, e solo dove la pagina gia' dichiara fonte e
       data: riaffermano, non aggiungono una garanzia nuova. ──────────────── */
.pf-badge{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;padding:5px 11px;border-radius:22px;
  border:1px solid;white-space:nowrap;margin-bottom:10px}
.pf-badge[data-category="verified"]{color:#0B6E4F;background:#E8F6F0;border-color:#B7E2D2}
.pf-badge[data-category="derived"]{color:#8A5A00;background:#FDF4E3;border-color:#EFD9A8}
.pf-badge[data-category="commentary"]{color:#3D4A8A;background:#EEF0FB;border-color:#C9CFEE}

/* ── 7. CTA coerenti col marchio. ────────────────────────────────────────── */
body[class*="pf-"] .btn-primary,body[class*="pf-"] .mini-cta{
  background:#2F3A54;color:#fff;border-color:#2F3A54}
body[class*="pf-"] .btn-primary:hover,body[class*="pf-"] .mini-cta:hover{
  background:#00C19E;border-color:#00C19E;color:#0B2B24}

@media (max-width:760px){
  body.pf-content main h2:not(.pf-first),
  body.pf-report  main h2:not(.pf-first){margin-top:66px}
  body.pf-content main h2.pf-first,
  body.pf-report  main h2.pf-first{margin-top:32px}
}