/*
 * Design system — presentation layer.
 *
 * Every value here comes from a --ds-* token emitted by PHP. There are no
 * literal colours, no literal type sizes, and no left/right properties: the
 * sheet is written with logical properties so right-to-left needs no mirrored
 * copy. Nothing in this file knows what the site is about.
 */

/* ------------------------------------------------------------ foundation */

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

/*
 * Base element styles are scoped `html body …` rather than bare `body` / `h1`.
 *
 * The weight is chosen deliberately, and it sits between two failure modes.
 *
 * Too light, and a plugin preflight reset — `h1,h2,h3{font-size:inherit}`,
 * `body{line-height:inherit}`, at element weight — flattens every heading and
 * line-height the system just computed, because such a reset can enqueue after
 * the theme. Three type selectors beat one, whatever the order.
 *
 * Too heavy, and the opposite breaks: a dark panel that sets its own colour and
 * writes `.panel h2 { color: inherit }` is DELIBERATE contextual styling, and
 * the design system must lose to it. `:root h2` would tie with that rule on
 * specificity and win on order, repainting white headings dark. Type selectors
 * carry no class weight, so `.panel h2` still wins.
 *
 * Element weight up, class weight zero. Resets lose; contexts win.
 */
html body {
  background: var(--ds-surface-base);
  /* The DERIVED ink for the page, not the declared text colour. They are the
     same value whenever the declared colour is readable on the page, and they
     differ exactly when it is not — which is what darkening only the page
     background does. */
  color: var(--ds-ink-on-base);
  font-family: var(--ds-font-body);
  font-size: var(--ds-step-0);
  font-weight: var(--ds-weight-body);
  line-height: var(--ds-leading-body);
  -webkit-font-smoothing: antialiased;
}

html body h1, html body h2, html body h3,
html body h4, html body h5, html body h6 {
  font-family: var(--ds-font-heading);
  font-weight: var(--ds-weight-heading);
  line-height: var(--ds-leading-heading);
  color: var(--ds-ink-on-base);
  text-wrap: balance;
  margin-block: 0 var(--ds-space-3);
}

html body h1 { font-size: var(--ds-step-5); font-family: var(--ds-font-display); line-height: var(--ds-leading-display); letter-spacing: var(--ds-tracking-display); }
html body h2 { font-size: var(--ds-step-4); }
html body h3 { font-size: var(--ds-step-3); }
html body h4 { font-size: var(--ds-step-2); }
html body h5 { font-size: var(--ds-step-1); }
html body h6 { font-size: var(--ds-step-0); text-transform: uppercase; letter-spacing: var(--ds-tracking-caps); color: var(--ds-text-muted); }

p, ul, ol, dl, table, pre, blockquote, figure {
  margin-block: 0 var(--ds-space-4);
}

/* Running text stays near a comfortable measure without a wrapper class. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol { max-inline-size: var(--ds-content); }

small, .ds-caption { font-size: var(--ds-step-n1); color: var(--ds-text-muted); }
strong, b { font-weight: var(--ds-weight-strong); }

/*
 * Link COLOUR is deliberately not set here.
 *
 * theme.json sets it through `a:where(:not(.wp-element-button))`, which carries
 * zero specificity: links are accent-coloured by default, and any explicit rule
 * wins over it. That matters because re-colouring links for a context is normal
 * — a dark footer sets `color: white` on itself and uses `a { color: inherit }`
 * so its links follow. A base rule here would load last and repaint those links
 * the accent colour on a dark ground, which is how a footer ends up at 1.5:1.
 *
 * Only the underline treatment lives here, because nothing else expresses it.
 */
a { text-decoration-thickness: 1px; text-underline-offset: 0.16em; }

/* One visible focus treatment everywhere, including where a theme removed it. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ds-focus);
  outline-offset: 2px;
  border-radius: var(--ds-radius-sm);
}

hr {
  border: 0;
  border-block-start: 1px solid var(--ds-border);
  margin-block: var(--ds-space-8);
}

img, video, svg, iframe { max-inline-size: 100%; height: auto; }

/* --------------------------------------------------------------- measure */

.ds-container,
.ds-section > .ds-inner {
  inline-size: 100%;
  max-inline-size: var(--ds-site-max);
  margin-inline: auto;
  padding-inline: var(--ds-container-x);
}

.ds-section { padding-block: var(--ds-section-y); }
.ds-narrow  { max-inline-size: var(--ds-narrow); margin-inline: auto; }

.ds-grid {
  display: grid;
  gap: var(--ds-gap-grid);
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
}

.ds-stack { display: flex; flex-direction: column; gap: var(--ds-gap-card); }
.ds-row   { display: flex; flex-wrap: wrap; gap: var(--ds-space-3); align-items: center; }

/* ---------------------------------------------------------------- surfaces */

.ds-surface-raised { background: var(--ds-surface-raised); color: var(--ds-ink-on-raised); }
.ds-surface-anchor { background: var(--ds-surface-anchor); color: var(--ds-ink-on-anchor); }
.ds-surface-anchor a { color: var(--ds-ink-on-anchor); }

/* ---------------------------------------------------------------- buttons */

.ds-button,
.wp-block-button__link,
button.ds-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  padding: var(--ds-button-padding);
  border: 1px solid transparent;
  border-radius: var(--ds-button-radius);
  background: var(--ds-brand-accent);
  color: var(--ds-text-on-accent);
  font: inherit;
  font-weight: var(--ds-button-weight);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}

.ds-button:hover,
.wp-block-button__link:hover { background: var(--ds-link-hover); color: var(--ds-text-on-accent); }

.ds-button--secondary {
  background: transparent;
  border-color: var(--ds-brand-accent);
  color: var(--ds-link);
}
.ds-button--secondary:hover { background: var(--ds-surface-card); color: var(--ds-link-hover); }

.ds-button--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ds-link);
  padding-inline: var(--ds-space-2);
}
.ds-button--ghost:hover { background: var(--ds-surface-card); }

.ds-button[disabled],
.ds-button[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* ------------------------------------------------------------------ cards */

.ds-card {
  background: var(--ds-surface-card);
  color: var(--ds-ink-on-card);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-card-padding);
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

body:not(.ds-cards-flat) .ds-card { box-shadow: var(--ds-card-shadow); }
/* "Outlined" describes the edge, not the fill: the card keeps its own surface
   and trades the shadow for a border. Forcing the page colour here made an
   outlined card indistinguishable from the page it sits on. */
.ds-cards-outlined .ds-card { box-shadow: none; border-color: var(--ds-border); }
.ds-cards-flat .ds-card     { box-shadow: none; border-color: transparent; }

.ds-cards-hover-lift .ds-card:hover   { transform: translateY(-2px); box-shadow: var(--ds-shadow-md); }
.ds-cards-hover-border .ds-card:hover { border-color: var(--ds-brand-accent); }

/* ------------------------------------------------------------------ forms */

/*
 * Field exclusions go inside :where() so they cost nothing.
 *
 * Written plainly, `input:not([type="checkbox"])…` carries three attribute
 * selectors' worth of weight — heavier than most site CSS — and a form styled
 * for a dark panel loses to it, ending up with the page's own background and
 * ink. Scoped this way the rule weighs the same as the headings above: it beats
 * an element-level reset and loses to a context that means it.
 */
html body input:where(:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"])),
html body select,
html body textarea {
  inline-size: 100%;
  padding: var(--ds-space-2) var(--ds-space-3);
  background: var(--ds-surface-base);
  color: var(--ds-text-primary);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-field-radius);
  font: inherit;
  line-height: var(--ds-leading-body);
}

html body input::placeholder, html body textarea::placeholder { color: var(--ds-text-muted); opacity: 1; }

html body input:focus, html body select:focus, html body textarea:focus {
  border-color: var(--ds-focus);
  outline: 2px solid var(--ds-focus);
  outline-offset: 1px;
}

.ds-forms-underline input,
.ds-forms-underline select,
.ds-forms-underline textarea {
  border-radius: 0;
  border-inline: 0;
  border-block-start: 0;
  background: transparent;
}

label { display: block; font-weight: var(--ds-weight-strong); margin-block-end: var(--ds-space-1); }

/* Message text uses the derived state ink; the raw state colour stays for
   borders and bars, where it signals without having to be read. */
.ds-field-error   { color: var(--ds-error-ink); font-size: var(--ds-step-n1); }
.ds-field-success { color: var(--ds-success-ink); font-size: var(--ds-step-n1); }

fieldset { border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); padding: var(--ds-space-4); }
legend   { padding-inline: var(--ds-space-2); font-weight: var(--ds-weight-strong); }

/* ------------------------------------------------------- long-form pieces */

blockquote {
  margin-inline: 0;
  padding-inline-start: var(--ds-space-4);
  border-inline-start: 3px solid var(--ds-brand-accent);
  color: var(--ds-text-muted);
  font-size: var(--ds-step-1);
}

code, kbd, samp, pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
}
code { background: var(--ds-surface-card); padding: 0.15em 0.4em; border-radius: var(--ds-radius-sm); }
pre  { background: var(--ds-surface-card); padding: var(--ds-space-4); border-radius: var(--ds-radius-md); overflow-x: auto; }
pre code { background: none; padding: 0; }

table { inline-size: 100%; border-collapse: collapse; }
th, td { padding: var(--ds-space-2) var(--ds-space-3); border-block-end: 1px solid var(--ds-border); text-align: start; }
th { font-weight: var(--ds-weight-strong); }
td.ds-num, th.ds-num { font-variant-numeric: tabular-nums; text-align: end; }

.ds-table-scroll { overflow-x: auto; }

/* Notices carry meaning in shape as well as colour. */
.ds-note {
  padding: var(--ds-space-3) var(--ds-space-4);
  border-inline-start: 3px solid var(--ds-border);
  background: var(--ds-surface-card);
  border-radius: var(--ds-radius-sm);
}
.ds-note--success { border-inline-start-color: var(--ds-success); }
.ds-note--warning { border-inline-start-color: var(--ds-warning); }
.ds-note--error   { border-inline-start-color: var(--ds-error); }

/* -------------------------------------------------------------- direction */

/* Latin runs inside Arabic text (a product code, a URL) keep their own order. */
.ds-rtl :where(code, kbd, samp, .ds-ltr-run) { unicode-bidi: isolate; direction: ltr; }
.ds-ltr :where(.ds-rtl-run) { unicode-bidi: isolate; direction: rtl; }

/* Digits in tables stay upright and aligned regardless of direction. */
.ds-rtl td.ds-num, .ds-rtl th.ds-num { direction: ltr; unicode-bidi: isolate; }

/* --------------------------------------------------------- accessibility */

.screen-reader-text {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.ds-skip-link:focus {
  position: fixed;
  inset-block-start: var(--ds-space-2);
  inset-inline-start: var(--ds-space-2);
  z-index: 100000;
  padding: var(--ds-space-2) var(--ds-space-4);
  background: var(--ds-surface-anchor);
  color: var(--ds-ink-on-anchor);
  border-radius: var(--ds-radius-sm);
}

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

/* ------------------------------------------------------------------ print */

@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  .ds-no-print, nav, .ct-header, .ct-footer, form, .ds-button { display: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  h1, h2, h3 { break-after: avoid-page; }
  table, figure, blockquote, pre { break-inside: avoid; }
}