/**
 * Mobile Scroll Fix
 * Fixes scroll blocking issues caused by mobile nav, overflow-x:clip, and pointer-events
 * 2026-01-31
 */

/* CRITICAL: Ensure scroll works when nav is closed */
body:not(.nav-open, .menu-open) {
  overflow: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important; /* Prevent horizontal scroll but allow vertical */
  pointer-events: auto !important;
}

/* Ensure main content is scrollable when nav is closed.
   IMPORTANT: overflow-x must be explicit here. When overflow-y is set to
   anything other than `visible`, CSS implicitly promotes overflow-x to `auto`,
   creating a horizontal scroll container that bypasses body's overflow-x:hidden. */
body:not(.nav-open) .ts-main-content {
  overflow-y: auto;
  overflow-x: hidden; /* prevent implicit overflow-x:auto */
  pointer-events: auto;
  position: relative;
}

/* Nav drawer should not block interaction when closed */
.ts-drawer[aria-hidden='true'],
#ts-mobile-nav[aria-hidden='true'],
#mobile-nav-drawer[aria-hidden='true'] {
  pointer-events: none !important;
  touch-action: none !important;
}

/* Nav overlay should not block interaction when nav is closed */
.nav-overlay:not(.is-open),
.ts-drawer__overlay[aria-hidden='true'] {
  pointer-events: none !important;
  visibility: hidden;
  opacity: 0%;
}

/* Ensure overlay allows interaction only when visible */
.nav-overlay.is-open,
.ts-drawer__overlay:not([aria-hidden='true']) {
  pointer-events: auto;
  visibility: visible;
  opacity: 100%;
}

/* Fix: Prevent body scroll lock unless nav is actually open */
body.nav-open,
body.menu-open {
  overflow: hidden !important;
  height: 100vh;
  height: 100dvh;
}

/* Mobile: Fix bottom nav from blocking scroll */
@media (max-width: 768px) {
  /* Ensure bottom nav doesn't block scroll interaction */
  .app-bottom-nav,
  .mobile-bottom-nav,
  .bottom-nav {
    pointer-events: auto; /* Allow interaction with nav items */
    touch-action: manipulation; /* Allow proper touch handling */
  }

  /* Ensure bottom nav links/buttons are clickable */
  .app-bottom-nav__link,
  .mobile-bottom-nav__link,
  .bottom-nav__link {
    pointer-events: auto;
  }

  /* Main content should be scrollable and above bottom nav z-index */
  .ts-main-content,
  .app-main,
  .app-content {
    overflow-y: auto;
    overflow-x: hidden;
    pointer-events: auto;
    position: relative;
    z-index: 1; /* Below bottom nav but scrollable */
  }

  /* Prevent scroll lock on body unless nav drawer is open */
  body:not(.nav-open, .menu-open) {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    position: static !important;
    height: auto !important;
  }

  /* Fix: Don't let fixed elements block scroll */
  .ts-header,
  .app-header,
  header[role='banner'] {
    pointer-events: auto;
    z-index: 10;
  }

  /* Mobile nav hamburger should be above everything */
  .ts-nav-toggle,
  #mobile-menu-toggle,
  .app-header__menu {
    pointer-events: auto !important;
    z-index: 1001;
  }

  /* Bottom nav should be high z-index but not block scroll */
  .app-bottom-nav,
  .mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
  }
}

/* Desktop: Prevent nav-open from affecting scroll */
@media (min-width: 769px) {
  body.nav-open {
    overflow: auto !important;
    height: auto !important;
  }

  /* Mobile nav elements should have pointer-events:none on desktop */
  .ts-drawer[aria-hidden='true'],
  #ts-mobile-nav[aria-hidden='true'],
  .mobile-nav-drawer[aria-hidden='true'] {
    pointer-events: none !important;
  }
}

/* Emergency scroll restore (failsafe) */
body[data-scroll-blocked='false'] {
  overflow-y: auto !important;
  pointer-events: auto !important;
}

/* Accessibility: Ensure focusable elements are always interactive */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  pointer-events: auto !important;
}

/* Fix: A11y toolbar should not block scroll when closed */
.a11y-toolbar:not([aria-expanded='true']),
.a11y-toolbar__panel[hidden] {
  pointer-events: none !important;
  visibility: hidden;
}

.a11y-toolbar[aria-expanded='true'],
.a11y-toolbar__panel:not([hidden]) {
  pointer-events: auto;
  visibility: visible;
}

/* Ensure all interactive elements in bottom nav are accessible */
.app-bottom-nav *,
.mobile-bottom-nav *,
.bottom-nav * {
  pointer-events: auto;
}