/* GiC Mobile Header Isolation V3 — scoped to the existing mobile drawer only.
   Make the menu a real panel and the backdrop a separate non-interactive-when-hidden layer.
   Never modify the lesson card, banner or review component styles. */
@media (max-width: 850px) {
  /* Keep the logo link and the hamburger as two compact click targets. */
  body > header > .container.nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-width: 0 !important;
    isolation: isolate;
  }
  body > header > .container.nav > a.brand.gic-header-brand {
    position: relative !important;
    z-index: 1 !important;
    flex: 0 1 auto !important;
    width: max-content !important;
    max-width: calc(100% - 64px) !important;
    min-width: 0 !important;
    pointer-events: auto !important;
  }
  body > header > .container.nav > a.brand.gic-header-brand::before,
  body > header > .container.nav > a.brand.gic-header-brand::after {
    pointer-events: none !important;
  }
  body > header > .container.nav > .actions {
    position: relative !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: max-content !important;
    z-index: 2 !important;
  }
  body > header > .container.nav button[data-mobile-menu] {
    display: grid !important;
    place-items: center !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: auto !important;
    touch-action: manipulation;
  }

  /* After JS moves these controls under BODY, they can no longer enlarge
     the header's hit-testing/stacking context or join the Home hero. */
  body > .mobile-menu-backdrop[data-mobile-menu-backdrop] {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    z-index: 2147482000 !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: rgba(8,42,38,.32) !important;
    opacity: 1 !important;
    transition: none !important;
    animation: none !important;
    pointer-events: auto !important;
  }
  body > .mobile-menu-backdrop[data-mobile-menu-backdrop][hidden] {
    display: none !important;
    pointer-events: none !important;
  }

  body > #mobileNav.mobile-menu:not([hidden]) {
    position: fixed !important;
    inset: 0 0 0 auto !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: min(85vw, 360px) !important;
    max-width: 360px !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 20px 18px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 2147482001 !important;
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    pointer-events: auto !important;
    border-radius: 24px 0 0 24px !important;
    background: #f8fcfa !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  body > #mobileNav.mobile-menu[hidden] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  /* Retire the earlier full-viewport pseudo-panel. */
  body > #mobileNav.mobile-menu::after {
    display: none !important;
    content: none !important;
    pointer-events: none !important;
  }
  body > #mobileNav.mobile-menu > * {
    width: 100% !important;
    margin-left: 0 !important;
    animation: none !important;
  }
  body > #mobileNav.mobile-menu .mobile-menu-links > a {
    opacity: 1 !important;
    animation: none !important;
  }
  /* Profile remains owned by the existing Home profile script. */
}