/*
 * Baseline only.
 *
 * Every value here comes from theme.json, so this file states relationships,
 * never literals. Component CSS arrives in Phase 2, one file per block.
 */

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

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

:where(a):focus-visible,
:where(button):focus-visible,
:where(input):focus-visible,
:where(textarea):focus-visible,
:where(select):focus-visible {
  outline: 2px solid var(--wp--preset--color--sage);
  outline-offset: 2px;
}

/*
 * Japanese line breaking.
 *
 * Japanese has no spaces, so a browser will otherwise break mid-phrase.
 * auto-phrase is Chromium-only for now and degrades to normal elsewhere;
 * BudouX covers the rest for headlines in Phase 2.
 */
:where([lang='ja']) :is(h1, h2, h3, h4) {
  word-break: auto-phrase;
  line-break: strict;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------- surfaces
 *
 * Carried over from the design-token sheet, and worth keeping deliberately.
 *
 * A section declares data-surface="light" or "dark" and every component inside
 * it inherits the right colours with no conditional styling of its own. That is
 * why the ported component CSS can reference --fg and --line without knowing
 * which band it sits in — and why a block can be dropped into either surface
 * and still look right.
 *
 * theme.json owns the raw palette; this maps it to roles.
 */

:root,
[data-surface='dark'] {
  --bg: var(--wp--preset--color--ink);
  --bg-raised: var(--wp--custom--ink-raised);
  --fg: var(--wp--preset--color--bone);
  --fg-muted: #8c8c85;
  --fg-faint: #5c5c57;
  --line: rgb(242 240 236 / 14%);
  --line-strong: rgb(242 240 236 / 28%);
  --accent: var(--wp--preset--color--sage);
  --overlay: rgb(11 11 11 / 60%);
}

[data-surface='light'] {
  --bg: var(--wp--preset--color--bone);
  --bg-raised: var(--wp--custom--bone-raised);
  --fg: var(--wp--preset--color--ink);
  --fg-muted: #6d6d66;
  --fg-faint: #9a9a92;
  --line: rgb(11 11 11 / 14%);
  --line-strong: rgb(11 11 11 / 28%);
  --accent: var(--wp--preset--color--sage-deep);
  --overlay: rgb(242 240 236 / 60%);
}

/* A surface paints itself, so a block never has to.
 *
 * The header is the exception, and deliberately so: it declares its tone in
 * order to set the tokens the type inside it reads, but it sits over the hero
 * image and has to stay transparent until the page scrolls. */
[data-surface]:not(.px-header) {
  background: var(--bg);
  color: var(--fg);
}

/* ------------------------------------------------------------------ bands
 * Every block is a full-width band with a centred, gutter-padded inner column.
 */

.px-band {
  padding-block: var(--wp--preset--spacing--band);
}

.px-band__inner {
  width: 100%;
  max-width: var(--wp--custom--container);
  margin-inline: auto;
  padding-inline: var(--wp--custom--gutter);
}

/* ------------------------------------------------------------------ chrome */

.px-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 0.75rem 1.25rem;
  background: var(--wp--preset--color--bone);
  color: var(--wp--preset--color--ink);
}

.px-skip:focus {
  left: 0;
}

.px-main {
  min-height: 50vh;
}

/*
 * The header is fixed, so a band that starts the page would otherwise slide
 * underneath it. The hero handles its own top padding; every other opening
 * band needs clearing.
 */
.px-main > :first-child:not(.px-hero) {
  padding-top: calc(var(--wp--custom--header-height) + var(--wp--preset--spacing--band));
}

/* ---------------------------------------------------------- chrome resets
 *
 * Links carry no colour and no underline of their own — theme.json says so, to
 * match the original app's reset. Nearly every link on this site is a nav item,
 * a card or a button, and each of those styles itself; the exception is running
 * prose, where .px-prose puts the underline back.
 */

/* wp_nav_menu() always returns a list. Every menu in this theme is laid out as
   a flex row or a grid, so the list furniture never survives. */
.px-header__menu,
.px-menu__primary,
.px-footer__bar-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A control that looks like type is still a <button>, and a button arrives
   with a border, a background and a font of its own. */
.px-header__toggle,
.px-hero__scroll {
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  /* font: inherit stops at the font shorthand; a control still has the UA's
     own casing and tracking, which is visible the moment it sits in a row of
     letter-spaced small caps. */
  text-transform: inherit;
  letter-spacing: inherit;
  padding: 0;
  cursor: pointer;
}