/* =========================================================
   Cambodia Lotto — Mobile Menu Click Fix + Responsive Polish
   Loaded LAST after todaypools.css so declarations win.

   Root cause of the "menu items not clickable" bug:
   .kh-header-inner has `position: relative; z-index: 2` which
   creates its own stacking context. The mobile drawer
   `.kh-nav-pill` (z-index: 200) is inside it, so from the
   viewport root its effective layer is 2. Meanwhile `.kh-scrim`
   is a sibling of the header at the root context with z-index: 150
   -> the scrim is painted ABOVE the drawer and eats every click.

   Fix: lift the drawer out of the trapped context and make sure
   the scrim sits BETWEEN the page and the drawer.
   ========================================================= */

@media (max-width: 991.98px) {

    /* 1. Break the trap: don't let the header-inner form a
          stacking context that traps the mobile drawer. */
    .kh-header-inner {
        z-index: auto !important;
    }

    /* 2. Scrim below drawer, above page content. */
    .kh-scrim {
        z-index: 1090 !important;
    }

    /* 3. Drawer on top, always clickable. Force its own top-level
          stacking context so nothing can cover it. */
    .kh-nav-pill {
        z-index: 1100 !important;
        pointer-events: auto;
        isolation: isolate;
        will-change: transform;
    }
    body.kh-menu-open .kh-nav-pill {
        right: 0 !important;
    }

    /* 4. Menu items: guarantee they receive pointer events and are
          rendered as tap-friendly targets. */
    .kh-nav-pill .kh-nav-item {
        position: relative;
        z-index: 1;
        pointer-events: auto;
        display: flex;
        align-items: center;
        min-height: 48px;
        padding: 14px 18px;
        border-radius: 6px;
        border-bottom: 1px solid var(--kh-line);
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(206, 17, 38, .15);
        touch-action: manipulation;
    }
    .kh-nav-pill .kh-nav-item:active {
        background: rgba(206, 17, 38, .08);
    }
    .kh-nav-pill .kh-nav-item i {
        pointer-events: none; /* icon must not eat clicks meant for the anchor */
    }

    /* 5. Close button area: add a visible close X inside the drawer
          for users who dismiss without tapping the scrim. Using a
          pseudo on the drawer so we don't touch the HTML. */
    .kh-nav-pill::after {
        content: "\00d7"; /* × */
        position: absolute;
        top: 14px;
        right: 18px;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-display);
        font-size: 28px;
        font-weight: 700;
        color: var(--kh-red);
        background: #fff;
        border: 1px solid var(--kh-line);
        border-radius: 50%;
        box-shadow: 0 4px 10px rgba(0,0,0,.08);
        pointer-events: none; /* purely decorative hint */
        z-index: 2;
    }

    /* 6. Mobile toggle button must stay above the scrim BEFORE the
          menu opens so the first tap actually triggers it. */
    .kh-mobile-bar {
        position: relative;
        z-index: 1080;
    }

    /* 7. Body scroll lock when the drawer is open, so background
          doesn't scroll under the fixed drawer. */
    body.kh-menu-open {
        overflow: hidden;
        touch-action: none;
    }

    /* 8. Bootstrap modal (Responsible) must sit above the drawer
          when the user taps "Responsible" from inside the drawer. */
    .modal { z-index: 1200; }
    .modal-backdrop { z-index: 1150; }

    /* 9. General responsive safety already partly handled in
          todaypools.css; add small tightening here. */
    .kh-container { padding-left: 16px; padding-right: 16px; }
    .kh-header-content { padding-left: 16px; padding-right: 16px; }

    /* 10. Header top row: make sure the toggle button is always
           reachable when the pill nav is hidden off-screen. */
    .kh-header-content {
        justify-content: space-between;
        align-items: center;
    }

    /* Extra: guarantee overlay + drawer sit above any oddly-stacked
       sections that use their own z-index. */
    .kh-header,
    .kh-scrim,
    .kh-nav-pill { transform: none; }
}

/* Small phones tuning */
@media (max-width: 480px) {
    .kh-nav-pill {
        width: 88vw;
        max-width: 340px;
        padding: 72px 16px 20px;
    }
    .kh-nav-pill .kh-nav-item {
        font-size: 12px;
        padding: 12px 14px;
        letter-spacing: .14em;
    }
    .kh-nav-pill::after {
        top: 12px;
        right: 14px;
        width: 36px;
        height: 36px;
        font-size: 24px;
    }
}