/*
 * Mobile Navigation — Samanvi Technologies v5.0.0
 *
 * COMPLETE REWRITE — all previous versions used position:absolute panels with
 * CSS transform sliding. This broke on Android Chrome (OnePlus 13) because:
 *   1. Max Mega Menu injects a position:fixed element with z-index:9999999999
 *      that disrupts Chrome's compositor layer ordering.
 *   2. Nested overflow:hidden + transforms create clipping bugs on real devices
 *      that cannot be reproduced in desktop Chromium / Playwright.
 *
 * v5 architecture:
 *   - Drawer: flexbox column (header → body). Only element with transforms.
 *   - Body: flex:1 fills remaining space.
 *   - Panels: normal-flow children of body. height:100%. NO position:absolute.
 *     NO transforms. Switched via display:none ↔ display:flex (JS toggles).
 *   - Nav items: opacity-only stagger fade. No translateX.
 *   - All critical layout properties use !important (WordPress plugin defense).
 */

/* ════════════════════════════════════════
   HIDE GP + MAX MEGA MENU TOGGLES
════════════════════════════════════════ */
@media (max-width: 768px) {
    .main-navigation .menu-toggle,
    .inside-header .menu-toggle,
    button.menu-toggle {
        display: none !important;
    }

    .mega-menu-toggle,
    button.mega-menu-toggle,
    #mega-menu-wrap-primary > .mega-menu-toggle,
    .mega-menu-wrap > .mega-menu-toggle,
    #masthead .mega-menu-toggle,
    .inside-header .mega-menu-toggle,
    .site-header .mega-menu-toggle {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    #mega-menu-wrap-primary .mega-sub-menu,
    .mega-menu-wrap .mega-sub-menu {
        display: none !important;
    }

    /* Keep #site-navigation off-screen so MM JS can still read dimensions */
    #site-navigation {
        position: fixed !important;
        top: 0 !important;
        right: -200vw !important;
        pointer-events: none !important;
        visibility: hidden !important;
        z-index: 1 !important;
    }

    /*
     * BUG-34: MM compiles position:fixed on .max-mega-menu (viewport-relative,
     * escapes #site-navigation). It also assigns z-index:9999999999 which disrupts
     * Chrome's compositor layer ordering for our drawer. Force it off-screen.
     */
    .mega-menu-wrap .max-mega-menu {
        position: fixed !important;
        top: 0 !important;
        left: auto !important;
        right: -300vw !important;
        z-index: 1 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* ════════════════════════════════════════
   HAMBURGER BUTTON
════════════════════════════════════════ */
.samanvi-hamburger { display: none; }

@media (max-width: 768px) {
    .inside-header {
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }
    .inside-header > *:not(:last-child):not(.samanvi-hamburger) {
        margin-bottom: 0 !important;
    }

    .samanvi-hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 11px;
        border-radius: 10px;
        margin-left: auto;
        flex-shrink: 0;
        position: relative;
        z-index: 10001;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.18s;
    }
    .samanvi-hamburger:hover { background: rgba(9,22,40,0.06); }
    .samanvi-hamburger:focus-visible { outline: 2px solid #1f4e8a; outline-offset: 2px; }

    .samanvi-hamburger .hb-bar {
        display: block;
        height: 2px;
        width: 22px;
        background: #1a1a2e;
        border-radius: 2px;
        transform-origin: center;
        transition:
            transform  0.36s cubic-bezier(0.23, 1, 0.32, 1),
            opacity    0.22s ease,
            width      0.28s ease;
    }
    .samanvi-hamburger .hb-bar:nth-child(3) { width: 14px; }

    .samanvi-hamburger.is-open .hb-bar:nth-child(1) { transform: translateY(7px) rotate(45deg);   width: 22px; }
    .samanvi-hamburger.is-open .hb-bar:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
    .samanvi-hamburger.is-open .hb-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); width: 22px; }
}

/* ════════════════════════════════════════
   OVERLAY
════════════════════════════════════════ */
.sam-overlay {
    position: fixed;
    inset: 0;
    background: rgba(9, 22, 40, 0.55);
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.sam-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

/* ════════════════════════════════════════
   DRAWER — flexbox column layout
   The ONLY element that uses transforms.
════════════════════════════════════════ */
.sam-drawer {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: 360px;
    max-width: 92vw;
    height: 100vh;
    height: 100dvh;
    background: #ffffff !important;
    border-left: 1px solid rgba(0,0,0,0.08);
    z-index: 10002 !important;
    display: flex !important;
    flex-direction: column !important;
    transform: translateX(100%);
    transition: transform 0.38s cubic-bezier(0.23, 1, 0.32, 1);
    /* overflow:hidden intentionally removed — position:fixed + transform causes
       Chrome Android to compute the clip rect at the wrong origin on first paint,
       producing the left-clip artifact. Panels handle their own scroll overflow. */
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
}
.sam-drawer.is-open {
    transform: translateX(0);
    box-shadow: -16px 0 56px rgba(0,0,0,0.18);
}

/* ── Drawer header — normal flow, flex-shrink:0 ── */
.sam-drawer-header {
    flex-shrink: 0 !important;
    width: 100% !important;          /* must be explicit — prevents overflow beyond drawer */
    height: 62px;
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    background: #ffffff;
    border-bottom: 1px solid rgba(0,0,0,0.07);
    position: relative;
    z-index: 2;
    box-sizing: border-box !important; /* padding included in 100% width */
    overflow: hidden;                  /* safe: not position:fixed — no paint bug */
}

/* ── Search form ── */
.drawer-search-wrap {
    flex: 1;
    min-width: 0;    /* allow flex shrinking so close button stays in view */
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f4f5f7;
    border: 1.5px solid rgba(0,0,0,0.08);
    border-radius: 10px;
    padding: 0 12px;
    height: 38px;
    margin: 0;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
.drawer-search-wrap:focus-within {
    border-color: #1f4e8a;
    box-shadow: 0 0 0 3px rgba(31,78,138,0.1);
    background: #ffffff;
}
.drawer-search-icon {
    flex-shrink: 0;
    color: #aaa;
    display: flex;
    align-items: center;
    pointer-events: none;
    transition: color 0.18s;
}
.drawer-search-wrap:focus-within .drawer-search-icon { color: #1f4e8a; }

.drawer-search-input {
    flex: 1;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: none !important;
    -webkit-tap-highlight-color: transparent;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    color: #333;
    padding: 0;
    min-width: 0;
    -webkit-appearance: none;
}
.drawer-search-input:focus,
.drawer-search-input:focus-visible {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
.drawer-search-input::placeholder { color: #bbb; }
.drawer-search-input::-webkit-search-cancel-button { display: none; }

.drawer-close {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.1);
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 0.88rem;
    font-family: 'Poppins', sans-serif;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.18s, color 0.18s;
}
.drawer-close:hover,
.drawer-close:focus-visible {
    background: #f5f5f5 !important;
    color: #333 !important;
}

/* ════════════════════════════════════════
   DRAWER BODY — fills below header
   Normal-flow container. NO overflow:hidden.
   NO position:relative. NO transforms.
════════════════════════════════════════ */
.sam-drawer-body {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    overflow: hidden !important;   /* clip panels here — non-fixed element, no paint bug */
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* ════════════════════════════════════════
   PANELS — normal-flow children
   NO position:absolute. NO transforms.
   Switched via display:none ↔ display:flex (JS).
════════════════════════════════════════ */
#panelMain {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    /* NO position:absolute, NO transform */
}

/* JS sets display:none when Services is open */
#panelMain.sam-hidden {
    display: none !important;
}

#panelServices {
    height: 100% !important;
    display: none !important;          /* hidden by default */
    flex-direction: column !important;
    background: #ffffff !important;
    overflow: hidden;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    /* NO position:absolute, NO transform */
}

/* JS sets display:flex when Services is open */
#panelServices.sam-visible {
    display: flex !important;
}

/* Scrollable area inside Services panel */
.sam-panel-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
    padding: 4px 0 0;
}
.sam-panel-scroll::-webkit-scrollbar { width: 3px; }
.sam-panel-scroll::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.12);
    border-radius: 2px;
}

/* ════════════════════════════════════════
   PANEL 1 — NAV LINKS
════════════════════════════════════════ */
.sam-nav-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 12px 0 0 !important;
    flex-shrink: 0;
}

/* Opacity-only stagger — NO transforms on items */
.sam-nav-item {
    list-style: none !important;
    opacity: 0;
    transition: opacity 0.3s ease;
    transition-delay: calc(var(--nav-i, 0) * 35ms + 60ms);
}
.sam-drawer.is-open .sam-nav-item {
    opacity: 1;
}

.sam-nav-link {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
    height: 52px;
    text-decoration: none;
    color: #333333;
    font-size: 0.92rem;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    background: none;
    border: none;
    border-left: 3px solid transparent;
    width: 100%;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.16s, color 0.16s, border-color 0.16s;
    box-sizing: border-box;
}
.sam-nav-link:hover,
.sam-nav-link:focus-visible {
    background: #f7f8fa;
    color: #1f4e8a;
}
.sam-nav-link.active {
    color: #1f4e8a;
    border-left-color: #1f4e8a;
    background: rgba(31,78,138,0.05);
    font-weight: 600;
}

.nav-count {
    font-size: 0.62rem;
    font-weight: 700;
    background: #f0f4ff;
    color: #1f4e8a;
    padding: 2px 7px;
    border-radius: 20px;
}
.nav-chevron {
    margin-left: auto;
    color: #bbb;
    font-size: 0.8rem;
    flex-shrink: 0;
    transition: color 0.16s, transform 0.16s;
}
.sam-nav-link:hover .nav-chevron { color: #1f4e8a; transform: translateX(2px); }

.nav-divider {
    height: 1px;
    background: rgba(0,0,0,0.06);
    margin: 6px 20px;
    flex-shrink: 0;
}

/* ── CTA card ── */
.sam-cta-card {
    margin: 14px 16px 4px;
    border-radius: 12px;
    background: linear-gradient(135deg, #f0f4ff 0%, #e8f5f3 100%);
    border: 1px solid rgba(31,78,138,0.12);
    padding: 14px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.4s ease 0.32s;
}
.sam-drawer.is-open .sam-cta-card {
    opacity: 1;
}
.cta-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #aaa;
    margin-bottom: 9px;
}
.cta-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 11px 18px;
    background: #1f4e8a;
    color: #fff;
    border-radius: 9px;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.18s;
    box-sizing: border-box;
}
.cta-primary:hover { background: #174079; }
.cta-row {
    display: flex;
    gap: 7px;
    margin-top: 7px;
}
.cta-chip {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 9px 8px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.09);
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    color: #555;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.16s, border-color 0.16s, color 0.16s;
}
.cta-chip:hover { background: #f0f4ff; border-color: #1f4e8a; color: #1f4e8a; }

/* ── Footer strip ── */
.sam-drawer-footer {
    flex-shrink: 0;
    margin-top: auto;
    padding: 12px 20px;
    border-top: 1px solid rgba(0,0,0,0.07);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fafafa;
    opacity: 0;
    transition: opacity 0.4s ease 0.38s;
}
.sam-drawer.is-open .sam-drawer-footer { opacity: 1; }

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.footer-contact a {
    font-size: 0.7rem;
    color: #888;
    text-decoration: none;
    transition: color 0.16s;
}
.footer-contact a:hover { color: #1f4e8a; }

/* ── Social buttons — SVG mask icons ── */
.footer-socials { display: flex; gap: 6px; }

.social-btn {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background-color: #888;
    -webkit-mask-size: 14px 14px;
    mask-size: 14px 14px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    transition: background-color 0.16s;
}
.social-btn:hover { background-color: #1f4e8a; }

/* ════════════════════════════════════════
   PANEL 2 — SERVICES
════════════════════════════════════════ */
.services-panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    height: 52px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(0,0,0,0.07);
    background: #fafafa;
}
.back-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 4px;
    color: #1f4e8a;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.16s;
}
.back-btn:hover { color: #091628; }
.back-btn .back-arrow {
    font-size: 1rem;
    display: inline-block;
    transition: transform 0.18s;
}
.back-btn:hover .back-arrow { transform: translateX(-2px); }

.services-panel-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #091628;
    flex: 1;
    text-align: center;
    padding-right: 28px;
}

.svc-category {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #00a896;
    padding: 14px 20px 5px;
}

.svc-link {
    display: flex;
    align-items: center;
    padding: 0 20px;
    height: 50px;
    text-decoration: none;
    color: #333;
    font-size: 0.88rem;
    font-weight: 400;
    border-left: 3px solid transparent;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    box-sizing: border-box;
}
.svc-link:hover {
    background: #f7f8fa;
    color: #1f4e8a;
    border-left-color: rgba(31,78,138,0.3);
}
.svc-text {
    flex: 1;
    transition: transform 0.15s cubic-bezier(0.23,1,0.32,1);
}
.svc-link:hover .svc-text { transform: translateX(4px); }

.svc-arr {
    font-size: 0.75rem;
    color: #ccc;
    flex-shrink: 0;
    transition: color 0.15s, transform 0.15s;
}
.svc-link:hover .svc-arr { color: #1f4e8a; transform: translateX(3px); }

#panelServices ul,
#panelServices li {
    list-style: none !important;
    margin: 0;
    padding: 0;
}

/* ════════════════════════════════════════
   SCROLL LOCK
════════════════════════════════════════ */
body.nav-open {
    overflow: hidden !important;
}

/* ════════════════════════════════════════
   GP BUTTON OVERRIDE
   Reset GP's default button background — do NOT use color:inherit here,
   it overrides our explicit colors and can make text invisible (e.g. white
   text on white background when GP sets a light header color globally).
════════════════════════════════════════ */
.sam-drawer button,
.sam-drawer button:hover,
.sam-drawer button:focus,
.sam-drawer button:active,
.sam-drawer button:focus-visible {
    background: transparent !important;
}

/* Explicit colors per button — not relying on inheritance */
.sam-drawer .drawer-close {
    color: #555 !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.sam-drawer .drawer-close:hover,
.sam-drawer .drawer-close:focus-visible {
    background: #f5f5f5 !important;
    color: #333 !important;
}
.sam-drawer .sam-nav-link {
    color: #333333 !important;
}
.sam-drawer .sam-nav-link:hover,
.sam-drawer .sam-nav-link:focus-visible {
    background: #f7f8fa !important;
    color: #1f4e8a !important;
}
.sam-drawer .back-btn {
    color: #1f4e8a !important;
}

/* ════════════════════════════════════════
   FOCUS RING
════════════════════════════════════════ */
.sam-drawer *:focus-visible {
    outline: 2px solid #1f4e8a;
    outline-offset: 2px;
}
.sam-drawer .drawer-search-input:focus,
.sam-drawer .drawer-search-input:focus-visible {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* ════════════════════════════════════════
   REDUCED MOTION
════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .sam-drawer,
    .sam-overlay,
    .sam-nav-item,
    .sam-cta-card,
    .sam-drawer-footer,
    .samanvi-hamburger .hb-bar,
    .svc-text,
    .svc-arr,
    .nav-chevron,
    .cta-primary,
    .back-btn .back-arrow {
        transition: none !important;
        animation: none !important;
    }
    .sam-nav-item      { opacity: 1 !important; }
    .sam-cta-card      { opacity: 1 !important; }
    .sam-drawer-footer { opacity: 1 !important; }
}