/* (C)2026 Badger Commerce Limited, a subsidiary of Kedos Consulting Limited */

/* ==========================================================================================
   RIDGE
   A theme for organisations that publish more than they sell: rescue teams, charities, clubs.
   Two brand colours with fixed jobs - red is for acting (donate, call to action, "latest"), deep
   purple is the organisation itself (the strip, the log band, the footer). Barlow Condensed in
   capitals for headings and figures, Public Sans for reading, IBM Plex Mono for dates and post
   references. Corners are 6px; cards are used sparingly.

   Layered over Nova (and Nova over Bootstrap 5): Nova's bdgr.css loads first, this file second,
   the Design Brief's theme.css last.

   Structure of this file
   1. Tokens: Ridge's palette, and Nova's tokens re-pointed at it, so every page Ridge has not
      replaced (shop, basket, checkout, account) picks up the palette and type.
   2. Base and small parts (wrap, buttons, labels, section heads).
   3. Strip, header, menu, drawer.
   4. Page layouts.
   5. Blog: story cards, log band, timeline, post list, masthead, article body.
   6. Donations (thank-you notes).
   7. Content blocks: the hero extension, and the call to action extension (appeal band, strip,
      panel, stat).
   8. Footer.
   9. Nova compatibility.
   ========================================================================================== */

:root {
  /* ── Ridge palette ───────────────────────────────────────────────────────────────────── */
  --rg-red: #EF3E33;          /* brand red: large type, marks, the "latest" tag */
  --rg-red-ui: #D93226;       /* buttons and links: white text on it is 4.7:1 */
  --rg-red-ink: #B8261C;      /* red text on paper */
  --rg-purple: #3D3469;       /* the organisation: log band, headings on paper */
  --rg-purple-deep: #262046;  /* strip and footer */
  --rg-purple-tint: #EFEDF6;
  --rg-paper: #F7F6FA;        /* a white nudged toward the purple */
  --rg-surface: #FFFFFF;
  --rg-ink: #1D1A2E;
  --rg-muted: #5F5A74;
  --rg-line: #E3E0EC;
  --rg-on-dark: #FFFFFF;
  --rg-on-dark-soft: #C9C4E0;
  --rg-on-dark-accent: #FFB3AD; /* red, lightened to read on the purple */

  /* ── Nova tokens, re-pointed ─────────────────────────────────────────────────────────── */
  --color-primary: #D93226;
  --color-primary-dark: #B8261C;
  --color-primary-light: #FCD4D1;
  --color-primary-50: #FDECEA;
  --color-primary-ring: rgba(217, 50, 38, 0.22);
  --color-primary-tint: rgba(217, 50, 38, 0.06);
  --color-secondary: #3D3469;
  --color-secondary-dark: #262046;
  --color-accent: #3D3469;

  /* A neutral ramp with a slight purple bias. */
  --color-gray-50: #F7F6FA;
  --color-gray-100: #EFEDF6;
  --color-gray-200: #E3E0EC;
  --color-gray-300: #CDC9DA;
  --color-gray-400: #9893AB;
  --color-gray-500: #6E6985;
  --color-gray-600: #5F5A74;
  --color-gray-700: #45405A;
  --color-gray-800: #2E2A42;
  --color-gray-900: #1D1A2E;
  --color-gray-950: #13111D;

  --color-success: #2F7D4F;
  --color-error: #B8261C;
  --color-error-dark: #8F1D15;
  --color-warning: #8A5A12;

  --font-family-base: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-family-display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --font-weight-heading: 700;
  --letter-spacing-heading: 0;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 6px;
  --radius-xl: 10px;
  --radius-2xl: 10px;

  --shadow-xs: none;
  --shadow-sm: 0 1px 2px rgba(29, 26, 46, 0.06);
  --shadow-md: 0 10px 24px -14px rgba(29, 26, 46, 0.35);
  --shadow-lg: 0 20px 40px -20px rgba(29, 26, 46, 0.4);
  --shadow-xl: 0 30px 60px -30px rgba(29, 26, 46, 0.45);

  --container-max-width: 1240px;
  --container-padding: clamp(16px, 4vw, 40px);

  /* ── Ridge roles ─────────────────────────────────────────────────────────────────────── */
  --rg-font-display: var(--font-family-display);
  --rg-font-body: var(--font-family-base);
  --rg-font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --rg-gutter: clamp(16px, 4vw, 40px);
  --rg-radius: 6px;
  --rg-band: clamp(48px, 7vw, 88px);   /* vertical padding of a full-width band */
  --rg-read: 880px;                    /* a blog post's reading column */
  --rg-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --rg-ls-caps: 0.14em;
  /* One button shape for the whole site: Ridge's own .rg-btn, Bootstrap's .btn (tenant content,
     extensions) and Nova's .nova-btn all take these. */
  --rg-btn-radius: 6px;
  --rg-btn-pad-y: 12px;
  --rg-btn-pad-x: 24px;
  --rg-btn-font: 600 1rem/1.2 var(--rg-font-body);
}

/* ==========================================================================================
   1. BASE
   ========================================================================================== */

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  background: var(--rg-paper);
  color: var(--rg-ink);
  font-family: var(--rg-font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, h4 {
  font-family: var(--rg-font-display);
  font-weight: 700;
  line-height: 1.05;
  text-wrap: balance;
  color: inherit;
}

a { color: inherit; }
a:hover { color: inherit; }
:where(p, li, dd, td) > a:not([class]) {
  color: var(--rg-red-ink);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
:focus-visible { outline: 3px solid var(--rg-red); outline-offset: 2px; }

.rg-wrap {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--rg-gutter);
  box-sizing: border-box;
}
.rg-wrap .rg-wrap { padding-inline: 0; }

.rg-skip {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  background: var(--rg-ink); color: #fff; padding: 10px 14px; border-radius: var(--rg-radius);
  text-decoration: none;
}
.rg-skip:focus { top: 8px; color: #fff; }
#rg-content { display: block; height: 0; outline: none; }

.rg-icon {
  width: 1em; height: 1em; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* Buttons. Red is the call to action; one per screen is the aim. */
.rg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  font: var(--rg-btn-font);
  padding: var(--rg-btn-pad-y) var(--rg-btn-pad-x);
  border-radius: var(--rg-btn-radius);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s var(--rg-ease), background-color 0.15s, border-color 0.15s, color 0.15s;
}
.rg-btn:hover { transform: translateY(-1px); }
.rg-btn--cta, .rg-btn--cta:visited { background: var(--rg-red-ui); color: #fff; box-shadow: 0 6px 18px -8px rgba(217, 50, 38, 0.7); }
.rg-btn--cta:hover { background: var(--rg-red-ink); color: #fff; }
.rg-btn--line { background: var(--rg-surface); border-color: var(--rg-line); color: var(--rg-ink); }
.rg-btn--line:hover { border-color: var(--rg-ink); }
.rg-btn--ghost { border-color: rgba(255, 255, 255, 0.75); color: #fff; }
.rg-btn--ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.rg-btn--light { background: #fff; color: var(--rg-red-ink); }
.rg-btn--light:hover { color: var(--rg-red-ink); background: var(--rg-purple-tint); }
.rg-btn--block { display: flex; width: 100%; }
.rg-iconbtn {
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  border: 0; border-radius: 999px; background: transparent; color: inherit; font-size: 1.25rem; cursor: pointer;
}
.rg-iconbtn:hover { background: var(--rg-purple-tint); }

/* Small labels */
.rg-eyebrow {
  font: 600 0.75rem/1 var(--rg-font-body);
  letter-spacing: var(--rg-ls-caps);
  text-transform: uppercase;
  color: var(--rg-red-ink);
  margin: 0;
}
.rg-date { font: 500 0.8125rem/1.3 var(--rg-font-mono); color: var(--rg-muted); letter-spacing: 0.01em; }
.rg-ref { font: 600 0.8125rem/1 var(--rg-font-mono); letter-spacing: 0.03em; }
.rg-tag {
  display: inline-block; font: 600 0.6875rem/1 var(--rg-font-body); letter-spacing: 0.1em; text-transform: uppercase;
  padding: 6px 9px; border-radius: 3px; background: var(--rg-red-ui); color: #fff;
}

/* Section heading row: title on the left, "view all" on the right */
.rg-block { margin-block: clamp(32px, 5vw, 56px); }
.rg-layout__side .rg-block { margin-block: 0 28px; }
.rg-head {
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap;
  gap: 8px 20px; margin-bottom: 24px;
}
.rg-head__title {
  margin: 0; font-size: clamp(1.9rem, 3.6vw, 2.75rem); text-transform: uppercase; color: var(--rg-purple);
}
.rg-layout__side .rg-head__title { font-size: 1.5rem; }
.rg-more {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; color: var(--rg-red-ink); text-decoration: none;
}
.rg-more .rg-icon { transition: transform 0.15s var(--rg-ease); }
.rg-more:hover { color: var(--rg-red-ink); }
.rg-more:hover .rg-icon { transform: translateX(3px); }

/* Images from fragment/responsive-image fill whatever box they are given */
.rg-story__media div:has(> img.nova-responsive-image),
.rg-log__lead-media div:has(> img.nova-responsive-image),
.rg-timeline__media div:has(> img.nova-responsive-image),
.rg-postlist__media div:has(> img.nova-responsive-image) { height: 100%; }
.rg-story__media img, .rg-log__lead-media img, .rg-timeline__media img, .rg-postlist__media img {
  width: 100%; height: 100% !important; object-fit: cover; display: block;
  transition: transform 0.6s var(--rg-ease);
}

/* ==========================================================================================
   3. STRIP, HEADER, MENU, DRAWER
   ========================================================================================== */

.rg-strip { background: var(--rg-purple-deep); color: var(--rg-on-dark-soft); font-size: 0.8125rem; }
.rg-strip__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; padding-block: 6px; }
.rg-strip__message { margin: 0; min-width: 0; }
.rg-strip__message:empty { display: none; }
.rg-strip__message strong, .rg-strip__message b { color: #fff; font-weight: 600; }
.rg-strip__message a { color: #fff; }
/* A site's announcement can mark a number to dial: <span class="rg-dial">999</span> */
.rg-dial {
  font: 600 0.8125rem/1 var(--rg-font-mono); color: #fff; background: var(--rg-red-ui);
  padding: 2px 7px; border-radius: 3px; margin-inline: 2px;
}
.rg-strip__links { list-style: none; display: flex; gap: 20px; margin: 0 0 0 auto; padding: 0; flex-shrink: 0; }
.rg-strip__links a { color: var(--rg-on-dark-soft); text-decoration: none; }
.rg-strip__links a:hover { color: #fff; }
.rg-basket { display: inline-flex; align-items: center; gap: 6px; }
.rg-basket__count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding-inline: 5px;
  border-radius: 999px; background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 0.75rem; font-weight: 600;
}
.rg-basket.has-items .rg-basket__count { background: var(--rg-red-ui); }

.rg-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--rg-line);
  transition: box-shadow 0.2s;
}
.rg-header.is-scrolled { box-shadow: 0 8px 24px -18px rgba(29, 26, 46, 0.5); }
.rg-header__in { display: flex; align-items: center; gap: 24px; min-height: 72px; padding-block: 10px; }

.rg-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; min-width: 0; }
.rg-brand:hover { color: inherit; }
.rg-brand__logo { height: 52px; width: auto; display: block; }
.rg-brand__text { display: flex; flex-direction: column; min-width: 0; }
.rg-brand__name {
  font: 700 1.375rem/1 var(--rg-font-display); text-transform: uppercase; letter-spacing: 0.02em; color: var(--rg-purple);
}
.rg-brand__tagline {
  font: 500 0.6875rem/1.3 var(--rg-font-body); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--rg-muted); margin-top: 4px;
}

.rg-nav { margin-left: auto; min-width: 0; }
.rg-header__tools { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.rg-header__search {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 999px;
  color: var(--rg-ink); font-size: 1.15rem; text-decoration: none;
}
.rg-header__search:hover { background: var(--rg-purple-tint); color: var(--rg-ink); }
.rg-header__cta { padding: 10px 20px; }
.rg-header__menu {
  display: none; align-items: center; gap: 8px;
  border: 1px solid var(--rg-line); background: var(--rg-surface); color: var(--rg-ink);
  border-radius: var(--rg-btn-radius); padding: 8px 14px; font: 600 0.875rem/1 var(--rg-font-body); cursor: pointer;
}
.rg-header__menu .rg-icon { font-size: 1.1rem; }

/* Menu: a row of links in the bar, with drop-down panels */
.rg-menu { list-style: none; margin: 0; padding: 0; }
.rg-nav .rg-menu { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }
.rg-menu__item { position: relative; }
.rg-menu__row { display: flex; align-items: center; }
.rg-menu__link {
  display: inline-flex; align-items: center; gap: 4px;
  font: 500 0.9375rem/1 var(--rg-font-body); color: var(--rg-ink); text-decoration: none;
  padding: 10px 12px; border-radius: var(--rg-btn-radius); border: 0; background: none; cursor: pointer; white-space: nowrap;
}
.rg-menu__link:hover, .rg-menu__item.is-open > .rg-menu__row > .rg-menu__link { background: var(--rg-purple-tint); color: var(--rg-ink); }
.rg-menu__item.is-current > .rg-menu__row > .rg-menu__link,
.rg-menu__link[aria-current="page"] { color: var(--rg-red-ink); }
.rg-menu__caret { font-size: 0.9em; transition: transform 0.2s; }
.rg-menu__toggle {
  display: inline-grid; place-items: center; width: 26px; height: 32px; margin-left: -8px;
  border: 0; background: none; color: var(--rg-muted); border-radius: 999px; cursor: pointer; font-size: 0.95rem;
}
.rg-menu__toggle .rg-icon, .rg-menu__caret { transition: transform 0.2s; }
.rg-menu__item.is-open > .rg-menu__row .rg-icon { transform: rotate(180deg); }

.rg-nav .rg-menu__panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 50;
  min-width: 240px; max-width: min(520px, 90vw);
  background: var(--rg-surface); border: 1px solid var(--rg-line); border-radius: 10px;
  box-shadow: 0 24px 48px -24px rgba(29, 26, 46, 0.45);
  padding: 10px;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.15s, transform 0.15s var(--rg-ease), visibility 0s linear 0.15s;
}
.rg-nav .rg-menu__item:last-child .rg-menu__panel,
.rg-nav .rg-menu__item:nth-last-child(2) .rg-menu__panel { left: auto; right: 0; }
/* Without JS, hover and keyboard focus open the panel; with JS, ridge.js adds .is-open (hover intent). */
html:not(.rg-js) .rg-nav .rg-menu__item:hover > .rg-menu__panel,
.rg-nav .rg-menu__item:focus-within > .rg-menu__panel,
.rg-nav .rg-menu__item.is-open > .rg-menu__panel {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
.rg-js .rg-nav .rg-menu__item:not(.is-open):focus-within > .rg-menu__panel { opacity: 0; visibility: hidden; }
.rg-menu__list, .rg-menu__sublist { list-style: none; margin: 0; padding: 0; }
.rg-menu__sublink {
  display: block; padding: 9px 12px; border-radius: var(--rg-radius);
  color: var(--rg-ink); text-decoration: none; font-size: 0.9375rem; line-height: 1.35;
}
.rg-menu__sublink:hover { background: var(--rg-purple-tint); color: var(--rg-ink); }
.rg-menu__sublink--heading, .rg-menu__heading { font-weight: 600; }
.rg-menu__heading { margin: 0; padding: 9px 12px 4px; font-size: 0.75rem; letter-spacing: var(--rg-ls-caps); text-transform: uppercase; color: var(--rg-muted); }
.rg-menu__sublist { padding-left: 10px; margin-bottom: 6px; }
.rg-menu__sublist .rg-menu__sublink { font-size: 0.875rem; padding-block: 7px; color: var(--rg-muted); }

/* Drawer (small screens) */
.rg-drawer { position: fixed; inset: 0; z-index: 90; }
.rg-drawer[hidden] { display: none; }
.rg-drawer__scrim { position: absolute; inset: 0; background: rgba(19, 17, 29, 0.55); }
.rg-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(380px, 88vw);
  background: var(--rg-surface); display: flex; flex-direction: column;
  box-shadow: -20px 0 40px -20px rgba(0, 0, 0, 0.4);
  animation: rg-slide-in 0.25s var(--rg-ease);
}
@keyframes rg-slide-in { from { transform: translateX(24px); opacity: 0; } }
.rg-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 14px 20px; border-bottom: 1px solid var(--rg-line); }
.rg-drawer__title { font: 700 1.25rem/1 var(--rg-font-display); text-transform: uppercase; color: var(--rg-purple); }
.rg-drawer__body { flex: 1; overflow-y: auto; padding: 8px 12px; }
.rg-drawer__body .rg-menu__item { border-bottom: 1px solid var(--rg-line); }
.rg-drawer__body .rg-menu__row { justify-content: space-between; }
.rg-drawer__body .rg-menu__link { flex: 1; padding: 14px 8px; border-radius: 0; font-size: 1rem; font-weight: 600; justify-content: space-between; }
.rg-drawer__body .rg-menu__link:hover { background: none; }
.rg-drawer__body .rg-menu__toggle { width: 44px; height: 44px; margin: 0; font-size: 1.1rem; }
.rg-drawer__body .rg-menu__panel { display: none; padding: 0 0 10px 8px; }
.rg-drawer__body .rg-menu__item.is-open > .rg-menu__panel { display: block; }
.rg-drawer__foot { display: grid; gap: 4px; padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--rg-line); }
.rg-drawer__foot .rg-btn { margin-bottom: 8px; }
.rg-drawer__link { padding: 8px 0; text-decoration: none; color: var(--rg-muted); }
.rg-drawer__link:hover { color: var(--rg-ink); }
html.rg-drawer-open { overflow: hidden; }

@media (max-width: 960px) {
  .rg-nav { display: none; }
  .rg-header__menu { display: inline-flex; }
  .rg-header__tools { margin-left: auto; }
}
@media (max-width: 640px) {
  .rg-strip__links { display: none; }
  .rg-header__cta { display: none; }
  .rg-header__search { display: none; }
  .rg-brand__logo { height: 42px; }
  .rg-brand__name { font-size: 1.125rem; }
  .rg-brand__tagline { display: none; }
  .rg-header__in { min-height: 62px; gap: 12px; }
}

/* ==========================================================================================
   4. PAGE LAYOUTS
   ========================================================================================== */

.rg-main { display: block; min-height: 40vh; }
.rg-section.rg-wrap { padding-block: clamp(24px, 4vw, 48px); }
/* A full-width (uncontained) section: bands run edge to edge, every other Ridge block keeps the page width */
.rg-section:not(.rg-wrap) > .rg-block:not(.rg-log):not(.rg-wrap) {
  max-width: var(--container-max-width); margin-inline: auto; padding-inline: var(--rg-gutter); box-sizing: border-box;
}
.rg-section:not(.rg-wrap) > .rg-thanks--card { max-width: calc(var(--container-max-width) - 2 * var(--rg-gutter)); }
.rg-layout {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 48px);
  padding-block: clamp(24px, 4vw, 48px);
}
@media (min-width: 1024px) {
  .rg-layout--side-right { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
  .rg-layout--side-left { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
  .rg-layout--side-left .rg-layout__side { order: -1; }
}
.rg-layout__main { min-width: 0; }
.rg-layout__main > .rg-block:first-child { margin-top: 0; }
.rg-layout__side { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
/* Beside a sidebar the column is already the reading width: Nova's contact form (600px, centred, for a
   full-width page) fills it, aligned with the sidebar's top, instead of floating in the middle. */
.rg-layout--side-right .rg-layout__main #questionForm,
.rg-layout--side-left .rg-layout__main #questionForm { max-width: none !important; margin: 0 !important; }

/* Bootstrap cards placed in a sidebar by a site's HTML fragments */
.rg-layout__side .card {
  border: 1px solid var(--rg-line); border-radius: 10px; overflow: hidden; background: var(--rg-surface);
  box-shadow: none; margin: 0 !important;
}
.rg-layout__side .card-header { background: var(--rg-purple) !important; color: #fff; border: 0; }
.rg-layout__side .card-header h5 { font: 700 1.25rem/1 var(--rg-font-display); text-transform: uppercase; margin: 0; }
/* Buttons in sidebar cards, whoever wrote the card (a site's HTML fragment, the fundraiser extension...):
   one style - a full-width red pill inset from the card's edges. The doubled class outranks extensions'
   own card-button rules, which load after this file (e.g. the fundraiser CTA squares its button off
   and runs it edge to edge in a narrow column). */
.rg-layout__side .card .btn.btn {
  display: flex; align-items: center; justify-content: center; gap: 0.5em;
  width: auto; margin: 6px 16px 16px; padding: var(--rg-btn-pad-y) 18px;
  border-radius: var(--rg-btn-radius); font: var(--rg-btn-font);
}
.rg-layout__side .card .btn.btn i { margin: 0 !important; }
.rg-layout__side .card .card-body + .btn.btn,
.rg-layout__side .card .card-body + * > .btn.btn { margin-top: 0; }
.rg-layout__side .start-fundraiser-cta__btn-wrap { padding: 0; }
.rg-layout__side .card .card-body { padding: 16px 18px 12px !important; margin: 0 !important; }
.rg-layout__side .card h3 { font-size: 1.375rem; text-transform: uppercase; color: var(--rg-purple); }

/* Page breadcrumb under the header */
.nova-page-crumbs.rg-wrap { padding-block: 14px 0; }

/* ==========================================================================================
   5. BLOG
   ========================================================================================== */

/* Story cards (blogLatestPosts/main) */
.rg-stories__grid {
  display: grid; gap: clamp(20px, 2.5vw, 32px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.rg-story { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--rg-ink); min-width: 0; }
.rg-story:hover { color: var(--rg-ink); }
.rg-story__media { aspect-ratio: 16 / 10; border-radius: var(--rg-radius); overflow: hidden; background: var(--rg-purple-tint); margin-bottom: 4px; }
.rg-story:hover .rg-story__media img { transform: scale(1.05); }
.rg-story__media--empty {
  background:
    linear-gradient(160deg, transparent 55%, rgba(61, 52, 105, 0.12) 55.2%, rgba(61, 52, 105, 0.12) 70%, transparent 70.2%),
    linear-gradient(200deg, transparent 50%, rgba(61, 52, 105, 0.18) 50.2%),
    var(--rg-purple-tint);
}
.rg-story__title { margin: 0; font-size: clamp(1.4rem, 2vw, 1.75rem); transition: color 0.15s; }
.rg-story:hover .rg-story__title { color: var(--rg-red-ink); }
.rg-story__desc { margin: 0; color: var(--rg-muted); font-size: 0.9375rem; }
.rg-layout__side .rg-stories__grid { grid-template-columns: minmax(0, 1fr); }

/* Log band (blogLatestPosts/incidentLog). Edge to edge when its page section is not contained; a
   rounded panel inside a contained section or a column layout. */
.rg-log { background: var(--rg-purple); color: var(--rg-on-dark); padding-block: var(--rg-band); container-type: inline-size; }
.rg-block.rg-log { margin-block: 0; }
.rg-wrap .rg-log, .rg-layout .rg-log {
  border-radius: 10px; padding: clamp(20px, 3vw, 36px); margin-block: clamp(24px, 4vw, 40px);
}
.rg-layout__main > .rg-log:first-child { margin-top: 0; }
.rg-log .rg-head__title { color: #fff; }
.rg-log .rg-more { color: #fff; }
.rg-log__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px; align-items: start; }
@container (max-width: 720px) { .rg-log__grid { grid-template-columns: minmax(0, 1fr); } }
.rg-log__lead {
  position: relative; isolation: isolate; display: flex; align-items: flex-end;
  min-height: 300px; border-radius: var(--rg-radius); overflow: hidden;
  background: var(--rg-purple-deep); color: #fff; text-decoration: none;
}
.rg-log__lead:hover { color: #fff; }
.rg-log__lead-media { position: absolute; inset: 0; z-index: -2; }
.rg-log__lead:hover .rg-log__lead-media img { transform: scale(1.04); }
.rg-log__lead.has-image::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(20, 16, 38, 0.94), rgba(20, 16, 38, 0.15) 75%);
}
.rg-log__lead-body { padding: clamp(20px, 3vw, 28px); }
.rg-log__lead-meta { display: flex; align-items: center; gap: 10px; margin: 0; }
.rg-log__lead-title { margin: 14px 0 8px; font-size: clamp(1.75rem, 3vw, 2.375rem); }
.rg-log__lead-desc {
  margin: 0; color: #DDD8EF; max-width: 52ch;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.rg-log__list { list-style: none; margin: 0; padding: 0; }
.rg-log__list li { border-top: 1px solid rgba(255, 255, 255, 0.18); }
.rg-log__list li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.rg-log__row {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: 16px; align-items: center;
  padding: 16px 4px; color: #fff; text-decoration: none;
  transition: background-color 0.15s, padding 0.15s var(--rg-ease);
}
.rg-log__row:hover { color: #fff; background: rgba(255, 255, 255, 0.06); padding-inline: 12px; }
.rg-log__row .rg-ref { color: var(--rg-on-dark-accent); }
.rg-log__what { display: flex; flex-direction: column; min-width: 0; }
.rg-log__title { font: 600 1.375rem/1.1 var(--rg-font-display); }
.rg-log__detail { font-size: 0.875rem; color: var(--rg-on-dark-soft); }
.rg-log .rg-date { color: var(--rg-on-dark-soft); white-space: nowrap; }
@container (max-width: 480px) {
  .rg-log__row { grid-template-columns: minmax(0, 1fr) auto; }
  .rg-log__row .rg-ref { grid-column: 1 / -1; }
}

/* Timeline (blogLatestPosts/timeline) */
.rg-timeline { container-type: inline-size; }
.rg-timeline__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
@container (min-width: 760px) { .rg-timeline__grid.has-image { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.rg-timeline__media { display: block; aspect-ratio: 4 / 3; border-radius: var(--rg-radius); overflow: hidden; background: var(--rg-purple-tint); }
.rg-timeline__media:hover img { transform: scale(1.04); }
.rg-timeline__list { list-style: none; margin: 0; padding: 0; position: relative; }
.rg-timeline__list::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: var(--rg-line); }
.rg-timeline__list li { position: relative; padding: 0 0 22px 32px; }
.rg-timeline__list li:last-child { padding-bottom: 0; }
.rg-timeline__list li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--rg-paper); border: 2px solid var(--rg-purple);
}
.rg-timeline__list li:first-child::before { background: var(--rg-red); border-color: var(--rg-red); }
.rg-timeline__list a { display: block; margin-top: 4px; font-weight: 600; font-size: 1.0625rem; line-height: 1.35; text-decoration: none; color: var(--rg-ink); }
.rg-timeline__list a:hover { color: var(--rg-red-ink); }
.rg-timeline__list p { margin: 4px 0 0; color: var(--rg-muted); font-size: 0.9375rem; }

/* Blog index list (blogList/main) */
.rg-postlist { display: flex; flex-direction: column; }
.rg-postlist__item {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: center;
  padding-block: 24px; border-bottom: 1px solid var(--rg-line);
}
.rg-postlist__item:first-of-type { padding-top: 0; }
@media (min-width: 640px) { .rg-postlist__item.has-image { grid-template-columns: minmax(0, 1fr) minmax(0, 260px); } }
.rg-postlist__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin: 0 0 6px; color: var(--rg-muted); font-size: 0.875rem; }
.rg-postlist__title { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.rg-postlist__title a { text-decoration: none; color: var(--rg-ink); }
.rg-postlist__title a:hover { color: var(--rg-red-ink); }
.rg-postlist__desc { margin: 8px 0 0; color: var(--rg-muted); max-width: 65ch; }
.rg-postlist__media { display: block; aspect-ratio: 16 / 10; border-radius: var(--rg-radius); overflow: hidden; background: var(--rg-purple-tint); }
.rg-postlist__media:hover img { transform: scale(1.04); }
@media (max-width: 639px) { .rg-postlist__media { order: -1; } }
.rg-postlist__pages { margin-top: 32px; }

/* Masthead (blogMasthead) */
.rg-masthead { position: relative; isolation: isolate; overflow: hidden; background: var(--rg-purple-tint); color: var(--rg-ink); }
.rg-masthead__in { padding-block: clamp(40px, 6vw, 72px); max-width: var(--container-max-width); }
.rg-masthead__in > * { max-width: 760px; }
.rg-masthead__title { margin: 0; font-size: clamp(2.25rem, 5.5vw, 4rem); text-transform: uppercase; color: var(--rg-purple); }
.rg-masthead__desc { margin: 14px 0 0; font-size: clamp(1.0625rem, 1.6vw, 1.25rem); color: var(--rg-muted); }
.rg-masthead__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 18px 0 0; color: var(--rg-muted); font-size: 0.875rem; }
.rg-masthead.has-image { background: var(--rg-purple-deep); color: #fff; }
.rg-masthead__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.rg-masthead.has-image::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(26, 22, 48, 0.92) 0%, rgba(38, 32, 70, 0.75) 40%, rgba(38, 32, 70, 0.2) 80%),
    linear-gradient(0deg, rgba(26, 22, 48, 0.5), transparent 50%);
}
.rg-masthead.has-image .rg-masthead__in { padding-block: clamp(72px, 10vw, 140px) clamp(40px, 6vw, 64px); }
.rg-masthead.has-image .rg-masthead__title { color: #fff; }
.rg-masthead.has-image .rg-masthead__desc { color: #E4E0F2; }
.rg-masthead.has-image .rg-masthead__meta, .rg-masthead.has-image .rg-date { color: var(--rg-on-dark-soft); }

/* Related posts under an article */
.rg-related { margin-top: clamp(40px, 6vw, 64px); padding-top: 28px; border-top: 1px solid var(--rg-line); }
.rg-related__title { margin: 0 0 20px; font-size: 1.75rem; text-transform: uppercase; color: var(--rg-purple); }
.rg-related__grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.rg-story--small .rg-story__title { font-size: 1.25rem; }
/* Related posts in a sidebar: compact rows, a small picture beside the date and title */
.rg-layout__side .rg-related { margin: 0; padding: 0; border: 0; }
.rg-layout__side .rg-related__title { font-size: 1.5rem; margin: 0 0 16px; }
.rg-layout__side .rg-related__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.rg-layout__side .rg-story--small {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 14px; row-gap: 4px;
  padding-bottom: 14px; border-bottom: 1px solid var(--rg-line);
}
.rg-layout__side .rg-story--small .rg-story__media { grid-row: 1 / 3; aspect-ratio: 4 / 3; margin: 0; }
.rg-layout__side .rg-story--small .rg-story__title { font-size: 1.0625rem; line-height: 1.2; }
/* Related posts sit inside the article body: keep its heading margins and colours off the cards */
.rg-article .rg-related .rg-related__title { margin: 0 0 20px; }
.rg-article .rg-related .rg-story__title { margin: 0; color: var(--rg-ink); }
.rg-article .rg-related .rg-story:hover .rg-story__title { color: var(--rg-red-ink); }

/* On a post, the masthead text shares the article's reading column, so title and body start on one line */
.rg-page--post:not(.rg-page--post-side) .rg-masthead__in { max-width: calc(var(--rg-read) + 2 * var(--rg-gutter)); }
.rg-page--post:not(.rg-page--post-side) .rg-masthead__in > * { max-width: none; }

/* A post with a sidebar: article 2/3, sidebar 1/3 from 1024px. The article fills its column (no reading-
   column cap), and the sidebar's last block (typically the call to action) stays in view while the
   article scrolls. */
@media (min-width: 1024px) {
  .rg-layout--post { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .rg-post-side > :last-child { position: sticky; top: 96px; }
}
.rg-layout--post .rg-article { max-width: none; margin: 0; padding-block: 0; }
.rg-post-side { align-self: stretch; }

/* Article body (blog post mainSection: tenant HTML) */
.rg-article { max-width: var(--rg-read); margin-inline: auto; padding-block: clamp(28px, 5vw, 56px); font-size: 1.0625rem; line-height: 1.7; }
/* The blog extension's blog.css pads .articleBody, enlarges its text and colours <strong> blue; inside
   Ridge's reading column the column itself does that job, so undo it (two classes beat its one). */
.rg-article.articleBody { padding-inline: 0; font-size: 1.125rem; line-height: 1.75; }
.rg-article.articleBody strong { color: var(--rg-purple); }
.rg-article :where(h2, h3) { margin: 1.6em 0 0.5em; color: var(--rg-purple); }
.rg-article h2 { font-size: 2rem; }
.rg-article h3 { font-size: 1.5rem; }
.rg-article img { max-width: 100%; height: auto; border-radius: var(--rg-radius); }
.rg-article blockquote { margin: 1.5em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--rg-red); color: var(--rg-muted); font-style: italic; }

/* ==========================================================================================
   6. DONATIONS (donationDisplay)
   ========================================================================================== */

/* Notes size to their own text (a donation without a message is a short note), so the wall is set
   in columns rather than rows of equal height; newest first down each column. */
.rg-thanks__list { columns: 4 240px; column-gap: 16px; }
.rg-thanks__list > .rg-note { break-inside: avoid; margin-bottom: 16px; }
.rg-layout__side .rg-thanks__list { columns: 1; }
.rg-note {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--rg-surface); border: 1px solid var(--rg-line); border-radius: var(--rg-radius);
  padding: 18px 20px; box-sizing: border-box;
}
.rg-note__msg { font-size: 0.9375rem; line-height: 1.55; quotes: "\201C" "\201D"; }
.rg-note__foot {
  margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 10px;
  padding-top: 12px; border-top: 1px dashed var(--rg-line); font-size: 0.8125rem;
}
.rg-note__msg + .rg-note__foot { margin-top: auto; }
.rg-note:not(:has(.rg-note__msg)) .rg-note__foot { border-top: 0; padding-top: 0; }
.rg-note__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rg-note__who b { font-weight: 600; color: var(--rg-ink); font-size: 0.875rem; }
.rg-note__who .rg-date { font-size: 0.75rem; white-space: nowrap; }
.rg-layout__side .rg-note__foot { flex-wrap: wrap; }
.rg-layout__side .rg-note__amount { margin-left: auto; }
.rg-note__amount { font: 700 1.25rem/1 var(--rg-font-display); color: var(--rg-purple); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rg-note__amount small { display: block; margin-top: 4px; font: 500 0.75rem/1 var(--rg-font-body); color: var(--rg-muted); }
.rg-note__amount--private { font: 600 0.75rem/1 var(--rg-font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--rg-muted); }
.rg-note__for { margin: 0; font-size: 0.8125rem; color: var(--rg-muted); }
.rg-thanks__empty { color: var(--rg-muted); }
/* Scrolling mode: one column, Nova's ticker positions the notes */
/* Scrolling mode: one column; ridge.js rotates the notes, fading the newcomer in */
.rg-thanks[data-ticker] .rg-thanks__list { columns: auto; }
.rg-note.is-entering { animation: rg-note-in 0.5s var(--rg-ease); }
@keyframes rg-note-in { from { opacity: 0; transform: translateY(8px); } }
.rg-thanks--card { background: var(--rg-surface); border: 1px solid var(--rg-line); border-radius: 10px; padding: 20px; }
.rg-thanks--card .rg-note { background: var(--rg-paper); }

/* ==========================================================================================
   7. CONTENT BLOCKS: the hero extension, and the call to action extension's band, strip, panel and
      stat (extensions/callToAction/main renders this markup; see docs/features/ridge-theme.md)
   ========================================================================================== */

/* Hero extension (extensions/hero, Nova's presets) in Ridge's look. The gradient preset suits Ridge best:
   the photo under a purple wash, a red accent bar, the eyebrow with a pulsing red dot, condensed capitals
   and the stats strip. Slot text is drawn by JSON components whose style tokens are inline, so the type
   rules here use !important to win. */
body .nova-hero { background-color: var(--rg-purple-deep); }
body .nova-hero--gradient .nova-hero__overlay--gradient {
  background:
    linear-gradient(90deg, rgba(26, 22, 48, 0.94) 0%, rgba(38, 32, 70, 0.8) 38%, rgba(38, 32, 70, 0.15) 78%),
    linear-gradient(0deg, rgba(26, 22, 48, 0.6), transparent 40%) !important;
}
body .nova-hero__accent { background: var(--rg-red) !important; }
body .nova-hero__fade { display: none; }
body .nova-hero__title .json-heading {
  font-family: var(--rg-font-display) !important; text-transform: uppercase; line-height: 0.98 !important;
  font-size: clamp(2.9rem, 7.2vw, 5.75rem) !important;
}
body .nova-hero__eyebrow .json-text {
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
  font: 600 0.75rem/1 var(--rg-font-body) !important; letter-spacing: var(--rg-ls-caps) !important;
  text-transform: uppercase; color: var(--rg-on-dark-accent) !important;
}
body .nova-hero__eyebrow .json-text::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--rg-red);
  box-shadow: 0 0 0 0 rgba(239, 62, 51, 0.7);
}
@media (prefers-reduced-motion: no-preference) { body .nova-hero__eyebrow .json-text::before { animation: rg-pulse 2s infinite; } }
@keyframes rg-pulse { 70% { box-shadow: 0 0 0 10px rgba(239, 62, 51, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 62, 51, 0); } }
/* Buttons: red for the call to action (Nova paints a primary button on a dark hero in the light accent),
   the second as Ridge's ghost button */
/* Nova rounds the hero's buttons into pills (.nova-hero__cta .json-button); Ridge's buttons have one shape */
body .nova-hero__cta .json-button { border-radius: var(--rg-btn-radius); }
body .nova-hero .nova-btn-primary {
  background: var(--rg-red-ui); border-color: var(--rg-red-ui); color: #fff;
  box-shadow: 0 6px 18px -8px rgba(217, 50, 38, 0.8);
}
body .nova-hero .nova-btn-primary:hover { background: var(--rg-red-ink); border-color: var(--rg-red-ink); color: #fff; }
body .nova-hero .nova-btn-secondary { background: transparent; border-color: rgba(255, 255, 255, 0.75); color: #fff; }
body .nova-hero .nova-btn-secondary:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
/* Stats: a row of columns, each a heading (the figure) over a text (its label) */
body .nova-hero__stats { max-width: 760px; border-top-color: rgba(255, 255, 255, 0.22) !important; padding-top: 0 !important; }
body .nova-hero__stats .json-row { gap: 0 !important; flex-wrap: nowrap; }
body .nova-hero__stats .json-column { flex: 1 1 0; min-width: 0; padding: 18px 18px 0 0; }
body .nova-hero__stats .json-column + .json-column { padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, 0.22); }
body .nova-hero__stats .json-heading {
  margin: 0 !important; font: 700 clamp(1.9rem, 3.6vw, 2.75rem)/1 var(--rg-font-display) !important;
  font-variant-numeric: tabular-nums; color: #fff !important;
}
body .nova-hero__stats .json-text { margin: 4px 0 0 !important; font-size: 0.8125rem !important; color: var(--rg-on-dark-soft) !important; }
@media (max-width: 520px) {
  body .nova-hero__stats .json-column { padding-right: 10px; }
  body .nova-hero__stats .json-column + .json-column { padding-left: 10px; }
}

/* Appeal band: <section class="rg-appeal"><div class="rg-wrap rg-appeal__in"><div>
   <p class="rg-eyebrow">…</p><h2>…</h2><p>…</p></div><div class="rg-appeal__aside">…</div></div></section> */
.rg-appeal { position: relative; isolation: isolate; overflow: hidden; background: var(--rg-red-ui); color: #fff; padding-block: var(--rg-band); }
.rg-appeal::after {
  content: ""; position: absolute; right: -4%; bottom: -1px; width: min(640px, 70%); aspect-ratio: 2 / 1; z-index: -1;
  background: rgba(255, 255, 255, 0.07);
  clip-path: polygon(0 100%, 30% 35%, 44% 58%, 64% 12%, 100% 100%);
}
.rg-appeal__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
@media (min-width: 900px) { .rg-appeal__in:has(> .rg-appeal__aside) { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); } }
.rg-appeal .rg-eyebrow { color: #FFE1DE; }
.rg-appeal h2 { margin: 12px 0 16px; font-size: clamp(2.4rem, 5vw, 4.25rem); text-transform: uppercase; color: #fff; }
.rg-appeal p { font-size: 1.125rem; color: #FFE9E7; max-width: 48ch; margin: 0 0 12px; }
.rg-appeal__aside { background: var(--rg-surface); color: var(--rg-ink); border-radius: 10px; padding: 26px; box-shadow: 0 30px 60px -30px rgba(40, 10, 10, 0.5); }
.rg-appeal__aside p { color: var(--rg-muted); font-size: 1rem; }

/* Call-to-action strip: <div class="rg-cta"><div><h3>…</h3><p>…</p></div><div class="rg-cta__actions">…</div></div> */
.rg-cta {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: center;
  padding: clamp(22px, 3vw, 32px) clamp(20px, 4vw, 40px); margin-block: clamp(24px, 4vw, 40px);
  background: var(--rg-surface); border: 1px solid var(--rg-line); border-radius: 10px;
}
/* Buttons beside the text only when the strip itself has room: in a blog post's column it is narrower
   than the page, and side by side squeezed the text into a thin column */
.rg-wrap:has(> .rg-cta) { container-type: inline-size; }
@container (min-width: 880px) { .rg-cta { grid-template-columns: minmax(0, 1fr) auto; } }
.rg-cta h3 { margin: 0; font-size: clamp(1.5rem, 3vw, 2.125rem); text-transform: uppercase; color: var(--rg-purple); }
.rg-cta p { margin: 6px 0 0; color: var(--rg-muted); }
.rg-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.rg-layout__side .rg-cta { grid-template-columns: minmax(0, 1fr); margin: 0; }

/* Sidebar panel, e.g. a call to action beside a blog post:
   <div class="rg-panel"><p class="rg-panel__eyebrow">…</p><h3>…</h3><p>…</p><a class="rg-btn rg-btn--cta rg-btn--block" …>…</a></div> */
.rg-panel { background: var(--rg-purple); color: #fff; border-radius: 10px; padding: 24px; }
.rg-panel__eyebrow { margin: 0; font: 600 0.75rem/1 var(--rg-font-body); letter-spacing: var(--rg-ls-caps); text-transform: uppercase; color: var(--rg-on-dark-accent); }
.rg-panel h3 { margin: 10px 0 8px; font-size: 1.75rem; text-transform: uppercase; color: #fff; }
.rg-panel p { color: var(--rg-on-dark-soft); margin: 0 0 16px; }
.rg-panel .rg-btn + .rg-btn { margin-top: 10px; }

/* Stat card for a sidebar: <div class="rg-stat"><p class="rg-stat__label">…</p><p class="rg-stat__value">83</p><a …>…</a></div> */
.rg-stat { background: var(--rg-purple); color: #fff; border-radius: 10px; padding: 22px; text-align: center; }
.rg-stat__label { margin: 0; font: 600 0.75rem/1 var(--rg-font-body); letter-spacing: var(--rg-ls-caps); text-transform: uppercase; color: var(--rg-on-dark-accent); }
.rg-stat__value { margin: 10px 0 14px; font: 700 4rem/1 var(--rg-font-display); font-variant-numeric: tabular-nums; }
.rg-stat a:not(.rg-btn) { color: #fff; }

/* ==========================================================================================
   8. FOOTER
   ========================================================================================== */

.rg-footer { background: var(--rg-purple-deep); color: var(--rg-on-dark-soft); font-size: 0.875rem; margin-top: clamp(40px, 6vw, 72px); }
.rg-main:has(> :last-child.rg-appeal) + .rg-footer,
.rg-main:has(> :last-child.rg-log) + .rg-footer { margin-top: 0; }
.rg-footer a { color: var(--rg-on-dark-soft); text-decoration: none; }
.rg-footer a:hover { color: #fff; }
.rg-footer__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 56px 40px; }
@media (min-width: 900px) { .rg-footer__main { grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); } }
.rg-footer__brand { display: flex; gap: 14px; align-items: flex-start; }
.rg-footer__logo { width: 56px; height: auto; }
.rg-footer__name { margin: 0 0 6px; font: 700 1.375rem/1.05 var(--rg-font-display); text-transform: uppercase; color: #fff; }
.rg-footer__tagline { margin: 0; }
.rg-footer__content { min-width: 0; }
.rg-footer__content :where(h4, h5, h6) {
  font: 600 0.75rem/1 var(--rg-font-body); letter-spacing: var(--rg-ls-caps); text-transform: uppercase; color: #fff; margin: 0 0 14px;
}
.rg-footer__content ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
/* Link columns in the footer slot: the menu extension's footerColumns layout (an admin-built menu) */
.rg-footer .nova-footer-cols { gap: 28px; }
.rg-footer .nova-footer-cols__heading {
  font: 600 0.75rem/1 var(--rg-font-body); letter-spacing: var(--rg-ls-caps); text-transform: uppercase; color: #fff; margin: 0 0 14px;
}
.rg-footer .nova-footer-cols__links { gap: 8px; }
.rg-footer__base { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.rg-footer__legal { padding-block: 20px calc(24px + env(safe-area-inset-bottom, 0px)); font-size: 0.78rem; line-height: 1.6; }
.rg-footer__legal p { margin: 0 0 4px; max-width: 90ch; }
.rg-footer__legal a { text-decoration: underline; text-underline-offset: 0.18em; }

/* Featured products (extensions/featuredProduct/main): Nova's product cards in an even grid */
.rg-featured__desc { margin: 6px 0 0; color: var(--rg-muted); }
.rg-featured__grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.rg-featured .nova-product-card { text-decoration: none; color: inherit; }

/* ==========================================================================================
   9. NOVA COMPATIBILITY
   Pages Ridge does not replace (shop, product, basket, checkout, account, search) keep Nova's templates
   and pick up the tokens above. A few Nova components get Ridge's display type.
   ========================================================================================== */

.nova-container { max-width: var(--container-max-width); }
.nova-page-main h1, .nova-collection-header h1, .nova-product-title { font-family: var(--rg-font-display); text-transform: uppercase; color: var(--rg-purple); }
/* Bootstrap's primary button, used in tenant content and Nova pages: Ridge's call-to-action red */
.btn-primary {
  --bs-btn-bg: var(--rg-red-ui); --bs-btn-border-color: var(--rg-red-ui);
  --bs-btn-hover-bg: var(--rg-red-ink); --bs-btn-hover-border-color: var(--rg-red-ink);
  --bs-btn-active-bg: var(--rg-red-ink); --bs-btn-active-border-color: var(--rg-red-ink);
  --bs-btn-disabled-bg: var(--rg-red-ui); --bs-btn-disabled-border-color: var(--rg-red-ui);
}
/* Bootstrap buttons take the site's button shape, size and weight (small and large keep their own padding) */
.btn {
  --bs-btn-border-radius: var(--rg-btn-radius);
  --bs-btn-font-weight: 600;
  --bs-btn-font-family: var(--rg-font-body);
}
.btn:not(.btn-sm):not(.btn-lg):not(.btn-link) {
  --bs-btn-padding-y: var(--rg-btn-pad-y);
  --bs-btn-padding-x: var(--rg-btn-pad-x);
  --bs-btn-font-size: 1rem;
  --bs-btn-line-height: 1.2;
}
.btn-sm, .btn-lg { --bs-btn-border-radius: var(--rg-btn-radius); }
/* Nova buttons: same shape and type. Nova's listing cards paint donate/support buttons with the
   success green inline; in Ridge giving is the call to action, so inside a button that colour is red. */
.nova-btn { border-radius: var(--rg-btn-radius); font: var(--rg-btn-font); --color-success: var(--rg-red-ui); }
/* "Danger" buttons. Nova and the classic templates draw Sign out (account, registration) as a solid
   error-red button, which in Ridge is indistinguishable from Donate. Leaving isn't the page's main
   action and isn't harmful, so it is a quiet outline button; red stays for the one call to action.
   "body" outranks the templates' own <style> blocks, which load after this file. */
body .nova-btn-error, body .btn-danger, body .btn-outline-danger {
  background: var(--rg-surface); color: var(--rg-ink); border: 1px solid var(--rg-line);
  --bs-btn-bg: var(--rg-surface); --bs-btn-color: var(--rg-ink); --bs-btn-border-color: var(--rg-line);
  --bs-btn-hover-bg: var(--rg-purple-tint); --bs-btn-hover-color: var(--rg-ink); --bs-btn-hover-border-color: var(--rg-ink);
}
body .nova-btn-error:hover { background: var(--rg-purple-tint); color: var(--rg-ink); border-color: var(--rg-ink); box-shadow: none; }

/* Checkout: continuing in the main column is the one call to action, so the sign-in panel in the sidebar
   (for returning customers) uses the outline button rather than a second red one. */
.rg-page--checkout .rg-layout__side .nova-btn-primary {
  background: var(--rg-surface); color: var(--rg-ink); border: 1px solid var(--rg-ink); box-shadow: none;
}
.rg-page--checkout .rg-layout__side .nova-btn-primary:hover { background: var(--rg-purple-tint); color: var(--rg-ink); }

/* Order confirmation: Nova paints the "Thanks for your order" banner in the action colour. In Ridge that
   is the red, which reads as an error, so the thank-you is in the organisation's purple. Card brand
   marks in the payment summary are ink, not the action red. */
body .nc-banner { background: var(--rg-purple); color: #fff; border: 0; }
body .nc-card i[class*="fa-cc-"] { color: var(--rg-ink); }
/* Its order number and date in the mono caps of Ridge's post references, and the tracking panel tinted
   rather than another white card. */
body .nc-banner-meta {
  font-family: var(--rg-font-mono); font-size: 0.8125rem; letter-spacing: var(--rg-ls-caps);
  text-transform: uppercase; color: var(--rg-on-dark-accent); opacity: 1;
}
body .nc-tracking { background: var(--rg-purple-tint); border: 0; box-shadow: none; }
body .nc-tracking-heading { font-family: var(--rg-font-mono); letter-spacing: var(--rg-ls-caps); color: var(--rg-purple); }
body .nc-tracking-link { color: var(--rg-red-ink); }

/* The basket's quantity stepper takes the button shape too (Nova draws it as a pill in its own <style>) */
body .nb-qty-pill { border-radius: var(--rg-btn-radius); }

/* Gift Aid in the basket: Nova colours the amount, label and "Add Gift Aid now" with the success green.
   In Ridge Gift Aid is the organisation's (purple), so the red Checkout stays the page's one call to
   action; the button takes the site's button shape (its look is inline in Nova's template, hence
   !important). */
.nb-item-extra { --color-success: var(--rg-purple); }
.nb-item-extra a[href^="/product/"][style*="--color-success"] {
  border-radius: var(--rg-btn-radius) !important; padding: 9px 16px !important;
  font: 600 0.875rem/1.2 var(--rg-font-body) !important; gap: 8px !important;
}
.nova-breadcrumb { font-size: 0.8125rem; }
.nova-blog-card h3 { font-family: var(--rg-font-display); font-size: 1.5rem; }
.chart-stats-container, .chartStats { font-family: var(--rg-font-body); }