/* ==========================================================================
   Legacy chrome — transitional
   --------------------------------------------------------------------------
   Brings pages not yet rebuilt onto the design system without rewriting each
   one. Loaded LAST, after each page's own $extraStyles, which is the only
   position from which it can win: those blocks define their hero classes at
   the same specificity, so later-wins is doing the work. !important appears
   only where a Bootstrap utility (.text-white, .bg-success) sits directly on
   the element and would otherwise beat a class rule.

   Every selector here names a class that actually exists in a page's own
   style block — nothing is speculative, and nothing is global. Grep for a
   name before removing it.

   This file SHRINKS as pages are rebuilt. When a page gets a real
   .page-header, drop its class from these lists. When the list is empty,
   delete the file and its <link> in includes/header.php.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Dark hero bands → light page headers

   Every one of these was `linear-gradient(135deg, #1e3a5f, #2c5282)` with
   white text: an inverted band, which the system does not do. They become a
   page header on the same continuous canvas, closed by a hairline.
   -------------------------------------------------------------------------- */

.services-hero,          /* for-investors, for-brokers, for-realtors, services */
.fsbo-hero,
.faq-hero,
.amort-hero,
.contact-hero,
.qualifier-hero,
.pathway-hero,
.pricing-hero,
.legal-hero,             /* privacy, terms */
.stats-hero,
.closing-cta {
    background: var(--paper) !important;
    background-image: var(--tex-diag-wide), var(--tex-grain) !important;
    background-size: var(--tex-diag-wide-size), var(--tex-grain-size) !important;
    color: var(--ink-2) !important;
    border-bottom: 1px solid var(--rule);
    box-shadow: none !important;
}

/* The display face, matching .display-serif on the rebuilt pages. */
.services-hero h1,
.fsbo-hero h1,
.faq-hero h1,
.amort-hero h1,
.contact-hero h1,
.qualifier-hero h1,
.pathway-hero h1,
.pricing-hero h1,
.legal-hero h1,
.stats-hero h1,
.closing-cta h1,
.closing-cta h2 {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400 !important;
    color: var(--ink) !important;
    letter-spacing: -0.02em;
    line-height: 1.12;
    text-wrap: balance;
}

.services-hero h2, .fsbo-hero h2, .faq-hero h2, .amort-hero h2,
.contact-hero h2, .qualifier-hero h2, .pathway-hero h2,
.pricing-hero h2, .legal-hero h2, .stats-hero h2,
.services-hero h3, .fsbo-hero h3, .faq-hero h3, .amort-hero h3,
.contact-hero h3, .qualifier-hero h3, .pathway-hero h3,
.pricing-hero h3, .legal-hero h3, .stats-hero h3, .closing-cta h3 {
    color: var(--ink) !important;
}

/* White-on-dark text utilities inside a band that is no longer dark. Without
   this the copy is white on parchment — the exact failure that hit about.php
   when its heading colour was pinned. */
.services-hero .text-white,   .services-hero .text-white-50,   .services-hero .text-light,
.fsbo-hero .text-white,       .fsbo-hero .text-white-50,       .fsbo-hero .text-light,
.faq-hero .text-white,        .faq-hero .text-white-50,        .faq-hero .text-light,
.amort-hero .text-white,      .amort-hero .text-white-50,      .amort-hero .text-light,
.contact-hero .text-white,    .contact-hero .text-white-50,    .contact-hero .text-light,
.qualifier-hero .text-white,  .qualifier-hero .text-white-50,  .qualifier-hero .text-light,
.pathway-hero .text-white,    .pathway-hero .text-white-50,    .pathway-hero .text-light,
.pricing-hero .text-white,    .pricing-hero .text-white-50,    .pricing-hero .text-light,
.legal-hero .text-white,      .legal-hero .text-white-50,      .legal-hero .text-light,
.stats-hero .text-white,      .stats-hero .text-white-50,      .stats-hero .text-light,
.closing-cta .text-white,     .closing-cta .text-white-50,     .closing-cta .text-light {
    color: var(--ink-2) !important;
}

/* Stat figures in those bands — the big numbers read as data, so ink. */
.services-hero .stat-value,
.fsbo-hero .stat-value,
.stats-hero .stat-value,
.pricing-hero .stat-value {
    color: var(--ink) !important;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   2. Buttons that were built for a dark band

   Several pages redefine .btn-ghost as a white-outlined button — invisible
   once the band behind it is parchment. Restored to the system definition,
   and the light-on-dark Bootstrap outline variants with it.
   -------------------------------------------------------------------------- */

/* Name collision worth knowing about: the system's .btn-ghost is a quiet TEXT
   link (the navbar Login), while these pages redefine it as a white-outlined
   BUTTON for their dark band. Flattening it globally stripped the hero CTAs of
   their affordance — "Express Interest" became plain text. So the global class
   keeps the system meaning, and inside a legacy hero it stays a button, in the
   accent. */
.btn-ghost {
    border: 0 !important;
    background: none !important;
    color: var(--ink-2) !important;
    font-weight: 500;
}
.btn-ghost:hover,
.btn-ghost.active {
    background: none !important;
    color: var(--accent) !important;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.services-hero .btn-ghost,
.fsbo-hero .btn-ghost,
.faq-hero .btn-ghost,
.amort-hero .btn-ghost,
.contact-hero .btn-ghost,
.qualifier-hero .btn-ghost,
.pathway-hero .btn-ghost,
.pricing-hero .btn-ghost,
.stats-hero .btn-ghost,
.closing-cta .btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--accent) !important;
    background: var(--paper-raised) !important;
    color: var(--accent) !important;
    border-radius: var(--r-sm);
    padding: 0.625rem 1.25rem;
    text-decoration: none;
}
.services-hero .btn-ghost:hover,   .fsbo-hero .btn-ghost:hover,
.faq-hero .btn-ghost:hover,        .amort-hero .btn-ghost:hover,
.contact-hero .btn-ghost:hover,
.qualifier-hero .btn-ghost:hover,  .pathway-hero .btn-ghost:hover,
.pricing-hero .btn-ghost:hover,    .stats-hero .btn-ghost:hover,
.closing-cta .btn-ghost:hover,
.services-hero .btn-ghost.active,  .fsbo-hero .btn-ghost.active,
.pricing-hero .btn-ghost.active {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    text-decoration: none;
}

.btn-outline-light,
.btn-outline-white {
    --bs-btn-color: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-bg: var(--accent);
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--accent-strong);
    --bs-btn-active-border-color: var(--accent-strong);
    --bs-btn-active-color: #fff;
}
.btn-light {
    --bs-btn-bg: var(--paper-raised);
    --bs-btn-border-color: var(--accent);
    --bs-btn-color: var(--accent);
    --bs-btn-hover-bg: var(--accent);
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--accent-strong);
    --bs-btn-active-border-color: var(--accent-strong);
    --bs-btn-active-color: #fff;
}

/* --------------------------------------------------------------------------
   3. Coloured icon circles → monochrome

   These were filled circles in primary / success / info / warning — four
   saturated fills doing no work the adjacent heading wasn't already doing,
   and the only colour on otherwise monochrome pages. A hairline ring with an
   ink glyph keeps the rhythm and drops the noise.

   !important throughout: the fill comes from a utility class (bg-success,
   bg-opacity-10) sitting on the element itself.
   -------------------------------------------------------------------------- */

.value-icon,
.step-icon,
.trust-icon,
.success-icon,
.feature-icon,
.icon-circle,
.podcast-icon {
    background: var(--paper-raised) !important;
    background-image: none !important;
    color: var(--ink) !important;
    border: 1px solid var(--rule-strong) !important;
    box-shadow: none !important;
}
.value-icon i,
.step-icon i,
.trust-icon i,
.success-icon i,
.feature-icon i,
.icon-circle i,
.podcast-icon i {
    color: var(--ink) !important;
}

/* --------------------------------------------------------------------------
   4. Tinted panels

   Pale blue/grey washes from the old palette, retuned to the warm tints so
   they sit on parchment rather than beside it.
   -------------------------------------------------------------------------- */

.pricing-highlight,
.service-form-card,
.faq-card,
.how-it-works-step {
    background: var(--paper-tint) !important;
    border: 1px solid var(--rule) !important;
    border-radius: var(--r-md) !important;
    box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   5. The old #0d6efd accent

   Sixteen pages hardcode Bootstrap's default blue in their own style blocks —
   the accent this system replaced. Left alone they would keep a second accent
   colour alive alongside the sienna, and several also sat at 4.0–4.4:1, just
   under the text floor. Both problems have the same fix.

   Listed by the class that carries it rather than swept globally, so a blue
   that is genuinely data (a chart series) is not caught by accident.
   -------------------------------------------------------------------------- */

/* LINKS — genuinely clickable, so they keep the action colour. */
.info-link,
.toc a,
.legal-content a,
.pricing-faq a,
.info-callout a,
.breakdown-table a {
    color: var(--accent) !important;
    border-color: var(--accent) !important;
}

/* STATE — current wizard step, progress fill, selected category, current tab,
   step numerals. These say "you are here", not "click me", so they take ink.
   Keeping them sienna is what made a selected chip compete with the CTA
   beside it. */
.wizard-step-dot.active,
.pw-step-label.active,
.pw-wizard-progress-fill,
.faq-category.active,
.nav-tabs .nav-link.active,
.step-card .step-number {
    color: var(--state-current) !important;
    border-color: var(--state-current) !important;
}
/* The Pathway progress fill used to be listed here too. That only looked right
   because the page painted a blue-to-green gradient IMAGE over this colour; with
   the gradient gone it would paint the fill the same tone as its track and the
   bar would vanish. pathway.php now colours the fill itself. */
.wizard-step-dot.active {
    background-color: var(--paper-sunken) !important;
}
.faq-category.active {
    background-color: var(--state-current) !important;
    color: var(--state-raised) !important;
    border-color: var(--state-current) !important;
}

/* Pale-blue badges from the old palette. .info-callout used to be listed here
   too (painted accent-soft); mortgage-qualifier.php now styles it as a tonal
   panel matching the site's other callouts. */
.badge.rounded-pill.bg-primary-subtle,
.pricing-highlight .badge {
    background-color: var(--accent-soft) !important;
    color: var(--accent-strong) !important;
    border-color: var(--rule) !important;
}

/* Inactive step dots were #6c757d on #e9ecef — 4.0:1. */
.step-dot {
    background-color: var(--paper-sunken) !important;
    color: var(--ink-2) !important;
    border: 1px solid var(--rule-strong) !important;
}
.step-dot.active {
    background-color: var(--state-current) !important;
    color: var(--state-raised) !important;
    border-color: var(--state-current) !important;
}