/**
 * Calculator Theme Layer
 *
 * ONE stylesheet cascading over all ~260 per-slug calculator stylesheets.
 * Enqueued at wp_enqueue_scripts priority 20 (inc/calculator-theme-css.php)
 * so it loads AFTER the lazy calculator modules' per-slug CSS, and linked
 * explicitly in embed mode (inc/calculator-embed/calculator-embed.php).
 *
 * Scope discipline: fix cross-template defects only. Never touch hero
 * backgrounds, .chart-container / canvas sizing, or .metric-* dimensions —
 * those are per-slug-owned and chart resize regressions are expensive.
 *
 * Palette: #2563eb / #1e40af / black / white (+ existing neutral grays).
 */

/* ------------------------------------------------------------------ *
 * (a) Hero subtitle contrast
 * Bootstrap's .text-white-50 renders white at 50% opacity on the blue
 * gradient hero — fails WCAG AA on every vintage. Force full white.
 * Covers the standard .hero-section and the 5 bespoke hero variants
 * (calculator-hero: cap-table-dilution / lbo-returns / tvm,
 *  llcr-hero, hcp-hero).
 * ------------------------------------------------------------------ */
.hero-section .text-white-50,
.hero-section .lead.text-white-50,
.calculator-hero .lead,
.calculator-hero .subtitle,
.calculator-hero .hero-subtitle,
.llcr-hero .lead,
.hcp-hero .subtitle {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* ------------------------------------------------------------------ *
 * (e) Tooltip trigger affordance
 * Every calculator uses {abbrev}-tooltip trigger disks (18px circles),
 * historically gray (#e5e7eb/#6b7280) — they read as disabled. Unify to
 * a blue badge so the affordance reads as interactive.
 * [class$=] matches single-class triggers, [class*="-tooltip "] matches
 * triggers with utility classes appended; -tooltip-popup panels match
 * neither, so popups keep their per-slug styling.
 * :not(body) is load-bearing: Woo Variation Swatches puts `wvs-tooltip`
 * in the body class on every page, so the bare attribute selector
 * painted the entire page blue on hover.
 * ------------------------------------------------------------------ */
[class$="-tooltip"]:not(body),
[class*="-tooltip "]:not(body) {
    background: rgba(37, 99, 235, 0.12) !important;
    color: #2563eb !important;
}

[class$="-tooltip"]:not(body):hover,
[class$="-tooltip"]:not(body):focus,
[class*="-tooltip "]:not(body):hover,
[class*="-tooltip "]:not(body):focus {
    background: #2563eb !important;
    color: #ffffff !important;
}

/* ------------------------------------------------------------------ *
 * (b) Panel/card header compaction
 * Templates label their panels with <h2 class="h5"> inside blue
 * .card-header bars, but style.css's .calculators-template-default
 * heading ladder (!important) overrides Bootstrap's .h5 utility, so
 * panel labels out-shouted the page H1 (observed at 64px pre-fix).
 * This layer loads after style.css and restores the intended compact
 * label at equal weight.
 * ------------------------------------------------------------------ */
.calculators-template-default .calculator-card .card-header h2,
.calculators-template-default .calculator-card .card-header h3,
.calculators-template-default .calculator-card .card-header h4,
.calculators-template-default .results-card .card-header h2,
.calculators-template-default .results-card .card-header h3,
.calculators-template-default .results-card .card-header h4 {
    font-size: 1.25rem !important;
    line-height: 1.35 !important;
    margin: 0 !important;
}

/* Related-calculator card titles are <h3> and inherited the article
 * heading ladder — cap them to card scale. */
.calculators-template-default .related-calc-title {
    font-size: 1.05rem !important;
    line-height: 1.4 !important;
    margin: 0 0 0.5rem !important;
}

/* ------------------------------------------------------------------ *
 * (c) Formula panels
 * Every calculator renders .formula-display monospace blocks (200
 * files, uniformly #f8fafc). Loosen the line-height and add a blue
 * accent so they read as typeset reference, not a code dump.
 * ------------------------------------------------------------------ */
.calculators-template-default .formula-display {
    border-left: 3px solid #1e40af !important;
    border-radius: 8px !important;
    line-height: 1.7 !important;
}