/**
 * Desktop main menu on one line (site-wide, loaded via Magento_Theme/layout/default.xml).
 * Only targets Hyvä's desktop navigation (.navigation nav); logo, icons and mobile menu untouched.
 * No template override: Hyvä's menu template stays upgrade-safe.
 * Wrapping is still allowed as a fallback (narrow screens), so the menu never pushes logo/icons.
 */

@media (min-width: 64rem) {
    .navigation > div {
        padding-inline: 0.5rem;
    }

    .navigation nav > ul {
        column-gap: 1rem;
    }

    .navigation nav > ul > li.level-0 a.level-0 {
        white-space: nowrap;
        font-size: 0.8125rem;
        letter-spacing: 0.12em;
        text-transform: uppercase; /* same UI style as buttons, filters, footer headings */
    }
}

/* Laptops (1024-1535px): menu text minimally smaller / less tracking so all items (DE + EN) fit on one line from 1280px */
@media (min-width: 64rem) and (max-width: 95.98rem) {
    .navigation nav > ul {
        column-gap: 0.75rem;
    }

    .navigation nav > ul > li.level-0 a.level-0 {
        font-size: 0.75rem;
        letter-spacing: 0.08em;
    }
}

@media (min-width: 64rem) and (max-width: 85.3rem) {
    .navigation nav > ul {
        column-gap: 0.5rem;
    }

    .navigation nav > ul > li.level-0 a.level-0 {
        font-size: 0.6875rem;
        letter-spacing: 0.06em;
    }
}

/* Large desktops: more air between the items */
@media (min-width: 96rem) {
    .navigation nav > ul {
        column-gap: 1.125rem; /* 18px: EN menu ("Valentine's Day") still fits one line at 1536px */
    }
}

/*
 * Submenu chevrons: hidden for mouse users (submenus open on hover, the category name stays a normal link).
 * Kept for keyboard users (visible when focused) and touch devices (no hover) - accessibility.
 */
@media (min-width: 64rem) and (hover: hover) and (pointer: fine) {
    .navigation nav > ul > li.level-0 > span > button:not(:focus-visible) {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* Compact header height (Hyvä header content: #header > .container) */
.page-header #header > .container {
    padding-block: 0.5rem;
}

@media (min-width: 64rem) {
    .page-header #header > .container {
        padding-block: 0.625rem;
    }

    .navigation nav > ul {
        padding-block: 0;
    }
}

/* Sticky header on tablet + desktop only (on phones it would take too much of the screen) */
@media (min-width: 48rem) {
    html {
        scroll-padding-top: 5rem; /* anchor targets (e.g. skip link) not hidden below the header */
    }

    .page-header {
        position: sticky;
        top: 0;
        z-index: 40;
    }
}

/* Language switcher "DE / EN" (Magento_Store::switch/languages-inline.phtml), rightmost in the header icons */
.page-header .kz-lang {
    order: 1; /* after customer + cart icons (flex children default to order 0) */
    flex-shrink: 0;
    margin-left: 0.25rem;
}

.page-header .kz-lang__list {
    display: flex;
    flex-wrap: nowrap; /* "DE / EN" always on one line */
    align-items: center;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    line-height: 1;
}

.page-header .kz-lang__item + .kz-lang__item::before {
    content: "/" / "";
    color: #555;
}

.page-header .kz-lang__current,
.page-header .kz-lang__link {
    display: inline-block;
    padding: 0.625rem 0.375rem; /* >= 24px touch target */
}

.page-header .kz-lang__current {
    color: var(--kz-header-fg);
    font-weight: 500;
}

.page-header .kz-lang__link {
    color: var(--kz-header-muted);
    text-decoration: none;
}

.page-header .kz-lang__link:hover,
.page-header .kz-lang__link:focus-visible {
    color: var(--kz-header-fg);
    text-decoration: underline;
    text-underline-offset: 0.3em;
}

/* Mid-size desktops (1024-1535px): make room for the language switcher so the menu stays on one line (DE + EN) */
@media (min-width: 64rem) and (max-width: 95.98rem) {
    .page-header #header > .container {
        padding-inline: 1rem;
    }

    .page-header #header > .container > div:first-child img {
        max-width: 240px;
        height: auto;
    }

    .navigation nav > ul {
        column-gap: 0.625rem;
    }

    .page-header .kz-lang__current,
    .page-header .kz-lang__link {
        padding-inline: 0.25rem;
    }
}

/* Desktop: header uses the full viewport width (no container max-width), small edge gap only */
@media (min-width: 64rem) {
    .page-header #header > .container {
        max-width: none;
        padding-inline: 1rem;
    }
}

/* Dark header bar: near-black background, off-white text. Only the top bar is recoloured;
   dropdowns (submenu, customer menu, mobile menu, search, cart drawer) keep their white panels. */
.page-header {
    --kz-header-bg: #111;
    --kz-header-fg: #f4f1ea;
    --kz-header-muted: #a3a3a3;
    --kz-gold: #b39b5f;
}

.page-header #header {
    background-color: var(--kz-header-bg);
    border-bottom-color: #222;
}

/* Top-level items only */
.page-header #header > .container > .lg\:hidden > button,
.page-header #header > .container > .order-1 > .btn,
.page-header #header > .container > .order-1 > div > .btn,
.navigation nav > ul > li.level-0 > span,
.navigation nav > ul > li.level-0 > span > a.level-0 {
    color: var(--kz-header-fg);
}

.navigation nav > ul > li.level-0:hover,
.navigation nav > ul > li.level-0[data-active] {
    border-color: var(--kz-header-fg);
}

/* Cart item count badge: gold instead of Hyvä's primary blue */
.page-header #menu-cart-icon > span {
    background-color: var(--kz-gold);
    color: #111;
}

/* Visible keyboard focus on the dark bar */
.page-header #header > .container > .lg\:hidden > button:focus-visible,
.page-header #header > .container > .order-1 > .btn:focus-visible,
.page-header #header > .container > .order-1 > div > .btn:focus-visible,
.navigation nav > ul > li.level-0 > span > :is(a, button):focus-visible,
.page-header .kz-lang a:focus-visible {
    outline: 2px solid var(--kz-header-fg);
    outline-offset: 2px;
}

/* Mobile menu: top level in the same uppercase UI style as the desktop menu (submenus stay normal case) */
[x-data="initMobileMenu"] li[data-level="0"] > :is(a, button) {
    font-size: 0.8125rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Mobile menu: submenu arrows without the bluish box */
[x-data="initMobileMenu"] li[data-level="0"] > button > .btn {
    border-color: transparent;
}

/*
 * Phones + tablets (< 1024px): one slim bar like Chanel - menu + search left, logo centred, account/cart/language right.
 * Before: logo on its own row (280px) above large icons. Only CSS, Hyvä header template unchanged.
 */
@media (max-width: 63.98rem) {
    .page-header #header > .container {
        position: relative;
        flex-wrap: nowrap;
        column-gap: 0.125rem;
        min-height: 3.5rem;
        padding: 0.25rem 0.5rem;
    }

    /* Logo centred on the whole bar (independent of how many icons sit left/right) */
    .page-header #header > .container > div:first-child {
        position: absolute;
        top: 50%;
        left: 50%;
        translate: -50% -50%;
        width: auto;
        padding: 0;
    }

    .page-header #header > .container > div:first-child img {
        width: min(8.75rem, 100vw - 15rem); /* narrow phones: shrinks so it never touches the icons */
        height: auto;
    }

    /* Icon group dissolves into the bar, so the search button can sit left next to the menu button */
    .page-header #header > .container > .order-1 {
        display: contents;
    }

    .page-header #menu-search-icon {
        margin-inline-end: auto; /* everything after it (order >= 1) goes to the right edge */
    }

    .page-header #header > .container > .order-1 > *:not(#menu-search-icon, .kz-lang) {
        order: 1;
    }

    .page-header .kz-lang {
        order: 2;
        margin-left: 0;
    }

    /* Smaller, finer icons with a 36px touch target */
    .page-header #header > .container > .lg\:hidden > button,
    .page-header #header > .container > .order-1 > .btn,
    .page-header #header > .container > .order-1 > div > .btn {
        padding: 0.5rem;
    }

    .page-header #header > .container > .lg\:hidden > button svg,
    .page-header #header > .container > .order-1 > .btn svg,
    .page-header #header > .container > .order-1 > div > .btn svg {
        width: 1.25rem;
        height: 1.25rem;
        stroke-width: 1.5;
    }

    /* Language: only the other language ("EN" in the German shop, "DE" in the English one) */
    .page-header .kz-lang__item:has(.kz-lang__current),
    .page-header .kz-lang__item::before {
        display: none;
    }

    .page-header .kz-lang__link {
        padding-inline: 0.375rem;
        color: var(--kz-header-fg);
    }
}

/* Tablets: a bit more room for the logo */
@media (min-width: 48rem) and (max-width: 63.98rem) {
    .page-header #header > .container > div:first-child img {
        width: 11rem;
    }
}