/* ============================================================
   HAYTHIVE - Mobile Optimization Layer
   Loaded LAST so it refines the base + feature + app layers for
   touch devices. ~95% of traffic is mobile browsers, so this file
   tunes positioning, tap ergonomics, and viewport behavior while
   keeping the full desktop design, animations, and scroll effects.
   ============================================================ */

/* ── GLOBAL RENDERING / TOUCH NICETIES (all viewports) ─────── */
html {
  /* Stop iOS from auto-inflating font sizes on orientation change */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Safety net: never allow accidental sideways scroll on phones.
     Real fixes live in the feature files; this guards future edits. */
  overflow-x: hidden;
}
body {
  /* Remove the grey flash when tapping links/buttons on mobile */
  -webkit-tap-highlight-color: transparent;
}

/* The fixed pill navbar overlaps content: offset anchor targets so a
   section heading is never hidden underneath it after a smooth-scroll
   jump (applies to both hash links and JS scrollIntoView). */
section[id] { scroll-margin-top: 96px; }
#hero { scroll-margin-top: 0; }

/* Media/canvas never force horizontal overflow on narrow screens */
img, video, canvas, svg { max-width: 100%; }

/* ── TOUCH-POINTER ERGONOMICS (no hover, coarse pointer) ────── */
@media (hover: none) and (pointer: coarse) {
  /* Comfortable ≥44px tap targets (Apple/Material guidance) */
  .btn { min-height: 44px; }
  .hamburger { padding: 10px; }
  .theme-toggle { padding: 11px; }
  .mob-group-trigger { min-height: 44px; }
  .mob-group-panel a { min-height: 40px; display: flex; align-items: center; }
  .hiw-ctrl { min-height: 44px; }
  .contact-link { min-height: 44px; }

  /* Hover-only lift transforms never "stick" on tap: neutralize the
     translate so a tapped card/button doesn't stay raised. */
  .btn-primary:hover,
  .btn-outline:hover { transform: none; }
}

/* ── PHONE / SMALL TABLET LAYOUT (≤ 900px) ─────────────────── */
@media (max-width: 900px) {

  /* Use the *small* viewport height unit so the mobile address bar
     appearing/disappearing doesn't crop the hero or jump the layout.
     Falls back to the 100vh declared in hero.css on older browsers. */
  #hero { min-height: 100svh; }

  /* Desktop's 8rem/5rem vertical padding is baked for a tall viewport.
     #hero vertically centers this box (align-items:center), so on a
     short mobile screen the oversized box overflows and the top
     (the "Pre-Seed" badge) gets cropped above the fold. Shrink it so
     the whole stack fits and centers properly. */
  .hero-inner { padding-top: 6.5rem; padding-bottom: 2.5rem; }

  /* Scroll cue is a desktop-only affordance; drop it on mobile to save space */
  .scroll-indicator { display: none; }

  /* Nudge the logo text down a touch so it never crowds the icon */
  .nav-logo-text { font-size: 1.25rem; }

  /* ── Full-screen mobile menu: make it TOP-ALIGNED and SCROLLABLE ──
     The default centered layout clips content on short screens once a
     group is expanded (menu + CTA taller than the viewport). */
  .mobile-nav {
    justify-content: flex-start;
    align-items: stretch;
    gap: 1.5rem;
    padding: calc(env(safe-area-inset-top, 0px) + 6rem) 2rem
             calc(env(safe-area-inset-bottom, 0px) + 3rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    text-align: center;
  }
  /* Direct links (Solutions, Contact): large but not oversized */
  .mobile-nav > a:not(.btn) { font-size: 1.6rem; }
  /* The CTA reads as a real button, not a 2rem headline */
  .mobile-nav > a.btn {
    font-size: 0.95rem;
    align-self: center;
    margin-top: 0.5rem;
  }
}

/* ── SMALL PHONES (≤ 600px) ────────────────────────────────── */
@media (max-width: 600px) {

  /* Keep hero CTAs side by side (matches desktop) — shrink padding/font
     so both fit on one line instead of wrapping at narrow widths */
  .hero-btns {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    width: auto;
    gap: 0.5rem;
  }
  .hero-btns .btn {
    flex: none;
    width: auto;
    padding: 0.55rem 0.9rem;
    font-size: 0.68rem;
    white-space: nowrap;
    justify-content: center;
  }

  /* Base clamp() bottoms out at 1rem on narrow screens — too big
     against the 3-line wrap this copy takes on small phones. Also
     balance the wrap so it reads as 3 even lines instead of one long
     line crowding the right edge followed by two short ones. */
  .hero-sub { font-size: 0.85rem; line-height: 1.6; text-wrap: balance; }

  /* Base clamp() bottoms out at 2.4rem, crowding "Smart Drone
     Security," against the right edge on narrow phones. Keep it big
     (client wants the title as the dominant element) but trim just
     enough to fit 3 lines cleanly. Shrinking the Pre-Seed badge below
     (not the title) is what keeps the hero-inner box short enough
     that #hero's vertical centering doesn't crop it off-screen. */
  .hero-title { font-size: 2.4rem; margin-bottom: 1rem; }

  /* Client wants this de-emphasized relative to the (bigger) title:
     smaller pill, tighter text, less breathing room below it. */
  .hero-badge {
    font-size: 0.65rem;
    padding: 0.3rem 0.9rem;
    margin-bottom: 1rem;
  }

  /* Keep the hero tagline from wrapping awkwardly */
  .hero-tagline { flex-wrap: wrap; gap: 0.75rem 1rem; font-size: 0.75rem; margin-top: 2rem; }

  /* Interactive "How It Works" controls wrap instead of overflowing */
  .hiw-cycle-ctrls { flex-wrap: wrap; }

  /* Tighter section rhythm already set in app.css (4rem); keep the
     interactive box breathing room reasonable on tiny screens */
  .hiw-details-pane { padding: 2.5rem 1.5rem; }
}

/* ── VERY SHORT / LANDSCAPE PHONES ─────────────────────────── */
@media (max-height: 520px) and (max-width: 900px) {
  /* On landscape phones the scroll cue would overlap hero copy */
  .scroll-indicator { display: none; }
  .mobile-nav { padding-top: calc(env(safe-area-inset-top, 0px) + 3.5rem); }
}