/*
 * Julbordsguiden: red top band of the desktop header (.jbg-top) and navbar tweaks.
 * Markup: templates/yootheme_child/templates/header.php (stacked-left layouts). Images: images/header/.
 * Loaded from templates/yootheme_child/index.php after the theme CSS.
 * The desktop header only shows from the mobile breakpoint (customizer: Large, 1200px).
 */

/*
 * The old header used a background image on .tm-header and `.tm-headerbar-top { background: none !important }`
 * in templates/yootheme/css/custom.css. That file is loaded as custom.css?2.4.16 (fixed version), so browsers can
 * keep the old copy for a while: override both here instead of relying on their removal.
 */
.tm-header {
    background-image: none !important;
}

.jbg-top {
    --jbg-band-h: clamp(200px, 18vw, 280px);
    --jbg-snow-h: calc(var(--jbg-band-h) * 0.095);
    position: relative;
    height: var(--jbg-band-h);
    padding: 0;
    overflow: hidden;
    background: linear-gradient(180deg, #f80200 0%, #b61808 100%) !important;
}

/* Decor (stars, sleigh, trees, houses): pinned bottom right, cut from the left on narrow screens */
.jbg-top::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url(../../../images/header/dekor.webp) no-repeat right bottom / auto 100%;
    pointer-events: none;
}

/* Snow wave: stretched to full width, so it never repeats and never shows a seam */
.jbg-top::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    height: var(--jbg-snow-h);
    background: url(../../../images/header/snovag.svg) no-repeat center bottom / 100% 100%;
    pointer-events: none;
}

.jbg-top__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    height: 100%;
}

/* Logo + tagline */
.jbg-top__brand {
    flex: none;
    width: clamp(330px, 24vw, 460px);
    margin-bottom: var(--jbg-snow-h);
}

.jbg-top__logo {
    display: block;
}

.jbg-top__logo img {
    display: block;
    width: 100%;
    height: auto;
}

.jbg-top__tagline {
    margin: 0.35em 0 0;
    padding-left: 0.2em;
    color: #fff;
    font-family: 'PT Serif', serif;
    font-weight: 700;
    font-size: clamp(16px, 1.15vw, 22px);
    line-height: 1.2;
    text-shadow: 0 1px 3px rgba(80, 0, 0, 0.55);
}

/* Santa stands in the snow: bottom aligned, boots over the wave edge */
.jbg-top__tomte {
    flex: none;
    align-self: flex-end;
    height: 86%;
    width: auto;
    margin: 0 0 calc(var(--jbg-snow-h) * 0.3) clamp(16px, 2.5vw, 48px);
}

/*
 * "I samarbete med" + Juligen logo. The decor is pinned to the screen's right edge, so on wide screens the
 * partner block follows it: never more than 120px from the right edge (where it sits at 1440px), even when
 * the container ends further in. Negative right margin = how far it sticks out of the 1200px container.
 */
.jbg-top__partner {
    position: relative;
    flex: none;
    align-self: flex-start;
    margin-left: auto;
    margin-right: min(0px, calc(120px - (100vw - 1200px) / 2));
    padding-top: calc(var(--jbg-band-h) * 0.1);
    text-align: right;
}

/* Soft red halo so the decor (stars, snowflakes) doesn't run through the text and logo */
.jbg-top__partner::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: -30%;
    right: -30%;
    top: -10%;
    bottom: -45%;
    background: radial-gradient(closest-side, rgba(234, 6, 3, 0.95) 55%, rgba(234, 6, 3, 0) 100%);
}

.jbg-top__partner-label {
    display: block;
    margin-bottom: 2px;
    padding-right: 8%;
    color: #fff;
    font-family: 'PT Serif', serif;
    font-size: clamp(13px, 0.85vw, 16px);
    line-height: 1.2;
    text-shadow: 0 1px 3px rgba(80, 0, 0, 0.55);
}

.jbg-top__partner a,
.jbg-top__partner img {
    display: block;
}

.jbg-top__partner img {
    width: clamp(150px, 11vw, 210px);
    height: auto;
    margin-left: auto;
}

/* Navbar: snowflake before the menu */
.jbg-nav-flake.uk-navbar-item {
    min-height: 60px;
    margin-left: 25px;
    padding: 0 6px 0 0;
    color: #fff;
}

.jbg-nav-flake svg {
    display: block;
}

/* Keep snowflake + six menu items + search on one row (theme default item padding is 25px) */
.tm-header .uk-navbar-nav > li > a {
    padding-left: 22px;
    padding-right: 22px;
}

@media (max-width: 1439px) {
    .tm-header .uk-navbar-nav > li > a {
        padding-left: 18px;
        padding-right: 18px;
    }

    .tm-header .uk-search-default {
        width: 280px;
    }
}