/*
 * Sonar foundation: derived tokens and states shared by every this 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 {
  --snr-brand: var(--wp--preset--color--brand);
  --snr-surface: var(--wp--preset--color--surface);
  --snr-ink: var(--wp--preset--color--ink);
  --snr-accent: var(--snr-brand);
  --snr-ink-soft: #5b5f66;
  --snr-line: #d9dce1;
  --snr-surface-2: #eef0f3;
  --snr-accent-soft: #e6edf5;
  --snr-on-accent: #fff;
  --snr-is-dark: var(--wp--custom--is-dark, 0);
  --snr-accent-ink: var(--snr-accent);
  --snr-radius-s: calc(var(--wp--custom--radius--base) * 0.5);
  --snr-radius-l: calc(var(--wp--custom--radius--base) * 2);
}
@supports (color: color-mix(in oklch, red, blue)) {
  :root {
    --snr-ink-soft: color-mix(in oklch, var(--snr-ink) 70%, var(--snr-surface));
    --snr-line: color-mix(in oklch, var(--snr-ink) 15%, var(--snr-surface));
    --snr-surface-2: color-mix(in oklch, var(--snr-brand) 6%, var(--snr-surface));
    --snr-accent-soft: color-mix(in oklch, var(--snr-brand) 12%, var(--snr-surface));
  }
}
/* Accent used as text: always readable on the surface, light or dark. */
@supports (color: oklch(from red l c h)) {
  :root { --snr-accent-ink: oklch(from var(--snr-accent) calc(min(l, 0.5) * (1 - var(--snr-is-dark)) + max(l, 0.8) * var(--snr-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 { --snr-on-accent: oklch(from var(--snr-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 { --snr-on-accent-t: clamp(0, (0.179 - y) * 100000, 1); --snr-on-accent: oklch(from color(from var(--snr-accent) xyz-d65 var(--snr-on-accent-t) var(--snr-on-accent-t) var(--snr-on-accent-t)) l 0 0); }
}
/* Dark mode: follows the visitor's system unless the owner disables it (html.snr-no-dark). */
@media (prefers-color-scheme: dark) {
  html:not(.snr-no-dark):not([data-theme="light"]) {
    --snr-surface: #15171b; --snr-ink: #ececef; --snr-ink-soft: #a3a6ad; --snr-line: #34363c; --snr-surface-2: #1d2025; --snr-is-dark: 1;
  }
  @supports (color: color-mix(in oklch, red, blue)) {
    html:not(.snr-no-dark):not([data-theme="light"]) {
      --snr-surface: color-mix(in oklch, var(--snr-brand) 8%, #121316);
      --snr-ink: color-mix(in oklch, var(--snr-brand) 6%, #ececef);
      --snr-accent: color-mix(in oklch, var(--snr-brand) 70%, white);
      --snr-ink-soft: color-mix(in oklch, var(--snr-ink) 70%, var(--snr-surface));
      --snr-line: color-mix(in oklch, var(--snr-ink) 18%, var(--snr-surface));
      --snr-surface-2: color-mix(in oklch, var(--snr-brand) 14%, #1a1b1f);
      --snr-accent-soft: color-mix(in oklch, var(--snr-brand) 25%, #121316);
    }
  }
}
html[data-theme="dark"] {
  --snr-is-dark: 1;
  --snr-surface: #15171b; --snr-ink: #ececef; --snr-ink-soft: #a3a6ad; --snr-line: #34363c; --snr-surface-2: #1d2025;
}

/* 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(--snr-accent); outline-offset: 3px; border-radius: var(--snr-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(--snr-accent) 86%, var(--snr-ink)); }
  .wp-element-button:active, .wp-block-button__link:active { background-color: color-mix(in oklch, var(--snr-accent) 74%, var(--snr-ink)); }
}
:where(button, .wp-element-button)[disabled] { opacity: .45; cursor: not-allowed; }
:where(input, textarea, select) { min-height: 44px; border: 1px solid var(--snr-line); border-radius: var(--wp--custom--radius--base); background: var(--snr-surface); color: var(--snr-ink); }
:where(input, textarea, select):hover { border-color: var(--snr-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 this theme, dressed by each theme ---------- */
.snr-breadcrumbs { font-family: var(--wp--custom--font-ui, inherit); font-size: var(--wp--preset--font-size--small); color: var(--snr-ink-soft); gap: .4rem; }
.snr-breadcrumbs p, .snr-breadcrumbs .wp-block-post-terms, .snr-breadcrumbs .wp-block-post-title { font-size: inherit; font-family: inherit; font-weight: 400; margin: 0; line-height: 1.4; letter-spacing: 0; }
.snr-breadcrumbs a { color: var(--snr-ink-soft); }
.snr-breadcrumbs .snr-sep { color: var(--snr-line); }
.snr-takeaways { background: var(--snr-accent-soft); padding: var(--wp--preset--spacing--40); border-radius: calc(var(--wp--custom--radius--base, 4px) * 2); }
.snr-takeaways > :first-child { font-family: var(--wp--custom--font-ui, inherit); font-size: var(--wp--preset--font-size--small); font-weight: 600; color: var(--snr-accent-ink); margin-top: 0; }
.snr-definition { border-left: 3px solid var(--snr-accent); padding: .2rem 0 .2rem var(--wp--preset--spacing--40); }
.snr-faq .wp-block-details { border-bottom: 1px solid var(--snr-line); padding-block: var(--wp--preset--spacing--30); }
.snr-faq summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.snr-sources { font-size: var(--wp--preset--font-size--small); color: var(--snr-ink-soft); border-top: 1px solid var(--snr-line); padding-top: var(--wp--preset--spacing--30); }
.snr-updated { font-family: var(--wp--custom--font-ui, inherit); font-size: var(--wp--preset--font-size--small); color: var(--snr-ink-soft); }
.snr-author-card { border-top: 1px solid var(--snr-line); padding-top: var(--wp--preset--spacing--40); gap: var(--wp--preset--spacing--30); }
.snr-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) ---------- */
.snr-editor-hint { font-size: var(--wp--preset--font-size--small); color: var(--snr-ink-soft); border: 1px dashed var(--snr-line); padding: .6rem .8rem; border-radius: var(--snr-radius-s); }

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