/* Native header menu (PROG-10508) — replaces QuadMenu, same look.
 * Every value is taken from the computed styles of the QuadMenu header on tst
 * (2026-10-01), so the switch is a mechanism change, not a redesign.
 * Loaded only while QuadMenu is inactive (functions.php okitoki_native_menu()).
 * Mobile panel (.header-right.open, burger) keeps its legacy rules in style.css. */

.okt-nav { --okt-nav-font: 'Arial Rounded MT Pro Cyr', Arial, Helvetica, sans-serif; }

.okt-nav__list,
.okt-nav__grid,
.okt-nav__sub {
    margin: 0;
    padding: 0;
    list-style: none;
}

.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Desktop bar ---------- */
@media (min-width: 1200px) {
    /* QuadMenu sat as a centered block inside .header-right (auto side margins);
       the bar keeps that position. */
    .okt-nav { margin: 0 auto; }
    .okt-nav__list {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    .okt-nav__item--top {
        position: relative;
        display: flex;
        align-items: center;
        height: 33px;
    }
    .okt-nav__item--top > .okt-nav__link {
        position: relative;
        display: flex;
        align-items: center;
        height: 33px;
        padding: 0 14px;
        font-family: var(--okt-nav-font);
        font-size: 16px;
        line-height: 16px;
        color: #fff;
        text-decoration: none;
        white-space: nowrap;
    }
    .okt-nav__item--top > .okt-nav__link:hover,
    .okt-nav__item--top > .okt-nav__link:focus { color: #fff; }

    /* Parent items: room for the caret drawn by the toggle button. */
    .okt-nav__item--parent > .okt-nav__link { padding-right: 30px; }
    .okt-nav__toggle {
        position: absolute;
        right: 0; top: 50%;
        width: 30px; height: 30px;
        margin-top: -15px;
        padding: 0;
        border: 0;
        background: transparent;
        color: #fff;
        cursor: pointer;
    }

    /* Login / Registration pills — white outline, orange slide-in on hover. */
    .okt-nav__item--button {
        margin: 0 5px 0 15px;
        border: 1px solid #fff;
        border-radius: 20px;
        overflow: hidden;
        transition: border-color .2s;
    }
    .okt-nav__item--button:hover { border-color: #f87d4d; }
    .okt-nav__item--button > .okt-nav__link {
        z-index: 0;
        height: 31px;
        font-size: 13px;
        line-height: 13px;
        font-weight: 700;
        text-transform: uppercase;
    }
    .okt-nav__item--button > .okt-nav__link::before {
        content: "";
        position: absolute;
        left: 0; top: 0;
        width: 0; height: 100%;
        background: #f87d4d;
        border-radius: 20px;
        z-index: -1;
        transition: width .25s ease;
    }
    .okt-nav__item--button > .okt-nav__link:hover::before { width: 100%; }

    /* Mega panel — fixed under the 86px bar, 1310px centered, white, soft shadow. */
    .okt-nav__panel {
        position: fixed;
        top: 86px;
        left: 50%;
        width: 1310px;
        max-width: calc(100vw - 30px);
        transform: translateX(-50%);
        background: #fff;
        box-shadow: rgba(0, 0, 0, .15) 0 2px 5px 0;
        z-index: 1001;
        /* Never taller than the space under the bar, minus the 15px QuadMenu left
           above the window edge: on a short window the panel scrolls inside itself
           (QuadMenu did the same with perfect-scrollbar) and the page stays put. */
        max-height: calc(100vh - 86px - 15px);
        max-height: calc(100dvh - 86px - 15px);
        overflow-y: auto;
        overscroll-behavior: contain;
        visibility: hidden;
        opacity: 0;
        transition: opacity .2s ease, visibility 0s linear .2s;
    }
    .okt-nav__item--parent.is-open > .okt-nav__panel {
        visibility: visible;
        opacity: 1;
        transition: opacity .2s ease;
    }
    .okt-nav__grid {
        display: flex;
        flex-wrap: wrap;
    }
    .okt-nav__item--card {
        flex: 0 0 25%;
        max-width: 25%;
        padding: 15px;
        box-sizing: border-box;
    }
}

/* Caret glyphs: the angle-down and close icons of QuadMenu's own icon font
 * (paths copied from its embedded SVG font), so the caret looks exactly as before. */
.okt-nav {
    --okt-caret-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 658 1024'%3E%3Cpath transform='translate%280 960%29 scale%281 -1%29' d='M614.286 518.096q0-7.429-5.714-13.143l-266.286-266.286q-5.714-5.714-13.143-5.714t-13.143 5.714l-266.286 266.286q-5.714 5.714-5.714 13.143t5.714 13.143l28.571 28.571q5.714 5.714 13.143 5.714t13.143-5.714l224.571-224.571 224.571 224.571q5.714 5.714 13.143 5.714t13.143-5.714l28.571-28.571q5.714-5.714 5.714-13.143z'/%3E%3C/svg%3E");
    --okt-caret-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath transform='translate%280 960%29 scale%281 -1%29' d='M810 664.667l-238-238 238-238-60-60-238 238-238-238-60 60 238 238-238 238 60 60 238-238 238 238z'/%3E%3C/svg%3E");
}
.okt-nav__toggle::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 7.71px;
    height: 12px;
    background: currentColor;
    -webkit-mask: var(--okt-caret-down) center / contain no-repeat;
            mask: var(--okt-caret-down) center / contain no-repeat;
}
.okt-nav__item--parent.is-open > .okt-nav__toggle::before {
    width: 12px;
    -webkit-mask-image: var(--okt-caret-close);
            mask-image: var(--okt-caret-close);
}

/* Underline under top-level items: hover, current page, open panel (both layouts). */
.okt-nav__item--top:not(.okt-nav__item--button) > .okt-nav__link::before {
    content: "";
    position: absolute;
    left: 14px; right: 14px; bottom: 4px;
    height: 2px;
    background: #fff;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .2s ease;
}
.okt-nav__item--top:not(.okt-nav__item--button) > .okt-nav__link:hover::before,
.okt-nav__item--top:not(.okt-nav__item--button).is-current > .okt-nav__link::before,
.okt-nav__item--parent.is-open > .okt-nav__link::before { transform: scaleX(1); }

/* ---------- Product cards (both layouts) ---------- */
.okt-nav__item--card > .okt-nav__link {
    display: block;
    padding: 14px;
    font-family: var(--okt-nav-font);
    font-size: 16px;
    text-align: left;
    text-decoration: none;
    transition: background-color .2s;
}
.okt-nav__item--card > .okt-nav__link:hover,
.okt-nav__item--card > .okt-nav__link:focus-visible { background: #f4f4f4; }
.okt-nav__card-img {
    display: inline;
    width: 100%;
    height: auto;
    max-height: none;
    margin: 0 0 10px;
    vertical-align: middle;
}
.okt-nav__card-title {
    display: inline;
    font-family: var(--okt-nav-font);
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    color: #444;
}
.okt-nav__card-desc {
    display: block;
    margin: 10px 0 0;
    font-family: var(--okt-nav-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-transform: none;
    color: #a0a0a0;
}
.okt-nav__item--card > .okt-nav__link:hover .okt-nav__card-title { color: #333; }
.okt-nav__item--card > .okt-nav__link:hover .okt-nav__card-desc { color: #ccc; }

/* ---------- Mobile panel (below 1200px) ----------
 * The off-canvas container .header-right(.open) and the burger are legacy style.css. */
@media (max-width: 1199px) {
    .okt-nav {
        width: 100%;
        max-width: 560px;
        /* dvh, not vh: on phones 100vh includes the area under the browser bars, so
           the bottom of the list sat out of reach. */
        height: calc(100vh - 60px);
        height: calc(100dvh - 60px);
        overflow: auto;
        overscroll-behavior: contain;
    }
    /* The off-canvas panel covers the screen: the page behind must not scroll. */
    html.okt-nav-open,
    html.okt-nav-open body { overflow: hidden; }
    .okt-nav__item--top { position: relative; }
    .okt-nav__item--top > .okt-nav__link {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 44px;
        padding: 0 14px;
        font-family: var(--okt-nav-font);
        font-size: 16px;
        line-height: 16px;
        text-align: center;
        color: #fff;
        text-decoration: none;
    }
    .okt-nav__toggle {
        position: absolute;
        right: 0; top: 0;
        width: 72px; height: 44px;
        padding: 0;
        border: 0;
        background: transparent;
        color: #fff;
        cursor: pointer;
    }
    /* Open item: white box behind the close glyph, as QuadMenu's mobile caret. */
    .okt-nav__item--parent.is-open > .okt-nav__toggle { color: #444; background: #fff; }
    .okt-nav__panel { display: none; background: #fff; }
    .okt-nav__item--parent.is-open > .okt-nav__panel { display: block; }
    .okt-nav__item--card > .okt-nav__link { text-align: center; }
    .okt-nav__card-img {
        display: block;
        width: 160px;
        max-width: 160px;
        margin: 0 auto 10px;
    }
    .okt-nav__item--button {
        margin: 0 30px 10px;
        border: 1px solid #fff;
        border-radius: 20px;
        overflow: hidden;
    }
    .okt-nav__item--button > .okt-nav__link {
        position: relative;
        z-index: 0;
        height: 41px;
        padding: 0;
        font-size: 13px;
        line-height: 13px;
        font-weight: 700;
        text-transform: uppercase;
    }
    .okt-nav__item--button > .okt-nav__link::before {
        content: "";
        position: absolute;
        left: 0; top: 0;
        width: 0; height: 100%;
        background: #f87d4d;
        z-index: -1;
        transition: width .25s ease;
    }
    .okt-nav__item--button > .okt-nav__link:hover::before { width: 100%; }
    /* Legacy style.css gives every li a 20px bottom margin in the mobile panel. */
    .okt-nav li { margin-right: 0; margin-bottom: 0; }
    .okt-nav .okt-nav__item--button { margin: 0 30px 10px; }
    /* No trailing gap under the last pill: on a short screen it was the only thing
       that made the list overflow and pull in a scrollbar. */
    .okt-nav .okt-nav__list > li:last-child { margin-bottom: 0; }
}

/* Keyboard focus — visible on the turquoise bar and on the white panel. */
.okt-nav__link:focus-visible,
.okt-nav__toggle:focus-visible,
.header-toogle:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
.okt-nav__panel .okt-nav__link:focus-visible { outline-color: #2f3946; outline-offset: -2px; }

/* The burger is a <button> now: drop the native button chrome. */
button.header-toogle {
    border: 0;
    margin: 0;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    background: transparent;
    font: inherit;
    color: inherit;
}

@media (prefers-reduced-motion: reduce) {
    .okt-nav *, .okt-nav *::before { transition: none !important; }
}