/* ============================================================
 * Macrition critical fixes layer
 * ============================================================
 * Load-bearing fixes that must win over the balanced cascade.
 * Loaded LAST. Keep this file MINIMAL - every rule here must have
 * a documented reason to exist.
 * ============================================================ */

/* --- 1. Mobile hamburger nav fix (extracted from ui-gradients) ---
   The.container has display:flex and height:56px, which clips the
   absolutely-positioned nav dropdown. Without this, the mobile menu
   is unusable. */
@media (max-width: 980px) {
  .main-nav {
    position: absolute !important;
    top: 100% !important;
    /* bottom MUST be reset: design-system.css <=980px ships a full-screen
       sheet variant (position:fixed; top:60px; bottom:0). With this layer's
       position:absolute + top:100% + height:auto, a surviving bottom:0 makes
       the spec resolve height from the containing block (top - bottom = 0),
       collapsing the open menu to a 25px padding-only sliver. */
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    height: auto !important;
    max-height: calc(100vh - 60px) !important;
    overflow-y: auto !important;
    z-index: 1000 !important;
    background: var(--surface, #FFFFFF) !important;
    border-bottom: 1px solid var(--border, rgba(15,23,42,0.08)) !important;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.12) !important;
    padding: 12px 0 !important;
  }

  .main-nav.open {
    display: flex !important;
    flex-direction: column !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }
}

/* --- 2. Hero floating badge fix (the "two bars" bug) ---
   natural-depth.css ships an over-broad attribute selector:
     [class*="hero"] { position: relative; overflow: hidden; }
   which matches EVERY class containing "hero" - including
.hero-mini-card and.hero-card-stack. That forces the floating
   goal/streak badges into normal flow (full-width bars) and clips
   them at the stack edges. This bug exists in too - this fix
   makes the badges behave as designed: small absolute badges. */
.hero-card-stack {
  overflow: visible;
}

.hero-card-stack .hero-mini-card {
  position: absolute;
  overflow: visible;
  width: max-content;
  max-width: 260px;
  z-index: 2;
  white-space: nowrap;
}

/* --- 3. Hero ambient wash containment ---
   The same [class*="hero"] rule sets overflow:hidden on
.hero-visual and.hero-grid, which is harmless for them, but the
::before ambient glow in natural-depth expects its section
   context - restate the intended stacking for hero children. */
section.hero > *,
.hero-section > * {
  position: relative;
  z-index: 1;
}