/**
 * @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.
 * - content_sections alternates white / soft-grey backgrounds for its
 *   direct child blocks via :nth-child().
 * - body has no default margin (resets the parent's defaults to avoid
 *   horizontal scrollbars from full-bleed regions).
 */

/* Body reset — eliminate the default 8px margin that core/normalize fixes
 * leave behind, and prevent horizontal scrollbars caused by 100vw children. */
body.mlt-modern {
  margin: 0;
  overflow-x: hidden;
}

.mlt-page {
  width: 100%;
}

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

/* ------------------------------------------------------------------------
 * Sticky bar: stays pinned to viewport top.
 * The actual sticky-bar component (.mlt-sticky-bar) does the work.
 * This wrapper just ensures it can be positioned correctly.
 * ------------------------------------------------------------------------ */
.mlt-region--sticky-bar {
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* ------------------------------------------------------------------------
 * Main content area.
 * ------------------------------------------------------------------------ */
.mlt-main {
  display: block; /* main is HTML5 — IE-era browsers needed this; harmless now. */
}

/* 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.
 * This is the rewires.html `block` / `block alt` pattern, done in CSS so
 * content editors don't need to remember to set a class per block.
 *
 * 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;
}