/*
Theme Name: Hub Child
Theme URI: http://hub.liquid-themes.com/
Author: Liquid Themes
Author URI: https://themeforest.net/user/liquidthemes
Template: hub
Description: Smart, Powerful and Unlimited Customizable WordPress Theme.
Version: 1.0
License: GNU General Public License
License URI: license.txt
Text Domain: hub-child
Tags: responsive, retina, rtl-language-support, blog, portfolio, custom-colors, live-editor
*/



/* SCUDO ANTI-CONTAINING-BLOCK
   Hub, quando attiva lo sticky-header, applica transform/animation al <header>
   per le animazioni di slide-in/slide-out. Per la spec CSS, qualsiasi transform
   sull'antenato di un elemento `position: fixed` lo trasforma in containing block,
   spezzando il fixed rispetto al viewport. Risultato: .spazio-lqd (fissato al
   viewport bottom) verrebbe trascinato fuori schermo insieme al main-header.
   Neutralizzando QUI transform/animation/transition, il main-header resta
   immobile in flusso naturale e .spazio-lqd resta ancorato al viewport. */
header.main-header,
.main-header[data-sticky-header],
.lqd-sticky-header-wrap {
    transform: none !important;
    animation: none !important;
    transition: none !important;
}

/* FIX 2026-05-10 — Anti-crescita pill .spazio-lqd durante sticky
   Diagnosi (console testing): in sticky, il pill cresce in altezza da 95 a 132 px.
   Causa: nel widget logo (1ª .elementor-column interna al pill, profondità 5)
   Hub applica un padding-top/bottom durante .is-stuck → la colonna logo cresce
   da 52 a 112 (+60), spingendo il container da 95 a 132 (+37).
   FIX MIRATA: forziamo l'altezza del pill a 95px (sticky) lasciando overflow
   visibile (per i dropdown), e cappiamo la prima colonna a 75px (l'altezza
   naturale max delle colonne pre-sticky, già riferita all'altezza del container). */
header.main-header.is-stuck .spazio-lqd,
header.main-header.lqd-is-sticky .spazio-lqd,
header.main-header.header-sticky-active .spazio-lqd,
.elementor-location-header.is-stuck .spazio-lqd,
.elementor-location-header.lqd-is-sticky .spazio-lqd,
.elementor-location-header.header-sticky-active .spazio-lqd,
.is-stuck .spazio-lqd,
.lqd-is-sticky .spazio-lqd,
.header-sticky-active .spazio-lqd {
    height: 95px !important;
    max-height: 95px !important;
    min-height: 95px !important;
}

/* Cappa la 1ª colonna (logo) per non spingere il container in alto */
.is-stuck .spazio-lqd > .elementor-container > .elementor-column:first-child,
.lqd-is-sticky .spazio-lqd > .elementor-container > .elementor-column:first-child,
.header-sticky-active .spazio-lqd > .elementor-container > .elementor-column:first-child,
.is-stuck .spazio-lqd .elementor-column:first-child,
.lqd-is-sticky .spazio-lqd .elementor-column:first-child,
.header-sticky-active .spazio-lqd .elementor-column:first-child {
    max-height: 75px !important;
    overflow: hidden !important;
}

/* CLICK-FIX: stacking context esplicito + neutralizzazione overlay decorativi
   Hub usa .lqd-overlay come livello di sfondo absolute 100%×100% senza
   pointer-events:none di default, e .elementor-background-overlay fa lo stesso
   in alcune varianti. Quando Elementor inietta uno di questi nella sezione
   verticale del template header, copre i link sottostanti e blocca il click.
   Inoltre il main-header non ha z-index esplicito: in alcuni layout Hub finisce
   dietro a wrapper di pagina. Qui forziamo un piano sopra il contenuto e
   disabilitiamo il pointer-events sugli overlay decorativi. */
header.main-header {
    position: relative;
    z-index: 100;
}

header.main-header .lqd-overlay,
header.main-header .elementor-background-overlay,
header.main-header .lqd-vbg-wrap,
header.main-header .lqd-particles-bg-wrap {
    pointer-events: none !important;
}

header.main-header a,
header.main-header button,
header.main-header [role="button"],
header.main-header .elementor-button-link {
    pointer-events: auto !important;
    position: relative;
    z-index: 1;
}

#wrap,
#lqd-site-content {
    /* Padding ancorato all'altezza REALE renderizzata dal pill (--spazio-actual-height
       viene aggiornato da spazio-lqd-physics.js via ResizeObserver, così sopravvive
       a font-swap, Elementor frontend.js init e resize). Fallback: --spazio-height
       in clamp se il JS non ha ancora misurato. */
    padding-bottom: calc(var(--spazio-actual-height, var(--spazio-height)) + var(--spazio-bottom) + env(safe-area-inset-bottom, 0px) + 8px) !important;
}

/* FIX 2026-05-19 — Vertical Bar header visibile anche su tablet/mobile.
   Diagnosi: stickybar-base.css del plugin hub-elementor-addons imposta su
   .lqd-stickybar-wrap
     [data-sticky-values-measured=false] { visibility:hidden; opacity:0;
        transform:translateX(0) }   (tutte !important)
   e sotto 992px aggiunge display:none!important (sia via @media che via
   [data-elementor-device-mode=mobile/tablet]).
   L'attributo data-sticky-values-measured viene messo a "true" dal JS sticky
   solo se il primo paint è ≥992px. Su mobile direct-load quel JS non parte
   mai, quindi l'attributo resta "false" e la sezione resta opacity:0 (anche
   forzando display+visibility). Da qui il sintomo: "resize da desktop ok,
   direct mobile no — spariscono le vertical bar e tutto l'header collassa".
   FIX: dentro il breakpoint mobile forziamo display, visibility, opacity e
   transform su .lqd-stickybar-wrap, così la regola [data-sticky-values-
   measured=false] non ha più effetto a prescindere dal valore dell'attributo.
   Specificità (0,2,1), batte sia [data-sticky-values-measured=false]
   .lqd-stickybar-wrap (0,2,0) sia [data-elementor-device-mode=mobile/tablet]
   .lqd-stickybar-wrap (0,2,0). Sopra 992px nessuna killer rule è attiva. */
@media (max-width: 991px) {
    html .lqd-stickybar-wrap.lqd-stickybar-wrap {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
    }
}