/**
 * earthing.dk - Blocksy token bridge + component layer.
 *
 * LAYER 1 maps Blocksy's customizer CSS variables (--theme-*) onto the
 * theme.json presets (--wp--preset--*), so the WHOLE theme - Blocksy chrome
 * included - is driven by theme.json. LAYER 2 styles the Blocksy shell
 * (header/nav/footer/page title), LAYER 3 gives the content blocks the
 * "Jordnaer" component language (soft cards, pill buttons, warm paper).
 *
 * RULE: no colour/size/font literals in this file - only var() references
 * to theme.json output. Re-skin = edit theme.json, never this file.
 * (Exceptions: 0/1px hairlines, opacity, and unitless ratios.)
 */

/* =====================================================================
   LAYER 1 - Blocksy variable bridge
   Defined on both :root and body to outrank Blocksy's own definitions
   regardless of the scope its dynamic CSS uses.
   ===================================================================== */
:root, body {
  /* palette slots (Blocksy semantics: 1 accent, 2 hover, 3 text, 4 headings,
     5 borders, 6 subtle bg, 7 site bg, 8 alt bg) */
  --theme-palette-color-1: var(--wp--preset--color--primary-600);
  --theme-palette-color-2: var(--wp--preset--color--primary-700);
  --theme-palette-color-3: var(--wp--preset--color--neutral-700);
  --theme-palette-color-4: var(--wp--preset--color--neutral-900);
  --theme-palette-color-5: var(--wp--preset--color--neutral-200);
  --theme-palette-color-6: var(--wp--preset--color--secondary-100);
  /* v4 white-base surface strategy: white page, white header (V1) */
  --theme-palette-color-7: var(--wp--preset--color--white);
  --theme-palette-color-8: var(--wp--preset--color--white);

  /* text + links */
  --theme-text-color: var(--wp--preset--color--neutral-700);
  --theme-headings-color: var(--wp--preset--color--neutral-900);
  --theme-link-initial-color: var(--wp--preset--color--primary-600);
  --theme-link-hover-color: var(--wp--preset--color--primary-700);
  --theme-selection-text-color: var(--wp--preset--color--white);
  --theme-selection-background-color: var(--wp--preset--color--primary-500);
  --theme-border-color: var(--wp--preset--color--neutral-200);

  /* base typography */
  --theme-font-family: var(--wp--preset--font-family--body);
  --theme-font-size: var(--wp--preset--font-size--text-m);
  --theme-line-height: var(--wp--custom--line-height--body);

  /* buttons */
  --theme-button-font-family: var(--wp--preset--font-family--body);
  --theme-button-font-weight: 600;
  --theme-button-font-size: 1rem;
  --theme-button-text-initial-color: var(--wp--preset--color--white);
  --theme-button-text-hover-color: var(--wp--preset--color--white);
  --theme-button-background-initial-color: var(--wp--preset--color--primary-600);
  --theme-button-background-hover-color: var(--wp--preset--color--primary-700);
  --theme-button-border-radius: var(--wp--custom--radius--pill);
  --theme-button-shadow: none;

  /* forms */
  --theme-form-text-initial-color: var(--wp--preset--color--neutral-700);
  --theme-form-field-border-initial-color: var(--wp--preset--color--neutral-300);
  --theme-form-field-border-focus-color: var(--wp--preset--color--primary-500);

  /* icons */
  --theme-icon-active-color: var(--wp--preset--color--primary-600);
}

/* =====================================================================
   LAYER 2 - Blocksy shell (header, nav, page title, footer)
   ===================================================================== */

/* header: WHITE bar, hairline bottom edge (v4 / V1 surface strategy) */
#header [data-row*="middle"],
#header [data-row] {
  background-color: var(--wp--preset--color--white);
}
#header [data-row]:not([data-transparent-row]) > .ct-container::after {
  display: none;
}
#header {
  border-bottom: 1px solid var(--wp--preset--color--neutral-200);
}

/* site title in the display serif */
.site-title {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
  color: var(--wp--preset--color--primary-700);
}
.site-title a { color: inherit; }

/* nav links */
#header .ct-menu-link,
#header .menu > li > a {
  font-weight: 600;
  font-size: var(--wp--preset--font-size--text-s);
  color: var(--wp--preset--color--neutral-700);
}
#header .ct-menu-link:hover,
#header .menu > li > a:hover {
  color: var(--wp--preset--color--primary-600);
}

/* page title (Blocksy entry-header h1) */
.page-title,
.entry-header .page-title {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 500;
  letter-spacing: var(--wp--custom--letter-spacing--display);
  color: var(--wp--preset--color--neutral-900);
  font-size: var(--wp--preset--font-size--title-2);
  line-height: var(--wp--custom--line-height--tight);
}

/* ---------------------------------------------------------------
   Heading typography, ALL levels (v2.1 defect fix).
   Blocksy's customizer CSS re-declares per-heading --theme-* vars
   (sans stack, fixed px sizes, weight 700) and its bundle loads
   after WP's global styles, so only the .page-title H1 above kept
   the serif. Re-bind BOTH the Blocksy vars and the direct
   properties to the theme.json presets; this file loads last.
   --------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  --theme-font-family: var(--wp--preset--font-family--heading);
  font-family: var(--wp--preset--font-family--heading);
  --theme-headings-color: var(--wp--preset--color--neutral-900);
}
h1 {
  --theme-font-size: var(--wp--preset--font-size--title-1);
  font-size: var(--wp--preset--font-size--title-1);
  --theme-font-weight: 500;
  font-weight: 500;
  --theme-line-height: var(--wp--custom--line-height--tight);
  line-height: var(--wp--custom--line-height--tight);
  letter-spacing: var(--wp--custom--letter-spacing--display);
}
h2 {
  --theme-font-size: var(--wp--preset--font-size--title-2);
  font-size: var(--wp--preset--font-size--title-2);
  --theme-font-weight: 500;
  font-weight: 500;
  --theme-line-height: var(--wp--custom--line-height--heading);
  line-height: var(--wp--custom--line-height--heading);
  letter-spacing: var(--wp--custom--letter-spacing--display);
}
h3 {
  --theme-font-size: var(--wp--preset--font-size--title-3);
  font-size: var(--wp--preset--font-size--title-3);
  --theme-font-weight: 600;
  font-weight: 600;
  --theme-line-height: var(--wp--custom--line-height--heading);
  line-height: var(--wp--custom--line-height--heading);
}
h4 {
  --theme-font-size: var(--wp--preset--font-size--title-4);
  font-size: var(--wp--preset--font-size--title-4);
  --theme-font-weight: 600;
  font-weight: 600;
  --theme-line-height: var(--wp--custom--line-height--heading);
  line-height: var(--wp--custom--line-height--heading);
}
h5 {
  --theme-font-size: var(--wp--preset--font-size--title-5);
  font-size: var(--wp--preset--font-size--title-5);
  --theme-font-weight: 600;
  font-weight: 600;
  --theme-line-height: var(--wp--custom--line-height--heading);
  line-height: var(--wp--custom--line-height--heading);
}
h6 {
  --theme-font-size: var(--wp--preset--font-size--title-6);
  font-size: var(--wp--preset--font-size--title-6);
  --theme-font-weight: 600;
  font-weight: 600;
  --theme-line-height: var(--wp--custom--line-height--heading);
  line-height: var(--wp--custom--line-height--heading);
}

/* hide the colour-mode switcher until a dark palette is actually designed
   (the bridge above is light-only; a broken toggle is worse than none) */
#header [data-id="color-mode-switcher"] {
  display: none;
}

/* footer: deep moss panel */
#footer,
#footer [data-row] {
  background-color: var(--wp--preset--color--primary-900);
}
#footer,
#footer .ct-container,
#footer [data-id="copyright"] {
  color: var(--wp--preset--color--primary-100);
}
#footer a { color: var(--wp--preset--color--primary-200); }
#footer a:hover { color: var(--wp--preset--color--white); }
#footer [data-id="copyright"] {
  font-size: var(--wp--preset--font-size--text-s);
}

/* =====================================================================
   LAYER 3 - content component language ("Jordnaer")
   ===================================================================== */

/* main column breathing room */
.site-main {
  padding-top: var(--wp--preset--spacing--m);
  padding-bottom: var(--wp--preset--spacing--l);
}

/* ---------------------------------------------------------------
   Reading column (v2.1 defect fix). Blocksy shadows WP's
   --wp--style--global--content-size on [class*=ct-container]>article
   with its own container width, so the 46rem/74rem theme.json layout
   tokens never reached the page and prose ran full width on wide
   screens. Capture the :root values (custom properties compute at
   the element where they are DECLARED, so the :root capture is
   shadow-proof) and restore them inside the article at equal
   specificity - this file loads after Blocksy's bundle, so it wins.
   --------------------------------------------------------------- */
:root {
  --earthing-content-size: var(--wp--style--global--content-size);
  --earthing-wide-size: var(--wp--style--global--wide-size);
}
[class*=ct-container] > article {
  --wp--style--global--content-size: var(--earthing-content-size);
  --wp--style--global--wide-size: var(--earthing-wide-size);
}

/* card grids that carry no align class still read as a wide band,
   not a squeezed reading column */
.entry-content > .wp-block-columns:not(.alignfull) {
  max-width: var(--earthing-wide-size);
}

/* every colour-washed group block becomes a soft card - EXCEPT full-width
   groups, which are section BANDS (v4 white/tint alternation), not cards.
   (card language: kort-fortalt, info boxes, disclaimer boxes, start-here cards) */
.entry-content .wp-block-group.has-background:not(.alignfull) {
  border-radius: var(--wp--custom--radius--m);
  border: 1px solid var(--wp--preset--color--neutral-200);
  box-shadow: var(--wp--preset--shadow--card);
  padding: var(--wp--preset--spacing--m);
  margin-top: var(--wp--preset--spacing--m);
  margin-bottom: var(--wp--preset--spacing--m);
}

/* ---------------------------------------------------------------
   v4 SECTION BANDS - the white/tint alternation (V1 surface
   strategy). A band = wp:group with align "full" + a background
   colour class. Full-bleed tint, generous vertical air, content
   inside stays constrained by Gutenberg's own layout engine.
   --------------------------------------------------------------- */
.entry-content .wp-block-group.alignfull.has-background {
  padding-top: var(--wp--preset--spacing--xl);
  padding-bottom: var(--wp--preset--spacing--xl);
  margin-top: var(--wp--preset--spacing--xl);
  margin-bottom: var(--wp--preset--spacing--xl);
}
/* two adjacent bands: collapse the doubled gap */
.entry-content .wp-block-group.alignfull.has-background + .wp-block-group.alignfull.has-background {
  margin-top: calc(-1 * var(--wp--preset--spacing--xl));
}
/* headings inside a band start at the band's padding, not with their
   own big top margin */
.entry-content .wp-block-group.alignfull.has-background h2.wp-block-heading:first-child,
.entry-content .wp-block-group.alignfull.has-background > .wp-block-group > h2.wp-block-heading:first-child {
  margin-top: 0;
}

/* card grids built with columns: lift on hover when the column holds a link */
.entry-content .wp-block-columns {
  gap: var(--wp--preset--spacing--s);
}
.entry-content .wp-block-column.has-background {
  border-radius: var(--wp--custom--radius--m);
  border: 1px solid var(--wp--preset--color--neutral-200);
  padding: var(--wp--preset--spacing--s);
  transition: transform var(--wp--custom--transition--hover), box-shadow var(--wp--custom--transition--hover);
}
.entry-content .wp-block-column.has-background:hover {
  transform: translateY(-3px);
  box-shadow: var(--wp--preset--shadow--card-hover);
}

/* headings inside cards stay compact */
.entry-content .wp-block-column .wp-block-heading,
.entry-content .wp-block-group.has-background .wp-block-heading {
  margin-top: 0;
}

/* comfortable reading rhythm */
.entry-content > p,
.entry-content > ul,
.entry-content > ol {
  margin-bottom: var(--wp--preset--spacing--s);
}
.entry-content h2.wp-block-heading {
  margin-top: var(--wp--preset--spacing--l);
}
.entry-content h3.wp-block-heading {
  margin-top: var(--wp--preset--spacing--m);
}

/* lists: clay markers */
.entry-content ul li::marker {
  color: var(--wp--preset--color--accent-500);
}

/* images get the card radius */
.entry-content .wp-block-image img {
  border-radius: var(--wp--custom--radius--m);
}

/* separators as quiet hairlines */
.entry-content .wp-block-separator {
  border: none;
  border-top: 1px solid var(--wp--preset--color--neutral-200);
  max-width: 8rem;
  margin-left: auto;
  margin-right: auto;
  opacity: 1;
}

/* outline button style (secondary CTA) */
.wp-block-button.is-style-outline .wp-block-button__link {
  border: 1.5px solid var(--wp--preset--color--primary-300);
  color: var(--wp--preset--color--primary-700);
  background: transparent;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  border-color: var(--wp--preset--color--primary-600);
  background: var(--wp--preset--color--primary-100);
  color: var(--wp--preset--color--primary-700);
}

/* buttons: smooth hover */
.wp-element-button,
.wp-block-button__link {
  transition: background-color var(--wp--custom--transition--hover), box-shadow var(--wp--custom--transition--hover), border-color var(--wp--custom--transition--hover);
}

/* focus visibility (WCAG) */
a:focus-visible,
button:focus-visible,
.wp-element-button:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent-500);
  outline-offset: 2px;
}

/* text selection */
::selection {
  background: var(--wp--preset--color--primary-500);
  color: var(--wp--preset--color--white);
}

/* =====================================================================
   LAYER 4 - v4 graphic-material components ("the inviting layer")
   Classes are opt-in from content (edk- prefix). Everything below is
   token-driven; no literals beyond hairlines/opacity/ratios.
   ===================================================================== */

/* --- lead paragraph (intro under a heading) ------------------------ */
.entry-content .edk-lead {
  font-size: var(--wp--preset--font-size--text-l);
  color: var(--wp--preset--color--neutral-500);
}

/* --- kicker (small caps line above a section heading) --------------- */
.entry-content .edk-kicker {
  text-transform: uppercase;
  letter-spacing: var(--wp--custom--letter-spacing--kicker);
  font-size: var(--wp--preset--font-size--text-s);
  font-weight: 700;
  color: var(--wp--preset--color--accent-600);
  margin-bottom: var(--wp--preset--spacing--2xs);
}
.entry-content .edk-kicker + h2.wp-block-heading,
.entry-content .edk-kicker + h3.wp-block-heading {
  margin-top: 0;
}

/* --- "Kort fortalt" card -------------------------------------------
   White card with clay dot bullets and a compact serif heading.
   Content pattern: wp:group className edk-kort (background WHITE),
   first paragraph = the "Kort fortalt" label. */
.entry-content .edk-kort {
  background-color: var(--wp--preset--color--white);
  border-radius: var(--wp--custom--radius--m);
  border: 1px solid var(--wp--preset--color--neutral-200);
  box-shadow: var(--wp--preset--shadow--card);
  padding: var(--wp--preset--spacing--m);
  margin-top: var(--wp--preset--spacing--m);
  margin-bottom: var(--wp--preset--spacing--m);
}
.entry-content .edk-kort > p:first-child {
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--title-6);
  font-weight: 600;
  color: var(--wp--preset--color--primary-700);
  margin-bottom: var(--wp--preset--spacing--xs);
}
.entry-content .edk-kort ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}
.entry-content .edk-kort ul li {
  position: relative;
  padding: var(--wp--preset--spacing--2xs) 0 var(--wp--preset--spacing--2xs) 1.7rem;
}
.entry-content .edk-kort ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1em;
  width: 0.62rem;
  height: 0.62rem;
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--accent-500);
}

/* --- pull-quote -----------------------------------------------------
   Key statements lifted out of the prose. Uses the core pullquote
   block; serif italic, quiet rules above/below. */
.entry-content .wp-block-pullquote {
  border-top: 1px solid var(--wp--preset--color--neutral-200);
  border-bottom: 1px solid var(--wp--preset--color--neutral-200);
  padding: var(--wp--preset--spacing--m) var(--wp--preset--spacing--s);
  margin-top: var(--wp--preset--spacing--l);
  margin-bottom: var(--wp--preset--spacing--l);
}
.entry-content .wp-block-pullquote blockquote {
  border: none;
  padding: 0;
  margin: 0;
}
.entry-content .wp-block-pullquote p {
  font-family: var(--wp--preset--font-family--heading);
  font-style: italic;
  font-size: var(--wp--preset--font-size--title-4);
  line-height: var(--wp--custom--line-height--heading);
  color: var(--wp--preset--color--primary-700);
}
.entry-content .wp-block-pullquote cite {
  display: block;
  margin-top: var(--wp--preset--spacing--xs);
  font-family: var(--wp--preset--font-family--body);
  font-style: normal;
  font-size: var(--wp--preset--font-size--text-s);
  color: var(--wp--preset--color--neutral-500);
}

/* --- icon chips -----------------------------------------------------
   Inline SVG line icons (24x24 viewBox, stroke 1.8, round caps) sit in
   soft tint chips. Markup: <div class="edk-icon">…svg…</div> */
.entry-content .edk-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--wp--custom--radius--s);
  background: var(--wp--preset--color--primary-100);
  color: var(--wp--preset--color--primary-600);
  display: grid;
  place-items: center;
  margin-bottom: var(--wp--preset--spacing--xs);
}
.entry-content .edk-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}
.entry-content .edk-icon--accent {
  background: var(--wp--preset--color--accent-100);
  color: var(--wp--preset--color--accent-600);
}
/* icon + heading on one line (FAQ headers, checklists) */
.entry-content .edk-icon--inline {
  width: 34px;
  height: 34px;
  margin-bottom: 0;
  flex: 0 0 auto;
}
.entry-content .edk-icon--inline svg { width: 20px; height: 20px; }
.entry-content .edk-iconrow {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--xs);
}
.entry-content .edk-iconrow > h2,
.entry-content .edk-iconrow > h3 { margin-top: 0; margin-bottom: 0; }

/* --- "ways" strip (3 circular icons, centered) ---------------------- */
.entry-content .edk-way {
  text-align: center;
}
.entry-content .edk-way .edk-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--neutral-200);
  box-shadow: var(--wp--preset--shadow--card);
  margin-left: auto;
  margin-right: auto;
}
.entry-content .edk-way .edk-icon svg { width: 30px; height: 30px; }

/* --- evidence band --------------------------------------------------
   Clear-language verdict bars. Markup pattern (wp:html):
   <div class="edk-evi">
     <div class="edk-evi__row edk-evi--strong">
       <span class="edk-evi__label">…</span>
       <span class="edk-evi__bar"><i></i></span>
       <span class="edk-evi__verdict">…</span>
     </div>…
   Bar widths are set inline per row (style="--edk-evi-w: 92%") so the
   component stays data-driven; numbers come from the knowledge graph. */
.entry-content .edk-evi {
  max-width: var(--earthing-content-size);
  margin-left: auto;
  margin-right: auto;
}
.entry-content .edk-evi__row {
  display: grid;
  grid-template-columns: minmax(9rem, 11rem) 1fr minmax(8rem, 9.5rem);
  gap: var(--wp--preset--spacing--s);
  align-items: center;
  padding: var(--wp--preset--spacing--xs) 0;
  border-bottom: 1px solid var(--wp--preset--color--neutral-200);
}
.entry-content .edk-evi__row:last-child { border-bottom: none; }
.entry-content .edk-evi__label {
  font-weight: 600;
  color: var(--wp--preset--color--neutral-900);
  font-size: var(--wp--preset--font-size--text-s);
}
.entry-content .edk-evi__bar {
  height: 0.65rem;
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--secondary-200);
  overflow: hidden;
  position: relative;
}
.entry-content .edk-evi__bar i {
  position: absolute;
  inset: 0;
  width: var(--edk-evi-w, 50%);
  border-radius: var(--wp--custom--radius--pill);
}
.entry-content .edk-evi--strong .edk-evi__bar i { background: var(--wp--preset--color--primary-500); }
.entry-content .edk-evi--mid .edk-evi__bar i    { background: var(--wp--preset--color--accent-500); }
.entry-content .edk-evi--weak .edk-evi__bar i   { background: var(--wp--preset--color--neutral-400); }
.entry-content .edk-evi__verdict {
  font-size: var(--wp--preset--font-size--text-s);
  font-weight: 600;
  text-align: right;
}
.entry-content .edk-evi--strong .edk-evi__verdict { color: var(--wp--preset--color--primary-600); }
.entry-content .edk-evi--mid .edk-evi__verdict    { color: var(--wp--preset--color--accent-600); }
.entry-content .edk-evi--weak .edk-evi__verdict   { color: var(--wp--preset--color--neutral-500); }
@media (max-width: 689.98px) {
  .entry-content .edk-evi__row { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--2xs); }
  .entry-content .edk-evi__verdict { text-align: left; }
}

/* --- explainer figure panel -----------------------------------------
   "Engineering document made beautiful": white panel, inline SVG
   diagram + caption column. Collapses to one column on mobile. */
.entry-content .edk-figure {
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--neutral-200);
  border-radius: var(--wp--custom--radius--m);
  box-shadow: var(--wp--preset--shadow--card);
  padding: var(--wp--preset--spacing--m);
  margin-top: var(--wp--preset--spacing--l);
  margin-bottom: var(--wp--preset--spacing--l);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--wp--preset--spacing--m);
  align-items: center;
}
.entry-content .edk-figure svg { width: 100%; height: auto; display: block; }
.entry-content .edk-figure__caption h3 {
  margin-top: 0;
  font-size: var(--wp--preset--font-size--title-5);
}
.entry-content .edk-figure__caption p {
  font-size: var(--wp--preset--font-size--text-s);
  color: var(--wp--preset--color--neutral-500);
}
.entry-content .edk-figure__note {
  margin-top: var(--wp--preset--spacing--xs);
  font-size: var(--wp--preset--font-size--text-s);
  color: var(--wp--preset--color--neutral-400);
  text-transform: uppercase;
  letter-spacing: var(--wp--custom--letter-spacing--kicker);
}
@media (max-width: 689.98px) {
  .entry-content .edk-figure { grid-template-columns: 1fr; }
}
/* stacked variant: diagram full width, caption below */
.entry-content .edk-figure--stack { grid-template-columns: 1fr; }
/* two-panel diagrams: separate SVG per panel so mobile stacks them and
   labels keep their size */
.entry-content .edk-figure__duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wp--preset--spacing--s);
}
@media (max-width: 689.98px) {
  .entry-content .edk-figure__duo { grid-template-columns: 1fr; }
}
/* numbered legend (layer diagrams): chip + text rows */
.entry-content .edk-figure__legend {
  list-style: none;
  padding-left: 0;
  margin: var(--wp--preset--spacing--xs) 0 0;
}
.entry-content .edk-figure__legend li {
  display: flex;
  align-items: baseline;
  gap: var(--wp--preset--spacing--2xs);
  padding: calc(var(--wp--preset--spacing--2xs) / 2) 0;
  font-size: var(--wp--preset--font-size--text-s);
}
.entry-content .edk-chip {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--neutral-300);
  font-family: var(--wp--preset--font-family--monospace);
  font-size: var(--wp--preset--font-size--text-s);
  font-weight: 600;
  color: var(--wp--preset--color--neutral-700);
}
.entry-content .edk-chip--jord {
  background: var(--wp--preset--color--primary-100);
  border-color: var(--wp--preset--color--primary-500);
  color: var(--wp--preset--color--primary-700);
}
/* figure text inside the SVGs: tokens can't reach inside inline SVG
   presentation attributes, so diagrams use currentColor + CSS vars via
   these helper classes on the svg element itself */
.entry-content .edk-figure svg text {
  font-family: var(--wp--preset--font-family--body);
}
.entry-content .edk-figure svg .edk-svg-num {
  font-family: var(--wp--preset--font-family--monospace);
}

/* --- stat counters (research snapshot) ------------------------------ */
.entry-content .edk-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wp--preset--spacing--s);
  text-align: center;
  margin: var(--wp--preset--spacing--m) 0;
}
.entry-content .edk-stat__num {
  font-family: var(--wp--preset--font-family--monospace);
  font-size: var(--wp--preset--font-size--title-3);
  font-weight: 600;
  color: var(--wp--preset--color--primary-700);
  display: block;
}
.entry-content .edk-stat__label {
  font-size: var(--wp--preset--font-size--text-s);
  color: var(--wp--preset--color--neutral-500);
}
@media (max-width: 689.98px) {
  .entry-content .edk-stats { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--xs); }
}

/* --- reading-flow images -------------------------------------------- */
.entry-content .wp-block-image.edk-flow-image img {
  border-radius: var(--wp--custom--radius--m);
  box-shadow: var(--wp--preset--shadow--card);
}
.entry-content .wp-block-image.edk-flow-image figcaption {
  text-align: center;
  font-size: var(--wp--preset--font-size--text-s);
  color: var(--wp--preset--color--neutral-500);
}