/* ================================================================
   SUNQUELL — Mobile Enhancements
   Linked from every page's <head> after the inline <style> block,
   so these rules override where needed.

   ALL rules in this file are wrapped in @media queries that only
   fire below 768px (tablet portrait) or 480px (small phone).
   Desktop rendering is 100% unaffected.

   Rules cover:
     1. iOS input auto-zoom fix (16px minimum on form fields)
     2. Tap target sizing (Apple HIG / Material Design ≥44px)
     3. Container side padding (32px feels cramped on phones)
     4. Form input min-height + padding for easy tap-ability
     5. Default image responsiveness (defensive)
     6. Reduced-motion accessibility (any screen size)
     7. Focus visibility for keyboard navigation
     8. Safe-area insets for iPhones with notch/home bar
   ================================================================ */


/* ─────────── 1. iOS input zoom prevention ───────────
   Safari auto-zooms when a form field has font-size <16px and is tapped.
   Forcing 16px on mobile keeps the page from jumping. */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="url"],
  input[type="search"],
  input[type="password"],
  input[type="date"],
  input[type="time"],
  textarea,
  select {
    font-size: 16px !important;
  }
}


/* ─────────── 2. Tap target minimum 44px ───────────
   Tightens up rows where the link/button area is too small to hit reliably. */
@media (max-width: 768px) {
  /* Buttons */
  .btn,
  button[type="submit"],
  input[type="submit"],
  input[type="button"] {
    min-height: 48px;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  /* Footer links — typically tighter than nav */
  footer a {
    display: inline-block;
    padding: 8px 0;
    min-height: 36px;
  }

  /* Phone / quote links inside nav */
  .nav-phone,
  .hero-call,
  a[href^="tel:"] {
    padding: 10px 4px;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}


/* ─────────── 3. Container side padding ───────────
   Default container is padding: 0 32px — too much on a 360px screen. */
@media (max-width: 540px) {
  .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media (max-width: 380px) {
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}


/* ─────────── 4. Form fields — better tap targets ───────────
   Bumps height and padding so fields are comfortable on mobile. */
@media (max-width: 768px) {
  .form-group input,
  .form-group select,
  .form-group textarea,
  form input,
  form select,
  form textarea {
    min-height: 48px;
    padding: 12px 14px;
  }

  .form-group textarea,
  form textarea {
    min-height: 96px;
    padding-top: 12px;
  }

  /* Stack form-row on phones — common pattern on referral.html, contact.html */
  .form-row {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .form-row > .form-group {
    margin-bottom: 14px;
  }
}


/* ─────────── 5. Default image responsiveness ───────────
   Defensive backup — every img stays inside its container. */
@media (max-width: 768px) {
  img {
    max-width: 100%;
    height: auto;
  }
}


/* ─────────── 6. Reduced motion accessibility ───────────
   Respects users who set OS-level reduce-motion preference (vestibular disorders etc.).
   Applies to all screens, doesn't change visual appearance when no animation is in flight. */
@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;
  }
}


/* ─────────── 7. Focus visibility for keyboard nav ───────────
   Only shows the outline when a user is actually keyboard-navigating
   (Tab key) — mouse/touch focus doesn't trigger it. Pure a11y win. */
*:focus-visible {
  outline: 2px solid #F06D29;
  outline-offset: 2px;
  border-radius: 2px;
}


/* ─────────── 8. Safe-area insets for notched iPhones ───────────
   Pads body so content doesn't get clipped by the home indicator. */
@media (max-width: 768px) {
  body {
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
}


/* ─────────── 9. Hero/headline legibility on very small phones ───────────
   The smallest iPhone width is 320px. Clamping ensures headlines don't
   overflow their container or get awkwardly clipped. */
@media (max-width: 380px) {
  .hero-headline,
  .page-hero h1,
  h1 {
    word-break: break-word;
    hyphens: auto;
  }
}


/* ─────────── 10. Sticky bottom CTA bar (optional, opt-in) ───────────
   Only renders if the page includes:
     <div class="mobile-sticky-cta">
       <a href="tel:2892073456" class="cta-call">Call</a>
       <a href="contact.html" class="cta-quote">Get a Quote</a>
     </div>
   When present, it floats a Call + Quote CTA at the bottom of mobile screens
   so users always have a 1-tap conversion path without scrolling. */
.mobile-sticky-cta { display: none; }

@media (max-width: 768px) {
  .mobile-sticky-cta {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 999;
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0));
    background: rgba(0, 0, 0, 0.95);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
  .mobile-sticky-cta a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 6px;
    transition: opacity 0.15s;
  }
  .mobile-sticky-cta a:active { opacity: 0.7; }
  .mobile-sticky-cta .cta-call {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
  }
  .mobile-sticky-cta .cta-quote {
    background: #F06D29;
    color: #000;
  }
  /* When sticky CTA exists, push body content up so nothing is hidden */
  body:has(.mobile-sticky-cta) {
    padding-bottom: 80px;
  }
}
