/* ============================================================================
   mobile.css — additive mobile/responsive layer for Contract Cost Care
   ----------------------------------------------------------------------------
   Loaded LAST, after every page stylesheet. It contains ONLY @media
   (max-width) rules, so the desktop layout in styles-v17.css and the per-page
   stylesheets is never changed — these rules only take effect on small screens.

   Canonical breakpoints (per CLAUDE.md): 900 / 640 / 400.
   Scope: shared header/nav, footer, container, and small gap-fixes found in the
   mobile audit (2026-07-22). Grids already stack and the site has no content
   overflow, so this stays intentionally small.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. Header must never cause horizontal scroll on phones
   The bar CTA ("Request a free evaluation") is redundant on small screens — the
   same action lives in the open mobile menu — and at narrow widths it pushed the
   hamburger past the right edge, creating a ~21px horizontal scroll. Hide the
   bar CTA on phones; the hamburger + menu remain the entry point.
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .navcta { display: none; }
}

/* ---------------------------------------------------------------------------
   2. Comfortable container padding on phones (CLAUDE.md: ~20px @640, ~16px @400)
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .wrap { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 400px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
}

/* ---------------------------------------------------------------------------
   3. Language toggle: 44x44 tap target on phones (was 32px tall)
   Only the in-menu (.mobile-lang) toggle is visible on phones.
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .mobile-lang { gap: 8px; }
  .mobile-lang .lang-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ---------------------------------------------------------------------------
   4. Safety: any wide data table scrolls inside its own box, never the page
   (The case-study table is scaled and fits at 375px; this guards 320px.)
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .hw-case-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* The case-study section is rendered at zoom:.85; sub-pixel scaling can spill
     a few px at ~320px. Clip the scaled section so it never scrolls the page.
     (Content fits; only the rounding spill is clipped.) */
  .hw-case { overflow-x: hidden; }
  .hw-case-note { overflow-wrap: anywhere; }
}