/* Header: transparent over a hero, white with a dark menu otherwise and once
   scrolled (pmenergi.dk's behaviour). !important because the menu widget's
   own stored colour (white, for the hero) is Elementor-generated CSS with a
   longer selector; the old Jet header's CSS did the same. Hover and the
   current page keep their own colours. */

.elementor-location-header > .elementor-element {
    background-color: #fff !important;
    transition: background-color .3s ease, box-shadow .3s ease;
}

.elementor-location-header .pmm-desktop > .pmm-list > .pmm-item:not(:hover):not(.is-current) > .pmm-link,
.elementor-location-header .pmm-desktop > .pmm-list > .pmm-item:not(:hover):not(.is-current) > .pmm-link .pmm-arrow,
.elementor-location-header .pmm-toggle {
    color: #2b3c6c !important;
}

/* Over a hero, before scrolling: transparent, white menu, button and cart. */
body.pm-header-overlay:not(.pm-header-scrolled) .elementor-location-header > .elementor-element {
    background-color: transparent !important;
}

body.pm-header-overlay:not(.pm-header-scrolled) .elementor-location-header .pmm-desktop > .pmm-list > .pmm-item > .pmm-link,
body.pm-header-overlay:not(.pm-header-scrolled) .elementor-location-header .pmm-desktop > .pmm-list > .pmm-item > .pmm-link .pmm-arrow,
body.pm-header-overlay:not(.pm-header-scrolled) .elementor-location-header .pmm-toggle,
body.pm-header-overlay:not(.pm-header-scrolled) .elementor-location-header .elementor-button,
body.pm-header-overlay:not(.pm-header-scrolled) .elementor-location-header .elementor-menu-cart__toggle .elementor-button {
    color: #fff !important;
}

body.pm-header-overlay:not(.pm-header-scrolled) .elementor-location-header .elementor-button {
    border-color: #fff !important;
    background-color: transparent !important;
}

/* The cart icon too (its own stored colour is black); the count bubble
   keeps its blue. */
body.pm-header-overlay:not(.pm-header-scrolled) .elementor-location-header .elementor-menu-cart__toggle .elementor-button-icon {
    color: #fff !important;
}

body.pm-header-overlay:not(.pm-header-scrolled) .elementor-location-header .elementor-menu-cart__toggle .elementor-button-icon svg {
    fill: #fff !important;
}

/* The same for Elementor's own Menu widget (Værktøjer → Megamenu), on
   desktop only: below the laptop breakpoint the items sit in the white
   dropdown, where white text would vanish. */
@media (min-width: 1280px) {
    body.pm-header-overlay:not(.pm-header-scrolled) .elementor-location-header .elementor-widget-n-menu {
        --n-menu-title-color-normal: #fff !important;
        --n-menu-title-color-hover: #fff !important;
        --n-menu-title-color-active: #fff !important;
        --n-menu-dropdown-indicator-color-normal: #fff !important;
    }

    body.pm-header-overlay:not(.pm-header-scrolled) .elementor-location-header .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title {
        border-bottom-color: transparent !important;
    }

    body.pm-header-overlay:not(.pm-header-scrolled) .elementor-location-header .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title:is(:hover, .e-current) {
        border-bottom-color: #fff !important;
    }
}

@media (max-width: 1279px) {
    body.pm-header-overlay:not(.pm-header-scrolled) .elementor-location-header .elementor-widget-n-menu {
        --n-menu-toggle-icon-color: #fff !important;
    }
}

/* Above the page, also before it turns sticky: the Menu's dropdown opens
   inside the header and would otherwise sit under the page's sections. */
.elementor-location-header > .elementor-element {
    position: relative;
    z-index: 1000;
}

/* Dropdown layout (laptop and down): an item's content spans the menu, not
   the fixed desktop width ("Fit to content" is not responsive). */
.elementor-location-header .e-n-menu[data-layout="dropdown"] {
    --n-menu-dropdown-content-max-width: 100%;
}

/* The list itself white too, not only the items on it. */
.elementor-location-header .e-n-menu[data-layout="dropdown"] .e-n-menu-heading {
    background: #fff;
}

.elementor-location-header .e-n-menu[data-layout="dropdown"] .e-n-menu-content > .e-con {
    --width: 100%;
    width: 100%;
}

/* Scrolled: white with a shadow. */
body.pm-header-scrolled .elementor-location-header > .elementor-element {
    box-shadow: 0 2px 16px rgba(0, 0, 0, .08);
}

/* Below 1280px (Elementor's Laptop breakpoint, where the Menu becomes the
   hamburger — Værktøjer → Megamenu) and on tablet and mobile: one row — logo, "Log ind" / "Interne datablade",
   cart, and the menu's hamburger last. The header template's three
   containers (logo 15%, menu 70%, cart 15%) are a desktop layout; below
   it the menu container steps aside (display: contents) so its button
   and menu can be ordered around the cart. The !important ones lose to
   Elementor's per-element rules otherwise, or to its container CSS, which
   has the same specificity and loads later (.e-con.e-flex > .e-con-inner). */
@media (max-width: 1279px) {
    .elementor-location-header > .e-con > .e-con-inner,
    .elementor-location-header > .e-con:not(:has(> .e-con-inner)) {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 12px;
    }

    .elementor-location-header > .e-con > .e-con-inner > .e-con:first-child,
    .elementor-location-header > .e-con > .e-con:first-child {
        --width: 160px !important;
        flex: 0 0 auto;
        order: 1;
    }

    .elementor-location-header .e-con:has(> .elementor-widget-n-menu) {
        display: contents;
    }

    .elementor-location-header .e-con:has(> .elementor-widget-n-menu) > .elementor-widget-button {
        order: 2;
        margin-left: auto !important;
    }

    .elementor-location-header .e-con:has(> .elementor-widget-woocommerce-menu-cart) {
        --width: auto !important;
        flex: 0 0 auto;
        order: 3;
    }

    /* Only as wide as the hamburger, so the free space goes before the
       button (its dropdown is stretched to the viewport by Elementor). */
    .elementor-location-header .elementor-widget-n-menu {
        order: 4;
        flex: 0 0 auto !important;
        width: auto !important;
        --width: auto;
    }

    .elementor-location-header .elementor-menu-cart__toggle .elementor-button-text {
        white-space: nowrap;
    }
}

@media (max-width: 767px) {
    .elementor-location-header > .e-con > .e-con-inner,
    .elementor-location-header > .e-con:not(:has(> .e-con-inner)) {
        gap: 8px;
    }

    .elementor-location-header > .e-con > .e-con-inner > .e-con:first-child,
    .elementor-location-header > .e-con > .e-con:first-child {
        --width: 120px !important;
    }

    /* Room for logo, button, cart and hamburger: the cart as its icon and
       count only, the button smaller. */
    .elementor-location-header .elementor-menu-cart__toggle .elementor-button-text {
        display: none;
    }

    .elementor-location-header .e-con:has(> .elementor-widget-n-menu) > .elementor-widget-button .elementor-button {
        padding: 8px 12px;
        font-size: 14px;
    }
}