/*
 * Header Falone — aspetto
 *
 * Origine: .site-header / .brand / .brand-logo / .site-nav / .nav-toggle di
 * source-clean/styles.css. Ogni valore letto, nessuno stimato.
 *
 * Ogni variabile ha un ripiego pari al valore dell'originale: il widget e'
 * corretto anche prima che Elementor scriva qualcosa, e resta usabile se il
 * tema figlio non e' attivo.
 *
 * Indice
 *   1. contenitore
 *   2. marchio e scambio dei loghi
 *   3. navigazione
 *   4. pulsante del menu
 *   5. stato dopo lo scroll / menu aperto
 *   6. sotto 820px: pannello a tendina
 *   7. movimento ridotto
 */

/* ======================================================================
   1. CONTENITORE
   ======================================================================
   position: fixed come nel sorgente: l'header galleggia sopra il contenuto,
   che gli scorre sotto. Non serve lo sticky di Elementor — e non va
   attivato, o i due meccanismi entrano in conflitto. */
.falone-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--falone-z-header, 50);

  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 40px;

  height: var(--falone-header-h, 70px);
  padding: 0 var(--falone-header-pad-x, 52px);

  color: var(--falone-header-link, #fff);

  /* ⚠️ Il ripiego in rgba() DEVE precedere color-mix(): se il browser non lo
     supporta, la dichiarazione viene scartata e senza ripiego l'header
     resterebbe trasparente, col testo bianco direttamente sulla fotografia.
     color-mix serve perche' colore e coprenza sono due controlli distinti:
     cosi' il colore puo' venire dalla palette del Kit. */
  background-color: rgba(18, 18, 18, .78);
  background-color: color-mix(
    in srgb,
    var(--falone-header-bg-color, #121212) calc(var(--falone-header-bg-op, .78) * 100%),
    transparent
  );

  border-bottom: 1px solid rgba(255, 255, 255, .12);
  border-bottom-color: color-mix(
    in srgb,
    var(--falone-header-border-color, #fff) calc(var(--falone-header-border-op, .12) * 100%),
    transparent
  );

  backdrop-filter: blur(var(--falone-header-blur, 14px));
  -webkit-backdrop-filter: blur(var(--falone-header-blur, 14px));

  transition:
    background-color var(--falone-dur-header, .25s) var(--falone-ease, ease),
    color            var(--falone-dur-header, .25s) var(--falone-ease, ease),
    border-color     var(--falone-dur-header, .25s) var(--falone-ease, ease);
}

/* ======================================================================
   2. MARCHIO
   ======================================================================
   I due loghi occupano la stessa area e si alternano in dissolvenza: il
   contenitore e' relativo, le immagini assolute. Su un solo elemento non si
   potrebbe incrociare la dissolvenza. */
.falone-header__brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  /* Il valore fluido e' il default; --falone-header-brand-w lo scavalca
     dove il sorgente usa una misura fissa (104px sotto 820, 98px sotto 480). */
  width: var(--falone-header-brand-w, clamp(
    var(--falone-header-brand-w-min, 78px),
    7vw,
    var(--falone-header-brand-w-max, 112px)
  ));
  height: var(--falone-header-brand-h, 38px);
}

.falone-header__logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  transition: opacity var(--falone-dur-header, .25s) var(--falone-ease, ease);
}

/* a riposo si vede il logo chiaro; quello scuro aspetta */
.falone-header__logo--dark { opacity: 0; }

/* ======================================================================
   3. NAVIGAZIONE
   ======================================================================
   Corpo e distanza fra le voci sono fluidi, come nel sorgente: a 1440px il
   clamp restituisce .64rem e 17,3px, non i massimi. */
.falone-header__nav { justify-self: end; }

.falone-header__list {
  display: flex;
  align-items: center;
  /* fluido per default, scavalcabile per breakpoint: sotto 1180 il sorgente
     passa a 9px fissi */
  gap: var(--falone-header-gap, clamp(
    var(--falone-header-gap-min, 12px),
    1.2vw,
    var(--falone-header-gap-max, 22px)
  ));
  margin: 0;
  padding: 0;
  list-style: none;
}

.falone-header__list > li { margin: 0; }

.falone-header__list a {
  display: block;
  padding: 12px 0;
  color: inherit;
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  /* fluido per default; sotto 1180 il sorgente passa a .56rem fissi */
  font-size: var(--falone-header-link-size, clamp(
    var(--falone-header-link-size-min, .64rem),
    .66vw,
    var(--falone-header-link-size-max, .72rem)
  ));
  font-weight: 800;
  letter-spacing: var(--falone-header-link-ls, .08em);
  text-transform: uppercase;
  text-decoration: none;

  /* ⚠️ Senza questo, una voce di due parole va a capo DENTRO se stessa
     quando lo spazio si stringe: flex la comprime fino alla larghezza
     min-content. Misurato a 1280px con nove voci: «Creatori di Valore» e
     altre quattro diventavano alte 55px contro i 39 delle voci di una
     parola, in un header alto 70 — e con align-items: center finivano
     disallineate. Il sorgente non ne aveva bisogno perche' le voci erano
     sette e non arrivavano mai a comprimersi. */
  white-space: nowrap;
}

/* Il sorgente NON distingue la voce attiva ne' lo stato hover: la
   sottolineatura prevista e' disattivata da una regola successiva.
   Si conserva solo un contorno visibile per chi naviga da tastiera, che
   nell'originale manca ed e' un difetto di accessibilita'. */
.falone-header__list a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ⚠️ AGGIUNTA NOSTRA, non del sorgente: la voce della pagina che si sta
   guardando resta in accento. Chiesta dall'utente il 06/08. Il sorgente non
   distingue la voce attiva (vedi la nota qui sopra), quindi e' uno scarto
   dichiarato.

   Le classi le mette WordPress da se': le nove voci sono item di tipo
   `post_type`, quindi il markup servito contiene
   `current-menu-item current_page_item` sulla voce giusta — verificato
   sull'HTML servito, non supposto. Non serve ne' PHP ne' JavaScript.

   ⚠️ SPECIFICITA': Hello Elementor pubblica in assets/css/reset.css
   `a:active, a:hover { color: #336 }`, che vale (0,1,1) e batterebbe una
   classe sola. Il selettore qui vale (0,2,1) e vince anche al passaggio del
   mouse: senza il discendente, la voce attiva tornava blu navy sotto il
   puntatore. E' la stessa trappola dei pulsanti, gia' documentata.

   ⚠️ Vale anche per il pannello a tendina sotto i 1180px: e' la STESSA lista,
   quindi non serve una seconda regola.

   `current_page_item` e' ridondante con `current-menu-item` per le pagine, ma
   copre il caso in cui il menu venga ricostruito con voci di tipo diverso. */
.falone-header__list .current-menu-item > a,
.falone-header__list .current_page_item > a,
.falone-header__list .current-menu-ancestor > a {
  /* ⚠️ 31/08: nel modello la voce corrente NON e' evidenziata — esiste
     `.site-nav a.is-active::after` ma la riga 149 di styles.css lo spegne per
     ogni voce che non sia la CTA. Il predefinito e' quindi «come le altre».
     Per rimettere l'arancione basta impostare --falone-header-link-active. */
  color: var(--falone-header-link-active, inherit);
}

/* ======================================================================
   NOVE VOCI: LE METRICHE STRETTE PARTONO PIU' IN ALTO
   ======================================================================
   ⚠️ AGGIUNTA NOSTRA, non del sorgente. L'utente e' passato da 7 a 9 voci
   il 04/08, e due sono lunghe («Efficientamento Energetico», «Creatori di
   Valore»). Il sorgente stringe corpo e distanze sotto i 1180px; con nove
   voci quella soglia arriva troppo tardi e nella fascia 1181-1400 il menu
   non ci sta.
   Qui le stesse metriche del sorgente (.56rem e 9px, non valori nuovi)
   partono da 1400. Sopra i 1400 resta il fluido dell'originale.

   ⚠️ Il controllo responsive di Elementor scrive le stesse variabili con
   specificita' maggiore dentro @media (max-width: 1180px): sotto quella
   soglia vince lui, col medesimo valore. Il desktop e' vuoto per scelta
   (vedi la trappola sul clamp nel §7), quindi qui non c'e' conflitto. */
@media (max-width: 1400px) {
  .falone-header {
    --falone-header-link-size: var(--falone-header-link-size-tight, .56rem);
    --falone-header-gap: var(--falone-header-gap-tight, 9px);
  }
}

/* ======================================================================
   4. PULSANTE DEL MENU
   ====================================================================== */
.falone-header__toggle {
  display: none;      /* compare solo sotto 820px */
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.falone-header__toggle span {
  display: block;
  width: 20px;
  height: 1px;
  margin: 6px auto;
  background: currentColor;
}

/* ======================================================================
   5. STATO DOPO LO SCROLL / MENU APERTO
   ======================================================================
   Nel sorgente .is-scrolled e .is-open producono lo stesso aspetto. */
.falone-header.is-scrolled,
.falone-header.is-open {
  color: var(--falone-header-link-scrolled, #121212);
  border-bottom-color: var(--falone-header-border-scrolled, #e7e7e7);

  background-color: rgba(255, 255, 255, .94);   /* ripiego, vedi sopra */
  background-color: color-mix(
    in srgb,
    var(--falone-header-bg-scrolled-color, #fff) calc(var(--falone-header-bg-scrolled-op, .94) * 100%),
    transparent
  );
}

.falone-header.is-scrolled .falone-header__logo--light,
.falone-header.is-open    .falone-header__logo--light { opacity: 0; }

.falone-header.is-scrolled .falone-header__logo--dark,
.falone-header.is-open    .falone-header__logo--dark { opacity: 1; }

/* ======================================================================
   6. SOTTO 1180px: PANNELLO A TENDINA
   ======================================================================
   ⚠️ SCARTO DAL SORGENTE, conseguenza delle nove voci (04/08).
   Nel sorgente il pannello a tendina parte da 820px, perche' le voci erano
   SETTE. Con nove, e due lunghe, il menu orizzontale non ci sta piu' sotto
   i 1180: misurato a 1000px, la lista arriva a 1050 in una finestra di
   1000 — sborda di 50. Prima di questa modifica non sbordava solo perche'
   il testo andava a capo dentro le voci, che e' peggio.
   1180 non e' un numero scelto: e' il primo breakpoint del Kit, ed e' la
   soglia dove il sorgente stringe gia' corpo e distanze.
   ⚠️ La stessa soglia sta in assets/js/header.js: se si cambia qui va
   cambiata anche la', o il pannello si chiude da solo dove serve. */
@media (max-width: 1180px) {

  .falone-header {
    grid-template-columns: 1fr auto;
    gap: 16px;
  }

  .falone-header__toggle { display: block; }

  /* Il pannello scorre da sotto l'header. Fuori dal flusso, o allungherebbe
     il contenitore e spingerebbe il pulsante verso l'alto. */
  .falone-header__nav {
    position: fixed;
    top: var(--falone-header-h, 74px);
    right: 0;
    left: 0;
    padding: 14px var(--falone-header-pad-x, 18px) 28px;
    color: var(--falone-black, #121212);
    background: rgba(255, 255, 255, .97);
    border-bottom: 1px solid var(--falone-line, #e7e7e7);
    transform: translateY(calc(-100% - var(--falone-header-h, 74px)));
    transition: transform var(--falone-dur-header, .25s) var(--falone-ease, ease);
  }

  .falone-header__nav.is-open { transform: translateY(0); }

  .falone-header__list {
    display: grid;
    gap: 0;
  }

  .falone-header__list a {
    padding: 18px 0;
    border-bottom: 1px solid var(--falone-line, #e7e7e7);
  }
}

/* con il pannello aperto la pagina sotto non deve scorrere */
body.falone-nav-open { overflow: hidden; }

/* ======================================================================
   7. MOVIMENTO RIDOTTO
   ======================================================================
   Niente dissolvenze ne' scorrimenti: il pannello compare e sparisce.
   Si annulla la proprieta' finale, non la variabile. */
@media (prefers-reduced-motion: reduce) {
  .falone-header,
  .falone-header__logo,
  .falone-header__nav { transition: none; }
}