/**
 * South End Pickleball — global responsive safety net.
 *
 * Conservative backstop rules shared by every page. They fill gaps where a page
 * didn't specify (loaded in the same <head> slot as south-end-text-wrap.css,
 * i.e. before page-specific inline <style>), so deliberate page layout still wins.
 * Goal: no horizontal overflow on phones, comfortable tap/zoom behaviour, and
 * sensible defaults on large screens — without rewriting any page's own CSS.
 *
 * Depends on south-end-tokens.css for --bp-* breakpoints (literal fallbacks inline).
 */

/* Consistent box model everywhere (backstop; most pages already set this). */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Don't let mobile browsers auto-inflate text on orientation change; keep user zoom. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Replaced / embedded media never overflows its container. */
img,
picture,
video,
canvas,
svg,
iframe,
embed,
object {
  max-width: 100%;
}

/* Keep intrinsic aspect ratio for bitmaps/video unless a page sets height itself. */
img,
picture,
video,
canvas {
  height: auto;
}

/* Avoid inline-image descender gaps. */
img,
svg,
video,
canvas {
  vertical-align: middle;
}

/* Tables stay within the viewport; wrap markup in .se-scroll-x for horizontal scroll. */
table {
  max-width: 100%;
}

.se-scroll-x {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Long unbroken tokens (URLs, IDs, emails) wrap instead of forcing horizontal scroll.
   :where() has zero specificity, so any page rule overrides it freely. */
:where(p, li, dd, dt, td, th, span, a, h1, h2, h3, h4, h5, h6, button) {
  overflow-wrap: break-word;
}

/* Phones: 16px floor on form controls prevents iOS Safari's focus auto-zoom. */
@media (max-width: 768px) {
  input,
  select,
  textarea {
    font-size: 16px;
  }
}

/* Keyboard users get a visible focus ring (mouse users via :focus-visible are unaffected). */
:focus-visible {
  outline: 2px solid var(--gold, #e8a020);
  outline-offset: 2px;
}

/* Respect reduced-motion: neutralise long transitions/animations site-wide. */
@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;
  }
}
