/* okitoki-v3 header overrides — PROG-9957. Tracked file (NOT QuadMenu DB CSS).
 * Values taken 1:1 from prod DevTools. !important beats QuadMenu's generated CSS
 * (uploads/okitoki-v3/quadmenu-*.css, which loads after this). Pill base in style.css. */

/* Navbar base — prod: transparent bg, white text, Arial 16px (no dark bar). */
#quadmenu.quadmenu-default_theme {
    background-color: rgba(255, 255, 255, 0) !important; /* #fff0 */
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}
#quadmenu.quadmenu-default_theme .quadmenu-navbar-collapse {
    background: transparent !important;
}

/* Top-level item height — design 33px (selector incl .js to match prod specificity) */
#quadmenu.quadmenu-default_theme.quadmenu-is-horizontal.js .quadmenu-navbar-nav > li.quadmenu-item {
    height: 33px !important;
}

/* Menu links — design 14px; override QuadMenu's generated Verdana 13px */
#quadmenu.quadmenu-default_theme .quadmenu-navbar-nav > li.quadmenu-item > a,
#quadmenu.quadmenu-default_theme .quadmenu-navbar-nav > li.quadmenu-item > form {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    letter-spacing: inherit;
    line-height: 1;
}
/* Pill buttons use the smaller design size (13px); placed after the link rule
   (equal specificity) so it wins. */
#quadmenu.quadmenu-default_theme .quadmenu-navbar-nav > li.main-menu-button > a {
    font-size: 13px !important;
}
#quadmenu .quadmenu-navbar-nav > li.quadmenu-item > a,
#quadmenu .quadmenu-navbar-nav > li.quadmenu-item > a .quadmenu-text {
    color: #ffffff;
}

/* No dark hover background on top-level items (prod hover bg = transparent) */
#quadmenu .quadmenu-navbar-nav > li.quadmenu-item > a:hover,
#quadmenu .quadmenu-navbar-nav > li.quadmenu-item.quadmenu-active > a {
    background-color: transparent !important;
    color: #ffffff;
}

/* Pill buttons (Login/Registration) — keep the PROD orange left-to-right slide-in defined in
 * style.css (.main-menu-button > a:before, width 0 -> 100%, behind the text). Here we only keep
 * the label white and locked (no up-shift) on hover; line-height:1 already applies from the link
 * rule above. */
#quadmenu .quadmenu-navbar-nav > li.main-menu-button > a:hover {
    background: transparent !important;
    color: #fff !important;
    transform: none !important;
}

/* Menu items — prod shows normal case (stored "Продукти"), not uppercase.
 * Buttons (.main-menu-button) stay uppercase via style.css, so exclude them. */
#quadmenu .quadmenu-navbar-nav > li.quadmenu-item:not(.main-menu-button) > a,
#quadmenu .quadmenu-navbar-nav > li.quadmenu-item:not(.main-menu-button) > a .quadmenu-text {
    text-transform: none !important;
}


/* ============================================================
 * Design chrome — static turquoise bar, 1200 container, 80px height (PROG-9963).
 * Outer markup uses .site-header / .site-header__inner (design classes); the legacy .header*
 * rules no longer match, so the header is STATIC (no transparent->scroll transition) and
 * custom.js's $('.header').addClass('fixed') becomes a harmless no-op.
 * ============================================================ */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1000;
    background: #18D0CD;
    color: #fff;
    /* Match the section container exactly (oki-base.css) so header edges align with content. */
    --container: 1200px;
    --gutter:    clamp(18px, 4.5vw, 36px);
}
.site-header a,
.site-header a:hover { color: #fff; }

.site-header__inner {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
    min-height: 80px;
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Logo — design English-letters SVG */
.site-header .header-logo { flex: 0 0 auto; max-width: none; }
.site-header .header-logo img { height: 42px; width: auto; display: block; }

/* Nav fills the row; items pushed right */
.site-header .header-right { flex: 1 1 auto; max-width: none; display: flex; align-items: center; justify-content: flex-end; }

/* Item content padding — design 14px (QuadMenu default 15px). */
#quadmenu .quadmenu-navbar-nav li.quadmenu-item .quadmenu-item-content { padding: 14px !important; }

/* Right-aligned nav: center items within their cell (design). */
#quadmenu.quadmenu-is-horizontal.quadmenu-align-right .quadmenu-navbar-nav { text-align: center; }

/* Language switcher reserved a fixed 80px (style.css), leaving an empty gap —
   size it to its content instead. */
.site-header .lang-menu { flex: 0 0 auto; max-width: none; }

/* Underline-on-hover on top-level items (design .site-nav__link::after). Uses :before so the
 * QuadMenu dropdown caret (:after in style.css) is preserved. */
/* QuadMenu hover-ripple mode hijacks > a:before (the SAME pseudo-element our orange slide-in and
 * underline use) and animates a blob from the center. Reclaim :before with !important (beats the
 * non-important ripple regardless of specificity); animation:none disables the ripple. */
#quadmenu .quadmenu-navbar-nav > li.quadmenu-item > a { position: relative; }

/* Buttons (Login/Registration) — prod orange left-to-right slide-in, behind the white label. */
#quadmenu .quadmenu-navbar-nav > li.main-menu-button > a:before {
    content: "" !important; position: absolute !important;
    top: 0 !important; left: 0 !important; right: auto !important; bottom: auto !important;
    width: 0 !important; height: 100% !important;
    background: #f87d4d !important; border-radius: 20px !important;
    transform: none !important; animation: none !important;
    transition: width .25s ease !important; opacity: 1 !important; z-index: -1 !important;
}
#quadmenu .quadmenu-navbar-nav > li.main-menu-button > a:hover:before { width: 100% !important; }

/* Regular items — underline on hover (reclaimed from the ripple). */
#quadmenu .quadmenu-navbar-nav > li.quadmenu-item:not(.main-menu-button) > a:before {
    content: "" !important; position: absolute !important;
    left: 14px !important; right: 14px !important; top: auto !important; bottom: 4px !important;
    width: auto !important; height: 2px !important;
    background: #fff !important; border-radius: 0 !important;
    transform: scaleX(0) !important; transform-origin: center !important;
    animation: none !important; opacity: 1 !important; z-index: 0 !important;
    transition: transform .2s ease !important;
}
#quadmenu .quadmenu-navbar-nav > li.quadmenu-item:not(.main-menu-button) > a:hover:before,
#quadmenu .quadmenu-navbar-nav > li.quadmenu-item.quadmenu-active:not(.main-menu-button) > a:before,
#quadmenu .quadmenu-navbar-nav > li.quadmenu-item.current-menu-item:not(.main-menu-button) > a:before,
#quadmenu .quadmenu-navbar-nav > li.quadmenu-item.current-menu-ancestor:not(.main-menu-button) > a:before,
#quadmenu .quadmenu-navbar-nav > li.quadmenu-item.current-menu-parent:not(.main-menu-button) > a:before { transform: scaleX(1) !important; }

/* Content sits right under the 80px static header (was margin-top:170px for the overlay). */
/* Clear the opaque static header site-wide (80px bar + breathing room); contacts tightens to 80px in contacts.css. */
.main { margin-top: 120px; }

@media (max-width: 500px) {
    .site-header .header-logo img { height: 38px; }
}
/* Mega dropdowns — prod width 1310px, centered under the 80px header. QuadMenu "boxed" mode is
 * left:0/right:0 (stretches to the menu container), which became ~100% after the header refactor.
 * Pin it like the design .mega: fixed, viewport-centered, fixed width. DOM nesting is unchanged,
 * so QuadMenu hover/open still works. */
#quadmenu.quadmenu-is-horizontal .quadmenu-navbar-nav > li.quadmenu-dropdown > .quadmenu-dropdown-menu.quadmenu-dropdown-stretch-boxed {
    position: fixed !important;
    top: 80px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 1310px !important;
    max-width: calc(100vw - 30px) !important;
}

/* The Login/Registration items carry QuadMenu "quadmenu-has-background", which paints a dark
 * per-item background on the link/content ON TOP of our orange :before slide. Force the button
 * and its inner nodes transparent so only the orange slide shows (white label stays above it). */
#quadmenu .quadmenu-navbar-nav > li.main-menu-button,
#quadmenu .quadmenu-navbar-nav > li.main-menu-button:hover,
#quadmenu .quadmenu-navbar-nav > li.main-menu-button > a,
#quadmenu .quadmenu-navbar-nav > li.main-menu-button > a:hover,
#quadmenu .quadmenu-navbar-nav > li.main-menu-button > a > .quadmenu-item-content,
#quadmenu .quadmenu-navbar-nav > li.main-menu-button .quadmenu-text {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}


/* Same as the buttons: regular items also carry quadmenu-has-background; kill that dark fill so
 * the hover state is clean (only the white underline shows, no dark box behind the label). */
#quadmenu .quadmenu-navbar-nav > li.quadmenu-item:not(.main-menu-button),
#quadmenu .quadmenu-navbar-nav > li.quadmenu-item:not(.main-menu-button):hover,
#quadmenu .quadmenu-navbar-nav > li.quadmenu-item:not(.main-menu-button) > a,
#quadmenu .quadmenu-navbar-nav > li.quadmenu-item:not(.main-menu-button) > a:hover,
#quadmenu .quadmenu-navbar-nav > li.quadmenu-item:not(.main-menu-button) > a > .quadmenu-item-content,
#quadmenu .quadmenu-navbar-nav > li.quadmenu-item:not(.main-menu-button) .quadmenu-text {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}