/* MilSpecWellness — Mobile-First Base + Utilities
   Loaded after tokens.css. Provides: skip-link, scroll-snap helpers,
   sticky bottom CTA, body-lock, picture-frame, and small mobile primitives.

   This file does NOT replace styles.css — it adds the mobile-first
   primitives and components that the legacy stylesheet never had. */


/* ============================================================
   ROOT FIXES — applied site-wide
   ============================================================ */

/* Block horizontal scroll on every page (a single overflow somewhere
   should never let the whole page bleed sideways). */
html, body { overflow-x: hidden; }

/* Honor iOS safe areas so content never sits under the notch / gesture bar. */
body {
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}

/* Smooth scroll on capable devices only — iOS jank-free that way. */
@media (prefers-reduced-motion: no-preference) and (pointer: fine) {
  html { scroll-behavior: smooth; }
}
@media (pointer: coarse) {
  html { scroll-behavior: auto; }
}

/* Tap highlight: sage tint instead of system blue flash. */
a, button, [role="button"], summary {
  -webkit-tap-highlight-color: rgba(74, 94, 56, 0.18);
}

/* When body has .is-locked, scrolling is disabled (used by drawer / modal).
   We deliberately do NOT use position:fixed here — that trick breaks link
   taps inside the drawer on iOS Safari because the body's positioning
   context changes mid-click. Plain overflow:hidden on html+body stops the
   underlying page from scrolling and leaves taps untouched. */
html.is-locked,
body.is-locked {
  overflow: hidden;
}


/* ============================================================
   SKIP LINK — keyboard / switch users
   ============================================================ */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 9999;
  padding: 0.75rem 1rem;
  background: var(--ms-dark);
  color: var(--ms-white);
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--ms-sage-mid);
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus {
  top: 0;
  outline: none;
  text-decoration: none;
}


/* ============================================================
   SCROLL-SNAP RAIL — used by stat strip, testimonials,
   stack rail on phones. Cards snap one-at-a-time.
   ============================================================ */
.snap-rail {
  display: flex;
  gap: var(--s-3);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--content-pad);
  -webkit-overflow-scrolling: touch;
  /* Padding so first/last cards don't kiss the edge. */
  padding: var(--s-2) var(--content-pad) var(--s-5);
  /* Hide scrollbar visually; keep accessibility. */
  scrollbar-width: none;
}
.snap-rail::-webkit-scrollbar { display: none; }
.snap-rail > * {
  flex: 0 0 86%;
  max-width: 360px;
  scroll-snap-align: start;
}

/* Tablet+: snap rails become regular grids unless explicitly kept as rail. */
@media (min-width: 768px) {
  .snap-rail:not(.always-rail) {
    overflow: visible;
    scroll-snap-type: none;
    padding: 0;
  }
  .snap-rail:not(.always-rail) > * {
    flex: 1 1 0;
    max-width: none;
  }
}


/* ============================================================
   STICKY BOTTOM CTA BAR (mobile only)
   Conversion belt-and-suspenders for marketing pages.
   Auto-hides when an in-page primary CTA is visible (set by JS).
   ============================================================ */
.bottom-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-bottom-cta);
  display: flex;
  align-items: center;
  gap: var(--s-3);

  padding: var(--s-3) var(--content-pad);
  padding-bottom: calc(var(--s-3) + var(--safe-bottom));

  background: rgba(46,56,40,0.96);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(184,201,160,0.22);

  transform: translateY(100%);
  transition: transform var(--dur-base) var(--ease-out);
  pointer-events: none;
}
.bottom-cta.is-visible {
  transform: translateY(0);
  pointer-events: auto;
}

.bottom-cta-text {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ms-sage-mid);
  line-height: 1.3;
  /* Truncate gracefully on narrow phones. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bottom-cta-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.2rem;
  min-height: var(--tap-comfy);

  background: var(--ms-sage-mid);
  color: var(--ms-dark);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--ms-sage-mid);
  transition: background var(--dur-fast) var(--ease-out);
}
.bottom-cta-btn::after { content: "→"; font-size: 1rem; }
.bottom-cta-btn:hover,
.bottom-cta-btn:focus-visible {
  background: var(--ms-white);
  color: var(--ms-dark);
  text-decoration: none;
  outline: none;
}

/* Hide entirely on tablet+ (in-page CTAs are visible enough). */
@media (min-width: 768px) {
  .bottom-cta { display: none; }
}

/* When bottom CTA is mounted, push the footer up so its last row clears.
   Pages that include a bottom CTA add .has-bottom-cta to <body>. */
body.has-bottom-cta { padding-bottom: var(--bottom-cta-h); }
@media (min-width: 768px) {
  body.has-bottom-cta { padding-bottom: 0; }
}


/* ============================================================
   PICTURE FRAME — wraps a responsive <picture> with aspect lock.
   Use .frame--4x5 (mobile portrait), .frame--16x9, etc.
   ============================================================ */
.frame { position: relative; overflow: hidden; }
.frame > img,
.frame > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.frame--16x9 { aspect-ratio: 16 / 9; }
.frame--4x5  { aspect-ratio: 4 / 5; }
.frame--1x1  { aspect-ratio: 1 / 1; }
.frame--3x2  { aspect-ratio: 3 / 2; }


/* ============================================================
   FOCUS — visible on every interactive element, mobile-friendly
   (3px so it's catch-able with switch-control, sage-mid for brand).
   ============================================================ */
:focus-visible {
  outline: 3px solid var(--ms-sage-mid);
  outline-offset: 2px;
}
.no-focus-ring:focus-visible { outline: none; }


/* ============================================================
   UTILITIES
   ============================================================ */
.u-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.u-no-wrap { white-space: nowrap; }
.u-flex-grow { flex: 1 1 auto; }


/* ============================================================
   ACCORDION (footer + FAQs on mobile)
   Uses native <details>/<summary> — zero JS, gold accessibility.
   ============================================================ */
.acc {
  border-bottom: 1px solid rgba(184,201,160,0.18);
}
.acc > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4) 0;
  min-height: var(--tap-comfy);
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--type-small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: inherit;
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.25rem;
  color: var(--ms-sage-mid);
  transition: transform var(--dur-fast) var(--ease-out);
}
.acc[open] > summary::after { content: "−"; }
.acc-body { padding: 0 0 var(--s-4); }


/* ============================================================
   MOTION SAFETY
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}