/* Opt-in: the view supplies HeroHeaderColor and marks its responsive images
   or billboard container with data-header-hero. Other pages keep their spacing. */
body.hero-header #page {
    margin-top: 0 !important;
    transition: margin-left .3s, margin-right .3s;
}

body.hero-header #header {
    background: transparent !important;
    isolation: isolate;
    transition: height .3s, left .3s, right .3s;
}

body.hero-header #header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    /* Keep the glass layer opaque as an element: only its tint fades, so
       the backdrop blur stays consistent at high transparency. */
    background-color: var(--hero-header-color);
    background-color: color-mix(in srgb, var(--hero-header-color) calc(var(--hero-header-opacity, 1) * 100%), transparent);
    -webkit-backdrop-filter: blur(4px) saturate(110%);
    backdrop-filter: blur(4px) saturate(110%);
    pointer-events: none;
}

/* :where keeps the legacy rotator's .accentColor rule rewriting from
   painting opaque rectangles behind individual header elements. */
body.hero-header #header #menu:where(.accentColor),
body.hero-header #header #logo > a > img:where(.accentColor),
body.hero-header #header #mobileMenuIcon:where(.accentColor) {
    background: transparent !important;
}

body.hero-header #header.showMobileMenu::before {
    background-color: var(--hero-header-color);
}

/* Follow the white artwork's outline rather than shadowing its image box. */
body.hero-header #header #logo > a > img,
body.hero-header #header #login-partial > div:first-child .img-avatar {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55));
}

body.hero-header #header #menu > ul > li > a,
body.hero-header #header #mobileMenuIcon > i {
    text-shadow: 0 1px 2px rgba(0, 0, 0, .65);
}

body.hero-header .top-background-fix {
    display: none;
}

/* Text-bearing billboards need clearance; their full-width background still
   starts at the top. Do not change this padding as the header shrinks. */
body.hero-header .hero-header-panel {
    padding-top: 50px;
    display: flow-root;
}

/* Show the taller artwork 100px sooner beneath the overlay header.
   Keep the existing small/mobile image selection at 800px. */
@media only screen and (1000px <= width < 1100px) {
    body.hero-header .blogHeaderLargeImage,
    body.hero-header .articleHeaderLargeImage,
    body.hero-header .brandHeaderLargeImage {
        display: block;
    }

    body.hero-header .blogHeaderWideImage,
    body.hero-header .articleHeaderWideImage,
    body.hero-header .brandHeaderWideImage {
        display: none;
    }
}

/* Event details normally choose wide artwork at 801px on shorter screens. */
@media only screen and (max-height: 900px) and (801px <= width < 901px) {
    body.hero-header .eventHeaderLargeImage {
        display: block;
    }

    body.hero-header .eventHeaderWideImage {
        display: none;
    }
}

@media only screen and (min-width: 900px) {
    body.hero-header {
        --code-header-height-expanded: 84px;
        --code-logo-width-expanded: 150px;
        --code-menu-offset-expanded: 25px;
    }

    body.hero-header .hero-header-panel {
        padding-top: 84px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.hero-header #header,
    body.hero-header #header *,
    body.hero-header #page {
        transition: none !important;
    }
}