/**
 * GEBA Group — base layer.
 *
 * Only what theme.json cannot express: element-level normalisation, the focus
 * ring, section and container rhythm, and the intrinsic grid the design uses
 * instead of breakpoints.
 *
 * Component-level styling lives in components.css. Anything a theme.json
 * `styles` entry can set belongs there, not here.
 */

/* --------------------------------------------------------- normalisation */

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

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

  /*
	 * An arrival that comes in from the side widens the document.
	 *
	 * `left` and `right` translate by `--geba-motion-distance`, and a
	 * translated box still counts towards scrollable overflow — so the welcome
	 * band's right-hand column, sitting at `translate: 80px` until it arrives,
	 * made the page 56px wider than the phone it was on. The page could then be
	 * swiped sideways, and any sideways drift in a scroll took the whole layout
	 * with it. It cleared itself the moment that column revealed, which is why
	 * it only ever showed near the top and looked like a fault in the header.
	 *
	 * `clip` rather than `hidden`: `hidden` would make the root a scroll
	 * container, which breaks the sticky header and `scroll-padding-top` below.
	 * `visible` beside `clip` stays `visible`, so vertical scrolling is
	 * untouched — beside `hidden` or `auto` it would have computed to `auto`.
	 */
  overflow-x: clip;
}

/*
 * The design's own scroll offset: an in-page anchor must clear the sticky
 * header plus the top bar, or the heading lands underneath them.
 */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h-scrolled) + var(--space-6));
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  /*
	 * On the root as well, and it has to be on both.
	 *
	 * The root element's overflow is propagated to the viewport, which leaves
	 * the root itself computing as `visible` — so `clip` on `html` alone stops
	 * nothing, and the page still scrolled its 56px sideways. With `html` no
	 * longer `visible` the propagation does not happen a second time, so this
	 * one clips the elements that actually overflow. See the note on `html`.
	 */
  overflow-x: clip;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* -------------------------------------------------------------- headings */

/*
 * RBNo3.1 is a condensed grotesque; at hero sizes the default word spacing
 * reads loose. theme.json sets size, weight and leading — this balances the
 * wrap, which theme.json has no slot for.
 */
h1,
h2,
h3 {
  text-wrap: balance;
}

p,
li {
  text-wrap: pretty;
}

/* ------------------------------------------------------------ focus ring */

/*
 * Visible focus on keyboard navigation only. The ring is a box-shadow rather
 * than an outline so it follows the pill and card radii.
 */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-xs);
}

a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible {
  border-radius: inherit;
}

/* Skip link — visually hidden until focused. */
.skip-link:not(:focus) {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  position: fixed;
  top: var(--space-4);
  left: var(--space-4);
  z-index: var(--z-toast);
  padding: var(--pad-control-y) var(--pad-control-x);
  background: var(--surface-inverse);
  color: var(--text-inverse);
  border-radius: var(--radius-control);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  text-decoration: none;
}

/* ------------------------------------------------------------- selection */

::selection {
  background: var(--geba-blue);
  color: var(--text-on-brand);
}

/* ------------------------------------------------------------- sections */

/*
 * Section rhythm. The reference steps --section-y down at its two
 * breakpoints rather than fluid-sizing it, so this does the same.
 */
.geba-section {
  padding-block: var(--section-y);
}

.geba-section--sm {
  padding-block: var(--section-y-sm);
}

.geba-section--xs {
  padding-block: var(--section-y-xs);
}

.geba-section--dark {
  background: var(--surface-inverse);
  color: var(--text-inverse);
}

.geba-section--dark :is(h1, h2, h3, h4, h5, h6) {
  color: var(--text-inverse);
}

.geba-section--dark a:not(.wp-block-button__link) {
  color: var(--link-color-inverse);
}

.geba-section--muted {
  background: var(--surface-muted);
}

.geba-section--brand-soft {
  background: var(--surface-brand-soft);
}

@media (max-width: 1000px) {
  .geba-section {
    padding-block: var(--section-y-sm);
  }
}

@media (max-width: 900px) {
  .geba-section {
    padding-block: var(--section-y-xs);
  }

  .geba-section--sm,
  .geba-section--xs {
    padding-block: var(--section-y-xs);
  }
}

/* ------------------------------------------------------------------ prose */

/*
 * Vertical rhythm for a page written in the editor rather than composed from
 * patterns — the privacy policy, and whatever the client adds later. Composed
 * pages do not take it: their bands carry their own padding and want to sit
 * flush. `.geba-post__body` and `.geba-job` say the same thing for the article
 * and the careers panel.
 */
.geba-page__content > * + * {
  margin-block-start: var(--space-6);
}

/* ------------------------------------------------------------ containers */

.geba-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.geba-container--wide {
  max-width: var(--container-wide);
}

.geba-container--narrow {
  max-width: var(--container-narrow);
}

.geba-container--text {
  max-width: var(--container-text);
}

@media (min-width: 1001px) {
  .geba-container {
    padding-inline: var(--gutter-lg);
  }
}

/* ----------------------------------------------------------------- grids */

/*
 * Intrinsic, not breakpoint-driven — this is how the reference lays out every
 * card grid. --geba-grid-min is the only knob; set it per grid.
 */
.geba-grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, var(--geba-grid-min, 320px)), 1fr)
  );
}

.geba-grid--sm {
  gap: var(--grid-gap-sm);
}

.geba-grid--lg {
  gap: var(--grid-gap-lg);
}

/* ------------------------------------------------------------ media wash */

/*
 * Image protection. The reference layers these over photography so white text
 * stays legible; --wash-ink-side is for text set beside an image rather than
 * over its foot.
 */
.geba-wash {
  position: relative;
  isolation: isolate;
}

.geba-wash::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--wash-ink);
  pointer-events: none;
}

.geba-wash--side::after {
  background: var(--wash-ink-side);
}

/* ---------------------------------------------------------------- rules */

.geba-rule {
  border: 0;
  border-top: var(--hairline) solid var(--border-default);
  margin-block: var(--space-8);
}

/*
 * The blue keyline that sits under eyebrows and beside pull quotes.
 */
.geba-bar-accent {
  border-inline-start: var(--bar-accent) solid var(--geba-blue);
  padding-inline-start: var(--space-5);
}

/* ------------------------------------------------------- site structure */

/*
 * The page's top-level regions sit flush against one another, and nothing has
 * to say so any more.
 *
 * Two rules used to live here: `.wp-site-blocks > * { margin-block-start: 0 }`,
 * because core's block gap put 24px of page background between the header and
 * the hero and again above the footer, and a restatement of core's own
 * `> :first-child` reset, which core emits before the rule that overrides it.
 * Both were counter-rules against `styles.spacing.blockGap`, and both were the
 * kind of wide `> *` selector that reaches into markup it knows nothing about.
 *
 * `blockGap` is `0` now, so there is nothing left to counter. See the note
 * under "layout containers" in sections.css.
 */