/* CSS custom HAWAI — override e aggiunte libere, sia manuali che via Claude. */
.l-header.bg_transparent {
    background: rgba(0, 0, 0, 0.45);
    border-bottom: 1px solid #fff;
}

.wpb_gmaps_widget iframe {
    width: 100%;
}

/* Header sticky più basso (feedback: "leggermente meno alto quando è agganciato").
   Su mobile la barra non si riduceva affatto mentre il logo sì (ush_image_1 40->30px):
   qui la si allinea. */
@media (min-width: 1381px) {
    .l-header.sticky .l-subheader.at_middle { --header-area-height: 72px !important; }
}
@media (min-width: 1025px) and (max-width: 1380px) {
    .l-header.sticky .l-subheader.at_middle { --header-area-height: 54px !important; }
}
@media (min-width: 601px) and (max-width: 1024px) {
    .l-header.sticky .l-subheader.at_middle { --header-area-height: 54px !important; }
}
@media (max-width: 600px) {
    .l-header.sticky .l-subheader.at_middle { --header-area-height: 50px !important; }
}

/* Menu principale: sottolineatura animata al mouseover (voci di primo livello).
   Ancorata a .w-nav-title (lo span col solo testo) e non all'intero <a>, che ha
   padding proprio per l'area cliccabile — altrimenti la linea è larga quanto il
   contenitore invece che quanto la parola. */
.w-nav.ush_menu_1 .w-nav-item.level_1 > a.w-nav-anchor .w-nav-title {
    position: relative;
}
.w-nav.ush_menu_1 .w-nav-item.level_1 > a.w-nav-anchor .w-nav-title:after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -0.1em;
    height: 2px;
    background: currentColor;
    transition: right 0.3s ease;
}
.no-touch .w-nav.ush_menu_1 .w-nav-item.level_1:hover > a.w-nav-anchor .w-nav-title:after,
.w-nav.ush_menu_1 .w-nav-item.level_1.current-menu-item > a.w-nav-anchor .w-nav-title:after,
.w-nav.ush_menu_1 .w-nav-item.level_1.current-menu-ancestor > a.w-nav-anchor .w-nav-title:after {
    right: 0;
}

/* Sfondo delle tendine di secondo livello: scuro trasparente, in tinta con l'header.
   Era scritta sugli id delle singole voci italiane (.menu-item-36 / .menu-item-37) dentro
   il CSS generato dalle theme options, quindi qualunque altro menu (inglese, o voci
   aggiunte dopo) restava col bianco di default. Qui vale per tutte le voci del menu
   principale, in ogni lingua. */
.w-nav.type_desktop.ush_menu_1 .w-nav-list.level_2 {
    background: rgba(20, 20, 20, 0.85) !important;
    color: #ffffff !important;
}

/* Tendine Tecnologie/Settori (sfondo scuro trasparente): il tema cambia il testo in un
   colore scuro all'hover (pensato per dropdown chiari) — qui diventa illeggibile.
   Testo sempre bianco, l'hover si segnala solo con una sottolineatura sulla sola
   larghezza della parola (ancorata a .w-nav-title, non all'intero <a>).
   Limitato a .type_desktop: sul menu mobile (.type_mobile) le tendine si aprono su
   sfondo chiaro del pannello, quindi testo bianco = invisibile (bug rilevato in produzione). */
.w-nav.type_desktop.ush_menu_1 .w-nav-item:not(.level_1) > a,
.no-touch .w-nav.type_desktop.ush_menu_1 .w-nav-item:not(.level_1):hover > a,
.no-touch .w-nav.type_desktop.ush_menu_1 .w-nav-item:not(.level_1) > a:focus {
    color: #ffffff !important;
}
.w-nav.type_desktop.ush_menu_1 .w-nav-item:not(.level_1) > a .w-nav-title {
    position: relative;
}
.w-nav.type_desktop.ush_menu_1 .w-nav-item:not(.level_1) > a .w-nav-title:after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 0.2em;
    height: 1px;
    background: currentColor;
    transition: right 0.25s ease;
}
.no-touch .w-nav.type_desktop.ush_menu_1 .w-nav-item:not(.level_1):hover > a .w-nav-title:after {
    right: 0;
}

/* Titoli tecnologie: allineati al peso 600 usato dagli altri titoli del sito (era 800 su entrambe le grid layout). */
.layout_63 .usg_post_title_1,
.layout_106 .usg_post_title_1 {
    font-weight: 600 !important;
}

/* Card tecnologie in Home: su mobile meno spazio tra foto e testo, più spazio tra le card. */
@media (max-width: 600px) {
    .layout_63 .usg_vwrapper_1 { margin-top: 0.5rem !important; }
    .layout_63 .w-grid-item { margin-bottom: 1.25rem; }
}

/* Pagina Tecnologie: pulsanti a fascia più alti e più ravvicinati su mobile. */
@media (max-width: 600px) {
    .layout_106 .usg_post_image_1 { aspect-ratio: 4/3 !important; }
    .layout_106 .w-grid-item { margin-bottom: 0.75rem; }
}

/* Selettore lingua (Polylang, voce "Lingue" nel menu): "IT / EN" — entrambe visibili,
   la lingua corrente è mostrata ma non cliccabile (non ha senso riselezionarla),
   l'altra resta il link per cambiare lingua. */
.ush_menu_1 .lang-item .w-nav-title {
    font-size: 0;
}
.ush_menu_1 .lang-item .w-nav-title:before {
    font-size: 1rem;
}
.ush_menu_1 .lang-item.lang-item-it .w-nav-title:before { content: "IT"; }
.ush_menu_1 .lang-item.lang-item-en .w-nav-title:before { content: "EN"; }
/* "/" fuori da .w-nav-title: la sottolineatura è ancorata a .w-nav-title, quindi
   tenendo il separatore su un pseudo-elemento diverso resta sotto la sola "EN".
   Il link (.w-nav-anchor) è un flex container con "gap: .5em" tra i suoi elementi:
   quel gap si applica già automaticamente TRA "/" e "EN" — gli aggiungo solo lo
   stesso 0.5em PRIMA di "/" (via padding), così risulta centrato tra i due. */
.ush_menu_1 .lang-item.lang-item-en > a.w-nav-anchor:before {
    content: "/";
    font-size: 1rem;
    opacity: 0.6;
}
.ush_menu_1 .lang-item.lang-item-it > a.w-nav-anchor {
    padding-inline-end: 0 !important;
}
.ush_menu_1 .lang-item.lang-item-en > a.w-nav-anchor {
    padding-inline-start: 0.5em !important;
}
/* La lingua corrente non è cliccabile: niente sottolineatura all'hover neanche sul <li>. */
.ush_menu_1 .lang-item.current-lang .w-nav-title:after {
    display: none !important;
}
.ush_menu_1 .lang-item.current-lang > a {
    pointer-events: none;
    opacity: 0.55;
}
/* Su mobile ogni voce di menu è .w-nav-item{display:block} (una per riga): "IT" e "EN"
   finiscono su due righe separate invece che affiancate come "IT / EN". Li rimetto
   inline solo loro due, senza toccare lo stack verticale delle altre voci. */
.w-nav.type_mobile .lang-item.w-nav-item {
    display: inline-flex;
    width: auto;
}
/* L'anchor usa margine negativo (bilanciato dal proprio padding) per estendere l'area
   cliccabile fino al bordo quando la voce è a piena larghezza — con la voce non più a
   piena larghezza quel margine negativo fa collassare la larghezza calcolata di "IT"
   quasi a zero, sovrapponendo "EN". Va annullato solo qui, dove le due voci non sono
   più a piena larghezza. */
.w-nav.type_mobile .lang-item.w-nav-item > a.w-nav-anchor {
    margin-inline: 0 !important;
}



/** Herobanner Tecnologie e Home **/
/* La sezione con il video è a larghezza piena, quindi .l-section-h non incolonna
   nulla: il blocco di testo, essendo in position:absolute, va riallineato a mano al
   contenitore del sito, altrimenti sfora a sinistra oltre il logo. Il -2rem compensa
   il padding della colonna VC che lo contiene. Sotto i ~1344px il contenitore non
   vincola e resta il vecchio rientro di 2rem. */
.herobanner-tecnologia__container,
.herobanner-home__container {
    position: absolute;
    max-width: 80%;
    z-index: 2;
    bottom: 1rem;
    left: max(2rem, calc((100% - var(--site-content-width, 1280px)) / 2 - 2rem));
    padding: 2rem;
}

/* Sfumatura di contrasto sopra un video hero: l'overlay del fondo (us_bg_overlay_color)
   resta coperto dal video, che e' opaco, quindi su fotogrammi chiari il testo bianco
   sparisce. Per attivarla su un hero, mettere el_class="hw-hero-video-scrim" sul
   [vc_column] che contiene i vc_video e il vc_row_inner di testo (es. 200-reef, home).
   Va agganciata dentro .vc_column-inner > .wpb_wrapper (i due div che WPBakery genera
   per il contenuto della colonna), non su .l-section-h: quella colonna ha un suo
   stacking context (per l'animazione "afb" quando c'e', o comunque per come Impreza
   struttura la colonna), dove vive anche il container di testo (z-index 2) - attaccata
   fuori, la sfumatura non riesce a confrontarsi con quello z-index e finisce sopra al
   testo invece che sotto. Il selettore deve restare > (figlio diretto) fino a
   .wpb_wrapper incluso: senza, matcherebbe anche il wpb_wrapper interno del blocco di
   testo (herobanner-*__container), che è un secondo elemento con la stessa classe
   annidato più in basso, e disegnerebbe una sfumatura anche lì, piccola e fuori posto. */
.hw-hero-video-scrim > .vc_column-inner > .wpb_wrapper::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 70%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0));
    pointer-events: none;
    z-index: 1;
}

/* Custom iconbox */
.hw-iconbox .w-iconbox-icon {
    font-size: 5rem !important;
}
/* Archivo in locale (OFL), al posto di fonts.googleapis.com.
   Variabile su due assi, wght 100-900 e wdth 62-125%: la tipografia del tema
   usa entrambi (es. font-stretch 110% sugli h4).
   Sottoinsiemi latin e latin-ext. Il corsivo non e' incluso: nessuna
   impostazione del tema lo usa, se servira' si aggiunge il file italic. */
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
    src: url('fonts/archivo-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
    src: url('fonts/archivo-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Popup iubenda: gli interruttori (Necessari/Esperienza/...) sono <input type=checkbox>
   nudi che iubenda veste per intero via CSS (colore verde + cerchietto bianco come
   background-image, tutto sull'input stesso), assumendo che il checkbox nativo resti
   invisibile come da default browser. Il tema pero' resetta OGNI checkbox del sito con
   un ::before che disegna la spunta FontAwesome (usato dai form di Impreza) - su questi
   toggle iubenda spunta fuori come una V nera dietro al pallino. Si toglie solo qui. */
.iub-toggle-checkbox input[type="checkbox"]::before {
    content: none;
}

/* ===== Elemento "Herobanner Video" (us_hw_hero_video) =====
   Markup generato da templates/elements/hw_hero_video.php. Qui il testo e la
   sfumatura sono figli dello stesso contenitore, quindi lo z-index si confronta
   direttamente e non serve nessuna delle accortezze che servivano quando l'hero
   era composto a mano con elementi separati (vedi il blocco Tecnologie sopra). */
.w-hwhero {
    position: relative;
    width: 100%;
    aspect-ratio: var(--hwhero-ratio-desktop, 16/9);
    max-height: var(--hwhero-max-height, 90vh);
    overflow: hidden;
    background-position: center;
    background-size: cover;
}

.w-hwhero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.w-hwhero-video.for_mobile {
    display: none;
}

/* La sfumatura sta sopra al video (che e' opaco e coprirebbe qualsiasi overlay di
   sfondo della riga) ma sotto al testo. */
.w-hwhero-scrim {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    pointer-events: none;
}

.w-hwhero.scrim_light .w-hwhero-scrim {
    height: 50%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.w-hwhero.scrim_medium .w-hwhero-scrim {
    height: 70%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0));
}

.w-hwhero.scrim_strong .w-hwhero-scrim {
    height: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.5) 45%, rgba(0, 0, 0, 0.1));
}

/* L'elemento e' a tutta larghezza, quindi il testo va riportato a mano sulla
   colonna del sito: senza, partirebbe dal bordo dello schermo e non dal logo.
   Il -2rem compensa il padding qui sotto. */
.w-hwhero-content {
    position: absolute;
    z-index: 2;
    left: max(2rem, calc((100% - var(--site-content-width, 1280px)) / 2 - 2rem));
    max-width: 80%;
    padding: 2rem;
    color: #fff;
}

.w-hwhero.valign_bottom .w-hwhero-content {
    bottom: 1rem;
}

.w-hwhero.valign_top .w-hwhero-content {
    top: 1rem;
}

.w-hwhero.valign_middle .w-hwhero-content {
    top: 50%;
    transform: translateY(-50%);
}

.w-hwhero-title {
    color: inherit;
}

.w-hwhero-subtitle {
    font-size: 1.2rem;
    max-width: 560px;
    color: rgba(255, 255, 255, 0.85);
}

/* I pulsanti erano spaziati dall'us_hwrapper che li conteneva: ora che sono
   campi dell'elemento, la spaziatura la mette questo. */
.w-hwhero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
}

@media (max-width: 600px) {
    .w-hwhero {
        aspect-ratio: var(--hwhero-ratio-mobile, 9/16);
    }

    .w-hwhero-video.for_desktop {
        display: none;
    }

    .w-hwhero-video.for_mobile {
        display: block;
    }

    /* Sul telefono il rientro della colonna non c'e': si allinea al padding
       delle altre sezioni. */
    .w-hwhero-content {
        left: 0;
        right: 0;
        max-width: none;
        padding: 20px;
    }
}