/* ============================================================
   MOBILE SAFETY LAYER — CANON 2026-06-17
   Loaded AFTER styles.css and any page-specific inline <style>.
   Forces mobile-first correctness on every page regardless of
   what's in inline overrides. Never override font/color/brand —
   only structural / overflow / wrapping guards.
   ============================================================ */

/* Universal box-sizing + horizontal-overflow lock */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* All media scales to container */
img,
video,
svg,
iframe,
embed,
object {
  max-width: 100%;
  height: auto;
}

/* Tables wrap horizontally on mobile instead of busting the viewport */
table {
  max-width: 100%;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Pre/code blocks scroll horizontally instead of overflowing */
pre,
code {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Long URLs / hashes wrap at character boundaries — but ONLY paragraphs and body copy.
   Headings, nav items, buttons, and brand text are EXCLUDED from word-break/hyphens
   because that breaks brand integrity (e.g. "PILOT" must never render as "PI-LOT"). */
p,
blockquote,
figcaption,
caption {
  overflow-wrap: break-word;
}

/* Page-level containers can never exceed viewport */
section,
main,
article,
header,
footer,
.container,
.wrap,
.wrap-narrow,
.page-container,
.content-container,
.section-container,
.form-container {
  max-width: 100%;
  box-sizing: border-box;
}

/* Cards / panels / grids never overflow */
.card,
.panel,
.box,
.stat-card,
.case-study,
.story-card,
.outcome-card,
.path-card,
.system-card,
[class$="-card"],
[class$="-box"],
[class$="-panel"],
[class$="-grid"] > *,
[class*="grid-"] > *,
[class$="-row"] > * {
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

/* Buttons can wrap on small mobile instead of bursting their box */
@media (max-width: 599px) {
  .btn,
  button,
  [class*="cta"],
  [class$="-btn"],
  .nav-cta,
  a.btn,
  a[class*="btn-"] {
    white-space: normal;
    max-width: 100%;
    overflow-wrap: break-word;
  }
}

/* Forms span full width on mobile */
@media (max-width: 599px) {
  form,
  .form,
  fieldset,
  .form-group,
  .form-row,
  .form-path,
  [class*="form-"],
  input,
  textarea,
  select {
    max-width: 100%;
    box-sizing: border-box;
  }
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="url"],
  input[type="search"],
  textarea,
  select {
    width: 100%;
  }
}

/* Heading typography stays readable on tiny phones (≤380px) */
@media (max-width: 380px) {
  h1 {
    font-size: clamp(24px, 7vw, 32px) !important;
    line-height: 1.15;
  }
  h2 {
    font-size: clamp(20px, 6vw, 28px) !important;
    line-height: 1.2;
  }
  h3 {
    font-size: clamp(18px, 5vw, 24px) !important;
    line-height: 1.25;
  }
}

/* Flex children never refuse to shrink (the #1 mobile overflow bug) */
.nav-links > li,
.flex > *,
[class*="flex-"] > *,
[class*="flex "] > * {
  min-width: 0;
}

/* Absolute-positioned dropdowns and drawers stay within viewport */
.dropdown-menu,
.nav-links.open,
[class*="drawer"],
[class*="dropdown"] {
  max-width: 100vw;
  box-sizing: border-box;
}

/* Mobile nav drawer MUST be dark navy with white text — prevents the "white-on-white"
   invisible drawer bug when a page overrides nav-links.open background to white. */
@media (max-width: 768px) {
  .nav-links.open {
    background: rgba(13, 27, 46, 0.98) !important;
  }
  .nav-links.open > li > a,
  .nav-links.open > li a:not(.nav-cta) {
    color: rgba(255, 255, 255, 0.92) !important;
  }
  .nav-links.open .nav-cta {
    color: var(--white, #fff) !important;
    background: var(--orange, #E8572A) !important;
  }

  /* CANON: on mobile, FLATTEN dropdowns — every sub-link is directly visible and tappable.
     No "tap to expand" UX. The group header (Pilot / Knowing / How It Works / Our Story)
     becomes a section label; the items beneath are direct nav links. */

  /* Group header (the previously-dropdown trigger anchor) — styled as a section label */
  .nav-links.open .nav-dropdown > a {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: var(--orange, #E8572A) !important;
    padding: 18px 6% 6px !important;
    pointer-events: none;             /* group header is not clickable on mobile */
    cursor: default;
    border-bottom: none !important;
  }

  /* Sub-menu items ALWAYS visible — never collapsed on mobile */
  .nav-links.open .nav-dropdown .dropdown-menu,
  .nav-links.open .nav-dropdown.mob-open .dropdown-menu {
    display: flex !important;
    flex-direction: column !important;
    position: static !important;
    background: transparent !important;
    border: none !important;
    border-left: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  .nav-links.open .nav-dropdown .dropdown-menu li a {
    display: block !important;
    padding: 10px 6% 10px 9% !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    color: rgba(255, 255, 255, 0.92) !important;
    text-decoration: none !important;
    text-transform: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  }
  .nav-links.open .nav-dropdown .dropdown-menu li:last-child a {
    border-bottom: none !important;
  }
}

/* Tab strips scroll horizontally rather than wrap or overflow */
.research-tabs,
.nav-tab-row,
[class*="-tabs"],
[role="tablist"] {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Sticky elements never wider than viewport */
[style*="position: sticky"],
[style*="position:sticky"] {
  max-width: 100%;
}

/* Inputs and selects honor safe areas on iPhone notches */
@supports (padding: max(0px)) {
  body {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
}

/* ============================================================
   AGGRESSIVE MOBILE OVERRIDES (≤599px)
   The defensive rules above prevent overflow. These positive rules
   FORCE correct mobile layout regardless of page-specific bad CSS.
   ============================================================ */

@media (max-width: 599px) {

  /* Section padding — every section gets safe lateral padding */
  section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Wrappers + containers honor the same safe gutters */
  .container,
  .wrap,
  .wrap-narrow,
  .form-container,
  .footer-container,
  .footer-content {
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: 100%;
  }

  /* Form section padding — was 44px 40px on many pages, busting iPhone width */
  .form-section,
  [class*="form-section"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* All forms span full width and center their content */
  form,
  .form,
  .form-path {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  /* Form grids collapse to single column on mobile */
  .form-grid,
  .form-row {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Two-column / three-column / four-column grids all collapse to one */
  .grid-2,
  .grid-3,
  .grid-4,
  [class*="-grid"]:not(.tier-grid):not(.metric-row):not(.dash-metrics) {
    grid-template-columns: 1fr !important;
  }

  /* Hero / page-hero respect the safe gutters too */
  .hero,
  .page-hero {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Hero content is centered and fits the viewport */
  .hero-content,
  .hero-ctas {
    max-width: 100%;
  }

  /* Stop hero <h1> from clipping by enforcing a clamp() ceiling */
  .hero h1,
  .page-hero h1 {
    font-size: clamp(28px, 7vw, 40px) !important;
    line-height: 1.15;
  }

  /* Padding on cards/panels gets tight on mobile */
  .case-study,
  .story-card,
  .stat-card,
  .outcome-card,
  .path-card,
  .panel,
  .system-card,
  [class$="-card"]:not(.dash-card),
  [class$="-panel"] {
    padding: 20px 16px !important;
  }

  /* Stat numbers stay readable but never overflow */
  .stat-number,
  [class*="stat"] [class*="num"] {
    font-size: clamp(28px, 9vw, 44px) !important;
  }

  /* CTAs stack on mobile if they were row-flexed */
  .cta-row,
  .cta-group,
  .hero-ctas {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .cta-row > *,
  .cta-group > *,
  .hero-ctas > * {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center;
  }
}

/* ============================================================
   MOBILE SAFARI OPTIMIZATIONS — CANON 2026-06-17
   Specific fixes for iOS Safari's known rendering quirks.
   These are baseline guarantees, not aesthetic choices.
   ============================================================ */

/* 1. Prevent iOS Safari from auto-zooming text on rotation */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* 2. Use dynamic viewport so 100vh accounts for the address bar
      (100svh = small viewport when bar visible; 100dvh = dynamic) */
@supports (height: 100svh) {
  .hero,
  .page-hero,
  [class*="full-height"],
  [class*="-fullscreen"] {
    min-height: 100svh;
  }
}

@supports (height: 100dvh) {
  .modal-fullscreen,
  .drawer-fullscreen,
  [class*="-overlay-full"] {
    min-height: 100dvh;
  }
}

/* 3. Prevent input zoom on focus — iOS auto-zooms when input font-size < 16px.
      Force ≥16px on every text-entering field. */
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="datetime-local"],
input[type="month"],
input[type="time"],
input[type="week"],
textarea,
select {
  font-size: max(16px, 1rem);
}

/* 4. Kill iOS Safari's sticky :hover state after tap.
      Without (hover: hover), buttons stay "highlighted" after first tap
      until the user taps somewhere else. */
@media (hover: none) and (pointer: coarse) {
  /* Reset any :hover transforms / colors on touch devices */
  a:hover,
  button:hover,
  .btn:hover,
  .nav-cta:hover,
  [class*="btn-"]:hover,
  [class*="-cta"]:hover,
  [class*="-card"]:hover {
    transform: none !important;
    box-shadow: none !important;
    /* Keep color hover-state visible for accessibility, but don't add motion */
  }
}

/* 5. Touch-action: manipulation kills the 300ms tap delay on iOS for
      interactive elements. Already includes click-prevention for double-tap zoom. */
a,
button,
.btn,
.nav-cta,
.hamburger,
.nav-toggle,
[role="button"],
input[type="submit"],
input[type="button"],
[onclick] {
  touch-action: manipulation;
}

/* 6. Smooth momentum scrolling for any horizontal-scroll containers on iOS */
[class*="-tabs"],
[class*="-scroller"],
[class*="-carousel"],
.research-tabs,
table,
pre,
code,
[role="tablist"] {
  -webkit-overflow-scrolling: touch;
}

/* 7. Position: sticky bugfix — Safari needs explicit will-change for
      sticky elements that change scroll context (otherwise they detach
      when the user scrolls fast). */
[style*="position: sticky"],
[style*="position:sticky"],
nav[style*="sticky"],
header[style*="sticky"] {
  will-change: transform;
}

/* 8. Backdrop-filter requires -webkit- prefix on iOS Safari (until 15+).
      Most pages already have this; this is a fallback for any that don't. */
nav,
header.fixed,
[class*="backdrop"],
[class*="-blur"] {
  -webkit-backdrop-filter: inherit;
}

/* 9. Safe-area-inset for notched iPhones — already declared above but
      reinforced here for sticky bottom CTAs (which iOS Safari clips
      under the home-indicator bar otherwise). */
.sticky-cta,
[class*="sticky-cta"],
[class*="fixed-bottom"],
[class*="-bottom-bar"] {
  padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
}

/* 10. Tap-highlight color — make it subtle instead of the harsh default blue */
a,
button,
.btn,
input,
textarea,
select,
[role="button"] {
  -webkit-tap-highlight-color: rgba(232, 87, 42, 0.15); /* subtle orange tint */
}

/* 11. Mobile Safari quirk: `position: fixed` inside `transform`-ed parents
       breaks. Make sure modals/drawers escape any transformed ancestors. */
.modal,
.drawer,
.nav-links.open,
.mobile-menu.open,
[class*="-modal"],
[class*="-overlay"] {
  transform: none;
}

/* 12. Mobile Safari overscroll behavior — prevent rubber-banding that
       reveals white background behind body */
html {
  background: inherit;
}

/* 13. Disable iOS pull-to-refresh on full-screen modals (when needed) */
body.modal-open,
body.menu-open {
  overscroll-behavior-y: contain;
}

/* End of mobile-safety layer (canon 2026-06-17) */