/* =============================================================================
 * SGEN — Mobile menu drawer (v1, ported from mobile-menu-handoff 2026-05-11)
 *
 * Drill-down sliding-panel drawer. Visible at ≤992px (per DESIGN.md §7k).
 * Uses tenant site-level CSS custom properties directly (no intermediate
 * --sg-* token layer). The mobile menu adapts to each tenant's brand colours
 * and typography automatically. Fallbacks are the SGEN brand-red defaults
 * for tenants that haven't defined the upstream tokens.
 *
 * Tenant tokens consumed (with fallbacks):
 *   --color-primary       (#d51522)     hamburger fill, card accents
 *   --color-primary_hover (#e61938)     gradient companion / tap-hover
 *   --color-primary-rgb   (213, 21, 34) rgba tints (glows, soft fills)
 *   --color-body          (#fff)        drawer + card surface
 *   --color-text          (#1a1a1a)     body text colour
 *   --body-font-family    (Inter)       drawer + card typography
 *   --body-font-size      (18px)        card name size
 *   --button-radius       (12px)        hamburger + close + back buttons
 *
 * See: assets/front/js/sgen-mobile-menu.js (state machine)
 *      DESIGN.md §7k                       (pattern spec)
 *      Mobile-menu-handoff/MOBILE-MENU-HANDOFF.md (origin)
 *
 * All animation is class-driven (no :hover / :active on hamburger/close/back)
 * — JS plays the tap-sequence so touch users see the same theater desktop
 * hover gives.
 * ============================================================================= */


/* =============================================================================
 * Hamburger trigger
 * ============================================================================= */
.mm-hamburger {
    position: relative;
    display: none; /* hidden by default; ≤992px media query reveals it */
    width: 42px;
    height: 42px;
    border: 0;
    padding: 0;
    background: linear-gradient(90deg,
        var(--color-primary, #d51522) 0%,
        var(--color-primary_hover, #e61938) 100%);
    border-radius: var(--button-radius, 12px);
    cursor: pointer;
    box-shadow:
        0 10px 24px rgba(var(--color-primary-rgb, 213, 21, 34), 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(0, 0, 0, 0.22);
    transition:
        transform 0.24s cubic-bezier(.34, 1.56, .64, 1),
        box-shadow 0.24s ease;
    flex-shrink: 0;
    overflow: hidden;
    animation: mm-burger-breathe 3.6s ease-in-out infinite;
    /* Above tenant-page chrome but below the admin topbar (z-index 1000006)
     * so admin links stay clickable when both are visible. */
    z-index: 1000;
}
@keyframes mm-burger-breathe {
    0%, 100% {
        box-shadow:
            0 8px 18px rgba(var(--color-primary-rgb, 213, 21, 34), 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.22),
            inset 0 -1px 0 rgba(0, 0, 0, 0.22);
    }
    50% {
        box-shadow:
            0 12px 30px rgba(var(--color-primary-rgb, 213, 21, 34), 0.55),
            inset 0 1px 0 rgba(255, 255, 255, 0.28),
            inset 0 -1px 0 rgba(0, 0, 0, 0.22);
    }
}
/* Shine-sweep — one-shot animation triggered by .is-tap-hover. Not bound to
 * :hover so mobile doesn't fire half-animations on stray pointer events. */
.mm-hamburger::after {
    content: "";
    position: absolute;
    top: 0; left: -120%;
    width: 70%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0) 20%,
        rgba(255, 255, 255, 0.45) 50%,
        rgba(255, 255, 255, 0) 80%,
        transparent 100%
    );
    transform: skewX(-22deg);
    pointer-events: none;
    z-index: 1;
}
.mm-hamburger.is-tap-hover::after {
    animation: mm-shine-sweep 0.45s cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes mm-shine-sweep {
    from { left: -120%; }
    to   { left: 160%; }
}
.mm-hamburger.is-tap-hover {
    transform: translateY(-2px) scale(1.04);
    animation-play-state: paused;
    box-shadow:
        0 14px 34px rgba(var(--color-primary-rgb, 213, 21, 34), 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        inset 0 -1px 0 rgba(0, 0, 0, 0.22);
}
.mm-hamburger.is-tap-press { transform: translateY(0) scale(0.92); }
.mm-hamburger:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.7);
    outline-offset: 2px;
}
.mm-hamburger.is-open { animation: none; }

/* Note on the admin front-topbar (application/views/Front/_partials/admin-front-bubble.php):
 * it's `position:fixed; top:0; height:36px` at z-index 1000006, but renders with
 * `opacity:0; pointer-events:none` until JS adds .is-visible (hover/active state).
 * We deliberately DO NOT offset the hamburger to clear it — pushing it down 48px
 * created a visible gap below the header even when the topbar was invisible. The
 * trade-off: when an admin hovers the bubble to reveal the topbar, it'll briefly
 * cover the hamburger. The drawer (z-index 1000010) always covers everything. */
.mm-hamburger .bar {
    position: absolute;
    left: 50%; top: 50%;
    height: 2.5px;
    background: #fff;
    border-radius: 2px;
    transform-origin: center;
    transition:
        transform 0.42s cubic-bezier(.68, -0.4, .27, 1.45),
        opacity 0.22s ease,
        width 0.34s cubic-bezier(.34, 1.56, .64, 1);
    z-index: 2;
}
.mm-hamburger .bar:nth-child(1) { width: 19px; transform: translate(-50%, calc(-50% - 6px)); transition-delay: 0.04s; }
.mm-hamburger .bar:nth-child(2) { width: 14px; transform: translate(-50%, -50%);              transition-delay: 0s;    }
.mm-hamburger .bar:nth-child(3) { width: 11px; transform: translate(-50%, calc(-50% + 6px)); transition-delay: 0.1s;  }
.mm-hamburger.is-tap-hover .bar:nth-child(2),
.mm-hamburger.is-tap-hover .bar:nth-child(3) { width: 19px; }
.mm-hamburger.is-open .bar:nth-child(1) { width: 19px; transform: translate(-50%, -50%) rotate(45deg);  transition-delay: 0.06s; }
.mm-hamburger.is-open .bar:nth-child(2) { opacity: 0; transform: translate(-50%, -50%) scaleX(0);       transition-delay: 0s;    }
.mm-hamburger.is-open .bar:nth-child(3) { width: 19px; transform: translate(-50%, -50%) rotate(-45deg); transition-delay: 0.14s; }

/* =============================================================================
 * Drawer host + overlay (production: fixed, not absolute-in-phone-frame)
 * ============================================================================= */
.mm-host {
    position: fixed;
    inset: 0;
    /* Above the admin front-topbar (z-index 1000006) so the open drawer covers
     * the entire viewport — including any admin chrome — for a clean fullscreen
     * mobile experience. The topbar reappears when the drawer is closed. */
    z-index: 1000010;
    pointer-events: none;
    display: none;       /* hidden at desktop; ≤992px media query reveals it */
}
.mm-host.is-open { pointer-events: auto; }
.mm-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    transition: opacity 0.32s cubic-bezier(.2, .8, .2, 1);
    cursor: pointer;
}
.mm-host.is-open .mm-overlay { opacity: 1; }

.mm-host .mm-drawer {
    position: absolute;
    top: 0; bottom: 0; right: 0;
    width: 100%;
    max-width: 100vw;
    z-index: 1;
    transform: translate3d(100%, 0, 0);
    transition: transform 0.36s cubic-bezier(.2, .8, .2, 1);
    will-change: transform;
    background: var(--color-body, #ffffff);
    overflow: hidden;
}
.mm-host.is-open .mm-drawer { transform: translate3d(0, 0, 0); }

/* On larger phones / small tablets, drawer becomes a side panel rather than
 * full-bleed. The page is dimmed by the overlay on the left. */
@media (min-width: 600px) and (max-width: 992px) {
    .mm-host .mm-drawer {
        width: 440px;
        border-left: 1px solid #e6e6e3;
    }
}

/* =============================================================================
 * Panels (drill-down stack)
 * ============================================================================= */
.mm-panel {
    position: absolute;
    inset: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    background: var(--color-body, #ffffff);
    transform: translate3d(100%, 0, 0);
    transition: transform 0.32s cubic-bezier(.2, .8, .2, 1);
    will-change: transform;
    font-family: var(--body-font-family, 'Inter'), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--color-text, #1a1a1a);
}
.mm-panel.is-active { transform: translate3d(0, 0, 0); }
.mm-panel.is-prev   { transform: translate3d(-100%, 0, 0); }

/* Panel header (sticky top) */
.mm-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 18px 14px;
    border-bottom: 1px solid #f0efec;
    background: var(--color-body, #ffffff);
    flex-shrink: 0;
    min-height: 64px;
}
.mm-head--root { padding: 5px 15px; }
.mm-head .mm-logo {
    max-height: 40px;
    width: auto;
    display: block;
}
.mm-head .mm-logo img { max-height: 40px; width: auto; display: block; }
.mm-head .mm-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--color-text, #1a1a1a);
    margin: 0;
    flex: 1;
    text-align: center;
}

/* Close + Back buttons — glassmorphic accent-tinted at rest, fill solid accent on tap. */
.mm-head .mm-back,
.mm-head .mm-close {
    border: 1px solid rgba(var(--color-primary-rgb, 213, 21, 34), 0.2);
    background: rgba(var(--color-primary-rgb, 213, 21, 34), 0.08);
    width: 42px; height: 42px;
    border-radius: var(--button-radius, 12px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-primary, #d51522);
    font-family: var(--body-font-family, 'Inter'), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    transition:
        background 0.28s ease,
        color 0.28s ease,
        transform 0.28s cubic-bezier(.34, 1.56, .64, 1),
        box-shadow 0.28s ease,
        border-color 0.28s ease;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        inset 0 -1px 0 rgba(var(--color-primary-rgb, 213, 21, 34), 0.1),
        0 1px 3px rgba(var(--color-primary-rgb, 213, 21, 34), 0.1);
}
.mm-head .mm-back::before,
.mm-head .mm-close::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(var(--color-primary-rgb, 213, 21, 34), 0.08) 0%, transparent 65%);
    pointer-events: none;
    transition: opacity 0.28s ease;
}
.mm-head .mm-back.is-tap-hover,
.mm-head .mm-close.is-tap-hover {
    background: linear-gradient(90deg,
        var(--color-primary, #d51522) 0%,
        var(--color-primary_hover, #e61938) 100%);
    color: #fff;
    border-color: transparent;
    transform: scale(1.06);
    box-shadow:
        0 10px 25px rgba(var(--color-primary-rgb, 213, 21, 34), 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}
.mm-head .mm-back.is-tap-hover::before,
.mm-head .mm-close.is-tap-hover::before { opacity: 0; }
.mm-head .mm-back.is-tap-press,
.mm-head .mm-close.is-tap-press { transform: scale(0.92); }
.mm-head .mm-close.is-tap-hover svg { transform: rotate(180deg); }
.mm-head .mm-back.is-tap-hover svg  { transform: translateX(-3px); }
.mm-head .mm-back {
    width: auto;
    padding: 0 16px;
    gap: 8px;
    border-radius: var(--button-radius, 12px);
}
.mm-head .mm-back svg,
.mm-head .mm-close svg {
    width: 18px; height: 18px;
    stroke: currentColor;
    stroke-width: 2.5;
    fill: none;
    transition: transform 0.36s cubic-bezier(.34, 1.56, .64, 1);
}

/* Panel body — scrollable flex column. CTA + foot live inside this region
 * (not as siblings of .mm-body) so they scroll along with cards when total
 * content exceeds the viewport height. A flex-grow spacer (.mm-body-spacer)
 * anchors CTA/foot to the panel bottom when there's room, and collapses to
 * zero when content overflows. This makes tall footer templates work without
 * being clipped by the drawer's overflow:hidden. */
.mm-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 0;
    display: flex;
    flex-direction: column;
}
/* The spacer: grows to fill empty space when content is short (pushing the
 * CTA + foot to the panel bottom); collapses to 0 when content overflows
 * (so everything scrolls naturally with no awkward gap above the foot). */
.mm-body-spacer {
    flex: 1 0 auto;
    min-height: 0;
}

/* =============================================================================
 * Nav card — modernised. Soft accent-tinted surface at rest, prominent
 * gradient icon container, refined hover (lift + icon-scale + arrow-slide)
 * and press (primary border + filled background). Lucide icons inside.
 * Every accent colour derives from --color-primary so cards adapt to the
 * tenant's brand.
 * ============================================================================= */
.mm-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 12px 8px;
}
.mm-card {
    display: flex;
    align-items: center;
    text-align: left;
    gap: 14px;
    padding: 12px 14px;
    width: 100%;
    background: rgba(var(--color-primary-rgb, 213, 21, 34), 0.025);
    border: 1px solid rgba(var(--color-primary-rgb, 213, 21, 34), 0.06);
    border-radius: 14px;
}
/* Cards without an icon (admin didn't set one) — use a slightly slimmer
 * left padding so the label sits closer to the edge. Keeps the icon-less
 * cards from looking like they have an empty space on the left. */
.mm-card.mm-card--no-icon {
    padding-left: 18px;
}

/* Custom drawer body. When a tenant sets `mobile_navbar_template` (shortcode HTML),
 * its resolved markup is rendered here inside the new drawer chrome (instead of
 * the auto-generated cards). Tenants get full control over the body — we just
 * provide breathing room and basic overflow handling. */
.mm-custom-content {
    padding: 16px;
}
.mm-custom-content img { max-width: 100%; height: auto; }
.mm-custom-content > *:first-child { margin-top: 0; }
.mm-custom-content > *:last-child  { margin-bottom: 0; }

/* Drawer foot. Anchored to the bottom of the root panel by the flex spacer
 * (.mm-body-spacer) when there's room; scrolls naturally with content when
 * the foot is tall. Sourced from the mobile_navbar.footer_template setting
 * — tenants use this for footer-menu links, social icons, copyright,
 * language switcher, etc. We provide a soft top border + breathing padding;
 * the rest is up to the template author. */
.mm-foot {
    /* flex-shrink: 0 was here when .mm-foot sat outside .mm-body; now it
     * lives inside the body's flex column and we want it to honour overflow,
     * not force the panel to clip when the template is tall. */
    padding: 16px 18px 22px;
    margin-top: 25px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 13px;
    color: var(--color-text, #1a1a1a);
}
.mm-foot > *:first-child { margin-top: 0; }
.mm-foot > *:last-child  { margin-bottom: 0; }
.mm-foot img { max-width: 100%; height: auto; }
.mm-foot a {
    color: var(--color-primary, #d51522);
    text-decoration: none;
}
.mm-foot a:hover {
    text-decoration: underline;
}

/* Mega menu panel content. When a Menus admin item is flagged is_mega_menu,
 * the drawer drills into a panel whose body is the raw mega_menu_template
 * HTML the admin authored (instead of a card list). The wrapper just gives
 * the HTML some breathing room + handles overflow on narrow viewports;
 * tenant-authored mega templates are responsible for their own internal
 * layout (column stacking on narrow widths, image sizing, etc.). */
.mm-mega-content {
    padding: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.mm-mega-content img { max-width: 100%; height: auto; }
.mm-mega-content > *:first-child { margin-top: 0; }
.mm-mega-content > *:last-child  { margin-bottom: 0; }
/* Mega menus often use desktop-grid wrappers. On a ≤440px panel we collapse
 * any multi-column rows to single column so content doesn't overflow. */
.mm-mega-content .row,
.mm-mega-content [class*="col-"] {
    display: block !important;
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    font-family: var(--body-font-family, 'Inter'), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
    color: var(--color-text, #1a1a1a);
    transition:
        background 0.25s cubic-bezier(.2, .8, .2, 1),
        border-color 0.25s cubic-bezier(.2, .8, .2, 1),
        transform 0.25s cubic-bezier(.2, .8, .2, 1),
        box-shadow 0.25s cubic-bezier(.2, .8, .2, 1);
}
.mm-card:hover {
    background: rgba(var(--color-primary-rgb, 213, 21, 34), 0.05);
    border-color: rgba(var(--color-primary-rgb, 213, 21, 34), 0.18);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px -10px rgba(var(--color-primary-rgb, 213, 21, 34), 0.2);
}
/* :active doubles as touch-press feedback (no real hover on touch). */
.mm-card:active {
    transform: scale(0.985);
    background: rgba(var(--color-primary-rgb, 213, 21, 34), 0.1);
    border-color: var(--color-primary, #d51522);
    box-shadow:
        0 0 0 1px var(--color-primary, #d51522),
        0 12px 28px -10px rgba(var(--color-primary-rgb, 213, 21, 34), 0.25);
}

/* Icon container — gradient primary fill with a soft coloured glow */
.mm-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg,
        var(--color-primary, #d51522) 0%,
        var(--color-primary_hover, #e61938) 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow:
        0 4px 12px rgba(var(--color-primary-rgb, 213, 21, 34), 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(0, 0, 0, 0.12);
    transition:
        transform 0.25s cubic-bezier(.34, 1.56, .64, 1),
        box-shadow 0.25s cubic-bezier(.2, .8, .2, 1);
}
.mm-card:hover .mm-card-icon {
    transform: scale(1.06) rotate(-2deg);
    box-shadow:
        0 8px 20px rgba(var(--color-primary-rgb, 213, 21, 34), 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}
.mm-card:active .mm-card-icon {
    transform: scale(0.96);
}
.mm-card-icon svg,
.mm-card-icon i {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Card text block */
.mm-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.mm-card-name {
    font-size: var(--body-font-size, 17px);
    font-weight: 600;
    color: var(--color-text, #1a1a1a);
    letter-spacing: -0.01em;
    line-height: 1.25;
}
.mm-card-sub {
    font-size: 13px;
    color: #868279;
    font-weight: 400;
    line-height: 1.35;
}

/* Trailing arrow — slides right on hover */
.mm-card-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary, #d51522);
    flex-shrink: 0;
    transition:
        transform 0.25s cubic-bezier(.2, .8, .2, 1),
        opacity 0.25s ease;
}
.mm-card:hover .mm-card-arrow {
    transform: translateX(4px);
    opacity: 1;
}
.mm-card-arrow svg,
.mm-card-arrow i {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 2.25;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* CTA strip (Tier 1 only — receives $header_ctas_html from the site) */
.mm-cta-wrap {
    /* Lives inside .mm-body's flex column; the spacer above it (.mm-body-spacer)
     * anchors this and the foot to the panel bottom on short content and
     * collapses on overflow so a tall foot scrolls cleanly. */
    padding: 14px 20px 22px;
}
.mm-cta-wrap > a,
.mm-cta-wrap > button,
.mm-cta-wrap .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 0 8px;
}
.mm-cta-wrap > a:last-child,
.mm-cta-wrap > button:last-child,
.mm-cta-wrap .btn:last-child { margin-bottom: 0; }
.mm-cta-wrap .sg-nav.sg-navbar-ctas {
    display: block;
}

/* =============================================================================
 * Breakpoint: drawer + hamburger active at ≤992px; hide existing desktop nav
 * in that range so the two systems don't visually clash.
 * ============================================================================= */
@media (max-width: 992px) {
    .mm-hamburger { display: inline-flex; align-items: center; justify-content: center; }
    .mm-host      { display: block; }

    /* Hide existing desktop nav wrapper between 768-992 (it was previously
     * visible because .sg-navbar-expand-md expands at min-width:768px). */
    header#masterhead .sg-navbar-wrapper,
    header#masterhead .navbar-wrapper { display: none !important; }
    /* Also hide the legacy mobile brand — the drawer's own header carries the logo */
    .mobile-navbar-brand { display: block; }
}
@media (min-width: 993px) {
    /* Safety nets — drawer never renders at desktop */
    .mm-hamburger,
    .mm-host { display: none !important; }
}