/* Meridian design system for GoHap. Generated from the active Novamira DESIGN.md.
   Tokens are the single source of truth.

   Division of labour: Spectra containers own LAYOUT (direction, width, gap, alignment)
   through their own block attributes, so everything stays editable in the Spectra
   sidebar. This stylesheet owns IDENTITY: color, type, rhythm, borders and states. */

:root {
  --mrd-bg: #0E1116;
  --mrd-surface: #161A21;
  --mrd-surface-raised: #1E242D;
  --mrd-ink: #F5F6F4;
  --mrd-ink-muted: #9BA5B4;
  --mrd-accent: #E8B33C;
  --mrd-accent-deep: #C08D1C;
  --mrd-line: #272E3A;
  --mrd-invert-bg: #F5F6F4;
  --mrd-invert-ink: #0E1116;
  --mrd-invert-line: #D8DAD5;

  --mrd-font-head: "Bricolage Grotesque", "Public Sans", system-ui, sans-serif;
  --mrd-font-body: "Public Sans", system-ui, sans-serif;

  --mrd-xs: 8px;
  --mrd-sm: 16px;
  --mrd-md: 28px;
  --mrd-lg: 48px;
  --mrd-xl: 88px;
  --mrd-section: 112px;

  --mrd-r-sm: 2px;
  --mrd-r-md: 4px;
  --mrd-r-lg: 8px;

  --mrd-wrap: 1200px;
  --mrd-gutter: 24px;
  --mrd-measure: 66ch;
  --mrd-shadow: 0 24px 48px rgba(6, 9, 14, 0.55);
}

/* ---------------------------------------------------------------- ground */

body.mrd {
  background: var(--mrd-bg);
  color: var(--mrd-ink);
  font-family: var(--mrd-font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

body.mrd #page,
body.mrd #content,
body.mrd .site-content { background: var(--mrd-bg); }

/* Astra full-canvas reset: the design system owns the measure, not the theme. */
body.mrd .site-content .ast-container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
body.mrd .site-content .ast-container > .content-area,
body.mrd #primary {
  width: 100%;
  margin: 0;
  padding: 0;
}
body.mrd .entry-content { margin: 0; }

/* ---------------------------------------------------------------- type */

body.mrd h1, body.mrd h2, body.mrd h3, body.mrd h4 {
  font-family: var(--mrd-font-head);
  font-weight: 700;
  color: var(--mrd-ink);
  letter-spacing: -0.02em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}

body.mrd .mrd-display {
  font-size: clamp(38px, 4.6vw, 66px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 var(--mrd-md);
}

body.mrd .mrd-h2 {
  font-size: clamp(30px, 3.3vw, 44px);
  line-height: 1.06;
  max-width: 20ch;
  margin: 0 0 var(--mrd-sm);
}

body.mrd .mrd-h3 {
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 var(--mrd-xs);
}

body.mrd .mrd-h4 {
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: 0;
  font-weight: 600;
  margin: 0 0 var(--mrd-xs);
}

body.mrd .mrd-lead {
  font-size: clamp(18px, 1.4vw, 20px);
  line-height: 1.6;
  color: var(--mrd-ink);
  max-width: 54ch;
  margin: 0 0 var(--mrd-md);
}

body.mrd .mrd-body {
  font-size: 17px;
  line-height: 1.7;
  color: var(--mrd-ink-muted);
  max-width: var(--mrd-measure);
  margin: 0 0 var(--mrd-sm);
}
body.mrd .mrd-body:last-child { margin-bottom: 0; }
body.mrd .mrd-body strong { color: var(--mrd-ink); font-weight: 600; }

body.mrd .mrd-small {
  font-size: 14px;
  line-height: 1.55;
  color: var(--mrd-ink-muted);
  margin: 0;
}

body.mrd .mrd-eyebrow {
  font-family: var(--mrd-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mrd-accent);
  line-height: 1.4;
  margin: 0 0 var(--mrd-sm);
}

/* ---------------------------------------------------------------- sections */

body.mrd .mrd-section { padding-block: var(--mrd-section); }
body.mrd .mrd-section--tight { padding-block: var(--mrd-xl); }
body.mrd .mrd-section--flush-top { padding-top: var(--mrd-xl); }
body.mrd .mrd-section--surface { background: var(--mrd-surface); }

body.mrd .mrd-section--invert {
  background: var(--mrd-invert-bg);
  color: var(--mrd-invert-ink);
}
body.mrd .mrd-section--invert h1,
body.mrd .mrd-section--invert h2,
body.mrd .mrd-section--invert h3,
body.mrd .mrd-section--invert h4,
body.mrd .mrd-section--invert .mrd-lead { color: var(--mrd-invert-ink); }
body.mrd .mrd-section--invert .mrd-body,
body.mrd .mrd-section--invert .mrd-small,
body.mrd .mrd-section--invert .mrd-figure-label { color: #4C545F; }
body.mrd .mrd-section--invert .mrd-figures,
body.mrd .mrd-section--invert .mrd-figures > * { border-color: var(--mrd-invert-line); }
body.mrd .mrd-section--invert .mrd-btn-secondary .wp-block-button__link {
  border-color: #C3C6C0;
  color: var(--mrd-invert-ink);
}

/* Inner measure. Spectra sets the flex layout; this only caps and centres it.
   Spectra emits `.wp-block-uagb-container.uagb-is-root-container .uagb-block-ID
   { width:100% }` at three-class specificity, so the cap has to outrank it. */
body.mrd .mrd-wrap,
body.mrd .uagb-is-root-container .mrd-wrap,
body.mrd .uagb-is-root-container .uagb-container-inner-blocks-wrap .mrd-wrap {
  width: min(var(--mrd-wrap), calc(100% - (var(--mrd-gutter) * 2)));
  max-width: min(var(--mrd-wrap), calc(100% - (var(--mrd-gutter) * 2)));
  margin-inline: auto;
}

/* ---------------------------------------------------------------- figures */

body.mrd .mrd-figures {
  border-top: 1px solid var(--mrd-line);
  border-bottom: 1px solid var(--mrd-line);
}
body.mrd .mrd-figures > .wp-block-uagb-container {
  border-right: 1px solid var(--mrd-line);
  padding: var(--mrd-md) var(--mrd-md) var(--mrd-md) 0;
}
body.mrd .mrd-figures > .wp-block-uagb-container + .wp-block-uagb-container { padding-left: var(--mrd-md); }
body.mrd .mrd-figures > .wp-block-uagb-container:last-child { border-right: 0; padding-right: 0; }

body.mrd .mrd-figure {
  font-family: var(--mrd-font-head);
  font-size: clamp(36px, 3.6vw, 52px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--mrd-accent);
  margin: 0 0 var(--mrd-xs);
}
body.mrd .mrd-figure-label {
  font-size: 14px;
  line-height: 1.4;
  color: var(--mrd-ink-muted);
  margin: 0;
  max-width: 24ch;
}

/* ---------------------------------------------------------------- panels */

body.mrd .mrd-panel {
  background: var(--mrd-surface);
  border: 1px solid var(--mrd-line);
  border-radius: var(--mrd-r-md);
}
body.mrd .mrd-panel--raised { background: var(--mrd-surface-raised); }
body.mrd .mrd-panel--lg { border-radius: var(--mrd-r-lg); }

body.mrd .mrd-panel--amber {
  background: var(--mrd-accent);
  border-color: var(--mrd-accent);
  color: var(--mrd-invert-ink);
}
body.mrd .mrd-panel--amber h2,
body.mrd .mrd-panel--amber h3,
body.mrd .mrd-panel--amber h4,
body.mrd .mrd-panel--amber .mrd-lead { color: var(--mrd-invert-ink); }
body.mrd .mrd-panel--amber .mrd-body,
body.mrd .mrd-panel--amber .mrd-small,
body.mrd .mrd-panel--amber .mrd-figure-label { color: #3F3111; }
body.mrd .mrd-panel--amber .mrd-figure { color: var(--mrd-invert-ink); }
body.mrd .mrd-panel--amber .mrd-eyebrow { color: #3F3111; }

/* Signature move: one panel per page overlaps the section boundary. */
body.mrd .mrd-offset {
  margin-block-start: calc(var(--mrd-xl) * -1);
  position: relative;
  z-index: 2;
  box-shadow: var(--mrd-shadow);
}

/* ---------------------------------------------------------------- rules */

body.mrd .mrd-rule { border-top: 1px solid var(--mrd-line); }
body.mrd .mrd-step { border-top: 2px solid var(--mrd-accent); padding-top: var(--mrd-md); }
body.mrd .mrd-step--quiet { border-top: 1px solid var(--mrd-line); padding-top: var(--mrd-md); }

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

body.mrd .mrd-btn-primary .wp-block-button__link,
body.mrd a.mrd-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  background: var(--mrd-accent);
  background-image: none;
  color: var(--mrd-invert-ink);
  font-family: var(--mrd-font-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
  border: 1px solid var(--mrd-accent);
  border-radius: var(--mrd-r-md);
  box-shadow: none;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 140ms ease, transform 140ms ease;
}
body.mrd .mrd-btn-primary .wp-block-button__link:hover,
body.mrd a.mrd-btn-primary:hover {
  background: var(--mrd-accent-deep);
  border-color: var(--mrd-accent-deep);
  color: var(--mrd-invert-ink);
  transform: translateY(-1px);
}
body.mrd .mrd-btn-primary .wp-block-button__link:active { transform: translateY(0); }

body.mrd .mrd-btn-secondary .wp-block-button__link,
body.mrd a.mrd-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  background: transparent;
  color: var(--mrd-ink);
  font-family: var(--mrd-font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.1;
  border: 1px solid var(--mrd-line);
  border-radius: var(--mrd-r-md);
  box-shadow: none;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 140ms ease, color 140ms ease;
}
body.mrd .mrd-btn-secondary .wp-block-button__link:hover,
body.mrd a.mrd-btn-secondary:hover {
  border-color: var(--mrd-accent);
  color: var(--mrd-accent);
  background: transparent;
}

/* Primary action sitting on an amber panel: the ground and label swap so the
   contrast stays well above AA without introducing a second accent. */
body.mrd .mrd-btn-onamber .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  background: var(--mrd-invert-ink);
  background-image: none;
  color: var(--mrd-accent);
  font-family: var(--mrd-font-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
  border: 1px solid var(--mrd-invert-ink);
  border-radius: var(--mrd-r-md);
  box-shadow: none;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 140ms ease, transform 140ms ease;
}
body.mrd .mrd-btn-onamber .wp-block-button__link:hover {
  background: #1E242D;
  color: var(--mrd-accent);
  transform: translateY(-1px);
}

body.mrd .mrd-actions { gap: var(--mrd-sm); margin: 0; }

body.mrd a.mrd-link,
body.mrd .mrd-link a {
  color: var(--mrd-accent);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(232, 179, 60, 0.35);
  padding-bottom: 2px;
  transition: border-color 140ms ease;
}
body.mrd a.mrd-link:hover,
body.mrd .mrd-link a:hover { border-bottom-color: var(--mrd-accent); }

/* ---------------------------------------------------------------- lists */

body.mrd ul.mrd-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}
body.mrd ul.mrd-checklist li {
  position: relative;
  padding: var(--mrd-sm) 0 var(--mrd-sm) 30px;
  border-bottom: 1px solid var(--mrd-line);
  color: var(--mrd-ink);
  font-size: 16px;
  line-height: 1.5;
}
body.mrd ul.mrd-checklist li:last-child { border-bottom: 0; }
body.mrd ul.mrd-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 27px;
  width: 14px;
  height: 2px;
  background: var(--mrd-accent);
}
body.mrd .mrd-section--invert ul.mrd-checklist li {
  color: var(--mrd-invert-ink);
  border-bottom-color: var(--mrd-invert-line);
}

/* ---------------------------------------------------------------- media */

body.mrd .mrd-media { margin: 0; width: 100%; }
body.mrd .mrd-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--mrd-r-md);
}
body.mrd .mrd-media--lg img { border-radius: var(--mrd-r-lg); }
body.mrd .mrd-media--cover img { aspect-ratio: 4 / 3; object-fit: cover; }
body.mrd .mrd-media--wide img { aspect-ratio: 16 / 9; object-fit: cover; }
body.mrd .mrd-media figcaption {
  font-size: 14px;
  color: var(--mrd-ink-muted);
  margin-top: var(--mrd-xs);
  text-align: left;
}

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

body.mrd .srfm-input-common,
body.mrd input[type="text"],
body.mrd input[type="email"],
body.mrd input[type="tel"],
body.mrd input[type="url"],
body.mrd textarea,
body.mrd select {
  background: var(--mrd-surface);
  border: 1px solid var(--mrd-line);
  border-radius: var(--mrd-r-sm);
  color: var(--mrd-ink);
  font-family: var(--mrd-font-body);
  font-size: 16px;
  padding: 14px 16px;
  box-shadow: none;
}
body.mrd input::placeholder,
body.mrd textarea::placeholder { color: var(--mrd-ink-muted); opacity: 1; }

body.mrd input:focus,
body.mrd textarea:focus,
body.mrd select:focus {
  outline: none;
  border-color: var(--mrd-accent);
  box-shadow: 0 0 0 2px rgba(232, 179, 60, 0.45);
}

body.mrd .srfm-form label,
body.mrd .srfm-block label { color: var(--mrd-ink); font-family: var(--mrd-font-body); }

body.mrd .srfm-submit-button button,
body.mrd button[type="submit"] {
  background: var(--mrd-accent);
  background-image: none;
  color: var(--mrd-invert-ink);
  font-family: var(--mrd-font-body);
  font-weight: 700;
  font-size: 16px;
  min-height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: var(--mrd-r-md);
  box-shadow: none;
}
body.mrd .srfm-submit-button button:hover,
body.mrd button[type="submit"]:hover { background: var(--mrd-accent-deep); }

/* SureForms builds its entire form from CSS custom properties, so the whole
   form is brought into the system by remapping those variables to Meridian
   tokens. This is preferable to overriding its selectors one by one, and it
   keeps working when the plugin changes its internal markup. */
body.mrd .srfm-form-container,
body.mrd .srfm-form,
body.mrd .srfm-single-page-container {
  --srfm-color-scheme-primary: var(--mrd-accent);
  --srfm-color-scheme-text-on-primary: var(--mrd-invert-ink);
  --srfm-color-scheme-text: var(--mrd-ink);
  --srfm-quill-editor-color: var(--mrd-ink);

  --srfm-color-input-label: var(--mrd-ink);
  --srfm-color-input-description: var(--mrd-ink-muted);
  --srfm-color-input-placeholder: var(--mrd-ink-muted);
  --srfm-color-input-text: var(--mrd-ink);
  --srfm-color-input-prefix: var(--mrd-ink-muted);

  --srfm-color-input-background: var(--mrd-surface);
  --srfm-color-input-background-hover: var(--mrd-surface-raised);
  --srfm-color-input-background-disabled: var(--mrd-surface);
  --srfm-color-input-border: var(--mrd-line);
  --srfm-color-input-border-disabled: var(--mrd-line);
  --srfm-color-input-border-hover: var(--mrd-accent);
  --srfm-color-input-border-focus-glow: rgba(232, 179, 60, 0.25);
  --srfm-color-input-selected: rgba(232, 179, 60, 0.12);
  --srfm-color-multi-choice-svg: var(--mrd-accent);

  --srfm-btn-color-hover: var(--mrd-accent-deep);
  --srfm-btn-color-disabled: var(--mrd-line);

  --srfm-dropdown-input-background-hover: var(--mrd-surface-raised);
  --srfm-dropdown-option-background-hover: var(--mrd-surface-raised);
  --srfm-dropdown-option-background-selected: rgba(232, 179, 60, 0.12);
  --srfm-dropdown-option-text-color: var(--mrd-ink-muted);
  --srfm-dropdown-option-selected-text: var(--mrd-ink);
  --srfm-dropdown-menu-border-color: var(--mrd-line);
  --srfm-dropdown-placeholder-color: var(--mrd-ink-muted);
  --srfm-dropdown-icon-color: var(--mrd-ink-muted);

  --srfm-input-field-border-radius: var(--mrd-r-sm);
  --srfm-btn-border-radius: var(--mrd-r-md);

  --srfm-instant-form-border-radius-top: var(--mrd-r-md);
  --srfm-instant-form-border-radius-right: var(--mrd-r-md);
  --srfm-instant-form-border-radius-bottom: var(--mrd-r-md);
  --srfm-instant-form-border-radius-left: var(--mrd-r-md);
}

/* The form sits directly on the section ground rather than in its own card. */
body.mrd .srfm-form-container.srfm-bg-color,
body.mrd .srfm-form-container {
  background: transparent;
  padding: 0;
}
body.mrd .srfm-block-label,
body.mrd .srfm-block label {
  font-family: var(--mrd-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--mrd-ink);
}
body.mrd .srfm-form-container .srfm-form .srfm-block .srfm-input-common,
body.mrd .srfm-form-container .srfm-form .srfm-block textarea.srfm-input-common {
  border-radius: var(--mrd-r-sm);
}
body.mrd .srfm-btn-frontend,
body.mrd .srfm-form-container .srfm-form .srfm-submit-button {
  border-radius: var(--mrd-r-md);
  font-family: var(--mrd-font-body);
  font-weight: 700;
}

body.mrd .srfm-required { color: var(--mrd-accent); }
body.mrd .srfm-description { color: var(--mrd-ink-muted); font-size: 14px; }
body.mrd .srfm-error-message { color: var(--mrd-accent); font-size: 14px; }

/* ---------------------------------------------------------------- faq */

body.mrd .uagb-faq-child__outer-wrap { border-bottom: 1px solid var(--mrd-line); }
body.mrd .uagb-faq-questions,
body.mrd .uagb-question {
  font-family: var(--mrd-font-head);
  font-weight: 700;
  color: var(--mrd-ink);
}
body.mrd .uagb-faq-item .uagb-faq-content,
body.mrd .uagb-faq-item .uagb-faq-content p {
  color: var(--mrd-ink-muted);
  font-family: var(--mrd-font-body);
}

/* ---------------------------------------------------------------- header + footer */

/* Sticky header. Astra's own sticky option is a Pro feature, so it is done
   here with position:sticky, which needs no script and cannot jitter on scroll.
   The admin bar offset only applies to logged in users. */
body.mrd .site-header {
  position: sticky;
  top: 0;
  z-index: 99;
}
body.mrd.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
  body.mrd.admin-bar .site-header { top: 46px; }
}

body.mrd .site-header,
body.mrd .ast-primary-header-bar,
body.mrd .main-header-bar,
body.mrd .ast-header-break-point .main-header-bar {
  background: var(--mrd-bg);
  border-bottom: 1px solid var(--mrd-line);
}

/* A hairline alone can disappear over a dark panel, so the stuck header also
   carries a tinted shadow once the page has moved. */
body.mrd .site-header {
  box-shadow: 0 1px 0 var(--mrd-line), 0 10px 30px rgba(6, 9, 14, 0.45);
}
/* Astra injects its own palette for .menu-link at high specificity, so the
   header nav is claimed explicitly rather than inherited. */
body.mrd .site-header .menu-link,
body.mrd .main-header-menu .menu-link,
body.mrd .ast-builder-menu .menu-link,
body.mrd .ast-header-break-point .main-navigation .menu-link,
body.mrd .site-title a {
  color: var(--mrd-ink) !important;
  font-family: var(--mrd-font-body);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0;
}
body.mrd .site-header .menu-link:hover,
body.mrd .site-header .current-menu-item > .menu-link,
body.mrd .site-header .current_page_item > .menu-link {
  color: var(--mrd-accent) !important;
}

/* Header call to action carries the same primary treatment as the page buttons. */
body.mrd .site-header .ast-custom-button,
body.mrd .site-header .ast-button-wrap .ast-custom-button {
  background: var(--mrd-accent) !important;
  color: var(--mrd-invert-ink) !important;
  border-radius: var(--mrd-r-md) !important;
  font-family: var(--mrd-font-body) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
body.mrd .ast-builder-menu-mobile .main-navigation,
body.mrd .ast-mobile-popup-drawer .ast-mobile-popup-inner { background: var(--mrd-bg); }
body.mrd .ast-mobile-menu-trigger-minimal,
body.mrd .ast-mobile-menu-trigger-fill { color: var(--mrd-ink); }
/* Astra ships the mobile toggle as an SVG filled from its own global palette,
   through a four-part selector. Matched here at equal weight rather than with
   !important, so a later Astra setting can still take over cleanly. */
body.mrd .ast-mobile-svg,
body.mrd .ast-menu-svg,
body.mrd .ast-close-svg,
body.mrd .menu-toggle svg { fill: var(--mrd-ink); }

body.mrd [data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg,
body.mrd [data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon .ast-menu-svg,
body.mrd [data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon .ast-close-svg {
  fill: var(--mrd-ink);
}
body.mrd [data-section="section-header-mobile-trigger"] .ast-button-wrap:hover .mobile-menu-toggle-icon .ast-mobile-svg {
  fill: var(--mrd-accent);
}

body.mrd .site-footer,
body.mrd .ast-small-footer,
body.mrd .site-below-footer-wrap,
body.mrd .site-primary-footer-wrap {
  background: var(--mrd-bg);
  border-top: 1px solid var(--mrd-line);
  color: var(--mrd-ink-muted);
}
body.mrd .site-footer a { color: var(--mrd-ink-muted); }
body.mrd .site-footer a:hover { color: var(--mrd-accent); }

/* Footer content, set as real markup in Astra's footer rather than
   injected through ::before/::after as the previous design did. */
body.mrd .mrd-footer-brand {
  font-family: var(--mrd-font-head);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--mrd-ink);
  margin: 0 0 var(--mrd-sm);
}
body.mrd .mrd-footer-meta {
  font-size: 16px;
  color: var(--mrd-ink-muted);
  margin: 0 0 var(--mrd-xs);
}
body.mrd .mrd-footer-meta a { color: var(--mrd-accent); text-decoration: none; }
body.mrd .mrd-footer-meta a:hover { text-decoration: underline; }
body.mrd .mrd-footer-legal {
  font-size: 14px;
  color: var(--mrd-ink-muted);
  margin: 0;
}

body.mrd #ast-scroll-top,
body.mrd .ast-scroll-to-top-right {
  background: var(--mrd-accent) !important;
  background-image: none !important;
  color: var(--mrd-invert-ink) !important;
  border-radius: var(--mrd-r-md) !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------------- blog + article */
/* Astra's separate-container layout paints .ast-article-inner with its own
   global white. That element is claimed here as the Meridian card: a surface
   panel on the page ground, hairline bordered, equal height across the row. */

body.mrd.blog .site-content,
body.mrd.archive .site-content,
body.mrd.single-post .site-content {
  background: var(--mrd-bg);
  padding-block: 0 var(--mrd-section);
}

body.mrd.blog .site-content > .ast-container,
body.mrd.archive .site-content > .ast-container,
body.mrd.single-post .site-content > .ast-container {
  width: min(var(--mrd-wrap), calc(100% - (var(--mrd-gutter) * 2)));
  max-width: min(var(--mrd-wrap), calc(100% - (var(--mrd-gutter) * 2)));
  margin-inline: auto;
  padding: 0;
}
body.mrd.single-post .site-content > .ast-container {
  width: min(760px, calc(100% - (var(--mrd-gutter) * 2)));
  max-width: min(760px, calc(100% - (var(--mrd-gutter) * 2)));
}

/* Archive header, rendered through astra_primary_content_top. */
body.mrd .mrd-blog-header {
  padding-block: var(--mrd-xl) var(--mrd-lg);
  border-bottom: 1px solid var(--mrd-line);
  margin-bottom: var(--mrd-lg);
}
body.mrd .mrd-blog-header-inner { max-width: 780px; }
body.mrd .mrd-display--sm {
  font-size: clamp(32px, 3.8vw, 50px);
  margin-bottom: var(--mrd-sm);
}

/* ---- the card grid ---- */

body.mrd.blog .ast-row,
body.mrd.archive .ast-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mrd-md);
  margin: 0;
  align-items: stretch;
}

body.mrd.blog .ast-article-post,
body.mrd.archive .ast-article-post {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex;
}

/* The card itself. */
body.mrd.blog .ast-separate-container .ast-article-inner,
body.mrd.archive .ast-separate-container .ast-article-inner,
body.mrd.blog .ast-article-inner,
body.mrd.archive .ast-article-inner {
  background: var(--mrd-surface);
  border: 1px solid var(--mrd-line);
  border-radius: var(--mrd-r-md);
  box-shadow: none;
  padding: var(--mrd-md);
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  transition: border-color 160ms ease, transform 160ms ease, background-color 160ms ease;
}
body.mrd.blog .ast-article-inner:hover,
body.mrd.archive .ast-article-inner:hover {
  border-color: var(--mrd-accent);
  background: var(--mrd-surface-raised);
  transform: translateY(-2px);
}

body.mrd.blog .ast-article-inner > .post-content,
body.mrd.archive .ast-article-inner > .post-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Featured image sits full bleed at the top of the card, so the card padding
   is moved onto the text block instead of the card shell. An empty slot is
   still removed rather than left to open a gap. */
body.mrd .ast-blog-featured-section:empty { display: none; }

body.mrd.blog .ast-article-inner:has(.post-thumb img),
body.mrd.archive .ast-article-inner:has(.post-thumb img) { padding: 0; }

body.mrd.blog .ast-article-inner:has(.post-thumb img) > .post-content,
body.mrd.archive .ast-article-inner:has(.post-thumb img) > .post-content { padding: var(--mrd-md); }

/* Astra renders the thumb outside .post-content's padding box, so it already
   sits flush with the card edges. Only the gap below it is set here. */
body.mrd .ast-blog-featured-section.post-thumb {
  margin: 0 0 var(--mrd-md);
  overflow: hidden;
  border-bottom: 1px solid var(--mrd-line);
  border-radius: var(--mrd-r-md) var(--mrd-r-md) 0 0;
}
body.mrd .ast-blog-featured-section.post-thumb a,
body.mrd .ast-blog-featured-section.post-thumb .post-thumb-img-content { display: block; margin: 0; }
body.mrd .ast-blog-featured-section.post-thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;
  transition: transform 400ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
body.mrd .ast-article-inner:hover .ast-blog-featured-section.post-thumb img { transform: scale(1.03); }

/* The single post header image runs wider than the text measure. */
body.mrd.single-post .post-thumb img,
body.mrd.single-post .ast-single-post-featured-section img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--mrd-r-lg);
}

/* Category, set as a quiet chip rather than Astra's link blue. */
body.mrd .ast-taxonomy-container,
body.mrd .ast-taxonomy-container.cat-links { margin: 0 0 var(--mrd-sm); display: block; }
body.mrd .ast-taxonomy-container a,
body.mrd .cat-links a {
  display: inline-block;
  font-family: var(--mrd-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mrd-accent);
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid rgba(232, 179, 60, 0.35);
  border-radius: var(--mrd-r-sm);
  transition: border-color 140ms ease, background-color 140ms ease;
}
body.mrd .ast-taxonomy-container a:hover,
body.mrd .cat-links a:hover {
  border-color: var(--mrd-accent);
  background: rgba(232, 179, 60, 0.1);
}

body.mrd.blog .entry-title,
body.mrd.archive .entry-title {
  font-family: var(--mrd-font-head);
  font-size: 21px;
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin: 0 0 var(--mrd-xs);
}
body.mrd.blog .entry-title a,
body.mrd.archive .entry-title a { color: var(--mrd-ink); text-decoration: none; }
body.mrd.blog .entry-title a:hover,
body.mrd.archive .entry-title a:hover { color: var(--mrd-accent); }

body.mrd.blog .entry-header,
body.mrd.archive .entry-header { margin: 0 0 var(--mrd-sm); padding: 0; border: 0; }
body.mrd.blog .entry-meta,
body.mrd.archive .entry-meta,
body.mrd.blog .entry-meta *,
body.mrd.archive .entry-meta * {
  color: var(--mrd-ink-muted);
  font-size: 13px;
  font-weight: 500;
}
body.mrd.blog .entry-meta a,
body.mrd.archive .entry-meta a { color: var(--mrd-ink-muted); text-decoration: none; }
body.mrd.blog .entry-meta a:hover,
body.mrd.archive .entry-meta a:hover { color: var(--mrd-accent); }

body.mrd .ast-excerpt-container,
body.mrd .ast-excerpt-container p {
  color: var(--mrd-ink-muted);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}
body.mrd .ast-excerpt-container { margin-bottom: var(--mrd-md); }

/* Read more sits on the card floor so every card ends on the same line. */
body.mrd .ast-readmore-wrapper,
body.mrd .read-more { margin-top: auto; padding-top: var(--mrd-sm); }
body.mrd .ast-readmore-wrapper a,
body.mrd .read-more a {
  color: var(--mrd-accent);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}
body.mrd .ast-readmore-wrapper a:hover,
body.mrd .read-more a:hover { text-decoration: underline; }

/* Pagination */
body.mrd .ast-pagination { margin-top: var(--mrd-lg); }
body.mrd .ast-pagination .page-numbers {
  color: var(--mrd-ink-muted);
  border: 1px solid var(--mrd-line);
  border-radius: var(--mrd-r-sm);
  padding: 8px 14px;
  text-decoration: none;
}
body.mrd .ast-pagination .page-numbers.current,
body.mrd .ast-pagination .page-numbers:hover {
  color: var(--mrd-invert-ink);
  background: var(--mrd-accent);
  border-color: var(--mrd-accent);
}

/* ---- single post ---- */

body.mrd.single-post .ast-article-inner,
body.mrd.single-post article {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  max-width: none;
}
body.mrd.single-post .entry-header { padding-top: var(--mrd-xl); }
body.mrd.single-post .entry-title {
  font-family: var(--mrd-font-head);
  font-size: clamp(32px, 4vw, 50px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--mrd-ink);
  margin-bottom: var(--mrd-sm);
}
body.mrd.single-post .entry-content {
  font-size: 18px;
  line-height: 1.75;
  color: var(--mrd-ink-muted);
}
body.mrd.single-post .entry-content h2,
body.mrd.single-post .entry-content h3 {
  color: var(--mrd-ink);
  letter-spacing: -0.02em;
  margin-top: 1.6em;
  margin-bottom: 0.5em;
}
body.mrd.single-post .entry-content a { color: var(--mrd-accent); font-weight: 600; }
body.mrd.single-post .entry-content blockquote {
  border-left: 2px solid var(--mrd-accent);
  padding-left: var(--mrd-md);
  margin-left: 0;
  color: var(--mrd-ink);
}

@media (max-width: 900px) {
  body.mrd.blog .ast-row,
  body.mrd.archive .ast-row { grid-template-columns: 1fr; gap: var(--mrd-sm); }
  body.mrd .mrd-blog-header { padding-block: var(--mrd-lg) var(--mrd-md); }
}
/* ---------------------------------------------------------------- motion */
/* motion dial 0.35: transform and opacity only, and it degrades to visible. */

@media (prefers-reduced-motion: no-preference) {
  body.mrd .mrd-rise { animation: mrd-rise 620ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }
}
@keyframes mrd-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- responsive */
/* Spectra handles the column collapse through directionMobile/widthMobile.
   These only retune rhythm and the figure band's dividers. */

@media (max-width: 900px) {
  :root {
    --mrd-section: 72px;
    --mrd-xl: 56px;
    --mrd-lg: 32px;
  }
  body.mrd .mrd-offset { margin-block-start: 0; box-shadow: none; }
  body.mrd .mrd-figures > .wp-block-uagb-container {
    border-right: 0;
    border-bottom: 1px solid var(--mrd-line);
    padding: var(--mrd-sm) 0;
  }
  body.mrd .mrd-figures > .wp-block-uagb-container + .wp-block-uagb-container { padding-left: 0; }
  body.mrd .mrd-figures > .wp-block-uagb-container:last-child { border-bottom: 0; }
  body.mrd .mrd-h2 { max-width: none; }
}

@media (max-width: 560px) {
  body.mrd .mrd-actions { width: 100%; }
  body.mrd .mrd-actions .wp-block-button { width: 100%; }
  body.mrd .mrd-actions .wp-block-button__link { width: 100%; }
}

/* ---------------------------------------------------------------- scroll to top */
/* Astra's own control is enabled; this brings it onto the palette. Square-ish
   at the system radius rather than Astra's default circle, so it matches the
   buttons rather than floating in as a different shape language. */

body.mrd #ast-scroll-top {
  background: var(--mrd-accent);
  color: var(--mrd-invert-ink);
  border: 1px solid var(--mrd-accent);
  border-radius: var(--mrd-r-md);
  width: 44px;
  height: 44px;
  /* Astra toggles this button's display to show and hide it on scroll, so the
     icon is centred with line-height rather than by forcing a flex display. */
  line-height: 42px;
  text-align: center;
  box-shadow: 0 10px 24px rgba(6, 9, 14, 0.5);
  transition: background-color 140ms ease, transform 140ms ease;
}
body.mrd #ast-scroll-top:hover {
  background: var(--mrd-accent-deep);
  border-color: var(--mrd-accent-deep);
  transform: translateY(-2px);
}
body.mrd #ast-scroll-top .ast-icon svg,
body.mrd #ast-scroll-top svg {
  fill: var(--mrd-invert-ink);
  color: var(--mrd-invert-ink);
  width: 15px;
  height: 15px;
}
body.mrd #ast-scroll-top:focus-visible {
  outline: 2px solid var(--mrd-ink);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- footer detail */
/* Three columns in Astra's primary footer row, with the brand column given
   more room than the two link columns, then a quiet legal bar beneath. */

body.mrd .site-primary-footer-wrap {
  padding-block: var(--mrd-xl);
  border-top: 1px solid var(--mrd-line);
}
/* Astra nests the row inside .ast-builder-grid-row-container-inner, so this is
   a descendant match rather than a direct child. The brand column earns more
   room than the two link columns. */
body.mrd .site-primary-footer-wrap .ast-builder-grid-row {
  width: min(var(--mrd-wrap), calc(100% - (var(--mrd-gutter) * 2)));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.1fr;
  gap: var(--mrd-lg);
  align-items: start;
}
body.mrd .site-primary-footer-wrap .site-footer-section { display: block; }

/* Astra centres footer items by default, which left the brand and contact
   columns centred against a left aligned menu. All three read as one row. */
body.mrd .site-footer .site-footer-section,
body.mrd .site-footer .ast-builder-html-element,
body.mrd .site-footer .ast-header-html,
body.mrd .site-footer .site-footer-focus-item,
body.mrd .site-below-footer-wrap .ast-footer-copyright {
  text-align: left;
}
body.mrd .site-footer .site-footer-focus-item { justify-content: flex-start; }

body.mrd .mrd-f-title {
  font-family: var(--mrd-font-head);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--mrd-ink);
  margin: 0 0 var(--mrd-sm);
}
body.mrd .mrd-f-head {
  font-family: var(--mrd-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mrd-accent);
  margin: 0 0 var(--mrd-sm);
}
body.mrd .mrd-f-text {
  font-size: 15px;
  line-height: 1.65;
  color: var(--mrd-ink-muted);
  margin: 0 0 var(--mrd-sm);
  max-width: 44ch;
}
body.mrd .mrd-f-text:last-child { margin-bottom: 0; }
body.mrd .mrd-f-muted { color: #7C8695; font-size: 14px; }
body.mrd .mrd-f-text a {
  color: var(--mrd-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--mrd-line);
  transition: border-color 140ms ease, color 140ms ease;
}
body.mrd .mrd-f-text a:hover { color: var(--mrd-accent); border-bottom-color: var(--mrd-accent); }

/* Footer navigation, stacked as a link column. */
body.mrd .site-footer .ast-footer-menu,
body.mrd .site-footer .footer-nav-wrap ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.mrd .site-footer .ast-footer-menu li { margin: 0; }
body.mrd .site-footer .ast-footer-menu a {
  color: var(--mrd-ink-muted);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  padding: 0;
  transition: color 140ms ease;
}
body.mrd .site-footer .ast-footer-menu a:hover { color: var(--mrd-accent); background: transparent; }

/* Legal bar. */
body.mrd .site-below-footer-wrap {
  padding-block: var(--mrd-md);
  border-top: 1px solid var(--mrd-line);
}
/* Astra lays the below-footer row out as a grid sized to its single zone, which
   collapsed the legal bar to the width of its own text. Blocked out so the bar
   spans the same measure as the rest of the page. */
body.mrd .site-below-footer-wrap { display: block; }
body.mrd .site-below-footer-wrap .ast-builder-grid-row-container-inner { width: 100%; }
body.mrd .site-below-footer-wrap .ast-builder-grid-row {
  display: block;
  width: min(var(--mrd-wrap), calc(100% - (var(--mrd-gutter) * 2)));
  max-width: none;
  margin-inline: auto;
}
body.mrd .site-below-footer-wrap .site-footer-focus-item { width: 100%; }
body.mrd .ast-footer-copyright,
body.mrd .ast-footer-copyright p {
  font-size: 13px;
  color: #7C8695;
  margin: 0;
}

@media (max-width: 921px) {
  /* Astra only collapses this row when the container carries its
     `ast-builder-grid-row-mobile-full` class, which it does not here, so the
     three columns survived down to 375px and wrapped "About" to "Ab / out".
     Matched at Astra's own 921px breakpoint and at the same selector depth. */
  body.mrd .site-primary-footer-wrap .ast-builder-grid-row,
  body.mrd .ast-builder-grid-row-container.ast-builder-grid-row-tablet-3-equal .ast-builder-grid-row,
  body.mrd .ast-builder-grid-row-3-equal .ast-builder-grid-row {
    grid-template-columns: 1fr;
    gap: var(--mrd-md);
  }
  body.mrd .site-primary-footer-wrap { padding-block: var(--mrd-lg); }
  body.mrd .mrd-f-text { max-width: none; }
  body.mrd .ast-footer-copyright,
  body.mrd .ast-footer-copyright p { text-align: left; }
}
/* ---------------------------------------------------------------- mobile nav */
/* Astra's mobile menu paints .menu-link, .main-header-menu and
   .ast-mobile-header-content with its own global white, which left bone text
   on a white panel and made the open menu unreadable. Astra's own breakpoint
   is 921px, so these match it exactly. */

@media (max-width: 921px) {

  /* The header is sticky on desktop only. On a short mobile viewport a pinned
     bar costs more than it gives, and it collides with the open menu panel. */
  body.mrd .site-header {
    position: static;
    box-shadow: none;
    border-bottom: 1px solid var(--mrd-line);
  }
  body.mrd.admin-bar .site-header { top: auto; }

  /* Every surface the open menu paints. */
  body.mrd .ast-mobile-header-content,
  body.mrd .main-header-bar-navigation,
  body.mrd .main-header-menu,
  body.mrd .main-header-menu.ast-nav-menu,
  body.mrd .ast-nav-menu,
  body.mrd .main-navigation,
  body.mrd .ast-mobile-popup-drawer .ast-mobile-popup-inner,
  body.mrd .ast-mobile-popup-content,
  body.mrd .menu-link,
  body.mrd .main-header-menu .menu-link,
  body.mrd .main-header-menu .sub-menu,
  body.mrd .main-header-menu .sub-menu .menu-link {
    background-color: var(--mrd-bg);
    background-image: none;
  }

  body.mrd .main-header-menu .menu-item { border: 0; }
  body.mrd .main-header-menu > .menu-item + .menu-item { border-top: 1px solid var(--mrd-line); }

  body.mrd .main-header-menu .menu-link,
  body.mrd .main-header-menu a,
  body.mrd .ast-mobile-header-content a {
    color: var(--mrd-ink);
    font-family: var(--mrd-font-body);
    font-size: 17px;
    font-weight: 500;
    padding: 16px 20px;
  }

  body.mrd .main-header-menu .menu-link:hover,
  body.mrd .main-header-menu .menu-link:focus,
  body.mrd .main-header-menu .current-menu-item > .menu-link,
  body.mrd .main-header-menu .current_page_item > .menu-link,
  body.mrd .ast-mobile-header-content a:hover {
    color: var(--mrd-accent);
    background-color: var(--mrd-surface);
  }

  /* Sub menu items sit one step in and one step quieter. */
  body.mrd .main-header-menu .sub-menu .menu-link {
    color: var(--mrd-ink-muted);
    padding-left: 34px;
    font-size: 16px;
  }
  body.mrd .main-header-menu .sub-menu .menu-link:hover { color: var(--mrd-accent); }

  /* Burger and close icons. */
  body.mrd .menu-toggle,
  body.mrd .menu-toggle.main-header-menu-toggle,
  body.mrd .ast-mobile-menu-trigger-minimal,
  body.mrd .ast-mobile-menu-trigger-fill,
  body.mrd .ast-mobile-menu-trigger-outline {
    background: transparent;
    color: var(--mrd-ink);
    border-color: var(--mrd-line);
  }
  body.mrd .menu-toggle .ast-mobile-svg,
  body.mrd .menu-toggle svg,
  body.mrd .ast-button-wrap .menu-toggle svg { fill: var(--mrd-ink); }
  body.mrd .menu-toggle:hover svg { fill: var(--mrd-accent); }

  /* Toggle arrows on expandable items. */
  body.mrd .ast-menu-toggle,
  body.mrd .ast-menu-toggle svg { color: var(--mrd-ink); fill: var(--mrd-ink); background: transparent; }
}
/* Astra prints an inline rule at
   `.ast-builder-menu-mobile .main-navigation .main-header-menu .menu-link`
   (four classes) filling the links with --ast-global-color-4, which is white.
   These selectors carry the same depth so the ground wins on specificity
   rather than on !important. */

@media (max-width: 921px) {
  body.mrd .ast-builder-menu-mobile .main-navigation .main-header-menu,
  body.mrd .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item,
  body.mrd .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-link,
  body.mrd .ast-builder-menu-mobile .main-navigation .main-header-menu .sub-menu,
  body.mrd .ast-builder-menu-mobile .main-navigation .main-header-menu .sub-menu .menu-link {
    background-color: var(--mrd-bg);
    background-image: none;
    color: var(--mrd-ink);
  }

  body.mrd .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-link:hover,
  body.mrd .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-link:focus,
  body.mrd .ast-builder-menu-mobile .main-navigation .main-header-menu .current-menu-item > .menu-link,
  body.mrd .ast-builder-menu-mobile .main-navigation .main-header-menu .current_page_item > .menu-link {
    background-color: var(--mrd-surface);
    color: var(--mrd-accent);
  }

  body.mrd .ast-builder-menu-mobile .main-navigation .main-header-menu .sub-menu .menu-link {
    color: var(--mrd-ink-muted);
  }

  body.mrd .ast-builder-menu-mobile .main-navigation .main-header-menu > .menu-item + .menu-item {
    border-top: 1px solid var(--mrd-line);
  }
}
/* ---------------------------------------------------------------- single post fix */
/* On a single post Astra's boxed layout paints the <article> element itself with
   its global white, and there is no .ast-article-inner to catch. Bone headings
   were landing on that white panel and disappearing. The Spectra root container
   also ran wider than the 760px reading measure and broke out of its parent. */

body.mrd.single-post .site-main article,
body.mrd.single-post article.ast-article-post,
body.mrd.single-post .ast-separate-container article,
body.mrd.single-post .ast-separate-container .ast-article-post,
body.mrd.single-post .ast-separate-container .ast-article-single,
body.mrd.single-page .site-main article,
body.mrd.single-page .ast-separate-container article,
body.mrd.page .ast-separate-container article {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

/* The converted article body inherits the reading measure from its parent
   rather than setting its own wider one. */
body.mrd.single-post .uagb-is-root-container,
body.mrd.single-post .wp-block-uagb-container.uagb-is-root-container {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  padding-left: 0;
  padding-right: 0;
}
body.mrd.single-post .mrd-section { padding-block: 0 var(--mrd-xl); }
body.mrd.single-post .mrd-article { width: 100%; }

/* Rhythm for the converted body copy. */
body.mrd.single-post .entry-content .mrd-h2 { margin-top: var(--mrd-lg); }
body.mrd.single-post .entry-content .mrd-h3 { margin-top: var(--mrd-md); }
body.mrd.single-post .entry-content .mrd-body { margin-bottom: var(--mrd-sm); }
body.mrd.single-post .entry-content .wp-block-table { margin-block: var(--mrd-md); }
body.mrd.single-post .entry-content .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
body.mrd.single-post .entry-content .wp-block-table th,
body.mrd.single-post .entry-content .wp-block-table td {
  border: 1px solid var(--mrd-line);
  padding: 10px 14px;
  color: var(--mrd-ink-muted);
  text-align: left;
}
body.mrd.single-post .entry-content .wp-block-table th {
  color: var(--mrd-ink);
  font-weight: 700;
  background: var(--mrd-surface);
}

/* Preserved interactive tools keep their own look but sit on the dark ground. */
body.mrd .entry-content > .wp-block-html,
body.mrd .mrd-article .wp-block-html {
  display: block;
  margin-block: var(--mrd-lg);
}
/* Post byline: Astra renders the author and date as ordinary links, which came
   through in its default link blue against the dark ground. */
body.mrd.single-post .entry-meta,
body.mrd.single-post .entry-meta *,
body.mrd.single-post .post-meta,
body.mrd.single-post .ast-single-post-meta,
body.mrd.single-post .ast-blog-meta-container {
  color: var(--mrd-ink-muted);
  font-size: 14px;
  font-weight: 500;
}
body.mrd.single-post .entry-meta a,
body.mrd.single-post .ast-single-post-meta a,
body.mrd.single-post .post-meta a {
  color: var(--mrd-ink-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
body.mrd.single-post .entry-meta a:hover,
body.mrd.single-post .ast-single-post-meta a:hover {
  color: var(--mrd-accent);
  border-bottom-color: var(--mrd-accent);
}

/* Featured image above the article, at the reading measure. */
body.mrd.single-post .post-thumb,
body.mrd.single-post .ast-single-post-featured-section {
  margin: 0 0 var(--mrd-lg);
}
body.mrd.single-post .post-thumb img,
body.mrd.single-post .ast-single-post-featured-section img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--mrd-r-lg);
}
/* Single post title, set at the article measure above the byline. */
body.mrd.single-post .entry-header { padding-top: 0; margin-bottom: var(--mrd-md); }
body.mrd.single-post .entry-title,
body.mrd.single-post h1.entry-title {
  font-family: var(--mrd-font-head);
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--mrd-ink);
  margin: 0 0 var(--mrd-sm);
  max-width: 22ch;
}
/* ---------------------------------------------------------------- converted article measure */
/* The built landing pages supply their own .mrd-wrap, so the theme container is
   stripped of its padding site wide. Converted articles have no such wrapper, so
   without a measure of their own they ran to the viewport edge and clipped. */

body.mrd .entry-content .mrd-article {
  width: min(820px, calc(100% - (var(--mrd-gutter) * 2)));
  margin-inline: auto;
}

/* On a single post the reading measure is already set by the theme container,
   so the article fills it rather than insetting a second time. */
body.mrd.single-post:not(.page) .entry-content .mrd-article {
  width: 100%;
  margin-inline: 0;
}

/* Spectra's alignfull rule pulls root containers out by half the scrollbar
   width, which showed as a few pixels of overhang on converted pages. */
body.mrd .entry-content .uagb-is-root-container {
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
}

/* Emoji headings and Astra-blue buttons survive inside preserved widgets, so
   the interactive blocks are brought onto the palette without touching their
   markup. */
body.mrd .wp-block-html button,
body.mrd .wp-block-html .btn,
body.mrd .wp-block-html a.button {
  background: var(--mrd-accent);
  background-image: none;
  color: var(--mrd-invert-ink);
  border: 1px solid var(--mrd-accent);
  border-radius: var(--mrd-r-md);
  font-family: var(--mrd-font-body);
  font-weight: 700;
  box-shadow: none;
}
body.mrd .wp-block-html button:hover,
body.mrd .wp-block-html .btn:hover {
  background: var(--mrd-accent-deep);
  border-color: var(--mrd-accent-deep);
}
body.mrd .wp-block-html a { color: var(--mrd-accent); }
body.mrd .wp-block-html h1,
body.mrd .wp-block-html h2,
body.mrd .wp-block-html h3,
body.mrd .wp-block-html h4 {
  font-family: var(--mrd-font-head);
  color: var(--mrd-ink);
}
body.mrd .wp-block-html p,
body.mrd .wp-block-html li,
body.mrd .wp-block-html td,
body.mrd .wp-block-html span { color: var(--mrd-ink-muted); }
/* core/html renders its payload with no wrapper element, so preserved widgets
   cannot be reached through .wp-block-html. They are styled by their own class
   names instead, which the legacy markup keeps. */

body.mrd .mrd-article button,
body.mrd .mrd-article .action-btn,
body.mrd .mrd-article .btn,
body.mrd .mrd-article .calc-btn,
body.mrd .mrd-article input[type="submit"],
body.mrd .mrd-article input[type="button"] {
  background: var(--mrd-accent);
  background-image: none;
  color: var(--mrd-invert-ink);
  border: 1px solid var(--mrd-accent);
  border-radius: var(--mrd-r-md);
  font-family: var(--mrd-font-body);
  font-weight: 700;
  font-size: 15px;
  padding: 12px 20px;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 140ms ease;
}
body.mrd .mrd-article button:hover,
body.mrd .mrd-article .action-btn:hover,
body.mrd .mrd-article .btn:hover {
  background: var(--mrd-accent-deep);
  border-color: var(--mrd-accent-deep);
}

/* Panels and cards inside preserved widgets. */
body.mrd .mrd-article .right-card,
body.mrd .mrd-article .rights-section,
body.mrd .mrd-article .calculator,
body.mrd .mrd-article .calc-section,
body.mrd .mrd-article .tool-section {
  background: var(--mrd-surface);
  border: 1px solid var(--mrd-line);
  border-radius: var(--mrd-r-md);
  padding: var(--mrd-md);
  margin-block: var(--mrd-md);
}
body.mrd .mrd-article .rights-grid,
body.mrd .mrd-article .rights-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--mrd-sm);
}

/* Page titles sit at the same measure as the converted article. */
body.mrd.page .entry-title,
body.mrd.page h1.entry-title,
body.mrd.page .ast-archive-description {
  width: min(820px, calc(100% - (var(--mrd-gutter) * 2)));
  margin-inline: auto;
  font-family: var(--mrd-font-head);
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--mrd-ink);
  padding-top: var(--mrd-xl);
}
body.mrd.page .entry-header { margin-bottom: 0; }
/* Links inside converted articles and preserved widgets. */
body.mrd .mrd-article a,
body.mrd .entry-content .mrd-body a {
  color: var(--mrd-accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(232, 179, 60, 0.35);
}
body.mrd .mrd-article a:hover,
body.mrd .entry-content .mrd-body a:hover { border-bottom-color: var(--mrd-accent); }
body.mrd .mrd-article a.action-btn,
body.mrd .mrd-article button a { border-bottom: 0; }
/* Legacy chrome kept in the markup only so the preserved tool scripts can bind
   to it on load. The theme supplies the real versions of all of these. */
body.mrd .mrd-article .reading-progress,
body.mrd .mrd-article .reading-progress-bar,
body.mrd .mrd-article .back-to-top,
body.mrd .mrd-article button.back-to-top,
body.mrd .mrd-article .toc-wrapper,
body.mrd .mrd-article .toc-section,
body.mrd .mrd-article .toc-container,
body.mrd .entry-content .reading-progress,
body.mrd .entry-content .back-to-top {
  display: none;
}