/* ==========================================================================
   Tack System — Header (Figma Navbar 52:10153, mobile 113:1375)
   ========================================================================== */

.tk-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: var(--tk-navbar-bg);
  border-bottom: 1px solid var(--tk-border-dark);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: var(--tk-on-dark);
}

.tk-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--tk-header-h);
  gap: 24px;
}

/* --- Logo ---------------------------------------------------------------- */
.tk-logo { display: flex; align-items: center; height: var(--tk-logo-h); flex: none; }
.tk-logo img, .tk-logo svg { height: var(--tk-logo-h); width: auto; }

/* --- Navigazione --------------------------------------------------------- */
.tk-nav { display: flex; }
.tk-nav ul { display: flex; align-items: center; gap: 32px; list-style: none; margin: 0; padding: 0; }
.tk-nav li { position: relative; }

.tk-nav a {
  display: inline-block;
  font-size: var(--tk-fs-ui);
  line-height: var(--tk-lh-ui);
  font-weight: 500;
  color: var(--tk-on-dark-70);
  transition: color var(--tk-ease);
  white-space: nowrap;
}
.tk-nav a:hover,
.tk-nav .current-menu-item > a,
.tk-nav .current-menu-ancestor > a { color: var(--tk-white); }

/* Sottomenu (gli otto settori) */
.tk-nav .sub-menu {
  position: absolute;
  top: 100%;
  left: -16px;
  min-width: 248px;
  display: block;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 8px;
  margin-top: 14px;
  background: var(--tk-card);
  border: 1px solid var(--tk-border-dark-12);
  border-radius: var(--tk-r-card);
  box-shadow: var(--tk-sh-card);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--tk-ease), transform var(--tk-ease), visibility var(--tk-ease);
}
.tk-nav li:hover > .sub-menu,
.tk-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }

.tk-nav .sub-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: var(--tk-fs-xs);
  line-height: var(--tk-lh-xs);
  white-space: normal;
}
.tk-nav .sub-menu a:hover { background: rgba(255, 255, 255, 0.06); }

/* La voce che ha figli prende una piccola freccia */
.tk-nav .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  margin-left: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

/* --- Azioni a destra ----------------------------------------------------- */
.tk-header__actions { display: flex; align-items: center; gap: 16px; flex: none; }

.tk-header__cta { background: var(--tk-orange); color: var(--tk-white); box-shadow: none; }
.tk-header__cta:hover,
.tk-header__cta:active { background: var(--tk-orange-deep); color: var(--tk-white); }

.tk-header__search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  background: none;
  border: 0;
  color: var(--tk-white);
  cursor: pointer;
  border-radius: var(--tk-r-pill);
  transition: background-color var(--tk-ease);
}
.tk-header__search:hover { background: rgba(255, 255, 255, 0.08); }

/* --- Pannello di ricerca ------------------------------------------------- */
.tk-search {
  display: none;
  border-top: 1px solid var(--tk-border-dark);
  padding-block: 20px;
}
.tk-search.is-open { display: block; }
.tk-search form { display: flex; gap: 12px; }
.tk-search input[type="search"] {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--tk-border-dark-12);
  border-radius: var(--tk-r-pill);
  padding: 12px 20px;
  color: var(--tk-white);
  font-family: var(--tk-font);
  font-size: var(--tk-fs-ui);
}
.tk-search input[type="search"]::placeholder { color: var(--tk-on-dark-40); }

/* --- Comando del menu mobile --------------------------------------------- */
.tk-burger {
  display: none;
  width: 22px; height: 22px;
  background: none; border: 0; padding: 0;
  color: var(--tk-white);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;   /* niente lampo grigio al tocco */
}

/* Il reset di Hello Elementor colora OGNI <button> di rosa (#c36) in hover e
   in focus: `button:hover` ha specificita' (0,1,1) e batteva `.tk-burger`
   (0,1,0), quindi il burger si accendeva di rosa — e sul telefono ci restava,
   perche' li' l'hover non si toglie finche' non si tocca altrove.
   I bottoni della testata lo annullano tutti e tre, e ognuno si riprende
   subito dopo il proprio aspetto. I selettori portano `.tk-header` davanti
   apposta: cosi' vincono per specificita' e non per ordine di caricamento,
   che dipende da come il tema padre accoda i suoi fogli. */
.tk-header .tk-burger:hover,
.tk-header .tk-burger:focus,
.tk-header .tk-header__search:hover,
.tk-header .tk-header__search:focus,
.tk-header .tk-nav__sub:hover,
.tk-header .tk-nav__sub:focus {
  background: none;
  color: inherit;
}
/* Il burger non ha nessuno stato al passaggio: e' un comando, non un bottone. */
.tk-header .tk-header__search:hover,
.tk-header .tk-header__search:focus { background: rgba(255, 255, 255, 0.08); }
.tk-burger span {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--tk-ease), opacity var(--tk-ease);
}
.tk-burger span + span { margin-top: 5px; }
.tk-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.tk-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.tk-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Sotto i 1100px: il menu diventa un foglio ----------------------------
   TRAPPOLA PAGATA IL 24/09: il pannello era `position: fixed` con
   `inset: 64px 0 0 0`, e usciva alto 64px invece che a tutto schermo.
   `backdrop-filter` sulla testata la rende il **contenitore** dei
   discendenti fixed, quindi quell'inset si misurava sulla barra, non sulla
   finestra: si vedeva solo la prima voce del menu.
   Ora il pannello e' `absolute` sotto la testata (`top: 100%`): il
   contenitore e' la testata per davvero, l'altezza reale della barra e la
   barra di amministrazione sono gia' scontate, e non c'e' niente da tenere
   allineato a mano.                                                        */
@media (max-width: 1100px) {
  html, body { overflow-x: clip; }        /* il pannello chiuso non deve far scorrere */
  .tk-header__bar { height: var(--tk-header-h-mob); }
  .tk-burger { display: block; }
  .tk-header__cta { display: none; }

  .tk-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: block;
    max-height: calc(100dvh - var(--tk-header-h-mob) - 24px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: var(--tk-black);
    border-top: 1px solid var(--tk-border-dark);
    border-radius: 0 0 var(--tk-r-card) var(--tk-r-card);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.38);
    padding: 8px var(--tk-gutter) 20px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
                visibility 220ms;
  }
  .tk-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

  .tk-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .tk-nav > div > ul > li { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
  .tk-nav > div > ul > li:last-child { border-bottom: 0; }

  .tk-nav a {
    display: block;
    padding: 15px 4px;
    font-size: 16px;
    font-weight: 600;
    color: var(--tk-white);
    border-radius: 10px;
    white-space: normal;
  }
  .tk-nav a:active { background: rgba(255, 255, 255, 0.07); }

  /* Voce con figli: link a sinistra, bottone a destra, sottomenu sotto. */
  .tk-nav .menu-item-has-children {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
  }
  .tk-nav .menu-item-has-children > .sub-menu { grid-column: 1 / -1; }
  .tk-nav .menu-item-has-children > a::after { display: none; }

  .tk-nav__sub {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--tk-white);
    cursor: pointer;
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
                background-color var(--tk-ease);
  }
  .tk-nav__sub::before {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
  }
  .tk-nav__sub[aria-expanded="true"] { transform: rotate(-180deg); background: rgba(255, 255, 255, 0.16); }
  /* Il bottone della fisarmonica si riprende il proprio cerchio, tolto dal
     blocco che annulla il rosa del reset. */
  .tk-header .tk-nav__sub:hover,
  .tk-header .tk-nav__sub:focus { background: rgba(255, 255, 255, 0.14); }

  /* Sottomenu chiuso: si apre a fisarmonica. Il valore di max-height e'
     volutamente abbondante (otto settori) — serve solo come capolinea
     dell'animazione, non come misura. */
  .tk-nav .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: none;
    border: 0;
    box-shadow: none;
    min-width: 0;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 280ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .tk-nav li.is-open > .sub-menu { max-height: 520px; }

  .tk-nav .sub-menu a {
    padding: 11px 0 11px 16px;
    margin-left: 4px;
    border-left: 2px solid rgba(255, 255, 255, 0.14);
    border-radius: 0;
    color: var(--tk-on-dark-60);
    font-size: 14px;
    font-weight: 500;
  }
  .tk-nav .sub-menu li:last-child a { padding-bottom: 14px; }

  .tk-nav__cta { display: block; margin-top: 18px; }
  .tk-nav__cta .tk-btn { width: 100%; justify-content: center; }
}

@media (min-width: 1101px) {
  .tk-nav__cta { display: none; }
  .tk-nav__sub { display: none; }
}

/* --- Velo dietro il pannello ---------------------------------------------
   Sta fuori dalla testata: dentro sarebbe prigioniero dello stesso
   contenitore che aveva rotto il pannello.                                 */
.tk-navscrim {
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(8, 8, 8, 0.5);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1), visibility 220ms;
}
.tk-navscrim.is-open { opacity: 1; visibility: visible; }

@media (min-width: 1101px) {
  .tk-navscrim { display: none; }
}

/* ==========================================================================
   Testata chiara — pagine settore (Figma NavbarLight 52:9524)
   Variante scoperta sulla pagina Settore Navale: stessa struttura, fondo
   bianco, testo scuro, CTA nera invece che arancione, e la voce attiva
   sottolineata. Si attiva con la classe .tk-testata-chiara sul body, messa
   dal template di settore: la Home resta esattamente com'era.
   ========================================================================== */

.tk-testata-chiara .tk-header {
  background: var(--tk-navbar-bg-lt);
  border-bottom: 1px solid var(--tk-border-light);
  color: var(--tk-ink);
}

.tk-testata-chiara .tk-nav a { color: var(--tk-ink-600); }
.tk-testata-chiara .tk-nav a:hover,
.tk-testata-chiara .tk-nav .current-menu-item > a,
.tk-testata-chiara .tk-nav .current-menu-ancestor > a,
.tk-testata-chiara .tk-nav .current-page-ancestor > a { color: var(--tk-ink); }

/* La voce del settore in cui ci si trova e' sottolineata, come nel mockup. */
.tk-testata-chiara .tk-nav > div > ul > .current-menu-item > a,
.tk-testata-chiara .tk-nav > div > ul > .current-menu-ancestor > a,
.tk-testata-chiara .tk-nav > div > ul > .current-page-ancestor > a {
  box-shadow: inset 0 -2px 0 0 var(--tk-ink);
}

.tk-testata-chiara .tk-nav .sub-menu {
  background: var(--tk-white);
  border-color: var(--tk-border-light);
  box-shadow: var(--tk-sh-panel);
}
.tk-testata-chiara .tk-nav .sub-menu a { color: var(--tk-ink-600); }
.tk-testata-chiara .tk-nav .sub-menu a:hover { background: var(--tk-light); color: var(--tk-ink); }

/* Nel mockup la CTA della testata chiara e' nera, non arancione. */
.tk-testata-chiara .tk-header__cta { background: var(--tk-ink); color: var(--tk-white); }
.tk-testata-chiara .tk-header__cta:hover,
.tk-testata-chiara .tk-header__cta:active { background: #000; color: var(--tk-white); }

.tk-testata-chiara .tk-header__search { color: var(--tk-ink); }
.tk-testata-chiara .tk-header__search:hover { background: rgba(10, 10, 10, 0.06); }

.tk-testata-chiara .tk-burger { color: var(--tk-ink); }

.tk-testata-chiara .tk-search { border-top: 1px solid var(--tk-border-light); }
.tk-testata-chiara .tk-search input[type="search"] {
  background: var(--tk-light);
  border-color: var(--tk-border-ink-12);
  color: var(--tk-ink);
}
.tk-testata-chiara .tk-search input[type="search"]::placeholder { color: var(--tk-ink-300); }

/* Sotto i 1100 il menu diventa pannello a scomparsa: va chiaro anche quello,
   altrimenti resta un rettangolo nero in mezzo a una pagina bianca. */
@media (max-width: 1100px) {
  .tk-testata-chiara .tk-nav {
    background: var(--tk-white);
    border-top-color: var(--tk-border-light);
    box-shadow: 0 24px 48px rgba(10, 10, 10, 0.14);
  }
  .tk-testata-chiara .tk-nav a { color: var(--tk-ink); }
  .tk-testata-chiara .tk-nav a:active { background: rgba(10, 10, 10, 0.05); }
  .tk-testata-chiara .tk-nav .sub-menu a { color: var(--tk-ink-500); border-left-color: var(--tk-border-ink-12); }
  .tk-testata-chiara .tk-nav > div > ul > li { border-bottom-color: var(--tk-border-light); }
  .tk-testata-chiara .tk-nav .sub-menu { background: transparent; box-shadow: none; border: 0; }
  .tk-testata-chiara .tk-nav__sub { background: rgba(10, 10, 10, 0.06); color: var(--tk-ink); }
  .tk-testata-chiara .tk-nav__sub[aria-expanded="true"] { background: rgba(10, 10, 10, 0.12); }
  .tk-testata-chiara .tk-nav__sub:hover,
  .tk-testata-chiara .tk-nav__sub:focus { background: rgba(10, 10, 10, 0.1); }
}

/* ==========================================================================
   Testata sovrapposta — solo la Home (Figma Make: Navbar)
   Sopra l'hero la testata e' trasparente e le scritte sono chiare; passati
   40px di scorrimento diventa bianca e le scritte si invertono. Lo stato lo
   mette hero.js con la classe .is-scrolled. E' fixed, non sticky: deve stare
   SOPRA l'hero, non rubargli spazio.
   ========================================================================== */

.tk-testata-sovrapposta .tk-header {
  position: fixed;
  left: 0; right: 0; top: 0;
  background: var(--tk-navbar-scrim);
  border-bottom-color: transparent;
  transition: background var(--tk-ease), border-color var(--tk-ease), color var(--tk-ease);
}

.tk-testata-sovrapposta .tk-header.is-scrolled {
  background: var(--tk-navbar-bg-lt);
  border-bottom-color: var(--tk-border-hair);
  color: var(--tk-ink);
}

/* --- Stato chiaro: le stesse regole della testata delle pagine settore --- */
.tk-testata-sovrapposta .tk-header.is-scrolled .tk-nav a { color: var(--tk-ink-600); }
.tk-testata-sovrapposta .tk-header.is-scrolled .tk-nav a:hover,
.tk-testata-sovrapposta .tk-header.is-scrolled .tk-nav .current-menu-item > a,
.tk-testata-sovrapposta .tk-header.is-scrolled .tk-nav .current-menu-ancestor > a { color: var(--tk-ink); }
.tk-testata-sovrapposta .tk-header.is-scrolled .tk-nav .sub-menu {
  background: var(--tk-white);
  border-color: var(--tk-border-light);
  box-shadow: var(--tk-sh-panel);
}
.tk-testata-sovrapposta .tk-header.is-scrolled .tk-nav .sub-menu a { color: var(--tk-ink-600); }
.tk-testata-sovrapposta .tk-header.is-scrolled .tk-nav .sub-menu a:hover { background: var(--tk-light); color: var(--tk-ink); }
.tk-testata-sovrapposta .tk-header.is-scrolled .tk-header__search { color: var(--tk-ink-400); }
.tk-testata-sovrapposta .tk-header.is-scrolled .tk-header__search:hover { background: rgba(10, 10, 10, 0.06); }
.tk-testata-sovrapposta .tk-header.is-scrolled .tk-burger { color: var(--tk-ink); }
.tk-testata-sovrapposta .tk-header.is-scrolled .tk-search { border-top: 1px solid var(--tk-border-light); }
.tk-testata-sovrapposta .tk-header.is-scrolled .tk-search input[type="search"] {
  background: var(--tk-light); border-color: var(--tk-border-ink-12); color: var(--tk-ink);
}
.tk-testata-sovrapposta .tk-header.is-scrolled .tk-search input[type="search"]::placeholder { color: var(--tk-ink-300); }

/* La CTA resta arancione in tutti e due gli stati, come nel Make. */

/* --- Logo: due file sovrapposti, si scambiano in dissolvenza -------------
   Scambiare il src via JS produce un lampo alla prima commutazione, perche'
   il secondo file non e' ancora in cache. Stampandoli tutti e due e giocando
   sull'opacita' il passaggio e' pulito e non serve JS.                     */
.tk-logo--doppio { position: relative; }
.tk-logo--doppio img { transition: opacity var(--tk-ease); }
.tk-logo--doppio .tk-logo__scuro {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.tk-header.is-scrolled .tk-logo--doppio .tk-logo__chiaro { opacity: 0; }
.tk-header.is-scrolled .tk-logo--doppio .tk-logo__scuro  { opacity: 1; }

/* Il pannello mobile si apre sotto una testata fixed: la sua altezza e' gia'
   --tk-header-h-mob, quindi inset resta valido. Va pero' reso chiaro appena
   la testata e' bianca. */
@media (max-width: 1100px) {
  .tk-testata-sovrapposta .tk-header.is-scrolled .tk-nav {
    background: var(--tk-white);
    border-top-color: var(--tk-border-light);
    box-shadow: 0 24px 48px rgba(10, 10, 10, 0.14);
  }
  .tk-testata-sovrapposta .tk-header.is-scrolled .tk-nav a { color: var(--tk-ink); }
  .tk-testata-sovrapposta .tk-header.is-scrolled .tk-nav a:active { background: rgba(10, 10, 10, 0.05); }
  .tk-testata-sovrapposta .tk-header.is-scrolled .tk-nav .sub-menu a { color: var(--tk-ink-500); border-left-color: var(--tk-border-ink-12); }
  .tk-testata-sovrapposta .tk-header.is-scrolled .tk-nav > div > ul > li { border-bottom-color: var(--tk-border-light); }
  .tk-testata-sovrapposta .tk-header.is-scrolled .tk-nav .sub-menu { background: transparent; box-shadow: none; border: 0; }
  .tk-testata-sovrapposta .tk-header.is-scrolled .tk-nav__sub { background: rgba(10, 10, 10, 0.06); color: var(--tk-ink); }
  .tk-testata-sovrapposta .tk-header.is-scrolled .tk-nav__sub[aria-expanded="true"] { background: rgba(10, 10, 10, 0.12); }
  .tk-testata-sovrapposta .tk-header.is-scrolled .tk-nav__sub:hover,
  .tk-testata-sovrapposta .tk-header.is-scrolled .tk-nav__sub:focus { background: rgba(10, 10, 10, 0.1); }
}

/* Sotto i 1100 la testata e' alta 64px: il logo a 54 la riempirebbe tutta. */
@media (max-width: 1100px) {
  .tk-logo { height: var(--tk-logo-h-mob); }
  .tk-logo img, .tk-logo svg { height: var(--tk-logo-h-mob); }
}

/* --- Barra di amministrazione -------------------------------------------
   La testata sovrapposta e' fixed a top: 0, quindi a chi e' loggato finisce
   sotto la barra di WordPress e il logo esce tagliato. Le altre testate non
   hanno il problema perche' sono sticky e stanno nel flusso.
   Le misure sono quelle di WordPress: 32px da 783 in su, 46px sotto, e
   a 600 la barra smette di essere fissa e scorre via con la pagina.        */
body.admin-bar.tk-testata-sovrapposta .tk-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar.tk-testata-sovrapposta .tk-header { top: 46px; }
}
@media screen and (max-width: 600px) {
  body.admin-bar.tk-testata-sovrapposta .tk-header { top: 0; }
}

/* 1.8.1 (30/10/2026): con sette voci il bottone «Raccontaci il tuo progetto»
   sta nella barra solo da 1280 px in su (contenitore a 1216 px utili).
   Fra 1101 e 1279 px si nasconde: la voce Contatti nel menu fa lo stesso.
   Se si aggiungono voci al menu principale, rimisurare la barra
   (scrollWidth della .tk-container della testata <= clientWidth). */
@media (min-width: 1101px) and (max-width: 1279px) {
  .tk-header__cta { display: none; }
}