/* ==========================================================================
   9wickets — HEADER V2 "Golden Atelier" (loads LAST, after fonts.css)
   --------------------------------------------------------------------------
   Floating warm-glass pill navbar over the cream/gold theme:
   - Utility band: ticker + admin strip merged into one slim ink bar with
     muted-gold small text (replaces the loud gold marquee + rainbow name).
     Both collapse away once the page is scrolled — only the pill stays.
   - Pill: inset, radius 18px, backdrop-blur, gold-tinted shadow; solidifies
     on .is-scrolled (hook set by wickets-home.js — unchanged).
   - Nav: ink links, soft gold pill hover + center-grow underline; premium
     white dropdown cards with a small stagger.
   - Search panel + mobile drawer restyled as warm white cards.
   Markup (HFE post 19) untouched. This file only out-cascades the retrofit
   !important rules at equal specificity by loading later.
   ========================================================================== */

/* ---- 0. Strip the old chrome ------------------------------------------- */
body.vk .vk-header,
body.vk .vk-header.is-scrolled {
    background: transparent !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
body.vk .vk-header__bar { display: none !important; }

/* ---- 1. Utility band — ticker + admin as ONE slim ink bar ---------------
   The band has a FIXED 58px total height (32 + 26) and the sticky wrapper
   (#masthead) is offset by exactly that much, so the band scrolls away
   naturally and only the pill stays pinned. No height mutation on scroll —
   collapsing the band via is-scrolled fought Chrome's scroll anchoring and
   made the header flicker around the threshold. */
body.ehf-header #masthead { top: -58px !important; }
body.vk.admin-bar.ehf-header #masthead { top: -26px !important; }
@media (max-width: 720px) {
    body.ehf-header #masthead { top: -54px !important; }
    body.vk.admin-bar.ehf-header #masthead { top: -8px !important; }
}
body.vk .vk-ticker {
    background: #12100B !important;
    border-bottom: 0 !important;
    height: 32px;
    display: flex;
    align-items: center;
}
body.vk .vk-ticker__inner { width: 100%; }
body.vk .vk-ticker__item { font-size: 12.5px; padding: 0 24px; line-height: 32px; }
body.vk .vk-ticker__item span,
body.vk .vk-ticker__item a {
    color: #E9D9A8 !important;
    font-weight: 500 !important;
    letter-spacing: .02em;
}
body.vk .vk-ticker__item::before {
    width: 4px; height: 4px;
    background: rgba(255, 199, 44, .65);
}
body.vk .vk-adminname {
    background: #12100B !important;
    border-bottom: 1px solid rgba(255, 199, 44, .22) !important;
    padding: 0 14px !important;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
body.vk .vk-adminname__text {
    font-family: var(--vk-font-en);
    font-size: 11.5px !important;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    line-height: 1.4;
    /* quiet gold shimmer instead of the rainbow cycle */
    background: linear-gradient(90deg, #C9A96A 0%, #F4D98B 30%, #FFC72C 50%, #F4D98B 70%, #C9A96A 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: #C8860B;
    -webkit-text-fill-color: transparent;
    animation: vkh2-shimmer 6s linear infinite;
}
@keyframes vkh2-shimmer {
    from { background-position: 0% 50%; }
    to   { background-position: 250% 50%; }
}
@media (prefers-reduced-motion: reduce) {
    body.vk .vk-adminname__text { animation: none; }
}

/* ---- 2. The floating pill ----------------------------------------------- */
body.vk .vk-header__inner {
    max-width: 1280px;
    width: calc(100% - 32px);
    margin: 12px auto 12px;
    padding: 8px 10px 8px 20px !important;
    border-radius: 18px;
    background: rgba(255, 253, 247, .82);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    backdrop-filter: saturate(160%) blur(18px);
    border: 1px solid rgba(200, 134, 11, .22);
    box-shadow:
        0 14px 44px -14px rgba(200, 134, 11, .38),
        0 2px 8px rgba(26, 24, 19, .05),
        inset 0 1px 0 rgba(255, 255, 255, .85);
    transition: background .3s ease, box-shadow .3s ease, border-color .3s ease, padding .3s ease;
}
body.vk .vk-header.is-scrolled .vk-header__inner {
    background: rgba(255, 253, 247, .97);
    border-color: rgba(200, 134, 11, .30);
    box-shadow:
        0 18px 50px -16px rgba(26, 24, 19, .30),
        0 4px 14px rgba(200, 134, 11, .14),
        inset 0 1px 0 rgba(255, 255, 255, .9);
    padding: 6px 10px 6px 20px !important;
}

/* ---- 3. Brand — sized for the pill -------------------------------------- */
body.vk .vk-header .vk-brand__halo { display: none !important; }
body.vk .vk-header .vk-brand img {
    height: 44px !important;
    max-height: 44px !important;
    max-width: 100% !important;
    transform: none !important;
    animation: none !important;
    filter: drop-shadow(0 3px 12px rgba(200, 134, 11, .35)) !important;
    transition: height .3s ease, filter .3s ease;
}
body.vk .vk-header .vk-brand:hover img {
    transform: none !important;
    filter: drop-shadow(0 4px 16px rgba(200, 134, 11, .55)) !important;
}
body.vk .vk-header.is-scrolled .vk-brand img {
    height: 38px !important;
    max-height: 38px !important;
}

/* ---- 4. Nav links -------------------------------------------------------- */
body.vk .vk-nav__list { gap: 2px; }
body.vk .vk-nav__list a {
    font-size: 14px;
    font-weight: 600;
    padding: 9px 12px;
    overflow: visible;
    color: #221C10 !important;
    background: transparent;
}
body.vk .vk-nav__label { color: inherit !important; transform: none !important; }
/* kill the old fly-out label mechanic */
body.vk .vk-nav__list a::before { content: none !important; }
body.vk .vk-nav__list a:hover .vk-nav__label { transform: none !important; color: #6E4600 !important; }
body.vk .vk-nav__list a:hover {
    color: #6E4600 !important;
    background: rgba(255, 199, 44, .18);
}
body.vk .vk-nav__list a.is-current {
    color: #6E4600 !important;
    background: rgba(255, 199, 44, .14);
}
/* center-grow underline (replaces the dot) */
body.vk .vk-nav__list a::after {
    content: '';
    left: 50%;
    bottom: 2px;
    width: 22px;
    height: 2.5px;
    border-radius: 2px;
    background: linear-gradient(90deg, #E8A200, #C8860B);
    box-shadow: none;
    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,
body.vk .vk-nav__list a.is-current::after { transform: translateX(-50%) scaleX(1); }
body.vk .vk-nav__list .lms-nav__caret { color: #8A5A0A; margin-left: 5px; }

/* ---- 5. Dropdown cards --------------------------------------------------- */
body.vk .vk-nav .lms-nav__sub {
    min-width: 232px;
    padding: 10px;
    border-radius: 16px;
    border: 1px solid rgba(200, 134, 11, .20);
    background: linear-gradient(180deg, #FFFDF7 0%, #FFF7E6 100%);
    box-shadow:
        0 24px 60px -18px rgba(200, 134, 11, .45),
        0 8px 24px rgba(26, 24, 19, .08);
    transform: translateY(14px) scale(.98);
}
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);
}
/* ---- 5b. Hover bridge (fixes "dropdown closes before you can click it") --
   .lms-nav__sub sits `top:34.8px` below its parent .vk-nav__item, but the
   item's own hoverable box ends flush with the link (no padding/height
   covers that gap). Moving the mouse straight down from the link to the
   dropdown crosses ~16px of dead space that belongs to neither element, so
   :hover is lost mid-transit and the dropdown starts closing before the
   cursor arrives. This invisible ::after bridges exactly that gap — same
   width as the dropdown, positioned between the link's bottom edge and the
   dropdown's top edge — so the hoverable region is continuous the whole
   way down. Zero visual footprint (no border/background), doesn't affect
   layout (absolutely positioned, like the dropdown itself). */
body.vk .vk-nav .vk-nav__item.has-children::after {
    content: '';
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    min-width: 232px;
    height: 18px;
}
body.vk .vk-nav .lms-nav__sub-item > a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #221C10;
    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: rgba(200, 134, 11, .55);
    flex-shrink: 0;
    transition: background .2s ease, transform .2s ease;
}
body.vk .vk-nav .lms-nav__sub-item > a:hover {
    background: rgba(255, 199, 44, .20);
    color: #6E4600;
    padding-left: 18px;
}
body.vk .vk-nav .lms-nav__sub-item > a:hover::before {
    background: #C8860B;
    transform: scale(1.4);
}
/* small stagger on open */
body.vk .vk-nav .lms-nav__sub .lms-nav__sub-item {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .22s ease, transform .28s cubic-bezier(.2, .7, .15, 1);
}
body.vk .vk-nav .vk-nav__item:hover > .lms-nav__sub .lms-nav__sub-item,
body.vk .vk-nav .vk-nav__item:focus-within > .lms-nav__sub .lms-nav__sub-item {
    opacity: 1;
    transform: none;
}
body.vk .vk-nav .lms-nav__sub .lms-nav__sub-item:nth-child(1) { transition-delay: .04s; }
body.vk .vk-nav .lms-nav__sub .lms-nav__sub-item:nth-child(2) { transition-delay: .09s; }
body.vk .vk-nav .lms-nav__sub .lms-nav__sub-item:nth-child(3) { transition-delay: .14s; }

/* ---- 6. Actions: search toggle, support button, burger ------------------- */
body.vk .vk-icon-btn {
    background: rgba(255, 199, 44, .14) !important;
    border-color: rgba(200, 134, 11, .28) !important;
    color: #221C10 !important;
}
body.vk .vk-icon-btn:hover {
    background: rgba(255, 199, 44, .30) !important;
    color: #6E4600 !important;
    border-color: rgba(200, 134, 11, .45) !important;
}
body.vk .vk-icon-btn[aria-expanded="true"] {
    background: var(--vk-grad-gold) !important;
    color: #0A0500 !important;
    border-color: transparent !important;
}
/* the ink-fill সাপোর্ট button (buttons.css) already fits — just soften its glow */
body.vk .vk-header .vk-btn--primary {
    box-shadow:
        0 8px 22px rgba(255, 199, 44, .28),
        0 1px 0 rgba(255, 217, 112, .20) inset;
}
body.vk .vk-burger {
    background: rgba(255, 199, 44, .14) !important;
    border-color: rgba(200, 134, 11, .28) !important;
    border-radius: 12px !important;
}
body.vk .vk-burger span { background: #221C10 !important; }
body.vk .vk-burger:hover {
    background: rgba(255, 199, 44, .30) !important;
    border-color: rgba(200, 134, 11, .45) !important;
}
body.vk .vk-burger[aria-expanded="true"] {
    background: var(--vk-grad-gold) !important;
    border-color: transparent !important;
}
body.vk .vk-burger[aria-expanded="true"] span { background: #0A0500 !important; }

/* ---- 7. Search panel — warm white card under the pill -------------------- */
body.vk .vk-search-panel {
    background: rgba(255, 253, 247, .97) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(200, 134, 11, .22) !important;
    box-shadow: 0 28px 56px -22px rgba(26, 24, 19, .28);
}
body.vk .vk-search-panel .search-box {
    background: #FFFFFF !important;
    border: 1px solid rgba(200, 134, 11, .28) !important;
    box-shadow: 0 6px 20px rgba(200, 134, 11, .12) !important;
}
body.vk .vk-search-panel .search-box > svg { color: #8A5A0A !important; }
body.vk .vk-search-panel .search-box .search-field,
body.vk .vk-search-panel input {
    color: #221C10 !important;
    background: transparent !important;
}
body.vk .vk-search-panel .search-box .search-field::placeholder,
body.vk .vk-search-panel input::placeholder { color: #9A8F76 !important; }
body.vk .vk-search-panel__close {
    color: #221C10 !important;
    background: rgba(255, 199, 44, .16) !important;
    border-color: rgba(200, 134, 11, .28) !important;
}
body.vk .vk-search-panel__close:hover {
    background: rgba(255, 199, 44, .32) !important;
    color: #6E4600 !important;
}

/* ---- 8. Mobile drawer — premium white card panel ------------------------- */
body.vk .vk-mobile {
    background: linear-gradient(180deg, #FFFDF7 0%, #FFF5E0 100%) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
body.vk .vk-mobile li a {
    background: #FFFFFF;
    border: 1px solid rgba(200, 134, 11, .18);
    box-shadow: 0 2px 12px rgba(200, 134, 11, .10);
    color: #221C10;
    border-radius: 14px;
}
body.vk .vk-mobile li a .lms-mobile__label { color: #221C10; }
body.vk .vk-mobile li a:hover,
body.vk .vk-mobile li.is-open > a {
    background: rgba(255, 250, 236, 1);
    border-color: rgba(200, 134, 11, .40);
    color: #6E4600;
}
body.vk .vk-mobile li a:hover .lms-mobile__label { color: #6E4600; }
body.vk .vk-mobile .lms-mobile__sub-item > a {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: #4A3A15;
}
body.vk .vk-mobile .lms-mobile__sub-item > a:hover { color: #6E4600; background: rgba(255, 199, 44, .16); }
body.vk .vk-mobile__foot {
    color: #8A5A0A;
    border-top-color: rgba(200, 134, 11, .28);
}

/* ---- 9. Responsive tuning ------------------------------------------------ */
@media (max-width: 1180px) {
    body.vk .vk-nav__list a { font-size: 13px; padding: 8px 9px; }
}
@media (max-width: 720px) {
    body.vk .vk-header__inner {
        width: calc(100% - 20px);
        margin: 10px auto 10px;
        padding: 6px 8px 6px 14px !important;
        border-radius: 16px;
        gap: 10px;
    }
    body.vk .vk-header .vk-brand img { height: 38px !important; max-height: 38px !important; }
    body.vk .vk-header.is-scrolled .vk-brand img { height: 34px !important; max-height: 34px !important; }
    body.vk .vk-ticker { height: 30px; }
    body.vk .vk-ticker__item { font-size: 11.5px; padding: 0 18px; line-height: 30px; }
    body.vk .vk-adminname { height: 24px; }
    body.vk .vk-adminname__text { font-size: 10.5px !important; letter-spacing: .14em; }
}

/* ---- 10. Mobile drawer — center content pass ------------------------------
   wickets-home.css's drawer redesign (@media max-width:900px) left the
   drawer's small brand/legal footer strip left-aligned like a nav row. That
   block isn't a link list (no scan-affordance argument applies) — it's two
   lines of plain text, so it gets centered like the rest of the site's
   mobile content. This file loads after wickets-home.css, so the equal-
   specificity `!important` rules below win without editing that file.
   NOTE — deliberately NOT touched here: the nav-drawer link rows themselves
   (.vk-mobile li a) keep their existing label-left / caret-right layout.
   For a vertical list of menu rows that's a clearer, more scannable pattern
   than centering both pieces into the middle of each row, and the CTA
   button below them is already centered. The drawer's "9wickets" brand
   label (::before, top-left) is also left as-is — it pairs with the
   top-right close (×) button the same way a header logo pairs with header
   actions, which is a standard, intentional convention, not a defect. */
@media (max-width: 900px) {
    body.vk .vk-mobile__foot {
        align-items: center !important;
        text-align: center !important;
    }
}