/* ================================================================
   NAVBAR — verbatim da Figma Design System
   public: node 146:2 · logged-in: node 834:2 (file BpYfeJDs9QdXWFNVbaf74R)
   Aggiornata 2026-06-13: top bar 50 + main bar 80 = 130px,
   user widget + bell nello stato loggato, arrow come triangolo CSS.
================================================================ */
.navbar {
  width: 100%;
  height: 130px;
  display: flex;
  flex-direction: column;
  overflow: visible;          /* serve al dropdown user-menu */
  position: sticky;
  top: 0;
  z-index: 1000;
}

.topbar { background: #fff; height: 50px; flex-shrink: 0; width: 100%; overflow: hidden; }
.topbar-inner {
  max-width: var(--max); margin: 0 auto; height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  /* 120 come il contenuto: con max-width 1440 fa una colonna di 1200. */
  padding: 0 120px;
}

.topbar-left { display: flex; gap: 16px; align-items: center; }

.btn-danger-xs {
  background: var(--c-red); width: 90px; height: 30px; padding: 0 12px;
  border-radius: 4px; display: flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.btn-danger-xs span { font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap; }

.topbar-link { font-size: 14px; font-weight: 400; color: var(--c-gray); white-space: nowrap; text-decoration: none; }
.topbar-sep  { background: var(--c-light-gray); height: 12px; width: 1px; flex-shrink: 0; display: block; }

.social-icons { display: flex; gap: 12px; align-items: center; }
/* display:block esplicito: da 0.13.0 le icone sono <a> e non più <div>, e un
   inline ignorerebbe width/height. */
.social-icon  { display: block; width: 20px; height: 20px; overflow: hidden; position: relative; flex-shrink: 0; }
.social-icon img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; max-width: none; }

.social-icon-x { display: block; width: 20px; height: 20px; overflow: hidden; position: relative; flex-shrink: 0; }
.social-icon-x .ix-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; max-width: none; }
.social-icon-x .ix-overlay { position: absolute; top: 23.04%; right: 23.61%; bottom: 23.2%; left: 23.69%; }
.social-icon-x .ix-overlay img { width: 100%; height: 100%; display: block; max-width: none; }

.mainbar { background: var(--c-primary); height: 80px; flex-shrink: 0; width: 100%; overflow: visible; }
.mainbar-inner {
  max-width: var(--max); margin: 0 auto; height: 100%;
  display: flex; align-items: center; justify-content: center;
  /* idem: la navbar sporgeva di 60px per lato sul contenuto. */
  padding: 0 120px;
}

.slot-logo  { width: 340px; height: 100%; display: flex; align-items: center; flex-shrink: 0; }
.logo-link  { display: flex; align-items: center; text-decoration: none; }
.logo       { height: 42px; width: 300px; border-radius: 4px; position: relative; flex-shrink: 0; }
.logo-inner { position: absolute; height: 40px; width: 298px; left: 2px; top: 0; overflow: hidden; }
/* Logo bianco unico SVG (sostituisce emblem+text separati) */
.logo-inner .logo-full { position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 100%; width: auto; max-width: none; display: block; }

.slot-menu {
  flex: 1 0 0; height: 100%;
  display: flex; align-items: center; justify-content: center;
  gap: 18px; overflow: visible; min-width: 0;
}

.nav-item { display: flex; flex-direction: column; height: 100%; align-items: center; flex-shrink: 0; position: relative; }
.nav-item--active { border-bottom: 3px solid var(--c-accent-green); }
.nav-label {
  flex: 1 0 0; display: flex; align-items: center; justify-content: center;
  gap: 5px; padding: 0 4px; overflow: hidden; white-space: nowrap;
}
.nav-label-text          { font-size: 18px; color: #fff; flex-shrink: 0; }
.nav-label-text--active  { font-weight: 600; }
.nav-label-text--regular { font-weight: 400; }
/* Arrow = triangolo CSS 9×7 (indip. dal font di fallback) */
.nav-arrow {
  width: 9px; height: 7px; flex-shrink: 0; font-size: 0;
  background: rgba(255,255,255,0.9);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.nav-arrow--hidden { opacity: 0; }

.nav-item > a { display: contents; text-decoration: none; }

/* Dropdown sottomenu (es. Associazione › Struttura organizzativa, Sezioni regionali).
   Nessuno spec Figma dedicato: riusa il linguaggio visivo delle card
   "In questa sezione" già stabilito nelle pagine Associazione. */
.nav-dropdown-panel {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 8px; z-index: 1001;
  background: #fff; border-radius: 10px;
  box-shadow: 0 12px 32px rgba(13, 23, 36, 0.16);
  padding: 8px; min-width: 220px;
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .15s ease;
}

/* Ponte invisibile sul gap di 8px creato da margin-top: senza, spostando il
   mouse lentamente dalla voce di menu al pannello l'hover cade a meta strada
   e il dropdown si chiude prima che si possa cliccare. */
.nav-dropdown-panel::before {
  content: "";
  position: absolute;
  top: -8px; left: 0; right: 0; height: 8px;
}
.nav-item--has-dropdown:hover .nav-dropdown-panel,
.nav-item--has-dropdown:focus-within .nav-dropdown-panel {
  opacity: 1; visibility: visible; pointer-events: auto;
}
.nav-dropdown-link {
  padding: 10px 14px; border-radius: 6px;
  font-size: 15px; font-weight: 400; color: var(--c-dark);
  text-decoration: none; white-space: nowrap;
}
.nav-dropdown-link:hover,
.nav-dropdown-link:focus-visible { background: var(--c-bg-light); color: var(--c-primary); }
.nav-dropdown-link--active { color: var(--c-primary); font-weight: 600; }

.slot-actions {
  width: 257px; height: 100%;
  display: flex; align-items: center; justify-content: flex-end;
  gap: 16px; overflow: visible; flex-shrink: 0;
}
/* Loggato: la riga widget+campanella+ricerca può eccedere i 257px fissi */
.slot-actions:has(.user-widget) { width: auto; min-width: 257px; }

.btn-outline-white {
  border: 1.5px solid #fff; height: 40px; padding: 0 30px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  text-decoration: none; cursor: pointer;
}
.btn-outline-white span { font-size: 18px; font-weight: 600; color: #fff; white-space: nowrap; text-align: center; }

/* Dual label: full on desktop, short on mobile */
.btn-label--full  { display: inline; }
.btn-label--short { display: none; }

.icon-search { width: 24px; height: 24px; position: relative; flex-shrink: 0; cursor: pointer; display: block; }
.icon-search svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; color: #fff; }

/* ── User widget (logged-in, node 835:34) ─────────────────────── */
.user-widget {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  height: 40px; padding-right: 12px;
  flex-shrink: 0; cursor: pointer;
  background: none; border: 0; font-family: var(--f);
}
.user-widget__avatar {
  width: 40px; height: 40px; border-radius: 20px; background: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden;
}
.user-widget__avatar span { color: var(--c-primary); font-size: 16px; font-weight: 700; letter-spacing: 0.4px; text-align: center; }
.user-widget__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.user-widget__name { color: #fff; font-size: 15px; font-weight: 700; white-space: nowrap; }
.user-widget__chevron {
  width: 9px; height: 7px; flex-shrink: 0; font-size: 0;
  background: #fff; clip-path: polygon(0 0, 100% 0, 50% 100%);
  transition: transform 0.15s ease;
}
.user-widget:hover .user-widget__chevron,
.user-widget:focus-within .user-widget__chevron { transform: rotate(180deg); }

/* Dropdown (chevron → menu: profilo + logout) */
.user-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 180px; background: #fff; border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  padding: 6px 0; display: none; z-index: 1002;
}
.user-widget:hover .user-menu,
.user-widget:focus-within .user-menu { display: block; }
/* Ponte invisibile sullo stacco di 8px fra il nome e la tendina:
   senza, scendendo col mouse si esce dal widget prima di entrare nel
   menu, :hover cade e la tendina si chiude sotto il puntatore. Alto
   quanto lo stacco qui sopra: se cambia uno, cambia l'altro. */
.user-menu::before {
  content: ''; position: absolute; left: 0; right: 0;
  bottom: 100%; height: 10px;
}
.user-menu a {
  display: block; padding: 10px 16px;
  font-size: 15px; font-weight: 500; color: var(--c-dark);
  text-decoration: none; white-space: nowrap;
}
.user-menu a:hover { background: var(--c-bg-light); }
.user-menu a.user-menu__logout { color: var(--c-red); border-top: 1px solid var(--c-border); }
/* Prima voce: è dove si va a prendere i contenuti riservati, non una
   voce qualsiasi. Marcata quel tanto che basta dentro una tendina. */
.user-menu a.user-menu__primo { font-weight: 700; color: var(--c-primary); }

/* ── Bell notifiche (node 835:28) — badge statico, nessun backend ── */
.bell { position: relative; width: 24px; height: 24px; flex-shrink: 0; cursor: pointer; }
/* l'SVG Figma è esportato capovolto (nel DS ha rotate-180 + scale-x-100): lo raddrizzo */
.bell > svg { position: absolute; left: 0; top: 0; width: 24px; height: 24px; display: block; color: #fff; }
.bell__badge {
  position: absolute; top: -4px; left: 12px;
  width: 16px; height: 16px; background: var(--c-red);
  border: 1.5px solid #fff; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.bell__badge span { color: #fff; font-size: 10px; font-weight: 700; line-height: 1; }

.icon-hamburger {
  width: 24px; height: 24px; position: relative; flex-shrink: 0;
  cursor: pointer; background: none; border: none; padding: 0;
  display: none;                 /* solo mobile (Figma desktop non ha hamburger) */
}
.icon-hamburger .bar {
  position: absolute; background: #fff; height: 2px; width: 24px;
  left: 0; border-radius: 1px;
  transition: transform 0.22s ease, opacity 0.18s ease;
}
.icon-hamburger .bar-1 { top: 3px; }
.icon-hamburger .bar-2 { top: 10px; }
.icon-hamburger .bar-3 { top: 17px; }
.icon-hamburger--open .bar-1 { transform: translateY(7px) rotate(45deg); }
.icon-hamburger--open .bar-2 { opacity: 0; transform: scaleX(0); }
.icon-hamburger--open .bar-3 { transform: translateY(-7px) rotate(-45deg); }

/* Search dropdown */
.navbar-search-dropdown {
  position: absolute; top: 130px; left: 0; right: 0;
  background: var(--c-primary); padding: 20px 80px;
  z-index: 999; box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.navbar-search-dropdown[hidden] { display: none; }
.navbar-search-form {
  max-width: var(--max); margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
}
.navbar-search-form input[type="search"] {
  flex: 1; height: 44px; padding: 0 16px;
  border: 1px solid rgba(255,255,255,0.3); border-radius: 4px;
  background: rgba(255,255,255,0.1); color: #fff;
  font-family: var(--f); font-size: 16px;
}
.navbar-search-form input[type="search"]::placeholder { color: rgba(255,255,255,0.55); }
.navbar-search-submit {
  background: var(--c-secondary); border: none; height: 44px; padding: 0 20px;
  border-radius: 4px; font-family: var(--f); font-size: 16px; font-weight: 600;
  color: #fff; cursor: pointer; white-space: nowrap;
}

/* ================================================================
   NAV DRAWER (hamburger panel) — right-side slide-in
================================================================ */
.nav-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1000;
  opacity: 0; pointer-events: none;
  transition: opacity 0.28s ease;
}
.nav-overlay--visible { opacity: 1; pointer-events: auto; }

.nav-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 320px; max-width: 100vw;
  background: var(--c-primary);
  z-index: 1001;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
}
.nav-drawer--open { transform: translateX(0); }

.nav-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
  flex-shrink: 0;
}
.nav-drawer-logo-link { display: block; text-decoration: none; }
.nav-drawer-logo { width: 200px; height: 27px; position: relative; }
.nav-drawer-logo .logo-inner { position: absolute; height: 27px; width: 200px; left: 0; top: 0; overflow: hidden; }

.nav-drawer-close {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.6); font-size: 24px; line-height: 1;
  padding: 4px; flex-shrink: 0; font-family: var(--f);
}
.nav-drawer-close:hover { color: #fff; }
/* L'icona e' un svg in linea a 1em: prende i 24px dal font-size e il colore
   da currentColor, hover compreso. display:block toglie lo spazio di
   baseline che l'svg inline si porta dietro e che sbilanciava il pulsante. */
.nav-drawer-close svg { display: block; }

.nav-drawer-nav { flex: 1; overflow-y: auto; }
.nav-drawer-nav ul { list-style: none; padding: 0; margin: 0; }
.nav-drawer-nav li { border-bottom: 1px solid rgba(255,255,255,0.1); }
.nav-drawer-nav li a {
  display: block; padding: 16px 24px;
  font-family: var(--f); font-size: 20px; font-weight: 500;
  color: #fff; text-decoration: none;
}
.nav-drawer-nav li a:hover { background: rgba(255,255,255,0.06); }
.nav-drawer-nav li.current-menu-item > a,
.nav-drawer-nav li.current-menu-ancestor > a,
.nav-drawer-nav li.current-menu-item > a {
  font-weight: 600; color: #fff;
  background: rgba(255,255,255,.06);
  box-shadow: inset 4px 0 0 0 var(--c-accent-green);
}

.nav-drawer-foot {
  border-top: 1px solid rgba(255,255,255,0.14);
  padding: 24px;
  display: flex; flex-direction: column; gap: 20px;
  flex-shrink: 0;
}
.nav-drawer-foot .btn-outline-white {
  height: 46px; padding: 0 20px; width: 100%; justify-content: center;
}
.nav-drawer-foot .btn-outline-white span { font-size: 17px; }
.nav-drawer-social { display: flex; gap: 16px; justify-content: center; align-items: center; }

/* ── Logout button (drawer / mobile) ───────────────────────────── */
.btn-logout {
  height: 40px; padding: 0 12px;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; flex-shrink: 0; cursor: pointer;
  color: #fff; font-size: 15px; font-weight: 500; letter-spacing: 0.02em;
  white-space: nowrap; opacity: 0.85; transition: opacity 0.15s ease;
}
.btn-logout:hover, .btn-logout:focus { opacity: 1; text-decoration: underline; }
.btn-logout__label { color: #fff; }
.nav-drawer-foot .btn-logout--drawer {
  height: 40px; padding: 0 18px;
  border: 1.5px solid rgba(255,255,255,0.4); border-radius: 4px;
  width: 100%; justify-content: center;
}
.nav-drawer-foot .btn-logout--drawer span { font-size: 16px; font-weight: 500; color: #fff; }

/* ================================================================
   RESPONSIVE — < 1280 px
   Il contenuto delle pagine passa da 120 a 40: le due fasce fanno
   lo stesso, o tornerebbero a sporgere. Sotto i 1024 comanda la
   regola qui sotto, che la navbar compatta vuole più stretta.
================================================================ */
@media (max-width: 1279px) {
  .topbar-inner,
  .mainbar-inner { padding: 0 40px; }
}

/* ================================================================
   RESPONSIVE — < 1024 px
================================================================ */
@media (max-width: 1023px) {
  .topbar { display: none; }

  .navbar  { height: 64px; }
  .mainbar { height: 64px; }
  .mainbar-inner { padding: 0 20px; justify-content: space-between; }

  .slot-logo { width: auto; flex: 1 1 0; min-width: 0; }
  .logo-link { display: block; }
  .logo      { width: 220px; height: 31px; }
  .logo-inner{ width: 218px; height: 29px; left: 1px; }

  .slot-menu { display: none; }

  .btn-outline-white { display: flex; padding: 0 14px; height: 34px; }
  .btn-outline-white span { font-size: 16px; }
  .btn-label--full  { display: none; }
  .btn-label--short { display: inline; }

  .icon-hamburger { display: block; }

  .slot-actions { width: auto; gap: 12px; }
  .slot-actions:has(.user-widget) { min-width: 0; }

  /* Loggato su mobile: solo avatar + hamburger; nome/chevron/menu/bell nel drawer */
  .user-widget { padding-right: 0; gap: 0; }
  .user-widget__name,
  .user-widget__chevron,
  .user-menu,
  .bell { display: none; }

  .navbar-search-dropdown { top: 64px; padding: 16px 20px; }
}

@media (max-width: 479px) {
  .mainbar-inner { padding: 0 16px; }
  .logo      { width: 180px; height: 26px; }
  .logo-inner{ width: 178px; height: 24px; }
}

/* ---- Fix da revisione indipendente 2026-08-14 ----
   Nel drawer le voci di secondo livello erano indistinguibili dalle
   loro capofila (stesso padding, corpo e colore).
   L'hamburger e' 24x24: area di tocco allargata a 44x44 con uno
   pseudo-elemento, per non spostare le tre barre (assolute). */
@media (max-width:1023px){
  .nav-drawer-nav li li a{padding-left:44px;font-size:17px;color:rgba(255,255,255,.82)}
  .nav-drawer-nav li li li a{padding-left:64px}
  .icon-hamburger{position:relative}
  .icon-hamburger::after{content:"";position:absolute;inset:-10px}
}

/* ---- Fix da revisione indipendente 2026-08-14 (round 2) ----
   Sotto i 360px il logo da 220px e il bottone LOG IN si sovrapponevano
   (27x24px di sormonto su ogni pagina). */
@media (max-width:359px){
  .mainbar-inner{padding:0 12px}
  .logo      { width: 168px; height: 24px; }
  .logo-inner{ width: 166px; height: 22px; }
  .slot-actions{gap:8px}
  .btn-outline-white{padding:0 10px}
  .btn-outline-white span{font-size:15px}
}

/* ---- Logo sotto i 360px (2026-10-23) ----
   A 320px la scritta del logo toccava il bottone MY ANMA. Resta il marchio:
   nel disegno del logo (viewBox 300 x 42) il marchio e il ™ finiscono a
   x=121 e la scritta parte da 133, quindi a 30px di altezza il marchio è
   largo 121/300 x 214 = 87px e il resto lo taglia l'overflow di .logo-inner. */
@media (max-width:359px){
  .logo      { width: 88px; height: 30px; }
  .logo-inner{ width: 87px; height: 30px; left: 0; }
}