:root{
  --bg:#0b1220;
  --panel:#111827;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --brand:#3b82f6;
  --border:rgba(255,255,255,.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text); font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(59,130,246,.12), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(16,185,129,.08), transparent 55%),
    var(--bg);
}
a{color:inherit; text-decoration:none}
a:hover{opacity:.9}

.container{width:min(1100px,92%); margin:0 auto}

.site-header{
  position:sticky; top:0; z-index:10;
  background:rgba(17,24,39,.85);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
  padding:10px 0;
}
.brand{display:inline-flex; align-items:center; gap:12px}
.brand img{
  display:block; height:64px; width:auto; /* logo grande e nitido */
}

.nav{display:flex; gap:14px; align-items:center}
.nav-link{padding:8px 12px; border-radius:10px; border:1px solid transparent}
.nav-link:hover{border-color:var(--border); background:rgba(255,255,255,.03)}

main.container{padding:28px 0}
.hero .badge{
  display:inline-block; font-size:.8rem; color:var(--muted);
  border:1px solid var(--border); border-radius:999px; padding:4px 10px;
}
.lead{color:var(--muted); margin:.3rem 0 0}
.card{
  background:var(--panel); border:1px solid var(--border);
  border-radius:12px; padding:16px;
}
.button{
  display:inline-block; padding:10px 14px; border-radius:10px;
  background:var(--brand); color:#fff; font-weight:600;
}
.button:hover{filter:brightness(1.05)}

.site-footer{
  margin-top:32px; border-top:1px solid var(--border); padding:22px 0 26px;
  background:rgba(17,24,39,.6);
}
.footer-grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  align-items:start;
}
.footer-col h3{margin:.4rem 0 .2rem; font-size:1rem; color:#fff}
.footer-col p{margin:.25rem 0; color:var(--muted)}
.site-footer .small{margin-top:10px; color:var(--muted); text-align:center}

@media (max-width:640px){
  .brand img{height:56px}
  .nav{gap:10px}
}

/* --- overrides --- */
.brand img{height:112px}
@media (max-width:640px){
  .brand img{height:84px}
}

/* Social icons nell'header (a destra) */
.header-social{display:flex; align-items:center; gap:12px}
.header-social .social{display:flex; gap:10px}
.header-social .social a{display:inline-flex; padding:6px; border-radius:10px; border:1px solid transparent}
.header-social .social a:hover{border-color:var(--border); background:rgba(255,255,255,.05)}
.header-social .icon{width:24px; height:24px}

/* Logo Meshtastic nel footer molto piccolo */
.site-footer img.meshtastic{height:12px; width:auto}

/* --- SOS overrides (fine file) --- */

/* Logo header molto più grande (desktop) + mobile un po' più piccolo */
.brand img{height:120px !important; display:block}
@media (max-width:640px){
  .brand img{height:84px !important}
}

/* Icone social colorate */
.header-social .social a[aria-label="Facebook"]{ color:#1877F2 }
.header-social .social a[aria-label="WhatsApp"]{ color:#25D366 }

/* Logo Meshtastic nel footer molto piccolo */
.site-footer img.meshtastic{ height:14px !important; width:auto }

/* === Footer: Meshtastic logo size override === */
.site-footer img.meshtastic{
  height:36px;
  width:auto;
  display:inline-block;
  vertical-align:middle;
}

/* === FORCE: Meshtastic logo in footer === */
.site-footer img.meshtastic{
  height:36px !important;
  width:auto !important;
  display:inline-block;
  vertical-align:middle;
}

/* ---- Header nav: button look ---- */
.site-header .nav { display:flex; gap:10px; align-items:center; }
.site-header .nav .nav-link{
  display:inline-block;
  padding:.45rem .9rem;
  border:1px solid var(--border, rgba(0,0,0,.15));
  border-radius:9999px;
  background:transparent;
  color:inherit;
  text-decoration:none;
  line-height:1;
  transition:background-color .2s, border-color .2s, transform .05s;
}
.site-header .nav .nav-link:hover{
  background:rgba(0,0,0,.06);
  border-color:var(--brand, #0ea5e9);
}
.site-header .nav .nav-link:active{ transform:translateY(1px); }

/* ---- Footer links: blu + sottolineati ---- */
.site-footer a{
  color:#0a66ff;
  text-decoration:underline;
  text-underline-offset:2px;
}

/* ---- Layout header per dropdown mobile ---- */
.site-header .container{ position:relative; }
.nav-toggle{
  display:none;
  width:40px; height:40px;
  align-items:center; justify-content:center;
  border:1px solid var(--border, rgba(0,0,0,.15));
  border-radius:10px;
  background:transparent; color:inherit; cursor:pointer;
}
.nav-toggle:focus{ outline:2px solid var(--brand, #0ea5e9); outline-offset:2px; }

@media (max-width: 768px){
  .nav-toggle{ display:inline-flex; }
  .site-header .nav{
    display:none;
    position:absolute; top:100%; right:16px;
    flex-direction:column; gap:8px;
    background:var(--card, #fff);
    border:1px solid var(--border, rgba(0,0,0,.12));
    border-radius:10px; padding:10px;
    box-shadow:0 8px 20px rgba(0,0,0,.12);
    z-index:50;
  }
  .site-header .nav.open{ display:flex; }
}

/* --- Overrides hamburger/mobile --- */
.nav-toggle{ font-size:22px; } /* più visibile */
@media (max-width:1024px){
  .nav-toggle{ display:inline-flex !important; }
  .site-header .nav{ display:none !important; }
  .site-header .nav.open{ display:flex !important; }
}

/* --- MOBILE NAV v2 (forzato) --- */
.nav-toggle{
  display:none;               /* desktop hidden */
  background:none;
  border:1px solid var(--border);
  padding:8px 10px;
  border-radius:10px;
  font-size:24px;
  line-height:1;
  cursor:pointer;
}
@media (max-width: 1024px){
  .nav-toggle{ display:inline-flex !important; align-items:center; justify-content:center; }
  .site-header .nav{ display:none !important; }
  .site-header .nav.open{
    display:flex !important;
    flex-direction:column;
    gap:10px;
    position:absolute;
    top:68px; right:16px;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:12px;
    padding:12px;
    box-shadow:0 6px 24px rgba(0,0,0,.15);
    z-index:2000;
  }
  .site-header .nav .nav-link{
    display:block;
    padding:10px 12px;
  }
}

/* === MOBILE NAV (hamburger) === */
.nav-toggle{
  display:none; /* nascosto su desktop */
  background:transparent;
  border:1px solid var(--border);
  padding:8px 10px;
  border-radius:10px;
  font-size:24px;
  line-height:1;
  cursor:pointer;
}
@media (max-width: 1024px){
  .nav-toggle{ display:inline-flex !important; align-items:center; justify-content:center; }
  .site-header .nav{ display:none !important; }
  .site-header .nav.open{
    display:flex !important;
    flex-direction:column;
    gap:10px;
    position:absolute;
    top:68px; right:16px;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:12px;
    padding:12px;
    box-shadow:0 6px 24px rgba(0,0,0,.15);
    z-index:2000;
  }
  .site-header .nav .nav-link{
    display:block;
    padding:10px 12px;
  }
}

/* === MOBILE NAV (hamburger) === */
.nav-toggle{
  display:none; /* desktop */
  background:transparent;
  border:1px solid var(--border);
  padding:8px 10px;
  border-radius:10px;
  font-size:24px;
  line-height:1;
  cursor:pointer;
}
@media (max-width: 1024px){
  .nav-toggle{ display:inline-flex !important; align-items:center; justify-content:center; }
  .site-header .nav{ display:none !important; }
  .site-header .nav.open{
    display:flex !important;
    flex-direction:column;
    gap:10px;
    position:absolute;
    top:68px; right:16px;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:12px;
    padding:12px;
    box-shadow:0 6px 24px rgba(0,0,0,.15);
    z-index:2000;
  }
  .site-header .nav .nav-link{
    display:block;
    padding:10px 12px;
  }
}

/* === MOBILE NAV (hamburger) === */
.nav-toggle{
  display:none; /* desktop */
  background:transparent;
  border:1px solid var(--border);
  padding:8px 10px;
  border-radius:10px;
  font-size:24px;
  line-height:1;
  cursor:pointer;
}
@media (max-width: 1024px){
  .nav-toggle{ display:inline-flex !important; align-items:center; justify-content:center; }
  .site-header .nav{ display:none !important; }
  .site-header .nav.open{
    display:flex !important;
    flex-direction:column;
    gap:10px;
    position:absolute;
    top:68px; right:16px;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:12px;
    padding:12px;
    box-shadow:0 6px 24px rgba(0,0,0,.15);
    z-index:2000;
  }
  .site-header .nav .nav-link{
    display:block;
    padding:10px 12px;
  }
}

.presentation object{border:1px solid var(--border); border-radius:12px;}

/* — Home hero copy — */
.hero .lead {
  max-width: 62ch;
  line-height: 1.6;
}
.hero .button.outline {
  background: transparent;
  border: 1px solid var(--border);
}
/* === SOS Abruzzo: Header con sfondo + Subnav === */

/* Header con sfondo (immagine o colore) */
.site-header {
  background: url("/assets/img/header-bg.jpg") center/cover no-repeat;
  /* Se non hai l'immagine, commenta la riga sopra e attiva quella sotto: */
  /* background-color: #0b3a53; */
  color: #fff;
  padding: 1.25rem 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
}

/* Subnav sotto l'header */
.subnav {
  display: flex;
  gap: .75rem;
  justify-content: center;
  align-items: center;
  padding: .5rem;
  background: #f7f7f7;
  border-bottom: 1px solid #e5e5e5;
}

/* Bottoni pill */
.subnav .pill {
  display: inline-block;
  padding: .5rem 1rem;
  border-radius: 999px;
  border: 1px solid #d4d4d4;
  text-decoration: none;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.subnav .pill:hover {
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

/* Mobile: hamburger controlla visibilità del menu */
@media (max-width: 768px) {
  .subnav { display: none; }
  .subnav.is-open { display: flex; flex-wrap: wrap; }
}

/* Accessibilità focus */
.subnav .pill:focus { outline: 2px solid #005fcc; outline-offset: 2px; }

/* ====== Fix subnav alignment + pills + responsive ====== */

/* Se non esiste già una .container generica, questa la crea/rafforza */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Subnav a tutta larghezza, ma contenuto centrato dentro .container */
.subnav {
  background: #f7f7f7;
  border-bottom: 1px solid #e5e5e5;
}

/* Riga interna della subnav: flex centrato, gap fra i link */
.subnav .subnav-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .75rem;
  padding: .5rem 0;
}

/* Stile PILL con specificità maggiore (nav.subnav a.pill) */
nav.subnav a.pill {
  display: inline-block;
  padding: .5rem 1rem;
  border-radius: 999px;
  border: 1px solid #d4d4d4;
  text-decoration: none;
  background: #fff;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
  color: inherit; /* usa il colore del testo corrente */
}

/* Hover/Focus: effetto "pill" */
nav.subnav a.pill:hover,
nav.subnav a.pill:focus {
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  transform: translateY(-1px);
  outline: none;
}

/* Accessibilità focus visibile */
nav.subnav a.pill:focus-visible {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

/* ===== Hamburger: visibilità corretta ===== */
/* Desktop: hamburger nascosto */
.hamburger {
  display: none;
}

/* Mobile: hamburger visibile; subnav nascosta finché non si apre */
@media (max-width: 768px) {
  .hamburger { 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    font-size: 20px; line-height: 1;
    background: transparent; border: 0; color: inherit; cursor: pointer;
  }

  /* HIDE subnav per default su mobile */
  nav.subnav { display: none; }

  /* Quando JS aggiunge .is-open a nav#mainmenu, mostra la subnav */
  nav.subnav.is-open { 
    display: block;
  }

  /* Disposizione dei link quando la subnav è visibile su mobile */
  .subnav .subnav-inner {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ====== FIX DEFINITIVO: SUBNAV & HAMBURGER ====== */

/* container robusto (se già esiste, queste regole lo rafforzano) */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Subnav: banda più scura e bordo più marcato */
nav.subnav {
  background: #e2e8f0 !important;   /* più scuro del #f7f7f7 */
  border-bottom: 1px solid #cbd5e1 !important;
}

/* Contenuto centrato */
nav.subnav .subnav-inner {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: .75rem !important;
  padding: .5rem 0 !important;
}

/* Bottoni pill SEMPRE visibili come pill */
nav.subnav a.pill {
  display: inline-block !important;
  padding: .5rem 1rem !important;
  border-radius: 999px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: inherit !important;
  text-decoration: none !important;
  box-shadow: 0 0 0 rgba(0,0,0,0) !important;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease !important;
}
nav.subnav a.pill:hover,
nav.subnav a.pill:focus {
  background: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.12) !important;
  transform: translateY(-1px) !important;
  outline: none !important;
}

/* DESKTOP: hamburger SEMPRE nascosto */
.site-header .hamburger {
  display: none !important;
}

/* MOBILE: hamburger visibile, subnav nascosta finché non aperta */
@media (max-width: 768px) {
  .site-header .hamburger {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 44px; height: 44px;
    font-size: 20px; line-height: 1;
    background: transparent; border: 0; color: inherit; cursor: pointer;
  }

  /* Chiusa di default */
  nav.subnav { display: none !important; }

  /* Aperta quando JS aggiunge .is-open */
  nav.subnav.is-open { display: block !important; }

  /* Link su più righe se serve */
  nav.subnav .subnav-inner { flex-wrap: wrap !important; }
}

/* ====== FIX FINALE: SUBNAV, PILL, HAMBURGER ====== */

/* container (rinforzo, se già esiste non fa danni) */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Subnav: sfondo più scuro per migliore contrasto */
nav.subnav {
  background: #cbd5e1 !important;   /* più scuro: slate-300 */
  border-bottom: 1px solid #94a3b8 !important; /* slate-400 */
}

/* Contenuto centrato */
nav.subnav .subnav-inner {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: .75rem !important;
  padding: .6rem 0 !important;
}

/* Pill solide con hover leggero */
nav.subnav a.pill {
  display: inline-block !important;
  padding: .55rem 1rem !important;
  border-radius: 999px !important;
  border: 1px solid #94a3b8 !important; /* slate-400 */
  background: #ffffff !important;
  color: inherit !important;
  text-decoration: none !important;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease !important;
}
nav.subnav a.pill:hover,
nav.subnav a.pill:focus {
  background: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.12) !important;
  transform: translateY(-1px) !important;
  outline: none !important;
}

/* DESKTOP: hamburger nascosto SEMPRE */
.site-header .hamburger {
  display: none !important;
}

/* MOBILE: hamburger visibile e subnav togglata */
@media (max-width: 768px) {
  .site-header .hamburger {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 44px; height: 44px;
    font-size: 20px; line-height: 1;
    background: transparent; border: 0; color: inherit; cursor: pointer;
  }

  /* Subnav chiusa di default su mobile */
  nav.subnav { display: none !important; }

  /* Aperta quando il JS aggiunge .is-open */
  nav.subnav.is-open { display: block !important; }

  /* Link su più righe se serve */
  nav.subnav .subnav-inner { flex-wrap: wrap !important; }
}

/* ====== SOS FINAL FIX: SUBNAV + HAMBURGER ====== */

/* Testo pill più scuro per leggibilità */
nav.subnav a.pill {
  color: #0f172a !important; /* slate-900 */
}

/* Sfondo subnav: tono medio */
nav.subnav {
  background: #cbd5e1 !important;   /* slate-300 */
  border-bottom: 1px solid #94a3b8 !important; /* slate-400 */
}

/* Centra contenuto */
nav.subnav .subnav-inner {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: .75rem !important;
  padding: .6rem 0 !important;
}

/* HAMBURGER: NASCOSTO SU DESKTOP (anche se altri CSS lo mostrano) */
html body .site-header .hamburger {
  display: none !important;
}

/* MOBILE: visibile e attivo */
@media (max-width: 768px) {
  html body .site-header .hamburger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important; height: 44px !important;
    font-size: 20px !important;
    background: transparent !important; border: 0 !important; color: inherit !important; cursor: pointer !important;
  }

  /* Subnav chiusa di default */
  nav#mainmenu.subnav { display: none !important; }

  /* Aperta quando il JS aggiunge .is-open */
  nav#mainmenu.subnav.is-open { display: block !important; }

  /* Link su più righe se serve */
  nav#mainmenu.subnav .subnav-inner { flex-wrap: wrap !important; }
}

/* ====== SOS FINAL FIX: SUBNAV + PILL + HAMBURGER ====== */

/* container robusto (se già esiste, è un rinforzo) */
.container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }

/* Subnav più leggibile */
nav.subnav { background: #cbd5e1 !important; border-bottom: 1px solid #94a3b8 !important; }
nav.subnav .subnav-inner { display: flex !important; justify-content: center !important; align-items: center !important; gap: .75rem !important; padding: .6rem 0 !important; }

/* Pill leggibili (testo scuro) */
nav.subnav a.pill {
  display: inline-block !important;
  padding: .55rem 1rem !important;
  border-radius: 999px !important;
  border: 1px solid #94a3b8 !important;
  background: #ffffff !important;
  color: #0f172a !important; /* testo scuro */
  text-decoration: none !important;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease !important;
}
nav.subnav a.pill:hover, nav.subnav a.pill:focus {
  background: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.12) !important;
  transform: translateY(-1px) !important;
  outline: none !important;
}

/* HAMBURGER: nascosto su DESKTOP con specificità alta */
html body .site-header .hamburger { display: none !important; }

/* MOBILE: hamburger visibile e subnav togglata */
@media (max-width: 768px) {
  html body .site-header .hamburger {
    display: inline-flex !important;
    align-items: center !important; justify-content: center !important;
    width: 44px !important; height: 44px !important; font-size: 20px !important;
    background: transparent !important; border: 0 !important; color: inherit !important; cursor: pointer !important;
  }
  nav#mainmenu.subnav { display: none !important; }
  nav#mainmenu.subnav.is-open { display: block !important; }
  nav#mainmenu.subnav .subnav-inner { flex-wrap: wrap !important; }
}

/* ====== SOS NAV FINAL CSS (v2) ====== */

/* Testo pill più scuro (leggibile) */
nav.subnav a.pill { color: #0f172a !important; }

/* Desktop: NASCONDI qualsiasi hamburger */
.hamburger { display: none !important; }

/* Mobile: mostra SOLO l'hamburger marcato data-sos="nav" */
@media (max-width: 768px) {
  .hamburger { display: none !important; } /* difensivo */
  .hamburger[data-sos="nav"] {
    display: inline-flex !important;
    align-items: center !important; justify-content: center !important;
    width: 44px !important; height: 44px !important; font-size: 20px !important;
    background: transparent !important; border: 0 !important; color: inherit !important; cursor: pointer !important;
  }

  /* Subnav chiusa di default; aperta con .is-open */
  nav#mainmenu.subnav { display: none !important; }
  nav#mainmenu.subnav.is-open { display: block !important; }
  nav#mainmenu.subnav .subnav-inner { flex-wrap: wrap !important; }
}

/* ====== SOS NAV FINAL CSS (v3) ====== */
/* Pill: testo scuro leggibile */
nav.subnav a.pill { color: #0f172a !important; }
/* Subnav: sfondo più scuro */
nav.subnav { background: #cbd5e1 !important; border-bottom: 1px solid #94a3b8 !important; }
nav.subnav .subnav-inner { display: flex !important; justify-content: center !important; align-items: center !important; gap: .75rem !important; padding: .6rem 0 !important; }

/* DESKTOP: nascondi QUALSIASI hamburger */
.hamburger { display: none !important; }

/* MOBILE: mostra SOLO l'hamburger marcato data-sos="nav" */
@media (max-width: 768px) {
  .hamburger { display: none !important; } /* difensivo */
  .hamburger[data-sos="nav"] {
    display: inline-flex !important;
    align-items: center !important; justify-content: center !important;
    width: 44px !important; height: 44px !important; font-size: 20px !important;
    background: transparent !important; border: 0 !important; color: inherit !important; cursor: pointer !important;
  }
  /* Subnav chiusa/aperta */
  nav#mainmenu.subnav { display: none !important; }
  nav#mainmenu.subnav.is-open { display: block !important; }
  nav#mainmenu.subnav .subnav-inner { flex-wrap: wrap !important; }
}


/* Mobile: leggermente più verso il centro orizzontale, sempre basso */
@media (max-width: 640px) {
  .site-header {  }
}

/* Schermi larghi: ancora un filo più a destra */
@media (min-width: 1536px) {
  .site-header {  }
}

/* === FIX SUBNAV VISIBILE + PILL === */
.container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }

nav.subnav { 
  display: block !important;                /* visibile su desktop */
  background: #cbd5e1 !important;
  border-bottom: 1px solid #94a3b8 !important;
}
nav.subnav .subnav-inner {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: .75rem !important;
  padding: .6rem 0 !important;
}
nav.subnav a.pill {
  display: inline-block !important;
  padding: .55rem 1rem !important;
  border-radius: 999px !important;
  border: 1px solid #94a3b8 !important;
  background: #ffffff !important;
  color: #0f172a !important;
  text-decoration: none !important;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease !important;
}
nav.subnav a.pill:hover,
nav.subnav a.pill:focus { box-shadow: 0 2px 6px rgba(0,0,0,.12) !important; transform: translateY(-1px) !important; }

/* Mobile: subnav chiusa di default, aperta con .is-open */
@media (max-width: 768px) {
  nav#mainmenu.subnav { display: none !important; }
  nav#mainmenu.subnav.is-open { display: block !important; }
  nav#mainmenu.subnav .subnav-inner { flex-wrap: wrap !important; }
}

/* ==== SOS SUBNAV vFINAL ==== */
.container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }

nav#mainmenu.subnav {
  display: block !important;            /* visibile su desktop */
  background: #cbd5e1 !important;
  border-bottom: 1px solid #94a3b8 !important;
}
nav#mainmenu.subnav .subnav-inner {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: .75rem !important;
  padding: .6rem 0 !important;
}
nav#mainmenu.subnav a.pill {
  display: inline-block !important;
  padding: .55rem 1rem !important;
  border-radius: 999px !important;
  border: 1px solid #94a3b8 !important;
  background: #ffffff !important;
  color: #0f172a !important;
  text-decoration: none !important;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease !important;
}
nav#mainmenu.subnav a.pill:hover,
nav#mainmenu.subnav a.pill:focus {
  box-shadow: 0 2px 6px rgba(0,0,0,.12) !important;
  transform: translateY(-1px) !important;
}
nav#mainmenu.subnav a.pill:focus-visible {
  outline: 2px solid #005fcc !important; outline-offset: 2px !important;
}

/* Mobile: chiusa di default, si apre con .is-open messa dal JS */
@media (max-width: 768px) {
  nav#mainmenu.subnav { display: none !important; }
  nav#mainmenu.subnav.is-open { display: block !important; }
  nav#mainmenu.subnav .subnav-inner { flex-wrap: wrap !important; }
}

/* ==== SOS SUBNAV (fix definitivo) ==== */
.container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }

nav#mainmenu.subnav {
  display: block !important;            /* visibile su desktop */
  background: #cbd5e1 !important;
  border-bottom: 1px solid #94a3b8 !important;
}
nav#mainmenu.subnav .subnav-inner {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: .75rem !important;
  padding: .6rem 0 !important;
}
nav#mainmenu.subnav a.pill {
  display: inline-block !important;
  padding: .55rem 1rem !important;
  border-radius: 999px !important;
  border: 1px solid #94a3b8 !important;
  background: #ffffff !important;
  color: #0f172a !important;
  text-decoration: none !important;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease !important;
}
nav#mainmenu.subnav a.pill:hover,
nav#mainmenu.subnav a.pill:focus {
  box-shadow: 0 2px 6px rgba(0,0,0,.12) !important;
  transform: translateY(-1px) !important;
}

/* Mobile: chiusa di default; aperta con .is-open messa dal JS */
@media (max-width: 768px) {
  nav#mainmenu.subnav { display: none !important; }
  nav#mainmenu.subnav.is-open { display: block !important; }
  nav#mainmenu.subnav .subnav-inner { flex-wrap: wrap !important; }
}


/* === SOS HEADER (finale, pulito) === */
.site-header{
  background-position: 80% top !important;
  min-height: 280px !important;   /* desktop */
  position: relative;
  padding: 16px 0;
}
@media (max-width: 640px){
  .site-header{
    background-position: 80% top !important;
    min-height: 200px !important; /* mobile */
    padding: 12px 0;
  }
}

/* niente social o nav nell'HEADER */
.site-header .header-social{ display:none !important; }
.site-header .nav, .site-header #nav-menu{ display:none !important; }

/* === SUBNAV: visibile desktop, a toggle su mobile === */
.container{ max-width:1200px; margin:0 auto; padding:0 1rem; }

nav#mainmenu.subnav{
  display:block !important;
  background:#cbd5e1 !important;
  border-bottom:1px solid #94a3b8 !important;
}
nav#mainmenu.subnav .subnav-inner{
  display:flex !important; justify-content:center !important; align-items:center !important;
  gap:.75rem !important; padding:.6rem 0 !important;
}
nav#mainmenu.subnav a.pill{
  display:inline-block !important; padding:.55rem 1rem !important; border-radius:999px !important;
  border:1px solid #94a3b8 !important; background:#fff !important; color:#0f172a !important;
  text-decoration:none !important; transition:transform .15s ease, background-color .15s ease, box-shadow .15s ease !important;
}
nav#mainmenu.subnav a.pill:hover,
nav#mainmenu.subnav a.pill:focus{
  box-shadow:0 2px 6px rgba(0,0,0,.12) !important; transform:translateY(-1px) !important;
}

@media (max-width:768px){
  nav#mainmenu.subnav{ display:none !important; }
  nav#mainmenu.subnav.is-open{ display:block !important; }
  nav#mainmenu.subnav .subnav-inner{ flex-wrap:wrap !important; }
}
/* === SOS: shrink header on mobile (override) === */
@media (max-width: 640px){
  :root .site-header{
    min-height: 200px !important;
    padding: 8px 0 !important;
    background-position: 80% top !important;
  }
  /* evita che un vecchio "min-height: inherit" alzi l'header */
  .site-header > .container{
    min-height: auto !important;
  }
}
/* === SOS: header sizing override (final) === */
:root .site-header{
  min-height: 260px !important;           /* desktop compatto (puoi mettere 230–250) */
  background-position: 80% top !important;
}
@media (max-width: 640px){
  :root .site-header{
    min-height: 200px !important;         /* mobile più basso come richiesto */
    padding: 8px 0 !important;
    background-position: 80% top !important;
  }
  /* evita che il container ereditando min-height gonfi l'header */
  .site-header > .container{ min-height: auto !important; }
}
/* === SOS: hamburger visibility === */
/* desktop: nascosto */
.site-header .hamburger{ display:none !important; }

/* mobile: visibile e cliccabile */
@media (max-width: 768px){
  .site-header .hamburger{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:44px !important; height:44px !important;
    font-size:20px !important; line-height:1 !important;
    background: transparent !important; border:0 !important; color: inherit !important;
    cursor:pointer !important;
  }
}

/* === SOS: fine-tuning focus header (verticale) === */
/* 0% = in alto, 100% = in basso. Prima era "bottom" (100%). */
:root .site-header { background-position: 80% top !important; }   /* desktop */
@media (max-width: 640px){
  :root .site-header { background-position: 80% top !important; } /* mobile */
}

/* === SOS: fine-tuning focus header (verticale) === */
/* 0% = in alto, 100% = in basso. Prima era "bottom" (100%). */
:root .site-header { background-position: 80% top !important; }   /* desktop */
@media (max-width: 640px){
  :root .site-header { background-position: 80% top !important; } /* mobile */
}

/* === SOS: fine-tuning focus header (verticale) === */
/* 0% = in alto, 100% = in basso. Prima era "bottom" (100%). */
:root .site-header { background-position: 80% top !important; }   /* desktop */
@media (max-width: 640px){
  :root .site-header { background-position: 80% top !important; } /* mobile */
}

/* === SOS: fine-tuning focus header (verticale) === */
/* 0% = in alto, 100% = in basso. Prima era "bottom" (100%). */
:root .site-header { background-position: 80% top !important; }   /* desktop */
@media (max-width: 640px){
  :root .site-header { background-position: 80% top !important; } /* mobile */
}

/* === SOS: fine-tuning focus header (verticale) === */
/* 0% = in alto, 100% = in basso. Prima era "bottom" (100%). */
:root .site-header { background-position: 80% top !important; }   /* desktop */
@media (max-width: 640px){
  :root .site-header { background-position: 80% top !important; } /* mobile */
}

/* === SOS: fine-tuning focus header (verticale) === */
/* 0% = in alto, 100% = in basso. Prima era "bottom" (100%). */
:root .site-header { background-position: 80% top !important; }   /* desktop */
@media (max-width: 640px){
  :root .site-header { background-position: 80% top !important; } /* mobile */
}

/* === SOS: fine-tuning focus header (verticale) === */
/* 0% = in alto, 100% = in basso. Prima era "bottom" (100%). */
:root .site-header { background-position: 80% top !important; }   /* desktop */
@media (max-width: 640px){
  :root .site-header { background-position: 80% top !important; } /* mobile */
}

/* === SOS: fine-tuning focus header (verticale) === */
/* 0% = in alto, 100% = in basso. Prima era "bottom" (100%). */
:root .site-header { background-position: 80% top !important; }   /* desktop */
@media (max-width: 640px){
  :root .site-header { background-position: 80% top !important; } /* mobile */
}

/* === SOS: shift verticale (più in basso) === */
/* 0% = in alto, 100% = in basso */
:root .site-header { background-position: 80% top !important; }     /* desktop */
@media (max-width: 640px){
  :root .site-header { background-position: 80% top !important; }   /* mobile */
}

/* === SOS: shift verticale (più in basso) === */
/* 0% = in alto, 100% = in basso */
:root .site-header { background-position: 80% top !important; }     /* desktop */
@media (max-width: 640px){
  :root .site-header { background-position: 80% top !important; }   /* mobile */
}

/* === SOS: shift verticale (più in basso) === */
/* 0% = in alto, 100% = in basso */
:root .site-header { background-position: 80% top !important; }     /* desktop */
@media (max-width: 640px){
  :root .site-header { background-position: 80% top !important; }   /* mobile */
}

/* === SOS HEADER: override con immagini versionate (v3) === */
/* base desktop */
:root .site-header{
  background-image: url("/assets/img/header/header-1920-v3.jpg?v=3") !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;  /* tieni "top": mostra più testa */
}
/* mobile */
@media (max-width: 640px){
  :root .site-header{
    background-image: url("/assets/img/header/header-768-v3.jpg?v=3") !important;
    background-position: center top !important;
  }
}
/* tablet/laptop */
@media (min-width: 641px) and (max-width: 1279px){
  :root .site-header{
    background-image: url("/assets/img/header/header-1280-v3.jpg?v=3") !important;
  }
}
/* desktop grande */
@media (min-width: 1440px){
  :root .site-header{
    background-image: url("/assets/img/header/header-2560-v3.jpg?v=3") !important;
  }
}
/* 4K */
@media (min-width: 2560px){
  :root .site-header{
    background-image: url("/assets/img/header/header-3840-v3.jpg?v=3") !important;
  }
}

/* === SOS: micro-tuning finale background-position === */
/* Desktop: quasi top */
:root .site-header{
  background-position: center 4% !important;
}
/* Mobile: un filo più alto del top */
@media (max-width: 640px){
  :root .site-header{
    background-position: center 8% !important;
  }
}

/* === SOS: desktop header focus (tuning) === */
/* 0% = bordo alto, 100% = bordo basso */
@media (min-width: 641px){
  :root .site-header{
    background-position: center 44% !important;  /* prova iniziale */
  }
}
/* === SOS: header immagine limitata alla larghezza contenitore === */
/* disattiva eventuale bg sull'header e prepara lo stacking */
:root .site-header{
  position: relative;
  background-image: none !important;   /* stop al full-bleed */
  overflow: hidden;                    /* evita sbordi del ::before */
  z-index: 0;
}

/* pseudo-elemento che fa da "sfondo" centrato e limitato */
:root .site-header::before{
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(100%, 1200px);     /* NON supera la larghezza del body */
  height: 100%;                 /* segue l'altezza dell'header */
  z-index: -1;                  /* dietro ai contenuti */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 44%;  /* desktop: alza/abbassa qui (0%=alto,100%=basso) */
  background-image: url("/assets/img/header/header-1920-v3.jpg?v=3");
}

/* swap immagine per breakpoint, sempre limitata al container */
@media (max-width: 640px){
  :root .site-header::before{
    background-image: url("/assets/img/header/header-768-v3.jpg?v=3");
    background-position: center 10%;  /* mobile: leggermente più alto */
  }
}
@media (min-width: 641px) and (max-width: 1279px){
  :root .site-header::before{
    background-image: url("/assets/img/header/header-1280-v3.jpg?v=3");
  }
}
@media (min-width: 1440px){
  :root .site-header::before{
    background-image: url("/assets/img/header/header-2560-v3.jpg?v=3");
  }
}
@media (min-width: 2560px){
  :root .site-header::before{
    background-image: url("/assets/img/header/header-3840-v3.jpg?v=3");
  }
}

/* assicura che il contenuto resti sopra lo sfondo */
:root .site-header > .container { position: relative; z-index: 1; }
/* === SOS: focus desktop (centraggio) === */
@media (min-width: 641px){
  :root .site-header::before{ background-position: center 46% !important; }
  :root .site-header{ background-position: center 46% !important; } /* fallback se non usi ::before */
}
/* === SOS: focus desktop (centraggio) === */
@media (min-width: 641px){
  :root .site-header::before{ background-position: center 36% !important; }
  :root .site-header{ background-position: center 36% !important; } /* fallback se non usi ::before */
}
/* === SOS: fondo header chiaro come il cielo dell'immagine === */
:root .site-header{
  background-color: #efe7d8 !important;  /* beige chiaro, anti-taglio */
}
/* === SOS: subnav match footer & height -20% === */
:root nav#mainmenu.subnav{
  background: #0f172a !important;              /* stesso colore del footer */
  border-bottom: 1px solid #0c1220 !important; /* bordo leggero */
}
:root nav#mainmenu.subnav .subnav-inner{
  padding: .48rem 0 !important;                /* da .6rem -> -20% */
}

/* === SOS header: usare strip precisi v4 (no crop runtime) === */
:root .site-header{ position:relative; overflow:hidden; }
:root .site-header::before{
  content:""; position:absolute; inset:0 auto 0 50%; transform:translateX(-50%);
  width:min(100%,1200px); height:100%; z-index:-1;
  background: no-repeat center/contain;            /* contain per NON tagliare */
  image-rendering:auto;
  background-image: image-set(
    url("/assets/img/header/header-1200-strip-v4.jpg?v=4") 1x,
    url("/assets/img/header/header-2400-strip-v4.jpg?v=4") 2x
  );
}
/* mobile: strip dedicato */
@media (max-width: 640px){
  :root .site-header::before{
    width:100%;
    background-image: image-set(
      url("/assets/img/header/header-768-strip-v4.jpg?v=4") 1x,
      url("/assets/img/header/header-1536-strip-v4.jpg?v=4") 2x
    );
  }
}
/* === SOS subnav: linea superiore + -20% padding === */
:root nav#mainmenu.subnav{
  border-top: 1px solid #0c1220 !important;   /* stesso “rigo” del footer */
  border-bottom: 1px solid #0c1220 !important;
}
:root nav#mainmenu.subnav .subnav-inner{
  padding: .48rem 0 !important;               /* da .6rem a -20% */
}
/* === SOS: subnav – doppio bordo identico === */
:root nav#mainmenu.subnav{
  border-top:    1px solid #0c1220 !important;  /* come il footer */
  border-bottom: 1px solid #0c1220 !important;  /* identico al superiore */
}
/* === SOS: divider condiviso per subnav e footer === */
:root{ --sos-divider: #0c1220; }  /* se vuoi più chiaro/scuro, cambia qui una volta sola */

/* footer: bordo superiore */
.site-footer{ border-top: 1px solid var(--sos-divider) !important; }

/* subnav: bordo superiore e inferiore identici */
nav#mainmenu.subnav{
  border-top:    1px solid var(--sos-divider) !important;
  border-bottom: 1px solid var(--sos-divider) !important;
}
/* === SOS: header strip centrata e in "cover" (no fuori centro) === */
:root .site-header{ position: relative; overflow: hidden; }

/* pseudo-sfondo limitato alla larghezza del contenitore */
:root .site-header::before{
  content:""; position:absolute; inset:0 auto 0 50%; transform:translateX(-50%);
  width:min(100%,1200px); height:100%; z-index:-1;
  background-repeat:no-repeat;
  background-size:cover;                  /* riempi l'header */
  background-position:center 40%;         /* DESKTOP: fuoco iniziale */
  background-image: image-set(
    url("/assets/img/header/header-1200-strip-v4.jpg?v=4") 1x,
    url("/assets/img/header/header-2400-strip-v4.jpg?v=4") 2x
  );
}

/* MOBILE: stessa logica ma con strip mobile e fuoco al centro */
@media (max-width:640px){
  :root .site-header::before{
    width:100%;
    background-position:center 50%;       /* MOBILE: centrato */
    background-image: image-set(
      url("/assets/img/header/header-768-strip-v4.jpg?v=4") 1x,
      url("/assets/img/header/header-1536-strip-v4.jpg?v=4") 2x
    );
  }
}
/* === SOS header: tuning finale (cover + punto di fuoco) === */
/* Desktop (>=641px): sposta verso DESTRA e un filo più in BASSO */
@media (min-width: 641px){
  :root .site-header{ position: relative; overflow: hidden; }
  :root .site-header::before{
    background-size: cover !important;
    /* X% = orizzontale (0=sinistra,100=destra), Y% = verticale (0=alto,100=basso) */
    background-position: 70% 44% !important;   /* PROVA: escursionisti centrati */
  }
  /* fallback se non ci fosse ::before */
  :root .site-header{
    background-size: cover !important;
    background-position: 70% 44% !important;
  }
}

/* Mobile (<=640px): un po' più centrato sull'escursionista */
@media (max-width: 640px){
  :root .site-header::before{
    background-size: cover !important;
    background-position: 62% 50% !important;   /* sposta leggermente a destra */
  }
  :root .site-header{
    background-size: cover !important;
    background-position: 62% 50% !important;
  }
}

/* Sub-nav: doppi bordi identici (come il footer) – conferma */
:root{ --sos-divider: #0c1220; }
nav#mainmenu.subnav{
  border-top:    1px solid var(--sos-divider) !important;
  border-bottom: 1px solid var(--sos-divider) !important;
}

/* === SOS v5: header semplice con immagini già ritagliate === */
:root .site-header{
  position: relative;
  overflow: hidden;
  background-color: #efe7d8 !important; /* beige del cielo */
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

/* Desktop: usa la variante corrente */
@media (min-width: 641px){
  :root .site-header{
    background-image: url("/assets/img/header/header-1200-current.jpg?v=5") !important;
    background-position: center center !important;
  }
}

/* Mobile: variante corrente */
@media (max-width: 640px){
  :root .site-header{
    background-image: url("/assets/img/header/header-768-current.jpg?v=5") !important;
    background-position: center center !important;
  }
}

/* Sub-nav: stesso divisore del footer, altezza -20% */
:root { --sos-divider: #0c1220; }
nav#mainmenu.subnav{
  background: #0f172a !important;
  border-top:    1px solid var(--sos-divider) !important;
  border-bottom: 1px solid var(--sos-divider) !important;
}
nav#mainmenu.subnav .subnav-inner{ padding: .48rem 0 !important; }
/* === SOS v6: header sfondo UNICO (senza ::before) ======================= */
:root .site-header::before{
  content: none !important;
  background: none !important;
  display: none !important;
}
:root .site-header{
  position: relative;
  overflow: hidden;
  background-color: #efe7d8 !important;    /* beige del cielo */
  background-repeat: no-repeat !important;
  background-size: cover !important;        /* riempi l'header */
}

/* Desktop >=641px: usa la strip desktop corrente */
@media (min-width: 641px){
  :root .site-header{
    background-image: url("/assets/img/header/header-1200-current.jpg?v=6") !important;
    background-position: 72% 48% !important; /* X=destra 70%, Y=giù 46% */
  }
}

/* Mobile <=640px: usa la strip mobile corrente */
@media (max-width: 640px){
  :root .site-header{
    background-image: url("/assets/img/header/header-768-current.jpg?v=6") !important;
    background-position: 60% 52% !important; /* leggermente destra/giù */
  }
}

/* Sub-nav: doppi bordi identici al footer (con la stessa tinta) */
:root{ --sos-divider:#0c1220; }
nav#mainmenu.subnav{
  border-top:    1px solid var(--sos-divider) !important;
  border-bottom: 1px solid var(--sos-divider) !important;
}
/* === SOS v7: fuoco deciso desktop/mobile === */
:root .site-header::before{ content:none !important; display:none !important; } /* anti-duplicato */
:root .site-header{ background-size:cover !important; background-repeat:no-repeat !important; }

/* Desktop: sposta verso DESTRA e più in BASSO (escursionisti interi) */
@media (min-width:641px){
  :root .site-header{
    background-position: 85% 60% !important;  /* X=85% (destra), Y=60% (più giù) */
    background-image:url("/assets/img/header/header-1200-current.jpg?v=7") !important;
  }
}

/* Mobile: un po' a destra e più in basso */
@media (max-width:640px){
  :root .site-header{
    background-position: 72% 58% !important;  /* X=72% (destra), Y=58% (più giù) */
    background-image:url("/assets/img/header/header-768-current.jpg?v=7") !important;
  }
}

/* SOS: assicurati che i link nei popup Leaflet siano visibili e cliccabili */
.leaflet-popup-content a {
  text-decoration: underline;
  pointer-events: auto;
}

/* --- SOS Abruzzo: pin circolari --- */
.node-dot-icon .dot-wrap{
  width:18px; height:18px; display:flex; align-items:center; justify-content:center;
}
.node-dot-icon .dot-core{
  width:12px; height:12px; border:2px solid #1f2937; border-radius:50%;
  box-shadow: 0 0 0 2px rgba(255,255,255,.8);
}

/* --- Popup minimal pulito --- */
.node-popup{ min-width: 220px; font: 13px/1.35 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
.node-popup .np-row{ display:flex; align-items:center; }
.node-popup .np-head{ margin-bottom: 6px; }
.node-popup .np-id{ font-weight: 700; font-size: 14px; }
.node-popup .np-batt{ margin-left:auto; color:#334155; font-weight:600; }
.node-popup .np-geo{ color:#334155; }
.node-popup .np-ll{ font-variant-numeric: tabular-nums; }
.node-popup .np-spacer{ height:8px; }
.node-popup .np-ts{ color:#475569; font-size: 12px; }