/*!
 * 9wickets Pro — Accessibility & Performance polish
 * - Visible focus rings on keyboard navigation
 * - Reduced-motion respect (already in cricket.css for animations)
 * - Selection color
 * - Print stylesheet basics
 */

/* ============================================================
   1. KEYBOARD FOCUS — visible gold ring on Tab navigation
   ============================================================ */
body.vk a:focus-visible,
body.vk button:focus-visible,
body.vk input:focus-visible,
body.vk select:focus-visible,
body.vk textarea:focus-visible,
body.vk summary:focus-visible,
body.vk [tabindex]:focus-visible {
    outline: 2px solid var(--vk-gold);
    outline-offset: 3px;
    border-radius: 8px;
    box-shadow: 0 0 0 4px rgba(245, 177, 0, 0.18);
}
/* Pills + buttons keep their natural radius */
body.vk .nw-btn:focus-visible,
body.vk .vk-btn:focus-visible,
body.vk .nw-cta:focus-visible,
body.vk .nw-cta-band__btn:focus-visible,
body.vk .nw-icon-btn:focus-visible,
body.vk .nw-burger:focus-visible {
    outline-offset: 4px;
    border-radius: 999px;
}

/* ============================================================
   2. SKIP LINK — already exists; bump style
   ============================================================ */
body.vk .vk-skip:focus,
body.vk .vk-skip:focus-visible {
    background: var(--vk-grad-gold);
    color: #0A0500;
    padding: 12px 22px;
    border-radius: 999px;
    font-family: var(--vk-font-en);
    font-weight: 700;
    letter-spacing: 0.04em;
    box-shadow:
        0 16px 40px rgba(245, 177, 0, 0.42),
        0 0 0 1px rgba(245, 177, 0, 0.78) inset;
}

/* ============================================================
   3. SELECTION COLOR (already set in brand layer; reaffirm)
   ============================================================ */
body.vk ::selection { background: var(--vk-gold); color: #0A0500; }
body.vk ::-moz-selection { background: var(--vk-gold); color: #0A0500; }

/* ============================================================
   4. PRINT STYLESHEET — clean basics
   ============================================================ */
@media print {
    body.vk {
        background: #fff !important;
        color: #000 !important;
    }
    body.vk .nw-header,
    body.vk .nw-footer,
    body.vk .vk-totop,
    body.vk .nw-cta-band,
    body.vk .vk-cursor,
    body.vk .nw-hero__panel,
    body.vk .nw-hero__ticker,
    body.vk .vk-mobile,
    body.vk .vk-search-panel,
    body.vk [aria-hidden="true"] { display: none !important; }
    body.vk a { color: #000 !important; text-decoration: underline; }
    body.vk .nw-h2,
    body.vk .vk-h2,
    body.vk .nw-hero__title,
    body.vk .vk-h1 {
        color: #000 !important;
        background: none !important;
        -webkit-text-fill-color: #000 !important;
    }
}

/* ============================================================
   5. HIGH CONTRAST MODE (Windows Forced Colors)
   ============================================================ */
@media (forced-colors: active) {
    body.vk .nw-btn--primary,
    body.vk .nw-cta,
    body.vk .nw-cta-band__btn {
        forced-color-adjust: none;
    }
    body.vk a:focus-visible,
    body.vk button:focus-visible {
        outline: 3px solid CanvasText;
        outline-offset: 2px;
    }
}

/* ============================================================
   6. TAP TARGETS — ensure 44×44 minimum on mobile
   ============================================================ */
@media (max-width: 720px) {
    body.vk a,
    body.vk button {
        min-height: 32px;     /* won't grow text-only links */
    }
    /* Inline navigation chips (breadcrumb, ticker) shouldn't carry a 32px
       tap-target box — they're not primary actions and the extra height
       breaks vertical rhythm next to inline icons / sibling text. */
    body.vk .vk-breadcrumb a,
    body.vk .vk-breadcrumb,
    body.vk .nw-hero__ticker a {
        min-height: 0;
    }
    body.vk .nw-btn,
    body.vk .vk-btn,
    body.vk .nw-cta,
    body.vk .nw-icon-btn,
    body.vk .nw-burger,
    body.vk .nw-foot__social a,
    body.vk .nw-cta-band__btn {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ============================================================
   7. IMAGE LAZYLOAD HINT (browser will respect <img loading="lazy">)
   ============================================================ */
body.vk img[loading="lazy"] {
    background: rgba(255, 255, 255, 0.025);
}