/*
 * UPR Foundation: derived tokens and states shared by every UPR theme.
 * Only three palette slots are chosen (brand, surface, ink); everything else is derived here.
 * Modern CSS with safe fallbacks: older browsers get correct, unrefined output.
 */
:root {
  --upr-brand: var(--wp--preset--color--brand);
  --upr-surface: var(--wp--preset--color--surface);
  --upr-ink: var(--wp--preset--color--ink);
  --upr-accent: var(--upr-brand);
  --upr-ink-soft: #5b5f66;
  --upr-line: #d9dce1;
  --upr-surface-2: #eef0f3;
  --upr-accent-soft: #e6edf5;
  --upr-on-accent: #fff;
  --upr-is-dark: var(--wp--custom--is-dark, 0);
  --upr-accent-ink: var(--upr-accent);
  --upr-radius-s: calc(var(--wp--custom--radius--base) * 0.5);
  --upr-radius-l: calc(var(--wp--custom--radius--base) * 2);
}
@supports (color: color-mix(in oklch, red, blue)) {
  :root {
    --upr-ink-soft: color-mix(in oklch, var(--upr-ink) 70%, var(--upr-surface));
    --upr-line: color-mix(in oklch, var(--upr-ink) 15%, var(--upr-surface));
    --upr-surface-2: color-mix(in oklch, var(--upr-brand) 6%, var(--upr-surface));
    --upr-accent-soft: color-mix(in oklch, var(--upr-brand) 12%, var(--upr-surface));
  }
}
/* Accent used as text: always readable on the surface, light or dark. */
@supports (color: oklch(from red l c h)) {
  :root { --upr-accent-ink: oklch(from var(--upr-accent) calc(min(l, 0.5) * (1 - var(--upr-is-dark)) + max(l, 0.8) * var(--upr-is-dark)) c h); }
}
/* Text on the accent colour stays readable whatever brand colour is chosen. */
@supports (color: oklch(from red l c h)) {
  :root { --upr-on-accent: oklch(from var(--upr-accent) clamp(0, (0.57 - l) * 100000, 1) 0 0); }
}
/* Exact rule: black or white, whichever reads better, decided by the accent's luminance. */
@supports (color: color(from red xyz-d65 x y z)) {
  :root { --upr-on-accent-t: clamp(0, (0.179 - y) * 100000, 1); --upr-on-accent: oklch(from color(from var(--upr-accent) xyz-d65 var(--upr-on-accent-t) var(--upr-on-accent-t) var(--upr-on-accent-t)) l 0 0); }
}
/* Dark mode: follows the visitor's system unless the owner disables it (html.upr-no-dark). */
@media (prefers-color-scheme: dark) {
  html:not(.upr-no-dark):not([data-theme="light"]) {
    --upr-surface: #0A1512; --upr-ink: #ECEFED; --upr-ink-soft: #A7B0AA; --upr-line: #24302B; --upr-surface-2: #111C18; --upr-accent: #BCDCCD; --upr-is-dark: 1;
  }
  @supports (color: color-mix(in oklch, red, blue)) {
    html:not(.upr-no-dark):not([data-theme="light"]) {
      --upr-surface: #0A1512;
      --upr-ink: color-mix(in oklch, var(--upr-brand) 6%, #ececef);
      --upr-accent: #BCDCCD;
      --upr-ink-soft: color-mix(in oklch, var(--upr-ink) 70%, var(--upr-surface));
      --upr-line: color-mix(in oklch, var(--upr-ink) 18%, var(--upr-surface));
      --upr-surface-2: #111C18;
      --upr-accent-soft: color-mix(in oklch, var(--upr-brand) 30%, #0A1512);
    }
  }
}
html[data-theme="dark"] {
  --upr-is-dark: 1;
  --upr-surface: #0A1512; --upr-ink: #ECEFED; --upr-ink-soft: #A7B0AA; --upr-line: #24302B; --upr-surface-2: #111C18; --upr-accent: #BCDCCD;
}

/* Boxes that fill their cell include their own padding and border */
:where(.wp-block-group, .wp-block-post-template > li, .wp-block-column) { box-sizing: border-box; }

/* Reading quality */
:where(h1, h2, h3, h4) { text-wrap: balance; overflow-wrap: break-word; }
:where(p, li) { text-wrap: pretty; }
:where(.wp-block-post-content) > :where(p, ul, ol, blockquote) { max-width: var(--wp--custom--measure); }
:where(.wp-block-post-content) p { hyphens: auto; }

/* States */
:focus-visible { outline: 3px solid var(--upr-accent); outline-offset: 3px; border-radius: var(--upr-radius-s); }
.wp-element-button, .wp-block-button__link { min-height: 44px; transition: background-color .15s, border-color .15s; }
@supports (color: color-mix(in oklch, red, blue)) {
  .wp-element-button:hover, .wp-block-button__link:hover { background-color: color-mix(in oklch, var(--upr-accent) 86%, var(--upr-ink)); }
  .wp-element-button:active, .wp-block-button__link:active { background-color: color-mix(in oklch, var(--upr-accent) 74%, var(--upr-ink)); }
}
:where(button, .wp-element-button)[disabled] { opacity: .45; cursor: not-allowed; }
:where(input, textarea, select) { min-height: 44px; border: 1px solid var(--upr-line); border-radius: var(--wp--custom--radius--base); background: var(--upr-surface); color: var(--upr-ink); }
:where(input, textarea, select):hover { border-color: var(--upr-ink-soft); }
:where(input, textarea)[aria-invalid="true"] { border-color: #b42318; }

/* Tables scroll inside their box */
.wp-block-table { overflow-x: auto; }
.wp-block-table td.has-text-align-right { font-variant-numeric: tabular-nums; }

/* Motion */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* Print */
@media print {
  header, footer, nav, .wp-block-navigation, .wp-block-search { display: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* ---------- Common kit: identical structure in every UPR theme, dressed by each theme ---------- */
.upr-breadcrumbs { font-family: var(--wp--custom--font-ui, inherit); font-size: var(--wp--preset--font-size--small); color: var(--upr-ink-soft); gap: .4rem; }
.upr-breadcrumbs p, .upr-breadcrumbs .wp-block-post-terms, .upr-breadcrumbs .wp-block-post-title { font-size: inherit; font-family: inherit; font-weight: 400; margin: 0; line-height: 1.4; letter-spacing: 0; }
.upr-breadcrumbs a { color: var(--upr-ink-soft); }
.upr-breadcrumbs .upr-sep { color: var(--upr-line); }
.upr-takeaways { background: var(--upr-accent-soft); padding: var(--wp--preset--spacing--40); border-radius: calc(var(--wp--custom--radius--base, 4px) * 2); }
.upr-takeaways > :first-child { font-family: var(--wp--custom--font-ui, inherit); font-size: var(--wp--preset--font-size--small); font-weight: 600; color: var(--upr-accent-ink); margin-top: 0; }
.upr-definition { border-left: 3px solid var(--upr-accent); padding: .2rem 0 .2rem var(--wp--preset--spacing--40); }
.upr-faq .wp-block-details { border-bottom: 1px solid var(--upr-line); padding-block: var(--wp--preset--spacing--30); }
.upr-faq summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.upr-sources { font-size: var(--wp--preset--font-size--small); color: var(--upr-ink-soft); border-top: 1px solid var(--upr-line); padding-top: var(--wp--preset--spacing--30); }
.upr-updated { font-family: var(--wp--custom--font-ui, inherit); font-size: var(--wp--preset--font-size--small); color: var(--upr-ink-soft); }
.upr-author-card { border-top: 1px solid var(--upr-line); padding-top: var(--wp--preset--spacing--40); gap: var(--wp--preset--spacing--30); }
.upr-pillar-list .wp-block-post-title { font-size: var(--wp--preset--font-size--medium); }

/* ---------- Touch targets and header actions ---------- */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
header .wp-block-buttons { flex-shrink: 0; }
header .wp-block-button__link { white-space: nowrap; word-break: normal; overflow-wrap: normal; }

/* ---------- Free mode is off: hints for editors only (visitors never see them) ---------- */
.upr-editor-hint { font-size: var(--wp--preset--font-size--small); color: var(--upr-ink-soft); border: 1px dashed var(--upr-line); padding: .6rem .8rem; border-radius: var(--upr-radius-s); }

/* ---------- Style guide template ---------- */
.upr-sg-section { margin-top: var(--wp--preset--spacing--70); padding-top: var(--wp--preset--spacing--40); border-top: 1px solid var(--upr-line); }
.upr-sg-section > .upr-sg-title { margin-top: 0; }
.upr-sg-swatches { gap: var(--wp--preset--spacing--30); }
.upr-sg-swatch { border: 1px solid var(--upr-line); border-radius: var(--upr-radius-s); overflow: hidden; }
.upr-sg-chip { height: 4rem; }
.upr-sg-label { margin: 0; padding: .4rem .6rem; font-size: var(--wp--preset--font-size--small); }
.upr-sg-brand { background: var(--upr-brand); }
.upr-sg-surface { background: var(--upr-surface); }
.upr-sg-ink { background: var(--upr-ink); }
.upr-sg-ink-soft { background: var(--upr-ink-soft); }
.upr-sg-line { background: var(--upr-line); }
.upr-sg-surface-2 { background: var(--upr-surface-2); }
.upr-sg-accent-soft { background: var(--upr-accent-soft); }

/* ---------- Empty image slots: WordPress prints nothing for an image with no file, so the space around it closes ---------- */
.wp-block-column:not(:has(*)) { display: none; }
.wp-block-columns:has(> .wp-block-column:not(:has(*))) > .wp-block-column { flex-basis: 100% !important; }
.wp-block-group > .wp-block-spacer:last-child { display: none; }
.wp-block-gallery:not(:has(img)) { display: none; }
