/* Make the header fixed and semi-transparent black by default (when scrolled) */
.elementor-location-header {
    position: fixed !important;
    width: 100%;
    z-index: 9999;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7) !important; /* 70% transparent black */
    transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* Also ensure inner containers get the semi-transparent black background when scrolled */
.elementor-location-header:not(.is-top_1493bfce) .elementor-section,
.elementor-location-header:not(.is-top_1493bfce) .elementor-container,
.elementor-location-header:not(.is-top_1493bfce) .e-con,
.elementor-location-header:not(.is-top_1493bfce) > div {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

/* Offset for WordPress Admin Bar */
body.admin-bar .elementor-location-header {
    top: var(--wp-admin--admin-bar--height, 32px);
}

@media screen and (max-width: 782px) {
    body.admin-bar .elementor-location-header {
        top: 46px;
    }
}

/* Transparent state class added via JS (at the top of the page) */
.elementor-location-header.is-top_1493bfce {
    background-color: transparent !important;
    box-shadow: none !important;
}

.elementor-location-header.is-top_1493bfce .elementor-section,
.elementor-location-header.is-top_1493bfce .elementor-container,
.elementor-location-header.is-top_1493bfce .e-con,
.elementor-location-header.is-top_1493bfce > div {
    background-color: transparent !important;
    box-shadow: none !important;
}