/* mobile-overlay.css
 * Site-wide mobile defaults applied as a low-specificity overlay.
 * Each page links this stylesheet AFTER its own page-specific CSS so
 * page-level media queries still win where they exist. The overlay
 * targets generic mobile breakages that occur regardless of the
 * page's bespoke layout: overflowing tables, wide images, undersized
 * tap targets, fixed-width containers ignoring the viewport, side-by-
 * side layouts that should stack on phones, and code blocks that
 * scroll horizontally past the screen edge.
 *
 * Loading order matters. Include this file LAST in the head so its
 * @media rules layer on top of the page's own styles.
 */

/* === MOBILE FOUNDATION (always applies) === */

/* Belt-and-braces: prevent horizontal scroll caused by oversized
   children. The overlay does not touch desktop layouts that already
   work — only stops the page from being wider than the viewport. */
html, body { max-width: 100%; overflow-x: hidden; }

/* Replaced and embedded content cannot exceed the viewport on any
   device. Targets the most common mobile-overflow culprits. */
img, svg, video, iframe, embed, object, canvas {
  max-width: 100%;
  height: auto;
}
/* video keeps native dimensions when possible, but capped */
video { max-height: 80vh; }

/* Tables — the classic mobile killer. On narrow screens the table
   gets a horizontal scroll container so wide tabular data does not
   blow out the page width. Ancestors that already wrap their tables
   in a scroll container are unaffected. */
table { max-width: 100%; }

/* Code, pre, and any monospace block content: scroll horizontally
   inside its own box rather than pushing the page wider. */
pre, code, kbd, samp {
  max-width: 100%;
  overflow-x: auto;
  word-wrap: break-word;
}
pre { -webkit-overflow-scrolling: touch; }

/* Long URLs, hashes, and emails wrap inside text flow rather than
   creating horizontal scrollbars. We use `break-word` not `anywhere`:
   `anywhere` collapses every word's min-content width to 1ch, which
   destroys grid layouts that compute column widths from intrinsic
   content (a single long unbreakable word like "polymorphousmythology"
   becomes a stack of single-letter rows, squeezing all sibling
   columns). `break-word` only breaks when overflow is unavoidable
   and preserves min-content as the full-word width. URLs still wrap
   inside narrow text flows; titles still claim their natural width. */
a, p, li, blockquote, dd, dt, figcaption {
  overflow-wrap: break-word;
}

/* === MOBILE BREAKPOINT (phones, narrow tablets) === */
@media (max-width: 720px) {
  /* Tap targets — Apple HIG and Material both recommend 44px min.
     Nudges all interactive elements up to that height without
     disturbing their visual styling. */
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  a.button,
  .btn,
  .button {
    min-height: 44px;
    min-width: 44px;
  }
  /* Form fields gain breathing room. iOS auto-zooms when an input
     has font-size below 16px — nudging the floor prevents the
     unexpected zoom-on-focus behaviour. */
  input[type="text"],
  input[type="email"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="password"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  textarea,
  select {
    font-size: 16px;
    min-height: 44px;
    padding: 0.5rem 0.7rem;
  }
  textarea { min-height: 88px; }

  /* Tables overflow to scroll on narrow screens. Wraps the table
     visually without changing its semantics. Pages that already use
     a custom wrapper class can ignore this. */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Multi-column text collapses to single column on phones. */
  [style*="column-count"],
  .columns,
  .multi-column {
    column-count: 1 !important;
  }

  /* Common side-by-side layouts (grids and flex rows) usually want
     to stack on a phone. The overlay is conservative — it only
     touches a small set of generic class names that suggest two-up
     or grid layouts. Pages with bespoke layout classes are
     unaffected. */
  .two-col,
  .three-col,
  .grid-2,
  .grid-3,
  .row-cols-2,
  .row-cols-3 {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }

  /* Padding and gutters compress on phones to recover screen real
     estate. Many desktop-first templates set 2rem or 3rem of side
     padding which on a 360px screen leaves almost no content area. */
  .container,
  .wrapper,
  .content,
  main,
  article,
  section.tier {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }

  /* Headings drop down a step — desktop h1 sizes are usually
     unreadable at phone widths. */
  h1 { font-size: clamp(1.6rem, 6vw, 2.4rem); line-height: 1.15; }
  h2 { font-size: clamp(1.35rem, 5vw, 2rem);  line-height: 1.2;  }
  h3 { font-size: clamp(1.15rem, 4.2vw, 1.6rem); line-height: 1.25; }

  /* Navigation menus that were horizontal on desktop usually need
     to stack or hamburger on phones. The overlay does the soft
     stack — pages with their own hamburger toggle are unaffected. */
  nav ul:not([role="tablist"]):not(.no-stack) {
    flex-wrap: wrap;
  }

  /* Fixed-position page-level decoration — usually canvas overlays,
     full-screen rain animations, or sticky frames — get demoted on
     phones because they tend to break virtual-keyboard interaction. */
  body > canvas[id*="rain"],
  body > canvas[id*="bg"] {
    opacity: 0.04;
  }
}

/* === ULTRA-NARROW (small phones, < 380px) === */
@media (max-width: 380px) {
  html, body { font-size: 17px; }
  h1 { font-size: clamp(1.4rem, 8vw, 2rem); }
  h2 { font-size: clamp(1.2rem, 6.5vw, 1.7rem); }
  /* Aggressive padding compression at the smallest widths. */
  .container,
  .wrapper,
  .content,
  main,
  article {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }
}

/* === LANDSCAPE-PHONE (short viewports) === */
@media (max-height: 500px) and (orientation: landscape) {
  /* Hero sections and full-viewport intros lose their grip on tiny
     short viewports. Cap their viewport-relative heights so content
     stays scannable in landscape. */
  .hero, .intro, .splash, [class*="full-screen"] {
    min-height: auto !important;
    max-height: 90vh;
  }
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  /* Disable animations that move content around — the overlay does
     not override page-specific animations, but covers generic ones. */
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
 * SKIP-LINK (accessibility, WCAG 2.4.1)
 * Site-wide skip-to-content for keyboard users. Hidden visually
 * until :focus. Pages need <a class="skip-link" href="#main-content">
 * as first body content + id="main-content" on their <main>.
 * Added 2026-05-20 per audit CL-T98 medium-tier item #8.
 * ============================================================ */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: 0.75rem 1rem;
  background: var(--accent, #2c3e50);
  color: var(--bg, #ffffff);
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 4px 0;
}
.skip-link:focus,
.skip-link:focus-visible {
  left: 0;
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
@media print {
  .skip-link { display: none !important; }
}