/* v13-mobile-final — 2026-05-11
 *
 * Comprehensive mobile fix pass addressing user-reported issues:
 *
 *   1. Overlapping bottom elements: spiraling badge vs crisis float vs sticky buy
 *   2. Theme toggle placement on mobile
 *   3. Shop filter controls sticky behind nav
 *   4. Touch targets for filter chips
 *   5. Content padding to clear fixed bottom bars
 *   6. Scroll behavior fixes
 *   7. Page-specific mobile polish
 *
 * ~3KB. Loaded last.
 */

/* ═══════════════════════════════════════════════════════════════════
   1. BOTTOM ELEMENT STACKING — prevent overlap on mobile
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  /* Hide the dr-crisis-float on pages that also have spiraling-badge-link
     or dr-spiraling-badge (they're the same concept — duplicated) */
  .spiraling-badge-link ~ .dr-crisis-float,
  .dr-spiraling-badge ~ .dr-crisis-float,
  body:has(.spiraling-badge-link) .dr-crisis-float,
  body:has(.dr-spiraling-badge) .dr-crisis-float {
    display: none !important;
  }

  /* If ONLY crisis-float exists (no spiraling badge), keep it but raise it
     above the sticky buy bar */
  .dr-crisis-float {
    bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Spiraling badge: hide on ALL mobile — it overlaps content on every page.
     The hamburger menu already links to /spiraling/. */
  .spiraling-badge-link,
  .dr-spiraling-badge {
    display: none !important;
  }

  /* When sticky buy bar is present, add bottom padding to content */
  .home-sticky-buy {
    height: auto;
    padding: 10px 16px !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .home-sticky-buy .home-sticky-buy-inner {
    gap: 10px;
  }
  .home-sticky-buy .home-sticky-buy-text span {
    font-size: 11px;
  }

  /* Ensure page content isn't hidden behind sticky bottom bar */
  body:has(.home-sticky-buy) {
    padding-bottom: 100px;
  }
  body:has(.home-sticky-buy) footer {
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
  }

  /* Pages without sticky buy: just clear the spiraling badge */
  body:not(:has(.home-sticky-buy)) {
    padding-bottom: 60px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   2. THEME TOGGLE — better placement on mobile
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  /* Nav inner: brand left, controls right */
  .dr-canon-nav .inner {
    justify-content: space-between !important;
  }

  /* Brand: stays left, takes available space */
  .dr-canon-nav .brand {
    order: 1 !important;
    flex: 1 !important;
  }

  /* Theme toggle: sits next to hamburger on the right */
  .dr-theme-toggle {
    order: 2 !important;
    margin-left: auto !important;
    margin-right: 8px !important;
    min-width: 40px;
    min-height: 40px;
    padding: 6px !important;
    font-size: 14px;
    opacity: 0.7;
    flex-shrink: 0;
  }

  /* Hamburger stays last */
  .nav-hamburger {
    order: 3 !important;
    flex-shrink: 0;
  }

  /* Desktop nav links: hidden on mobile (hamburger only) */
  .dr-canon-nav .links {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   3. SHOP PAGE — sticky controls below nav, not behind it
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .shop-controls {
    top: 73px !important; /* below sticky nav */
    padding: 10px 0 !important;
  }

  /* Filter chips: proper touch targets */
  .chip {
    min-height: 40px !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
  }

  /* Sort select: proper touch target */
  .sort-select {
    min-height: 40px !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
  }

  /* Search input: full width, proper size */
  .shop-search input {
    font-size: 16px !important; /* prevent iOS zoom on focus */
    padding: 12px 16px !important;
  }

  /* Shop hero: tighter on mobile */
  .shop-hero {
    padding: 32px 0 16px !important;
  }
  .shop-hero h1 {
    font-size: clamp(24px, 6vw, 36px) !important;
  }
  .shop-hero p {
    font-size: 14px !important;
  }

  /* Product cards: full bleed on mobile */
  .product-card {
    padding: 16px !important;
  }

  /* Filter row: allow horizontal scroll on very small screens */
  .filter-row {
    flex-wrap: wrap;
    gap: 6px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   4. SCROLL BEHAVIOR — prevent common mobile scroll issues
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  /* Prevent horizontal overflow globally */
  html {
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
  body {
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;
  }

  /* Prevent fixed elements from blocking scroll on iOS */
  .home-sticky-buy,
  .spiraling-badge-link,
  .dr-crisis-float {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  /* Smooth scrolling */
  html {
    scroll-behavior: smooth;
  }

  /* Reading progress bar: don't interfere with touch */
  .dr-reading-progress,
  .reading-progress {
    pointer-events: none;
    height: 2px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   5. PAGE-SPECIFIC MOBILE FIXES
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  /* Homepage: hero text sizing */
  .home-hero h1,
  .hero-headline {
    font-size: clamp(26px, 8vw, 40px) !important;
    line-height: 1.12 !important;
    padding-right: 16px;
  }

  /* Blog page: card grid single column */
  .blog-grid {
    grid-template-columns: 1fr !important;
  }

  /* Amazon page: comparison cards single column */
  .az-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* FAQ page: accordion padding */
  details summary {
    padding: 14px 16px !important;
    min-height: 48px;
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  details[open] > div,
  details[open] > p {
    padding: 0 16px 14px !important;
  }

  /* Support/pricing page: tier cards stack */
  .pricing-grid,
  .support-tiers {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Kits page: full width cards */
  .kit-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   6. NAV MOBILE PANEL — ensure it works and scrolls properly
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .nav-mobile-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 85vw);
    background: var(--cream, #faf7f2);
    z-index: 200;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 24px 20px;
    padding-top: calc(24px + env(safe-area-inset-top, 0px));
    transform: translateX(100%);
    transition: transform 0.25s ease;
    box-shadow: -4px 0 24px rgba(20,20,19,0.15);
  }
  .nav-mobile-panel.open,
  .nav-mobile-panel[data-open="true"] {
    transform: translateX(0);
  }
  [data-theme="dark"] .nav-mobile-panel {
    background: #1a1814;
    box-shadow: -4px 0 24px rgba(0,0,0,0.4);
  }

  /* Mobile panel overlay backdrop */
  .nav-mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20,20,19,0.5);
    z-index: 199;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .nav-mobile-overlay.active {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   7. EXTRA-SMALL SCREENS (≤380px — iPhone SE, small Android)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  /* Even tighter spacing */
  .shop-hero {
    padding: 24px 0 12px !important;
  }
  .shop-hero h1 {
    font-size: 22px !important;
  }

  /* Filter chips: slightly smaller but still touchable */
  .chip {
    min-height: 38px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
  }

  /* Spiraling badge: compact */
  .spiraling-badge-link {
    font-size: 11px !important;
    padding: 7px 10px !important;
  }

  /* Product cards */
  .product-card {
    padding: 14px !important;
  }
  .product-card .product-title {
    font-size: 15px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   8. DARK MODE MOBILE FIXES
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  [data-theme="dark"] .shop-controls {
    background: #1a1814 !important;
    border-bottom-color: #2e2a24 !important;
  }

  [data-theme="dark"] .home-sticky-buy {
    background: #1a1814 !important;
    border-top-color: #2e2a24 !important;
  }

  [data-theme="dark"] .dr-theme-toggle {
    opacity: 0.7;
  }
}