@import url("./radchem-tokens.css");

/*
 * RadChem Theme Tokens + Light Foundation
 * Change brand colors here. Component/page markup should not contain brand hex values.
 */

/* Global light foundation */
html,
body {
  background: var(--rc-surface-page);
  color: var(--rc-text-body);
}

body {
  color: var(--rc-text-body);
}

/* Reusable RadChem primitives */
.rc-surface-blue { background: var(--rc-surface-blue) !important; }
.rc-surface-blue-soft { background: var(--rc-surface-blue-soft) !important; }
.rc-surface-green { background: var(--rc-surface-green) !important; }
.rc-surface-green-soft { background: var(--rc-surface-green-soft) !important; }

.rc-text-heading { color: var(--rc-text-heading) !important; }
.rc-text-body { color: var(--rc-text-body) !important; }
.rc-text-muted { color: var(--rc-text-muted) !important; }
.rc-text-primary { color: var(--rc-brand-primary) !important; }
.rc-text-accent { color: var(--rc-brand-accent) !important; }

.rc-border { border-color: var(--rc-border-blue) !important; }
.rc-border-strong { border-color: var(--rc-border-blue-strong) !important; }
.rc-border-accent { border-color: var(--rc-border-green) !important; }

.rc-card {
  background: var(--rc-surface-page);
  border: 1px solid var(--rc-border-blue);
  border-radius: var(--rc-radius-card);
  box-shadow: var(--rc-shadow-card);
  transition: border-color var(--rc-transition), box-shadow var(--rc-transition), transform var(--rc-transition);
}

.rc-card:hover {
  border-color: var(--rc-border-blue-strong);
  box-shadow: var(--rc-shadow-card-hover);
}

.rc-btn-primary {
  background: var(--rc-brand-primary) !important;
  color: var(--rc-text-on-brand) !important;
}

.rc-btn-primary:hover {
  background: var(--rc-brand-primary-hover) !important;
}

.rc-btn-accent {
  background: var(--rc-brand-accent) !important;
  color: var(--rc-color-text-on-accent) !important;
}

.rc-btn-accent:hover {
  background: var(--rc-brand-accent-hover) !important;
  color: var(--rc-color-text-on-primary) !important;
}


/* ========================================================================
   RADCHEM HERO COMPONENT
   ------------------------------------------------------------------------
   Use: <section class="rc-hero rc-hero-subtle"> ... </section>

   Variants are semantic roles, not literal colors. Brand changes should be
   made in radchem-tokens.css; hero variants inherit from those tokens.
   ======================================================================== */
.rc-hero {
  --rc-hero-background: var(--rc-color-surface-page);
  --rc-hero-heading: var(--rc-color-primary);
  --rc-hero-body: var(--rc-color-text-body);
  --rc-hero-accent: var(--rc-color-accent);
  --rc-hero-border: var(--rc-color-border-default);
  --rc-hero-grid: var(--rc-color-grid);
  position: relative;
  overflow: hidden;
  background: var(--rc-hero-background);
  color: var(--rc-hero-body);
  /* Size is independent of color/background — set via the rc-hero-standard|
     fullscreen|compact|large modifiers below, driven by tokens in
     radchem-tokens.css so global spacing changes in one place. */
  min-height: var(--rc-hero-min-height);
  padding-block: var(--rc-hero-padding-y);
}

/* ------------------------------------------------------------------------
   SIZE variants — combine with a color variant, e.g.:
   <section class="rc-hero rc-hero-fullscreen rc-hero-primary">
   ------------------------------------------------------------------------ */
.rc-hero-standard {
  --rc-hero-min-height: 0;
}

.rc-hero-fullscreen {
  --rc-hero-min-height: var(--rc-hero-fullscreen-min-height);
}

.rc-hero-compact {
  --rc-hero-padding-y: var(--rc-hero-compact-padding-y);
  --rc-hero-min-height: 0;
}

.rc-hero-large {
  --rc-hero-padding-y: var(--rc-hero-large-padding-y);
  --rc-hero-min-height: 0;
}

@media (max-width: 768px) {
  .rc-hero,
  .rc-hero-compact,
  .rc-hero-large {
    padding-block: var(--rc-hero-padding-y-mobile);
  }
}

/* ------------------------------------------------------------------------
   COLOR variants — background/foreground treatment only.
   ------------------------------------------------------------------------ */

.rc-hero h1,
.rc-hero h2,
.rc-hero h3,
.rc-hero h4,
.rc-hero h5,
.rc-hero h6 {
  color: var(--rc-hero-heading);
}

.rc-hero p {
  color: var(--rc-hero-body);
}

.rc-hero .rc-text-accent,
.rc-hero .rc-hero-accent {
  color: var(--rc-hero-accent);
}

.rc-hero .rc-hero-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--rc-hero-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rc-hero-grid) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black 0%, rgba(0,0,0,.55) 58%, transparent 100%);
}

.rc-hero-subtle {
  --rc-hero-background: var(--rc-color-surface-blue);
}

.rc-hero-primary {
  --rc-hero-background: var(--rc-color-primary);
  --rc-hero-heading: var(--rc-color-text-on-primary);
  --rc-hero-body: rgba(255,255,255,.88);
  --rc-hero-accent: var(--rc-color-accent);
  --rc-hero-border: rgba(255,255,255,.18);
  --rc-hero-grid: rgba(255,255,255,.09);
}

.rc-hero-accent {
  --rc-hero-background: var(--rc-color-accent);
  --rc-hero-heading: var(--rc-color-text-on-accent);
  --rc-hero-body: rgba(23,33,43,.82);
  --rc-hero-accent: var(--rc-color-primary);
  --rc-hero-border: rgba(23,33,43,.16);
  --rc-hero-grid: rgba(23,33,43,.08);
}

.rc-hero-neutral {
  --rc-hero-background: var(--rc-color-surface-subtle);
}

/* Backward-compatible alias for existing light hero markup.
   Keep this as the single legacy entry point while new pages use
   `rc-hero rc-hero-subtle|primary|accent|neutral`. */
.rc-hero-light {
  --rc-hero-background: var(--rc-color-surface-blue);
  background: var(--rc-hero-background) !important;
  color: var(--rc-text-heading) !important;
}

.rc-hero-light::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(232,244,253,.72) 1px, transparent 1px),
    linear-gradient(rgba(232,244,253,.72) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 82%);
  opacity: .38;
}

.rc-hero-light > * {
  position: relative;
  z-index: 1;
}

.rc-hero-light .text-white,
.rc-hero-light [class*="text-white/"] {
  color: var(--rc-text-body) !important;
}

.rc-hero-light h1,
.rc-hero-light h2,
.rc-hero-light h3,
.rc-hero-light h4 {
  color: var(--rc-text-heading) !important;
}

.rc-hero-light .text-\[\#C9860A\],
.rc-hero-light .text-\[\#E8A020\] {
  color: var(--rc-brand-accent) !important;
}

.rc-hero-light .border-white\/10,
.rc-hero-light .border-white\/20,
.rc-hero-light .border-white\/30 {
  border-color: var(--rc-border-blue) !important;
}

.rc-hero-light .bg-white\/\[0\.05\],
.rc-hero-light .bg-white\/\[0\.08\],
.rc-hero-light .bg-white\/\[0\.1\] {
  background: rgba(255,255,255,.86) !important;
  border-color: var(--rc-border-blue) !important;
}

.rc-hero-light .text-white\/25,
.rc-hero-light .text-white\/40,
.rc-hero-light .text-white\/45,
.rc-hero-light .text-white\/50,
.rc-hero-light .text-white\/55 {
  color: var(--rc-text-muted) !important;
}

.rc-hero-light .btn-outline-white {
  color: var(--rc-brand-primary) !important;
  border-color: var(--rc-brand-primary) !important;
}

.rc-hero-light .btn-outline-white:hover {
  background: var(--rc-brand-primary) !important;
  color: var(--rc-color-text-on-primary) !important;
}

.rc-hero-light .btn-gold,
.rc-hero-light .btn-gold:hover {
  background: var(--rc-brand-accent) !important;
  color: var(--rc-color-text-on-accent) !important;
}

/* Shared light hero grid. */
.rc-hero-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(to right, rgba(16,115,182,.045) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(16,115,182,.045) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black 0%, rgba(0,0,0,.65) 55%, transparent 100%);
}
.rc-btn-outline {
  background: transparent !important;
  color: var(--rc-brand-primary) !important;
  border: 1px solid var(--rc-brand-primary) !important;
}
.rc-btn-outline:hover {
  background: var(--rc-brand-primary) !important;
  color: var(--rc-text-on-brand) !important;
}

/* ========================================================================
   RADCHEM SEMANTIC THEME LAYER
   ------------------------------------------------------------------------
   Purpose: keep visual meaning separate from literal color values.
   Team rule: use semantic classes below in HTML instead of hex colors.
   Change the palette in :root only when rebranding the theme.
   ======================================================================== */


/* ---------- Semantic text ---------- */
.rc-text-primary { color: var(--rc-color-primary) !important; }
.rc-text-accent { color: var(--rc-color-accent) !important; }
.rc-text-heading { color: var(--rc-color-text-heading) !important; }
.rc-text-body { color: var(--rc-color-text-body) !important; }
.rc-text-muted { color: var(--rc-color-text-muted) !important; }

/* ---------- Semantic surfaces ---------- */
.rc-surface-page { background: var(--rc-color-surface-page) !important; }
.rc-surface-subtle { background: var(--rc-color-surface-subtle) !important; }
.rc-surface-blue { background: var(--rc-color-surface-blue) !important; }
.rc-surface-blue-soft { background: var(--rc-color-surface-blue-soft) !important; }
.rc-surface-green { background: var(--rc-color-surface-green) !important; }
.rc-surface-green-soft { background: var(--rc-color-surface-green-soft) !important; }

/* ---------- Semantic borders ---------- */
.rc-border-default { border-color: var(--rc-color-border-default) !important; }
.rc-border-strong { border-color: var(--rc-color-border-strong) !important; }
.rc-border-accent { border-color: var(--rc-color-border-accent) !important; }

/* ---------- Semantic controls ---------- */
.rc-bg-primary { background: var(--rc-color-primary) !important; color: var(--rc-color-text-on-brand) !important; }
.rc-bg-primary:hover { background: var(--rc-color-primary-hover) !important; }
.rc-bg-accent { background: var(--rc-color-accent) !important; color: var(--rc-color-text-on-accent) !important; }
.rc-bg-accent-hover { background: var(--rc-color-accent-hover) !important; }

.hover-text-accent:hover { color: var(--rc-color-accent) !important; }
.group:hover .group-hover-text-accent { color: var(--rc-color-accent) !important; }
.hover-border-accent:hover { border-color: var(--rc-color-accent) !important; }

/* ---------- Light surface text contract ----------
   Any component placed on a light surface must use dark semantic text.
   Brand controls are explicitly exempted so their white text remains readable. */
.rc-surface-blue .text-white,
.rc-surface-blue [class*="text-white/"],
.rc-surface-green .text-white,
.rc-surface-green [class*="text-white/"] {
  color: var(--rc-color-text-body) !important;
}

.rc-surface-blue h1,
.rc-surface-blue h2,
.rc-surface-blue h3,
.rc-surface-blue h4,
.rc-surface-green h1,
.rc-surface-green h2,
.rc-surface-green h3,
.rc-surface-green h4 {
  color: var(--rc-color-primary) !important;
}

.rc-surface-blue .btn,
.rc-surface-blue .btn * ,
.rc-surface-green .btn,
.rc-surface-green .btn * {
  color: var(--rc-color-text-on-brand) !important;
}

/* Existing branded CTA classes stay readable on light surfaces. */
.rc-surface-blue .rc-bg-accent,
.rc-surface-blue .rc-bg-accent *,
.rc-surface-green .rc-bg-accent,
.rc-surface-green .rc-bg-accent * {
  color: var(--rc-color-text-on-accent) !important;
}

/* ---------- Cards ---------- */
.rc-card {
  background: var(--rc-color-surface-page);
  border: 1px solid var(--rc-color-border-default);
  border-radius: var(--rc-radius-lg);
  box-shadow: var(--rc-shadow-sm);
  transition:
    border-color var(--rc-duration-base) var(--rc-ease-standard),
    box-shadow var(--rc-duration-base) var(--rc-ease-standard),
    transform var(--rc-duration-base) var(--rc-ease-standard);
}

.rc-card:hover {
  border-color: var(--rc-color-border-strong);
  box-shadow: var(--rc-shadow-md);
  transform: translateY(-2px);
}

/* ---------- Accessible focus ---------- */
.rc-focusable:focus-visible,
.rc-focusable:focus {
  outline: 3px solid color-mix(in srgb, var(--rc-color-primary) 28%, transparent);
  outline-offset: 3px;
}

/* ---------- Keep legacy dark-surface class names maintainable ----------
   Pages now use rc-surface-blue for former dark content sections. */



/* ========================================================================
   STAGE 5A — SEMANTIC LIGHT-SURFACE TYPOGRAPHY
   ------------------------------------------------------------------------
   Rule: light surfaces use readable dark text; brand accents stay blue/green.
   These rules intentionally target content elements rather than controls.
   Do not use text-white on headings/paragraphs inside light surfaces.
   ======================================================================== */

/* Page heroes are now light surfaces across the theme. */
.rc-page-hero,
.rc-page-hero .container {
  color: var(--rc-color-text-body);
}

.rc-page-hero h1,
.rc-page-hero h2,
.rc-page-hero h3,
.rc-page-hero h4,
.rc-page-hero h5,
.rc-page-hero h6 {
  color: var(--rc-color-primary) !important;
}

.rc-page-hero p {
  color: var(--rc-color-text-body) !important;
}

/* Breadcrumbs on light page heroes. */
.rc-page-hero nav,
.rc-page-hero nav a,
.rc-page-hero nav span:not(.rc-text-accent) {
  color: var(--rc-color-text-muted) !important;
}

.rc-page-hero nav a:hover,
.rc-page-hero nav .rc-text-accent {
  color: var(--rc-color-accent) !important;
}

/* Any light semantic surface gets a consistent typography contract. */
.rc-surface-blue,
.rc-surface-blue-soft,
.rc-surface-green,
.rc-surface-green-soft,
.rc-surface-subtle,
.rc-surface-page {
  color: var(--rc-color-text-body);
}

.rc-surface-blue h1,
.rc-surface-blue h2,
.rc-surface-blue h3,
.rc-surface-blue h4,
.rc-surface-blue h5,
.rc-surface-blue h6,
.rc-surface-blue-soft h1,
.rc-surface-blue-soft h2,
.rc-surface-blue-soft h3,
.rc-surface-blue-soft h4,
.rc-surface-blue-soft h5,
.rc-surface-blue-soft h6,
.rc-surface-green h1,
.rc-surface-green h2,
.rc-surface-green h3,
.rc-surface-green h4,
.rc-surface-green h5,
.rc-surface-green h6,
.rc-surface-green-soft h1,
.rc-surface-green-soft h2,
.rc-surface-green-soft h3,
.rc-surface-green-soft h4,
.rc-surface-green-soft h5,
.rc-surface-green-soft h6,
.rc-surface-subtle h1,
.rc-surface-subtle h2,
.rc-surface-subtle h3,
.rc-surface-subtle h4,
.rc-surface-subtle h5,
.rc-surface-subtle h6,
.rc-surface-page h1,
.rc-surface-page h2,
.rc-surface-page h3,
.rc-surface-page h4,
.rc-surface-page h5,
.rc-surface-page h6 {
  color: var(--rc-color-primary) !important;
}

.rc-surface-blue p,
.rc-surface-blue li,
.rc-surface-blue blockquote,
.rc-surface-blue-soft p,
.rc-surface-blue-soft li,
.rc-surface-blue-soft blockquote,
.rc-surface-green p,
.rc-surface-green li,
.rc-surface-green blockquote,
.rc-surface-green-soft p,
.rc-surface-green-soft li,
.rc-surface-green-soft blockquote,
.rc-surface-subtle p,
.rc-surface-subtle li,
.rc-surface-subtle blockquote,
.rc-surface-page p,
.rc-surface-page li,
.rc-surface-page blockquote {
  color: var(--rc-color-text-body);
}

/* Override legacy white text only when it is used on light surfaces.
   Controls and brand elements are deliberately excluded. */
.rc-surface-blue h1.text-white,
.rc-surface-blue h2.text-white,
.rc-surface-blue h3.text-white,
.rc-surface-blue h4.text-white,
.rc-surface-blue h5.text-white,
.rc-surface-blue h6.text-white,
.rc-surface-blue-soft h1.text-white,
.rc-surface-blue-soft h2.text-white,
.rc-surface-blue-soft h3.text-white,
.rc-surface-blue-soft h4.text-white,
.rc-surface-blue-soft h5.text-white,
.rc-surface-blue-soft h6.text-white,
.rc-surface-green h1.text-white,
.rc-surface-green h2.text-white,
.rc-surface-green h3.text-white,
.rc-surface-green h4.text-white,
.rc-surface-green h5.text-white,
.rc-surface-green h6.text-white,
.rc-surface-green-soft h1.text-white,
.rc-surface-green-soft h2.text-white,
.rc-surface-green-soft h3.text-white,
.rc-surface-green-soft h4.text-white,
.rc-surface-green-soft h5.text-white,
.rc-surface-green-soft h6.text-white {
  color: var(--rc-color-primary) !important;
}

.rc-surface-blue p[class*="text-white/"],
.rc-surface-blue-soft p[class*="text-white/"],
.rc-surface-green p[class*="text-white/"],
.rc-surface-green-soft p[class*="text-white/"] {
  color: var(--rc-color-text-body) !important;
}



/* ========================================================================
   STAGE 5B — LIGHT SURFACE COMPONENT SYSTEM
   ------------------------------------------------------------------------
   Light sections must not inherit dark-theme translucent cards or white
   presentation text. These selectors intentionally bridge legacy utility
   classes to the semantic RadChem component system.
   ======================================================================== */

/* Legacy dark-card surfaces become real white cards on light sections. */
.rc-surface-blue [class~="bg-white/[0.03]"],
.rc-surface-blue [class~="bg-white/[0.04]"],
.rc-surface-blue [class~="bg-white/[0.05]"],
.rc-surface-blue [class~="bg-white/[0.06]"],
.rc-surface-blue [class~="bg-white/[0.08]"],
.rc-surface-blue [class~="bg-white/[0.1]"],
.rc-surface-blue-soft [class~="bg-white/[0.03]"],
.rc-surface-blue-soft [class~="bg-white/[0.04]"],
.rc-surface-blue-soft [class~="bg-white/[0.05]"],
.rc-surface-blue-soft [class~="bg-white/[0.06]"],
.rc-surface-blue-soft [class~="bg-white/[0.08]"],
.rc-surface-blue-soft [class~="bg-white/[0.1]"],
.rc-surface-green [class~="bg-white/[0.03]"],
.rc-surface-green [class~="bg-white/[0.04]"],
.rc-surface-green [class~="bg-white/[0.05]"],
.rc-surface-green [class~="bg-white/[0.06]"],
.rc-surface-green [class~="bg-white/[0.08]"],
.rc-surface-green [class~="bg-white/[0.1]"],
.rc-surface-green-soft [class~="bg-white/[0.03]"],
.rc-surface-green-soft [class~="bg-white/[0.04]"],
.rc-surface-green-soft [class~="bg-white/[0.05]"],
.rc-surface-green-soft [class~="bg-white/[0.06]"],
.rc-surface-green-soft [class~="bg-white/[0.08]"],
.rc-surface-green-soft [class~="bg-white/[0.1]"] {
  background: var(--rc-color-surface-page) !important;
  border-color: var(--rc-color-border-default) !important;
  box-shadow: var(--rc-shadow-sm);
}

/* Legacy white borders become semantic light borders. */
.rc-surface-blue [class~="border-white/5"],
.rc-surface-blue [class~="border-white/10"],
.rc-surface-blue [class~="border-white/15"],
.rc-surface-blue [class~="border-white/20"],
.rc-surface-blue-soft [class~="border-white/5"],
.rc-surface-blue-soft [class~="border-white/10"],
.rc-surface-blue-soft [class~="border-white/15"],
.rc-surface-blue-soft [class~="border-white/20"],
.rc-surface-green [class~="border-white/5"],
.rc-surface-green [class~="border-white/10"],
.rc-surface-green [class~="border-white/15"],
.rc-surface-green [class~="border-white/20"],
.rc-surface-green-soft [class~="border-white/5"],
.rc-surface-green-soft [class~="border-white/10"],
.rc-surface-green-soft [class~="border-white/15"],
.rc-surface-green-soft [class~="border-white/20"] {
  border-color: var(--rc-color-border-default) !important;
}

/* Cards on light surfaces: readable text and restrained elevation. */
.rc-surface-blue [class~="bg-white/[0.03]"] h1,
.rc-surface-blue [class~="bg-white/[0.04]"] h1,
.rc-surface-blue [class~="bg-white/[0.05]"] h1,
.rc-surface-blue [class~="bg-white/[0.06]"] h1,
.rc-surface-blue [class~="bg-white/[0.08]"] h1,
.rc-surface-blue [class~="bg-white/[0.1]"] h1,
.rc-surface-blue-soft [class~="bg-white/[0.03]"] h1,
.rc-surface-blue-soft [class~="bg-white/[0.04]"] h1,
.rc-surface-blue-soft [class~="bg-white/[0.05]"] h1,
.rc-surface-blue-soft [class~="bg-white/[0.06]"] h1,
.rc-surface-blue-soft [class~="bg-white/[0.08]"] h1,
.rc-surface-blue-soft [class~="bg-white/[0.1]"] h1,
.rc-surface-green [class~="bg-white/[0.03]"] h1,
.rc-surface-green [class~="bg-white/[0.04]"] h1,
.rc-surface-green [class~="bg-white/[0.05]"] h1,
.rc-surface-green [class~="bg-white/[0.06]"] h1,
.rc-surface-green [class~="bg-white/[0.08]"] h1,
.rc-surface-green [class~="bg-white/[0.1]"] h1,
.rc-surface-green-soft [class~="bg-white/[0.03]"] h1,
.rc-surface-green-soft [class~="bg-white/[0.04]"] h1,
.rc-surface-green-soft [class~="bg-white/[0.05]"] h1,
.rc-surface-green-soft [class~="bg-white/[0.06]"] h1,
.rc-surface-green-soft [class~="bg-white/[0.08]"] h1,
.rc-surface-green-soft [class~="bg-white/[0.1]"] h1 {
  color: var(--rc-color-primary) !important;
}

/* Any paragraph/list text inside a converted light-surface card is body text. */
.rc-surface-blue [class*="bg-white/"] p,
.rc-surface-blue [class*="bg-white/"] li,
.rc-surface-blue-soft [class*="bg-white/"] p,
.rc-surface-blue-soft [class*="bg-white/"] li,
.rc-surface-green [class*="bg-white/"] p,
.rc-surface-green [class*="bg-white/"] li,
.rc-surface-green-soft [class*="bg-white/"] p,
.rc-surface-green-soft [class*="bg-white/"] li {
  color: var(--rc-color-text-body) !important;
}

/* Process / feature number blocks use brand hierarchy, not white-on-light. */
.rc-surface-blue .text-white,
.rc-surface-blue-soft .text-white,
.rc-surface-green .text-white,
.rc-surface-green-soft .text-white {
  color: var(--rc-color-text-body) !important;
}

.rc-surface-blue .rc-bg-primary,
.rc-surface-blue-soft .rc-bg-primary,
.rc-surface-green .rc-bg-primary,
.rc-surface-green-soft .rc-bg-primary {
  color: var(--rc-color-text-on-brand) !important;
}

/* Muted copy remains readable without becoming visually heavy. */
.rc-surface-blue [class*="text-white/"],
.rc-surface-blue-soft [class*="text-white/"],
.rc-surface-green [class*="text-white/"],
.rc-surface-green-soft [class*="text-white/"] {
  color: var(--rc-color-text-body) !important;
}

/* Section titles use primary blue; accent stays green through rc-text-accent. */
.rc-surface-blue .section-label,
.rc-surface-blue-soft .section-label,
.rc-surface-green .section-label,
.rc-surface-green-soft .section-label {
  color: var(--rc-color-primary) !important;
}

/* Replace legacy gold divider styling on light surfaces with brand blue. */
.rc-surface-blue .gold-line,
.rc-surface-blue-soft .gold-line,
.rc-surface-green .gold-line,
.rc-surface-green-soft .gold-line {
  background: var(--rc-color-primary) !important;
}

/* Keep a small green visual signal next to the blue divider. */
.rc-surface-blue .gold-line::after,
.rc-surface-blue-soft .gold-line::after,
.rc-surface-green .gold-line::after,
.rc-surface-green-soft .gold-line::after {
  background: var(--rc-color-accent) !important;
}


/* ========================================================================
   STAGE 5B — LIGHT SURFACES + REUSABLE COMPONENTS
   ======================================================================== */
.rc-section { position: relative; }

.rc-surface-blue,
.rc-surface-blue-soft,
.rc-surface-green,
.rc-surface-green-soft,
.rc-surface-subtle {
  color: var(--rc-color-text-body);
}

.rc-surface-blue h1, .rc-surface-blue h2, .rc-surface-blue h3,
.rc-surface-blue h4, .rc-surface-blue h5, .rc-surface-blue h6,
.rc-surface-blue-soft h1, .rc-surface-blue-soft h2, .rc-surface-blue-soft h3,
.rc-surface-blue-soft h4, .rc-surface-blue-soft h5, .rc-surface-blue-soft h6,
.rc-surface-green h1, .rc-surface-green h2, .rc-surface-green h3,
.rc-surface-green h4, .rc-surface-green h5, .rc-surface-green h6,
.rc-surface-green-soft h1, .rc-surface-green-soft h2, .rc-surface-green-soft h3,
.rc-surface-green-soft h4, .rc-surface-green-soft h5, .rc-surface-green-soft h6,
.rc-surface-subtle h1, .rc-surface-subtle h2, .rc-surface-subtle h3,
.rc-surface-subtle h4, .rc-surface-subtle h5, .rc-surface-subtle h6 {
  color: var(--rc-color-primary);
}

.rc-surface-blue p, .rc-surface-blue li,
.rc-surface-blue-soft p, .rc-surface-blue-soft li,
.rc-surface-green p, .rc-surface-green li,
.rc-surface-green-soft p, .rc-surface-green-soft li,
.rc-surface-subtle p, .rc-surface-subtle li {
  color: var(--rc-color-text-body);
}

.rc-card {
  background: var(--rc-color-surface-page);
  border: 1px solid var(--rc-color-border-default);
  border-radius: var(--rc-radius-lg);
  box-shadow: var(--rc-shadow-sm);
  color: var(--rc-color-text-body);
  transition: border-color var(--rc-duration-base) var(--rc-ease-standard),
              box-shadow var(--rc-duration-base) var(--rc-ease-standard),
              transform var(--rc-duration-base) var(--rc-ease-standard);
}
.rc-card:hover {
  border-color: var(--rc-color-border-strong);
  box-shadow: var(--rc-shadow-md);
  transform: translateY(-2px);
}
.rc-card h1, .rc-card h2, .rc-card h3, .rc-card h4, .rc-card h5, .rc-card h6 {
  color: var(--rc-color-primary);
}
.rc-card p, .rc-card li {
  color: var(--rc-color-text-body);
}

/* Light section grids stay subtle rather than using dark-theme glow. */
.rc-surface-blue .hero-grid,
.rc-surface-blue-soft .hero-grid,
.rc-surface-green .hero-grid,
.rc-surface-green-soft .hero-grid {
  opacity: .45 !important;
  background-image:
    linear-gradient(to right, rgba(16,115,182,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(16,115,182,.035) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
}

/* Semantic section divider. */
.rc-divider {
  width: 3rem;
  height: 2px;
  background: var(--rc-color-primary);
  position: relative;
}
.rc-divider::after {
  content: "";
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--rc-color-accent);
  position: absolute;
  right: -0.75rem;
  top: 50%;
  transform: translateY(-50%);
}

/* A clear page-section header vocabulary. */
.rc-section-header { max-width: 48rem; }
.rc-section-header--center { margin-inline: auto; text-align: center; }
.rc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .6875rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rc-color-primary);
}
.rc-eyebrow::before {
  content: "";
  width: 1.5rem;
  height: 2px;
  background: var(--rc-color-accent);
}


/* ========================================================================
   STAGE 5C — SEMANTIC CONTROLS, FORMS & BORDERS
   ------------------------------------------------------------------------
   Use these classes for reusable interactive elements. Brand values live
   only in tokens above, so a future rebrand does not require HTML rewrites.
   ======================================================================== */


/* ---------- Semantic buttons ---------- */
.rc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: var(--rc-button-height-md);
  padding: .75rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--rc-radius-md);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--rc-duration-base) var(--rc-ease-standard),
    border-color var(--rc-duration-base) var(--rc-ease-standard),
    color var(--rc-duration-base) var(--rc-ease-standard),
    box-shadow var(--rc-duration-base) var(--rc-ease-standard),
    transform var(--rc-duration-base) var(--rc-ease-standard);
}

.rc-button:hover { transform: translateY(-1px); }
.rc-button:active { transform: translateY(0); }
.rc-button:focus-visible {
  outline: 3px solid var(--rc-color-focus-ring);
  outline-offset: 3px;
}

.rc-button-sm {
  min-height: var(--rc-button-height-sm);
  padding: .625rem 1rem;
  font-size: .8125rem;
}
.rc-button-lg {
  min-height: var(--rc-button-height-lg);
  padding: .875rem 1.5rem;
}

.rc-button-primary {
  background: var(--rc-color-primary);
  border-color: var(--rc-color-primary);
  color: var(--rc-color-text-on-brand);
  box-shadow: var(--rc-shadow-sm);
}
.rc-button-primary:hover {
  background: var(--rc-color-primary-hover);
  border-color: var(--rc-color-primary-hover);
  color: var(--rc-color-text-on-brand);
  box-shadow: var(--rc-shadow-md);
}

.rc-button-secondary {
  background: transparent;
  border-color: var(--rc-color-primary);
  color: var(--rc-color-primary);
}
.rc-button-secondary:hover {
  background: var(--rc-color-primary);
  border-color: var(--rc-color-primary);
  color: var(--rc-color-text-on-brand);
  box-shadow: var(--rc-shadow-sm);
}

.rc-button-accent {
  background: var(--rc-color-accent);
  border-color: var(--rc-color-accent);
  color: var(--rc-color-text-on-accent);
  box-shadow: var(--rc-shadow-sm);
}
.rc-button-accent:hover {
  background: var(--rc-color-accent-hover);
  border-color: var(--rc-color-accent-hover);
  color: var(--rc-color-text-on-brand);
  box-shadow: var(--rc-shadow-md);
}

/* Buttons intended for a deliberately dark surface. */
.rc-button-on-dark {
  background: transparent;
  border-color: rgba(255,255,255,.58);
  color: #FFFFFF;
}
.rc-button-on-dark:hover {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: var(--rc-color-primary-dark);
}

/* ---------- Semantic forms ---------- */
.rc-form-label {
  display: block;
  margin-bottom: .5rem;
  color: var(--rc-color-text-heading);
  font-size: .875rem;
  font-weight: 600;
}

.rc-input,
.rc-select,
.rc-textarea {
  width: 100%;
  border: 1px solid var(--rc-color-input-border);
  border-radius: var(--rc-radius-md);
  background: var(--rc-color-input-background);
  color: var(--rc-color-text-heading);
  box-shadow: none;
  transition:
    border-color var(--rc-duration-base) var(--rc-ease-standard),
    box-shadow var(--rc-duration-base) var(--rc-ease-standard);
}

.rc-input,
.rc-select {
  min-height: 2.875rem;
  padding: .75rem .875rem;
}
.rc-textarea {
  min-height: 8rem;
  padding: .875rem;
  resize: vertical;
}

.rc-input::placeholder,
.rc-textarea::placeholder {
  color: var(--rc-color-input-placeholder);
}

.rc-input:hover,
.rc-select:hover,
.rc-textarea:hover {
  border-color: var(--rc-color-input-border-hover);
}

.rc-input:focus,
.rc-select:focus,
.rc-textarea:focus {
  border-color: var(--rc-color-input-border-focus);
  outline: none;
  box-shadow: 0 0 0 3px var(--rc-color-focus-ring);
}

/* ---------- Semantic borders / separators ---------- */
.rc-border-top { border-top: 1px solid var(--rc-color-border-default) !important; }
.rc-border-bottom { border-bottom: 1px solid var(--rc-color-border-default) !important; }
.rc-border-left { border-left: 1px solid var(--rc-color-border-default) !important; }
.rc-border-right { border-right: 1px solid var(--rc-color-border-default) !important; }

.rc-divider--strong {
  width: 3rem;
  height: 2px;
  background: var(--rc-color-primary);
  position: relative;
}
.rc-divider--strong::after {
  content: "";
  position: absolute;
  right: -.75rem;
  top: 50%;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--rc-color-accent);
  transform: translateY(-50%);
}

/* ---------- Token bridges for the original theme ----------
   These preserve existing HTML behavior while moving the styling under
   the semantic RadChem system. */
.btn-gold {
  background: var(--rc-color-accent) !important;
  border-color: var(--rc-color-accent) !important;
  color: var(--rc-color-text-on-accent) !important;
  box-shadow: var(--rc-shadow-sm);
}
.btn-gold:hover {
  background: var(--rc-color-accent-hover) !important;
  border-color: var(--rc-color-accent-hover) !important;
  color: var(--rc-color-text-on-brand) !important;
  box-shadow: var(--rc-shadow-md);
}
.btn-outline-navy {
  background: transparent !important;
  border-color: var(--rc-color-primary) !important;
  color: var(--rc-color-primary) !important;
}
.btn-outline-navy:hover {
  background: var(--rc-color-primary) !important;
  border-color: var(--rc-color-primary) !important;
  color: var(--rc-color-text-on-brand) !important;
}

/* On intentionally dark surfaces, preserve readable white controls. */
[data-rc-surface="dark"] .btn-outline-white,
.rc-surface-dark .btn-outline-white,
.rc-surface-brand .btn-outline-white {
  color: var(--rc-color-text-on-primary) !important;
  border-color: rgba(255,255,255,.65) !important;
}
[data-rc-surface="dark"] .btn-outline-white:hover,
.rc-surface-dark .btn-outline-white:hover,
.rc-surface-brand .btn-outline-white:hover {
  background: #FFFFFF !important;
  border-color: var(--rc-color-text-on-primary) !important;
  color: var(--rc-color-primary-dark) !important;
}


/* ========================================================================
   STAGE 5D — LIGHT SECTION & CTA SYSTEM
   ------------------------------------------------------------------------
   Dark legacy promotional sections are converted to light RadChem surfaces.
   Use semantic section classes instead of literal background/text colors.
   ======================================================================== */

.rc-cta-section {
  color: var(--rc-color-text-body);
}

.rc-cta-section .rc-text-primary,
.rc-cta-section h1,
.rc-cta-section h2,
.rc-cta-section h3,
.rc-cta-section h4,
.rc-cta-section h5,
.rc-cta-section h6 {
  color: var(--rc-color-primary) !important;
}

.rc-cta-section .rc-text-body,
.rc-cta-section p,
.rc-cta-section .text-white\/25,
.rc-cta-section .text-white\/40,
.rc-cta-section .text-white\/50,
.rc-cta-section .text-white\/55 {
  color: var(--rc-color-text-body) !important;
}

.rc-cta-section .rc-eyebrow,
.rc-cta-section .section-label {
  color: var(--rc-color-primary) !important;
}

.rc-section-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .8;
  background-image:
    linear-gradient(to right, rgba(16,115,182,.032) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(16,115,182,.032) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}

/* Keep intentional dark surfaces readable. */
.rc-surface-dark,
.rc-surface-brand {
  color: var(--rc-color-text-on-brand);
}

.rc-surface-dark h1,
.rc-surface-dark h2,
.rc-surface-dark h3,
.rc-surface-dark h4,
.rc-surface-brand h1,
.rc-surface-brand h2,
.rc-surface-brand h3,
.rc-surface-brand h4 {
  color: var(--rc-color-text-on-brand) !important;
}


/* =========================================================
   RADCHEM GLOBAL SITE SHELL
   Stage 5E — Navigation, footer and breadcrumbs
   ========================================================= */


/* ---------- Header ---------- */
.rc-site-header {
  background-color: var(--rc-nav-surface) !important;
  background-image: none !important;
  color: var(--rc-nav-text);
  box-shadow: 0 1px 0 rgba(23, 33, 43, 0.06);
}

.rc-site-header > div:first-child {
  height: 3px;
  background: linear-gradient(90deg, var(--rc-color-primary) 0%, var(--rc-color-accent) 100%) !important;
}

.rc-navbar {
  min-height: var(--rc-header-height);
}

.rc-site-header .nav-link {
  color: var(--rc-nav-text) !important;
  transition: color .2s ease, background-color .2s ease, opacity .2s ease;
}

.rc-site-header .nav-link:hover,
.rc-site-header .nav-link:focus-visible {
  color: var(--rc-color-primary) !important;
}

.rc-site-header .nav-link::after {
  background: var(--rc-color-accent) !important;
}

.rc-site-header .rc-brand-mark,
.rc-site-header .w-8.h-8 {
  background: var(--rc-color-primary) !important;
}

.rc-site-header .rc-brand-mark span,
.rc-site-header .w-8.h-8 span {
  color: var(--rc-color-text-on-primary) !important;
}

.rc-site-header .rc-brand-name,
.rc-site-header .text-white.font-bold {
  color: var(--rc-color-primary) !important;
}

.rc-site-header .dropdown-panel {
  border: 1px solid var(--rc-nav-border) !important;
  box-shadow: 0 16px 40px rgba(7, 59, 92, .12) !important;
}

.rc-site-header .dropdown-panel::before {
  background: linear-gradient(90deg, var(--rc-color-primary), var(--rc-color-accent)) !important;
}

.rc-site-header .dropdown-item {
  color: var(--rc-nav-text) !important;
}

.rc-site-header .dropdown-item:hover,
.rc-site-header .dropdown-item:focus-visible {
  background: var(--rc-nav-hover-surface) !important;
  color: var(--rc-color-primary) !important;
}

.rc-site-header .dropdown-item .material-symbols-outlined {
  color: var(--rc-color-accent) !important;
}

.rc-site-header .dark-mode-btn,
.rc-site-header .rc-dark-mode-btn {
  color: var(--rc-color-primary) !important;
  background: var(--rc-nav-hover-surface) !important;
  border: 1px solid var(--rc-nav-border) !important;
}

.rc-site-header .dark-mode-btn:hover {
  color: var(--rc-color-primary) !important;
  background: var(--rc-color-surface-blue, #E8F4FD) !important;
}

.rc-site-header .btn-gold {
  background: var(--rc-color-primary) !important;
  color: var(--rc-color-text-on-primary) !important;
  border-color: var(--rc-color-primary) !important;
}

.rc-site-header .btn-gold:hover {
  background: var(--rc-color-primary-hover) !important;
  border-color: var(--rc-color-primary-hover) !important;
}

.rc-site-header .lg\:hidden {
  color: var(--rc-color-primary) !important;
}

/* Mobile navigation inherits the light shell. */
.rc-site-header .lg\:hidden.bg-\[\#FFFFFF\],
.rc-site-header .lg\:hidden[class*="bg-["] {
  background-color: var(--rc-nav-surface) !important;
  background-image: none !important;
}

@media (max-width: 1023px) {
  .rc-site-header [x-show="mobileOpen"],
  .rc-site-header .lg\:hidden[class*="border-t"] {
    background-color: var(--rc-nav-surface) !important;
  background-image: none !important;
    border-top-color: var(--rc-nav-border) !important;
  }
  .rc-site-header [x-show="mobileOpen"] a,
  .rc-site-header [x-show="mobileOpen"] button {
    color: var(--rc-nav-text) !important;
    border-color: var(--rc-nav-border) !important;
  }
  .rc-site-header [x-show="mobileOpen"] a:hover,
  .rc-site-header [x-show="mobileOpen"] button:hover {
    color: var(--rc-color-primary) !important;
    background: var(--rc-nav-hover-surface) !important;
  }
  .rc-site-header [x-show="mobileOpen"] .material-symbols-outlined {
    color: var(--rc-color-primary) !important;
  }
}

/* ---------- Footer ---------- */
.rc-site-footer {
  background: var(--rc-footer-surface) !important;
  color: var(--rc-footer-text);
}

.rc-site-footer .footer-link {
  color: var(--rc-footer-muted) !important;
}

.rc-site-footer .footer-link:hover,
.rc-site-footer .footer-link:focus-visible {
  color: var(--rc-color-accent) !important;
}

.rc-site-footer h5,
.rc-site-footer .text-\[\var(--rc-color-accent)\] {
  color: var(--rc-color-accent) !important;
}

.rc-site-footer .w-10.h-10 {
  background: var(--rc-color-primary) !important;
}

.rc-site-footer .w-10.h-10 span,
.rc-site-footer .w-10.h-10 svg {
  color: var(--rc-color-text-on-primary) !important;
  fill: currentColor;
}

.rc-site-footer a[aria-label] {
  border-color: rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.06) !important;
}

.rc-site-footer a[aria-label]:hover {
  background: var(--rc-color-accent) !important;
}

/* ---------- Breadcrumb ---------- */
.rc-breadcrumb {
  color: var(--rc-color-text-muted, #72808D) !important;
}

.rc-breadcrumb a {
  color: var(--rc-color-text-body, #526170) !important;
}

.rc-breadcrumb a:hover,
.rc-breadcrumb a:focus-visible {
  color: var(--rc-color-primary) !important;
}

.rc-breadcrumb .rc-text-accent,
.rc-breadcrumb span:last-child {
  color: var(--rc-color-primary) !important;
}

/* Keep light page heroes readable. */
.rc-page-hero .rc-breadcrumb,
.rc-page-hero .rc-breadcrumb a,
.rc-page-hero .rc-breadcrumb span {
  color: var(--rc-color-text-muted, #72808D) !important;
}

.rc-page-hero .rc-breadcrumb a:hover,
.rc-page-hero .rc-breadcrumb .rc-text-accent {
  color: var(--rc-color-primary) !important;
}

/* Prevent old dark utility colors from leaking into semantic shell components. */
.rc-site-header [class*="text-white"],
.rc-site-header [class*="text-white/"] {
  color: var(--rc-nav-text) !important;
}

.rc-site-header [class*="border-white"] {
  border-color: var(--rc-nav-border) !important;
}

/* ========================================================================
   STAGE 5F — PAGE BLOCK SYSTEM
   Reusable page-level blocks for testimonials, statistics, filters,
   featured content and other recurring content patterns.
   ======================================================================== */


/* ---------- Common content cards ---------- */
.rc-card {
  background: var(--rc-color-surface-card);
  border: 1px solid var(--rc-color-border-default);
  border-radius: var(--rc-radius-lg);
  box-shadow: var(--rc-shadow-sm);
  transition: border-color var(--rc-duration-base) var(--rc-ease-standard),
              box-shadow var(--rc-duration-base) var(--rc-ease-standard),
              transform var(--rc-duration-base) var(--rc-ease-standard),
              background-color var(--rc-duration-base) var(--rc-ease-standard);
}

.rc-card:hover {
  background: var(--rc-color-surface-card-hover);
  border-color: var(--rc-color-border-strong);
  box-shadow: var(--rc-shadow-md);
  transform: translateY(-2px);
}

/* ---------- Testimonial cards ---------- */
.rc-testimonial-card {
  background: var(--rc-color-surface-card);
  border: 1px solid var(--rc-color-border-default);
  box-shadow: var(--rc-shadow-sm);
  transition: border-color var(--rc-duration-base) var(--rc-ease-standard),
              box-shadow var(--rc-duration-base) var(--rc-ease-standard),
              transform var(--rc-duration-base) var(--rc-ease-standard);
}

.rc-testimonial-card:hover {
  border-color: var(--rc-color-border-strong);
  box-shadow: var(--rc-shadow-md);
  transform: translateY(-2px);
}

/* ---------- Stat cards ---------- */
.rc-stat-card {
  background: var(--rc-color-surface-blue-soft);
  border: 1px solid var(--rc-color-border-default);
  color: var(--rc-color-text-heading);
}

.rc-stat-card .rc-stat-value,
.rc-stat-card strong {
  color: var(--rc-color-primary);
}

/* ---------- Filter / segmented controls ---------- */
.rc-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.rc-filter-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.625rem 1rem;
  border: 1px solid var(--rc-color-border-default);
  border-radius: var(--rc-radius-md);
  background: var(--rc-color-surface-page);
  color: var(--rc-color-text-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: background-color var(--rc-duration-fast) var(--rc-ease-standard),
              border-color var(--rc-duration-fast) var(--rc-ease-standard),
              color var(--rc-duration-fast) var(--rc-ease-standard),
              box-shadow var(--rc-duration-fast) var(--rc-ease-standard);
}

.rc-filter-button:hover {
  border-color: var(--rc-color-border-blue-strong);
  color: var(--rc-color-primary);
  background: var(--rc-color-surface-blue-soft);
}

.rc-filter-button.is-active {
  border-color: var(--rc-color-primary);
  background: var(--rc-color-primary);
  color: var(--rc-color-text-on-brand);
}

/* ---------- Featured visual panel ---------- */
.rc-feature-visual {
  background: var(--rc-color-primary);
  color: var(--rc-color-text-on-brand);
  position: relative;
  overflow: hidden;
}

.rc-feature-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 92%);
}

.rc-feature-visual > * {
  position: relative;
  z-index: 1;
}

/* ---------- Accent rule ---------- */
.rc-accent-rule {
  height: 0.25rem;
  background: linear-gradient(90deg, var(--rc-color-primary), var(--rc-color-accent));
  border-radius: var(--rc-radius-pill);
}

/* ---------- Reading blocks ---------- */
.rc-content-block {
  color: var(--rc-color-text-body);
}

.rc-content-block h2,
.rc-content-block h3,
.rc-content-block h4 {
  color: var(--rc-color-primary);
}

.rc-content-block p,
.rc-content-block li {
  color: var(--rc-color-text-body);
}

/* ---------- Light section contract ---------- */
.rc-surface-page,
.rc-surface-subtle,
.rc-surface-blue,
.rc-surface-blue-soft,
.rc-surface-green,
.rc-surface-green-soft {
  color: var(--rc-color-text-body);
}

.rc-surface-page h1,
.rc-surface-page h2,
.rc-surface-page h3,
.rc-surface-subtle h1,
.rc-surface-subtle h2,
.rc-surface-subtle h3,
.rc-surface-blue h1,
.rc-surface-blue h2,
.rc-surface-blue h3,
.rc-surface-blue-soft h1,
.rc-surface-blue-soft h2,
.rc-surface-blue-soft h3,
.rc-surface-green h1,
.rc-surface-green h2,
.rc-surface-green h3,
.rc-surface-green-soft h1,
.rc-surface-green-soft h2,
.rc-surface-green-soft h3 {
  color: var(--rc-color-primary);
}

/* Intentionally dark sections can opt into this contract. */
.rc-surface-dark {
  background: var(--rc-color-primary-dark);
  color: var(--rc-color-text-on-brand);
}

.rc-surface-dark h1,
.rc-surface-dark h2,
.rc-surface-dark h3,
.rc-surface-dark h4 {
  color: var(--rc-color-text-on-brand);
}

.rc-surface-dark p {
  color: rgba(255,255,255,.78);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .rc-card,
  .rc-testimonial-card,
  .rc-filter-button {
    transition: none;
  }
}




/* Dropdown interaction reliability: keep a continuous pointer target between trigger and panel.
   The bridge belongs to the trigger <li>, not the panel, so it is not clipped by panel overflow or x-show. */
.rc-site-header .rc-dropdown-trigger::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
  background: transparent;
  pointer-events: auto;
}

.rc-site-header .rc-dropdown-trigger > .dropdown-panel {
  top: calc(100% + 10px);
  margin-top: 0;
}


/* ========================================================================
   STAGE 5H — LEGACY CLEANUP + PAGE CONSISTENCY
   ------------------------------------------------------------------------
   These rules provide migration bridges for the original theme while the
   HTML templates are normalized. Use semantic rc-* classes in new markup.
   ======================================================================== */

/* Semantic page/media surfaces */
.rc-media-placeholder {
  position: relative;
  overflow: hidden;
  background: var(--rc-color-surface-blue);
  color: var(--rc-color-text-body);
}

.rc-media-placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    linear-gradient(to right, rgba(16,115,182,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(16,115,182,.04) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
}

.rc-feature-visual {
  background: var(--rc-color-surface-blue);
  color: var(--rc-color-text-body);
  border-color: var(--rc-color-border-default);
}

.rc-feature-visual h1,
.rc-feature-visual h2,
.rc-feature-visual h3,
.rc-feature-visual h4,
.rc-feature-visual h5,
.rc-feature-visual h6 {
  color: var(--rc-color-primary) !important;
}

.rc-feature-visual p,
.rc-feature-visual span,
.rc-feature-visual li {
  color: var(--rc-color-text-body);
}

.rc-feature-visual .rc-text-accent {
  color: var(--rc-color-accent) !important;
}

/* Legacy color bridges */
.rc-text-on-accent {
  color: var(--rc-color-text-on-accent) !important;
}
.rc-text-primary-dark {
  color: var(--rc-color-primary-dark) !important;
}
.rc-border-primary {
  border-color: var(--rc-color-primary) !important;
}
.rc-border-accent-soft {
  border-color: color-mix(in srgb, var(--rc-color-accent) 35%, transparent) !important;
}
.rc-border-accent-strong {
  border-color: var(--rc-color-accent) !important;
}
.hover-border-primary:hover {
  border-color: var(--rc-color-primary) !important;
}
.focus-border-accent:focus {
  border-color: var(--rc-color-accent) !important;
  box-shadow: 0 0 0 3px var(--rc-color-focus-ring-accent) !important;
  outline: none !important;
}
.rc-placeholder-muted::placeholder {
  color: var(--rc-color-input-placeholder) !important;
}

/* Legacy gold-line is now a RadChem blue rule with a green marker. */
.gold-line {
  background: var(--rc-color-primary) !important;
}
.gold-line::after {
  background: var(--rc-color-accent) !important;
}

/* Never allow translucent white card primitives to become invisible on
   a light RadChem surface. */
.rc-surface-blue [class*="bg-white/"],
.rc-surface-blue-soft [class*="bg-white/"],
.rc-surface-green [class*="bg-white/"],
.rc-surface-green-soft [class*="bg-white/"],
.rc-page-hero [class*="bg-white/"] {
  background: rgba(255,255,255,.92) !important;
  border-color: var(--rc-color-border-default) !important;
}

/* White text is valid on deliberately dark surfaces only. */
.rc-surface-dark .text-white,
.rc-surface-dark [class*="text-white/"],
.rc-surface-brand .text-white,
.rc-surface-brand [class*="text-white/"],
.rc-footer .text-white,
.rc-footer [class*="text-white/"] {
  color: var(--rc-color-text-on-brand) !important;
}

/* Dark legacy sections that are explicitly retained should advertise their
   semantics rather than relying on literal utility colors. */
.rc-surface-dark,
.rc-surface-brand {
  background: var(--rc-color-primary-dark) !important;
}

/* Light page hero: no decorative dark glow. */
.rc-page-hero {
  position: relative;
  background: var(--rc-color-surface-blue) !important;
  color: var(--rc-color-text-body) !important;
}
.rc-page-hero::before,
.rc-page-hero::after {
  background: none !important;
  box-shadow: none !important;
}
.rc-page-hero > .container {
  position: relative;
  z-index: 2;
}
.rc-page-hero > .absolute.inset-0.pointer-events-none {
  background: transparent !important;
}

/* Light filters/pagination remain brand-blue when active. */
.rc-filter-active {
  background: var(--rc-color-primary) !important;
  color: var(--rc-color-text-on-brand) !important;
  border-color: var(--rc-color-primary) !important;
}


/* ---------- Accent rules / brand separators ---------- */
.rc-accent-rule {
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--rc-color-accent), transparent);
}
.rc-accent-rule--blue {
  background: linear-gradient(90deg, transparent, var(--rc-color-primary), transparent);
}

/* ========================================================================
   Stage 5H.1 — Light Footer
   Footer is a light surface in the RadChem light theme. White text should
   not be used here; keep strong contrast and reserve dark surfaces for
   explicitly branded CTA/utility blocks.
   ======================================================================== */
:root {
  --rc-footer-surface: var(--rc-color-surface-blue-soft);
  --rc-footer-text: var(--rc-color-text-heading);
  --rc-footer-muted: var(--rc-color-text-body);
  --rc-footer-border: var(--rc-color-border-default);
}

.rc-site-footer,
.rc-footer {
  background: var(--rc-footer-surface) !important;
  color: var(--rc-footer-text) !important;
}

.rc-site-footer .text-white,
.rc-site-footer [class*="text-white/"],
.rc-footer .text-white,
.rc-footer [class*="text-white/"] {
  color: var(--rc-footer-text) !important;
}

.rc-site-footer .footer-link,
.rc-footer .footer-link {
  color: var(--rc-footer-muted) !important;
}

.rc-site-footer .footer-link:hover,
.rc-site-footer .footer-link:focus-visible,
.rc-footer .footer-link:hover,
.rc-footer .footer-link:focus-visible {
  color: var(--rc-color-primary) !important;
}

.rc-site-footer h5,
.rc-footer h5 {
  color: var(--rc-color-primary) !important;
}

.rc-site-footer a[aria-label],
.rc-footer a[aria-label] {
  color: var(--rc-color-primary) !important;
  border-color: var(--rc-footer-border) !important;
  background: var(--rc-color-surface-page) !important;
}

.rc-site-footer a[aria-label]:hover,
.rc-footer a[aria-label]:hover {
  color: var(--rc-color-text-on-accent) !important;
  background: var(--rc-color-accent) !important;
  border-color: var(--rc-color-accent) !important;
}

.rc-site-footer .border-t,
.rc-footer .border-t {
  border-color: var(--rc-footer-border) !important;
}



/* Reusable informational callout. */
.rc-callout {
  color: var(--rc-color-text-body);
  border-style: solid;
  border-width: 1px;
}