/* ==========================================================
   MM BASE
   Blueprint base styles and colour-role overrides.
   Role defaults (--text-muted, --accent, --accent-contrast)
   live in Bricks global variables, category "MM · Roles".
   ========================================================== */

.brxe-text * + li,
.brxe-post-content:not([data-source=bricks]) * li,
body:not(.woocommerce-checkout) [class*=woocommerce] * + li {
  margin-block-start: 0.5em;
}

/* Inline utility used inside text (e.g. a span in a heading).
   Lives here because Bricks only outputs global class CSS
   for classes attached to elements. */
.text-highlight {
  color: var(--secondary);
}

/* Dark sections */
.section--dark {
  --text-muted: color-mix(in srgb, var(--white) 75%, transparent);
  --accent: var(--secondary);
  --accent-contrast: var(--btn-on-secondary, var(--neutral-d-10));
}

/* Dark-coloured outline / ghost / link buttons turn light in dark sections
   (solid buttons are unchanged). */
.section--dark :is(.btn--primary, .btn--base, .btn--dark) {
  --btn-outline-color: var(--white);
  --btn-outline-hover: color-mix(in srgb, var(--white) 80%, transparent);
  --btn-ghost-hover: rgba(255, 255, 255, 0.12);
}

/* Links in text content */
.section--dark :is(.brxe-text, .brxe-text-basic, .brxe-post-content) a {
  color: var(--accent);
}

/* Light surfaces inside a dark section reset text and roles.
   Add new boxed components (or .surface-light) to this list. */
.section--dark :is(.surface-light, .team-card--boxed, .blog-card--boxed, .feature-card--boxed) {
  color: var(--neutral-d-10);
  --text-muted: var(--neutral-d-4);
  --accent: var(--primary);
  --accent-contrast: var(--btn-on-primary, #fff);
}