/* ===========================
   Header Trip Sicily (header.css)
   =========================== */

/* Variabili */
:root{
  --accent:#fbbf24;      /* giallo ambra */
  --accentText:#111827;  /* testo scuro su giallo */
}

/* ===== Base Header ===== */
header{
  position: sticky;
  top: 0;
  z-index: 2000;                 /* sopra mappa & contenuti */
  background: #111827;           /* scuro */
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.header-inner{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:64px;
  padding:12px 0;
}

/* ===== Logo ===== */
.logo{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:#f9fafb;
}
.logo img{ height:72px; width:auto; display:block; } /* desktop default */
.logo span{ display:none; }

/* ===== Nav Desktop ===== */
header nav{
  margin-left:auto;
  display:flex;
  gap:18px;
  align-items:center;
  flex-wrap:wrap;
}
header nav a{
  color:#f9fafb;
  text-decoration:none;
  font-weight:600;
  padding:10px 14px;
  line-height:1;
  border-radius:999px;
  border:1px solid transparent;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
header nav a:hover,
header nav a:focus-visible{
  border-color: var(--accent);
  background: rgba(251,191,36,.15);
  color: var(--accent);
  outline: none;
}
header nav a.active{
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accentText);
}

/* ===== Hamburger ===== */
.menu-btn{
  display:none;                    /* desktop: nascosto */
  margin-left:auto;
  border:1px solid #e5e7eb;
  padding:8px 10px;
  border-radius:10px;
  background:#fff;
  color:#111827;
  cursor:pointer;
}
.menu-btn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* ===== Mobile Nav Panel ===== */
.mobile-nav{
  display:none;                    /* aperto/chiuso via JS */
  position: fixed;
  left: 0; right: 0;
  top: var(--mobileNavTop, 64px);  /* JS aggiorna questo valore */
  background: #0d1b2a;
  color:#fff;
  border-top:1px solid rgba(255,255,255,.08);
  padding:12px 14px 16px;
  z-index:3000;                    /* sopra la mappa */
}
.mobile-nav a{
  display:block;
  width:100%;
  text-align:left;
  padding:12px 10px;
  font-size:16px;
  line-height:1.2;
  color:#fff;
  text-decoration:none;
  background:transparent;
  border:0;
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
}
.mobile-nav a:hover,
.mobile-nav a:focus-visible{ background: rgba(255,255,255,.08); outline:none; }
.mobile-nav a.active{
  background: var(--accent);
  color: var(--accentText);
}
#mobileNav a:active{ background: rgba(255,255,255,.12); }

/* ===== Responsive ===== */
@media (max-width:760px){
  header nav{ display:none !important; }         /* nasconde nav desktop */
  .menu-btn{ display:inline-flex !important; }   /* mostra hamburger */
  .logo img{ height:56px; }                      /* logo più piccolo */
}
@media (min-width:761px){
  .mobile-nav{ display:none !important; }        /* pannello mobile mai visibile su desktop */
}

/* ===== Utility ===== */
.leaflet-container{ z-index:0; }                 /* evita che la mappa buchi il menu */
.menu-open{ overflow:hidden; }                   /* blocca scroll sotto il pannello mobile */