/* SunBiza — stili condivisi tra tutte le pagine: font, variabili colore,
   header, navigazione (desktop + drawer mobile) e footer. Le pagine
   mantengono nel proprio <style> solo le regole specifiche del loro
   contenuto.

   Direzione grafica "Modernist" (v3): flat, angoli vivi (0px), separatori a
   bordo netto invece di ombre morbide, un solo accento cromatico invece del
   gradiente tramonto. Origine: progetto Claude Design "SunBiza app design
   directions", file "SunBiza - Sito Web.html".

   I nomi delle variabili restano quelli storici (--coral, --pink, --navy...)
   per non dover toccare ogni singolo riferimento nelle pagine — è il VALORE
   che cambia, il ruolo semantico resta lo stesso (--coral = azione primaria,
   --slate = testo attenuato, ecc). Ogni valore qui sotto è stato verificato
   via calcolo di contrasto WCAG (non a occhio): l'arancio vivo del mockup
   originale (#ec3013) da solo non supera 4.5:1 come testo — qui sotto è
   sostituito da una tonalità più scura della stessa famiglia (#ae1800),
   che supera 6.4:1 su sfondo pagina. */
@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url("fonts/archivo-vietnamese.woff2") format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url("fonts/archivo-latin-ext.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url("fonts/archivo-latin.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --coral:#ae1800; --pink:#7c1405; --magenta:#7c1405;
  --sea1:#847f7e; --sea2:#201e1d; --cream:#f3f2f2; --navy:#201e1d; --slate:#5c5957;
  --good:#166B45; --warn:#A8431F;
  --surface:#eae9e9;
  --accent-vivid:#ec3013;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:'Archivo', system-ui, sans-serif; color:var(--navy); background:var(--cream);}
h1, h2, h3, h4{font-weight:800; letter-spacing:-0.01em;}
a{color:inherit;}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px;}

/* header */
header{position:sticky; top:0; background:rgba(243,242,242,0.92); backdrop-filter:blur(6px); border-bottom:2px solid var(--sea1); z-index:100;}
.headbar{display:flex; align-items:center; justify-content:space-between; padding:14px 24px; gap:16px;}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:20px; text-decoration:none; color:var(--navy); flex-shrink:0;}
.brand .badge{width:36px; height:36px; overflow:hidden; flex-shrink:0; display:block;}
.brand .badge img{display:block; width:100%; height:100%;}
.brand span.pink{color:var(--pink);}
nav.mainnav{display:flex; gap:22px; font-size:14.5px; font-weight:600;}
nav.mainnav a{text-decoration:none; color:var(--navy); opacity:0.8;}
nav.mainnav a.active, nav.mainnav a:hover{opacity:1; color:var(--coral);}
.cta-btn{background:var(--coral); color:#fff; padding:9px 18px; font-size:14px; font-weight:800; text-decoration:none; white-space:nowrap; border:none; cursor:pointer;}
.cta-btn:hover{background:var(--pink);}

/* hamburger toggle — hidden on desktop, shown under the mobile breakpoint below */
.menu-toggle{display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:38px; height:38px; border:none; background:none; cursor:pointer; padding:0; flex-shrink:0;}
.menu-toggle span{display:block; width:22px; height:2px; background:var(--navy); transition:transform .2s ease, opacity .2s ease;}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* mobile nav drawer */
.mobile-nav-backdrop{display:none; position:fixed; inset:0; background:rgba(32,30,29,0.35); z-index:150; opacity:0; transition:opacity .2s ease;}
.mobile-nav-backdrop.open{display:block; opacity:1;}
.mobile-nav{position:fixed; top:0; right:0; height:100%; width:min(80vw,320px); background:var(--cream); border-left:2px solid var(--sea1); z-index:200; padding:18px 22px; display:flex; flex-direction:column; gap:2px; transform:translateX(100%); transition:transform .25s ease;}
.mobile-nav.open{transform:translateX(0);}
.mobile-nav a{display:block; padding:14px 4px; font-size:16px; font-weight:600; text-decoration:none; color:var(--navy); border-bottom:1px solid var(--sea1);}
.mobile-nav a.active{color:var(--coral);}
.mobile-nav .cta-btn{margin-top:16px; text-align:center; border-bottom:none;}
.mobile-nav-close{align-self:flex-end; border:none; background:none; font-size:28px; line-height:1; color:var(--slate); cursor:pointer; margin-bottom:4px; padding:6px;}

@media (max-width:800px){
  nav.mainnav, .headbar > .cta-btn{display:none;}
  .menu-toggle{display:flex;}
}

/* page head (guida, programma, spese) */
.page-head{padding:40px 24px 8px;}
.page-head h1{font-size:32px; margin-bottom:8px;}
.page-head p{color:var(--slate); font-size:15px; max-width:640px;}
@media (max-width:640px){
  .page-head{padding:28px 16px 6px;}
}

/* footer */
footer{background:var(--navy); color:#b8b5b4; padding:36px 24px; font-size:12.5px; text-align:center;}
footer .disclosure{max-width:640px; margin:0 auto 10px; line-height:1.6;}
footer .disclosure a{color:#ffc4b8;}
footer .brand-foot{color:#fff; font-weight:800; margin-bottom:10px;}