/* Festive theme - loaded by festive-theme.js only when a page has header-theme-* metadata.
   Under 900px only the -mobile images show (the border strip reuses the desktop one). */

/* border: toran strip along the top; the header and page shift down by its height */
.header.block.festive-border {
    --festive-h: 16px;

    padding-top: var(--festive-h);
}

header:has(.header.block.festive-border) {
    padding-bottom: 16px;
}

.header.block.festive-border::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    z-index: 1001; /* above the mobile nav-wrapper, which is fixed with z-index 1000 */
    height: var(--festive-h);
    background: var(--festive-border-mobile, var(--festive-border)) repeat-x left top / auto 100%;
    filter: brightness(1.03);
    mix-blend-mode: multiply;
    pointer-events: none;
}

.header.block.festive-border .logged-in-popup {
    margin-top: var(--festive-h);
}

/* decorative slots; multiply drops a white/cream image background on the white header */
.nav-festive {
    position: absolute;
    z-index: 1001;
    background: no-repeat center / contain;
    filter: brightness(1.03); /* lifts off-white/JPG noise to pure white so it blends away */
    mix-blend-mode: multiply;
    pointer-events: none;
}

.nav-festive-left,
.nav-festive-right {
    top: var(--festive-h, 0);
    width: 64px;
    height: 32px;
}

.nav-festive-left {
    left: 0;
    background-image: var(--festive-left-mobile, none);
    background-position: left top;
}

.nav-festive-right {
    right: 0;
    background-image: var(--festive-right-mobile, none);
    background-position: right top;
}

/* mobile: beside-logo fills the brand section after the logo, i.e. the gap before the first
   icon - that gap grows with the phone width, and the image stays centred in it */
.nav-wrapper > .nav-brand:has(.nav-festive-beside-logo) {
    position: relative;
}

.nav-festive-beside-logo {
    inset: 0 0 0 76px; /* the mobile logo is 76px wide */
    background-image: var(--festive-beside-logo-mobile, none);
}

/* mobile: centre image sits just after the logo */
.nav-festive-center {
    left: 92px;
    bottom: 2px;
    width: 28px;
    height: 32px;
    background-image: var(--festive-center-mobile, none);
}

@media (width < 900px) {
    .header.block.festive-border .nav-wrapper {
        top: var(--festive-h);
    }

    .header.block.festive-border nav[aria-expanded="true"] .nav-sections {
        margin-top: var(--festive-h);
    }
}

@media (width >= 900px) {
    .header.block.festive-logo .nav-brand img {
        content: var(--festive-logo);
        object-fit: contain;
        filter: brightness(1.03);
        mix-blend-mode: multiply;
    }

    .header.block.festive-border::before {
        background-image: var(--festive-border);
    }

    /* 900-1199px is too tight for decorations; only the logo swap applies */
    .nav-festive {
        display: none;
    }
}

@media (width >= 1200px) {
    .header.block.festive-border {
        --festive-h: 24px;
    }

    header:has(.header.block.festive-border) {
        padding-bottom: 24px;
    }

    /* decorations only use existing white space - the header layout never moves.
       #nav is centred at max 1680px, so offsets follow its edge on wide screens. */
    .header.block.festive {
        --festive-edge: max(0px, (100% - 1680px) / 2);
    }

    /* beside-logo: the gap between the logo (ends at 112px) and the PRODUCTS text (204px) */
    .nav-wrapper > .nav-brand:has(.nav-festive-beside-logo) {
        position: static;
    }

    .nav-festive-beside-logo {
        display: block;
        z-index: 1001;
        inset: 0 auto auto calc(var(--festive-edge) + 116px);
        width: 84px;
        height: 100%;
        background-image: var(--festive-beside-logo);
        background-size: contain;
        background-position: center;
    }

    /* corners take the full header height; content steps in so they never overlap */
    .nav-festive-left,
    .nav-festive-right {
        display: block;
        width: 88px;
        height: calc(100% - var(--festive-h, 0px));
    }

    .nav-festive-left {
        background-image: var(--festive-left);
    }

    /* right: beside the user icon, under the language switch */
    .nav-festive-right {
        top: auto;
        right: var(--festive-edge);
        bottom: 0;
        width: 64px;
        height: 44px;
        background-image: var(--festive-right);
    }

    .header.block.festive-left #nav {
        padding-left: 96px;
    }

    /* menu keeps its natural width; the centre slot only takes the leftover gap */
    .nav-wrapper:has(.nav-festive-center) .nav-sections {
        flex: 0 0 auto;
    }

    /* full-height centre slot that also uses the empty space above the menu row */
    .nav-festive-center {
        display: block;
        position: static;
        flex: 1;
        align-self: flex-start;
        width: auto;
        height: 84px;
        margin: -42px 8px 0;
        min-width: 0;
        background-image: var(--festive-center); /* contain: always the whole picture, as big as the gap allows */
        background-position: center bottom;
    }
}