/* ============================================================
   mesa-header-fix.css — global header improvements (all pages)
   Complements mu-plugins/mesa-fixed-header-offset.php (offset,
   admin-bar, cpel dropdown, flex min-width, overflow-x guard).
   Driven by mesa-header-sensor.js states:
     body.mhs-compact      = scrolled >120px, slim header
     header[data-mhs-mode] = burger | inline
   ============================================================ */

header.elementor-location-header {
    --mhs-hpad: 12px;
    --mhs-logo-h: 80px;
    --mhs-logo-h-compact: 44px;
}

/* ---------- structural normalization ---------- */

/* fixed container: consistent horizontal padding + min-width guard */
header.elementor-location-header .e-con.e-parent {
    padding-left: var(--mhs-hpad) !important;
    padding-right: var(--mhs-hpad) !important;
    box-sizing: border-box !important;
    max-width: 100vw !important;
}

/* children must never force the row wider than the viewport */
header.elementor-location-header .e-con > * {
    min-width: 0 !important;
}

/* logo: cap height, keep aspect */
header.elementor-location-header .elementor-widget-image img,
header.elementor-location-header [class*="site-logo"] img {
    max-height: var(--mhs-logo-h);
    width: auto;
    max-width: 100%;
    transition: max-height .25s ease;
}

/* nav container: right-aligned, wraps cleanly */
header.elementor-location-header .e-con.e-child:has(.elementor-widget-nav-menu) {
    flex: 1 1 auto;
    justify-content: flex-end;
    align-items: center;
}

/* ---------- compact mode (scrolled) ---------- */
body.mhs-compact header.elementor-location-header .e-con.e-parent {
    --padding-top: 3px !important;
    --padding-bottom: 3px !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.18) !important;
}
body.mhs-compact header.elementor-location-header .elementor-widget-image img,
body.mhs-compact header.elementor-location-header [class*="site-logo"] img {
    max-height: var(--mhs-logo-h-compact);
}

/* ---------- tap targets (WCAG 44px) ---------- */
/* NOTA: il display del burger NON va forzato fuori da media query:
   Elementor mostra l'inline nav su desktop e nasconde il toggle via CSS;
   un display:inline-flex non scopato lo rende visibile (e vuoto) su desktop. */
@media (max-width: 1024px) {
    header.elementor-location-header .elementor-menu-toggle {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}
/* lang switcher: tap target reale era ~36px @1440; selettori per classe
   widget (gli elementor-element-* IDs differiscono per header IT/EN/ES/RU) */
header.elementor-location-header .elementor-widget-polylang-language-switcher,
header.elementor-location-header [class*="cpel-switcher--layout"] {
    flex: 0 0 auto;
    width: auto !important;
    min-width: 0 !important;
}
header.elementor-location-header .cpel-switcher__toggle,
header.elementor-location-header [class*="cpel-switcher"] .cpel-switcher__toggle {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
/* phone/text-editor: numero su una riga, target pieno */
header.elementor-location-header .elementor-widget-text-editor {
    flex: 0 0 auto;
    width: auto !important;
    min-width: 0 !important;
    white-space: nowrap;
}
header.elementor-location-header .elementor-widget-text-editor a[href^="tel:"]:not(.mesa-hdr-btn) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    white-space: nowrap;
}
/* nav-menu widget: resta allineato a destra ma puo' restringersi */
header.elementor-location-header .elementor-widget-nav-menu {
    flex: 0 1 auto;
    min-width: 0 !important;
}

/* ---------- dropdown containment (all widths) ---------- */
header.elementor-location-header [class*="cpel-switcher__list"],
header.elementor-location-header .elementor-nav-menu--dropdown {
    max-width: min(320px, calc(100vw - 16px)) !important;
    box-sizing: border-box;
}
header.elementor-location-header .elementor-nav-menu--dropdown {
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ---------- mobile nav dropdown: full-width overlay, left-aligned ----------
   Bug reale (2026-11-02): il dropdown burger aperto era una colonna stretta
   right-aligned (~180px su 500px) dentro il flow dell'header: item su 2 righe,
   barra gonfiata a 500-687px. Ora overlay assoluto sotto la barra, larghezza
   piena, lista leggibile, scroll interno. */
@media (max-width: 1024px) {
    header.elementor-location-header nav.elementor-nav-menu--dropdown {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        max-height: calc(100vh - 90px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        background: #fff !important;
        box-shadow: 0 10px 24px rgba(0,0,0,.18) !important;
        padding: 4px 0 !important;
        z-index: 100001 !important;
    }
    /* items: leggibili, allineati a sinistra, full width */
    header.elementor-location-header nav.elementor-nav-menu--dropdown .elementor-nav-menu {
        width: 100% !important;
    }
    header.elementor-location-header nav.elementor-nav-menu--dropdown .menu-item > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100% !important;
        text-align: left !important;
        padding: 14px 20px !important;
        font-size: 15px !important;
        line-height: 1.3 !important;
        border-bottom: 1px solid rgba(0,0,0,.05);
        box-sizing: border-box;
    }
    header.elementor-location-header nav.elementor-nav-menu--dropdown .sub-menu a {
        padding-left: 32px !important;
        font-size: 14px !important;
    }
    /* il toggle resta dentro la barra, dropdown sotto: niente overlap.
       Neutralizza gli ancestor position:relative tra il nav widget e la barra
       fixed: cosi' il containing block del dropdown e' la barra stessa
       (left:0/right:0 = piena larghezza, top:100% = sotto la barra). */
    header.elementor-location-header .elementor-widget-nav-menu,
    header.elementor-location-header .elementor-widget-nav-menu .elementor-widget-container,
    header.elementor-location-header .e-con.e-parent > .e-con {
        position: static !important;
    }
    header.elementor-location-header .e-con.e-parent {
        overflow: visible !important;
    }
}
/* desktop: dropdown mobile non deve mai apparire >=1025 */
@media (min-width: 1025px) {
    header.elementor-location-header nav.elementor-nav-menu--dropdown {
        display: none !important;
    }
}

/* ---------- mobile/tablet layout: distribuzione righe ----------
   Feedback utente: phone/lang/burger centrati a grappolo = poco senso.
   Struttura Elementor mantenuta (riga1 logo, riga2 controlli) ma la riga
   controlli diventa full-width distribuita: [phone ......... lang burger]. */
@media (max-width: 1024px) {
    /* la riga controlli e' un flex child della barra: full width + space-between */
    header.elementor-location-header .e-con.e-parent > .e-con:has(.elementor-widget-nav-menu) {
        flex: 0 0 100% !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 14px !important;
    }
    /* phone a sinistra */
    header.elementor-location-header .elementor-widget-text-editor {
        flex: 0 0 auto !important;
        text-align: left !important;
        min-width: 0;
    }
    /* lang + burger spinti a destra */
    header.elementor-location-header .elementor-widget-polylang-language-switcher {
        flex: 0 0 auto !important;
        margin-left: auto !important;
    }
    /* nav widget: base size ridotta al toggle (il box widget e' 180-333px
       di base per la nav inline nascosta) → burger compatto a destra */
    header.elementor-location-header .elementor-widget-nav-menu {
        flex: 0 0 auto !important;
        width: 44px !important;
        min-width: 44px !important;
    }
    header.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main {
        display: none !important;
    }
    /* logo: dimensione coerente su mobile (non full-width stretch) */
    header.elementor-location-header .elementor-widget-image img {
        max-width: 200px !important;
        height: auto !important;
    }
}

/* ---------- tablet 768-1024: riga singola [logo | phone lang burger] ----------
   Elementor a tablet: parent flex-wrap:NOWRAP + logo container width:30px
   (logo invisibile) + ordine interno [nav phone lang]. Ripristino: logo
   visibile a sinistra, controlli distribuiti a destra, burger ultimo. */
@media (min-width: 768px) and (max-width: 1024px) {
    header.elementor-location-header .e-con.e-parent > .e-con:has(.elementor-widget-image) {
        flex: 0 0 auto !important;
        min-width: 170px !important;
        width: auto !important;
    }
    /* controlli: occupano il resto della riga, giustificati a destra,
       ordine forzato phone -> lang -> burger (DOM tablet: nav phone lang) */
    header.elementor-location-header .e-con.e-parent > .e-con:has(.elementor-widget-nav-menu) {
        flex: 1 1 auto !important;
        flex-basis: auto !important;
        justify-content: flex-end !important;
    }
    header.elementor-location-header .elementor-widget-text-editor { order: 1; }
    header.elementor-location-header .elementor-widget-polylang-language-switcher { order: 2; }
    header.elementor-location-header .elementor-widget-nav-menu { order: 3; }
}

/* ---------- mobile refinements ---------- */
@media (max-width: 767px) {
    header.elementor-location-header {
        --mhs-hpad: 8px;
    }
    /* logo container may shrink so burger+phone+lang fit the first row */
    header.elementor-location-header .e-con.e-child:has(.elementor-widget-image) {
        flex: 0 1 auto;
    }
    /* phone text stays one line, smaller */
    header.elementor-location-header .elementor-widget-text-editor a[href^="tel:"],
    header.elementor-location-header .elementor-widget-text-editor {
        font-size: 13px;
    }
    /* burger stays visible and reachable */
    header.elementor-location-header .elementor-menu-toggle {
        font-size: 22px;
    }
}
@media (max-width: 430px) {
    /* very small phones: let phone collapse to icon-only width gracefully */
    header.elementor-location-header .elementor-widget-text-editor {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ---------- sensor report (debug aid, ?mhs=1) ---------- */
#mhs-report { display: none; }

/* ---------- header action buttons (tel + whatsapp, icon-only) ----------
   Sostituiscono il numero di telefono testuale e la mail esposta
   (RU aveva websitenotify@ nel text-editor). 2026-11-03 */
header.elementor-location-header .mesa-hdr-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
header.elementor-location-header .mesa-hdr-actions p { margin: 0; }
header.elementor-location-header .mesa-hdr-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0 !important;
    line-height: 0;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    max-width: 40px;
    max-height: 40px;
    border-radius: 9px;
    background: #1c2b4a;
    color: #fff !important;
    text-decoration: none !important;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
header.elementor-location-header .mesa-hdr-btn svg { display: block; }
/* icone via CSS mask (2026-11-03): il text-editor Elementor non consente
   <svg> inline (kses/sanitizzazione), quindi icona = ::before + mask data-URI */
header.elementor-location-header .mesa-hdr-btn::before {
    content: '';
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background: #fff;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: contain; mask-size: contain;
}
header.elementor-location-header .mesa-hdr-btn-tel::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24c1.12.37 2.33.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.4 21 3 13.6 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.24.2 2.45.57 3.57a1 1 0 0 1-.24 1.02l-2.21 2.2z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24c1.12.37 2.33.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.4 21 3 13.6 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.24.2 2.45.57 3.57a1 1 0 0 1-.24 1.02l-2.21 2.2z'/></svg>");
}
header.elementor-location-header .mesa-hdr-btn-wa::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.64.07-.3-.15-1.26-.46-2.39-1.47-.88-.79-1.48-1.76-1.65-2.06-.17-.3-.02-.46.13-.6.13-.14.3-.35.44-.53.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.08-.15-.67-1.62-.92-2.22-.24-.58-.49-.5-.67-.51-.17-.01-.37-.01-.57-.01-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48s1.06 2.87 1.21 3.07c.15.2 2.1 3.2 5.08 4.49.71.3 1.26.49 1.7.62.71.23 1.36.2 1.87.12.57-.08 1.76-.72 2-1.41.25-.7.25-1.29.18-1.42-.08-.12-.28-.2-.57-.34M12.05 21.8h-.01a9.87 9.87 0 0 1-5.03-1.38l-.36-.21-3.74.98 1-3.65-.24-.37a9.83 9.83 0 0 1-1.51-5.26c0-5.45 4.44-9.87 9.9-9.87a9.82 9.82 0 0 1 6.99 2.9 9.82 9.82 0 0 1 2.89 6.99c0 5.45-4.44 9.87-9.89 9.87m8.41-18.3A11.82 11.82 0 0 0 12.05 0C5.5 0 .16 5.34.16 11.9c0 2.1.55 4.14 1.59 5.95L.06 24l6.3-1.65a11.9 11.9 0 0 0 5.68 1.45h.01c6.55 0 11.89-5.34 11.89-11.9 0-3.18-1.24-6.16-3.48-8.4z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.64.07-.3-.15-1.26-.46-2.39-1.47-.88-.79-1.48-1.76-1.65-2.06-.17-.3-.02-.46.13-.6.13-.14.3-.35.44-.53.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.08-.15-.67-1.62-.92-2.22-.24-.58-.49-.5-.67-.51-.17-.01-.37-.01-.57-.01-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48s1.06 2.87 1.21 3.07c.15.2 2.1 3.2 5.08 4.49.71.3 1.26.49 1.7.62.71.23 1.36.2 1.87.12.57-.08 1.76-.72 2-1.41.25-.7.25-1.29.18-1.42-.08-.12-.28-.2-.57-.34M12.05 21.8h-.01a9.87 9.87 0 0 1-5.03-1.38l-.36-.21-3.74.98 1-3.65-.24-.37a9.83 9.83 0 0 1-1.51-5.26c0-5.45 4.44-9.87 9.9-9.87a9.82 9.82 0 0 1 6.99 2.9 9.82 9.82 0 0 1 2.89 6.99c0 5.45-4.44 9.87-9.89 9.87m8.41-18.3A11.82 11.82 0 0 0 12.05 0C5.5 0 .16 5.34.16 11.9c0 2.1.55 4.14 1.59 5.95L.06 24l6.3-1.65a11.9 11.9 0 0 0 5.68 1.45h.01c6.55 0 11.89-5.34 11.89-11.9 0-3.18-1.24-6.16-3.48-8.4z'/></svg>");
}
header.elementor-location-header .mesa-hdr-btn-tel:hover {
    background: #2a3d63;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0,0,0,.24);
}
header.elementor-location-header .mesa-hdr-btn-wa {
    background: #1faa53;
}
header.elementor-location-header .mesa-hdr-btn-wa:hover {
    background: #25c05f;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0,0,0,.24);
}
/* il widget text-editor ora contiene i bottoni: niente larghezza testo */
header.elementor-location-header .elementor-widget-text-editor {
    width: auto !important;
}
header.elementor-location-header .elementor-widget-text-editor .elementor-widget-container,
header.elementor-location-header .elementor-widget-text-editor .elementor-widget-container p {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
}

/* ==== 2026-11-03: submenu annidato (eIFU) verticale inline, non flyout orizzontale ====
   La sottovoce di 3° livello apriva a destra dentro un ul con overflow:auto
   -> scrollbar orizzontale. Ora resta nel flusso verticale sotto il parent. */
header .elementor-nav-menu--main .sub-menu .sub-menu,
header .elementor-nav-menu__container .sub-menu .sub-menu {
    position: static !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    margin: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    box-shadow: none !important;
    border: none !important;
    border-left: 3px solid rgba(22,137,154,.35) !important;
    margin-left: 12px !important;
}
header .sub-menu .sub-menu > li > a {
    white-space: normal !important;
    font-size: .92em !important;
}