/*
 * phase-brand-04-components.css
 * ============================================================
 * COMPONENT SPEC V1.0 — Single source of truth
 * Buttons, cards, chips, icons, teal rule device
 * ============================================================
 */

/* ============================================================
   TEAL RULE DEVICE — h1 only
   ============================================================ */

.site-main h1,
.hero__copy h1,
.title-block__title {
  display: inline-block;
  padding-bottom: 0.85rem;
  position: relative;
}

.site-main h1::after,
.hero__copy h1::after,
.title-block--hero .title-block__title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 48px;
  height: 3px;
  background: #4CB7AA;
  border-radius: 2px;
}

/* ============================================================
   FIRST WORD TEAL — h1 and h2
   Applied via .tw (teal-word) span wrapper in PHP templates.
   Fallback: first-letter pseudo on h1/h2 if span not present.
   ============================================================ */

.tw {
  color: #4CB7AA !important;
}

h1 .tw,
h2 .tw {
  color: #4CB7AA !important;
}

/* ============================================================
   BUTTONS — full spec
   ============================================================ */

/* Reset all buttons to base */
.telstar-btn,
.site-main a[class*="btn"],
.site-main button[class*="btn"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.8125rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border-radius: 4px !important;
  padding: 0.75rem 1.5rem !important;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
  white-space: nowrap;
}

/* PRIMARY — teal ghost → solid teal on hover */
.telstar-btn--primary {
  background: transparent !important;
  border: 1px solid #4CB7AA !important;
  color: #4CB7AA !important;
}

.telstar-btn--primary:hover,
.telstar-btn--primary:focus-visible {
  background: #4CB7AA !important;
  color: #ffffff !important;
}

/* SECONDARY on light surface — slate ghost → teal text on hover */
.telstar-btn--secondary {
  background: transparent !important;
  border: 1px solid rgba(16, 24, 39, 0.20) !important;
  color: #101827 !important;
}

.telstar-btn--secondary:hover,
.telstar-btn--secondary:focus-visible {
  color: #4CB7AA !important;
  border-color: rgba(16, 24, 39, 0.20) !important;
  background: transparent !important;
}

/* SECONDARY on dark surface — white ghost → teal text on hover */
.hero--home .telstar-btn--secondary,
.hero--inner .telstar-btn--secondary,
[class*="--dark"] .telstar-btn--secondary,
.home-proof-strip .telstar-btn--secondary,
.footer-cta .telstar-btn--secondary,
[class*="cta-panel"] .telstar-btn--secondary,
[class*="forward-panel"] .telstar-btn--secondary,
.home-diagnostic-value__decision-panel .telstar-btn--secondary,
.home-diagnostic-spine .telstar-btn--secondary {
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: rgba(255, 255, 255, 0.80) !important;
}

.hero--home .telstar-btn--secondary:hover,
.hero--inner .telstar-btn--secondary:hover,
[class*="--dark"] .telstar-btn--secondary:hover,
.footer-cta .telstar-btn--secondary:hover,
[class*="cta-panel"] .telstar-btn--secondary:hover {
  color: #4CB7AA !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

/* PRIMARY on dark — same ghost teal behaviour */
.hero--home .telstar-btn--primary,
.hero--inner .telstar-btn--primary,
.footer-cta .telstar-btn--primary,
[class*="cta-panel"] .telstar-btn--primary,
[class*="forward-panel"] .telstar-btn--primary {
  background: transparent !important;
  border-color: #4CB7AA !important;
  color: #4CB7AA !important;
}

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

/* ============================================================
   CARDS — universal spec
   ============================================================ */

.telstar-card,
.home-symptom-card,
.home-diagnostic-value-card,
.home-software-step,
.home-disposition-chip,
.how-work-lens-card,
.how-work-interview-cards > article,
.how-work-software-points article,
.what-help-card,
.what-output-card,
.what-stage-detail-card:not(.what-stage-detail-card--featured),
.about-method-cards article,
.about-founder-panel__proof article,
.about-thinking-grid a,
.about-experience-card,
.wwu-fit-signal,
.wwu-sprint-columns article,
.wwu-experience-card,
.launch-insight-card,
.insights-feature-card,
.series-article-card {
  background: #ffffff !important;
  border: 1px solid rgba(16, 24, 39, 0.09) !important;
  border-top: 1px solid rgba(16, 24, 39, 0.09) !important;
  border-left: none !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  transition: border-top-color 0.15s ease !important;
}

.telstar-card:hover,
.home-symptom-card:hover,
.home-diagnostic-value-card:hover,
.home-software-step:hover,
.how-work-lens-card:hover,
.what-help-card:hover,
.wwu-fit-signal:hover,
.launch-insight-card:hover,
.insights-feature-card:hover,
.series-article-card:hover {
  border-top-color: #4CB7AA !important;
  border-top-width: 2px !important;
}

/* Dark card variant */
.telstar-card--dark,
.what-stage-detail-card--featured,
.what-output-card--primary,
.what-diagnostic-sprint__panel,
.home-diagnostic-value__decision-panel,
.home-diagnostic-spine,
.wwu-next-panel,
.about-experience-card--navy {
  background: #0F1626 !important;
  border: none !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

/* ============================================================
   ICON BADGES — standardised
   ============================================================ */

.telstar-icon-badge {
  width: 2.5rem !important;
  height: 2.5rem !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* Teal pale — light backgrounds */
.telstar-icon-badge:not(.telstar-icon-badge--dark) {
  background: rgba(76, 183, 170, 0.12) !important;
  border: 1px solid rgba(76, 183, 170, 0.20) !important;
  color: #4CB7AA !important;
  box-shadow: none !important;
}

/* Navy filled — dark backgrounds */
.telstar-icon-badge--dark,
.hero--inner .telstar-icon-badge,
.telstar-card--dark .telstar-icon-badge,
[class*="--dark"] .telstar-icon-badge {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #4CB7AA !important;
}

/* ============================================================
   CHIPS — standardised
   ============================================================ */

/* Disposition chips */
.home-disposition-chip,
[class*="disposition-chip"],
.chip--disposition {
  background: rgba(76, 183, 170, 0.12) !important;
  border: 1px solid rgba(76, 183, 170, 0.30) !important;
  border-top: 1px solid rgba(76, 183, 170, 0.30) !important;
  border-left: none !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

.home-disposition-chip__label,
[class*="disposition-chip__label"] {
  color: #4CB7AA !important;
  font-size: 0.6875rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.home-disposition-chip__desc,
[class*="disposition-chip__desc"] {
  color: #5A616B !important;
  font-size: 0.8125rem !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Method chips */
.method-chip,
[class*="method-chip"] {
  background: transparent !important;
  border: 1px solid rgba(16, 24, 39, 0.14) !important;
  color: #5A616B !important;
  border-radius: 4px !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

/* Eyebrow chips — typographic only */
.title-block__eyebrow,
[class*="eyebrow"],
[class*="section-label"],
[class*="overline"] {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  color: #5A616B !important;
  font-size: 0.6875rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

/* Eyebrows on dark */
.hero--home .title-block__eyebrow,
.hero--inner .title-block__eyebrow,
[class*="--dark"] [class*="eyebrow"],
.home-diagnostic-spine [class*="eyebrow"],
.footer-cta [class*="eyebrow"] {
  color: #4CB7AA !important;
}

/* Force remove left borders from all cards — override homepage.css !important rules */
.home-symptom-card,
.home-diagnostic-value-card,
.home-software-step,
.how-work-lens-card,
.how-work-interview-cards > article,
.how-work-software-points article,
.what-help-card,
.wwu-fit-signal {
  border-left: 1px solid rgba(16, 24, 39, 0.09) !important;
  border-top: 1px solid rgba(16, 24, 39, 0.09) !important;
}

.home-symptom-card:hover,
.home-diagnostic-value-card:hover,
.how-work-lens-card:hover,
.what-help-card:hover,
.wwu-fit-signal:hover {
  border-top: 2px solid #4CB7AA !important;
  border-left: 1px solid rgba(16, 24, 39, 0.09) !important;
}

/* Fix body copy link colour bleed — stronger selector */
body .site-main p a:not(.telstar-btn):not([class*="btn"]),
body .site-main li a:not(.telstar-btn):not([class*="btn"]),
body .site-main td a:not(.telstar-btn):not([class*="btn"]) {
  color: #5A616B !important;
  text-decoration: none !important;
  border-bottom: none !important;
}

/* Insights article read buttons — match ghost spec */
.launch-insight-card__links a:first-child {
  background: transparent !important;
  border: 1px solid #4CB7AA !important;
  color: #4CB7AA !important;
  border-radius: 4px !important;
}

.launch-insight-card__links a:first-child:hover {
  background: #4CB7AA !important;
  color: #ffffff !important;
}