/**
 * Surface text colours.
 *
 * Every dark surface declares one readable text colour, --surface-text, and the
 * text inside it uses that instead of a fixed colour. The --on-* values are
 * computed per site from theme_config by lib/theme/contrast.ts (white or the
 * theme heading colour, whichever reads better on that surface's own background
 * colours), so a site with a light brand colour gets dark text automatically.
 *
 * Loaded after the other lead-* sheets so these beat the global typography rules
 * ("h1, h2 are --ink"). Component rules with their own background (cards,
 * buttons, tab panels) keep their own colours.
 * — updated at: 2026-10-20 — jarvis (#510)
 */

/* Which colour each dark surface's text uses. */
.lead-page-banner-fallback,
.lead-band-dark,
.lead-section-cta,
.lead-cta-banner-dark {
  --surface-text: var(--on-brand-band);
}

.lead-sarsa-handpicked-area {
  --surface-text: var(--on-primary-dark);
}

.lead-cta-wrap {
  --surface-text: var(--on-cta);
}

/* Plain headings and text on those surfaces. */
:where(.lead-page-banner-fallback, .lead-band-dark, .lead-section-cta, .lead-cta-banner-dark, .lead-cta-wrap) :is(h1, h2, h3, h4, h5, h6) {
  color: var(--surface-text);
}

/* Page banner without a hero photo. */
.lead-page-banner-fallback h1 {
  color: var(--surface-text);
}

.lead-page-banner-fallback .lead-banner-desc {
  color: var(--surface-text);
}

.lead-page-banner-fallback .lead-banner-badge {
  color: var(--surface-text);
  background: color-mix(in srgb, var(--surface-text) 8%, transparent);
  border-color: color-mix(in srgb, var(--surface-text) 25%, transparent);
}

/* Home call-to-action box: gradient ends adjusted per site so its text reads. */
.lead-cta-wrap {
  background: linear-gradient(135deg, var(--cta-gradient-start) 0, var(--cta-gradient-end) 100%);
}

.lead-cta-wrap .lead-cta-desc {
  color: var(--surface-text);
}

/* "Interactive" badge on tool cards: brand-to-accent gradient, adjusted per site. */
.lead-tool-card-badge-interactive {
  background: linear-gradient(135deg, var(--accent-gradient-start), var(--accent-gradient-end));
  color: var(--on-accent);
}

/* Brand-coloured links on light backgrounds. */
.lead-view-all-link,
.lead-view-all-link:hover {
  color: var(--primary-text);
}

/* Footer bottom bar: the site name took the brand colour, unreadable on the near-black bar. */
.copyright-wrap p span {
  color: inherit;
  font-weight: 600;
}

/* Business hours on the contact page: one day per line (#510 UI audit A14).
   — updated at: 2026-10-22 — jarvis */
.lead-contact-hours {
  white-space: pre-line;
}

/* Footer contact icons are dark SVGs on the dark footer (--bg-dark): draw them in the
   footer's light text tone so the phone icon is visible (#510 UI audit A14).
   — updated at: 2026-10-22 — jarvis */
.footer-section .contact-list img {
  filter: brightness(0) invert(1);
  opacity: 0.75;
}