/**
 * @file
 * MLT Modern — Region layout.
 *
 * Provides full-width region wrappers and the alternating-background pattern
 * for content_sections. Region-specific *styling* (header background colour,
 * footer dark colour, etc.) is the responsibility of the BLOCKS placed in
 * each region — these styles cover the structural layout only.
 *
 * Design rules:
 * - Every region is full-width (100vw) by default.
 * - Internal containers live INSIDE blocks, not regions, so a region can
 *   hold both contained-width and full-bleed blocks.
 * - Empty regions render nothing.
 * - content_sections alternates white / soft-grey backgrounds for its
 *   direct child blocks via :nth-child().
 * - body has overflow-x: clip (not hidden) — see body rule comment below.
 */

/* Body reset — eliminate the default 8px margin that core/normalize fixes
 * leave behind, and prevent horizontal scrollbars caused by 100vw children.
 *
 * overflow-x: clip (NOT hidden) is intentional and important:
 *  - overflow-x: hidden makes the body into a scroll container, which
 *    breaks position: sticky on every descendant element. Specifically,
 *    when overflow-x is hidden, browsers internally treat overflow-y as
 *    "auto", which means sticky elements stick to the body's scroll
 *    container instead of the viewport — and the body's scroll container
 *    isn't the one being scrolled, so sticky appears to do nothing.
 *  - overflow-x: clip prevents horizontal scrollbars the same way hidden
 *    does, but does NOT create a scroll container, so sticky keeps working.
 *
 * Browser support for overflow-x: clip: Chrome 90+, Firefox 81+, Safari 16+
 * (Sep 2022). For pre-Safari-16 users a horizontal scrollbar may briefly
 * appear if a region overflows, but no functional break.
 */
body.mlt-modern {
  margin: 0;
  overflow-x: clip;
}

/* Drupal core's off-canvas wrapper sits between body and our .mlt-page.
 * Sometimes its default styles constrain its width. Force full width so
 * our pages aren't squashed to one side. The off-canvas drawer itself
 * (when opened by an admin) is a fixed-position overlay, doesn't need
 * the wrapper to reserve space for it. */
.dialog-off-canvas-main-canvas {
  width: 100%;
  max-width: 100%;
}

.mlt-page {
  width: 100%;
}

/* All region wrappers are full-width by default. */
.mlt-region {
  width: 100%;
}

/* ------------------------------------------------------------------------
 * Top bar: full-width contact band at top of page.
 * (No sticky positioning - it scrolls with the page like any other band.)
 * ------------------------------------------------------------------------ */
.mlt-region--top-bar {
  position: relative;
  z-index: 10;
}

/* ------------------------------------------------------------------------
 * Main content area.
 * ------------------------------------------------------------------------ */
.mlt-main {
  display: block;
}

/* The invisible anchor target for "Skip to main content". */
#main-content-target {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* ------------------------------------------------------------------------
 * Content sections — alternating backgrounds.
 *
 * Each immediate child of .mlt-region--content-sections is treated as one
 * full-width "band". Odd children get white, even children get soft grey.
 *
 * If a specific block needs to override (e.g. force a coloured band where
 * the alternation would have given it white), give it class
 * .mlt-section--force-alt or .mlt-section--force-plain.
 * ------------------------------------------------------------------------ */
.mlt-region--content-sections > * {
  background: var(--mlt-surface, #ffffff);
}

.mlt-region--content-sections > *:nth-child(even) {
  background: var(--mlt-bg-soft, #f7f9fc);
}

.mlt-region--content-sections > .mlt-section--force-alt {
  background: var(--mlt-bg-soft, #f7f9fc);
}

.mlt-region--content-sections > .mlt-section--force-plain {
  background: var(--mlt-surface, #ffffff);
}

/* ------------------------------------------------------------------------
 * Sticky overlays — floats above all content.
 * The overlay region itself takes no space; children position absolutely
 * or fixedly themselves.
 * ------------------------------------------------------------------------ */
.mlt-region--sticky-overlays {
  position: relative;
  z-index: 999;
}