/* ============================================================
   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:"] {
    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 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; }