/* 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;
    /* Header is wider than the 1200px content container for old-design compatibility
       (prod header is 1310px). Footer keeps its own width — do not reuse this var there. */
    --container-header: 1340px;
    --gutter:    clamp(18px, 4.5vw, 36px);
}
.site-header a,
.site-header a:hover { color: #fff; }

.site-header__inner {
    /* content-box: the 1340px span is measured logo-to-lang, gutters add outside */
    box-sizing: content-box;
    max-width: var(--container-header);
    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: 86px !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;
}

/* ============================================================
 * Dropdown typography — prod parity.
 * On prod the QuadMenu options emit "Arial, Helvetica 16px" for dropdown item
 * links, and prod's style.css aliases the family name "Arial" to the site face
 * ArialRoundedMTProCyr — so submenu titles render in the rounded font at 16px
 * (titles of items with a description are 600, descriptions 400).
 * Our QuadMenu DB options emit "Verdana 11px 400" instead and the Arial alias
 * is commented out in style.css, hence the tiny non-rounded submenu.
 * Per convention this lives HERE (tracked theme CSS), not in QuadMenu DB CSS.
 * !important: uploads/okitoki-v3/quadmenu-*.css loads after this file.
 * ============================================================ */

/* The rounded face is self-hosted in the theme; oki-base.css declares it only
 * on contacts pages, so declare it here for the sitewide header/menu. */
@font-face {
    font-family: 'Arial Rounded MT Pro Cyr';
    src: url('../fonts/ArialRoundedMTProCyr.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Arial Rounded MT Pro Cyr';
    src: url('../fonts/ArialRoundedMTProCyr-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

#quadmenu.quadmenu-default_theme .quadmenu-navbar-nav .quadmenu-dropdown-menu li.quadmenu-item > a {
    font-family: 'Arial Rounded MT Pro Cyr', Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
}

/* Submenu item titles (items that carry a description) — semibold, as on prod. */
#quadmenu .quadmenu-navbar-nav .quadmenu-dropdown-menu li.quadmenu-item-type-post_type.quadmenu-has-description > a > .quadmenu-item-content > .quadmenu-text {
    font-weight: 600 !important;
    text-transform: uppercase !important;
}

/* Item descriptions ("підписи") — regular weight, prod spacing. */
#quadmenu .quadmenu-navbar-nav li.quadmenu-item > a > .quadmenu-item-content > .quadmenu-description {
    overflow: hidden;
    display: block;
    margin: 10px 0 0 0;
    text-transform: none;
    line-height: 1.5;
    font-weight: 400 !important;
}

/* Top-level menu items — rounded face, 16px, matching prod
   (#quadmenu default theme sets Verdana 13px otherwise). */
#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 Rounded MT Pro Cyr', Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
}

/* --- Mobile header (below the 1199px off-canvas breakpoint): lang left,
   logo truly centered, hamburger right — mirrors the design. The legacy
   style.css keeps the off-canvas menu itself; only the top-bar layout changes. */
@media (max-width: 1199px) {
    .site-header__inner { justify-content: space-between; }
    .site-header .lang-menu {
        order: -1;                     /* left edge, symmetric to the toggle */
        flex: 0 0 64px;
        max-width: 64px;
        justify-content: flex-start;
    }
    .site-header .header-logo {
        flex: 1 1 auto;
        max-width: none;
        display: flex;
        justify-content: center;       /* center regardless of side widths */
    }
    .site-header .header-toogle { order: 1; }
    /* lang dropdown anchored right of its li — flips off-screen now that the
       switcher sits at the left edge; open it to the right instead */
    .site-header .lang-menu > li > ul { right: auto; left: 0; }
}
@media (max-width: 500px) {
    .site-header .lang-menu { flex-basis: 54px; max-width: 54px; }  /* mirror the 54px toggle */
}

/* Modals layer above the fixed header (.site-header is z-index 1000; the
   legacy style.css block keeps 20 — override here, not there, so the other
   legacy stacking stays untouched). */
.modalForm, .modalGif, .modalVideo, .modalInfoBlock { z-index: 1001; }

/* Desktop bar height 86px like prod (mobile keeps 80px). */
@media (min-width: 1200px) {
    .site-header__inner { min-height: 86px; }
}

/* Buttons (Login/Registration) — prod: 13px bold uppercase, label centered
   vertically in the pill (the generic top-level rule above sets 16px). */
#quadmenu.quadmenu-default_theme .quadmenu-navbar-nav > li.main-menu-button > a {
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    display: inline-flex !important;
    align-items: center !important;
}