/* ============================================================
   EMEA Platform · NAVBAR MOBILE — Componente UNICO (fonte di verità)
   ------------------------------------------------------------
   UN solo drawer per tutto il progetto (pubblico + privato). Il markup
   del drawer e il comportamento stanno in assets/js/navbar.js; qui c'è
   TUTTO lo stile: header compatto uniforme su mobile + drawer.
   Caricato come foglio condiviso: ogni pagina con navbar è IDENTICA.
   Solo FRONTEND. Breakpoint mobile: ≤1024px (dove compare l'hamburger).
   ============================================================ */

/* ---- Header compatto UNIFORME su mobile: stessa altezza/logo/padding ovunque
   (elimina il drift da CSS inline duplicato pagina-per-pagina). ---- */
@media (max-width:1024px){
  .header .nav, .header #nav{ display:none; }             /* i link vanno nel drawer */
  .header .menu-toggle{ display:grid; place-items:center; }
}
@media (max-width:768px){
  /* ---- NAVBAR MOBILE PREMIUM — layout unico:  [ LOGO ] .......... [ ☰ ]  ----
     Più alta ed elegante, fondo bianco, ombra morbidissima, hairline discreta.
     Nessun testo: via "Area Clienti", "Contattaci" e menu utente. */
  :root{ --header-h:88px; }
  .header{
    background:#fff;
    -webkit-backdrop-filter:none; backdrop-filter:none;
    border-bottom:1px solid rgba(10,14,26,.06);
    box-shadow:0 1px 3px rgba(10,14,26,.05);
    /* Notch / Dynamic Island: con viewport-fit=cover il bianco riempie la
       status bar e il contenuto della navbar resta sotto la safe-area. */
    padding-top:var(--safe-top,0px);
    padding-left:var(--safe-left,0px);
    padding-right:var(--safe-right,0px);
  }
  .header-inner{ padding:0 20px; height:var(--header-h); align-items:center; }
  .logo{ display:flex; align-items:center; }
  /* specificità .header .logo-mark per vincere sulle regole inline per-pagina */
  .header .logo-mark, .logo-mark{ width:104px; height:auto; }   /* logo con più risalto, mai oltre l'altezza */

  /* SOLO logo + hamburger */
  .header-actions{ gap:0; }
  .header-actions .btn-ghost, .header .btn-ghost,
  .header-actions .btn-primary,
  .header-actions .nav-user{ display:none !important; }

  /* Hamburger: area di tocco ≥44px, icona più grande, stessa spessura (2.2) del progetto */
  .menu-toggle{
    display:grid; place-items:center;
    width:48px; height:48px; margin-right:-8px;
    border-radius:12px; background:none; color:var(--ink,#0A0E1A);
  }
  .menu-toggle:hover{ background:#F1F4FA; }
  .menu-toggle svg{ width:27px; height:27px; }
}

/* ============================================================
   DRAWER — un solo componente (.emea-drawer*)
   ============================================================ */
.emea-drawer-ov{
  position:fixed; inset:0; z-index:1000;
  background:rgba(8,15,30,.48);
  opacity:0; visibility:hidden;
  transition:opacity .25s ease, visibility .25s ease;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.emea-drawer-ov.open{ opacity:1; visibility:visible; }

.emea-drawer{
  position:fixed; top:0; right:0; z-index:1001;
  height:100%; width:min(86vw,340px);
  display:flex; flex-direction:column;
  background:#fff; color:var(--ink,#0A0E1A);
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow:-24px 0 60px -20px rgba(8,15,30,.45);
  padding-top:var(--safe-top,0px);
  padding-right:var(--safe-right,0px);
  will-change:transform;
}
.emea-drawer-ov.open .emea-drawer{ transform:translateX(0); }

.emea-drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid #EEF1F6; flex:none;
}
.emea-drawer-head .logo-mark{ width:78px; height:auto; display:block; }
.emea-drawer-title{ font-size:13px; font-weight:800; letter-spacing:.02em; color:var(--ink-muted,#6B7280); text-transform:uppercase; }
.emea-drawer-x{
  width:40px; height:40px; flex:none; border:none; background:none; border-radius:10px;
  display:grid; place-items:center; color:var(--ink,#0A0E1A); cursor:pointer;
}
.emea-drawer-x:hover{ background:#F1F4FA; }
.emea-drawer-x svg{ width:22px; height:22px; }

.emea-drawer-nav{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:10px 12px; }
.emea-drawer-nav a{
  display:flex; align-items:center; gap:12px;
  padding:14px; border-radius:12px;
  font-size:16px; font-weight:600; line-height:1.2;
  color:var(--ink,#0A0E1A); text-decoration:none;
  transition:background .15s ease, color .15s ease;
}
.emea-drawer-nav a:hover, .emea-drawer-nav a:active{ background:#F1F4FA; }
.emea-drawer-nav a.active{ color:var(--brand,#004AAD); background:rgba(0,74,173,.07); }

.emea-drawer-foot{
  flex:none; display:flex; flex-direction:column; gap:10px;
  padding:14px 16px calc(16px + var(--safe-bottom,0px));
  border-top:1px solid #EEF1F6;
}
.emea-drawer-foot a, .emea-drawer-foot button{
  display:flex; align-items:center; justify-content:center; gap:10px;
  height:48px; border-radius:999px; font:inherit; font-size:15px; font-weight:700;
  text-decoration:none; cursor:pointer; border:none; width:100%;
}
.emea-drawer-foot .d-ghost{ background:#fff; color:var(--brand,#004AAD); border:1.5px solid rgba(0,74,173,.20); }
.emea-drawer-foot .d-primary{ background:var(--brand,#004AAD); color:#fff; }
.emea-drawer-foot .d-logout{ background:#FEECEC; color:#C0362C; }

/* Blocco scroll del body quando il drawer è aperto */
body.emea-drawer-open{ overflow:hidden; touch-action:none; }

/* Desktop: il drawer non esiste (la nav orizzontale è visibile) */
@media (min-width:1025px){ .emea-drawer-ov{ display:none !important; } }

@media (prefers-reduced-motion:reduce){
  .emea-drawer, .emea-drawer-ov{ transition:none !important; }
}