/* ==========================================================================
   FONDOPRO — NAVBAR.CSS
   Stili del componente Header/Navbar. Separato da style.css per tenere
   quest'ultimo come solo "livello fondamenta" (token, reset, tipografia) e
   isolare qui la logica visiva, spesso più complessa, dei singoli
   componenti. Da qui in poi ogni componente avrà un proprio file CSS
   (es. hero.css, footer.css) che importa/consuma le variabili di style.css.

   Struttura dell'header:
   .fp-topbar   -> fascia superiore sottile (social + Area riservata), SEMPRE
                   blu solido, su ogni pagina e in ogni stato di scroll.
   .fp-mainnav  -> fascia principale (logo + voci di menu). Ha 2 stati:
                     - trasparente/in negativo, solo sulla Home SOPRA l'hero
                     - solida (bianca), di default su tutte le pagine interne
                       e sulla Home dopo 50px di scroll.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HEADER — contenitore fisso
   -------------------------------------------------------------------------- */
.fp-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1030; /* sopra il contenuto, sotto eventuali modali Bootstrap (1055) */
}

/* Le pagine SENZA hero fullscreen (tutte tranne la Home) non hanno nulla
   "sotto" l'header trasparente: il contenuto deve iniziare sotto di esso.
   Applicata a <main> dal markup della pagina. */
.fp-page-offset {
  padding-top: var(--navbar-height);
}

/* --------------------------------------------------------------------------
   OVERLAY SOTTO-MENU — oscura il contenuto sotto la testata quando un
   dropdown è aperto (attivato via JS su show/hide.bs.dropdown).
   z-index 1020: sopra a qualunque contenuto di pagina (compreso il
   contenitore sticky CTA/torna-su, 1025... vedi nota sotto) ma SEMPRE
   sotto l'header (1030), che deve restare visibile e interattivo. */
.fp-nav-overlay {
  position: fixed;
  top: var(--navbar-height);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1027; /* sotto .fp-header (1030), sopra .fp-sticky-actions (1025) */
  background-color: rgba(0, 0, 0, 0.5);
  /* Trasparenza satinata: oscura E sfoca leggermente il contenuto di
     pagina sottostante quando un sottomenu è aperto (il pannello del
     sottomenu stesso, invece, è bianco solido pieno — vedi .fp-megamenu). */
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* --transition-fast (150ms) invece di --transition-base (250ms): più
     scattante in apertura menu mobile, ma non istantanea — evita l'effetto
     "brusco" di una comparsa a scatto. */
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
}
.fp-nav-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto; /* blocca i click sul contenuto sottostante e li
                            lascia comunque propagare a document, così il
                            click sull'overlay chiude il dropdown tramite
                            la stessa gestione "click esterno" di Bootstrap */
}

/* --------------------------------------------------------------------------
   OVERLAY INTERNO ALLA MAINNAV — oscura anche lo sfondo della barra del
   menu principale (non solo il contenuto sottostante), restando SOTTO al
   contenuto (logo/voci di menu, sollevato con z-index:2 su
   .fp-mainnav > .container-xl) grazie all'ordine nel markup + z-index qui.
   -------------------------------------------------------------------------- */
.fp-mainnav__overlay {
  position: absolute;
  /* bottom -1px: copre anche il bordo inferiore (1px trasparente) della
     mainnav. Con inset:0 l'overlay si fermava al bordo, lasciando una
     riga di 1px NON oscurata tra menu principale e sottomenu: sopra
     l'hero appariva come una linea chiara. */
  inset: 0 0 -1px 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
}
.fp-mainnav__overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

/* ECCEZIONE: quando la navbar è in stato "solido" (sfondo bianco pieno) —
   cioè sulla Home dopo lo scroll, o su QUALSIASI pagina interna, dato che
   condividono la stessa condizione già usata altrove nel file — il bianco
   deve sempre prevalere: l'oscuramento della mainnav va soppresso, anche
   se il JS lo ha comunque attivato (che continua invece a valere per
   l'overlay di pagina sottostante, .fp-nav-overlay, mai influenzato da
   questa regola). */
body.fp-scrolled .fp-mainnav__overlay,
body:not(.page-home) .fp-mainnav__overlay {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* --------------------------------------------------------------------------
   TOPBAR — fascia utility superiore (sempre solida)
   -------------------------------------------------------------------------- */
.fp-topbar {
  background-color: var(--color-blue-primary-dark);
  color: #ffffff;
  font-size: 1rem; /* calibrato: un filo più grande, versione definitiva su richiesta */
}

.fp-topbar .container-fluid,
.fp-topbar .container-xl {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
  min-height: 34px;
}

.fp-topbar__social {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.fp-topbar__social a {
  color: #ffffff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
}
.fp-topbar__social a:hover,
.fp-topbar__social a:focus-visible {
  background-color: rgba(255, 255, 255, 0.18);
}

.fp-topbar__label {
  opacity: 0.9;
}

.fp-topbar__divider {
  width: 1px;
  height: 14px;
  background-color: rgba(255, 255, 255, 0.35);
}

.fp-topbar__area-riservata {
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.fp-topbar__area-riservata i {
  flex-shrink: 0;
}

/* Menu "Area riservata" — pattern disclosure (bottone + lista di link),
   al posto della precedente <select> nativa, la cui tendina è disegnata
   dal sistema operativo e non accetta padding né cursore in modo
   affidabile. Il bottone mantiene l'aspetto di prima (testo bianco,
   freccia disegnata a mano, nessuna sottolineatura in nessuno stato); la
   lista è un pannello bianco con voci ariose e cursore a mano.
   Apertura/chiusura, Esc e click esterno: js/navbar.js. */

/* La topbar deve stare sopra la mainnav (che nel markup viene dopo),
   altrimenti il pannello aperto finirebbe sotto logo e menu. */
.fp-topbar {
  position: relative;
  z-index: 3;
}

.fp-area-menu {
  position: relative;
}

.fp-area-menu__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 28px; /* area cliccabile ≥ 24px (WCAG 2.5.8) senza alzare la topbar */
  padding: 0;
  border: none;
  background: transparent;
  color: #ffffff;
  font-family: inherit;
  font-size: inherit;
  font-weight: var(--fw-medium);
  line-height: 1.3;
  cursor: pointer;
  opacity: 0.9;
  transition: opacity var(--transition-fast);
}
.fp-area-menu__toggle:hover,
.fp-area-menu__toggle:focus-visible,
.fp-area-menu__toggle[aria-expanded="true"] {
  opacity: 1;
}
.fp-area-menu__toggle i {
  flex-shrink: 0;
}

.fp-area-menu__caret {
  width: 11px;
  height: 8px;
  margin-left: var(--space-1);
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}
.fp-area-menu__toggle[aria-expanded="true"] .fp-area-menu__caret {
  transform: rotate(180deg);
}

/* Pannello: allineato a destra sotto il bottone (la topbar è allineata a
   destra, così non esce mai dallo schermo). */
.fp-area-menu__list {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  min-width: 200px;
  margin: 0;
  padding: var(--space-2);
  list-style: none;
  background-color: #ffffff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.fp-area-menu__list[hidden] {
  display: none;
}

.fp-area-menu__list a {
  display: block;
  padding: var(--space-2) var(--space-4); /* voci non più attaccate al bordo */
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-size: 1.125rem;
  font-weight: var(--fw-medium);
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.fp-area-menu__list a:hover,
.fp-area-menu__list a:focus-visible {
  background-color: var(--color-blue-primary-light);
  color: var(--color-blue-primary);
}
/* Focus da tastiera dentro il pannello: anello interno alla voce, così
   non viene tagliato dal bordo del pannello. */
.fp-area-menu__list a:focus-visible {
  outline-offset: -3px;
  box-shadow: inset 0 0 0 5px var(--focus-ring-inner);
}

/* --------------------------------------------------------------------------
   MAINNAV — fascia principale con logo e voci di menu
   -------------------------------------------------------------------------- */
.fp-mainnav {
  position: relative; /* ancoraggio per #fpNavCollapse in posizione assoluta su mobile */
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 100px; /* aumentata proporzionalmente al logo (era 84px per un logo da 65px) */
  padding-block: var(--space-2);
  background-color: #ffffff;
  /* Nello stato solido (scroll/pagine interne) nessun bordo: la
     separazione dal contenuto sottostante è affidata solo all'ombra qui
     sotto. Il bordo pieno resta un'esclusiva dello stato hero (vedi
     override sotto), dove non c'è ombra a fare da separatore. */
  border-bottom: 1px solid transparent;
  /* Ombra "media" (non solo shadow-sm): nello stato solido la navbar deve
     leggersi come un pannello sollevato SOPRA il contenuto sottostante
     (Hero incluso, quando la Home è scrollata), non semplicemente
     appoggiato. Vale sia per la Home dopo i 50px di scroll (.fp-scrolled)
     sia per tutte le pagine interne, che nascono già in questo stato. */
  box-shadow: var(--shadow-md);
  transition: background-color var(--transition-base), box-shadow var(--transition-base);
}

/* L'overlay interno (vedi sotto) è un fratello di questo container, ma
   nel markup viene PRIMA: qui lo solleviamo esplicitamente sopra di esso
   con z-index, così logo e voci di menu restano sempre nitidi e
   cliccabili anche quando lo sfondo della mainnav viene oscurato. */
.fp-mainnav > .container-xl {
  position: relative;
  z-index: 2;
}

/* Stato "in negativo": attivo SOLO sulla Home (body.page-home), e solo
   finché il JS non aggiunge .fp-scrolled al body dopo 50px di scroll. */
/* Stato "in negativo": attivo SOLO sulla Home (body.page-home), e solo
   finché il JS non aggiunge .fp-scrolled al body dopo 50px di scroll.
   Versione approvata dal cliente (home.png): nessuno sfondo/barra dietro
   al menu, completamente trasparente sopra il video — il contrasto del
   testo è garantito dallo scrim del video stesso (vedi hero.css), non da
   un fondo scuro sulla navbar. */
body.page-home:not(.fp-scrolled) .fp-mainnav {
  background: transparent;
  box-shadow: none;
  /* border-bottom-color: #ffffff; */
}

/* --- Logo: presente sempre, tranne sulla Home prima dello scroll (dove
   il logo "vive" solo, grande, al centro dell'Hero — vedi hero.css) --- */
.fp-logo {
  display: inline-flex;
  align-items: center;
  height: 78px; /* ulteriormente ingrandito su richiesta (era 65px) */
  text-decoration: none;
}

.fp-logo__img {
  display: block;
  max-width: none; /* BUGFIX: il reset globale (style.css) impone max-width:100% a ogni img; combinato con l'altezza fissa qui sotto, un contenitore più stretto della larghezza naturale del logo lo schiacciava orizzontalmente invece di lasciarlo scalare in proporzione */
  height: 78px; /* ulteriormente ingrandito su richiesta (era 65px) */
  width: auto;
  transition: opacity var(--transition-base);
}

/* Su schermi piccoli un logo/banda di queste dimensioni occuperebbe
   troppo spazio verticale: stessa proporzione, ridimensionata per
   mobile. --navbar-height (style.css) ha il proprio valore mobile qui
   sotto, per mantenere corretti gli offset (hero, sticky, scroll). */
@media (max-width: 767.98px) {
  .fp-logo,
  .fp-logo__img {
    height: 58px;
  }
  .fp-mainnav {
    min-height: 78px;
  }
  :root {
    --navbar-height: 112px; /* topbar (~34px) + mainnav mobile (~78px) */
  }
}

/* Sulla Home, prima dello scroll: nessun logo in navbar — c'è già,
   grande, al centro dell'Hero. Compare (in versione colorata, essendo la
   navbar ormai solida) solo dopo i 50px di scroll, e sempre presente su
   tutte le pagine interne (che non hanno mai lo stato "hero"). */
body.page-home:not(.fp-scrolled) .fp-logo {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* NOTA IMPLEMENTATIVA: img/logo/logo-color-payoff.svg è il nuovo logotipo
   ufficiale fornito dal cliente (con il payoff "Fondo pensione
   complementare a capitalizzazione per i professionisti" incorporato
   nell'immagine), usato qui in navbar e nell'Hero (vedi hero.css) al
   posto del precedente logo-color.svg/logo-white.svg. Il footer
   (footer.css) resta invece sul vecchio logo-white.svg, senza payoff, su
   richiesta esplicita: nessun aggiornamento lì per ora. */

/* --- Voci di menu --- */
.fp-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* BUGFIX allineamento a destra: la classe Bootstrap ".navbar-collapse"
   (su #fpNavCollapse) porta di serie "flex-grow: 1", quindi quel
   contenitore si espande sempre a riempire lo spazio residuo dopo il
   logo — vanificando un margin-left:auto messo sul contenitore stesso,
   perché non resta spazio libero da "spingere". La soluzione corretta è
   allineare a destra il CONTENUTO (.fp-nav), non il suo contenitore. */
@media (min-width: 1200px) {
  .fp-nav {
    justify-content: flex-end;
    flex: 1 1 auto;
  }
}

/* Menu orizzontale solo da 1200px: con la voce "Home" le 9 voci non
   stanno più accanto al logo tra 992 e 1199px (le etichette andavano a
   capo su due righe), quindi fino a 1199px si usa il menu a comparsa
   (hamburger). Tra 1200 e 1399px (contenitore di 1140px) lo spazio tra
   le voci scende a 16px; le etichette non vanno mai a capo. */
@media (min-width: 1200px) {
  .fp-nav .nav-link {
    white-space: nowrap;
  }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .fp-nav {
    gap: var(--space-3);
  }
}

.fp-nav .nav-link {
  color: var(--color-text-primary);
  font-weight: var(--fw-regular);
  font-size: 1.125rem; /* leggermente più grande (era 1.0625rem/17px, ora 18px) */
  padding: var(--space-2) 0;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color var(--transition-fast); /* il colore del testo NON cambia più in hover, solo la sottolineatura */
}

/* Hover/focus: appare solo la sottolineatura, nello stesso colore già in
   uso dal testo (currentColor) — mai blu, né in versione scura né bianca. */
.fp-nav .nav-link:hover,
.fp-nav .nav-link:focus-visible {
  border-bottom-color: currentColor;
}

/* Voce attiva (pagina/sezione corrente): resta sottolineata sempre, non
   solo in hover — stesso currentColor, quindi automaticamente bianca in
   stato "hero" e nera/grigia in stato solido, senza bisogno di regole
   separate per i due stati (vedi sotto: bastava il colore base). */
.fp-nav .nav-link.active {
  border-bottom-color: currentColor;
}

/* In stato "in negativo" (Home, pre-scroll): link bianchi. Hover/focus/
   active ereditano automaticamente il bianco tramite currentColor qui
   sopra, senza bisogno di regole dedicate. */
body.page-home:not(.fp-scrolled) .fp-nav .nav-link {
  color: #ffffff;
  /* Stesso alone scuro a tre livelli del testo dell'Hero (hero.css):
     leggibilità sul video senza riquadri scuri. */
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.75),
    0 1px 3px rgba(0, 0, 0, 0.6),
    0 0 14px rgba(0, 0, 0, 0.45);
}

/* --- Dropdown (sottomenu di secondo livello) ---------------------------
   Bootstrap gestisce l'apertura/chiusura aggiungendo/rimuovendo la classe
   .show sul .dropdown-menu, ma di default lo fa con uno scatto secco
   (display: none -> block). Per ottenere il fade-in sobrio richiesto,
   teniamo il menu sempre "display: block" nel flusso di rendering e
   pilotiamo la visibilità reale con opacity/transform/visibility, che
   possiamo animare in transizione. */
.fp-nav .dropdown-menu {
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  min-width: 260px;
  /* Bianco solido pieno (non più vetro satinato/azzurrino): la
     trasparenza satinata resta sulle due sovrapposizioni oscuranti
     (header e resto pagina, vedi sopra), MAI sul pannello del sottomenu
     stesso, che deve restare perfettamente leggibile. */
  background-color: #ffffff;
}

.fp-nav .dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   MEGAMENU — fascia orizzontale a tutta larghezza (solo desktop, ≥1200px)
   Il markup del pannello (vedi index.html) non è più un semplice <ul>, ma
   un contenitore .fp-megamenu con un wrapper .container-xl al suo interno:
   così la fascia è larga quanto l'intera finestra, ma i link restano
   allineati alla stessa griglia/margini del resto del sito.
   Bootstrap non gestisce il posizionamento di questi pannelli via Popper
   (i toggle hanno data-bs-display="static"): siamo liberi di riposizionarli
   via CSS puro, come già accadeva prima di questa modifica.
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .fp-nav .dropdown-menu.fp-megamenu {
    position: fixed;
    top: var(--navbar-height); /* appena sotto il bordo inferiore della mainnav, senza sovrastarla */
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    min-width: 0;
    border-radius: 0;
    padding: var(--space-5) 0;
    box-shadow: var(--shadow-lg);
  }

  .fp-megamenu__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Stato "in negativo" (Home, pre-scroll): il megamenu resta coerente
     con la navbar trasparente sopra l'hero — nessuno sfondo/ombra propri,
     testi bianchi. Stessa logica già usata per navbar/logo/hamburger in
     questo stato: il contrasto lo garantisce lo scrim del video (vedi
     hero.css), non un fondo proprio del pannello. Vale SOLO qui in
     desktop: sul pannello mobile (sotto), che ha un proprio sfondo
     dedicato sempre presente, questo stato trasparente non si applica
     mai — altrimenti il testo bianco sparirebbe su un pannello chiaro. */
  body.page-home:not(.fp-scrolled) .fp-nav .dropdown-menu.fp-megamenu {
    background-color: transparent;
    box-shadow: none;
  }
  body.page-home:not(.fp-scrolled) .fp-nav .dropdown-item {
    color: #ffffff; /* la sottolineatura in hover usa currentColor: eredita il bianco automaticamente */
  }
}

.fp-nav .dropdown-item {
  position: relative;
  display: inline-block;
  color: var(--color-text-primary);
  background-color: transparent;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  transition: color var(--transition-fast);
}
/* Sottolineatura fluida: una barra sottile che si espande da sinistra a
   destra al passaggio del mouse/focus, colore neutro (currentColor) —
   nessun accenno di blu/azzurrino, come da richiesta. */
.fp-nav .dropdown-item::after {
  content: '';
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 2px;
  height: 2px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base);
}
.fp-nav .dropdown-item:hover,
.fp-nav .dropdown-item:focus-visible {
  background-color: transparent;
  color: var(--color-text-primary);
}
.fp-nav .dropdown-item:hover::after,
.fp-nav .dropdown-item:focus-visible::after {
  transform: scaleX(1);
}
/* Voce di secondo livello corrente ("you are here"): stessa sottolineatura
   permanente già usata per il livello principale (.nav-link.active), non
   solo in hover/focus. */
.fp-nav .dropdown-item.active {
  color: var(--color-text-primary);
}
.fp-nav .dropdown-item.active::after {
  transform: scaleX(1);
}

/* Caret dei dropdown: eredita il colore corrente (bianco/blu) senza bisogno
   di override separati, essendo bordi in currentColor via Bootstrap */
.fp-nav .dropdown-toggle::after {
  vertical-align: 0.15em;
  transition: transform var(--transition-fast);
}
.fp-nav .dropdown-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
}
/* Voce di menu principale relativa al sottomenu attualmente mostrato:
   resta sottolineata per tutta la durata dell'apertura, non solo in
   hover — stesso currentColor già usato per hover/focus/active. */
.fp-nav .dropdown-toggle[aria-expanded="true"] {
  border-bottom-color: currentColor;
}

/* --------------------------------------------------------------------------
   MOBILE — hamburger e collapse
   -------------------------------------------------------------------------- */
.fp-navbar-toggler {
  border: none;
  background: transparent; /* MAI un background, in nessuno stato */
  padding: var(--space-2);
  color: var(--color-text-primary); /* nero: default (scroll/pagine interne) */
  line-height: 0;
  flex-shrink: 0; /* non deve mai restringersi quando il menu va a capo sotto */
  border-radius: var(--radius-sm);
  opacity: 1;
  transition: color var(--transition-fast), opacity var(--transition-fast);
}
.fp-navbar-toggler__icon {
  font-size: 2.25rem; /* +~28% rispetto al valore precedente (1.75rem) */
}

/* Bianco SOLO in cima alla Home, quando è ancora visibile l'hero
   (navbar trasparente, prima dei 50px di scroll) */
body.page-home:not(.fp-scrolled) .fp-navbar-toggler {
  color: #ffffff;
  /* Stesso alone scuro a tre livelli del testo dell'Hero (hero.css):
     leggibilità sul video senza riquadri scuri. */
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.75),
    0 1px 3px rgba(0, 0, 0, 0.6),
    0 0 14px rgba(0, 0, 0, 0.45);
}

/* Feedback di hover/focus/attivo IDENTICO in entrambe le versioni (bianca
   e nera): solo un'opacità leggermente ridotta sull'icona stessa, MAI un
   background — sostituisce il precedente riquadro "a vetro satinato". */
.fp-navbar-toggler:hover,
.fp-navbar-toggler:focus-visible,
.fp-navbar-toggler:not(.collapsed) {
  opacity: 0.65;
}

.fp-navbar-toggler:focus-visible {
  outline: 3px solid var(--focus-ring-outer);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

@media (max-width: 1199.98px) {
  /* BUGFIX posizione hamburger/logo: il precedente approccio (far "andare
     a capo" il pannello nella stessa riga flessibile con flex-wrap)
     lasciava comunque un margine di dipendenza tra l'altezza del pannello
     e il calcolo dell'altezza della prima riga in un contenitore flex
     multi-riga, causando un residuo micro-spostamento verticale di logo e
     hamburger all'apertura. Soluzione robusta: il pannello esce
     completamente dal flusso della riga (position:absolute, ancorato
     sotto di essa) — la riga logo+hamburger ha così una dimensione
     fissa, che il pannello sia aperto o chiuso non fa differenza. Il
     menu si apre "sopra" il contenuto sottostante invece di spingerlo
     in basso: comportamento standard per i pannelli di navigazione mobile. */
  #fpNavCollapse {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin-top: 0;
  }
}

@media (max-width: 1199.98px) {
  .fp-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    /* Fascia piena, non più "tendina" satinata: bianco solido, niente
       blur né angoli arrotondati — stessa filosofia del megamenu desktop. */
    background-color: #ffffff;
    padding: var(--space-3);
    box-shadow: var(--shadow-lg);
    border-radius: 0;
    max-height: calc(100vh - var(--navbar-height));
    overflow-y: auto;
  }
  /* Stato "in negativo" (Home, pre-scroll): stessa logica del megamenu
     desktop — nessuno sfondo/ombra propri, testi bianchi. Il contrasto è
     garantito dallo scrim del video (vedi hero.css), non da un fondo
     proprio del pannello. */
  body.page-home:not(.fp-scrolled) .fp-nav {
    background-color: transparent;
    box-shadow: none;
  }
  /* Su mobile il menu aperto è sempre leggibile: nero su sfondo bianco in
     stato solido/scroll, bianco su sfondo trasparente in stato hero (vedi
     override sotto) — nessuno dei due è più forzato indipendentemente
     dallo stato della navbar sottostante, come invece accadeva quando il
     pannello era sempre bianco/satinato a prescindere.
     Il separatore va SOLO tra le voci di primo livello dirette (link
     singoli o interi blocchi dropdown), non anche sul link interno al
     dropdown: altrimenti si ottengono doppi bordi ravvicinati, altra
     causa dei "salti" visivi segnalati. */
  .fp-nav > .nav-link:not(:last-child),
  .fp-nav > .dropdown:not(:last-child) {
    border-bottom: 1px solid var(--color-gray-lighter);
  }
  .fp-nav .nav-link {
    color: var(--color-text-primary);
    padding-block: var(--space-2); /* ridotto da space-3 a space-2: meno "salto" tra le voci */
    border-bottom-width: 2px;
  }
  /* Hover/focus/attivo su mobile: il div/link di primo livello occupa
     tutta la larghezza della riga (necessario per un'area di tocco
     comoda), ma la sottolineatura "you are here" deve restare larga
     quanto il SOLO testo, come su desktop — un border-bottom sul box
     intero sarebbe invece una riga a tutta larghezza. text-decoration è
     nativamente ancorata ai soli glyph del testo, indipendentemente da
     quanto è largo l'elemento che li contiene: risolve senza dover
     restringere il link (e quindi la sua area cliccabile). */
  .fp-nav .nav-link:hover,
  .fp-nav .nav-link:focus-visible,
  .fp-nav .nav-link.active {
    color: var(--color-text-primary); /* mai blu, coerente col menu desktop */
    /* Azzera la regola generica .nav-link.active (border-bottom-color:
       currentColor, definita fuori da questo media query): qui usiamo
       SOLO text-decoration, altrimenti le due sottolineature (a tutta
       riga + a misura di testo) restavano visibili insieme. */
    border-bottom-color: transparent;
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
  }
  /* Voce di primo livello con il sottomenu aperto: stessa sottolineatura
     "a misura di testo" qui sopra, non il border-bottom a tutta riga
     usato su desktop (dove il link è già naturalmente largo quanto il
     testo, quindi border-bottom lì è già corretto così com'è). */
  .fp-nav .dropdown-toggle[aria-expanded="true"] {
    border-bottom-color: transparent;
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
  }

  /* BUGFIX leggibilità: su desktop il dropdown resta nel flusso con
     visibility:hidden per animare il fade, ma su mobile questo lasciava
     uno spazio vuoto riservato anche a menu chiuso, creando un "salto"
     irregolare tra una voce e l'altra. Su mobile usiamo invece un
     classico display:none/block (nessuno spazio quando è chiuso) con una
     transizione morbida di altezza quando si apre, coerente col resto
     del sito ma senza spazi fantasma. */
  .fp-nav .dropdown-menu {
    display: none;
    position: static !important;
    inset: auto !important;
    transform: none !important; /* vedi nota bugfix sopra: Popper.js iniettava qui uno stile inline che vinceva su una regola non !important */
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    box-shadow: none;
    min-width: 0;
    /* Sfondo distintivo + padding compatto: il sottomenu si "raggruppa"
       visivamente invece di aggiungere semplicemente altro spazio vuoto,
       riducendo la sensazione di salto segnalata anche dopo il primo fix */
    margin: 0 0 var(--space-2) 0;
    padding: var(--space-1) var(--space-2);
    background-color: var(--color-gray-lighter);
    border-radius: var(--radius-sm);
    animation: fp-dropdown-mobile-in var(--transition-base) ease;
  }
  .fp-nav .dropdown-menu.show {
    display: block;
  }
  @keyframes fp-dropdown-mobile-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .fp-nav .dropdown-item {
    padding-block: var(--space-1); /* ridotto da space-2: righe più ravvicinate tra loro */
    line-height: 1.3;
    /* BUGFIX: Bootstrap applica white-space:nowrap di default ai
       .dropdown-item (pensato per tendine desktop compatte); su mobile,
       con voci lunghe come "I comparti: Scudo, Progressione, Espansione",
       il testo usciva dallo schermo invece di andare a capo. */
    white-space: normal;
    overflow-wrap: break-word;
  }
  /* Su mobile un testo che va a capo (riga sopra) fa allargare l'elemento
     inline-block quasi a tutta riga: la barra ::after (pensata per un box
     stretto quanto il testo, va bene su desktop) diventerebbe larga quanto
     l'intera riga. La disattiviamo qui e usiamo text-decoration al suo
     posto, che si aggancia ai soli glyph indipendentemente da quanto è
     largo il box che li contiene. */
  .fp-nav .dropdown-item::after {
    content: none;
  }
  .fp-nav .dropdown-item:hover,
  .fp-nav .dropdown-item:focus-visible,
  .fp-nav .dropdown-item.active {
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
  }
  .fp-nav .dropdown-toggle::after {
    float: right;
    margin-top: 0.6em;
  }

  /* Il wrapper .container-xl e la lista flessibile .fp-megamenu__list
     esistono solo per la fascia intera desktop: su mobile il pannello
     dropdown-menu resta quello compatto standard, quindi qui azzeriamo il
     padding del container (eviterebbe un doppio-margine con quello già
     applicato a .dropdown-menu qui sopra) e la lista torna un blocco
     verticale semplice. */
  .fp-megamenu .container-xl {
    padding-left: 0;
    padding-right: 0;
    max-width: none;
  }
  .fp-megamenu__list {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Stato "in negativo" (Home, pre-scroll): estende il bianco-su-trasparente
     anche agli elementi interni del pannello mobile — separatori tra le
     voci, sottomenu raggruppato di secondo livello e relativi link. La
     regola generale per .fp-nav .dropdown-item (bianco in hero) vive nel
     blocco desktop qui sopra, scoped a min-width:1200px: va ripetuta qui
     perché si applichi anche sotto i 1200px. */
  body.page-home:not(.fp-scrolled) .fp-nav > .nav-link:not(:last-child),
  body.page-home:not(.fp-scrolled) .fp-nav > .dropdown:not(:last-child) {
    border-bottom-color: rgba(255, 255, 255, 0.3);
  }
  body.page-home:not(.fp-scrolled) .fp-nav .dropdown-menu {
    /* Leggerissimo tint bianco, solo per continuare a "raggruppare"
       visivamente i sotto-link — mai un blocco grigio opaco su un pannello
       ormai trasparente. */
    background-color: rgba(255, 255, 255, 0.12);
  }
  body.page-home:not(.fp-scrolled) .fp-nav .dropdown-item {
    color: #ffffff;
  }
}