/* ==========================================================================
   Mobile Overflow Prevention & Navigation Fixes
   Critical fixes to prevent horizontal scrolling and duplicate nav issues
   ========================================================================== */

/* ==========================================================================
   Navigation Visibility Control
   NOTE: Neo-nav/footer visibility is now controlled by JavaScript in app.js
   via the setMainContentClass() function. CSS :has() rules removed to prevent
   race conditions and !important conflicts with inline styles.
   ========================================================================== */

/* Ensure editorial nav stays on top and is properly positioned */
.ed-nav {
  z-index: 1000 !important;
}

/* Hide neo-nav CTA when neo-nav itself is hidden (controlled by JS) */
#neo-nav[style*="display: none"] .neo-nav-cta {
  display: none !important;
}

/* Prevent any element from exceeding viewport width */
* {
  min-width: 0;
}

/* Ensure all sections respect viewport width
   NOTE: Removed overflow-x: hidden from containers to prevent nested scroll contexts.
   Only html should be the scroll container. Use overflow: visible to let content
   flow naturally while respecting max-width constraints. */
section,
main,
header,
footer,
div[class*="section"],
div[class*="container"],
div[class*="hero"],
#page-content,
#app,
.app {
  max-width: 100%;
  box-sizing: border-box;
  /* Do NOT set overflow here - creates nested scroll contexts */
}

/* Ensure body and html don't allow horizontal scroll
   html is the scroll container, body should not create its own scroll context */
html {
  overflow-x: hidden;
  /* html is the main vertical scroll container - do not set overflow-y here,
     it inherits from reset.css which handles scrollbar-gutter */
}

body {
  overflow-x: hidden;
  overflow-y: visible; /* Let html be the scroll container */
  width: 100%;
  max-width: 100%;
}

/* Mobile-specific fixes */
@media (max-width: 768px) {
  /* Force all containers to respect mobile viewport
     NOTE: Removed overflow-x: hidden to prevent nested scroll contexts */
  .container,
  [class*="-container"],
  [class*="-content"],
  [class*="-wrapper"] {
    max-width: 100% !important;
    box-sizing: border-box;
    /* Do NOT set overflow here - creates nested scroll contexts */
  }

  /* Prevent grid blowouts */
  [class*="grid"],
  [class*="-grid"] {
    max-width: 100%;
    /* Do NOT set overflow here - creates nested scroll contexts */
  }

  /* ==========================================================================
     BUG-011 FIX: Footer text truncation on mobile
     Force footer grid to single column layout to prevent text truncation
     ========================================================================== */
  .neo-footer-grid {
    grid-template-columns: 1fr !important;
    gap: var(--neo-space-8) !important;
  }

  .neo-footer-column {
    width: 100%;
  }

  .neo-footer-bottom {
    flex-direction: column !important;
    gap: var(--neo-space-4) !important;
    text-align: center;
  }

  .neo-footer {
    padding: var(--neo-space-12) var(--neo-space-4);
  }

  /* Ensure images don't cause overflow */
  img,
  picture,
  video,
  canvas,
  svg {
    max-width: 100%;
    height: auto;
  }

  /* Fix for fixed/absolute positioned elements */
  [style*="position: fixed"],
  [style*="position: absolute"],
  .fixed,
  .absolute {
    max-width: 100%;
  }
}