/* Clip decorative SVG shape dividers to viewport width.
   Theme scales shape children 2× (theme.min.css); these rules keep
   the wave full-bleed visually without widening layout/scroll. */

.shape {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.shape:not([class*="shape-blur"]) {
  overflow: hidden;
  contain: paint;
}

/* Section/footer transition wrappers (competitionListFragment, footer, …) */
.position-relative:has(> .shape) {
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}

/* Card-top wave inside competition cards */
.card-body:has(> .shape) {
  position: relative;
  overflow: hidden;
}

/* Newsletter strips: keep Bootstrap row gutters inside padded boxes */
.newsletter-strip {
  max-width: 100%;
  overflow-x: clip;
}

/* ─────────────────────────────────────────────────────────────────────
   Global horizontal-overflow guard (audited 2026-05-28, revised after
   regression triage).

   What this does and why it is minimal:
   - `html { overflow-x: clip }` pins `documentElement.scrollWidth` to
     the layout viewport on Chromium engines, neutralising the
     scaled-SVG bleed from `.shape > * { transform: scale(2) }`
     (theme.min.css) and the off-canvas `#mobileDrawer` (right:-300px).
   - `body { overflow-x: clip }` mirrors the body-level theme rule
     using `clip` instead of `hidden`, so the body cannot become a
     scroll container even on iOS Safari.

   What we explicitly do NOT do here anymore (these caused regressions):
   - `.card-body { contain: layout paint }`  → clipped `.badge-float-outside`
     and the in-card `.shape.shape-bottom-100` whose `bottom: 100%`
     positions it *above* the card-body box.
   - `.shape-*-100 > svg { transform: none }` → shrank in-card waves
     and shifted card layout; not needed once html/body are clipped.
   - `.nav-mobile-drawer:not(.open) { visibility: hidden }` → the
     drawer toggles via inline `style.right`, NOT via an `.open`
     class (see topnav.html:393–407), so the rule kept the menu
     permanently invisible.
   ───────────────────────────────────────────────────────────────────── */

html {
  overflow-x: clip;
  max-width: 100%;
}

body {
  overflow-x: clip;
  max-width: 100vw;
}