/*
Theme Name: Adventure ReefInsider
Theme URI: https://reefinsider.com/
Template: adventure
Author: ReefInsider
Description: Editorial-boutique child theme of Adventure for ReefInsider — a Canadian direct-to-consumer coral and aquarium decor shop. Strips tourism-template defaults (Microsoft-blue chrome, red-orange CTAs, rotating slider, generic Poppins/Oswald/Literata fonts) in favor of a calm, photo-led, reef-native identity. Cool deep-water neutrals + warm tinted off-white canvas + one coral accent sampled from product photography. Marcellus SC (display) and Source Sans 3 (body).
Version: 1.0.0
License: GNU General Public License version 3
License URI: license.txt
Text Domain: adventure-reefinsider
*/

/* =============================================================
   1. DESIGN TOKENS
   Palette in OKLCH so steps in lightness *look* equal.
   Neutrals tinted toward the brand hue (235°, deep ocean).
   ============================================================= */
:root {
  /* Brand hue */
  --brand-hue: 235;
  --accent-hue: 30; /* coral, sampled from product photography */

  /* Surfaces (neutrals, tinted toward brand hue) */
  --canvas:        oklch(98.5% 0.005 var(--brand-hue));   /* page background */
  --surface:       oklch(96% 0.008 var(--brand-hue));     /* cards, raised areas */
  --surface-sunk:  oklch(94% 0.010 var(--brand-hue));     /* inset wells */
  --chrome:        oklch(22% 0.030 var(--brand-hue));     /* header, footer, deep chrome */
  --chrome-soft:   oklch(28% 0.025 var(--brand-hue));     /* secondary chrome surfaces */

  /* Type colors */
  --ink:           oklch(20% 0.020 var(--brand-hue));     /* body on canvas */
  --ink-muted:     oklch(45% 0.015 var(--brand-hue));     /* secondary on canvas */
  --ink-faint:     oklch(62% 0.010 var(--brand-hue));     /* metadata on canvas */
  --ink-inverse:   oklch(96% 0.012 var(--brand-hue));     /* type on dark chrome */
  --ink-inverse-muted: oklch(78% 0.015 var(--brand-hue));

  /* Borders */
  --line:          oklch(90% 0.012 var(--brand-hue));
  --line-strong:   oklch(82% 0.015 var(--brand-hue));

  /* Coral accent — used rarely, earns its weight by scarcity */
  --accent:        oklch(66% 0.180 var(--accent-hue));
  --accent-strong: oklch(56% 0.200 var(--accent-hue));
  --accent-soft:   oklch(94% 0.040 var(--accent-hue));
  --accent-ink:    oklch(22% 0.080 var(--accent-hue));

  /* Reef-shallows secondary (rare, used for status & links) */
  --teal:          oklch(58% 0.090 200);
  --teal-strong:   oklch(48% 0.100 200);

  /* Fluid type scale (1.250 ratio, clamp to viewport) */
  --step--1: clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem);
  --step-0:  clamp(1rem, 0.96rem + 0.22vw, 1.10rem);
  --step-1:  clamp(1.25rem, 1.18rem + 0.36vw, 1.45rem);
  --step-2:  clamp(1.5625rem, 1.45rem + 0.56vw, 1.85rem);
  --step-3:  clamp(1.953rem, 1.78rem + 0.86vw, 2.40rem);
  --step-4:  clamp(2.441rem, 2.18rem + 1.30vw, 3.10rem);
  --step-5:  clamp(3.052rem, 2.66rem + 1.96vw, 4.10rem);

  /* Spacing — 4pt scale, semantic names */
  --space-3xs: 0.25rem;  /* 4 */
  --space-2xs: 0.5rem;   /* 8 */
  --space-xs:  0.75rem;  /* 12 */
  --space-sm:  1rem;     /* 16 */
  --space-md:  1.5rem;   /* 24 */
  --space-lg:  2rem;     /* 32 */
  --space-xl:  3rem;     /* 48 */
  --space-2xl: 4rem;     /* 64 */
  --space-3xl: 6rem;     /* 96 */
  --space-4xl: 9rem;     /* 144 */

  /* Type families */
  --font-display: "Marcellus SC", "Marcellus", "Cormorant Garamond", Georgia, serif;
  --font-display-italic: "Marcellus", Georgia, serif;
  --font-body:    "Source Sans 3", "Source Sans Pro", system-ui, sans-serif;

  /* Container */
  --container-max: 1240px;
  --container-padding: clamp(1rem, 4vw, 2rem);

  /* Shape */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 200ms;
  --duration-slow: 480ms;
}

/* =============================================================
   2. BASE — TYPOGRAPHY OVERRIDES
   Wipe parent's Poppins / Oswald / Literata / Assistant.
   ============================================================= */
html { -webkit-text-size-adjust: 100%; }

body,
body button,
body input,
body select,
body textarea,
body .post_block_style1 p,
body .post_block_style2 p,
body .post_block_style2 h4,
body .post_block_style2_meta,
body .wpcf7-text,
body .wpcf7-select,
body .wpcf7-date,
body .wpcf7-textarea,
body .wpcf7-submit,
body .header-extras .skt-header-button,
body .skt-home-posts-row .skt-home-posts-title,
body .footer-blog-posts ul li,
body .newsletter-form input,
body form.newsletter-form input[type="submit"],
body #testimonials h3,
body #testimonials .tm_description p,
body #testimonials .tm_info p,
body #testimonials .tm_info span,
body #ourservice .ser_title,
body .testimonilacontent {
  font-family: var(--font-body);
  font-feature-settings: "ss01", "kern", "liga";
  letter-spacing: 0;
}

body {
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--canvas);
  font-weight: 400;
}

p {
  max-width: 70ch;
  margin: 0 0 var(--space-sm);
  color: var(--ink);
}

h1, h2, h3, h4, h5, h6,
body h1 a, body h2 a, body h3 a,
body .post_block_style1 h3 a,
body .post_block_style2 h4,
body .logo h1, body .logo h2,
body .blog-date span,
body #ourservice .ser_title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ink);
  line-height: 1.15;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); margin-bottom: var(--space-md); }
h3 { font-size: var(--step-3); }
h4 { font-size: var(--step-2); }
h5 { font-size: var(--step-1); }
h6 { font-size: var(--step-0); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-muted); }

/* Display headings inside the editorial hero use Marcellus (not SC) for the larger statement */
.ri-hero h1,
.ri-hero .ri-hero-eyebrow {
  font-family: var(--font-display-italic);
}

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
  color: var(--accent-strong);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* =============================================================
   3. HEADER CHROME
   Replace #5B9BD5 (Microsoft-blue) with deep-water chrome.
   ============================================================= */
.header,
.logo,
body .header.type1,
body .header.type2,
body .header.type3,
body .header.type4 {
  background-color: var(--chrome) !important;
}

.head-info-area {
  background-color: var(--chrome-soft);
  color: var(--ink-inverse-muted);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
}

.head-info-area a { color: var(--ink-inverse); }
.head-info-area a:hover { color: var(--accent); }

.logo h1 a, .logo h2 a {
  color: var(--ink-inverse);
  font-family: var(--font-display-italic);
  letter-spacing: 0.04em;
}

/* Nav */
#topmenu ul li a {
  color: var(--ink-inverse) !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 0.10em !important;
  font-size: var(--step--1) !important;
  text-decoration: none;
  height: 64px !important;
  padding: 0 var(--space-md) !important;
}

#topmenu ul li a::after {
  background-color: var(--accent) !important;
  height: 2px !important;
}

#topmenu ul li a:hover {
  color: var(--accent) !important;
}

/* Header CTA button — drop pill, drop the alarm-red */
#topmenu ul li.get-button a {
  background-color: var(--accent) !important;
  color: var(--ink-inverse) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-2xs) var(--space-md) !important;
  margin-top: 12px !important;
  font-family: var(--font-body) !important;
  font-size: var(--step--1) !important;
  letter-spacing: 0.10em !important;
  box-shadow: none !important;
  height: auto !important;
  text-transform: uppercase;
}

#topmenu ul li.get-button a:hover {
  background-color: var(--accent-strong) !important;
  transform: none !important;
  box-shadow: 0 4px 16px oklch(56% 0.20 var(--accent-hue) / 0.20) !important;
}

/* Sub-nav */
#topmenu ul li ul {
  background: var(--canvas) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 12px 32px oklch(20% 0.02 var(--brand-hue) / 0.12) !important;
  padding: var(--space-2xs) 0;
}

#topmenu ul li ul li a {
  color: var(--ink) !important;
  height: auto !important;
  padding: var(--space-2xs) var(--space-md) !important;
  font-size: var(--step--1) !important;
  letter-spacing: 0.06em !important;
}

#topmenu ul li ul li a:hover {
  color: var(--accent-strong) !important;
  background: var(--surface);
}

/* =============================================================
   4. EDITORIAL HERO
   Replaces the rotating Nivo slider on the homepage.
   ============================================================= */
.ri-hero {
  position: relative;
  width: 100%;
  min-height: clamp(440px, 70vh, 760px);
  background-color: var(--chrome);
  background-image: var(--ri-hero-image, none);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  color: var(--ink-inverse);
  display: grid;
  align-items: end;
}

/* Tinted scrim — guarantees caption contrast even before image loads */
.ri-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    oklch(15% 0.04 var(--brand-hue) / 0.85) 0%,
    oklch(15% 0.04 var(--brand-hue) / 0.55) 35%,
    oklch(15% 0.04 var(--brand-hue) / 0.10) 70%,
    oklch(15% 0.04 var(--brand-hue) / 0.00) 100%
  );
  pointer-events: none;
}

.ri-hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-3xl) var(--container-padding) var(--space-2xl);
  display: grid;
  gap: var(--space-md);
  max-width: min(var(--container-max), 760px);
  width: 100%;
}

.ri-hero-eyebrow {
  font-family: var(--font-display);
  font-size: var(--step-0);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-inverse-muted);
  margin: 0;
}

.ri-hero h1 {
  color: var(--ink-inverse);
  font-size: var(--step-5);
  line-height: 1.05;
  letter-spacing: 0.005em;
  margin: 0;
  max-width: 22ch;
}

.ri-hero p {
  color: var(--ink-inverse-muted);
  font-size: var(--step-1);
  line-height: 1.5;
  max-width: 50ch;
  margin: 0;
}

.ri-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-md);
  background: var(--accent);
  color: var(--ink-inverse);
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: var(--radius-md);
  align-self: start;
  margin-top: var(--space-xs);
  transition: background var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.ri-hero-cta:hover {
  background: var(--accent-strong);
  color: var(--ink-inverse);
  transform: translateY(-1px);
}

.ri-hero-cta::after {
  content: "→";
  font-size: 1.1em;
  letter-spacing: 0;
}

/* Trust strip below the hero — replaces the rotating banner messages
   with three persistent, scannable trust signals. */
.ri-trust-strip {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--space-lg) 0;
}

.ri-trust-strip-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-lg);
}

.ri-trust-item {
  display: grid;
  gap: var(--space-3xs);
}

.ri-trust-item dt {
  font-family: var(--font-display);
  font-size: var(--step-0);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}

.ri-trust-item dd {
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--ink-muted);
  margin: 0;
  max-width: 38ch;
}

/* Hide the parent theme's slider wrapper just in case it renders */
.slider-header-layout1,
.slider-header-layout2,
.slider-header-layout3,
.slider-header-layout4 {
  display: none !important;
}

/* =============================================================
   5. SLIDER FALLBACK SAFETY (defensive)
   If anything still renders a Nivo caption, ensure it never goes
   white-on-white during image load — addresses the detector's
   8x low-contrast hits.
   ============================================================= */
.nivo-html-caption,
.nivo-caption-content,
.nivo-caption {
  background: oklch(15% 0.04 var(--brand-hue) / 0.65) !important;
  color: var(--ink-inverse) !important;
}

.nivo-caption-content .title,
.nivo-html-caption .title {
  color: var(--ink-inverse) !important;
  font-family: var(--font-display) !important;
  text-shadow: none;
}

/* =============================================================
   6. BUTTONS — DROP THE PILL EVERYWHERE
   Tone down border-radius: 50px to a calmer 8-12px.
   Replace #e64d43 throughout.
   ============================================================= */
/* Scoped to *intentional* CTA classes only. The previous version
   used `body button` as a catch-all which hit cart quantity
   steppers, MailPoet inputs, and every other button in third-party
   widgets. CTAs opt in via .button or a known WC button class. */
body .button:not(.plus):not(.minus):not(.wc-block-components-quantity-selector__button),
body .wpcf7-submit,
body form.newsletter-form input[type="submit"],
body .woocommerce a.button:not(.remove):not(.plus):not(.minus),
body .woocommerce button.button:not(.plus):not(.minus),
body .woocommerce input.button:not(.plus):not(.minus),
body .woocommerce #respond input#submit,
body .woocommerce-page a.button:not(.remove):not(.plus):not(.minus),
body .woocommerce-page button.button:not(.plus):not(.minus),
body .woocommerce a.button.alt,
body .woocommerce button.button.alt,
body .woocommerce input.button.alt,
body .wp-block-button__link,
body .lay1.optimposts .type-product a.button.add_to_cart_button {
  background: var(--accent) !important;
  background-color: var(--accent) !important;
  background-image: none !important;
  color: var(--ink-inverse) !important;
  border: 1px solid var(--accent) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-xs) var(--space-md) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: var(--step--1) !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  box-shadow: none !important;
  transition: background var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out) !important;
}

body .button:not(.plus):not(.minus):hover,
body .woocommerce a.button:not(.remove):not(.plus):not(.minus):hover,
body .woocommerce button.button:not(.plus):not(.minus):hover,
body .woocommerce a.button.alt:hover,
body .woocommerce button.button.alt:hover,
body .wp-block-button__link:hover {
  background: var(--accent-strong) !important;
  border-color: var(--accent-strong) !important;
  transform: translateY(-1px);
}

/* Newsletter input */
.newsletter-form input[type="email"] {
  background: var(--canvas) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-body) !important;
  font-size: var(--step-0) !important;
  padding: var(--space-xs) var(--space-md) !important;
  color: var(--ink) !important;
}

form.newsletter-form input[type="submit"] {
  border-radius: var(--radius-md) !important;
  background: var(--accent) !important;
}

/* Form fields */
.wpcf7-text,
.wpcf7-select,
.wpcf7-date,
.wpcf7-textarea,
body input[type="text"],
body input[type="email"],
body input[type="tel"],
body input[type="url"],
body textarea,
body select {
  background: var(--canvas);
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--radius-sm) !important;
  padding: var(--space-xs) var(--space-sm) !important;
  font-family: var(--font-body) !important;
  font-size: var(--step-0) !important;
  color: var(--ink);
  transition: border-color var(--duration-fast) var(--ease-out);
}

body input[type="text"]:focus,
body input[type="email"]:focus,
body textarea:focus,
body select:focus,
.wpcf7-text:focus {
  border-color: var(--accent) !important;
  outline: 2px solid oklch(66% 0.18 var(--accent-hue) / 0.20);
  outline-offset: 1px;
}

/* =============================================================
   7. WOOCOMMERCE — PRODUCT CARDS
   Editorial restraint: photo-led, calm card chrome.
   ============================================================= */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-sm) !important;
  transition: border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.woocommerce ul.products li.product:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display) !important;
  font-size: var(--step-0) !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  color: var(--ink) !important;
  padding-top: var(--space-2xs) !important;
}

.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product span.price,
.woocommerce ul.products li.product span.price ins {
  color: var(--ink) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: var(--step--1) !important;
  text-decoration: none !important;
}

.woocommerce-loop-product__cat {
  font-family: var(--font-body) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ink-faint) !important;
  display: block;
  margin-bottom: var(--space-3xs);
}

.woocommerce-products-header__title.page-title,
.woocommerce h1.page-title {
  font-family: var(--font-display) !important;
  font-size: var(--step-4) !important;
  letter-spacing: 0.04em !important;
  color: var(--ink) !important;
  margin-bottom: var(--space-md) !important;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-body) !important;
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--accent) !important;
  color: var(--ink-inverse) !important;
  border-color: var(--accent) !important;
}

/* Star rating — drop yellow, use accent */
.optimposts .type-product .star-rating,
.woocommerce .star-rating,
.woocommerce .star-rating::before,
.woocommerce .star-rating span::before {
  color: var(--accent) !important;
}

/* =============================================================
   8. FOOTER
   ============================================================= */
.footer_wrap,
#footer {
  background: var(--chrome) !important;
  color: var(--ink-inverse-muted) !important;
}

#footer h3,
.footer_wrap h3,
.footer_wrap h4 {
  font-family: var(--font-display) !important;
  font-size: var(--step-1) !important;
  letter-spacing: 0.10em !important;
  color: var(--ink-inverse) !important;
  margin-bottom: var(--space-sm) !important;
  text-transform: uppercase;
}

#footer a,
.footer_wrap a {
  color: var(--ink-inverse-muted) !important;
  text-decoration: none;
}

#footer a:hover,
.footer_wrap a:hover {
  color: var(--accent) !important;
}

.footmenu li a:before,
.footer-blog-posts ul li a:before {
  color: var(--ink-inverse-muted) !important;
}

#copyright {
  background: oklch(15% 0.030 var(--brand-hue)) !important;
  border-top: 1px solid oklch(35% 0.030 var(--brand-hue));
}

#copyright,
#copyright .copytext,
#copyright a {
  color: var(--ink-inverse-muted) !important;
  font-size: var(--step--1) !important;
}

/* =============================================================
   9. CONTRAST FIXES
   - The detector flagged #393939 on #545556 (1.5:1) — fix.
   - Suppress the parent's white-on-white slider caption defaults.
   ============================================================= */
body [style*="color:#393939"],
body [style*="color: #393939"] {
  color: var(--ink) !important;
}

#footer .contact-info .box {
  border-right: 1px solid oklch(40% 0.020 var(--brand-hue)) !important;
  color: var(--ink-inverse) !important;
}

/* =============================================================
   10. DECORATION CULL
   Remove the parent's "complete_divider" Font-Awesome flourishes —
   pure templated decoration with no editorial value.
   ============================================================= */
.complete_divider,
.complete_divider .div_left,
.complete_divider .div_right,
.complete_divider .div_middle {
  display: none !important;
}

/* The "to top" button — keep but make it minimal */
.to_top {
  background: var(--chrome) !important;
  color: var(--ink-inverse) !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line) !important;
  box-shadow: 0 4px 16px oklch(20% 0.02 var(--brand-hue) / 0.10) !important;
}

/* =============================================================
   11. LAYOUT RHYTHM
   Wider container; varied vertical rhythm rather than uniform 60px.
   ============================================================= */
.center {
  max-width: var(--container-max) !important;
  padding-left: var(--container-padding) !important;
  padding-right: var(--container-padding) !important;
}

.fixed_site,
.fixed_wrap {
  background: var(--canvas);
}

/* Section breathing room */
.page_wrap,
#content {
  padding-block: var(--space-2xl);
}

/* =============================================================
   12. JARGON GLOSSARY — contextual help block
   Shown above the shop grid via a custom action hook (functions.php)
   so first-timers get plain-English on-ramps without losing the
   scientific naming the audience values.
   ============================================================= */
.ri-glossary {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin: 0 0 var(--space-xl);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-sm) var(--space-lg);
}

.ri-glossary dt {
  font-family: var(--font-display);
  font-size: var(--step-0);
  letter-spacing: 0.06em;
  color: var(--ink);
  margin: 0;
}

.ri-glossary dd {
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--ink-muted);
  margin: var(--space-3xs) 0 0;
  max-width: 38ch;
}

.ri-glossary-summary {
  grid-column: 1 / -1;
  font-family: var(--font-display);
  font-size: var(--step-0);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--space-2xs);
  cursor: pointer;
}

.ri-glossary[open] .ri-glossary-summary {
  color: var(--ink);
}

/* =============================================================
   12a. BREADCRUMBS
   Re-enabled at the child level (parent strips them). Modest,
   scannable, sentence-case, accent on hover.
   ============================================================= */
.ri-breadcrumb,
.woocommerce-breadcrumb {
  font-family: var(--font-body);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  margin: 0 0 var(--space-md);
  padding-block: var(--space-2xs);
}

.ri-breadcrumb a,
.woocommerce-breadcrumb a {
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.ri-breadcrumb a:hover,
.woocommerce-breadcrumb a:hover {
  color: var(--accent-strong);
  border-bottom-color: var(--accent);
}

.ri-breadcrumb-sep {
  color: var(--ink-faint);
  margin: 0 var(--space-3xs);
  font-weight: 400;
}

/* On the live shop archive, push breadcrumbs above the glossary. */
.woocommerce-shop .woocommerce-breadcrumb,
.woocommerce-shop .ri-breadcrumb {
  margin-bottom: var(--space-sm);
}

/* =============================================================
   12b. INNER-PAGE HEADER ("page_head")
   Replaces the parent's customizer-driven .page_head chrome that
   was unhooked along with complete_dynamic_css. We keep the
   coral_banner.png if it's been uploaded; otherwise solid chrome.
   ============================================================= */
.page_head,
.post_head,
.author_div {
  background-color: var(--chrome) !important;
  color: var(--ink-inverse) !important;
  padding: var(--space-2xl) 0;
}

.page_head_bg,
.post_head_bg,
.author_div_bg {
  background-image: url('/wp-content/uploads/2025/09/coral_banner.png');
  background-size: cover;
  background-position: center;
  position: relative;
}

.page_head_bg::after,
.post_head_bg::after,
.author_div_bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    oklch(15% 0.04 var(--brand-hue) / 0.55) 0%,
    oklch(15% 0.04 var(--brand-hue) / 0.85) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.page_head_bg .center,
.post_head_bg .center,
.author_div_bg .center {
  position: relative;
  z-index: 2;
}

.page_head .postitle,
.page_head h1,
.page_head h2,
.post_head h1,
.post_head h2 {
  color: var(--ink-inverse) !important;
  font-family: var(--font-display) !important;
}

.page_head .layerbread,
.page_head .layerbread a {
  color: var(--ink-inverse-muted) !important;
  font-family: var(--font-body) !important;
  letter-spacing: 0.06em;
}

/* Defensive: even after the PHP edit to skip core-pageheader on the
   front page, any stray .page_head / .post_head rendered on the
   home (e.g., if the parent theme adds new contexts) stays hidden.
   The editorial hero owns wayfinding on / */
body.home .page_head,
body.home .post_head,
body.home > .page_wrap > .page_head,
body.home > .page_wrap > .post_head {
  display: none !important;
}

/* =============================================================
   12c. FALLBACK TYPOGRAPHY HARDENING
   Belt + suspenders. Even with the parent's dynamic CSS gone,
   third-party plugins (Elementor, MailPoet, WooCommerce) sometimes
   inject inline font declarations. Keep the headings honest.
   ============================================================= */
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body .postitle,
html body .product_title,
html body .woocommerce h1.page-title,
html body .woocommerce-products-header__title {
  font-family: var(--font-display) !important;
  color: var(--ink) !important;
}

html body,
html body button,
html body input,
html body select,
html body textarea,
html body p {
  font-family: var(--font-body) !important;
}

html body a {
  color: var(--ink);
}

html body a:hover {
  color: var(--accent-strong);
}

/* =============================================================
   12d. TESTIMONIAL CAROUSEL — kill pure #000 nav backgrounds
   The parent's dynamic CSS gave .owl-nav prev/next a #000 fill.
   Now that we've unhooked it, the owl plugin defaults can leak
   through; pin them to brand chrome.
   ============================================================= */
#testimonials .owl-nav .owl-prev,
#testimonials .owl-nav .owl-next,
.owl-theme .owl-nav button.owl-prev,
.owl-theme .owl-nav button.owl-next {
  background-color: var(--chrome) !important;
  color: var(--ink-inverse) !important;
  border-radius: var(--radius-sm) !important;
}

#testimonials .owl-nav .owl-prev:hover,
#testimonials .owl-nav .owl-next:hover {
  background-color: var(--accent) !important;
}

#testimonials .tm_description,
#testimonials h3,
#testimonials .tm_info span,
#testimonials .tm_info p {
  color: var(--ink-inverse) !important;
  font-family: var(--font-body) !important;
}

#testimonials h3,
#testimonials .tm_description h3 {
  font-family: var(--font-display) !important;
}

/* =============================================================
   12e. MAILPOET NEWSLETTER POPUP — quiet the AI-slop island
   The form editor hardcodes inline styles on the submit button:
     - background: linear-gradient(135deg, blue, purple)
     - color: #ffd456 (yellow on gradient — WCAG fail)
     - font-family: Montserrat
   Inline styles only lose to !important. Override aggressively.
   The auto-popup delay (data-delay="30") is configured in MailPoet
   admin, not CSS — see /i-clarify notes for that.
   ============================================================= */
body .mailpoet_form,
body .mailpoet_form_form,
body .mailpoet_form_popup,
body .mailpoet_form input,
body .mailpoet_form .mailpoet_paragraph,
body .mailpoet_form p,
body .mailpoet_form label {
  font-family: var(--font-body) !important;
}

body .mailpoet_form .mailpoet_text,
body .mailpoet_form input[type="email"],
body .mailpoet_form input[type="text"] {
  background-color: var(--canvas) !important;
  background-image: none !important;
  color: var(--ink) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-body) !important;
  font-size: var(--step-0) !important;
  font-weight: 400 !important;
  padding: var(--space-xs) var(--space-md) !important;
  line-height: 1.5 !important;
  height: auto !important;
}

body .mailpoet_form .mailpoet_text::placeholder,
body .mailpoet_form input[type="email"]::placeholder {
  color: var(--ink-faint) !important;
  opacity: 1;
}

body .mailpoet_form .mailpoet_submit,
body .mailpoet_form input[type="submit"],
body .mailpoet_form .mailpoet_paragraph input.mailpoet_submit {
  background: var(--accent) !important;
  background-color: var(--accent) !important;
  background-image: none !important;
  color: var(--ink-inverse) !important;
  border: 1px solid var(--accent) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-body) !important;
  font-size: var(--step--1) !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  padding: var(--space-xs) var(--space-md) !important;
  line-height: 1.5 !important;
  height: auto !important;
  text-shadow: none !important;
  box-shadow: none !important;
  transition: background var(--duration-fast) var(--ease-out) !important;
}

body .mailpoet_form .mailpoet_submit:hover,
body .mailpoet_form input[type="submit"]:hover {
  background: var(--accent-strong) !important;
  background-color: var(--accent-strong) !important;
  background-image: none !important;
  color: var(--ink-inverse) !important;
  border-color: var(--accent-strong) !important;
}

/* The "BECOME AN INSIDER" yellow text on a blue→purple gradient is
   especially loud. Force a calmer alternative: solid coral on white
   when the form is in the popup container. */
body .mailpoet_form_popup .mailpoet_form_paragraph,
body .mailpoet_form_popup p,
body .mailpoet_form_popup strong {
  color: var(--ink) !important;
  font-family: var(--font-body) !important;
}

body .mailpoet_form_popup {
  background-color: var(--canvas) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 24px 64px oklch(20% 0.02 var(--brand-hue) / 0.18) !important;
  padding: var(--space-xl) !important;
}

/* Reduce auto-popup intrusion: dim the appearance animation so a
   distracted mobile user doesn't get jump-scared. The data-delay
   itself can only change in MailPoet admin. */
body .mailpoet_form_popup {
  transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  body .mailpoet_form_popup {
    transition: none !important;
  }
}

/* =============================================================
   12e2. CART QUANTITY + REMOVE CONTROLS
   The generic button override in §6 is too broad for the cart's
   tiny quantity stepper and remove icon. Override to restrained
   defaults: small neutral squares for +/-, small icon-only button
   for remove, clean number input.
   ============================================================= */

/* --- Quantity input (the number in the middle) --- */
body .woocommerce .quantity .qty,
body .woocommerce-cart .quantity input[type="number"],
body .woocommerce .quantity input.qty,
body .wc-block-components-quantity-selector__input,
body input[type="number"].qty {
  background: var(--canvas) !important;
  background-image: none !important;
  color: var(--ink) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--radius-sm) !important;
  padding: 0 var(--space-2xs) !important;
  font-family: var(--font-body) !important;
  font-size: var(--step-0) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  height: 38px !important;
  width: 56px !important;
  min-width: 0 !important;
  max-width: 56px !important;
  text-align: center !important;
  box-shadow: none !important;
  -moz-appearance: textfield;
}

/* Hide the native number input spinners so the +/- buttons are the
   only way to change quantity */
body .woocommerce .quantity input.qty::-webkit-outer-spin-button,
body .woocommerce .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* --- Plus / minus buttons — small neutral squares, accent on hover --- */
body .woocommerce .quantity .plus,
body .woocommerce .quantity .minus,
body .woocommerce-page .quantity .plus,
body .woocommerce-page .quantity .minus,
body .wc-block-components-quantity-selector__button {
  background: var(--surface) !important;
  background-image: none !important;
  color: var(--ink) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--radius-sm) !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 0 !important;
  flex: 0 0 38px !important;
  font-family: var(--font-body) !important;
  font-size: 1.125rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out) !important;
}

body .woocommerce .quantity .plus:hover,
body .woocommerce .quantity .minus:hover,
body .wc-block-components-quantity-selector__button:hover {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
  color: var(--accent-ink) !important;
  transform: none !important;
}

body .woocommerce .quantity .plus:focus-visible,
body .woocommerce .quantity .minus:focus-visible,
body .wc-block-components-quantity-selector__button:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
}

body .woocommerce .quantity .plus:disabled,
body .woocommerce .quantity .minus:disabled,
body .wc-block-components-quantity-selector__button:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  background: var(--surface) !important;
  color: var(--ink-faint) !important;
  border-color: var(--line) !important;
}

/* Group the qty stepper visually — buttons hug the input */
body .woocommerce .quantity,
body .wc-block-components-quantity-selector {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  width: auto !important;
}

body .woocommerce .quantity .minus { border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important; }
body .woocommerce .quantity .qty   { border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; }
body .woocommerce .quantity .plus  { border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important; }

/* --- Remove button (the third coral block in the screenshot) ---
   Both legacy table-cart and the block-based cart use different
   selectors. Reset both to a small icon-only neutral button. */
body .woocommerce-cart .product-remove a,
body .woocommerce-cart .product-remove a.remove,
body .woocommerce a.remove,
body .wc-block-cart-item__remove-link,
body .wc-block-cart-item__remove,
body .wc-block-cart__remove-link {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--ink-muted) !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  text-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 0 var(--space-xs) !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  line-height: 1 !important;
  transition: color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out) !important;
}

body .woocommerce-cart .product-remove a:hover,
body .woocommerce a.remove:hover,
body .wc-block-cart-item__remove-link:hover {
  color: var(--accent-strong) !important;
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
  transform: none !important;
}

/* The legacy WC ".remove" link uses an "×" character — make sure
   it's the visible mark, not a FontAwesome icon leaking through */
body .woocommerce a.remove::before {
  content: none !important;
}

body .woocommerce a.remove {
  font-size: 1.25rem !important;
  font-weight: 500 !important;
}

/* If the cart-block remove uses an SVG, normalize its sizing too */
body .wc-block-cart-item__remove-link svg,
body .wc-block-cart-item__remove svg {
  width: 18px !important;
  height: 18px !important;
  fill: currentColor !important;
}

/* =============================================================
   12f. CARE-LEVEL BADGE
   Three variants tied to the WC product attribute pa_care-level.
   Colors are pulled from the existing palette — no new tokens.
   ============================================================= */
.ri-care-badge {
  display: inline-block;
  padding: 2px var(--space-2xs);
  margin: var(--space-3xs) 0;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  border: 1px solid currentColor;
  background: transparent;
  line-height: 1.6;
}

.ri-care-badge--beginner-friendly {
  color: oklch(48% 0.10 165);             /* calm reef-shallows green */
  background: oklch(96% 0.025 165);
  border-color: oklch(78% 0.06 165);
}

.ri-care-badge--intermediate {
  color: var(--accent-ink);                /* warm coral */
  background: var(--accent-soft);
  border-color: oklch(80% 0.08 var(--accent-hue));
}

.ri-care-badge--advanced {
  color: var(--ink-inverse);
  background: var(--chrome);
  border-color: var(--chrome);
}

/* On the single-product summary, give the badge a touch more breathing room */
.woocommerce div.product .ri-care-badge {
  margin: var(--space-2xs) 0 var(--space-sm);
}

/* =============================================================
   12g. SINGLE-PRODUCT ATTRIBUTE STRIP
   Compact dl rendered right under price. Marcus reads this in
   under 2 seconds to assess fit for his tank.
   ============================================================= */
.ri-attr-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-2xs) var(--space-md);
  margin: var(--space-md) 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
}

.ri-attr-strip dt {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0;
}

.ri-attr-strip dd {
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 500;
  color: var(--ink);
  margin: 2px 0 0;
}

/* =============================================================
   12h. FACETED FILTER SIDEBAR
   Renders inside woocommerce_before_shop_loop. On wide screens it
   floats right (collapsible), on narrow screens it sits above the
   grid as a horizontal toolbar. Uses native checkboxes — visible
   focus, no custom widget that breaks keyboard nav.
   ============================================================= */
.ri-facets {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin: 0 0 var(--space-lg);
}

.ri-facets-form {
  display: grid;
  gap: var(--space-md);
}

.ri-facets-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--space-2xs);
}

.ri-facets-title {
  font-family: var(--font-display);
  font-size: var(--step-0);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}

.ri-facets-clear {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.ri-facets-clear:hover {
  color: var(--accent-strong);
  border-bottom-color: var(--accent);
}

.ri-facets .ri-facet-group {
  border: 0;
  margin: 0;
  padding: 0;
}

.ri-facets .ri-facet-group legend {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--space-2xs);
  padding: 0;
}

.ri-facet-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.ri-facet-option {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: 4px var(--space-xs);
  background: var(--canvas);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}

.ri-facet-option:hover {
  border-color: var(--accent);
}

.ri-facet-option input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: 3px;
  background: var(--canvas);
  margin: 0;
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.ri-facet-option input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}

.ri-facet-option input[type="checkbox"]:checked::after {
  content: "";
  width: 4px;
  height: 8px;
  border-right: 2px solid var(--ink-inverse);
  border-bottom: 2px solid var(--ink-inverse);
  transform: rotate(45deg) translate(-1px, -1px);
}

.ri-facet-option input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.ri-facet-option:has(input:checked) {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.ri-facets-apply {
  justify-self: start;
  background: var(--accent);
  color: var(--ink-inverse);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  padding: var(--space-2xs) var(--space-md);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.ri-facets-apply:hover {
  background: var(--accent-strong);
  transform: translateY(-1px);
}

/* =============================================================
   12i. MEGA-MENU CULL — defensive CSS
   The Shop Coral submenu currently lists 36 ALL-CAPS Latin genera.
   The user is going to rebuild the menu in WP Admin → Appearance →
   Menus to a 4-item structure. Until then, hide the
   genus-level submenu items via CSS so the new IA appears
   immediately. Once the admin-side rebuild is done, this rule
   is harmless (matches nothing).

   The hide targets product_cat menu items inside an LPS submenu —
   keeping LPS itself visible but hiding its 36 genus children.
   ============================================================= */
@media (min-width: 1024px) {
  /* Hide the sub-sub-menu under LPS that contains the 36 genera.
     ul#menu-menu-1 > li > ul#menu-menu-1 sub-menu .menu-item-462 (LPS)
     has a child ul.sub-menu — that's the 36 items. Hide it. */
  #topmenu ul.menu > li > ul.sub-menu > li.menu-item-object-product_cat > ul.sub-menu {
    display: none !important;
  }
  /* Drop the chevron indicator on LPS since it no longer expands */
  #topmenu ul.menu > li > ul.sub-menu > li.menu-item-object-product_cat.menu-item-has-children > a::after {
    content: none !important;
  }
  /* Title-case the LPS-level menu items (was UPPERCASE) */
  #topmenu ul.menu > li > ul.sub-menu > li > a {
    text-transform: none !important;
    font-variant: normal !important;
  }
}

/* On mobile, the 36-item list would otherwise overflow viewport.
   Hide it here too — the browse-all-genera accordion at the bottom
   of /shop/ becomes the on-ramp for the full Latin list. */
@media (max-width: 1023px) {
  #sidr-main ul li.menu-item-object-product_cat ul {
    display: none !important;
  }
}

/* =============================================================
   12j. BROWSE-ALL-GENERA ACCORDION (at bottom of /shop/)
   For Marcus the hobbyist who does want the alphabetical Latin
   list — no regression. Collapsed by default; expert opt-in.
   ============================================================= */
.ri-browse-all {
  margin: var(--space-2xl) 0 var(--space-xl);
  padding: var(--space-md) var(--space-lg);
  background: var(--surface-sunk);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
}

.ri-browse-all-summary {
  font-family: var(--font-display);
  font-size: var(--step-0);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-muted);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.ri-browse-all-summary::-webkit-details-marker { display: none; }

.ri-browse-all-summary::before {
  content: "+";
  display: inline-block;
  font-family: var(--font-body);
  font-size: 1rem;
  width: 1.2em;
  color: var(--ink-muted);
  transition: transform var(--duration-fast) var(--ease-out);
}

.ri-browse-all[open] .ri-browse-all-summary::before {
  content: "−";
}

.ri-browse-all-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-2xs) var(--space-md);
  margin-top: var(--space-md);
}

.ri-browse-all-link {
  font-family: var(--font-body);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--ink);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.ri-browse-all-link:hover {
  color: var(--accent-strong);
  border-bottom-color: var(--accent);
}

/* =============================================================
   12k. GLOSSARY GRID — accommodate the expanded term list
   ============================================================= */
.ri-glossary {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

@media (max-width: 640px) {
  .ri-glossary {
    grid-template-columns: 1fr;
  }
}

/* =============================================================
   13. RESPONSIVE
   ============================================================= */
@media (max-width: 880px) {
  .ri-hero { min-height: clamp(380px, 60vh, 540px); }
  .ri-hero-inner { padding: var(--space-2xl) var(--container-padding) var(--space-xl); }
  .ri-trust-strip-inner { gap: var(--space-md); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}