/* ═══════════════════════════════════════════════════════════
   MOBILE CRAFT ENHANCEMENTS — D2F
   Drop this in AFTER styles.css so these overrides win.
   Add to your HTML:
     <link rel="stylesheet" href="styles.css"/>
     <link rel="stylesheet" href="mobile-craft.css"/>
   Also update viewport meta to:
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta name="theme-color" content="#0e0e0e"/>
   ═══════════════════════════════════════════════════════════ */

/* Global touch polish — no gray flash on tap */
* { -webkit-tap-highlight-color: transparent; }

/* Reserve safe-area space so the site doesn't draw under the notch/home indicator */
body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Make every interactive thing feel tappable — removes iOS 300ms delay + adds press feedback */
button, a, .btn, .nav-link, .slider-btn, .slider-dot,
.tier-row, .size-btn, .cd-unit {
  touch-action: manipulation;
}

/* Active press feedback — touch only, not desktop clicks */
@media (hover: none) {
  button:active, a.btn:active, .tier-row:active,
  .slider-btn:active, .slider-dot:active {
    transform: scale(0.97);
    transition: transform 100ms ease;
  }
}

/* Scroll-reveal — mobile only so desktop nav stacking context is unaffected */
@media (max-width: 768px) {
  .mc-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 600ms cubic-bezier(0.2,0.7,0.2,1),
                transform 600ms cubic-bezier(0.2,0.7,0.2,1);
  }
  .mc-reveal.mc-in { opacity: 1; transform: translateY(0); }
}
/* Desktop: reveal class is a no-op — sections are always visible */
@media (min-width: 769px) {
  .mc-reveal { opacity: 1 !important; transform: none !important; }
}

/* Respect reduced-motion — firm rule, not a preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .mc-reveal { opacity: 1; transform: none; }
  #confetti-canvas { display: none !important; }
  .ticker-track, .footer-dtf-ticker { animation: none !important; }
}

/* ─── MOBILE LAYOUT (≤768px) ─────────────────────────────── */
@media (max-width: 768px) {

  /* Nav: proper breathing room from top edge (safe-area + 8px extra),
     hamburger replaces horizontal link row, CTAs stay visible */
  .site-nav {
    padding-top: calc(env(safe-area-inset-top) + 8px) !important;
    padding-bottom: 8px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    height: auto;
    min-height: calc(60px + env(safe-area-inset-top) + 8px);
    gap: 8px;
  }
  .nav-logo { font-size: 16px; flex: 0 0 auto; }

  /* Hide the original inline link row on mobile — hamburger drawer replaces it */
  .site-nav > .nav-links { display: none; }

  /* Hamburger button — injected by JS */
  .mc-hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.14);
    color: #fff;
    cursor: pointer;
    flex: 0 0 auto;
    margin-left: 4px;
  }
  .mc-hamburger svg { width: 20px; height: 20px; }

  /* CTA buttons in nav — keep Sponsorship visible, hide Donate
     (Donate is in the drawer AND in the sticky bottom CTA, so it's well-covered) */
  .site-nav > div[style*="display:flex"] { gap: 6px !important; }
  .site-nav > div[style*="display:flex"] .btn[href="donate.html"] { display: none !important; }
  .site-nav > div[style*="display:flex"] .btn {
    padding: 10px 18px !important;
    font-size: 12px !important;
    min-height: 40px;
  }

  /* Push body content below the new, taller nav (incl. safe-area) */
  body { padding-top: calc(76px + env(safe-area-inset-top)); }

  /* Countdown: readable on small screens */
  .countdown-bar { padding: 10px 12px; gap: 8px; flex-wrap: wrap; justify-content: center; }
  .cd-unit { min-height: 44px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; padding: 2px 8px; }

  /* Hero: tighten min-height on mobile so CTA is above the fold */
  .hero { min-height: 92vh; padding-left: 20px; padding-right: 20px; }

  /* Buttons: full-width on mobile when stacked, big touch targets */
  .btn { min-height: 48px; padding: 14px 24px; font-size: 15px; }
  .btn-primary.lg { min-height: 56px; padding: 18px 32px; font-size: 17px; }
  .btn-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .btn-row .btn { width: 100%; }

  /* Section vertical rhythm — generous padding between sections.
     Phones reward more breathing room, not less. */
  .section {
    padding-top: 88px !important;
    padding-bottom: 88px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .section.tight {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  .section[style*="padding-top:0"] { padding-top: 0 !important; }

  /* Inline-styled desktop paddings — override them */
  [style*="padding:0 60px"] { padding: 0 20px !important; }
  [style*="gap:80px"] { gap: 40px !important; }

  /* Video iframes — don't block touches, keep contained */
  .hero-video-bg iframe,
  .bento-main iframe { pointer-events: none; }

  /* Ellie's carousel — convert JS-driven to native scroll-snap.
     Override the transform animation, let the user swipe. */
  .ellie-slider-wrap { overflow: visible; }
  .ellie-slider {
    transform: none !important;
    transition: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 20px !important;
    gap: 12px;
  }
  .ellie-slider::-webkit-scrollbar { display: none; }
  .ellie-slide {
    scroll-snap-align: start;
    flex: 0 0 82%;
  }
  /* Hide prev/next buttons on touch — swipe is better */
  .slider-btn { display: none; }

  /* Event slider (shop/other pages) — same treatment */
  .event-slider-wrap { overflow: visible; }
  .event-slider {
    transform: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 20px !important;
  }
  .event-slider::-webkit-scrollbar { display: none; }
  .event-slide { scroll-snap-align: start; }

  /* Ticker: slow it down on mobile so it's readable */
  .ticker-track { animation-duration: 35s; }

  /* Stat cards: make the big number actually big, no squish */
  .stat-card { padding: 24px 20px; }
  .counter.xl { font-size: clamp(52px, 14vw, 80px); }

  /* Tier rows: bigger touch target, clearer tap affordance */
  .tier-row {
    min-height: 72px;
    padding: 18px 20px;
    align-items: center;
  }
  .tier-amount { font-size: 22px; }

  /* Donation blade footer text */
  .blade-footer { font-size: 12px; padding: 20px 20px 0; text-align: center; }

  /* Images: force never-overflow */
  img { max-width: 100%; height: auto; }

  /* ─── FOOTER: centered, stacked bottom ─── */
  .site-footer { text-align: center; padding-bottom: env(safe-area-inset-bottom); }
  .footer-inner {
    padding: 56px 24px 40px !important;
    gap: 40px !important;
    text-align: center;
  }
  .footer-inner > div { display: flex; flex-direction: column; align-items: center; }
  .footer-brand-name { text-align: center; }
  .footer-desc { text-align: center; max-width: 280px; }
  .footer-inner .btn-row { justify-content: center; align-items: center; }
  .footer-col { align-items: center; }
  .footer-col h4 { text-align: center; }
  .footer-link { text-align: center; width: 100%; }

  /* Copyright + Privacy — stack vertically, centered */
  .footer-bottom {
    flex-direction: column;
    gap: 10px;
    padding: 20px 20px calc(20px + env(safe-area-inset-bottom)) !important;
    text-align: center;
  }
  .footer-bottom .footer-copy { text-align: center; }

  /* Thermometer centered */
  .footer-thermo-wrap { text-align: center; padding-left: 20px; padding-right: 20px; }
  .thermo-amounts { justify-content: center; }
}


  /* Shop shirt image — constrain on mobile */
  .grid-2 img[src*="DTF_Shirt_2026"],
  [style*="width:200%"] img,
  img[src*="DTF_Shirt_2026"] {
    width: 100% !important;
    max-width: 100% !important;
  }
  [style*="width:200%"] {
    width: 100% !important;
  }

  /* Location text — center on mobile */
  .loc-name,
  .loc-label,
  .hero-location { text-align: center !important; align-items: center !important; }

  /* Sponsor section header — stack button below headline */
  .flex.justify-between.items-end {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }


  /* Hide the old static nav-hamburger — mobile-craft.js injects its own */
  .nav-hamburger { display: none !important; }
  
  /* Ensure the CTA button group in nav shows correctly on mobile */
  .site-nav > div[style*="display:flex"] {
    display: flex !important;
  }

/* ─── HAMBURGER DRAWER (mobile only) ────────────────────── */
@media (max-width: 768px) {
  .mc-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms ease;
    z-index: 200;
  }
  .mc-drawer-backdrop.mc-open {
    opacity: 1;
    pointer-events: auto;
  }

  .mc-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(84%, 340px);
    background: var(--surface-container-low);
    z-index: 201;
    transform: translateX(100%);
    transition: transform 280ms cubic-bezier(0.2,0.7,0.2,1);
    display: flex;
    flex-direction: column;
    padding-top: calc(env(safe-area-inset-top) + 16px);
    padding-bottom: env(safe-area-inset-bottom);
    border-left: 1px solid var(--ghost-border);
  }
  .mc-drawer.mc-open { transform: translateX(0); }

  .mc-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px 20px;
    border-bottom: 1px solid var(--ghost-border);
  }
  .mc-drawer-brand {
    font-family: var(--ff-headline);
    font-size: 16px;
    font-weight: 900;
    color: var(--primary-container);
    letter-spacing: -0.02em;
  }
  .mc-drawer-close {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.12);
    color: #fff;
    padding: 0;
  }
  .mc-drawer-close svg { width: 18px; height: 18px; }

  .mc-drawer-links {
    display: flex;
    flex-direction: column;
    padding: 20px 0;
    flex: 1;
  }
  .mc-drawer-link {
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 12px 24px;
    font-family: var(--ff-headline);
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: rgba(255,255,255,0.82);
    border-bottom: 1px solid rgba(255,255,255,0.04);
  }
  .mc-drawer-link.mc-active {
    color: var(--primary);
    background: rgba(227,118,174,0.06);
  }

  .mc-drawer-ctas {
    padding: 20px 24px calc(20px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid var(--ghost-border);
  }
  .mc-drawer-ctas .btn {
    width: 100%;
    min-height: 52px;
    justify-content: center;
  }
}

/* ─── STICKY BOTTOM CTA (mobile only) ────────────────────── */
@media (max-width: 768px) {
  .mc-sticky-cta {
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    z-index: 90;
    background: rgba(14,14,14,0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(227,118,174,0.18);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    display: flex;
    gap: 10px;
    transform: translateY(100%);
    transition: transform 300ms cubic-bezier(0.2,0.7,0.2,1);
  }
  .mc-sticky-cta.mc-visible { transform: translateY(0); }
  .mc-sticky-cta .btn {
    flex: 1;
    margin: 0;
    min-height: 52px;
    font-size: 15px;
    padding: 14px 20px;
  }
  .mc-sticky-cta .mc-sticky-primary {
    background: var(--primary-container);
    color: var(--on-primary-container);
  }
  .mc-sticky-cta .mc-sticky-secondary {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.22);
    flex: 0 0 auto;
    padding: 14px 18px;
  }
  /* Leave room at the page bottom so content isn't hidden behind the sticky bar */
  body { padding-bottom: 88px; }
}

/* Hover effects that shouldn't stick on touch devices */
@media (hover: none) {
  .event-slide:hover img,
  .ellie-slide:hover img,
  .stat-card:hover,
  .tier-row:hover { transform: none; filter: none; }
}

/* ─── DESKTOP GUARD — hide all mobile-only elements ─────── */
@media (min-width: 769px) {
  /* Force nav links + CTAs visible on desktop */
  .site-nav > .nav-links { display: flex !important; }
  .site-nav > div[style*="display:flex"] { display: flex !important; }

  /* Kill every mobile-only nav/drawer/CTA element */
  .mc-hamburger,
  .nav-hamburger,
  .mc-drawer,
  .mc-drawer-backdrop,
  .mc-sticky-cta,
  .nav-drawer,
  .nav-overlay { display: none !important; }

  /* Reset any mobile body padding */
  body { padding-top: 0 !important; padding-bottom: 0 !important; }

  /* Sticky nav sits cleanly above everything */
  .site-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    isolation: isolate;
  }
}