/* ==========================================================================
   cms-core — core stylesheet
   --------------------------------------------------------------------------
   Hand-authored. No framework, no build step, no third-party request.
   Every colour, size, and spacing value resolves to a custom property emitted
   by DesignTokens::toCss(), so a site is re-skinned entirely from design.yaml.

   Never hard-code a colour or a px size below. If a value is missing, add a
   token to DesignTokens rather than a literal here.

   Sections:
     1. Reset
     2. Base elements
     3. Layout primitives
     4. Section shell
     5. Components (buttons, cards, forms, media)
     6. Accessibility and motion
   ========================================================================== */

/* 1. Reset ---------------------------------------------------------------- */

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

* {
  margin: 0;
}

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

body {
  min-height: 100vh;
  min-height: 100svh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* 2. Base elements -------------------------------------------------------- */

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

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-md); }
h6 { font-size: var(--text-base); }

a {
  color: var(--color-primary);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--color-primary-hover);
}

strong { font-weight: 600; }

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

code {
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  padding: 0.15em 0.4em;
}

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

pre code {
  background: none;
  padding: 0;
}

hr {
  border: 0;
  border-top: var(--border-width) solid var(--color-border);
  margin-block: var(--space-xl);
}

blockquote {
  border-inline-start: 3px solid var(--color-primary);
  padding-inline-start: var(--space-md);
  color: var(--color-text-muted);
  font-style: italic;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  text-align: start;
  padding: var(--space-xs) var(--space-sm);
  border-bottom: var(--border-width) solid var(--color-border);
}

th {
  font-weight: 600;
}

/* 3. Layout primitives ---------------------------------------------------- */

/* Horizontal container with a consistent gutter. */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

/* Vertical rhythm: space between children, nothing on the outside. */
.stack {
  display: flex;
  flex-direction: column;
}

.stack > * + * {
  margin-block-start: var(--stack-space, var(--space-md));
}

.stack--sm { --stack-space: var(--space-sm); }
.stack--lg { --stack-space: var(--space-lg); }
.stack--xl { --stack-space: var(--space-xl); }

/* Horizontal group that wraps instead of overflowing. */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-space, var(--space-sm));
  align-items: center;
}

.cluster--center { justify-content: center; }
.cluster--end    { justify-content: flex-end; }
.cluster--between { justify-content: space-between; }

/* Responsive column grid with no breakpoint maths — columns fit themselves. */
.grid-auto {
  display: grid;
  gap: var(--grid-gap, var(--space-lg));
  grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 16rem), 100%), 1fr));
}

/* Fixed column counts that collapse to one column on narrow screens. */
.grid-2,
.grid-3,
.grid-4 {
  display: grid;
  gap: var(--grid-gap, var(--space-lg));
  grid-template-columns: 1fr;
}

@media (min-width: 40em) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 62em) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* A grid item's default min-width is min-content, so one wide image or one
   long unbroken word sizes the whole track past its container and drags the
   page into horizontal scroll. Columns are allowed to be narrower than their
   contents; the contents wrap or clip instead. */
.grid-auto > *,
.grid-2 > *,
.grid-3 > *,
.grid-4 > *,
.split > * {
  min-width: 0;
}

/* Two-column split that reverses on request and stacks on narrow screens. */
.split {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 52em) {
  .split {
    grid-template-columns: repeat(2, 1fr);
  }

  .split--reverse > :first-child {
    order: 2;
  }
}

/* Strips list semantics' default styling. Sections that lay out a <ul> use
   this rather than each redeclaring the same three properties. */
.list-bare {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Centred measure for long-form text. */
.measure {
  max-width: 65ch;
}

.text-center {
  text-align: center;
}

.text-center .measure,
.measure--center {
  margin-inline: auto;
}

/* 4. Section shell -------------------------------------------------------- */

.section {
  padding-block: var(--space-section);
  position: relative;
}

.section--tight {
  padding-block: var(--space-lg);
}

/* Tone variants. Each sets its own background and text colour so nested
   components inherit the correct contrast automatically. */
.section--surface {
  background: var(--color-surface);
}

.section--primary {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}

.section--accent {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}

.section--primary a,
.section--accent a {
  color: inherit;
}

.section--primary .section__lede,
.section--accent .section__lede,
.section--primary .text-muted,
.section--accent .text-muted {
  color: inherit;
  opacity: 0.85;
}

/* Standard section heading block. */
.section__header {
  margin-block-end: var(--space-xl);
}

.section__eyebrow {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-block-end: var(--space-2xs);
}

.section--primary .section__eyebrow,
.section--accent .section__eyebrow {
  color: inherit;
  opacity: 0.75;
}

.section__title {
  font-size: var(--text-2xl);
}

.section__lede {
  font-size: var(--text-md);
  color: var(--color-text-muted);
  max-width: 60ch;
  margin-block-start: var(--space-sm);
}

.text-center .section__lede {
  margin-inline: auto;
}

.text-muted {
  color: var(--color-text-muted);
}

/* 5. Components ----------------------------------------------------------- */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 0.7em 1.5em;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius);
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn:hover {
  background: var(--color-primary-hover);
  color: var(--color-primary-contrast);
}

.btn--secondary {
  background: var(--color-secondary);
  color: var(--color-secondary-contrast);
}

.btn--secondary:hover {
  background: var(--color-secondary-hover);
  color: var(--color-secondary-contrast);
}

.btn--outline {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}

.btn--outline:hover {
  background: currentColor;
  color: var(--color-bg);
}

.btn--ghost {
  background: transparent;
  color: inherit;
  padding-inline: 0.25em;
}

.btn--ghost:hover {
  background: transparent;
  text-decoration: underline;
}

.btn--lg {
  font-size: var(--text-md);
  padding: 0.75em 1.75em;
}

.btn--sm {
  font-size: var(--text-xs);
  padding: 0.4em 1em;
}

/* Cards */
.card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 100%;
}

.section--surface .card {
  background: var(--color-bg);
}

.card__media {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
}

.card__body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  flex: 1;
}

.card__title {
  font-size: var(--text-md);
}

.card__footer {
  margin-block-start: auto;
  padding-block-start: var(--space-sm);
}

.card--plain {
  border: 0;
  background: transparent;
}

/* Icons */
.icon {
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--lg {
  width: 2.25rem;
  height: 2.25rem;
  stroke-width: 1.5;
}

.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-lg);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

/* Media */
.media {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.media img {
  width: 100%;
  object-fit: cover;
}

.media--square img  { aspect-ratio: 1; }
.media--wide img    { aspect-ratio: 16 / 9; }
.media--portrait img { aspect-ratio: 3 / 4; }

/* Long-form prose */
.prose > * + * {
  margin-block-start: var(--space-md);
}

.prose > h2,
.prose > h3,
.prose > h4 {
  margin-block-start: var(--space-xl);
}

.prose > h2:first-child,
.prose > h3:first-child {
  margin-block-start: 0;
}

.prose ul,
.prose ol {
  padding-inline-start: 1.25em;
}

.prose li + li {
  margin-block-start: var(--space-3xs);
}

.prose img {
  border-radius: var(--radius);
}

/* Forms */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.field__label {
  font-size: var(--text-sm);
  font-weight: 600;
}

.field__input,
.field__textarea,
.field__select {
  width: 100%;
  padding: 0.6em 0.8em;
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
}

.field__textarea {
  min-height: 8rem;
  resize: vertical;
}

.field__input:focus-visible,
.field__textarea:focus-visible,
.field__select:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
  border-color: var(--color-focus);
}

.field__help {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Site header and footer share these; themes may override in their shell. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: var(--border-width) solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 4rem;
  padding-block: var(--space-2xs);
}

.site-header__brand {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
}

.site-header__brand img {
  max-height: 2.5rem;
  width: auto;
}

.site-nav {
  position: relative;
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__link {
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
  color: var(--color-primary);
}

/* Dropdowns use a details/summary disclosure — no JS required. */
.site-nav__group {
  position: relative;
}

.site-nav__group > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  font-size: var(--text-sm);
  font-weight: 500;
}

.site-nav__group > summary::-webkit-details-marker {
  display: none;
}

.site-nav__submenu {
  list-style: none;
  margin: 0;
  padding: var(--space-2xs);
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

@media (min-width: 48em) {
  .site-nav__submenu {
    position: absolute;
    top: calc(100% + var(--space-2xs));
    inset-inline-start: 0;
    min-width: 12rem;
    background: var(--color-bg);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgb(0 0 0 / 8%);
    z-index: 10;
  }
}

/* Mobile navigation toggle.
   A checkbox disclosure, not a <details>: a <details> cannot be forced open
   by CSS, so the same markup could not expand unconditionally at desktop.
   The checkbox stays in the accessibility tree (.visually-hidden, not
   display:none) so it remains keyboard-operable and named by its label. */
.site-nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  background: none;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.4em 0.7em;
  font: inherit;
  font-size: var(--text-sm);
  color: inherit;
  cursor: pointer;
}

.site-nav__checkbox:focus-visible + .site-nav__toggle {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

@media (max-width: 47.999em) {
  .site-nav__list {
    display: none;
    position: absolute;
    top: calc(100% + var(--space-2xs));
    inset-inline-end: 0;
    min-width: 14rem;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
    padding: var(--space-sm);
    background: var(--color-bg);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgb(0 0 0 / 8%);
    z-index: 20;
  }

  .site-nav__checkbox:checked ~ .site-nav__list {
    display: flex;
  }
}

@media (min-width: 48em) {
  .site-nav__toggle,
  .site-nav__checkbox {
    display: none;
  }
}

.site-footer {
  background: var(--color-surface);
  padding-block: var(--space-2xl) var(--space-xl);
  margin-block-start: auto;
  font-size: var(--text-sm);
}

.site-footer a {
  color: inherit;
}

.site-footer__bottom {
  margin-block-start: var(--space-lg);
  padding-block-start: var(--space-md);
  border-top: var(--border-width) solid var(--color-border);
  color: var(--color-text-muted);
}

/* 6. Accessibility and motion --------------------------------------------- */

:where(a, button, summary, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--space-sm);
  inset-block-start: -100%;
  z-index: 100;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  border-radius: var(--radius);
  text-decoration: none;
}

.skip-link:focus {
  inset-block-start: var(--space-sm);
}

@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;
  }
}

@media print {
  .site-header,
  .site-footer,
  .site-nav {
    display: none;
  }

  .section {
    padding-block: var(--space-md);
  }
}