/* Enavia: token condivisi da tutte le pagine di enavia.it (home, /ogma, /privacy, /termini).
   Palette ufficiali: logo Enavia (Jet Black #182524, Copper #a67d43) e Ogma UI di Simona
   (brand, teal = rame, gray, night). Un colore nuovo si aggiunge qui, mai nella pagina. */
:root{
  --jet:#182524;            /* Jet Black, logo Enavia, brand-950 */
  --rame:#a67d43;           /* Copper, teal-500 */
  --rame-scuro:#8f6638;     /* teal-600, hover */
  --rame-testo:#8f6638;     /* rame per testo piccolo: teal-600 su chiaro, teal-300 su scuro (AA) */
  --chiaro:#f5f8f7;         /* brand-50, testo sui pulsanti rame */
  --sfondo:#ffffff;
  --campo:#f7f9f9;          /* gray-50: superfici, card, campi */
  --bordo:#c2caca;          /* gray-300 */
  --testo:#2c3636;          /* gray-800 */
  --titolo:#1b2222;         /* gray-900 */
  --nota:#5a6262;           /* gray-500 scurito per AA */
  --segnaposto:#6e6e6e;     /* gray-600 */
  --errore:#ef4444;         /* error-500 */
  --piede:#2c3636;          /* gray-800 */
  --logo:#182524;
  --ombra:0 20px 25px rgba(24,37,36,.2);   /* Shadow/L di Simona */
  --serif:"Noto Serif Display",Georgia,serif;
  --corpo:Nunito,system-ui,sans-serif;
  --ui:"Kulim Park",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --sfondo:#121c1b; --campo:#182524; --bordo:#263937; --testo:#f0f3f3; --titolo:#f7f9f9;
  --nota:#a8a8a8; --segnaposto:#a8a8a8; --rame-testo:#cdb07c; --piede:#0b1110; --logo:#f0f3f3; --ombra:0 20px 25px rgba(0,0,0,.45);
}}
:root[data-theme="dark"]{
  --sfondo:#121c1b; --campo:#182524; --bordo:#263937; --testo:#f0f3f3; --titolo:#f7f9f9;
  --nota:#a8a8a8; --segnaposto:#a8a8a8; --rame-testo:#cdb07c; --piede:#0b1110; --logo:#f0f3f3; --ombra:0 20px 25px rgba(0,0,0,.45);
}

/* Barra in alto delle pagine interne: logo Enavia piccolo a sinistra, ritorno alla home a destra dei bottoni */
.su{position:absolute;top:24px;left:16px;z-index:4;display:flex;align-items:center}
.su a{color:var(--testo);text-decoration:none;opacity:.8;padding:9px 0}
.su a:hover{opacity:1;color:var(--rame)}
.su .marchio-piccolo{display:block;height:16px;width:auto}

/* Bottone menu: terzo cerchio a sinistra di lingua e tema, apre la tendina con le pagine */
.menu-btn{position:fixed;top:16px;right:108px;z-index:6;width:38px;height:38px;border-radius:50%;border:1px solid var(--bordo);
  background:var(--sfondo);color:var(--testo);cursor:pointer;display:grid;place-items:center;padding:0}
.menu-btn:hover,.menu-btn[aria-expanded="true"]{border-color:var(--rame);color:var(--rame)}
.menu-btn:focus-visible{outline:2px solid var(--rame);outline-offset:2px}
.menu-btn svg{width:16px;height:16px}
.menu-sito{position:fixed;top:62px;right:16px;z-index:6;min-width:200px;display:flex;flex-direction:column;padding:8px 0;
  background:var(--sfondo);border:1px solid var(--bordo);box-shadow:var(--ombra);font:400 15px/20px var(--ui)}
.menu-sito[hidden]{display:none}
.menu-sito a{color:var(--testo);text-decoration:none;padding:10px 20px}
.menu-sito a:hover,.menu-sito a:focus-visible{color:var(--rame);background:var(--campo);outline:none}
.menu-sito a[aria-current="page"]{color:var(--rame-testo)}

/* Bottone lingua IT/EN, stesso aspetto del bottone tema, alla sua sinistra */
.lingua{position:fixed;top:16px;right:62px;z-index:5;width:38px;height:38px;border-radius:50%;border:1px solid var(--bordo);
  background:var(--sfondo);color:var(--testo);display:grid;place-items:center;font:600 12px/1 var(--ui);letter-spacing:.04em;text-decoration:none}
.lingua:hover{border-color:var(--rame);color:var(--rame)}
.lingua:focus-visible{outline:2px solid var(--rame);outline-offset:2px}

/* Bottone tema, uguale su tutte le pagine */
.tema{position:fixed;top:16px;right:16px;z-index:5;width:38px;height:38px;border-radius:50%;border:1px solid var(--bordo);
  background:var(--sfondo);color:var(--testo);cursor:pointer;display:grid;place-items:center}
.tema:hover{border-color:var(--rame);color:var(--rame)}
.tema:focus-visible{outline:2px solid var(--rame);outline-offset:2px}
.tema svg{width:16px;height:16px}
.tema .sole,:root .logo-scuro{display:none}
:root[data-theme="dark"] .tema .sole,:root[data-theme="dark"] .logo-scuro{display:block}
:root[data-theme="dark"] .tema .luna,:root[data-theme="dark"] .logo-chiaro{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tema .sole,:root:not([data-theme="light"]) .logo-scuro{display:block}
  :root:not([data-theme="light"]) .tema .luna,:root:not([data-theme="light"]) .logo-chiaro{display:none}
}

/* Titolo con la barra rame, come nella landing di Ogma */
.barra{display:flex;align-items:center;gap:clamp(14px,2vw,24px);font-family:var(--serif);font-weight:400;color:var(--testo)}
.barra::before{content:"";flex:none;width:8px;height:1.75em;background:var(--rame)}
.barra b{font-weight:700}

/* Pulsante rame, angoli vivi */
.pulsante{display:inline-flex;align-items:center;justify-content:center;min-height:57px;padding:10px 32px;border:0;background:var(--rame);
  color:var(--chiaro);font:700 19px/20px var(--ui);text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .15s}
.pulsante:hover{background:var(--rame-scuro)}
.pulsante:focus-visible{outline:2px solid var(--titolo);outline-offset:2px}

/* Entrata in sequenza, una volta sola */
@keyframes entra{from{opacity:0;transform:translateY(var(--dy,10px))}to{opacity:1;transform:none}}
.anim{animation:entra var(--dur,1.4s) ease var(--rit,0s) both}
@media (prefers-reduced-motion:reduce){.anim{animation:none}}
