/* =====================================================================
   KlinikPlus – Shared HEADER · MOBILE (generic / all pages)
   ---------------------------------------------------------------------
   The navbar is a shared layout partial. This file carries the phone/
   tablet-only treatment of it:

     1. a divider under every item in the slide-out menu,
     2. the "Submit Request" pill in the bar beside the hamburger
        (`.klinikplus-nav-right`, which holds the desktop copy, is
        display:none below 992px).

   Everything is wrapped in `@media (max-width: 991px)`, so the desktop
   navbar is never affected. Loaded globally in layout/header.blade.php
   next to footer-mobile.css and cta-mobile.css.
   ===================================================================== */

@media (max-width: 991px) {

    /* -----------------------------------------------------------------
       1) MENU ITEM DIVIDERS
       The list used a 1.5rem flex gap and no rules. Drop the gap and let
       each row's own padding + bottom border set the rhythm, so the lines
       sit flush between items instead of floating mid-gap.
    ----------------------------------------------------------------- */
    .klinikplus-mobile-links {
        gap: 0 !important;
    }

    .klinikplus-mobile-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.125rem 0 !important;
        border-bottom: 1px solid #E5E1DC;
    }

    /* The Services row is a span inside `.klinikplus-mobile-services`, so
       its border is drawn inside that wrapper — which is what puts the
       line between "Services" and its submenu when the submenu is open. */
    .klinikplus-mobile-services > .klinikplus-mobile-link {
        width: 100%;
    }

    /* No double line where the submenu closes the group. */
    .klinikplus-mobile-services-submenu .klinikplus-mobile-category,
    .klinikplus-mobile-services-submenu .klinikplus-mobile-sublink {
        border-bottom: 0;
    }

    /* -----------------------------------------------------------------
       2) "SUBMIT REQUEST" IN THE MOBILE BAR
       Sits between the logo and the hamburger. Compact sizing to match
       the other mobile pills (see cta-mobile.css).

       It only shows once the reader has scrolled past the hero (the
       `is-page-scrolled` hook is toggled in layout/header.blade.php) and
       goes away again at the top, where the page's own CTAs are already
       in view. Kept in the flow while hidden so the hamburger doesn't
       shift sideways when the pill fades in.
    ----------------------------------------------------------------- */
    .klinikplus-bar-submit {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        margin-left: auto;
        margin-right: 0.75rem;
        padding: 8px 14px !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        font-size: 0.75rem !important;
        white-space: nowrap;
        flex: 0 0 auto;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-4px) scale(0.96);
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
    }

    html.is-page-scrolled .klinikplus-bar-submit {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
    }

    .klinikplus-bar-submit .klinikplus-btn-arrow {
        width: 14px !important;
        height: 14px !important;
    }

    /* the hamburger must not be pushed off the edge by the pill */
    .klinikplus-mobile-toggle {
        flex: 0 0 auto;
    }

    /* Once the drawer is open the bar pill is redundant — the drawer has
       its own Submit Request button — and it would sit over the close
       icon, so hide it while the menu is open. */
    body.mobile-menu-open .klinikplus-bar-submit {
        display: none !important;
    }
}

/* ---------------------------------------------------------------------
   3) OPENING THE DRAWER MUST NOT MOVE THE PAGE
   klinikplus.css froze the background with `position: fixed` on the body.
   A fixed body has no scroll offset, so the page snapped to the top the
   moment the drawer opened and the reader was dumped there on close.
   Offsetting the fixed body by the old scrollY is the usual workaround,
   but on iOS it drags the whole layout out from under the drawer.

   So don't touch the document's scroll state at all — the drawer is
   `position: fixed` over the full viewport, so the page behind it is not
   visible anyway, and `overscroll-behavior` below keeps a flick inside
   the drawer from chaining out to it. Neutralising the pinning here is
   enough. Not media-scoped: the class only exists while the drawer is
   open, which is a mobile-only state.
--------------------------------------------------------------------- */
body.mobile-menu-open {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
}

/* Don't let a flick inside the drawer chain into the page behind it. */
.klinikplus-mobile-menu {
    overscroll-behavior: contain;
}

/* The bar copy is mobile-only: above 991px the navbar's own
   `.klinikplus-nav-right` button is visible instead. */
@media (min-width: 992px) {
    .klinikplus-bar-submit {
        display: none !important;
    }
}