/**
 * @file
 * Bare element defaults.
 */

/**
 * THE BOX MODEL, RESTATED.
 *
 * This is also the first rule in css/base/reset.css, and it is here as well
 * because of how badly the site behaves without it and how quietly it can go
 * missing: `normalize` was declared in the theme's `libraries-override` and not
 * in its `libraries`, so reset.css never loaded on the front end at all. Every
 * padded box was a content box, and `inline-size: 100%` plus padding made
 * elements wider than their parents by twice the padding.
 *
 * The library list is fixed. This is the floor under it — `elements.css` is in
 * `global`, which every page on the site loads.
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-offset) + var(--space-m));
}

/**
 * NOTHING SCROLLS SIDEWAYS. THE ROOT SAYS SO, NOT ONLY THE BODY.
 *
 * `overflow-x: clip` was on `body` alone, on the understanding that a value set
 * there propagates to the viewport. It does — but only while `html` itself is
 * `overflow: visible`, and the propagation is where engines differ. On the live
 * site the result was a document a few pixels wider than the window: on a phone
 * it dragged sideways, and on the desktop it left the sticky header, which is
 * exactly one window wide, ending short of the right edge with the page's own
 * colour showing beyond it. That is the "header is not edge to edge" and the
 * "scrolls a little to the right" report; they are one bug.
 *
 * WHAT MAKES THE DOCUMENT TOO WIDE
 * Four bands break out of the page container to reach the screen edges — the
 * event hero, the hub hero, the slideshow and (until this round) the newsletter
 * — and each is `100vw`. The viewport unit INCLUDES the scrollbar, so on any
 * page with a vertical scrollbar those bands are ~15px wider than the space
 * there is for them. Clipping at the root is the fix that does not depend on
 * counting scrollbars.
 *
 * `clip` rather than `hidden`: `hidden` would make the root a scroll container
 * and take the page's own vertical scrolling with it. `clip` only clips, so the
 * sticky header keeps sticking to the viewport.
 */
html {
  overflow-x: clip;
}

/**
 * A word that cannot wrap is a horizontal scrollbar waiting to happen.
 *
 * The other half of the same report. Editors paste booking URLs and long
 * addresses into event descriptions, and inside a 336px rail or a 320px phone
 * an unbroken 60-character string pushes its own column wider than the screen.
 * `anywhere` rather than `break-word` so it also counts when the browser is
 * choosing a column's intrinsic width, which is the case that actually causes
 * the overflow.
 *
 * Scoped to running text and headings, not to everything: breaking a word
 * inside a button or a menu item is the wrong answer, and those never carry a
 * pasted URL.
 */
p, li, dd, dt, figcaption,
h1, h2, h3, h4, h5, h6,
.meta, .prose {
  overflow-wrap: anywhere;
}

body {
  background-color: var(--surface-0);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  overflow-x: clip;

  /* A second floor under the same problem: whatever a block, a pasted embed or
     an editor's inline width does inside the page, the body is never wider than
     the window it is in. */
  max-inline-size: 100%;
}

/**
 * Link defaults.
 *
 * The old theme underlined nothing and coloured every link magenta, which made
 * body links indistinguishable from headings. Inline links inside prose are
 * underlined; navigational links in components opt out via their own rules.
 */
a {
  color: var(--text-accent);
  transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
  color: var(--me-magenta);
}

a:active {
  color: var(--me-magenta-700);
}

/* Anything that is a control, card or nav item is not "prose link" styled. */
a:where(.button, .chip, .card__link, .menu__link, .tag, .brand) {
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
h5 { font-size: var(--step-0); }
h6 { font-size: var(--step--1); letter-spacing: var(--tracking-wide); text-transform: uppercase; }

p {
  text-wrap: pretty;
}

small {
  font-size: var(--step--1);
}

strong, b {
  font-weight: var(--weight-bold);
}

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

pre {
  overflow-x: auto;
  padding: var(--space-s);
  background: var(--surface-well);
  border-radius: var(--radius-s);
}

blockquote {
  margin: var(--space-m) 0;
  padding-inline-start: var(--space-m);
  border-inline-start: 3px solid var(--border-accent);
  font-size: var(--step-1);
  line-height: var(--leading-snug);
}

figure {
  margin: var(--space-m) 0;
}

figcaption {
  margin-top: var(--space-2xs);
  color: var(--text-muted);
  font-size: var(--step--1);
}

table {
  width: 100%;
  font-size: var(--step--1);
}

th,
td {
  padding: var(--space-2xs) var(--space-xs);
  text-align: start;
  border-bottom: 1px solid var(--border-subtle);
}

th {
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-size: var(--step--2);
  color: var(--text-secondary);
}

/**
 * Inline icons.
 *
 * An <svg> with no intrinsic size fills its container, so a decorative glyph
 * dropped into a paragraph balloons to full width. Font Awesome gave the old
 * theme sizing for free because its icons were font glyphs. These are elements,
 * so give any icon sitting directly in running text the size of that text.
 * :where() keeps specificity at zero, so a component that sizes its own icon
 * (.event-facts__icon svg, .share__link svg, …) always wins.
 */
:where(p, li, a, button, dd, dt, span, summary, h1, h2, h3, h4) > svg {
  inline-size: 1em;
  block-size: 1em;
  flex: none;
  vertical-align: -0.14em;
}

/* Any wide element inside content scrolls itself rather than the page. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}