/* ==========================================================================
   JM Automated — adaptive helpers (loads WITH jms.css on every page)
   jms-adaptive.js sets: device-mobile|tablet|desktop|wide, layout-*, is-touch|is-pointer
   jms.css owns site chrome gutters/nav/hero — this file only fills gaps for
   pages that used to ship with custom CSS and no device classes.
   ========================================================================== */

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --page-gutter: clamp(1.25rem, 4vw, 2.5rem);
  --touch-min: 44px;
  --vh: 1vh; /* set by jms-adaptive.js */
}

/* Never let a page paint wider than the viewport */
html, body {
  max-width: 100%;
  overflow-x: clip;
}

/* Touch targets on compact (HIG 44pt) — additive to jms.css */
html.device-mobile.is-touch a.btn,
html.device-mobile.is-touch button:not(.nav-toggle),
html.device-mobile.is-touch input[type="submit"],
html.device-mobile.is-touch .nav a,
html.device-mobile.is-touch .navlinks a,
html.device-mobile.is-touch header .nav a {
  min-height: var(--touch-min);
}

/* Generic multi-column collapses for research/legal/custom pages */
html.device-mobile .grid,
html.device-mobile .grid-2,
html.device-mobile .grid-3,
html.device-mobile .grid-work,
html.device-mobile .plan-grid,
html.device-mobile .proof-row,
html.device-mobile .ref-articles,
html.device-mobile .pay-grid,
html.device-mobile .testimonial-grid,
html.device-mobile .video-tiles,
html.device-mobile .benefits {
  grid-template-columns: 1fr !important;
}

html.device-tablet .grid-3,
html.device-tablet .plan-grid,
html.device-tablet .testimonial-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Custom headers that aren't .nav from jms.css */
html.device-mobile header .wrap,
html.device-mobile header nav:not(.shell),
html.device-mobile .site nav {
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-start;
}

html.device-mobile .navlinks,
html.device-mobile header .nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  width: 100%;
}

/* Prose measure on large screens (privacy/terms/articles custom main) */
html.device-desktop main.prose,
html.device-wide main.prose {
  max-width: min(42rem, 100%);
  margin-inline: auto;
}

/* Dynamic viewport height helper (iOS URL bar) */
.min-vh-screen {
  min-height: calc(var(--vh, 1vh) * 100);
}

/* Article / legal type floor on phone */
html.device-mobile h1 {
  font-size: clamp(1.55rem, 6.5vw, 2.1rem);
  line-height: 1.15;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}