/* wing-warm.css — Warm theme LAYER for the credibility wing (Methods · About · Track Record · Vision · Lab)
   Load AFTER /styles.css. Overrides dark tokens + patches hardcoded properties.
   Warming a new page = one extra <link> tag. Nothing else changes.
   Palette is single-sourced: all warm hex values come from /warm-tokens.css.
   ================================================================ */

@import '/warm-tokens.css';

/* ===== WARM TOKEN OVERRIDES (mapped from /warm-tokens.css) ===== */
/* These re-declare every dark :root variable so the entire styles.css component
   library (step-section, pattern-card, compare-card, prose, etc.) inherits the
   warm palette automatically. Only hardcoded dark values need explicit rules below. */
:root {
  /* Backgrounds */
  --bg-deep:       var(--wt-bg-warm);   /* warm amber — alternating "deep" sections   */
  --bg-primary:    var(--wt-bg-cream);  /* warm cream — base sections                 */
  --bg-raised:     #FFFFFF;
  --bg-card:       #FFFFFF;
  --bg-card-hover: #F5EDE0;

  /* Text */
  --text-primary:   var(--wt-ink);
  --text-secondary: var(--wt-ink-2);
  --text-muted:     var(--wt-ink-3);

  /* Primary accent — warm teal (replaces cool blue) */
  --accent:             var(--wt-teal);
  --accent-light:       var(--wt-teal-light);
  --accent-dim:         var(--wt-teal-dim);
  --accent-glow:        var(--wt-teal-glow);
  --accent-glow-strong: var(--wt-teal-glow-s);

  /* Gold — deeper for legibility on cream */
  --gold:        var(--wt-gold);
  --gold-light:  var(--wt-gold-light);
  --gold-label:  var(--wt-gold-label);  /* darkened for AA on cream (callout labels) */
  --gold-glow:   var(--wt-gold-glow);

  /* Semantic */
  --green:      #2E7D52;
  --green-glow: rgba(46, 125, 82, 0.08);
  --rose:       #B5534F;
  --rose-glow:  rgba(181, 83, 79, 0.08);

  /* Borders — dark lines on light bg */
  --border:        var(--wt-border);
  --border-accent: var(--wt-border-teal);
}

/* ===== BODY ===== */
body {
  background: var(--bg-primary);
  color: var(--text-secondary);
}

/* Noise grain: keep the paper texture, lower opacity on light bg */
body::before { opacity: 0.015; }

/* ===== NAV — warm cream (hardcoded in styles.css, must patch explicitly) ===== */
nav {
  background: rgba(251, 247, 240, 0.92) !important;
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

/* CTA pill: teal on warm pages (gold on dark bg = styles.css default) */
.nav-cta {
  background: var(--accent) !important;
  color: #fff !important;
}
.nav-cta:hover {
  background: var(--accent-light) !important;
  color: #fff !important;
}

/* Mobile open menu — warm cream instead of dark charcoal */
.nav-links.open {
  background: rgba(251, 247, 240, 0.98) !important;
}

/* Nav mark SVG — normalize all fills/strokes to warm teal (C2) */
.nav-mark svg [fill]:not([fill="none"])   { fill:   #1E6E6E; }
.nav-mark svg [stroke]:not([stroke="none"]) { stroke: #1E6E6E; }
/* Retain explicit none declarations so hollow shapes stay hollow */
.nav-mark svg [fill="none"]   { fill:   none; }
.nav-mark svg [stroke="none"] { stroke: none; }

/* ===== PAGE HERO ===== */

/* Thin teal→gold top rule, same pattern as mission pages */
.page-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent) 35%, var(--gold) 65%, transparent);
  opacity: 0.5;
  z-index: 2;
}

/* Warm radial glows (replaces hardcoded blue rgba) */
.page-hero .hero-bg::before {
  background:
    radial-gradient(ellipse at 15% 55%, rgba(30, 110, 110, 0.07) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 30%, rgba(168, 116, 32, 0.05) 0%, transparent 45%);
}

/* Animated grid lines — warm teal tint (hardcoded in styles.css) */
.grid-line {
  background: linear-gradient(90deg, transparent, rgba(30, 110, 110, 0.06), transparent);
}
.grid-line-v {
  background: linear-gradient(180deg, transparent, rgba(30, 110, 110, 0.05), transparent);
}

/* ===== WING TAGLINE ===== */
/* Signature line featured in the hero of every wing page.
   Add <p class="wing-tagline">The Right Model…</p> after .page-hero-sub. */
.wing-tagline {
  display: inline-block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 0.96rem;
  color: var(--accent);
  letter-spacing: 0.01em;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(30, 110, 110, 0.22);
  animation: fadeUp 0.9s ease-out 0.65s both;
}

/* ===== PROSE CALLOUT EXAMPLES — warm amber vs cool blue ===== */
.prose .callout-example {
  background: rgba(168, 116, 32, 0.06);
  border-left-color: var(--gold);
}

/* ===== CARDS — subtle shadow for depth on light bg ===== */
.pattern-card,
.compare-card,
.domain-card,
.engage-card {
  border-color: rgba(0, 0, 0, 0.09);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

/* ===== CTA SECTION ===== */
.cta-section {
  background: var(--bg-deep);
  border-top-color: rgba(0, 0, 0, 0.08);
}
.cta-section::before {
  background: radial-gradient(ellipse at 50% 80%, rgba(30, 110, 110, 0.04) 0%, transparent 60%);
}

/* ===== FOOTER — warm charcoal (matches mission pages' wm-footer) ===== */
footer {
  background: #23201C;
  border-top-color: rgba(255, 255, 255, 0.07);
}
.footer-tagline { color: rgba(255, 255, 255, 0.45); }
.footer-links a { color: rgba(255, 255, 255, 0.40) !important; }
.footer-links a:hover { color: var(--wt-teal-light) !important; }
.footer-links a.footer-active { color: rgba(255, 255, 255, 0.72) !important; }
.footer-info { color: rgba(255, 255, 255, 0.40); }
.footer-info a { color: var(--wt-teal-light) !important; }
.footer-legal { color: rgba(255, 255, 255, 0.28); }
/* Footer sitemap grid — dark charcoal footer context */
.footer-map {
  /* reset the global fixed-position nav rule so this footer <nav> stays in the footer */
  position: static !important;
  inset: auto !important;
  width: auto;
  height: auto;
  z-index: auto;
  background: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: none !important;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem 2rem;
  max-width: 800px;
  margin: 0 auto 1.5rem;
  text-align: left;
}
.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  margin: 0 0 0.65rem;
}
.footer-col a {
  display: block;
  font-size: 0.83rem;
  color: rgba(255, 255, 255, 0.44);
  text-decoration: none;
  padding: 0.18rem 0;
  transition: color 0.2s;
}
.footer-col a:hover { color: rgba(255, 255, 255, 0.88); }

/* ===== CREDENTIAL-CARD ICONS — warm palette override (B3) ===== */
/* Replace off-palette cool-blue #6E9EFF, ochre #D4A55A, and #5ABD8C
   with warm teal, gold, and green that match the warm token set. */
.cred-icon svg [fill="#6E9EFF"],
.cred-icon svg [fill^="#6E9E"]   { fill:   #1E6E6E; }   /* cool-blue → warm teal  */
.cred-icon svg [stroke="#6E9EFF"],
.cred-icon svg [stroke^="#6E9E"] { stroke: #1E6E6E; }
.cred-icon svg [fill="#D4A55A"],
.cred-icon svg [fill^="#D4A5"]   { fill:   #A87420; }   /* off-ochre → warm gold  */
.cred-icon svg [stroke="#D4A55A"],
.cred-icon svg [stroke^="#D4A5"] { stroke: #A87420; }
.cred-icon svg [fill="#5ABD8C"],
.cred-icon svg [fill^="#5ABD"]   { fill:   #2E7D52; }   /* off-green → warm green */
.cred-icon svg [stroke="#5ABD8C"],
.cred-icon svg [stroke^="#5ABD"] { stroke: #2E7D52; }

/* ===== FOCUS RING — .btn-primary on warm/wing pages (C4) ===== */
/* Darker outline than gold-light for a clearly visible keyboard focus ring */
.btn-primary:focus-visible {
  outline: 3px solid #1E6E6E;
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(30, 110, 110, 0.28);
}