/* ==========================================================================
   9wickets — HEADER V3 "Obsidian & Amber" (loads LAST, after header.css)
   --------------------------------------------------------------------------
   Full-width dark navbar + full-screen mobile menu, replacing V2's cream
   floating pill with a true dark/yellow chrome:
   - Bar: edge-to-edge obsidian bar (no inset pill), animated yellow seam
     restored along the bottom edge, deepens + tightens on .is-scrolled.
   - Nav: cream-white text, solid-yellow pill on hover/current, dark glass
     dropdown cards with a yellow rail marker.
   - Mobile: true full-bleed full-screen dark overlay (not the later
     "slide-in side drawer" retrofit in wickets-home.css), big cream/yellow
     rows with a yellow rail on hover/current, restyled accordion submenus.
     The CTA button is left to buttons.css (already yellow).
   Reuses the existing open/close, accordion (.is-open) and stagger (--i)
   mechanics untouched — this file only changes appearance, never markup
   or behaviour. Markup (HFE post 19) is not touched.
   Loads after header.css so equal-specificity rules win by cascade order;
   !important is used only where header.css also used it on that property.
   ========================================================================== */

body.vk .vk-header {
    --hdx-bg:         #0B0906;
    --hdx-bg-2:       #15110A;
    --hdx-yellow:     #FFC72C;
    --hdx-yellow-2:   #FFE066;
    --hdx-yellow-dim: #B5830F;
    --hdx-ink:        #0A0500;
    --hdx-text:       #F5EFE0;
    --hdx-text-dim:   #C9BFA6;
    --hdx-line:       rgba(255, 199, 44, .22);
    --hdx-line-2:     rgba(255, 199, 44, .38);
}

/* ---- 1. Full-width bar (replaces the V2 inset floating pill) ------------ */
body.vk .vk-header,
body.vk .vk-header.is-scrolled {
    background: linear-gradient(180deg, var(--hdx-bg) 0%, var(--hdx-bg-2) 100%) !important;
    border-bottom: 1px solid var(--hdx-line) !important;
    box-shadow: 0 12px 34px -18px rgba(0, 0, 0, .7) !important;
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    backdrop-filter: saturate(160%) blur(18px);
}
body.vk .vk-header.is-scrolled {
    border-bottom-color: var(--hdx-line-2) !important;
    box-shadow:
        0 16px 40px -16px rgba(0, 0, 0, .8),
        0 0 0 1px rgba(255, 199, 44, .08) !important;
}
/* Animated seam along the bottom edge — restored + recoloured pure yellow */
body.vk .vk-header__bar {
    display: block !important;
    background: linear-gradient(90deg,
        transparent 0%, rgba(255, 199, 44, 0) 10%,
        var(--hdx-yellow) 40%, var(--hdx-yellow-2) 55%, var(--hdx-yellow) 70%,
        rgba(255, 199, 44, 0) 90%, transparent 100%) !important;
    opacity: .9;
}

body.vk .vk-header__inner {
    max-width: 1360px;
    width: 100%;
    margin: 0 auto;
    padding: 12px 28px !important;
    border-radius: 0;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    gap: 22px;
}
body.vk .vk-header.is-scrolled .vk-header__inner { padding: 8px 28px !important; }
@media (max-width: 720px) {
    body.vk .vk-header__inner { width: 100%; margin: 0; padding: 10px 16px !important; border-radius: 0; gap: 10px; }
}

/* ---- 2. Brand — warm glow reads better on dark than on the old cream pill */
body.vk .vk-header .vk-brand__halo { display: block !important; opacity: .45; }
body.vk .vk-header .vk-brand img { filter: drop-shadow(0 3px 14px rgba(255, 199, 44, .45)) !important; }
body.vk .vk-header .vk-brand:hover img { filter: drop-shadow(0 5px 20px rgba(255, 199, 44, .7)) !important; }

/* ---- 3. Desktop nav links ------------------------------------------------- */
body.vk .vk-nav__list { gap: 2px; }
body.vk .vk-nav__list a {
    font-size: 14px;
    font-weight: 600;
    padding: 10px 16px;
    overflow: visible;
    color: var(--hdx-text) !important;
    background: transparent;
    border-radius: 999px;
}
body.vk .vk-nav__label { color: inherit !important; transform: none !important; }
body.vk .vk-nav__list a::before { content: none !important; }
body.vk .vk-nav__list a:hover .vk-nav__label { transform: none !important; }
body.vk .vk-nav__list a:hover {
    color: var(--hdx-ink) !important;
    background: var(--hdx-yellow) !important;
}
body.vk .vk-nav__list a.is-current {
    color: var(--hdx-yellow) !important;
    background: rgba(255, 199, 44, .12) !important;
}
/* wickets-home.css's old light-header "NAV HOVER FIX" block still ships
   `body.vk .vk-nav__list a.is-current .vk-nav__label{ color:#1A1813 !important; }`
   (and the equivalent :hover rule) — same selector shape/specificity as
   here, so this file only wins because it loads later; without a matching
   override the active (and hovered) menu item's visible label text renders
   near-black instead of gold on this dark header. */
body.vk .vk-nav__list a.is-current .vk-nav__label { color: var(--hdx-yellow) !important; }
body.vk .vk-nav__list a:hover .vk-nav__label { color: var(--hdx-ink) !important; }
/* center-grow underline, flips to ink-on-yellow while the pill hover is active */
body.vk .vk-nav__list a::after {
    content: '';
    left: 50%;
    bottom: 4px;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--hdx-yellow);
    box-shadow: 0 0 10px rgba(255, 199, 44, .7);
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform .3s cubic-bezier(.2, .7, .15, 1);
}
body.vk .vk-nav__list a:hover::after { background: var(--hdx-ink); box-shadow: none; transform: translateX(-50%) scaleX(1); }
body.vk .vk-nav__list a.is-current::after { transform: translateX(-50%) scaleX(1); }
body.vk .vk-nav__list .lms-nav__caret { color: var(--hdx-yellow); margin-left: 6px; }
body.vk .vk-nav__list a:hover .lms-nav__caret { color: var(--hdx-ink); }

/* ---- 4. Dropdown cards ----------------------------------------------------- */
/* wickets-home.css has a later "light theme, readable" patch
   (`body.vk .lms-nav__sub{ background:#FFFFFF !important; ... }`) that beats
   any non-!important override regardless of specificity or load order, so
   background/border/box-shadow/::before must all carry !important here too. */
body.vk .vk-nav .lms-nav__sub {
    min-width: 240px;
    padding: 10px;
    border-radius: 16px;
    border: 1px solid var(--hdx-line) !important;
    background: linear-gradient(180deg, var(--hdx-bg-2) 0%, var(--hdx-bg) 100%) !important;
    box-shadow: 0 26px 60px -18px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 199, 44, .06) !important;
    transform: translateY(14px) scale(.98);
}
body.vk .lms-nav__sub::before { background: var(--hdx-yellow) !important; }
body.vk .vk-nav .vk-nav__item:hover > .lms-nav__sub,
body.vk .vk-nav .vk-nav__item:focus-within > .lms-nav__sub { transform: translateY(6px) scale(1); }
body.vk .vk-nav .vk-nav__item.has-children::after {
    content: '';
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    min-width: 240px;
    height: 18px;
}
/* wickets-home.css has a `body.vk .lms-nav__sub .lms-nav__sub-item > a,
   ...> a:link, ...> a:visited, ...` group whose `:link`/`:visited` branches
   outrank a plain `.lms-nav__sub-item > a` selector by one specificity
   "class" — match it with the same :link/:visited pair so equal specificity
   (then later source order) decides it, instead of losing outright. */
body.vk .vk-nav .lms-nav__sub-item > a,
body.vk .vk-nav .lms-nav__sub-item > a:link,
body.vk .vk-nav .lms-nav__sub-item > a:visited {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--hdx-text) !important;
    padding: 11px 14px;
    border-radius: 10px;
    transition: background .2s ease, color .2s ease, padding-left .25s ease;
}
body.vk .vk-nav .lms-nav__sub-item > a::before {
    content: '';
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--hdx-yellow-dim);
    flex-shrink: 0;
    transition: background .2s ease, transform .2s ease;
}
/* the label text lives in a nested <span> that wickets-home.css targets
   directly (`...lms-nav__sub-item > a > span{ color:#1A1813 !important }`) —
   the <a> color above doesn't inherit through that, so override the span too. */
body.vk .vk-nav .lms-nav__sub-item > a > span { color: inherit !important; }
body.vk .vk-nav .lms-nav__sub-item > a:hover > span { color: inherit !important; }
body.vk .vk-nav .lms-nav__sub-item > a:hover,
body.vk .vk-nav .lms-nav__sub-item > a:link:hover,
body.vk .vk-nav .lms-nav__sub-item > a:visited:hover {
    background: rgba(255, 199, 44, .14) !important;
    color: var(--hdx-yellow-2) !important;
    padding-left: 18px;
}
body.vk .vk-nav .lms-nav__sub-item > a:hover::before { background: var(--hdx-yellow); transform: scale(1.4); }

/* ---- 5. Actions: search toggle / support button / burger ------------------ */
body.vk .vk-icon-btn {
    background: rgba(255, 199, 44, .08) !important;
    border-color: var(--hdx-line) !important;
    color: var(--hdx-text) !important;
}
body.vk .vk-icon-btn:hover {
    background: rgba(255, 199, 44, .18) !important;
    color: var(--hdx-yellow-2) !important;
    border-color: var(--hdx-line-2) !important;
}
body.vk .vk-icon-btn[aria-expanded="true"] {
    background: linear-gradient(135deg, var(--hdx-yellow-2), var(--hdx-yellow)) !important;
    color: var(--hdx-ink) !important;
    border-color: transparent !important;
}
body.vk .vk-header .vk-btn--primary {
    box-shadow: 0 10px 26px rgba(255, 199, 44, .3), 0 1px 0 rgba(255, 224, 102, .25) inset;
}
body.vk .vk-burger {
    background: rgba(255, 199, 44, .08) !important;
    border-color: var(--hdx-line) !important;
    border-radius: 12px !important;
}
body.vk .vk-burger span { background: var(--hdx-text) !important; }
body.vk .vk-burger:hover {
    background: rgba(255, 199, 44, .18) !important;
    border-color: var(--hdx-line-2) !important;
}
body.vk .vk-burger[aria-expanded="true"] {
    background: linear-gradient(135deg, var(--hdx-yellow-2), var(--hdx-yellow)) !important;
    border-color: transparent !important;
}
body.vk .vk-burger[aria-expanded="true"] span { background: var(--hdx-ink) !important; }

/* ---- 6. Search panel -------------------------------------------------------- */
body.vk .vk-search-panel {
    background: linear-gradient(180deg, var(--hdx-bg-2) 0%, var(--hdx-bg) 100%) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--hdx-line) !important;
    box-shadow: 0 30px 60px -22px rgba(0, 0, 0, .7);
}
body.vk .vk-search-panel .search-box {
    background: rgba(255, 255, 255, .04) !important;
    border: 1px solid var(--hdx-line) !important;
    box-shadow: none !important;
}
body.vk .vk-search-panel .search-box > svg { color: var(--hdx-yellow) !important; }
body.vk .vk-search-panel .search-box .search-field,
body.vk .vk-search-panel input {
    color: var(--hdx-text) !important;
    background: transparent !important;
}
body.vk .vk-search-panel .search-box .search-field::placeholder,
body.vk .vk-search-panel input::placeholder { color: var(--hdx-text-dim) !important; }
body.vk .vk-search-panel__close {
    color: var(--hdx-text) !important;
    background: rgba(255, 199, 44, .1) !important;
    border-color: var(--hdx-line) !important;
}
body.vk .vk-search-panel__close:hover {
    background: rgba(255, 199, 44, .22) !important;
    color: var(--hdx-yellow-2) !important;
}

/* ---- 7. Mobile menu — totally new full-screen design -----------------------
   wickets-home.css ends with a later, maximal-!important block ("MOBILE MENU
   — REDESIGN: right-side slide-in DRAWER", @media max-width:900px) that
   converts the menu into a narrow light-card panel pinned to the right and
   explicitly kills any ::before/::after on the row links. That block is the
   real, currently-governing implementation on phones/tablets, so re-skinning
   it means matching its own selectors + !important at the same 900px
   breakpoint (this file loads after it, so equal-specificity !important
   here wins) rather than restyling the older full-screen rules further up
   the same file, which that later block has already superseded. */
@media (max-width: 900px) {
    /* Full-bleed dark scrim instead of the light 55%-dim backdrop */
    body.vk .vk-mobile {
        background:
            radial-gradient(60% 45% at 15% 0%, rgba(255, 199, 44, .16), transparent 60%),
            radial-gradient(55% 40% at 100% 100%, rgba(255, 199, 44, .09), transparent 65%),
            linear-gradient(180deg, #0B0906 0%, #050403 100%) !important;
        -webkit-backdrop-filter: blur(6px) !important;
        backdrop-filter: blur(6px) !important;
    }

    /* Panel takes the FULL screen (not a min(86vw,360px) side drawer) and
       fades/scales in instead of sliding from the right. */
    body.vk .vk-mobile__inner {
        width: 100% !important;
        max-width: none !important;
        padding: 96px 24px 40px !important;
        background: transparent !important;
        border-left: 0 !important;
        box-shadow: none !important;
        animation: vkx-mobile-in .32s cubic-bezier(.2, .7, .15, 1) both !important;
    }
    @keyframes vkx-mobile-in {
        from { opacity: 0; transform: scale(.97); }
        to   { opacity: 1; transform: scale(1); }
    }
    /* Repurposed brand label, top-left — was dark-on-dark, now cream/yellow */
    body.vk .vk-mobile__inner::before {
        color: var(--hdx-yellow, #FFC72C) !important;
        -webkit-text-fill-color: var(--hdx-yellow, #FFC72C) !important;
    }

    body.vk .vk-mobile__inner > ul { max-width: 520px; margin: 0 auto 28px !important; }

    /* Row links — was dark text on a white panel, now cream text on dark,
       with a bold yellow rail on hover/current via box-shadow (their kill-
       switch only removed ::before/::after, box-shadow is untouched). */
    body.vk .vk-mobile li a {
        border-bottom-color: rgba(255, 199, 44, .14) !important;
        color: var(--hdx-text, #F5EFE0) !important;
        font-size: 19px !important;
        box-shadow: inset 0 0 0 0 var(--hdx-yellow, #FFC72C) !important;
        transition: background .2s ease, color .2s ease, padding .2s ease, box-shadow .2s ease !important;
    }
    /* the row label lives in its own <span> (.lms-mobile__label) which
       header.css colours directly — override it too, same reason as the
       desktop dropdown's nested <span> above. */
    body.vk .vk-mobile .lms-mobile__label { color: inherit !important; }
    body.vk .vk-mobile li a:hover .lms-mobile__label,
    body.vk .vk-mobile li.is-open > a .lms-mobile__label { color: inherit !important; }
    body.vk .vk-mobile li a:hover,
    body.vk .vk-mobile li a:focus-visible,
    body.vk .vk-mobile li a.is-current,
    body.vk .vk-mobile li.is-open > a {
        background: rgba(255, 199, 44, .10) !important;
        color: var(--hdx-yellow-2, #FFE066) !important;
        box-shadow: inset 4px 0 0 0 var(--hdx-yellow, #FFC72C) !important;
    }
    body.vk .vk-mobile li a span {
        color: var(--hdx-yellow, #FFC72C) !important;
    }
    body.vk .vk-mobile li a:hover span,
    body.vk .vk-mobile li a:focus-visible span,
    body.vk .vk-mobile li a.is-current span { color: var(--hdx-yellow-2, #FFE066) !important; }

    /* Accordion caret + collapsed submenu — collapse mechanics (max-height /
       .is-open, from vk-overrides.css) are untouched, colours only. */
    body.vk .vk-mobile__inner .lms-mobile__caret {
        background: rgba(255, 199, 44, .16) !important;
        color: var(--hdx-yellow, #FFC72C) !important;
    }
    body.vk .vk-mobile__inner .vk-mobile__item.has-children.is-open > a .lms-mobile__caret {
        background: rgba(255, 199, 44, .3) !important;
    }
    body.vk .vk-mobile .lms-mobile__sub { border-left-color: rgba(255, 199, 44, .35) !important; }
    body.vk .vk-mobile .lms-mobile__sub-item > a {
        color: var(--hdx-text-dim, #C9BFA6) !important;
    }
    body.vk .vk-mobile .lms-mobile__sub-item > a::before { background: rgba(255, 199, 44, .55) !important; }
    body.vk .vk-mobile .lms-mobile__sub-item > a:hover {
        color: var(--hdx-yellow-2, #FFE066) !important;
        background: rgba(255, 199, 44, .08) !important;
    }
    body.vk .vk-mobile .lms-mobile__sub-item > a:hover::before { background: var(--hdx-yellow, #FFC72C) !important; }

    /* Footer meta text — was dark-on-dark */
    body.vk .vk-mobile__foot {
        color: rgba(245, 239, 224, .55) !important;
        border-top-color: rgba(255, 199, 44, .18) !important;
    }
    body.vk .vk-mobile__foot span:first-child { color: var(--hdx-yellow, #FFC72C) !important; }

    /* Close (X) button pinned top-right while open — dark/yellow to match */
    body.vk .vk-burger[aria-expanded="true"] {
        background: var(--hdx-bg-2, #15110A) !important;
        border-color: var(--hdx-line-2, rgba(255, 199, 44, .38)) !important;
        color: var(--hdx-yellow, #FFC72C) !important;
        box-shadow: 0 8px 22px -8px rgba(0, 0, 0, .6) !important;
    }
    body.vk .vk-burger[aria-expanded="true"] span { background: var(--hdx-yellow, #FFC72C) !important; }
}

/* ---- 8. Responsive tuning --------------------------------------------------- */
@media (max-width: 1180px) {
    body.vk .vk-nav__list a { font-size: 13px; padding: 9px 12px; }
}
@media (max-width: 480px) {
    body.vk .vk-mobile li a { font-size: 17px !important; }
}