/* ═══════════════════════════════════════════════════════════
   Villa Megna — Luxury Override Elementor
   Override mirati e chirurgici dell'output di Elementor Pro.
   NON toccare struttura griglia o layout Elementor.
   ═══════════════════════════════════════════════════════════ */

/* ── Header trasparente → navy al scroll ────────────────────
   La classe .scrolled viene aggiunta da villa-ui.js        */

.elementor-location-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: transparent !important;
    transition:
        background var(--vm-transition-base),
        box-shadow  var(--vm-transition-base);
}

.elementor-location-header.scrolled {
    background: var(--vm-navy) !important;
    box-shadow: 0 2px 24px rgba(0, 0, 0, .3);
}

/* ── Logo header: max dimensioni su tutti i dispositivi ─────
   La classe --vm-header-h va ridotta di conseguenza.
   Il logo è composto da 2 immagini (testo + fiori): entrambe
   vengono limitate qui.                                     */

.elementor-location-header .elementor-widget-image img,
.elementor-location-header .elementor-widget-site-logo img {
    max-height: 44px  !important;
    max-width:  160px !important;
    height:     auto  !important;
    width:      auto  !important;
    min-height: 0     !important;
    object-fit: contain !important;
    display:    inline-block !important;
}

/* Elimina gap interno tra i widget dell'header (es. testo + fiori) */
.elementor-location-header .elementor-widget-container {
    padding-top:    0 !important;
    padding-bottom: 0 !important;
}
.elementor-location-header .elementor-widget {
    margin-bottom: 0 !important;
}

/* Aggiorna la compensazione fixed-header con la nuova altezza */
:root {
    --vm-header-h: 60px;
}

@media (max-width: 767px) {
    .elementor-location-header .elementor-widget-image img,
    .elementor-location-header .elementor-widget-site-logo img {
        max-height: 36px  !important;
        max-width:  110px !important;
    }
    :root {
        --vm-header-h: 52px;
    }
}

/* Compensa l'altezza del fixed header sul contenuto immediatamente successivo */
body:not(.elementor-editor-active) .elementor-section.elementor-top-section:first-of-type,
body:not(.elementor-editor-active) .e-con.e-parent:first-of-type {
    padding-top: var(--vm-header-h);
}

/* ── Bottoni Elementor → palette gold ───────────────────── */

.elementor-widget-button .elementor-button,
.elementor-button-wrapper .elementor-button {
    background-color: var(--vm-gold) !important;
    color:            var(--vm-navy) !important;
    border-color:     var(--vm-gold) !important;
    font-family:      var(--vm-font-ui) !important;
    font-weight:      700 !important;
    letter-spacing:   .08em !important;
    text-transform:   uppercase !important;
    border-radius:    var(--vm-radius-sm) !important;
    transition:       all var(--vm-transition-base) !important;
}

.elementor-widget-button .elementor-button:hover,
.elementor-button-wrapper .elementor-button:hover {
    background-color: var(--vm-gold-dark) !important;
    border-color:     var(--vm-gold-dark) !important;
    color:            var(--vm-white) !important;
    box-shadow:       var(--vm-shadow-gold) !important;
    transform:        translateY(-2px) !important;
}

/* ── Sezione hero 100vh ─────────────────────────────────────
   Applica la classe CSS custom "vm-hero-full" nella sezione
   Elementor → Avanzato → Classe CSS                        */

.vm-hero-full {
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
}

.vm-hero-full > .elementor-container,
.vm-hero-full > .e-con-inner {
    width: 100%;
}

/* ── Rimuove colore giallo default Elementor ─────────────── */

.elementor-button.elementor-button-link {
    background-color: var(--vm-gold) !important;
}

/* ── Heading gold accent (classe CSS custom) ─────────────── */

.vm-gold-heading .elementor-heading-title {
    color: var(--vm-gold) !important;
}

.vm-white-heading .elementor-heading-title {
    color: var(--vm-white) !important;
}

/* ── Sezione sfondo navy (classe CSS custom) ─────────────── */

.vm-bg-navy {
    background-color: var(--vm-navy) !important;
}

.vm-bg-navy .elementor-heading-title,
.vm-bg-navy h1,
.vm-bg-navy h2,
.vm-bg-navy h3,
.vm-bg-navy p {
    color: var(--vm-white) !important;
}

/* ── Separatori → gold ───────────────────────────────────── */

.elementor-widget-divider .elementor-divider-separator {
    border-color: var(--vm-gold) !important;
}

/* ── Rimuove padding horizontal eccessivo mobile ─────────── */

@media (max-width: 767px) {
    .elementor-section > .elementor-container,
    .e-con > .e-con-inner {
        padding-left:  var(--vm-space-4) !important;
        padding-right: var(--vm-space-4) !important;
    }
}

/* ── Popup Elementor Pro → non interferisce con sticky bar ── */

.elementor-popup-modal {
    z-index: calc(var(--vm-z-modal) + 1) !important;
}

/* ── Video 16:9 full-width ───────────────────────────────────
   Aggiungi "vm-video-hero" alla sezione Elementor che contiene
   il video: Avanzato → Classe CSS aggiuntiva                */

.vm-video-hero {
    overflow: hidden !important;
}

.vm-video-hero,
.vm-video-hero > .elementor-container,
.vm-video-hero > .e-con-inner {
    padding-left:  0 !important;
    padding-right: 0 !important;
    max-width:     100% !important;
}

.vm-video-hero .elementor-column,
.vm-video-hero .elementor-widget-wrap,
.vm-video-hero .elementor-element-populated {
    padding: 0 !important;
}

/* Container video con aspect-ratio 16:9 */
.vm-video-hero .elementor-widget-video .elementor-video-container {
    position:     relative  !important;
    aspect-ratio: 16 / 9   !important;
    overflow:     hidden    !important;
    width:        100%      !important;
    height:       auto      !important;
}

.vm-video-hero .elementor-widget-video .elementor-video-container iframe,
.vm-video-hero .elementor-widget-video .elementor-video-container video {
    position: absolute !important;
    inset:    0        !important;
    width:    100%     !important;
    height:   100%     !important;
    border:   0;
}

/* Fallback: iframe YouTube/Vimeo senza container Elementor */
.vm-video-hero iframe[src*="youtube"],
.vm-video-hero iframe[src*="youtu.be"],
.vm-video-hero iframe[src*="vimeo"] {
    display:      block      !important;
    width:        100%       !important;
    aspect-ratio: 16 / 9    !important;
    height:       auto       !important;
    border:       0;
}

/* ── Mobile: fix foto decentrata (homepage) ─────────────────
   Le colonne Elementor nelle sezioni non-hero della homepage
   vanno al 100% su mobile per evitare che l'immagine lasci
   spazio colorato a destra (sfondo sezione visibile).
   :has() è supportato da tutti i browser moderni (2024+).   */

@media (max-width: 767px) {
    /* Colonne con immagini → 100% larghezza */
    .vm-homepage .elementor-section:not(.vm-hero-full):not(.elementor-inner-section) .elementor-column:has(.elementor-widget-image) {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Rimuovi padding laterale che causa l'offset */
    .vm-homepage .elementor-section:not(.vm-hero-full) .elementor-column:has(.elementor-widget-image) > .elementor-widget-wrap,
    .vm-homepage .elementor-section:not(.vm-hero-full) .elementor-column:has(.elementor-widget-image) > .elementor-element-populated {
        padding-left:  0 !important;
        padding-right: 0 !important;
    }

    /* Immagini nelle sezioni → full width */
    .vm-homepage .elementor-section:not(.vm-hero-full) .elementor-widget-image img {
        width:     100% !important;
        max-width: 100% !important;
        height:    auto !important;
        display:   block !important;
    }

    /* Ripristino logo nell'header (stessa specificità, viene dopo → vince) */
    .vm-homepage .elementor-location-header .elementor-widget-image img,
    .vm-homepage .elementor-location-header .elementor-widget-site-logo img {
        width:      auto  !important;
        max-width:  130px !important;
        max-height:  45px !important;
        display: inline-block !important;
    }
}