/* ============================================================================
   G.R.I.T. ACADEMY — BRAND SKIN
   Blog 10 only. Overrides the shared vrschool-deepspace theme.
   Tokens are taken verbatim from the home page (page 179, #grit-portal).

   LAYER 0  tokens                     — always safe, defines only
   LAYER 1  webfont + base typography  — applies site-wide
   LAYER 2  global shell (header/footer/nav)
   ...      further surfaces added one at a time, each verified before the next

   Anything not yet reskinned deliberately keeps the inherited dark theme,
   so there is never a half-styled surface with unreadable text.
   ========================================================================= */

/* ── LAYER 1 · viewport stability ──────────────────────────────────────────
   Pages that scroll lose 15px to the scrollbar while pages that do not keep
   it, so the sticky bar and its CTA shifted horizontally as you moved between
   pages. Reserving the gutter always keeps every page the same width.       */
html:has(body.grit-brand) { scrollbar-gutter: stable; }

/* ── LAYER 0 · tokens ──────────────────────────────────────────────────── */
body.grit-brand {
  --grit-burgundy:   #4D001D;
  --grit-dark:       #2d0011;
  --grit-coral:      #FF8A8A;
  --grit-coral-hi:   #FFB5B5;
  --grit-gold:       #d4af37;
  --grit-surface:    #ffffff;
  --grit-text:       #1A1A1A;
  /* The home page's caption grey (#64748B) measures 4.45:1 on the blush
     ground — passing on paper, but too faint for small UI text like
     breadcrumbs and card meta. Darkened within the same slate family. */
  --grit-caption:    #475569;   /* 7.08:1 on blush, 7.58:1 on white */
  --grit-caption-xs: #3D4A5C;   /* 8.42:1 — for the smallest labels */
  --grit-blush:      #FFE4E4;
  --grit-blush-bg:   #FFF5F5;

  --grit-veil:  linear-gradient(135deg, rgba(77,0,29,.65) 0%,
                rgba(77,0,29,.60) 80%, rgba(255,138,138,.30) 100%);
  --grit-solid: linear-gradient(135deg, #4D001D 0%, #2d0011 100%);

  --grit-font-display: 'Playfair Display', Georgia, serif;
  --grit-font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --grit-radius-btn:  6px;
  --grit-radius-card: 16px;
  --grit-radius-pill: 999px;

  --grit-shadow-nav:  0 4px 16px rgba(45,0,17,.18);
  --grit-shadow-cta:  0 10px 28px rgba(255,138,138,.30);
  --grit-shadow-card: 0 20px 40px rgba(77,0,29,.10);

  --grit-ease: cubic-bezier(.16,1,.3,1);
}

/* ── LAYER 2 · global shell ────────────────────────────────────────────────
   The header and footer template parts are blog-10-scoped overrides
   (posts 26 and 36), so restyling them here affects no other site.        */

/* Footer -------------------------------------------------------------- */
body.grit-brand footer.wp-block-group {
  background: var(--grit-solid) !important;
  border-top: 4px solid var(--grit-coral) !important;
  color: #fff;
}
body.grit-brand footer.wp-block-group p {
  color: rgba(255,255,255,.82) !important;
  font-family: var(--grit-font-body);
}
body.grit-brand footer.wp-block-group a {
  color: #fff !important;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .04em;
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--grit-ease), color .3s var(--grit-ease);
}
body.grit-brand footer.wp-block-group a:hover,
body.grit-brand footer.wp-block-group a:focus-visible {
  color: var(--grit-coral) !important;
  border-bottom-color: var(--grit-coral);
}

/* Header ------------------------------------------------------------------
   Matched 1:1 to the home page's .grit-nav: a full-bleed sticky burgundy bar
   with a 2px coral rule, logo hard left, links hard right, 1rem/1.5rem edge
   padding and no inner width constraint.                                   */

/* The header is two nested <header> elements: the template-part wrapper and
   the block group inside it. Padding both double-indented the wordmark to
   60px against the home page's 30px, so the wrapper carries the sticky
   behaviour and the inner group carries the bar itself. */
body.grit-brand header.wp-block-template-part {
  position: sticky; top: 0; z-index: 100;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.grit-brand header.wp-block-group {
  position: static;
  background: var(--grit-burgundy) !important;
  border-bottom: 2px solid var(--grit-coral) !important;
  box-shadow: var(--grit-shadow-nav);
  padding: 1rem 1.5rem !important;
}

/* Release the theme's constrained inner group so the bar reads edge to edge
   exactly as the home page does. */
body.grit-brand header .wp-block-group.alignwide,
body.grit-brand header > .wp-block-group {
  max-width: none !important;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin: 0 !important;
}

/* Wordmark — Playfair italic 900, gold second word, mixed case. */
body.grit-brand .vr-logo,
body.grit-brand .grit-logo,
body.grit-brand header .wp-block-site-title a,
body.grit-brand header .wp-block-site-title {
  font-family: var(--grit-font-display) !important;
  font-style: italic !important;
  font-weight: 900 !important;
  font-size: 1.35rem !important;
  /* home page inherits body line-height (1.6) here — matching it keeps the
     wordmark the same 43px tall on both, which sets the bar height */
  line-height: 1.6 !important;
  color: #fff !important;
  text-decoration: none !important;
  letter-spacing: .02em;
  text-transform: none !important;
  white-space: nowrap;
}
body.grit-brand .vr-logo-accent,
body.grit-brand .grit-logo .accent {
  color: var(--grit-gold) !important;
  font-style: italic !important;
  font-weight: 900 !important;
}

/* Menu — matched to the home page nav.
   nexus.css styles these with (0,4,2)/(0,3,2) selectors and !important, so the
   overrides below deliberately mirror its selector shape plus body.grit-brand
   to outrank it rather than escalating to blanket !important everywhere.
   Measured targets from the home page (20px root): 18.4px / 600 / .04em,
   padding .55rem .95rem, CTA .55rem 1.25rem.                                */

body.grit-brand header .wp-block-navigation {
  margin-left: auto;
  margin-right: 0 !important;
  padding-right: 0 !important;
}
body.grit-brand header .wp-block-navigation .wp-block-navigation__container,
body.grit-brand header .wp-block-navigation ul {
  display: flex; align-items: center; gap: .25rem; flex-wrap: wrap;
  margin-right: 0 !important;
  padding-right: 0 !important;
}
body.grit-brand header .wp-block-navigation li:last-child { margin-right: 0 !important; }

/* Base nav link — beats .wp-block-navigation .wp-block-navigation-item > a */
body.grit-brand header .wp-block-navigation .wp-block-navigation-item > a,
body.grit-brand header .wp-block-navigation .wp-block-navigation-item > a:not(.wp-element-button) {
  font-family: var(--grit-font-body) !important;
  font-size: .92rem !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  color: rgba(255,255,255,.85) !important;
  background: transparent !important;
  border: 0 !important;
  padding: .55rem .95rem !important;
  border-radius: 4px !important;
  transition: background .3s var(--grit-ease), color .3s var(--grit-ease);
  /* The theme leaves these as inline elements, so their vertical padding did
     not contribute to the line box: the bar measured 78px while the CTA pill
     inside it was 53px and overflowed. As inline-flex the padding counts, and
     the bar resolves to the home page's 93px. */
  display: inline-flex !important;
  align-items: center;
  line-height: 1.6 !important;
}
body.grit-brand header .wp-block-navigation .wp-block-navigation-item > a:hover,
body.grit-brand header .wp-block-navigation .wp-block-navigation-item > a:focus-visible,
body.grit-brand header .wp-block-navigation .wp-block-navigation-item.current-menu-item > a,
body.grit-brand header .wp-block-navigation .wp-block-navigation-item.current-menu-item > a:not(.wp-element-button) {
  color: #fff !important;
  background: rgba(255,255,255,.08) !important;
}

/* "Log In" — the theme gives it a bordered ghost pill; the home page uses a
   plain link, so it is flattened to match. */
body.grit-brand header .wp-block-navigation li.wp-block-navigation-item.vr-nav-login > a,
body.grit-brand header .wp-block-navigation li.wp-block-navigation-item.vr-nav-login > a:not(.wp-element-button) {
  border: 0 !important;
  background: transparent !important;
  color: rgba(255,255,255,.85) !important;
  padding: .55rem .95rem !important;
}
body.grit-brand header .wp-block-navigation li.wp-block-navigation-item.vr-nav-login > a:hover {
  color: #fff !important;
  background: rgba(255,255,255,.08) !important;
  border-color: transparent !important;
}

/* The single CTA — coral, exactly as on the home page (cyan by default). */
body.grit-brand header .wp-block-navigation li.wp-block-navigation-item.vr-nav-cta > a,
body.grit-brand header .wp-block-navigation li.wp-block-navigation-item.vr-nav-cta > a:not(.wp-element-button) {
  background-color: var(--grit-coral) !important;
  color: var(--grit-dark) !important;
  font-weight: 700 !important;
  padding: .55rem 1.25rem !important;
  border-radius: 4px !important;
  border: 0 !important;
  box-shadow: none !important;
  /* nexus.css sets margin: -10px 0 -10px 10px on this pill. The negative
     vertical margins let it overflow its <li> instead of expanding it, which
     collapsed the whole bar to 85px against the home page's 93px, and the
     -10px right pulled it past the container edge. All four are reset. */
  margin: 0 0 0 .5rem !important;
}
body.grit-brand header .wp-block-navigation li.wp-block-navigation-item.vr-nav-cta > a:hover,
body.grit-brand header .wp-block-navigation li.wp-block-navigation-item.vr-nav-cta > a:focus-visible {
  background-color: var(--grit-coral-hi) !important;
  color: var(--grit-dark) !important;
}

/* The theme's global padding on the inner group pushed the wordmark 30px
   further in than the home page's. Removed so both sit at the same edge. */
body.grit-brand header .wp-block-group.alignwide {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media (max-width: 600px) {
  body.grit-brand header.wp-block-group,
  body.grit-brand header.wp-block-template-part { padding: .75rem 1rem !important; }
  body.grit-brand header .wp-block-group.alignwide,
  body.grit-brand header > .wp-block-group { gap: .75rem; }
  body.grit-brand .vr-logo,
  body.grit-brand .grit-logo { font-size: 1.1rem !important; }
  body.grit-brand header .wp-block-navigation a { padding: .45rem .65rem; font-size: .82rem; }
}

/* ── LAYER 3 · canvas surface ──────────────────────────────────────────────
   Standard content pages (legal, generic). Flips the inherited dark ground
   to the brand's light ground and puts headings into Playfair italic.      */

body.grit-brand.grit-surface-canvas {
  background: var(--grit-blush-bg) !important;
  color: var(--grit-text) !important;
  font-family: var(--grit-font-body);
}

/* The content column becomes a white card on the blush ground. */
body.grit-brand.grit-surface-canvas main.wp-block-group,
body.grit-brand.grit-surface-canvas main.site-main {
  background: var(--grit-surface);
  border: 1px solid var(--grit-blush);
  border-radius: var(--grit-radius-card);
  box-shadow: 0 12px 32px rgba(77,0,29,.06);
  padding: clamp(1.75rem, 1rem + 3vw, 4rem) !important;
  margin-block: clamp(2rem, 1rem + 3vw, 4rem);
  max-width: 78ch;
}

body.grit-brand.grit-surface-canvas main :is(p, li, td, th, dd, dt) {
  color: var(--grit-text) !important;
  font-family: var(--grit-font-body);
  font-size: 1rem;
  line-height: 1.7;
}

body.grit-brand.grit-surface-canvas main :is(h1, h2, h3, h4, h5, h6),
body.grit-brand.grit-surface-canvas main .wp-block-post-title {
  font-family: var(--grit-font-display) !important;
  font-style: italic !important;
  font-weight: 900 !important;
  color: var(--grit-burgundy) !important;
  text-wrap: balance;
  line-height: 1.15;
}
body.grit-brand.grit-surface-canvas main .wp-block-post-title,
body.grit-brand.grit-surface-canvas main h1 {
  font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.2rem);
  line-height: 1.02;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 3px solid var(--grit-coral);
}
body.grit-brand.grit-surface-canvas main h2 { font-size: 1.75rem; margin-top: 2.75rem; }
body.grit-brand.grit-surface-canvas main h3 { font-size: 1.3rem;  margin-top: 2rem; }

/* Links: burgundy type with a coral rule. Coral text on white fails
   contrast (2.3:1), so coral is never used for the text itself. */
body.grit-brand.grit-surface-canvas main a {
  color: var(--grit-burgundy) !important;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--grit-coral);
  transition: background .3s var(--grit-ease);
}
body.grit-brand.grit-surface-canvas main a:hover,
body.grit-brand.grit-surface-canvas main a:focus-visible {
  background: var(--grit-blush);
}

body.grit-brand.grit-surface-canvas main :is(ul, ol) { padding-left: 1.35rem; }
body.grit-brand.grit-surface-canvas main li { margin-bottom: .5rem; }
body.grit-brand.grit-surface-canvas main strong { color: var(--grit-burgundy); }

body.grit-brand.grit-surface-canvas main hr,
body.grit-brand.grit-surface-canvas main .wp-block-separator {
  border: 0; border-top: 1px solid var(--grit-blush); margin: 2.5rem 0;
}

body.grit-brand.grit-surface-canvas main blockquote,
body.grit-brand.grit-surface-canvas main .callout {
  background: var(--grit-blush-bg);
  border-left: 4px solid var(--grit-coral);
  border-radius: 0 12px 12px 0;
  padding: 1.15rem 1.35rem;
  margin: 1.75rem 0;
}

body.grit-brand.grit-surface-canvas main :is(table) {
  width: 100%; border-collapse: collapse; font-size: .95rem;
}
body.grit-brand.grit-surface-canvas main :is(th, td) {
  border-bottom: 1px solid var(--grit-blush); padding: .7rem .9rem; text-align: left;
}
body.grit-brand.grit-surface-canvas main th {
  color: var(--grit-burgundy) !important; font-weight: 700;
}

/* ── LAYER 4 · catalog surface ─────────────────────────────────────────────
   /meta-campus/ index and the collection pages. The markup comes from the
   Meta Campus snippet, whose own <style> is inline in the body; these rules
   carry a higher specificity (body + surface class) so they win without
   needing !important on every declaration.                                 */

body.grit-brand.grit-surface-catalog {
  background: var(--grit-blush-bg) !important;
  color: var(--grit-text) !important;
}

/* Intro block ---------------------------------------------------------- */
body.grit-brand.grit-surface-catalog .meta-campus-intro {
  background: var(--grit-solid);
  color: #fff;
  border-bottom: 10px solid var(--grit-coral);
  border-radius: 0 0 44px 44px;
  padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(1.25rem, 1rem + 2vw, 3rem) clamp(2rem, 1.5rem + 2vw, 3.5rem);
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 4rem);
  text-align: center;
}
body.grit-brand.grit-surface-catalog .meta-campus-intro-title {
  font-family: var(--grit-font-display);
  font-style: italic; font-weight: 900; color: #fff;
  font-size: clamp(2rem, 1.5rem + 2.6vw, 3.4rem);
  line-height: 1.02; margin: 0 0 1.25rem; text-wrap: balance;
}
body.grit-brand.grit-surface-catalog .meta-campus-intro-lede {
  color: rgba(255,255,255,.9); max-width: 60ch; margin: 0 auto 1.75rem;
  font-size: 1.05rem; line-height: 1.65;
}
body.grit-brand.grit-surface-catalog .meta-campus-intro-lede strong { color: var(--grit-coral); }
body.grit-brand.grit-surface-catalog .meta-campus-intro-bullets {
  list-style: none; padding: 0; margin: 0 auto 1.5rem; max-width: 62ch;
  text-align: left; display: grid; gap: .7rem;
}
body.grit-brand.grit-surface-catalog .meta-campus-intro-bullets li {
  color: rgba(255,255,255,.88); font-size: .96rem; line-height: 1.55;
  padding-left: 1.5rem; position: relative;
}
body.grit-brand.grit-surface-catalog .meta-campus-intro-bullets li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--grit-coral);
}
body.grit-brand.grit-surface-catalog .meta-campus-intro-bullets strong { color: #fff; }
body.grit-brand.grit-surface-catalog .meta-campus-intro-cta {
  color: var(--grit-coral); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; font-size: .85rem; margin: 0;
}

/* Breadcrumbs ---------------------------------------------------------- */
body.grit-brand.grit-surface-catalog .meta-campus-breadcrumbs {
  max-width: 1100px; margin: 0 auto; padding: 1rem 1.25rem 0;
  font-size: .85rem; color: var(--grit-caption);
}
body.grit-brand.grit-surface-catalog .meta-campus-breadcrumbs ol {
  list-style: none; display: flex; flex-wrap: wrap; gap: .25rem; padding: 0; margin: 0;
}
body.grit-brand.grit-surface-catalog .meta-campus-breadcrumbs a {
  color: var(--grit-burgundy); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid var(--grit-coral);
}
/* The current page is the reader's location, not decoration — it gets full
   ink and weight rather than a faded grey. */
body.grit-brand .meta-campus-breadcrumbs [aria-current],
body.grit-brand .meta-campus-breadcrumbs [aria-current="page"] {
  color: var(--grit-text) !important;
  font-weight: 600;
}
body.grit-brand .meta-campus-breadcrumbs,
body.grit-brand .meta-campus-breadcrumbs li,
body.grit-brand .meta-campus-breadcrumbs span {
  color: var(--grit-caption) !important;
}
body.grit-brand .meta-campus-breadcrumbs-sep {
  color: var(--grit-caption) !important;
  opacity: 1;
}

/* The snippet mutes several text elements with opacity, which silently
   undoes the caption token — card stats landed near 3.9:1 despite the
   colour itself measuring 7.58:1. Colour is set by the token; opacity
   stays at 1 so contrast is what it claims to be. */
body.grit-brand .meta-campus-guild-stats,
body.grit-brand .meta-campus-breadcrumbs a,
body.grit-brand .meta-campus-intro-cta,
body.grit-brand .meta-campus-program-counts,
body.grit-brand .meta-campus-program-meta,
body.grit-brand .meta-campus-program-author,
body.grit-brand .meta-campus-program-courses-pending {
  opacity: 1 !important;
}
body.grit-brand .meta-campus-guild-stats {
  color: var(--grit-caption) !important;
}

/* Collection cards (index) --------------------------------------------- */
body.grit-brand.grit-surface-catalog .meta-campus-guilds-grid {
  max-width: 1100px; margin: 0 auto; padding: 0 1.25rem 4rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem;
}
body.grit-brand.grit-surface-catalog .meta-campus-guild-card {
  background: var(--grit-surface);
  border: 1px solid var(--grit-blush);
  border-radius: var(--grit-radius-card);
  overflow: hidden; text-decoration: none; display: block;
  transition: transform .3s var(--grit-ease), box-shadow .3s var(--grit-ease), border-color .3s var(--grit-ease);
}
body.grit-brand.grit-surface-catalog .meta-campus-guild-card:hover,
body.grit-brand.grit-surface-catalog .meta-campus-guild-card:focus-visible {
  transform: translateY(-6px);
  border-color: var(--grit-coral);
  box-shadow: var(--grit-shadow-card);
}
body.grit-brand.grit-surface-catalog .meta-campus-guild-name {
  font-family: var(--grit-font-display); font-style: italic; font-weight: 900;
  color: var(--grit-burgundy); font-size: 1.3rem; margin-bottom: .4rem;
}
body.grit-brand.grit-surface-catalog .meta-campus-guild-stats { color: var(--grit-caption); font-size: .85rem; }
body.grit-brand.grit-surface-catalog .meta-campus-guild-cta {
  color: var(--grit-burgundy); font-weight: 700; font-size: .82rem;
  letter-spacing: .06em; text-transform: uppercase; margin-top: .8rem;
}

/* Collection page heading ---------------------------------------------- */
body.grit-brand.grit-surface-catalog .meta-campus-guild-heading,
body.grit-brand.grit-surface-catalog .meta-campus-guild-hero h1,
body.grit-brand.grit-surface-catalog .meta-campus-guild-hero h2 {
  font-family: var(--grit-font-display); font-style: italic; font-weight: 900;
  color: var(--grit-burgundy);
}

/* Programme rows ------------------------------------------------------- */
body.grit-brand.grit-surface-catalog .meta-campus-programs-list {
  max-width: 1100px; margin: 0 auto; padding: 0 1.25rem 4rem;
  display: grid; gap: 1.5rem;
}
body.grit-brand.grit-surface-catalog .meta-campus-program-row {
  background: var(--grit-surface);
  border: 1px solid var(--grit-blush);
  border-radius: var(--grit-radius-card);
  overflow: hidden;
  transition: transform .3s var(--grit-ease), box-shadow .3s var(--grit-ease), border-color .3s var(--grit-ease);
}
body.grit-brand.grit-surface-catalog .meta-campus-program-row:hover {
  transform: translateY(-4px);
  border-color: var(--grit-coral);
  box-shadow: var(--grit-shadow-card);
}
body.grit-brand.grit-surface-catalog .meta-campus-program-title,
body.grit-brand.grit-surface-catalog .meta-campus-program-body h3 {
  font-family: var(--grit-font-display) !important;
  font-style: italic !important; font-weight: 900 !important;
  color: var(--grit-burgundy) !important;
  font-size: 1.35rem; line-height: 1.2;
}
body.grit-brand.grit-surface-catalog .meta-campus-program-body p,
body.grit-brand.grit-surface-catalog .meta-campus-program-desc {
  color: var(--grit-text); line-height: 1.6;
}
body.grit-brand.grit-surface-catalog .meta-campus-program-meta,
body.grit-brand.grit-surface-catalog .meta-campus-program-counts,
body.grit-brand.grit-surface-catalog .meta-campus-program-author {
  color: var(--grit-caption) !important;
}
body.grit-brand.grit-surface-catalog .meta-campus-program-meta {
  border-top: 1px dashed var(--grit-blush) !important;
}
body.grit-brand.grit-surface-catalog .meta-campus-program-price {
  color: var(--grit-burgundy) !important;
  font-family: var(--grit-font-body); font-weight: 800;
  font-size: 1rem; font-variant-numeric: tabular-nums;
}

/* Course accordion ----------------------------------------------------- */
body.grit-brand.grit-surface-catalog .meta-campus-program-courses summary {
  color: var(--grit-burgundy); font-weight: 700; cursor: pointer;
  font-size: .88rem; letter-spacing: .03em;
}
body.grit-brand.grit-surface-catalog .meta-campus-program-courses a {
  color: var(--grit-text); text-decoration: none;
  border-bottom: 1px solid var(--grit-blush);
}
body.grit-brand.grit-surface-catalog .meta-campus-program-courses a:hover {
  color: var(--grit-burgundy); border-bottom-color: var(--grit-coral);
}
body.grit-brand.grit-surface-catalog .meta-campus-program-courses-pending { color: var(--grit-caption); }

/* The buy button — the one place coral carries weight ------------------ */
body.grit-brand.grit-surface-catalog .meta-campus-program-select,
body.grit-brand.grit-surface-catalog .meta-campus-program-actions a {
  background: var(--grit-coral) !important;
  color: var(--grit-dark) !important;
  border: 0 !important;
  border-radius: var(--grit-radius-btn) !important;
  padding: .8rem 1.75rem !important;
  font-weight: 700; font-size: .9rem;
  letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none !important;
  box-shadow: var(--grit-shadow-cta);
  transition: background .3s var(--grit-ease), transform .3s var(--grit-ease);
  display: inline-flex; align-items: center; gap: .5rem;
}
body.grit-brand.grit-surface-catalog .meta-campus-program-select:hover,
body.grit-brand.grit-surface-catalog .meta-campus-program-actions a:hover {
  background: var(--grit-coral-hi) !important;
  transform: translateY(-2px);
}

/* Back-to-top ---------------------------------------------------------- */
body.grit-brand.grit-surface-catalog .meta-campus-back-to-top {
  background: var(--grit-burgundy) !important;
  color: #fff !important;
  border: 2px solid var(--grit-coral) !important;
  box-shadow: var(--grit-shadow-nav);
}

/* ── LAYER 5 · commerce surface ────────────────────────────────────────────
   PMPRO checkout, account, billing, invoice, confirmation and cancel pages.
   This is where money changes hands, so legibility beats decoration: white
   cards on the blush ground, one coral action per view, everything else quiet.
   PMPRO's own base.css/variation_1.css load before the skin, so plain class
   selectors win here without !important.                                    */

body.grit-brand.grit-surface-commerce {
  background: var(--grit-blush-bg) !important;
  color: var(--grit-text) !important;
  font-family: var(--grit-font-body) !important;
}

/* Generic text inside the commerce surface.
   The theme sets a near-white body colour (#F8FAFC) that unclassed elements
   inherit — the level description rendered white-on-white, and the discount
   and log-in prompts white-on-blush (all ~1.0:1). Class-targeted rules could
   not reach them because the markup carries no class. Set here at element
   level; the class rules for titles, labels and prices are more specific and
   still win. */
body.grit-brand.grit-surface-commerce main :is(p, span, div, li, dd, dt, small, strong, em, label, td, th),
body.grit-brand.grit-surface-commerce .pmpro_card :is(p, span, div, li, small, strong, em),
body.grit-brand.grit-surface-commerce .pmpro_card_actions,
body.grit-brand.grit-surface-commerce .pmpro_section :is(p, span, div, li) {
  color: var(--grit-text) !important;
}

body.grit-brand.grit-surface-commerce main :is(h1, h2, h3),
body.grit-brand.grit-surface-commerce .pmpro_card_title,
body.grit-brand.grit-surface-commerce .pmpro_form_legend,
body.grit-brand.grit-surface-commerce .pmpro_form_heading {
  font-family: var(--grit-font-display) !important;
  font-style: italic !important;
  font-weight: 900 !important;
  color: var(--grit-burgundy) !important;
  line-height: 1.15;
}
body.grit-brand.grit-surface-commerce main h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.9rem); }
body.grit-brand.grit-surface-commerce .pmpro_card_title { font-size: 1.4rem; }
body.grit-brand.grit-surface-commerce .pmpro_form_legend,
body.grit-brand.grit-surface-commerce .pmpro_form_heading { font-size: 1.2rem; }

/* Cards ---------------------------------------------------------------- */
body.grit-brand.grit-surface-commerce .pmpro_card {
  background: var(--grit-surface) !important;
  border: 1px solid var(--grit-blush) !important;
  border-radius: var(--grit-radius-card) !important;
  box-shadow: 0 12px 32px rgba(77,0,29,.06) !important;
  overflow: hidden;
}
body.grit-brand.grit-surface-commerce .pmpro_card_content { color: var(--grit-text) !important; }
body.grit-brand.grit-surface-commerce .pmpro_card_actions {
  border-top: 1px solid var(--grit-blush);
  background: var(--grit-blush-bg) !important;
}

/* What you are buying -------------------------------------------------- */
body.grit-brand.grit-surface-commerce .pmpro_level_name_text {
  font-family: var(--grit-font-display) !important;
  font-style: italic !important; font-weight: 900 !important;
  color: var(--grit-burgundy) !important;
}
body.grit-brand.grit-surface-commerce .pmpro_level_cost_text {
  color: var(--grit-text) !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
}
body.grit-brand.grit-surface-commerce .pmpro_level_description_text { color: var(--grit-text) !important; }

/* Form fields ---------------------------------------------------------- */
body.grit-brand.grit-surface-commerce .pmpro_form_label {
  color: var(--grit-burgundy) !important;
  font-weight: 700 !important;
  font-size: .9rem;
  letter-spacing: .02em;
}
body.grit-brand.grit-surface-commerce .pmpro_form_input,
body.grit-brand.grit-surface-commerce input[type="text"],
body.grit-brand.grit-surface-commerce input[type="email"],
body.grit-brand.grit-surface-commerce input[type="password"],
body.grit-brand.grit-surface-commerce input[type="tel"],
body.grit-brand.grit-surface-commerce select,
body.grit-brand.grit-surface-commerce textarea {
  background: var(--grit-surface) !important;
  color: var(--grit-text) !important;
  border: 1.5px solid var(--grit-blush) !important;
  border-radius: var(--grit-radius-btn) !important;
  padding: .7rem .85rem !important;
  font-family: var(--grit-font-body) !important;
  font-size: 1rem;
  transition: border-color .2s var(--grit-ease), box-shadow .2s var(--grit-ease);
}
body.grit-brand.grit-surface-commerce .pmpro_form_input:focus,
body.grit-brand.grit-surface-commerce input:focus,
body.grit-brand.grit-surface-commerce select:focus,
body.grit-brand.grit-surface-commerce textarea:focus {
  border-color: var(--grit-coral) !important;
  box-shadow: 0 0 0 3px rgba(255,138,138,.35) !important;
  outline: none;
}
/* Required marker: colour alone is not a sufficient signal */
body.grit-brand.grit-surface-commerce .pmpro_form_input-required { border-left-width: 4px; }

/* Buttons — one coral action, everything else recedes ------------------- */
/* nexus.css line 335 styles the checkout submit through the ID selector
   #pmpro_btn-submit with !important — specificity (1,0,0), which outranks a
   class-only override however many classes it chains. The ID is matched here
   explicitly so the primary action is coral rather than the inherited cyan. */
body.grit-brand.grit-surface-commerce .pmpro_btn,
body.grit-brand.grit-surface-commerce #pmpro_btn-submit,
body.grit-brand.grit-surface-commerce input.pmpro_btn,
body.grit-brand.grit-surface-commerce input[type="submit"].pmpro_btn,
body.grit-brand.grit-surface-commerce input[type="submit"],
body.grit-brand.grit-surface-commerce button[type="submit"] {
  background: var(--grit-coral) !important;
  color: var(--grit-dark) !important;
  border: 0 !important;
  border-radius: var(--grit-radius-btn) !important;
  padding: .9rem 2rem !important;
  font-family: var(--grit-font-body) !important;
  font-weight: 700 !important;
  font-size: 1rem;
  letter-spacing: .04em;
  text-transform: uppercase !important;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--grit-shadow-cta) !important;
  transition: background .3s var(--grit-ease), transform .3s var(--grit-ease);
}
body.grit-brand.grit-surface-commerce .pmpro_btn:hover,
body.grit-brand.grit-surface-commerce input[type="submit"]:hover,
body.grit-brand.grit-surface-commerce button[type="submit"]:hover {
  background: var(--grit-coral-hi) !important;
  transform: translateY(-2px);
}
/* Secondary actions: discount code, plain links */
body.grit-brand.grit-surface-commerce .pmpro_btn-plain,
body.grit-brand.grit-surface-commerce .pmpro_btn-submit-discount-code {
  background: transparent !important;
  color: var(--grit-burgundy) !important;
  border: 1.5px solid var(--grit-blush) !important;
  box-shadow: none !important;
  text-transform: none !important;
  font-weight: 600 !important;
  padding: .6rem 1.1rem !important;
}
body.grit-brand.grit-surface-commerce .pmpro_btn-plain:hover,
body.grit-brand.grit-surface-commerce .pmpro_btn-submit-discount-code:hover {
  background: var(--grit-blush-bg) !important;
  border-color: var(--grit-coral) !important;
  transform: none;
}

/* Messages ------------------------------------------------------------- */
body.grit-brand.grit-surface-commerce .pmpro_message {
  border-radius: 0 12px 12px 0 !important;
  border-left: 4px solid var(--grit-coral);
  background: var(--grit-blush-bg) !important;
  color: var(--grit-text) !important;
  padding: 1rem 1.25rem !important;
}
body.grit-brand.grit-surface-commerce .pmpro_error,
body.grit-brand.grit-surface-commerce .pmpro_message.pmpro_error {
  border-left-color: #B3261E !important;
  background: #FDECEA !important;
  color: #5F1512 !important;
}
body.grit-brand.grit-surface-commerce .pmpro_success,
body.grit-brand.grit-surface-commerce .pmpro_message.pmpro_success {
  border-left-color: #1E7A46 !important;
  background: #E8F5EE !important;
  color: #14522F !important;
}

/* Tables (account, invoices, order history) ---------------------------- */
body.grit-brand.grit-surface-commerce table {
  width: 100%; border-collapse: collapse; background: var(--grit-surface) !important;
  border: 1px solid var(--grit-blush) !important; border-radius: var(--grit-radius-card) !important;
  overflow: hidden; font-variant-numeric: tabular-nums;
}
body.grit-brand.grit-surface-commerce :is(th, td) {
  border-bottom: 1px solid var(--grit-blush);
  padding: .8rem 1rem !important; text-align: left; color: var(--grit-text) !important;
}
body.grit-brand.grit-surface-commerce th {
  background: var(--grit-blush-bg) !important;
  color: var(--grit-burgundy) !important;
  font-weight: 700 !important; font-size: .82rem;
  letter-spacing: .06em; text-transform: uppercase !important;
}

/* Links + the LearnPress course list shown inside checkout ------------- */
body.grit-brand.grit-surface-commerce main a:not(.pmpro_btn) {
  color: var(--grit-burgundy) !important;
  font-weight: 600 !important;
  text-decoration: none;
  border-bottom: 2px solid var(--grit-coral);
}
body.grit-brand.grit-surface-commerce main a:not(.pmpro_btn):hover { background: var(--grit-blush) !important; }
body.grit-brand.grit-surface-commerce .lp-pmpro-membership-list,
body.grit-brand.grit-surface-commerce .lp-pmpro-main { color: var(--grit-text) !important; }

/* Turnstile sits inside the payment form; give it room and centre it. */
body.grit-brand.grit-surface-commerce .sls-turnstile-wrap { margin: 1.25rem auto 1.5rem; }

/* ── LAYER 6 · profile surface (My Learning) ───────────────────────────────
   LearnPress lp-profile: a left sidebar of tabs and a right content pane that
   holds course lists, stat cards, settings forms and order-history tables.
   Shared markup between the learner view (enrolled courses + progress) and the
   instructor view (catalog, students, course builder), so both are styled. LP
   loads course cards over AJAX after first paint, so the card rules must stand
   on their own rather than depend on anything server-rendered. */

body.grit-brand.grit-surface-profile,
body.grit-brand.grit-surface-profile .lp-user-profile,
body.grit-brand.grit-surface-profile .lp-content-area {
  background: var(--grit-blush-bg) !important;
  color: var(--grit-text) !important;
  font-family: var(--grit-font-body);
}

/* Username + section headings ----------------------------------------- */
body.grit-brand.grit-surface-profile .lp-profile-username,
body.grit-brand.grit-surface-profile .lp-content-area :is(h1, h2, h3),
body.grit-brand.grit-surface-profile .learn-press-profile-course__tab {
  font-family: var(--grit-font-display) !important;
  font-style: italic !important;
  font-weight: 900 !important;
  color: var(--grit-burgundy) !important;
}
body.grit-brand.grit-surface-profile .lp-profile-username { font-size: 1.6rem; }

/* Sidebar tabs -------------------------------------------------------- */
body.grit-brand.grit-surface-profile .lp-profile-left,
body.grit-brand.grit-surface-profile .profile-nav,
body.grit-brand.grit-surface-profile .lp-profile-nav-tabs {
  background: var(--grit-surface) !important;
  border: 1px solid var(--grit-blush) !important;
  border-radius: var(--grit-radius-card) !important;
}
body.grit-brand.grit-surface-profile .lp-profile-nav-tabs a,
body.grit-brand.grit-surface-profile .profile-nav a,
body.grit-brand.grit-surface-profile .profile-tab-sections a {
  color: var(--grit-text) !important;
  background: transparent !important;
  font-weight: 600;
  text-decoration: none !important;
  border-radius: var(--grit-radius-btn);
  transition: background .2s var(--grit-ease), color .2s var(--grit-ease);
}
body.grit-brand.grit-surface-profile .lp-profile-nav-tabs a:hover,
body.grit-brand.grit-surface-profile .profile-nav a:hover {
  background: var(--grit-blush-bg) !important;
  color: var(--grit-burgundy) !important;
}
/* Active tab: theme rendered cyan-on-cyan-8% (~1:1). Give it a solid
   burgundy fill with white text instead. */
body.grit-brand.grit-surface-profile .lp-profile-nav-tabs li.active > a,
body.grit-brand.grit-surface-profile .lp-profile-nav-tabs li.current > a,
body.grit-brand.grit-surface-profile .profile-nav li.active > a,
body.grit-brand.grit-surface-profile .profile-tab-sections li.active > a,
body.grit-brand.grit-surface-profile .lp-profile-nav-tabs a.active {
  background: var(--grit-burgundy) !important;
  color: #fff !important;
}
body.grit-brand.grit-surface-profile [class*="lp-icon-"] { color: inherit !important; }

/* Content panes — the theme paints these with --bg-l2/--bg-l3 (#0F172A /
   #1E293B). Flip them to the light ground so the ink text on top is legible.
   Class list captured from the live logged-in DOM. */
body.grit-brand.grit-surface-profile :is(
  .lp-profile-content,
  #profile-content,
  .wrapper-profile-header,
  .learn-press-profile-course__tab,
  .learn-press-profile-course__progress,
  .learn-press-profile-course__statistic,
  [class*="learn-press-course-tab-"],
  [class^="learn-press-course-tab"]) {
  background: var(--grit-blush-bg) !important;
  color: var(--grit-text) !important;
}
/* The profile header band holds the username + edit links; keep its text dark
   now that the band is light. */
body.grit-brand.grit-surface-profile .wrapper-profile-header :is(a, span, .lp-profile-username) {
  color: var(--grit-burgundy) !important;
}

/* Stat cards (Total Course / Students / Completed ...) ---------------- */
body.grit-brand.grit-surface-profile :is(.statistic-box, .dashboard-statistic__row > *, .learn-press-profile-course__statistic > *) {
  background: var(--grit-surface) !important;
  border: 1px solid var(--grit-blush) !important;
  border-radius: var(--grit-radius-card) !important;
  color: var(--grit-text) !important;
}
body.grit-brand.grit-surface-profile .statistic-box :is(span, strong, div, .number) { color: var(--grit-burgundy) !important; }

/* Settings sub-nav (General / Avatar / Password ...) and filter pills -- */
body.grit-brand.grit-surface-profile :is(.profile-tab-sections, .learn-press-filters, .learn-press-tabs) {
  background: transparent !important;
  border-bottom: 1px solid var(--grit-blush) !important;
}
body.grit-brand.grit-surface-profile :is(.profile-tab-sections, .learn-press-filters) > li > a {
  background: transparent !important;
  color: var(--grit-text) !important;
  border-radius: var(--grit-radius-btn) var(--grit-radius-btn) 0 0;
}
body.grit-brand.grit-surface-profile :is(.profile-tab-sections, .learn-press-filters) > li.active > a {
  background: var(--grit-surface) !important;
  color: var(--grit-burgundy) !important;
  border-bottom: 2px solid var(--grit-coral) !important;
  font-weight: 700;
}

/* Empty-state / ajax messages ----------------------------------------- */
body.grit-brand.grit-surface-profile :is(.lp-ajax-message, .learn-press-message) {
  background: var(--grit-surface) !important;
  color: var(--grit-text) !important;
  border: 1px dashed var(--grit-blush) !important;
  border-radius: var(--grit-radius-card) !important;
}

/* Course cards (learner enrolled list + instructor catalog) ----------- */
body.grit-brand.grit-surface-profile :is(.course, .lp-course, .course-item, .learn-press-courses .course) {
  background: var(--grit-surface) !important;
  border: 1px solid var(--grit-blush) !important;
  border-radius: var(--grit-radius-card) !important;
  color: var(--grit-text) !important;
  transition: transform .3s var(--grit-ease), box-shadow .3s var(--grit-ease), border-color .3s var(--grit-ease);
}
body.grit-brand.grit-surface-profile :is(.course, .lp-course, .course-item):hover {
  transform: translateY(-4px);
  border-color: var(--grit-coral) !important;
  box-shadow: var(--grit-shadow-card);
}
body.grit-brand.grit-surface-profile :is(.course, .lp-course) :is(.course-title, h3, h4, a.course-permalink) {
  font-family: var(--grit-font-display) !important;
  font-style: italic !important; font-weight: 900 !important;
  color: var(--grit-burgundy) !important;
}
/* Progress bar */
body.grit-brand.grit-surface-profile :is(.lp-course-progress, .course-progress, .learn-press-progress) {
  background: var(--grit-blush) !important; border-radius: 999px !important;
}
body.grit-brand.grit-surface-profile :is(.lp-course-progress__active, .course-progress__active, .learn-press-progress__active, .progress-bg) {
  background: var(--grit-coral) !important;
}
/* Skeleton loaders while AJAX fetches the cards */
body.grit-brand.grit-surface-profile .lp-skeleton-animation {
  background: linear-gradient(90deg, var(--grit-blush) 25%, var(--grit-blush-bg) 50%, var(--grit-blush) 75%) !important;
  background-size: 200% 100% !important;
  border-radius: var(--grit-radius-btn) !important;
}

/* Course Builder / action links --------------------------------------- */
body.grit-brand.grit-surface-profile .learn-press-course-builder-link,
body.grit-brand.grit-surface-profile a.lp-button,
body.grit-brand.grit-surface-profile .lp-button {
  background: var(--grit-coral) !important;
  color: var(--grit-dark) !important;
  border: 0 !important;
  border-radius: var(--grit-radius-btn) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-decoration: none !important;
  box-shadow: var(--grit-shadow-cta);
}
body.grit-brand.grit-surface-profile .learn-press-course-builder-link:hover,
body.grit-brand.grit-surface-profile .lp-button:hover { background: var(--grit-coral-hi) !important; }

/* Filter tabs (Created / In progress / ...) --------------------------- */
body.grit-brand.grit-surface-profile .learn-press-filters a,
body.grit-brand.grit-surface-profile .learn-press-tabs a {
  color: var(--grit-text) !important;
  border-bottom: 2px solid transparent !important;
  text-decoration: none !important;
}
body.grit-brand.grit-surface-profile .learn-press-filters a.active,
body.grit-brand.grit-surface-profile .learn-press-tabs a.active {
  color: var(--grit-burgundy) !important;
  border-bottom-color: var(--grit-coral) !important;
  font-weight: 700;
}

/* Settings forms + order-history tables ------------------------------- */
body.grit-brand.grit-surface-profile input:not([type="submit"]):not([type="button"]),
body.grit-brand.grit-surface-profile select,
body.grit-brand.grit-surface-profile textarea {
  background: var(--grit-surface) !important;
  color: var(--grit-text) !important;
  border: 1.5px solid var(--grit-blush) !important;
  border-radius: var(--grit-radius-btn) !important;
}
body.grit-brand.grit-surface-profile input:focus,
body.grit-brand.grit-surface-profile select:focus,
body.grit-brand.grit-surface-profile textarea:focus {
  border-color: var(--grit-coral) !important;
  box-shadow: 0 0 0 3px rgba(255,138,138,.35) !important; outline: none !important;
}
body.grit-brand.grit-surface-profile table {
  width: 100%; border-collapse: collapse; background: var(--grit-surface) !important;
  border: 1px solid var(--grit-blush) !important; border-radius: var(--grit-radius-card);
  overflow: hidden; font-variant-numeric: tabular-nums;
}
body.grit-brand.grit-surface-profile :is(th, td) {
  border-bottom: 1px solid var(--grit-blush) !important;
  padding: .8rem 1rem; text-align: left; color: var(--grit-text) !important;
}
body.grit-brand.grit-surface-profile th {
  background: var(--grit-blush-bg) !important; color: var(--grit-burgundy) !important;
  font-weight: 700; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
}
body.grit-brand.grit-surface-profile input[type="submit"],
body.grit-brand.grit-surface-profile button[type="submit"] {
  background: var(--grit-coral) !important; color: var(--grit-dark) !important;
  border: 0 !important; border-radius: var(--grit-radius-btn) !important;
  font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  box-shadow: var(--grit-shadow-cta); cursor: pointer;
}
/* Generic text that inherits the theme's near-white body colour ------- */
body.grit-brand.grit-surface-profile .lp-content-area :is(p, span, div, li, dd, dt, small, label) {
  color: var(--grit-text) !important;
}

/* ── LAYER 7 · catalog-lp surface (/courses/) ──────────────────────────────
   LearnPress course archive. Runs in lp-list-courses-no-css mode, so the theme
   supplies all colour; here it is recoloured to the brand. Card grid layout is
   left to the theme; only paint and type change. */

body.grit-brand.grit-surface-catalog-lp,
body.grit-brand.grit-surface-catalog-lp .lp-content-area,
body.grit-brand.grit-surface-catalog-lp .learn-press-courses {
  background: var(--grit-blush-bg) !important;
  color: var(--grit-text) !important;
  font-family: var(--grit-font-body);
}

/* Breadcrumb ---------------------------------------------------------- */
body.grit-brand.grit-surface-catalog-lp .learn-press-breadcrumb,
body.grit-brand.grit-surface-catalog-lp .learn-press-breadcrumb * { color: var(--grit-caption) !important; }
body.grit-brand.grit-surface-catalog-lp .learn-press-breadcrumb a {
  color: var(--grit-burgundy) !important; border-bottom: 1px solid var(--grit-coral);
}

/* Course cards --------------------------------------------------------------
   The visible card is not li.course — it is an inner Gutenberg wp-block-group
   inside .wp-block-learnpress-course-item-template, carrying an inline dark
   gradient (linear-gradient(#0F172A ...)). That block group is the surface to
   repaint; li.course stays a transparent layout wrapper. */
body.grit-brand.grit-surface-catalog-lp li.course { background: transparent !important; }

body.grit-brand.grit-surface-catalog-lp .wp-block-learnpress-course-item-template > .wp-block-group,
body.grit-brand.grit-surface-catalog-lp .course .wp-block-group.has-border-color,
body.grit-brand.grit-surface-catalog-lp .course .wp-block-group.has-background {
  background-image: none !important;
  background-color: var(--grit-surface) !important;
  border-color: var(--grit-blush) !important;
  border-radius: var(--grit-radius-card) !important;
  overflow: hidden;
  transition: transform .3s var(--grit-ease), box-shadow .3s var(--grit-ease), border-color .3s var(--grit-ease);
}
/* inner content groups stay transparent so only the outer card is a surface */
body.grit-brand.grit-surface-catalog-lp .course .wp-block-group:not(.has-border-color):not(.has-background) {
  background-color: transparent !important;
  background-image: none !important;
}
body.grit-brand.grit-surface-catalog-lp .course:hover .wp-block-group.has-border-color {
  transform: translateY(-6px);
  border-color: var(--grit-coral) !important;
  box-shadow: var(--grit-shadow-card);
}
body.grit-brand.grit-surface-catalog-lp .course :is(.course-title, .course-title a, .course-permalink) {
  font-family: var(--grit-font-display) !important;
  font-style: italic !important;
  font-weight: 900 !important;
  color: var(--grit-burgundy) !important;
  text-decoration: none !important;
}
body.grit-brand.grit-surface-catalog-lp .course :is(.course-excerpt, .course-description, p) { color: var(--grit-text) !important; }

/* Meta: instructor, lesson/student counts ----------------------------- */
body.grit-brand.grit-surface-catalog-lp .course :is(.course-instructor, .course-count-item, .course-count-student, .course-meta, .course-info),
body.grit-brand.grit-surface-catalog-lp .course :is(.course-instructor, .course-count-item, .course-count-student) * {
  color: var(--grit-caption) !important;
}
body.grit-brand.grit-surface-catalog-lp .course .course-instructor a { color: var(--grit-burgundy) !important; }
body.grit-brand.grit-surface-catalog-lp .course [class*="lp-icon"] { color: var(--grit-coral) !important; }

/* Price: sale price prominent, original struck through ---------------- */
body.grit-brand.grit-surface-catalog-lp .course :is(.course-price, .course-item-price, .price) {
  color: var(--grit-burgundy) !important;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
body.grit-brand.grit-surface-catalog-lp .course .origin-price {
  color: var(--grit-caption) !important;
  font-weight: 500;
  text-decoration: line-through;
  opacity: 1;
}

/* Enroll button ------------------------------------------------------- */
body.grit-brand.grit-surface-catalog-lp .course-button-read-more button,
body.grit-brand.grit-surface-catalog-lp .wp-block-learnpress-course-button-read-more button,
body.grit-brand.grit-surface-catalog-lp .course-button-read-more a > button {
  background: var(--grit-coral) !important;
  color: var(--grit-dark) !important;
  border: 0 !important;
  border-radius: var(--grit-radius-btn) !important;
  font-family: var(--grit-font-body) !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .8rem 1.5rem !important;
  box-shadow: var(--grit-shadow-cta);
  cursor: pointer;
  transition: background .3s var(--grit-ease), transform .3s var(--grit-ease);
}
body.grit-brand.grit-surface-catalog-lp .course-button-read-more button:hover {
  background: var(--grit-coral-hi) !important;
  transform: translateY(-2px);
}

/* Categories sidebar + sort control — removed for this site.
   The course depth does not justify faceted filtering, and the order is fixed
   (menu_order, forced server-side), so the sort dropdown would only conflict
   with it. Hidden here and the grid is expanded to full width. */
body.grit-brand.grit-surface-catalog-lp :is(
  .lp-archive-courses-sidebar,
  .lp-form-course-filter,
  .course-filter-btn-mobile,
  .courses-order-by,
  .courses-order-by-wrapper) {
  display: none !important;
}
/* Reclaim the space: the archive wrapper goes single-column and the course
   grid spans the full width. */
body.grit-brand.grit-surface-catalog-lp .lp-content-area,
body.grit-brand.grit-surface-catalog-lp .lp-archive-courses {
  display: block !important;
  grid-template-columns: 1fr !important;
  width: 100% !important;
}
body.grit-brand.grit-surface-catalog-lp .learn-press-courses { width: 100% !important; margin-left: 0 !important; }

/* Instructor "by" label + any remaining faint meta text.
   The "by" is a bare <label> with no class carrying the theme grey #94A3B8
   (2.56:1). Darken every text node inside the instructor row, class or not. */
body.grit-brand.grit-surface-catalog-lp .course :is(.instructor-name, .course-instructor) *,
body.grit-brand.grit-surface-catalog-lp .course .course-instructor,
body.grit-brand.grit-surface-catalog-lp .course label,
body.grit-brand.grit-surface-catalog-lp .course .wp-block-learnpress-course-author :is(label, span, a) {
  color: var(--grit-caption) !important;
}

/* Pagination ---------------------------------------------------------- */
body.grit-brand.grit-surface-catalog-lp .learn-press-pagination a,
body.grit-brand.grit-surface-catalog-lp .lp-pagination a,
body.grit-brand.grit-surface-catalog-lp .page-numbers {
  color: var(--grit-burgundy) !important;
  background: var(--grit-surface) !important;
  border: 1px solid var(--grit-blush) !important;
  border-radius: var(--grit-radius-btn) !important;
}
body.grit-brand.grit-surface-catalog-lp .page-numbers.current,
body.grit-brand.grit-surface-catalog-lp .learn-press-pagination .current {
  background: var(--grit-burgundy) !important; color: #fff !important; border-color: var(--grit-burgundy) !important;
}

/* ── LAYER 8 · course surface (single course page) ─────────────────────────
   The single-course hero, description, curriculum and purchase sidebar. No
   #grit-lesson-wrapper appears here, so the whole page flips to the light
   brand ground. The purchase button is handled in grit-catalog-buy-button.php
   (native "Buy Now" removed, PMPRO link relabelled "Enroll Now"); here it is
   styled as the primary coral action and the native button is hidden as a
   belt-and-suspenders guard. */

body.grit-brand.grit-surface-course,
body.grit-brand.grit-surface-course .lp-content-area {
  background: var(--grit-blush-bg) !important;
  color: var(--grit-text) !important;
  font-family: var(--grit-font-body);
}

/* Breadcrumb ---------------------------------------------------------- */
body.grit-brand.grit-surface-course .learn-press-breadcrumb,
body.grit-brand.grit-surface-course .learn-press-breadcrumb * { color: var(--grit-caption) !important; }
body.grit-brand.grit-surface-course .learn-press-breadcrumb a {
  color: var(--grit-burgundy) !important; border-bottom: 1px solid var(--grit-coral);
}

/* Hero title + description -------------------------------------------- */
body.grit-brand.grit-surface-course .course-title {
  font-family: var(--grit-font-display) !important;
  font-style: italic !important; font-weight: 900 !important;
  color: var(--grit-burgundy) !important;
  font-size: clamp(2rem, 1.5rem + 2.4vw, 3.2rem) !important;
  line-height: 1.05;
}
body.grit-brand.grit-surface-course :is(.lp-course-description, .course-description, .course-content),
body.grit-brand.grit-surface-course :is(.lp-course-description, .course-description) :is(p, li, span, td) {
  color: var(--grit-text) !important;
}
body.grit-brand.grit-surface-course .course-img img { border-radius: var(--grit-radius-card); }

/* Course meta (level / duration / lessons / students) ----------------- */
body.grit-brand.grit-surface-course :is(.course-instructor, .course-count-item, .course-count-lesson,
  .course-count-section, .course-count-student, .course-level, .course-duration),
body.grit-brand.grit-surface-course :is(.course-count-item, .course-level, .course-duration) * {
  color: var(--grit-caption) !important;
}
body.grit-brand.grit-surface-course .course-instructor a { color: var(--grit-burgundy) !important; }
body.grit-brand.grit-surface-course [class*="lp-icon"],
body.grit-brand.grit-surface-course .course-item-ico { color: var(--grit-coral) !important; }

/* Curriculum ---------------------------------------------------------- */
body.grit-brand.grit-surface-course :is(.course-curriculum, .lp-course-curriculum),
body.grit-brand.grit-surface-course .lp-course-curriculum__title {
  background: transparent !important;
  color: var(--grit-text) !important;
}
body.grit-brand.grit-surface-course .lp-course-curriculum__title,
body.grit-brand.grit-surface-course .course-curriculum-info {
  color: var(--grit-burgundy) !important;
}
/* Section header — theme paints this #1E293B */
body.grit-brand.grit-surface-course :is(.course-section, .course-section-header) {
  background: var(--grit-surface) !important;
  border: 1px solid var(--grit-blush) !important;
  border-radius: var(--grit-radius-card) !important;
  overflow: hidden;
}
body.grit-brand.grit-surface-course .course-section-header { border-radius: var(--grit-radius-card) var(--grit-radius-card) 0 0 !important; }
body.grit-brand.grit-surface-course .course-section__title {
  font-family: var(--grit-font-display) !important;
  font-style: italic !important; font-weight: 900 !important;
  color: var(--grit-burgundy) !important;
}
body.grit-brand.grit-surface-course .course-section-info { color: var(--grit-caption) !important; }
/* Lesson rows */
body.grit-brand.grit-surface-course .course-item {
  background: var(--grit-surface) !important;
  border-top: 1px solid var(--grit-blush) !important;
  transition: background .2s var(--grit-ease);
}
body.grit-brand.grit-surface-course .course-item:hover { background: var(--grit-blush-bg) !important; }
body.grit-brand.grit-surface-course :is(.course-item-title, .course-item__link) { color: var(--grit-text) !important; text-decoration: none !important; }
body.grit-brand.grit-surface-course .course-item:hover .course-item-title { color: var(--grit-burgundy) !important; }
body.grit-brand.grit-surface-course :is(.course-item-order, .course-item__status, .course-item-meta) { color: var(--grit-caption) !important; }
/* preview-able items get a coral marker; locked keep the muted lock */
body.grit-brand.grit-surface-course .course-item.has-preview .course-item-ico { color: var(--grit-coral) !important; }
body.grit-brand.grit-surface-course .course-toggle-all-sections {
  color: var(--grit-burgundy) !important; font-weight: 600; text-decoration: none;
  border-bottom: 1px solid var(--grit-coral);
}

/* Purchase sidebar ---------------------------------------------------- */
body.grit-brand.grit-surface-course .lp-block-course-sidebar,
body.grit-brand.grit-surface-course .lp-single-course-sidebar {
  background: var(--grit-surface) !important;
  border: 1px solid var(--grit-blush) !important;
  border-radius: var(--grit-radius-card) !important;
  color: var(--grit-text) !important;
  box-shadow: var(--grit-shadow-card);
}
body.grit-brand.grit-surface-course .lp-block-course-sidebar :is(p, span, div, li, dd, dt, label) { color: var(--grit-text) !important; }
body.grit-brand.grit-surface-course :is(.course-price, .course-item-price, .price) {
  color: var(--grit-burgundy) !important; font-weight: 800; font-variant-numeric: tabular-nums;
}
body.grit-brand.grit-surface-course .origin-price {
  color: var(--grit-caption) !important; text-decoration: line-through; font-weight: 500; opacity: 1;
}

/* Native LP "Buy Now" removed server-side; hide any residual as a guard.
   NB: the PMPRO membership link lives INSIDE form.purchase-course, so the form
   must stay visible — hide only the native purchase button itself. */
body.grit-brand.grit-surface-course :is(.button-purchase-course, .wp-block-learnpress-course-button.button-purchase-course) {
  display: none !important;
}
/* Keep the purchase-course form as a plain full-width container. */
body.grit-brand.grit-surface-course form.purchase-course {
  display: block !important;
  width: 100%;
  margin: 0;
}
/* PMPRO enrolment button — the primary coral action. */
body.grit-brand.grit-surface-course :is(.btn-buy-via-member-ship, .course-buttons a.lp-button, .course-buttons .lp-button) {
  display: inline-flex !important;
  align-items: center; justify-content: center;
  width: 100%;
  background: var(--grit-coral) !important;
  color: var(--grit-dark) !important;
  border: 0 !important;
  border-radius: var(--grit-radius-btn) !important;
  padding: .95rem 1.75rem !important;
  font-family: var(--grit-font-body) !important;
  font-weight: 700 !important;
  font-size: 1rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none !important;
  box-shadow: var(--grit-shadow-cta);
  cursor: pointer;
  transition: background .3s var(--grit-ease), transform .3s var(--grit-ease);
}
body.grit-brand.grit-surface-course :is(.btn-buy-via-member-ship, .course-buttons .lp-button):hover {
  background: var(--grit-coral-hi) !important; transform: translateY(-2px);
}
/* "Continue / Start Learning" (enrolled state) reads as the same primary action. */
body.grit-brand.grit-surface-course .lp-button.button-continue,
body.grit-brand.grit-surface-course a.button-continue,
body.grit-brand.grit-surface-course .lp-button.button-enrolled { background: var(--grit-coral) !important; color: var(--grit-dark) !important; }

/* Related courses — omitted. With only five courses the "related" strip just
   repeats the catalog. The block on the single-course page is a LearnPress
   list-courses block. */
body.grit-brand.grit-surface-course :is(
  .wp-block-learnpress-list-courses,
  .lp-related-courses,
  .related-courses,
  .lp-course-related,
  .learn-press-related-courses,
  [class*="related-course"]) {
  display: none !important;
}

/* Dark containers the theme paints via block backgrounds and deep classes.
   Captured from the live page; each flipped to the light ground. */

/* Hero band (breadcrumb + title) — a wp-block-group with a dark background. */
body.grit-brand.grit-surface-course .wp-block-group.has-background {
  background-color: var(--grit-blush-bg) !important;
  background-image: none !important;
  color: var(--grit-text) !important;
}

/* Curriculum summary bar (N sections / N lessons / duration). */
body.grit-brand.grit-surface-course .course-curriculum-info {
  background: var(--grit-surface) !important;
  border: 1px solid var(--grit-blush) !important;
  border-radius: var(--grit-radius-btn) !important;
}
body.grit-brand.grit-surface-course .course-curriculum-info,
body.grit-brand.grit-surface-course .course-curriculum-info * { color: var(--grit-text) !important; }
body.grit-brand.grit-surface-course .course-curriculum-info [class*="lp-icon"] { color: var(--grit-coral) !important; }

/* Section title carried its own dark background inside the white header. */
body.grit-brand.grit-surface-course .course-section__title {
  background: transparent !important;
  color: var(--grit-burgundy) !important;
}

/* Course-image block placeholder behind the feature image. */
body.grit-brand.grit-surface-course .wp-block-learnpress-course-image {
  background: var(--grit-blush) !important;
}

/* Social-share widget + its clipboard input. */
body.grit-brand.grit-surface-course .content-widget-social-share {
  background: var(--grit-surface) !important;
  border: 1px solid var(--grit-blush) !important;
  border-radius: var(--grit-radius-card) !important;
}
body.grit-brand.grit-surface-course .content-widget-social-share,
body.grit-brand.grit-surface-course .content-widget-social-share * { color: var(--grit-text) !important; }
body.grit-brand.grit-surface-course .clipboard-value {
  background: var(--grit-blush-bg) !important;
  color: var(--grit-text) !important;
  border: 1px solid var(--grit-blush) !important;
}

/* Instructor bio block — container classes captured live. All text goes ink,
   meta counts caption, the name burgundy, links burgundy. */
body.grit-brand.grit-surface-course :is(
  .wp-block-learnpress-course-instructor,
  .wp-block-learnpress-course-instructor-info,
  .lp-section-instructor,
  .lp-instructor-info,
  .lp-instructor-meta,
  .instructor-item-meta,
  .instructor-description) :is(p, span, div, label, li, strong, em) {
  color: var(--grit-text) !important;
}
body.grit-brand.grit-surface-course :is(.instructor-total-courses, .instructor-total-students, .lp-instructor-meta) { color: var(--grit-caption) !important; }
body.grit-brand.grit-surface-course .instructor-display-name { color: var(--grit-burgundy) !important; font-weight: 700; }
body.grit-brand.grit-surface-course :is(.wp-block-learnpress-course-instructor, .lp-section-instructor) a { color: var(--grit-burgundy) !important; }
body.grit-brand.grit-surface-course :is(.wp-block-paragraph, .course-meta, .course-meta *) { color: var(--grit-text) !important; }
/* "Last updated" post-date in the hero — theme muted grey (2.4:1) → caption. */
body.grit-brand.grit-surface-course :is(.wp-block-post-date, .wp-block-post-date__modified-date, .wp-block-post-date time, .wp-block-post-date__modified-date time) {
  color: var(--grit-caption) !important;
  -webkit-text-fill-color: var(--grit-caption) !important;
}
body.grit-brand.grit-surface-course .section-title {
  font-family: var(--grit-font-display) !important;
  font-style: italic !important; font-weight: 900 !important;
  color: var(--grit-burgundy) !important;
}

/* SLS journal card + its "View Journal" link (theme-cyan link on light). */
body.grit-brand.grit-surface-course .sls-course-journal-card {
  background: var(--grit-surface) !important;
  border: 1px solid var(--grit-blush) !important;
  border-radius: var(--grit-radius-card) !important;
}
/* The journal card text (incl. the date) and the "View Journal" link both use
   a gradient-text effect: a linear-gradient background clipped to the text with
   -webkit-text-fill-color: cyan. That overrides `color` entirely — even inline
   color is ignored — so the fill colour, the clip and the gradient must all be
   reset for the brand colours to take. */
body.grit-brand.grit-surface-course .sls-course-journal-card,
body.grit-brand.grit-surface-course .sls-course-journal-card :is(p, span, div, h1, h2, h3, h4, time) {
  color: var(--grit-text) !important;
  -webkit-text-fill-color: var(--grit-text) !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}
body.grit-brand.grit-surface-course a.sls-journal-link,
body.grit-brand.grit-surface-course .sls-course-journal-card a.sls-journal-link {
  color: var(--grit-burgundy) !important;
  -webkit-text-fill-color: var(--grit-burgundy) !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  border-bottom: 1px solid var(--grit-coral);
  text-decoration: none !important;
}

/* Enroll button text — nexus.css forces cyan on links inside the course
   buttons with !important at a specificity a class chain cannot beat, so the
   text colour is pinned on the anchor and any inner node. */
body.grit-brand.grit-surface-course a.btn-buy-via-member-ship,
body.grit-brand.grit-surface-course a.btn-buy-via-member-ship *,
body.grit-brand.grit-surface-course .course-buttons a.lp-button,
body.grit-brand.grit-surface-course .course-buttons a.lp-button * {
  color: var(--grit-dark) !important;
}

/* ── LAYER 9 · lesson surface — CHROME ONLY ────────────────────────────────
   LearnPress renders lessons in course-item-popup mode: the site header is
   hidden and replaced by #popup-header, with a curriculum sidebar and prev/next
   nav. The reading content lives in #grit-lesson-wrapper, a self-contained dark
   design system with its own widgets — per decision it is LEFT UNTOUCHED.
   Every rule here targets popup chrome only and must never reach inside
   #grit-lesson-wrapper. No bare element selectors for that reason. */

/* Top bar --------------------------------------------------------------- */
body.grit-brand.grit-surface-lesson #popup-header {
  background: var(--grit-burgundy) !important;
  border-bottom: 2px solid var(--grit-coral) !important;
  box-shadow: var(--grit-shadow-nav);
}
body.grit-brand.grit-surface-lesson #popup-header .course-title,
body.grit-brand.grit-surface-lesson #popup-header > * > .course-title {
  color: #fff !important;
  font-family: var(--grit-font-display) !important;
  font-style: italic !important;
  font-weight: 900 !important;
}
/* The current lesson title was theme cyan. */
body.grit-brand.grit-surface-lesson #popup-header .course-item-title {
  color: var(--grit-coral) !important;
  -webkit-text-fill-color: var(--grit-coral) !important;
}
body.grit-brand.grit-surface-lesson #popup-header :is(.back-course, .lp-icon-times, .lp-icon-angle-down, .lp-icon-angle-up, i) {
  color: #fff !important;
}
body.grit-brand.grit-surface-lesson #popup-header .back-course {
  background: rgba(255,255,255,.12) !important;
  border-radius: var(--grit-radius-btn) !important;
  transition: background .2s var(--grit-ease);
}
body.grit-brand.grit-surface-lesson #popup-header .back-course:hover { background: var(--grit-coral) !important; color: var(--grit-dark) !important; }

/* Progress bar in the popup header, if present. */
body.grit-brand.grit-surface-lesson #popup-header :is(.lp-course-progress__active, .learn-press-progress__active, .progress-bg) {
  background: var(--grit-coral) !important;
}

/* Curriculum sidebar (chrome, not the reading content) ------------------ */
body.grit-brand.grit-surface-lesson :is(#learn-press-course-curriculum, .lp-course-curriculum, .curriculum-scrollable) {
  background: var(--grit-surface) !important;
  color: var(--grit-text) !important;
  border-right: 1px solid var(--grit-blush) !important;
}
body.grit-brand.grit-surface-lesson :is(.lp-course-curriculum, #learn-press-course-curriculum) :is(.section-title, .curriculum-title, .course-curriculum__title) {
  color: var(--grit-burgundy) !important;
  font-family: var(--grit-font-display) !important;
  font-style: italic !important; font-weight: 900 !important;
  background: var(--grit-blush-bg) !important;
}
/* Lesson rows in the sidebar. */
body.grit-brand.grit-surface-lesson :is(.lp-course-curriculum, #learn-press-course-curriculum) .course-item {
  background: transparent !important;
  border-bottom: 1px solid var(--grit-blush) !important;
}
body.grit-brand.grit-surface-lesson :is(.lp-course-curriculum, #learn-press-course-curriculum) .course-item :is(.course-item-title, .item-name, a) {
  color: var(--grit-text) !important;
}
body.grit-brand.grit-surface-lesson :is(.lp-course-curriculum, #learn-press-course-curriculum) .course-item:hover {
  background: var(--grit-blush-bg) !important;
}
/* Current lesson: was a cyan tint — now coral/blush with a coral marker. */
body.grit-brand.grit-surface-lesson :is(.lp-course-curriculum, #learn-press-course-curriculum) .course-item.current,
body.grit-brand.grit-surface-lesson :is(.lp-course-curriculum, #learn-press-course-curriculum) .course-item.item-current {
  background: var(--grit-blush) !important;
  box-shadow: inset 3px 0 0 var(--grit-coral) !important;
}
body.grit-brand.grit-surface-lesson :is(.lp-course-curriculum, #learn-press-course-curriculum) .course-item.current :is(.course-item-title, a) {
  color: var(--grit-burgundy) !important;
  font-weight: 700;
}
/* Item icons / status ticks in the sidebar. */
body.grit-brand.grit-surface-lesson :is(.lp-course-curriculum, #learn-press-course-curriculum) .course-item [class*="lp-icon"],
body.grit-brand.grit-surface-lesson :is(.lp-course-curriculum, #learn-press-course-curriculum) .course-item .course-item-ico {
  color: var(--grit-coral) !important;
}
/* Collapsible SECTION headers in the left panel — theme paints these #1E293B,
   including the .course-section__title element itself (which is why the burgundy
   titles read against a dark ground). Flip every part of the header light. */
body.grit-brand.grit-surface-lesson :is(.lp-course-curriculum, #learn-press-course-curriculum, .curriculum-scrollable, .lp-content-area) :is(.course-section, .course-section-header, .course-section__title, .course-section-info) {
  background: var(--grit-blush-bg) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--grit-blush) !important;
}
body.grit-brand.grit-surface-lesson :is(.lp-course-curriculum, #learn-press-course-curriculum) .course-section__title {
  color: var(--grit-burgundy) !important;
  -webkit-text-fill-color: var(--grit-burgundy) !important;
  font-family: var(--grit-font-display) !important;
  font-style: italic !important; font-weight: 900 !important;
}
body.grit-brand.grit-surface-lesson :is(.lp-course-curriculum, #learn-press-course-curriculum) :is(.course-section-info, .course-section-meta) {
  color: var(--grit-caption) !important;
}
/* Any inputs in the sidebar or content (search, flashcard fields). */
body.grit-brand.grit-surface-lesson :is(.lp-course-curriculum, #learn-press-course-curriculum) input,
body.grit-brand.grit-surface-lesson #grit-lesson-wrapper :is(input, textarea) {
  background: #fff !important;
  color: var(--grit-text) !important;
  -webkit-text-fill-color: var(--grit-text) !important;
  border: 1.5px solid var(--grit-blush) !important;
  border-radius: var(--grit-radius-btn) !important;
}
body.grit-brand.grit-surface-lesson :is(.lp-course-curriculum, #learn-press-course-curriculum) .course-item.completed .course-item-ico { color: #1E7A46 !important; }
/* Sidebar meta (durations, counts). */
body.grit-brand.grit-surface-lesson :is(.lp-course-curriculum, #learn-press-course-curriculum) :is(.course-item-meta, .item-meta, .lp-duration) {
  color: var(--grit-caption) !important;
}

/* Prev / next navigation ------------------------------------------------ */
body.grit-brand.grit-surface-lesson :is(#lp-item-navigation, .lp-navigation, .course-item-nav) {
  background: var(--grit-surface) !important;
  border-top: 1px solid var(--grit-blush) !important;
}
body.grit-brand.grit-surface-lesson :is(#lp-item-navigation, .lp-navigation) :is(.nav-text, .lp-course-nav-title) { color: var(--grit-text) !important; }

/* Lesson footer nav. The theme styles this whole area under #popup-footer —
   an ID selector (1,2,1) that beats any class chain — so these overrides carry
   the ID too and load last, winning cleanly.
     · the "Up Next / <lesson name>" label is removed per request
     · Continue-to-next → solid coral (teal shimmer animation killed)
     · Previous → burgundy outline pill
     · footer ground → blush with a coral top rule, matching the header       */
body.grit-brand.grit-surface-lesson #popup-footer {
  background: var(--grit-blush-bg) !important;
  border-top: 2px solid var(--grit-coral) !important;
}
body.grit-brand.grit-surface-lesson #popup-footer .course-item-nav__name { display: none !important; }
/* The content-level next-lesson bar also shows an "Up Next" label — remove it. */
body.grit-brand.grit-surface-lesson .next-label { display: none !important; }
body.grit-brand.grit-surface-lesson #popup-footer .course-item-nav .next a {
  background: var(--grit-coral) !important;
  background-image: none !important;
  animation: none !important;
  color: var(--grit-dark) !important;
  border: 0 !important;
  box-shadow: var(--grit-shadow-cta) !important;
}
body.grit-brand.grit-surface-lesson #popup-footer .course-item-nav .next a:hover {
  background: var(--grit-coral-hi) !important;
  box-shadow: 0 8px 30px rgba(255,138,138,.5) !important;
}
body.grit-brand.grit-surface-lesson #popup-footer .course-item-nav .prev a {
  background: transparent !important;
  color: var(--grit-burgundy) !important;
  border: 2px solid var(--grit-blush) !important;
}
body.grit-brand.grit-surface-lesson #popup-footer .course-item-nav .prev a:hover {
  border-color: var(--grit-coral) !important;
  background: var(--grit-blush) !important;
}
body.grit-brand.grit-surface-lesson #popup-footer .course-item-nav [class*="lp-icon"] { color: inherit !important; }

/* Complete / continue button in the lesson chrome (not the content). */
body.grit-brand.grit-surface-lesson :is(.course-item-nav, #lp-item-navigation, .lp-navigation) :is(.lp-button, button.complete-item, .lp-complete-item) {
  background: var(--grit-coral) !important;
  color: var(--grit-dark) !important;
  border: 0 !important;
  border-radius: var(--grit-radius-btn) !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* SLS journal widget in the lesson SIDEBAR (chrome, outside the wrapper).
   Same gradient-text effect as on the course page — reset the text-fill. */
body.grit-brand.grit-surface-lesson :is(.sls-sidebar-journal-title, .sls-course-journal-card, .sls-sidebar-journal) {
  color: var(--grit-burgundy) !important;
  -webkit-text-fill-color: var(--grit-burgundy) !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}
body.grit-brand.grit-surface-lesson .sls-sidebar-journal-title {
  font-family: var(--grit-font-display) !important;
  font-style: italic !important; font-weight: 900 !important;
}
body.grit-brand.grit-surface-lesson a.sls-journal-link {
  color: var(--grit-burgundy) !important;
  -webkit-text-fill-color: var(--grit-burgundy) !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  border-bottom: 1px solid var(--grit-coral);
  text-decoration: none !important;
}

/* ── LAYER 10 · lesson READING CONTENT → full light ────────────────────────
   Converts the #grit-lesson-wrapper design system from dark deep-space to the
   light brand, blog-10-scoped (other sites keep the dark original). Strategy:
   remap the design system's own CSS custom properties to a light palette so
   everything token-driven flips at once; hardcoded colours are then mopped up
   by the rules below and by iteration. */

body.grit-brand.grit-surface-lesson #grit-lesson-wrapper {
  /* grounds */
  --bg-base:  #FFF5F5;
  --bg-l1:    #FFFFFF;
  --bg-l2:    #FFFFFF;
  --bg-l3:    #FFF5F5;
  --bg-l4:    #FFE4E4;
  /* accents — cyan/violet had to become text-safe brand colours */
  --accent-blue:   #4D001D;
  --accent-teal:   #4D001D;
  --accent-gold:   #9A7B0A;
  --accent-green:  #1E7A46;
  --accent-amber:  #4D001D;
  --accent-violet: #7A1550;
  --accent-red:    #B3261E;
  /* text */
  --text-primary: #1A1A1A;
  --text-body:    #262626;
  --text-muted:   #475569;
  --text-subtle:  #475569;
  /* borders */
  --border-soft:   rgba(77,0,29,.10);
  --border-mid:    rgba(77,0,29,.18);
  --border-strong: rgba(77,0,29,.32);
  /* legacy aliases resolve through the above */
  --brand-gold:        var(--accent-gold);
  --brand-gold-bright: var(--accent-gold);
  --brand-dark:        #FFFFFF;
  --brand-slate:       #FFF5F5;
  --brand-gray:        #FFFFFF;
  --brand-text:        var(--text-body);
  --dark:              var(--bg-base);

  background: var(--bg-base) !important;
  color: var(--text-body) !important;
}
/* The wrapper's own dark base is set via the #wrapper#wrapper hack — match it. */
body.grit-brand.grit-surface-lesson #grit-lesson-wrapper#grit-lesson-wrapper {
  background: var(--grit-blush-bg) !important;
  background-image: none !important;
}

/* The wrapper often hard-sets the base bg/text directly on itself and its main
   column — pin those to the light ground. */
body.grit-brand.grit-surface-lesson #grit-lesson-wrapper,
body.grit-brand.grit-surface-lesson #grit-lesson-wrapper > * {
  background-color: transparent;
}

/* Body copy: the design uses hardcoded light greys (#CBD5E1 / #F8FAFC) in many
   places that would vanish on white. Default all prose to ink; accent/heading
   rules below re-assert brand colours where wanted. */
body.grit-brand.grit-surface-lesson #grit-lesson-wrapper :is(p, li, td, th, dd, dt, blockquote, figcaption, span) {
  color: var(--text-body) !important;
}
body.grit-brand.grit-surface-lesson #grit-lesson-wrapper :is(h1, h2, h3, h4, h5, h6) {
  color: var(--grit-burgundy) !important;
}
body.grit-brand.grit-surface-lesson #grit-lesson-wrapper a { color: var(--grit-burgundy) !important; }
body.grit-brand.grit-surface-lesson #grit-lesson-wrapper strong { color: var(--grit-burgundy) !important; }
/* the design system sets many headings as gradient text — reset the fill. */
body.grit-brand.grit-surface-lesson #grit-lesson-wrapper :is(h1,h2,h3,h4,h5,h6) {
  -webkit-text-fill-color: var(--grit-burgundy) !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}

/* LP content containers behind/around the wrapper → light ground. */
body.grit-brand.grit-surface-lesson :is(
  #learn-press-content-item, #popup-content, #popup-course,
  .content-item-scrollable, .content-item-summary, .content-item-wrap,
  .course-item-summary, .lp-content, .lp-lesson-wrapper,
  .content-item-description, .learnpress-content) {
  background: var(--grit-blush-bg) !important;
  color: var(--grit-text) !important;
}

/* Section & callout cards → white cards on the blush ground. Double-ID prefix
   matches the design system's own #wrapper#wrapper specificity hack. */
body.grit-brand.grit-surface-lesson #grit-lesson-wrapper#grit-lesson-wrapper :is(
  .the-story, .the-grind, .the-spark, .shift-section, .spark-block,
  .big-question, .hero-card, .hero-banner, .key-concept-card, .key-takeaway-card,
  .stat-row, .aside-block, .field-notes, .journal-prompt, .pull-quote,
  .real-world-card, .reflect-callout, .connection-card, .progress-checkpoint,
  .try-this, .sls-open-question, .article-body, .image-caption, .detail-block,
  .narrative-block) {
  background: #fff !important;
  background-image: none !important;
  border: 1px solid var(--grit-blush) !important;
  border-radius: var(--grit-radius-card) !important;
  box-shadow: 0 8px 24px rgba(77,0,29,.05) !important;
  color: var(--grit-text) !important;
}
/* Callout cards get a coral left accent to keep the design's emphasis. */
body.grit-brand.grit-surface-lesson #grit-lesson-wrapper#grit-lesson-wrapper :is(
  .big-question, .key-concept-card, .key-takeaway-card, .reflect-callout,
  .journal-prompt, .pull-quote, .try-this, .spark-block, .the-spark) {
  border-left: 4px solid var(--grit-coral) !important;
}
/* All text inside those cards → ink; headings → burgundy; reset gradient fill. */
body.grit-brand.grit-surface-lesson #grit-lesson-wrapper#grit-lesson-wrapper :is(
  .the-story, .the-grind, .the-spark, .shift-section, .spark-block, .big-question,
  .hero-card, .hero-banner, .key-concept-card, .key-takeaway-card, .stat-row,
  .aside-block, .field-notes, .journal-prompt, .pull-quote, .real-world-card,
  .reflect-callout, .connection-card, .progress-checkpoint, .try-this,
  .sls-open-question, .article-body, .image-caption) :is(p, li, span, td, dd, dt, em, blockquote, div) {
  color: var(--grit-text) !important;
  -webkit-text-fill-color: var(--grit-text) !important;
  background-image: none !important;
}
body.grit-brand.grit-surface-lesson #grit-lesson-wrapper#grit-lesson-wrapper :is(
  .the-story, .the-grind, .the-spark, .shift-section, .spark-block, .big-question,
  .hero-card, .key-concept-card, .key-takeaway-card, .real-world-card,
  .reflect-callout, .try-this) :is(h1,h2,h3,h4,strong) {
  color: var(--grit-burgundy) !important;
  -webkit-text-fill-color: var(--grit-burgundy) !important;
}

/* Decorative oversized watermark glyphs. Several cards draw a huge low-alpha
   character (?, ", numeral, "SHIFT") via ::before/::after as a faint watermark.
   Because -webkit-text-fill-color INHERITS, the ink fill set on card text leaked
   onto every pseudo-element and rendered these opaque black over the copy.
   Resetting the pseudo fill to currentColor makes it follow each pseudo's own
   (intentionally faint) colour again — fixes all watermarks at once, and leaves
   functional pseudos (step numbers, ticks) untouched since their colour is
   already visible. */
body.grit-brand.grit-surface-lesson #grit-lesson-wrapper *::before,
body.grit-brand.grit-surface-lesson #grit-lesson-wrapper *::after {
  -webkit-text-fill-color: currentColor !important;
}
/* Some watermarks are real elements, not pseudos (e.g. .shift-watermark holds
   the word "SHIFT" at 252px). The card-text rule turned those opaque ink;
   render them as a faint coral watermark behind the copy instead. */
body.grit-brand.grit-surface-lesson #grit-lesson-wrapper#grit-lesson-wrapper [class*="watermark"]:not(#zz) {
  color: rgba(255,138,138,.12) !important;
  -webkit-text-fill-color: rgba(255,138,138,.12) !important;
  background-image: none !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Belt-and-suspenders: keep the real copy above any absolute watermark. */
body.grit-brand.grit-surface-lesson #grit-lesson-wrapper#grit-lesson-wrapper :is(.big-question, .shift-section, .pull-quote, .spark-block, .the-spark, .reflect-callout) :is(p, h1, h2, h3, h4, span, .bq-label, blockquote) {
  position: relative;
  z-index: 1;
}

/* Small labels/tags (hero-tag, *-label, *-tag) — burgundy chips on blush. */
body.grit-brand.grit-surface-lesson #grit-lesson-wrapper :is(.hero-tag, .ba-label, [class$="-tag"], [class$="-label"], .time-badge) {
  background: var(--grit-blush) !important;
  color: var(--grit-burgundy) !important;
  -webkit-text-fill-color: var(--grit-burgundy) !important;
}

/* ── Widgets ──────────────────────────────────────────────────────────────
   Quiz block */
body.grit-brand.grit-surface-lesson #grit-lesson-wrapper .grit-quiz-block {
  background: #fff !important; background-image: none !important;
  border: 1px solid var(--grit-blush) !important; border-radius: var(--grit-radius-card) !important;
  box-shadow: var(--grit-shadow-card) !important;
}
body.grit-brand.grit-surface-lesson #grit-lesson-wrapper :is(.quiz-question, .quiz-guidance-text) {
  color: var(--grit-text) !important; -webkit-text-fill-color: var(--grit-text) !important;
}
body.grit-brand.grit-surface-lesson #grit-lesson-wrapper .quiz-btn {
  background: #fff !important; background-image: none !important;
  border: 1.5px solid var(--grit-blush) !important; color: var(--grit-text) !important;
  -webkit-text-fill-color: var(--grit-text) !important;
}
body.grit-brand.grit-surface-lesson #grit-lesson-wrapper .quiz-btn:hover:not([disabled]) {
  border-color: var(--grit-coral) !important; background: var(--grit-blush-bg) !important;
}
body.grit-brand.grit-surface-lesson #grit-lesson-wrapper .quiz-btn .quiz-letter {
  background: var(--grit-blush) !important; color: var(--grit-burgundy) !important; -webkit-text-fill-color: var(--grit-burgundy) !important;
}
body.grit-brand.grit-surface-lesson #grit-lesson-wrapper .quiz-btn.quiz-selected { border-color: var(--grit-coral) !important; background: #FFF0F0 !important; }
body.grit-brand.grit-surface-lesson #grit-lesson-wrapper .quiz-btn.quiz-correct,
body.grit-brand.grit-surface-lesson #grit-lesson-wrapper .quiz-result.quiz-result-correct {
  background: #E8F5EE !important; border-color: #1E7A46 !important; color: #14522F !important; -webkit-text-fill-color: #14522F !important;
}
body.grit-brand.grit-surface-lesson #grit-lesson-wrapper .quiz-btn.quiz-wrong,
body.grit-brand.grit-surface-lesson #grit-lesson-wrapper .quiz-result.quiz-result-wrong {
  background: #FDECEA !important; border-color: #B3261E !important; color: #5F1512 !important; -webkit-text-fill-color: #5F1512 !important;
}
body.grit-brand.grit-surface-lesson #grit-lesson-wrapper#grit-lesson-wrapper .quiz-submit {
  background: var(--grit-coral) !important; background-image: none !important;
  color: var(--grit-dark) !important; -webkit-text-fill-color: var(--grit-dark) !important;
  border: 0 !important; box-shadow: var(--grit-shadow-cta) !important;
}
body.grit-brand.grit-surface-lesson #grit-lesson-wrapper .quiz-submit:disabled { opacity: .5 !important; }
body.grit-brand.grit-surface-lesson #grit-lesson-wrapper .quiz-xp-badge {
  background: var(--grit-gold) !important; color: var(--grit-dark) !important; -webkit-text-fill-color: var(--grit-dark) !important;
}

/* Before / After comparison */
body.grit-brand.grit-surface-lesson #grit-lesson-wrapper#grit-lesson-wrapper .ba-before {
  background: #FDECEA !important; background-image: none !important; border: 1px solid #F3C0BA !important; border-radius: var(--grit-radius-card) !important;
}
body.grit-brand.grit-surface-lesson #grit-lesson-wrapper#grit-lesson-wrapper .ba-after {
  background: #E8F5EE !important; background-image: none !important; border: 1px solid #B7DEC6 !important; border-radius: var(--grit-radius-card) !important;
}
body.grit-brand.grit-surface-lesson #grit-lesson-wrapper :is(.ba-before, .ba-after) :is(p, li, span) {
  color: var(--grit-text) !important; -webkit-text-fill-color: var(--grit-text) !important;
}

/* Flashcards */
body.grit-brand.grit-surface-lesson #grit-lesson-wrapper :is(.sls-flashcard, [class*="sls-fc-"]) {
  background: #fff !important; background-image: none !important;
  border-color: var(--grit-blush) !important; color: var(--grit-text) !important;
  -webkit-text-fill-color: var(--grit-text) !important;
}
body.grit-brand.grit-surface-lesson #grit-lesson-wrapper :is(.sls-fc-tag, .sls-conf-tag) {
  background: var(--grit-blush) !important; color: var(--grit-burgundy) !important; -webkit-text-fill-color: var(--grit-burgundy) !important;
}
body.grit-brand.grit-surface-lesson #grit-lesson-wrapper .sls-fc-hint { color: var(--grit-caption) !important; -webkit-text-fill-color: var(--grit-caption) !important; }

/* Confidence / open-question widget (.sls-confidence / .sls-open-question). */
body.grit-brand.grit-surface-lesson #grit-lesson-wrapper#grit-lesson-wrapper :is(.sls-confidence, .sls-open-question) {
  background: #fff !important; background-image: none !important;
  border: 1px solid var(--grit-blush) !important; border-radius: var(--grit-radius-card) !important;
  box-shadow: var(--grit-shadow-card) !important;
}
body.grit-brand.grit-surface-lesson #grit-lesson-wrapper :is(.sls-confidence, .sls-open-question) :is(p, li, span, div, label, .sls-conf-q, .sls-oq-question) {
  color: var(--grit-text) !important; -webkit-text-fill-color: var(--grit-text) !important; background-image: none !important;
}
/* confidence option chips */
body.grit-brand.grit-surface-lesson #grit-lesson-wrapper :is(.sls-conf-opt, .sls-conf-option, .sls-oq-option) {
  background: #fff !important; border: 1.5px solid var(--grit-blush) !important; color: var(--grit-text) !important;
}
body.grit-brand.grit-surface-lesson #grit-lesson-wrapper :is(.sls-conf-opt, .sls-conf-option).selected,
body.grit-brand.grit-surface-lesson #grit-lesson-wrapper :is(.sls-conf-opt, .sls-conf-option):hover {
  border-color: var(--grit-coral) !important; background: #FFF0F0 !important;
}
/* The two widget action buttons hardcode purple/violet — recast as coral. */
body.grit-brand.grit-surface-lesson #grit-lesson-wrapper#grit-lesson-wrapper :is(.sls-submit-btn, .sls-next-btn, .sls-oq-submit) {
  background: var(--grit-coral) !important; background-image: none !important;
  color: var(--grit-dark) !important; -webkit-text-fill-color: var(--grit-dark) !important;
  border: 0 !important; box-shadow: var(--grit-shadow-cta) !important;
}
body.grit-brand.grit-surface-lesson #grit-lesson-wrapper#grit-lesson-wrapper :is(.sls-submit-btn, .sls-next-btn) * {
  color: var(--grit-dark) !important; -webkit-text-fill-color: var(--grit-dark) !important;
}

/* Force dark text on every coral primary button in the content. */
body.grit-brand.grit-surface-lesson #grit-lesson-wrapper#grit-lesson-wrapper :is(.quiz-submit, .sls-submit-btn, .sls-next-btn) :is(span, div, strong) {
  color: var(--grit-dark) !important; -webkit-text-fill-color: var(--grit-dark) !important;
}

/* TTS / audio player + editor buttons */
body.grit-brand.grit-surface-lesson #grit-lesson-wrapper :is(.sls-tts-player, .sls-ed-btn) {
  background: #fff !important; color: var(--grit-text) !important; border-color: var(--grit-blush) !important;
}
body.grit-brand.grit-surface-lesson #grit-lesson-wrapper :is(.sls-ed-btn.sls-ed-active, .sls-ed-btn:hover) {
  background: var(--grit-coral) !important; color: var(--grit-dark) !important;
}

/* ── LAYER 11 · auth surface (register / login / password reset) ───────────
   Two different forms live here: SMLF's registration (form.smlf-register-form
   with .smlf-field rows) and WP/PMPro's login (form#loginform with p.login-*).
   Both are presented as one centred white card on the blush ground. These pages
   carry the Cloudflare Turnstile challenge, so they are verified from sanitised
   local snapshots rather than by pointing an automated browser at them. */

body.grit-brand.grit-surface-auth {
  background: var(--grit-blush-bg) !important;
  color: var(--grit-text) !important;
  font-family: var(--grit-font-body);
}
body.grit-brand.grit-surface-auth main :is(h1, h2, h3),
body.grit-brand.grit-surface-auth main .wp-block-post-title {
  font-family: var(--grit-font-display) !important;
  font-style: italic !important; font-weight: 900 !important;
  color: var(--grit-burgundy) !important;
  text-wrap: balance;
}
body.grit-brand.grit-surface-auth main :is(p, li, span, label, div, small) { color: var(--grit-text) !important; }

/* The form card */
body.grit-brand.grit-surface-auth :is(form.smlf-register-form, form#loginform, form.pmpro_form) {
  background: var(--grit-surface) !important;
  border: 1px solid var(--grit-blush) !important;
  border-radius: var(--grit-radius-card) !important;
  box-shadow: 0 12px 32px rgba(77,0,29,.07) !important;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) !important;
  max-width: 34rem;
  margin-inline: auto;
}

/* Field rows + labels */
body.grit-brand.grit-surface-auth :is(.smlf-field, p.login-username, p.login-password, p.login-remember, p.login-submit) {
  display: block; margin-bottom: 1.1rem;
}
body.grit-brand.grit-surface-auth :is(.smlf-field label, form#loginform label) {
  display: block;
  color: var(--grit-burgundy) !important;
  font-weight: 700; font-size: .9rem; letter-spacing: .02em;
  margin-bottom: .35rem;
}
body.grit-brand.grit-surface-auth .smlf-required { color: #B3261E !important; }

/* Inputs */
body.grit-brand.grit-surface-auth :is(.smlf-field input, form#loginform input[type="text"],
  form#loginform input[type="password"], form#loginform input[type="email"], input.input) {
  width: 100%;
  background: var(--grit-surface) !important;
  color: var(--grit-text) !important;
  border: 1.5px solid var(--grit-blush) !important;
  border-radius: var(--grit-radius-btn) !important;
  padding: .7rem .85rem !important;
  font-family: var(--grit-font-body); font-size: 1rem;
  transition: border-color .2s var(--grit-ease), box-shadow .2s var(--grit-ease);
}
body.grit-brand.grit-surface-auth :is(.smlf-field input:focus, form#loginform input:focus, input.input:focus) {
  border-color: var(--grit-coral) !important;
  box-shadow: 0 0 0 3px rgba(255,138,138,.35) !important;
  outline: none !important;
}
/* "Remember me" is a checkbox — must not stretch full width. */
/* width:auto collapsed the box to ~4px here — give it an explicit hit target. */
body.grit-brand.grit-surface-auth input[type="checkbox"] {
  width: 1.05rem !important;
  height: 1.05rem !important;
  min-width: 1.05rem !important;
  padding: 0 !important;
  margin-right: .45rem;
  vertical-align: middle;
  accent-color: var(--grit-coral);
}
body.grit-brand.grit-surface-auth p.login-remember label { display: inline; color: var(--grit-text) !important; font-weight: 500; }

/* Submit */
body.grit-brand.grit-surface-auth :is(input[type="submit"], button[type="submit"], .smlf-submit, #wp-submit) {
  width: 100%;
  background: var(--grit-coral) !important;
  color: var(--grit-dark) !important;
  border: 0 !important;
  border-radius: var(--grit-radius-btn) !important;
  padding: .9rem 1.5rem !important;
  font-family: var(--grit-font-body) !important;
  font-weight: 700 !important; font-size: 1rem;
  letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--grit-shadow-cta);
  transition: background .3s var(--grit-ease), transform .3s var(--grit-ease);
}
body.grit-brand.grit-surface-auth :is(input[type="submit"]:hover, #wp-submit:hover, button[type="submit"]:hover) {
  background: var(--grit-coral-hi) !important; transform: translateY(-2px);
}

/* Cross-links (register ⇄ login, lost password) */
body.grit-brand.grit-surface-auth main a {
  color: var(--grit-burgundy) !important;
  font-weight: 600; text-decoration: none !important;
  border-bottom: 2px solid var(--grit-coral);
}
body.grit-brand.grit-surface-auth main a:hover { background: var(--grit-blush); }

/* Messages */
body.grit-brand.grit-surface-auth :is(.smlf-errors, .smlf-error, #login_error, .login .message, .pmpro_message) {
  background: var(--grit-blush-bg) !important;
  color: var(--grit-text) !important;
  border-left: 4px solid var(--grit-coral) !important;
  border-radius: 0 12px 12px 0 !important;
  padding: .9rem 1.1rem !important;
}
body.grit-brand.grit-surface-auth :is(.smlf-errors, #login_error) {
  border-left-color: #B3261E !important; background: #FDECEA !important; color: #5F1512 !important;
}

/* Give the Turnstile challenge room and centre it. */
body.grit-brand.grit-surface-auth .sls-turnstile-wrap { margin: 1.25rem auto 1.5rem; }

/* ── LAYER 12 · error surface (404) ────────────────────────────────────────*/
body.grit-brand.grit-surface-error {
  background: var(--grit-blush-bg) !important;
  color: var(--grit-text) !important;
  font-family: var(--grit-font-body);
}
body.grit-brand.grit-surface-error main :is(h1, h2, h3),
body.grit-brand.grit-surface-error main .wp-block-post-title {
  font-family: var(--grit-font-display) !important;
  font-style: italic !important; font-weight: 900 !important;
  color: var(--grit-burgundy) !important;
  text-wrap: balance;
}
body.grit-brand.grit-surface-error main h1 { font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.4rem); }
body.grit-brand.grit-surface-error main :is(p, li, span, div) { color: var(--grit-text) !important; }
body.grit-brand.grit-surface-error main a:not(.wp-element-button) {
  color: var(--grit-burgundy) !important;
  font-weight: 600; text-decoration: none !important;
  border-bottom: 2px solid var(--grit-coral);
}
body.grit-brand.grit-surface-error main :is(.wp-element-button, .wp-block-button__link) {
  background: var(--grit-coral) !important;
  color: var(--grit-dark) !important;
  border: 0 !important;
  border-radius: var(--grit-radius-btn) !important;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  box-shadow: var(--grit-shadow-cta);
}
/* The 404 art references the retired online-learning theme; keep it contained. */
body.grit-brand.grit-surface-error main img { max-width: 100%; height: auto; border-radius: var(--grit-radius-card); }
body.grit-brand.grit-surface-error :is(.wp-block-search__input, input[type="search"]) {
  background: var(--grit-surface) !important; color: var(--grit-text) !important;
  border: 1.5px solid var(--grit-blush) !important; border-radius: var(--grit-radius-btn) !important;
}
body.grit-brand.grit-surface-error .wp-block-search__button {
  background: var(--grit-coral) !important; color: var(--grit-dark) !important;
  border: 0 !important; border-radius: var(--grit-radius-btn) !important; font-weight: 700;
}

/* ── Shell odds and ends ───────────────────────────────────────────────────
   The mobile menu toggle and the skip link still carried the theme's cyan. */
body.grit-brand .wp-block-navigation__responsive-container-open,
body.grit-brand .wp-block-navigation__responsive-container-close {
  background: transparent !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.grit-brand .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--grit-burgundy) !important;
  color: #fff !important;
}
body.grit-brand .wp-block-navigation__responsive-container.is-menu-open a { color: #fff !important; }
body.grit-brand .skip-link,
body.grit-brand .screen-reader-text:focus {
  background: var(--grit-burgundy) !important;
  color: #fff !important;
  border: 2px solid var(--grit-coral) !important;
}

/* Focus visibility — the inherited theme relies on a cyan ring that is
   invisible against burgundy. */
body.grit-brand a:focus-visible,
body.grit-brand button:focus-visible,
body.grit-brand input:focus-visible,
body.grit-brand select:focus-visible,
body.grit-brand textarea:focus-visible {
  outline: 3px solid var(--grit-coral);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  body.grit-brand *,
  body.grit-brand *::before,
  body.grit-brand *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* ── Course-surface footer fix (2026-07-24) ──────────────────────────────
   On single-lp_course pages the footer (a .wp-block-group.has-background) was
   losing its burgundy gradient to grit-brand's own blush card rule and to the
   deep-space snippet (.single-lp_course a → cyan, .has-background → navy).
   These rules out-specify all of them (4 classes + extra type) so the footer
   keeps the burgundy bar + white links, matching every other surface. */
body.grit-brand.grit-surface-course footer.wp-block-group.has-background {
  background: var(--grit-solid) !important;
  border-top: 4px solid var(--grit-coral) !important;
  color: #fff !important;
}
body.grit-brand.grit-surface-course footer.wp-block-group.has-background :is(p, span, li) {
  color: rgba(255,255,255,.82) !important;
}
body.grit-brand.grit-surface-course footer.wp-block-group.has-background a:not(#zz) {
  color: #fff !important;
}
body.grit-brand.grit-surface-course footer.wp-block-group.has-background a:not(#zz):hover,
body.grit-brand.grit-surface-course footer.wp-block-group.has-background a:not(#zz):focus-visible {
  color: var(--grit-coral) !important;
}

/* ── Course curriculum widget — brand reskin (2026-07-25) ─────────────────
   The LearnPress curriculum block on single-lp_course pages was still deep-space:
   near-white section headers (invisible on white), grey item text, cyan links.
   Backgrounds are already light, so this recolours text to the brand palette.
   :not(#zz) adds an ID-level bump so these beat the deep-space .single-lp_course
   rules (which stack up to 5 classes). */
body.grit-brand.grit-surface-course .lp-course-curriculum:not(#zz),
body.grit-brand.grit-surface-course .lp-course-curriculum:not(#zz) :is(.course-item, .course-item__name, .course-item-title, .section-desc) {
  color: var(--grit-text) !important;
}
/* section headers → burgundy title on a blush band */
body.grit-brand.grit-surface-course .lp-course-curriculum:not(#zz) .course-section-header {
  background: var(--grit-blush-bg) !important;
  border-radius: 10px;
}
body.grit-brand.grit-surface-course .lp-course-curriculum:not(#zz) .course-section-header,
body.grit-brand.grit-surface-course .lp-course-curriculum:not(#zz) .course-section-header * {
  color: var(--grit-burgundy) !important;
}
/* links (lesson/quiz item titles) → burgundy, hover coral */
body.grit-brand.grit-surface-course .lp-course-curriculum:not(#zz) a {
  color: var(--grit-burgundy) !important;
}
body.grit-brand.grit-surface-course .lp-course-curriculum:not(#zz) a:hover,
body.grit-brand.grit-surface-course .lp-course-curriculum:not(#zz) a:focus-visible {
  color: var(--grit-coral) !important;
}
/* item meta (duration / lesson + question counts) → muted caption */
body.grit-brand.grit-surface-course .lp-course-curriculum:not(#zz) :is(.duration, .question-count, .count-item, .course-item__meta, .lp-course-item-meta, .course-count-section, .course-count-item) {
  color: var(--grit-caption) !important;
}

body.grit-brand.grit-surface-course .lp-course-curriculum:not(#zz) :is(.course-section, .curriculum-sections, .section-content) { color: var(--grit-text) !important; }

/* ── Course-description wrapper dark-band fix (2026-07-25) ─────────────────
   The description reuses #grit-lesson-wrapper (a lesson-design ID). On courses
   whose wrapper carries no inline background (e.g. Tenacity), deep-space snippet 8
   paints it #020617, which shows as a dark band between the light inner cards.
   Force it transparent on the course surface so the page blush shows through the
   gaps. Courses whose wrapper has an inline background keep it (inline !important
   wins). Two IDs (#id + :not(#zz)) out-specify the snippet's #grit-lesson-wrapper. */
body.grit-brand.grit-surface-course #grit-lesson-wrapper:not(#zz) {
  background: transparent !important;
}

/* ── Checkout · Account Info: align Password + Confirm Password ─────────────
   PMPRO renders the field that HAS the Show-Password toggle as a grid
   ("label toggle" / "input input"), so its header row is taller than the
   Confirm field's plain label and its input drops below the confirm input.
   Give BOTH password columns the same two-row grid (fixed header + input) so
   the labels AND inputs line up, and keep the toggle compact to fit the row. */
body.grit-brand #pmpro_user_fields .pmpro_cols-2 .pmpro_form_field-password {
  display: grid !important;
  grid-template-columns: 1fr auto;
  grid-template-areas: "label toggle" "input input";
  grid-template-rows: 1.75rem auto;
  align-items: center;
  column-gap: .5rem;
  row-gap: .45rem;
}
body.grit-brand #pmpro_user_fields .pmpro_cols-2 .pmpro_form_field-password > label {
  grid-area: label; margin: 0 !important; align-self: center;
}
body.grit-brand #pmpro_user_fields .pmpro_cols-2 .pmpro_form_field-password > input {
  grid-area: input; margin: 0 !important;
}
body.grit-brand #pmpro_user_fields .pmpro_cols-2 .pmpro_form_field-password-toggle {
  grid-area: toggle; justify-self: end; align-self: center; margin: 0 !important;
}
body.grit-brand #pmpro_user_fields .pmpro_form_field-password-toggle button {
  padding: 0 !important; line-height: 1.2 !important; font-size: .8rem !important; gap: .3rem;
}
body.grit-brand #pmpro_user_fields .pmpro_form_field-password-toggle .pmpro_icon-eye {
  height: 16px !important; width: 16px !important;
}