/* ============================================================
   Grovera Farms — /css/responsive.css
   UNIVERSAL RESPONSIVE LAYER
   Works defensively across every viewport from 280px (foldable
   cover screens) to 4K / ultrawide. Never overrides specific
   layouts — only fixes overflow, touch, media, tables, words,
   safe-area insets, and landscape-phone edge cases.
   ============================================================ */

/* -------- 1. ROOT: prevent iOS auto-zoom on orientation change */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 80px; /* so in-page anchors clear sticky nav */
}

/* -------- 2. NO HORIZONTAL SCROLL EVER */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}
body {
  min-width: 320px; /* smallest common viewport */
}

/* -------- 3. BOX-SIZING (in case any page forgot) */
*, *::before, *::after { box-sizing: border-box; }

/* -------- 4. FLUID MEDIA (images, video, iframe, svg, picture) */
img, video, picture, canvas, svg {
  max-width: 100%;
  height: auto;
}
iframe, embed, object {
  max-width: 100%;
}
/* Maps & YouTube iframes: wrap in .embed-responsive, or use aspect-ratio */
iframe[src*="google.com/maps"],
iframe[src*="youtube.com"],
iframe[src*="youtu.be"],
iframe[src*="vimeo.com"] {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

/* -------- 5. LONG-WORD / LONG-URL / LONG-EMAIL SAFETY */
body {
  word-wrap: break-word;
  overflow-wrap: break-word;
}
pre, code, kbd, samp {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}
a[href], .email, .phone {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* -------- 6. TABLES — make every <table> scrollable horizontally on narrow screens
   Two strategies: (a) if author wraps table in .table-wrap, use that.
   (b) if not, fall back to a scrollable display:block shim. */
.table-wrap, .table-scroll, .responsive-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  margin: 1rem 0;
}
@media (max-width: 720px) {
  /* Shim any raw <table> not already scroll-wrapped */
  table:not(.no-scroll-shim) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    white-space: normal;
  }
  table:not(.no-scroll-shim) thead,
  table:not(.no-scroll-shim) tbody,
  table:not(.no-scroll-shim) tfoot {
    display: table-row-group;
  }
}
table { border-collapse: collapse; }

/* -------- 7. TOUCH TARGETS — minimum 44x44 per WCAG 2.5.5 on coarse pointers */
@media (pointer: coarse) {
  button,
  [role="button"],
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  select,
  .btn, .btn-blue, .btn-green, .btn-wa, .btn-outline,
  .nav-links a,
  .filter-btn,
  .pcard a {
    min-height: 44px;
  }
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  textarea {
    min-height: 44px;
    font-size: max(16px, 1rem); /* iOS won't zoom if >=16px */
  }
}

/* -------- 8. SAFE-AREA INSETS (notched/rounded devices) */
@supports (padding: env(safe-area-inset-left)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  nav[role="navigation"],
  #nav,
  header,
  footer {
    padding-left: max(env(safe-area-inset-left), 1rem);
    padding-right: max(env(safe-area-inset-right), 1rem);
  }
}

/* -------- 9. FLUID TYPOGRAPHY GUARDRAILS
   Only caps runaway sizes; does not override specific clamps() already in place. */
h1 { font-size: clamp(1.75rem, 4.2vw + 0.5rem, 3.6rem); line-height: 1.15; }
h2 { font-size: clamp(1.4rem, 3vw + 0.4rem, 2.6rem); line-height: 1.2; }
h3 { font-size: clamp(1.15rem, 2vw + 0.4rem, 1.8rem); line-height: 1.3; }
h4 { font-size: clamp(1.05rem, 1.2vw + 0.4rem, 1.35rem); line-height: 1.35; }

/* -------- 10. CONTAINER CAPS — very-wide displays should not stretch lines to unreadable */
@media (min-width: 1920px) {
  .container, main, section > .wrap, section > .inner {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* -------- 11. ULTRA-NARROW (foldable cover screens, old feature phones) */
@media (max-width: 360px) {
  section { padding-left: 16px !important; padding-right: 16px !important; }
  h1 { font-size: clamp(1.5rem, 6vw, 2rem); }
  h2 { font-size: clamp(1.25rem, 5vw, 1.75rem); }
  .hero-stats { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .hero-ctas { flex-direction: column; width: 100%; }
  .hero-ctas > * { width: 100%; justify-content: center; }
}

/* -------- 12. FOLDABLE COVER SCREENS / Galaxy Fold etc. */
@media (max-width: 280px) {
  body { font-size: 14px; }
  .hero-title, h1 { font-size: 1.4rem !important; line-height: 1.2 !important; }
  .nav-logo img { height: 36px !important; }
  section { padding: 36px 12px !important; }
}

/* -------- 13. LANDSCAPE PHONE (hero must not hog the viewport) */
@media (orientation: landscape) and (max-height: 500px) {
  .hero, [class*="hero"] {
    min-height: auto !important;
    padding-top: 80px !important;
    padding-bottom: 40px !important;
  }
  .hero-stats {
    display: none !important; /* keep hero lean in landscape */
  }
}

/* -------- 14. TABLET SWEET-SPOT (768–1024) grid gentle */
@media (min-width: 768px) and (max-width: 1024px) {
  .why-grid,
  .produce-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* -------- 15. FORMS — full-width inputs on mobile */
@media (max-width: 600px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="url"],
  input[type="search"],
  textarea,
  select {
    width: 100%;
    max-width: 100%;
  }
  form .row,
  form fieldset {
    display: block;
  }
}

/* -------- 16. STICKY NAV — account for ios notch + rubber-band */
@media (max-width: 900px) {
  #nav,
  nav.site-nav {
    top: env(safe-area-inset-top, 0);
  }
}

/* -------- 17. PREVENT OFFSCREEN MODALS / DROPDOWNS */
.dropdown, .menu, .modal, [role="dialog"] {
  max-width: 100vw;
}
.modal-content, [role="dialog"] > * {
  max-width: min(560px, calc(100vw - 32px));
  margin-left: auto;
  margin-right: auto;
}

/* -------- 18. DARK-MODE AWARENESS (cosmetic; does not flip brand) */
@media (prefers-color-scheme: dark) {
  html { color-scheme: light dark; }
  /* Brand stays light-mode by design. This just tells browsers to render form
     widgets and scrollbars comfortably on OS-level dark mode. */
}

/* -------- 19. HIGH-CONTRAST / FORCED COLORS */
@media (forced-colors: active) {
  button, .btn, .btn-blue, .btn-green, .btn-wa, .btn-outline {
    border: 1px solid CanvasText;
  }
  img, picture, video { forced-color-adjust: none; }
}

/* -------- 20. PRINT */
@media print {
  html, body { overflow: visible !important; }
  #nav, nav, .marquee, .newsletter, footer, .no-print, #polish-cursor {
    display: none !important;
  }
  a[href]:after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
  a[href^="#"]:after, a[href^="javascript:"]:after { content: ""; }
  img, table, pre, blockquote { page-break-inside: avoid; }
  h1, h2, h3 { page-break-after: avoid; }
  body { font-size: 11pt; color: #000; background: #fff; }
}

/* -------- 21. REDUCED DATA (users on data-saver mode) */
@media (prefers-reduced-data: reduce) {
  video[autoplay], iframe[src*="youtube"] { display: none; }
}

/* -------- 22. SCROLLBAR POLISH (subtle, non-intrusive) */
@media (pointer: fine) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: #cfc9b9; border-radius: 10px; }
  ::-webkit-scrollbar-thumb:hover { background: #a89f87; }
  ::-webkit-scrollbar-track { background: transparent; }
}

/* -------- 23. FIX for <pre> / <code> blocks on mobile */
pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.75em 1em;
  font-size: 0.85em;
}

/* -------- 24. PREVENT FORM AUTO-ZOOM ON iOS */
@media (max-width: 768px) {
  input, select, textarea { font-size: 16px !important; }
}

/* -------- 25. WHATSAPP / STICKY FLOATING BUTTON — keep above iOS home indicator */
.whatsapp-float,
.sticky-cta,
[class*="wa-float"] {
  bottom: max(20px, env(safe-area-inset-bottom, 20px)) !important;
}