/* Sticky black header, shared by header.php and headerlight.php. */
.stema-header-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 108px;
    background: #171717;
    z-index: 998;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease;
}

/* Shown only after the page is scrolled (set by js/header-sticky.js). */
html.stema-scrolled .stema-header-bg {
    opacity: 1;
}

/* Homepage does not scroll: never show the black bar there. */
body:has(#home) .stema-header-bg {
    display: none;
}

/* Lock scrolling while the menu panel is open. */
html.stema-menu-open,
html.stema-menu-open body,
html.stema-menu-open .global-content-wrapper,
html.stema-menu-open .global-content-vertical-fix {
    overflow: hidden !important;
    overscroll-behavior: none;
}

nav.menu,
nav.menu.--open,
nav.menu.--close {
    position: fixed !important;
    top: 30px !important;
    z-index: 999 !important;
    transition: none !important;
}

#menu-panel {
    z-index: 1000 !important;
}

/* White logo + hamburger on every page (dark versions vanish on black). */
#barba-wrapper #nav-button,
#nav-button {
    background: url(/images/hamburger.png) center / cover no-repeat !important;
}

@media all and (max-width: 480px) {
    .stema-header-bg {
        height: 96px;
    }

    nav.menu,
    nav.menu.--open,
    nav.menu.--close {
        top: 25px !important;
    }

    #nav-button,
    #barba-wrapper #nav-button,
    .right #nav-button {
        top: 33px !important;
    }

    #nav-close {
        top: 33px !important;
    }
}

/* Contact page: an unused transform on this wrapper breaks position:fixed. */
.global-content-vertical-fix {
    transform: none !important;
}

/* Expertise: keep the vertical scroll-progress bar visible over the header. */
.progress-container {
    z-index: 999 !important;
}

/* Desktop, all pages except the homepage: keep logo + hamburger inside a centred 1465px container
   (the black background bar stays full width). */
@media all and (min-width: 1024px) {
    nav.menu.menu--boxed,
    nav.menu.menu--boxed.--open,
    nav.menu.menu--boxed.--close {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
        width: calc(100% - 120px) !important;
        max-width: 1465px !important;
        left: 50% !important;
        right: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: translateX(-50%) !important;
    }

    nav.menu.menu--boxed .menu__link.left,
    nav.menu.menu--boxed .menu__link.right {
        position: static !important;
        display: flex !important;
        align-items: center !important;
        height: auto !important;
        margin: 0 !important;
        top: auto !important;
    }

    nav.menu.menu--boxed .menu__link.right header {
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    nav.menu.menu--boxed .menu__link.right .clearfix {
        display: none !important;
    }

    nav.menu.menu--boxed #nav-button,
    #barba-wrapper nav.menu.menu--boxed #nav-button {
        position: static !important;
        float: none !important;
        margin: 0 !important;
    }

    #menu-panel.menu--boxed #nav-close {
        right: max(60px, calc((100vw - 1465px) / 2)) !important;
    }
}

/* Menu links: 45px on every page and screen size (was 60px), hover grows a little. */
#menu-panel nav ul.links li a {
    font-size: 45px !important;
}

#menu-panel nav ul.links li a:hover {
    font-size: 56px !important;
}

/* Panel logo uses the same white logo image as the header, sized to fit. */
#menu-panel.menu--boxed #nav-logo {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Expertise (headerlight.php) starts on a white background: use the dark
   logo + hamburger until the page is scrolled and the dark bar appears. */
nav.menu--light .menu__logo img {
    transition: filter .25s ease;
}

html:not(.stema-scrolled) nav.menu--light .menu__logo img {
    filter: brightness(0);
}

html:not(.stema-scrolled) #barba-wrapper nav.menu--light #nav-button,
html:not(.stema-scrolled) nav.menu--light #nav-button {
    background-image: url(/images/hamburgerdark.png) !important;
}