/*
 * Base layer — the design's type, ground and controls.
 *
 * Mobile-first. Everything paints from the colourway custom properties, never
 * from a brand colour directly, so a module's colour version is one class.
 */

/* 700 is here because the methodology table header is Figtree BOLD (691:2703).
   It was missing, so that header silently rendered at Light 300. */
@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;700&display=swap");

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--page-ink);
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

/*
 * The design uses PP Fragment SPARINGLY — section titles and the wordmark —
 * not for every heading. The hero statement, card titles and FAQ questions are
 * all Figtree at heading size, and each overrides this in the module layer.
 *
 * Until the licensed PP Fragment webfont files arrive this falls through the
 * stack in _tokens.css: the hierarchy and scale are already right, only the
 * face is standing in.
 */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  line-height: var(--lh-heading);
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0 0 0.5em;
  color: var(--cw-ink);
}

h1 { font-size: var(--t-display); line-height: var(--lh-display); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }

p { margin: 0 0 1rem; text-wrap: pretty; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }

.ema-wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/*
 * ⚠️ <main> WAS AN .ema-wrap (BugHerd #1, #3, #11, #36). That boxed every module
 * inside the same 1728px padded container as the header, and each module then
 * added its own gutter inside it. So nothing could run edge to edge — the
 * full-bleed hero had side margins and background colours stopped short of the
 * screen edge — and all module text sat 50px inside the logo's margin.
 *
 * <main> is now full width. Modules are full-width bands that centre their own
 * content, which puts module text exactly on the logo's left edge and the
 * Enquire button's right edge. Anything placed in <main> that is NOT a module
 * — a page title, an archive grid, a news article, the project facts — gets
 * the text container here instead.
 */
.ema-main { display: block; }
.ema-main > :not(.ema-module):not(.ema-audience):not(.ema-profile),
.ema-profile > :not(.ema-module),
.ema-audience > :not(.ema-module) {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* A module owns its own vertical rhythm and paints its own ground edge to
   edge, so a colourway change reads as a band across the page. */
.ema-module {
  /* The content edge: the logo's left margin and the Enquire button's right
     margin at every screen width. Resolved where it is used, so it works for
     padding here and for absolutely positioned content inside a hero. */
  --edge: max(var(--gutter), calc((100% - var(--content-max)) / 2 + var(--gutter)));
  background: var(--cw-bg);
  color: var(--cw-ink);
  padding-block: var(--module-y);
  padding-inline: var(--edge);
  margin: 0;
}

/*
 * The page title a template prints when there is no Hero to carry it. It had
 * no styles at all and sat flush against the header — invisible while every
 * page had a hero, exposed once pages dropped theirs (BugHerd #22, #23, #26,
 * #35). Given a module's top spacing; a white module directly below it tucks
 * up to the column rhythm instead of opening a second full gap.
 */
.ema-page-title { margin-block: 0; padding-top: var(--module-y); font-weight: var(--fw-display); }
.ema-page-title + .ema-module.cw-white:not(.has-keyline) { padding-top: 50px; }

/*
 * An archive's grid starts clear of the page title above it (#94).
 *
 * ⚠️ NOT AN ADJACENT SIBLING. The archive templates print a visually-hidden
 * <h2> between the title and the grid to name the list for screen readers, so
 * `.ema-page-title + .ema-grid` matched nothing and this rule silently did
 * nothing at all. Both orders are spelled out rather than reaching for `~`,
 * which would also hit every later grid on the page.
 */
.ema-page-title + .ema-grid,
.ema-page-title + .ema-visually-hidden + .ema-grid { margin-top: 50px; }

/* Nothing in the page runs into the footer. A module carries its own bottom
   spacing; anything else — an archive grid, an article, the project facts —
   gets it here (#95). */
.ema-main > :last-child:not(.ema-module):not(.ema-profile):not(.ema-audience) { margin-bottom: var(--module-y); }
.ema-profile > :last-child:not(.ema-module),
.ema-audience > :last-child:not(.ema-module) { margin-bottom: var(--module-y); }

/* Given a colour (#60) the heading becomes a band like any module, so the
   module's own padding does the spacing and the title stops adding its own. */
.ema-page-heading { display: block; }
.ema-page-heading .ema-page-title { padding-top: 0; color: var(--cw-ink); }
.ema-page-heading + .ema-module.cw-white:not(.has-keyline) { padding-top: var(--module-y); }

/*
 * ⚠️ The gutter lives on the MODULE, not on its children. It used to be
 * `.ema-module > * { max-width; margin-inline: auto; padding-inline }`, which
 * any component rule setting its own `margin: 0` silently cancelled — the
 * large statement, carousel, card headings and feature caption all fell back
 * to the screen edge the moment <main> stopped boxing everything in. Padding
 * the module cannot be undone by a child.
 */

.ema-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--c-primary-purple);
  color: var(--c-white);
}
.ema-skip:focus { left: 0; }