/* =========================================================================
   Site-wide layout primitives — the standard container system.

   Loaded on EVERY front-end page (see inc/assets.php). Any template built
   with  <main class="page"> ... <div class="wrap">content</div>  inherits:
     • full-bleed section backgrounds (band sections span the viewport edges)
     • boxed, centered content at the standard width
     • the large-screen breakpoint (content widens on big monitors)

   --container is the SINGLE SOURCE OF TRUTH for content width; the chrome
   (assets/header.css + assets/footer.css) references it via var(--container)
   so header, footer and content always line up.

   Page-specific widths that intentionally differ keep their own classes and
   are NOT affected: articles use .adv-wrap (--wrap: 1180px, adv.css),
   products use .pdp-wrap (pdp.css), the "Over ons" page keeps its own .wrap
   (overons.css, loaded after this file so it wins).
   ========================================================================= */

:root {
  --container: 1280px;                 /* standard boxed content width */
  --gutter: 0px;                       /* side gutter: 0 at the design width, fluid below (set at ≤1439px) */
}

/* Smooth in-page anchor scrolling, site-wide. Any "#section" link (e.g. the
   "Alle artikelen" button → #au-artikelen on a team page) eases to its target
   instead of jumping. Per-section scroll-margin-top values set elsewhere
   (team.css, adv.css, tekstpagina.css …) keep the landing offset they want.
   Disabled for visitors who prefer reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* The off-canvas chrome (cart drawer / mobile nav) sits off-screen to the side
   when closed. We do NOT clip it at the root: any `overflow` on html/body
   re-bases position:fixed overlays on iOS Safari, so a scrolled-open drawer
   drifts away instead of staying glued to the viewport. Instead the closed
   panels are `visibility:hidden` (see .cart-drawer/.mnav in header.css) so they
   contribute nothing to scrollable overflow — no horizontal scrollbar, and the
   overlays stay pristine position:fixed. Content bleed is still clipped on
   .page below (a non-root element, harmless to fixed positioning). */

@media (min-width: 1680px) {
  :root { --container: 1440px; }       /* widen content on large monitors */
}

/* Full-bleed page wrapper: section backgrounds reach the viewport edges. */
.page {
  width: 100%;
  background: #fff;
  overflow-x: clip; /* contain horizontal bleed (e.g. the partner marquee) without locking vertical scroll */
}

/* Boxed content container — centered at the standard width. */
.wrap {
  width: var(--container);
  margin-left: auto;
  margin-right: auto;
  /* Keep horizontal padding inside the width so width:100% + side padding never
     overflows the viewport (was masked by main's overflow-x:clip; visible on
     browsers that don't honor clip, e.g. older iOS Safari). */
  box-sizing: border-box;
}

/* Below the design width, chrome + content share ONE fluid side gutter so the
   header, body content and footer always line up (previously the header only
   gained a gutter at ≤1200px while .wrap got one at ≤1439px, so between
   1201–1439px the header/partners ran edge-to-edge while the body sat inset —
   the "too big on a laptop" symptom). --gutter is the single source of truth;
   header.css, home.css (partner strip) reference it. */
@media (max-width: 1439px) {
  :root { --gutter: clamp(20px, 4vw, 40px); }
  .wrap {
    width: 100%;
    max-width: var(--container);
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
}