/* ─── Header: base transition (only the real one, not the invisible spacer) ─── */
.main-header:not(.elementor-sticky__spacer) {
    transition:
        background-color 0.4s ease,
        box-shadow       0.4s ease,
        min-height       0.4s ease,
        padding-top      0.4s ease,
        padding-bottom   0.4s ease !important;
    will-change: background-color, min-height;
}

/* ─── Scrolled: solid dark background + shadow ─── */
.main-header.la-sol-scrolled:not(.elementor-sticky__spacer) {
    background-color: #03203E !important;
    background-image: none !important;
    box-shadow: 0 2px 28px rgba(0, 0, 0, 0.5) !important;
    min-height: 70px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* ─── Logo img: smooth size transition ─── */
.main-header:not(.elementor-sticky__spacer) .main-logo img {
    height: auto;
    width: auto;
    max-height: 120px; /* explicit value so CSS can transition back smoothly (none → value can't animate) */
    display: block;
    transition:
        max-height 0.35s ease,
        opacity    0.18s ease;
}

/* ─── Logo scrolled: horizontal logo, moderately smaller ─── */
.main-header.la-sol-scrolled:not(.elementor-sticky__spacer) .main-logo img {
    max-height: 44px;
    max-width: 180px;
}