/* ============================================================
   VirtuWorks — Mobile Menu (≤991px)  ·  BOLD EDITORIAL
   ------------------------------------------------------------
   Implements design "3 · Bold editorial" from the Claude Design
   handoff (vw-mobile-menu-redesign):
     · dark ink header strip (white logo + circular ✕)
     · cream body with the real emblem integrated as a watermark
       and a faint diagonal motif
     · numbered sections (01, 02 …) in big bold Saans that turn
       orange and reveal ↗ sub-links; plus → × toggle
     · flat pages continue the numbered list with a ↗
     · oversized "Contact us ↗" + dark tap-to-call pill

   Reuses the existing toggle (body.menu-open), the jQuery
   single-open accordion (.current on parent <li>) and the
   .vw-mobile-contact / .vw-mobile-phone items added in header.php.
   Real menu items come straight from wp_nav_menu('header').

   Loaded AFTER style.css so it wins on source order. Scoped to
   .desk-header mobile nav only — never touches the desktop
   #vw-fs-menu overlay or the footer menus.
   ============================================================ */

@media (max-width: 991px) {

    /* ---------- Tokens (from the design) ---------- */
    .desk-header .navbar-collapse {
        --vw-orange: #ED5A00;
        --vw-orange700: #C44A00;
        --vw-ink: #241D1E;
        --vw-ink2: #3A3030;
        --vw-paper: #F4F1EC;
        --vw-line: rgba(36, 29, 30, .10);
        --vw-muted: #7A7470;
        --vw-header-h: 88px;

        /* full-screen cream overlay with a faint diagonal motif */
        position: fixed;
        inset: 0;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        z-index: 1000;
        padding: 0 !important;
        overflow: hidden;
        opacity: 1;
        /* Reveal animation: the panel unrolls from the top down. clip-path keeps the
           text crisp (no scaleY distortion) and animates cheaply on the GPU. */
        -webkit-clip-path: inset(0 0 100% 0);
        clip-path: inset(0 0 100% 0);
        /* Never intercept touches unless the menu is actually open. Guards against
           a race where Bootstrap opens the collapse (display:block) before the
           body.menu-open class is set — without this the closed (fully-clipped)
           full-screen overlay could still swallow taps and freeze the page. */
        pointer-events: none;
        transition: clip-path .38s cubic-bezier(.33, 1, .68, 1),
                    -webkit-clip-path .38s cubic-bezier(.33, 1, .68, 1);
        color: var(--vw-ink);
        font-family: 'Saans-Regular', 'SaansTRIAL-Regular', sans-serif;
        background:
            linear-gradient(125deg, transparent 0 58%, rgba(36, 29, 30, .022) 58%),
            var(--vw-paper);
    }

    body.menu-open .desk-header .navbar-collapse {
        -webkit-clip-path: inset(0 0 0 0);
        clip-path: inset(0 0 0 0);
        pointer-events: auto;
    }

    /* Keep the panel rendered (Bootstrap would display:none it when closed) so the
       clip-path reveal always animates instead of snapping open on the first tap.
       It stays fully clipped + pointer-events:none until open, so it's invisible
       and inert when closed. */
    .desk-header .navbar-collapse.collapse:not(.show) {
        display: block !important;
    }

    .desk-header .navbar-collapse.collapsing {
        height: 100dvh !important;
        transition: clip-path .38s cubic-bezier(.33, 1, .68, 1) !important,
                    -webkit-clip-path .38s cubic-bezier(.33, 1, .68, 1) !important;
    }

    /* transparent header: a paper-matching cover that hides items as they
       scroll under the logo/✕ — no dark strip, default logo stays visible */
    .desk-header .navbar-collapse:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: var(--vw-header-h);
        background: var(--vw-paper);
        z-index: 2;
        pointer-events: none;
    }

    /* real emblem woven into the background, lower-right */
    .desk-header .navbar-collapse:after {
        content: '';
        position: absolute;
        right: -110px;
        bottom: -90px;
        width: 420px;
        height: 420px;
        background: url("/wp-content/uploads/2024/09/virtuworks-orange-emblem.png") center/contain no-repeat;
        opacity: .18;
        transform: rotate(-10deg);
        z-index: 0;
        pointer-events: none;
    }

    /* ---------- Scrollable list ---------- */
    .desk-header .navbar-collapse .navbar-nav {
        position: relative;
        z-index: 1;
        counter-reset: vwnav;
        display: flex;
        flex-direction: column;
        height: 100%;
        margin: 0;
        padding: 90px 22px calc(14px + env(safe-area-inset-bottom));
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    /* ---------- Top-level rows (sections + flat pages) ---------- */
    .desk-header .navbar-collapse .navbar-nav > li {
        position: relative;
        height: auto;
        padding: 0;
        border-bottom: 1px solid var(--vw-line);
    }

    /* Rows are a FIXED height (row padding scales with viewport height, so
       taller phones get roomier rows) — they never grow/shrink, so expanding
       a sub-menu never resizes the other rows. The leftover space is absorbed
       by margin-top:auto on the card (a flexible gap that shrinks on expand). */
    .desk-header .navbar-collapse .navbar-nav > li:not(.vw-mobile-phone):not(.vw-mobile-contact) {
        counter-increment: vwnav;
        flex: 0 0 auto;
    }

    /* the connect card keeps its natural size and sits at the bottom */
    .desk-header .navbar-collapse .navbar-nav > li.vw-mobile-contact,
    .desk-header .navbar-collapse .navbar-nav > li.vw-mobile-phone {
        flex: 0 0 auto;
    }

    .desk-header .navbar-collapse .navbar-nav > li > a {
        position: relative;
        display: flex;
        align-items: center;
        gap: 12px;
        /* fixed left padding reserves the number column, so section and
           flat labels always start at the same x. top/bottom padding scales
           with viewport height (clamp + vh) so taller phones get a fixed but
           roomier row height. */
        padding: clamp(10px, 1.6vh, 15px) 4px clamp(9px, 1.5vh, 14px) 38px !important;
        margin: 0 !important;
        font-family: 'Saans-Medium', 'SaansTRIAL-Medium', sans-serif;
        font-size: clamp(18px, 5.4vw, 23px);
        font-weight: 500;
        line-height: 1.15;
        letter-spacing: -.02em;
        white-space: nowrap;
        text-transform: none;
        color: var(--vw-ink);
        text-decoration: none;
        transition: color .2s ease;
    }

    /* index number — 01, 02 … (sections + flat pages only) */
    /* absolutely positioned so it never shifts the label start */
    .desk-header .navbar-collapse .navbar-nav > li:not(.vw-mobile-contact):not(.vw-mobile-phone) > a:before {
        content: counter(vwnav, decimal-leading-zero);
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        /* reset style.css's `li.menu-item-has-children > a:before { margin: 9px 10px }`
           which otherwise shifts section numbers right + down vs flat-link numbers */
        margin: 0 !important;
        padding: 0 !important;
        font-family: ui-monospace, 'SF Mono', 'SFMono-Regular', Menlo, monospace;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0;
        color: var(--vw-orange);
        transition: color .2s ease;
    }

    .desk-header .navbar-collapse .navbar-nav > li > a:hover,
    .desk-header .navbar-collapse .navbar-nav > li.current > a,
    .desk-header .navbar-collapse .navbar-nav > li.current-menu-item > a {
        color: var(--vw-orange);
    }

    /* ---------- Section toggle: plus → × ---------- */
    /* kill the old ❯ glyph from style.css */
    .desk-header .navbar-collapse li.menu-item-has-children:before,
    .desk-header .navbar-collapse li.menu-item-has-children:hover:before,
    .desk-header .navbar-collapse li.menu-item-has-children:hover:after {
        content: none !important;
    }

    .desk-header .navbar-collapse li.menu-item-has-children > a:after {
        content: '';
        align-self: center;
        margin-left: auto;
        flex: 0 0 22px;
        width: 22px;
        height: 22px;
        background: var(--vw-ink);
        -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><path d='M11 4v14M4 11h14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>") center/contain no-repeat;
        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><path d='M11 4v14M4 11h14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>") center/contain no-repeat;
        transition: transform .3s cubic-bezier(.2, .7, .2, 1), background .2s ease;
    }

    .desk-header .navbar-collapse li.menu-item-has-children.current > a:after {
        transform: rotate(45deg);
        background: var(--vw-orange);
    }

    /* ---------- Flat pages (no children): ↗ ---------- */
    .desk-header .navbar-collapse .navbar-nav > li:not(.menu-item-has-children):not(.vw-mobile-phone):not(.vw-mobile-contact) > a:after {
        content: '';
        align-self: center;
        margin-left: auto;
        flex: 0 0 20px;
        width: 20px;
        height: 20px;
        background: var(--vw-ink);
        -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 17L17 7M9 7h8v8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 17L17 7M9 7h8v8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
        transition: background .2s ease;
    }

    .desk-header .navbar-collapse .navbar-nav > li:not(.menu-item-has-children) > a:hover:after {
        background: var(--vw-orange);
    }

    /* ---------- Sub-menu (revealed accordion items) ---------- */
    .desk-header .navbar-collapse ul.sub-menu {
        position: static;
        width: 100%;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        margin: 0;
        padding: 2px 0 12px 36px !important;
        list-style: none;
    }

    .desk-header .navbar-collapse ul.sub-menu li {
        padding: 0 !important;
        border: 0 !important;
    }

    .desk-header .navbar-collapse ul.sub-menu a,
    .desk-header .navbar-collapse ul.sub-menu .nav-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 8px 0 !important;
        margin: 0 !important;
        font-family: 'Saans-Medium', 'SaansTRIAL-Medium', sans-serif !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        line-height: 1.3;
        letter-spacing: -.01em;
        color: var(--vw-ink2) !important;
        text-decoration: none;
        transition: color .15s ease, padding-left .15s ease;
    }

    .desk-header .navbar-collapse ul.sub-menu a:after {
        content: '';
        flex: 0 0 15px;
        width: 15px;
        height: 15px;
        background: var(--vw-orange);
        opacity: .7;
        -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 17L17 7M9 7h8v8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 17L17 7M9 7h8v8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
    }

    .desk-header .navbar-collapse ul.sub-menu li.current-menu-item a,
    .desk-header .navbar-collapse ul.sub-menu a:hover {
        color: var(--vw-orange) !important;
        padding-left: 6px !important;
    }

    /* ==========================================================
       "Let's talk" connect card — Contact CTA + tap-to-call,
       unified into one dark module with the emblem in the corner.
       (.vw-mobile-contact = top half, .vw-mobile-phone = bottom half)
       ========================================================== */
    .desk-header .navbar-collapse .vw-mobile-contact,
    .desk-header .navbar-collapse .vw-mobile-phone {
        position: relative;
        border-bottom: 0 !important;
        background: var(--vw-ink);
        overflow: hidden;
    }

    /* ----- top half: eyebrow + Contact us ----- */
    .desk-header .navbar-collapse .vw-mobile-contact {
        margin: auto 0 0;
        padding: 15px 18px 13px !important;
        border-radius: 16px 16px 0 0;
    }

    .desk-header .navbar-collapse .vw-mobile-contact:before {
        content: "Let's talk";
        display: block;
        margin-bottom: 7px;
        font-family: ui-monospace, 'SF Mono', Menlo, monospace;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--vw-orange);
    }

    /* emblem woven into the card's top-right corner */
    .desk-header .navbar-collapse .vw-mobile-contact:after {
        content: '';
        position: absolute;
        right: -30px;
        top: -26px;
        width: 132px;
        height: 132px;
        background: url("/wp-content/uploads/2024/09/virtuworks-orange-emblem.png") center/contain no-repeat;
        opacity: .13;
        transform: rotate(8deg);
        pointer-events: none;
    }

    .desk-header .navbar-collapse .navbar-nav > li.vw-mobile-contact > a {
        position: relative;
        z-index: 1;
        display: inline-flex !important;
        align-items: center;
        gap: 9px;
        padding: 0 !important;
        font-family: 'Saans-Medium', 'SaansTRIAL-Medium', sans-serif;
        font-size: clamp(24px, 6.6vw, 27px);
        font-weight: 500;
        line-height: 1;
        letter-spacing: -.03em;
        color: #fff !important;
        text-decoration: none;
        transition: gap .2s ease;
    }

    .desk-header .navbar-collapse .vw-mobile-contact > a:active {
        gap: 13px;
    }

    .desk-header .navbar-collapse .vw-mobile-contact > a:before {
        content: none;
    }

    .desk-header .navbar-collapse .vw-mobile-contact > a:after {
        content: '';
        flex: 0 0 21px;
        width: 21px;
        height: 21px;
        background: var(--vw-orange);
        -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 17L17 7M9 7h8v8' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 17L17 7M9 7h8v8' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
    }

    /* ----- bottom half: tap-to-call row ----- */
    .desk-header .navbar-collapse .vw-mobile-phone {
        margin: 0;
        padding: 4px 18px 10px !important;
        border-radius: 0 0 16px 16px;
        box-shadow: 0 12px 28px rgba(36, 29, 30, .14);
    }

    /* hairline divider between the two halves */
    .desk-header .navbar-collapse .vw-mobile-phone:before {
        content: '';
        position: absolute;
        left: 18px;
        right: 18px;
        top: 0;
        height: 1px;
        background: rgba(255, 255, 255, .12);
    }

    .desk-header .navbar-collapse .navbar-nav > li.vw-mobile-phone > a {
        position: relative;
        z-index: 1;
        display: flex !important;
        align-items: center;
        gap: 11px;
        padding: 8px 0 !important;
        color: #fff !important;
        text-decoration: none;
        font-family: 'Saans-Medium', 'SaansTRIAL-Medium', sans-serif;
        font-size: 18px;
        font-weight: 500;
        letter-spacing: -.01em;
    }

    /* orange disc with a white phone glyph */
    .desk-header .navbar-collapse .vw-mobile-phone > a:before {
        content: '';
        flex: 0 0 34px;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        -webkit-mask: none;
        mask: none;
        background:
            var(--vw-orange)
            url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M6.62 10.79a15.53 15.53 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24 11.36 11.36 0 0 0 3.57.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1.02l-2.2 2.2z'/></svg>")
            center / 16px no-repeat;
    }

    /* ---------- Top bar: default (orange) logo + bare ✕ ---------- */
    /* Pin the logo + close to the viewport so they never scroll away with
       the page (they live in the normal-flow navbar, not inside the fixed
       overlay). z-index keeps them above the paper cover strip. */
    body.menu-open .desk-header .navbar-brand {
        position: fixed;
        top: 34px;
        left: 31px;
        z-index: 1001;
    }

    body.menu-open .desk-header .navbar-toggler {
        position: fixed;
        top: 39px;
        right: 31px;
        z-index: 1001;
    }

    /* offset for the WordPress admin bar when logged in (32px desktop / 46px mobile) */
    body.admin-bar.menu-open .desk-header .navbar-brand {
        top: 66px;
    }

    body.admin-bar.menu-open .desk-header .navbar-toggler {
        top: 71px;
    }

    @media screen and (max-width: 782px) {
        body.admin-bar.menu-open .desk-header .navbar-brand {
            top: 80px;
        }

        body.admin-bar.menu-open .desk-header .navbar-toggler {
            top: 85px;
        }
    }

    /* close: just the cross — no circle, no background, no hover fill */
    .menu-open .desk-header .navbar-toggler {
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .menu-open .desk-header .navbar-toggler-icon {
        background: none !important;
        filter: none !important;
        position: relative;
        width: 22px !important;
        height: 22px !important;
    }

    .menu-open .desk-header .navbar-toggler-icon:before,
    .menu-open .desk-header .navbar-toggler-icon:after {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        width: 21px;
        height: 2px;
        background: #241D1E;
        border-radius: 2px;
    }

    .menu-open .desk-header .navbar-toggler-icon:before {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .menu-open .desk-header .navbar-toggler-icon:after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    /* ---------- Respect reduced-motion ---------- */
    @media (prefers-reduced-motion: reduce) {
        .desk-header .navbar-collapse,
        .desk-header .navbar-collapse li.menu-item-has-children > a:after {
            transition: none;
        }
    }
}