/*
 * phase-brand-03-typography.css
 * Phase 3 — Typography and colour pass
 * Fixes link colour bleeding, eyebrow consistency,
 * body text colour, and conversion panel buttons.
 */

/* ============================================================
   LINK COLOUR — stop teal bleeding into body copy
   Only anchor tags that are explicitly CTAs should be teal.
   ============================================================ */

.site-main a:not(.telstar-btn):not([class*="btn"]):not([class*="cta"]):not(.site-nav__list a):not(.site-brand) {
  color: inherit !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(90, 97, 107, 0.25) !important;
}

.site-main a:not(.telstar-btn):not([class*="btn"]):not([class*="cta"]):hover {
  border-bottom-color: #4CB7AA !important;
}

/* Explicitly reset paragraph and list item link colours */
.site-main p a,
.site-main li a,
.site-main td a,
.site-main blockquote a,
.site-main article a:not(.telstar-btn) {
  color: inherit !important;
  text-decoration: none !important;
}

/* ============================================================
   BODY TEXT COLOUR — muted slate throughout light sections
   ============================================================ */

.site-main p,
.site-main li {
  color: #5A616B;
}

/* White on dark sections */
[class*="home-proof-strip"] p,
[class*="home-proof-strip"] li,
.home-diagnostic-value__approach p,
.home-diagnostic-value__avoid li,
.home-software-diagnostics p,
.footer-cta p {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* ============================================================
   EYEBROW LABELS — consistent treatment
   Slate on light, teal on dark
   ============================================================ */

.title-block__eyebrow,
[class*="eyebrow"],
[class*="section-label"],
[class*="overline"] {
  color: #5A616B !important;
  font-size: 0.6875rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

/* Teal eyebrows on dark backgrounds */
.hero--home .title-block__eyebrow,
.hero--inner .title-block__eyebrow,
[class*="dark"] [class*="eyebrow"],
[class*="proof-strip"] [class*="eyebrow"],
.home-diagnostic-spine [class*="eyebrow"] {
  color: #4CB7AA !important;
}

/* ============================================================
   CONVERSION PANEL BUTTONS — primary solid teal
   ============================================================ */

.footer-cta .telstar-btn--primary,
.home-software-diagnostics__cta-panel .telstar-btn--primary,
[class*="cta-panel"] .telstar-btn--primary,
[class*="forward-panel"] .telstar-btn--primary {
  background: #4CB7AA !important;
  border-color: #4CB7AA !important;
  color: #ffffff !important;
}

.footer-cta .telstar-btn--primary:hover,
.home-software-diagnostics__cta-panel .telstar-btn--primary:hover {
  background: #3aa598 !important;
  border-color: #3aa598 !important;
}

.footer-cta .telstar-btn--secondary,
.home-software-diagnostics__cta-panel .telstar-btn--secondary,
[class*="cta-panel"] .telstar-btn--secondary,
[class*="forward-panel"] .telstar-btn--secondary {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

/* ============================================================
   LETTER SPACING — reset body copy to normal
   ============================================================ */

.site-main p,
.site-main li,
.site-main td {
  letter-spacing: normal !important;
}

/* ============================================================
   HOW WE WORK HERO — tighten right panel background
   ============================================================ */

.how-work-hero .root-cause-panel--compact,
.how-work-section--first aside {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* ============================================================
   DARK BACKGROUND UNIFICATION
   All dark sections use the same #0F1626 — no gradients,
   no teal tints, no variations.
   ============================================================ */

.hero--home,
.hero--home.hero--image,
.hero--inner,
.how-work-hero,
.home-proof-strip,
.home-diagnostic-spine,
.home-diagnostic-value__decision-panel,
.home-software-diagnostics__cta-panel,
.footer-cta,
[class*="decision-panel"],
[class*="cta-panel"],
[class*="forward-panel"],
.site-footer {
  background: #0F1626 !important;
  background-image: none !important;
}

/* Hero specifically — keep the full-height behaviour but flat navy */
.hero--home.hero--image {
  min-height: clamp(520px, calc(100vh - 4.9rem), 720px) !important;
}

/* Proof strip — same navy, remove any lightness difference */
.home-proof-strip {
  background: #0F1626 !important;
}

/* Dark panels within light sections — navy, no gradient */
.home-diagnostic-value__decision-panel,
.home-diagnostic-spine {
  background: #0F1626 !important;
  border-radius: 6px !important;
}

/* Interview panel on How We Work — same navy */
.how-work-interview-panel {
  background: #0F1626 !important;
  background-image: none !important;
}

/* Symptoms vs causes grid — same navy */
.how-work-symptoms-grid {
  background: #0F1626 !important;
  background-image: none !important;
}

/* ============================================================
   HERO BACKGROUNDS — flat navy, no teal radial tint
   ============================================================ */

/* Override the --td-hero-background variable at root */
:root {
  --td-hero-background: #0F1626 !important;
}

/* Inner page heroes — flat navy */
.hero:not(.hero--home),
.article-hero,
.article-hero--editorial,
.archive-hero,
.archive-hero--editorial,
.hero--inner {
  background: #0F1626 !important;
}

/* Homepage hero media overlay — remove teal radial tint */
.hero--home.hero--image .hero-media::before {
  background: none !important;
}

/* Homepage hero background — flat navy */
.hero--home,
.hero--home.hero--image {
  background: #0F1626 !important;
}

/* Remove the grid texture overlay on hero — too busy */
.hero--home.hero--image .hero__grid,
.hero--home.hero--image .hero-media::after {
  display: none !important;
}