/* ═══════════════════════════════════════════════
   ACCESSIBILITY & CONTRAST FIXES (loaded last)
   Fixes white-on-white bugs and WCAG AA contrast.
   Uses explicit colours so CSS-variable conflicts
   between styles.css and national.css can't break them.
   ═══════════════════════════════════════════════ */

/* ---- FIX 1: pre-footer contact form (was rendering near-white bg) ---- */
.prefooter-contact{ background:#0F2139 !important; color:#fff !important; }
.prefooter-contact h2{ color:#fff !important; }
.prefooter-contact > .pfc-wrap > p{ color:rgba(255,255,255,.80) !important; }
.prefooter-contact .pfc-eyebrow{ color:#D8B65C !important; }
.prefooter-contact label{ color:rgba(255,255,255,.75) !important; }
.prefooter-contact .pfc-note{ color:rgba(255,255,255,.6) !important; }

/* ---- FIX 2: ic-editorial section (dark navy band) rendering on light ---- */
.ic-editorial{ background:#102b35 !important; color:#f7f6f2 !important; }
.ic-editorial h2{ color:#fff !important; }
.ic-editorial p{ color:#e8eded !important; }
.ic-editorial .ic-editorial-kicker{ color:#e9b48f !important; }
.ic-editorial .ic-editorial-note{ color:#c3d0d1 !important; }

/* ---- FIX 3: sole-trader band (dark navy) ---- */
.st-band{ background:#0F2139 !important; }
.st-band .st-band-tag{ color:#E8C56A !important; }
.st-band .st-band-sub{ color:rgba(255,255,255,.82) !important; }

/* ---- FIX 4: gold text on light backgrounds — darken to accessible gold ---- */
/* brand "Consultants" word, eyebrows, labels, read-links, section numbers */
.label, .read-link, .meta-line, .pfc-eyebrow, .cons-eyebrow, .st-eyebrow,
.svc-faq-eyebrow, .num, .cs-sector, .gl-label, .db-label, .de-label,
.blog-card-theme, .blog-theme-tag, .blog-rel-theme, .cs-role,
.ic-editorial-kicker { }
/* Accessible gold for text on light = #6E5410 (>=4.5:1 on paper/white) */
:root{ --gold-text:#6E5410 !important; }
.label:not(.hero-badge *):not(.cta-band *),
.read-link, .meta-line, .num, .cs-role,
.blog-card-theme, .blog-theme-tag, .blog-rel-theme,
.gl-label, .db-label, .de-label,
.disc-card .label, .st-eyebrow, .cons-eyebrow, .svc-faq-eyebrow{ color:#6E5410 !important; }

/* The brand lockup accent word "Consultants" on light headers — darken slightly for text use.
   Keep the logo gold where it sits on dark (nav is dark, so scope to light contexts only). */

/* ---- FIX 5: muted grey small text (#7A8D9B ~3:1) -> darker ---- */
.price-note, .plan-unit, .blog-card-meta, .blog-meta,
.ic-editorial-note { color:#5A6B78 !important; }

/* ---- FIX 6: gold primary buttons with white text (3.32:1) -> navy text or darker gold ---- */
.btn-primary, .national-button, .mat-button, .form-submit, .pfc-submit{ }
/* Where a primary button is copper/gold (#C9794A / #C7A043) with white text, switch to deep navy bg */
a.btn.btn-primary, a.btn.btn-primary.btn-lg{ background:#0F2139 !important; color:#fff !important; border-color:#0F2139 !important; }
a.btn.btn-primary:hover{ background:#1a3a5c !important; }

/* ---- FIX 7: outline buttons navy-text-on-navy (dark sections) ---- */
.cta-band .btn-outline, .decision-inner .btn-outline,
section[style*="#10"] .btn-outline{ color:#F4E3C0 !important; border-color:#E8C56A !important; }

/* ---- FIX 8: nav price pill navy-on-teal (1.22:1) ---- */
.nav-cta.nav-price{ background:#C7A043 !important; color:#0F2139 !important; }

/* ---- FIX 9: EXPLORE page-jump label grey ---- */
.page-jump-inner .label, .page-jump .label{ color:#5A6B78 !important; }


/* ---- FIX 11: V24 homepage hero lost its dark backdrop when portrait was removed ----
   Restore a solid deep-navy hero so the white/gold hero text has proper contrast. */
body:has(.v24-categories) .hero{ background:#071d34 !important; }
body:has(.v24-categories) .hero::after{ content:"" !important; position:absolute; inset:0;
  background:linear-gradient(90deg,#071d34 0%,rgba(7,29,52,.85) 60%,rgba(7,29,52,.6) 100%) !important; z-index:0; pointer-events:none; }
.v24-brand, .v24-brand-sub, .v24-tag{ color:#fff !important; }
body:has(.v24-categories) .hero h1{ color:#F4C783 !important; }
body:has(.v24-categories) .hero .hero-sub{ color:#fff !important; }

/* ---- FIX 12: scope gold-text correctly — dark gold ONLY on light; light gold on dark ---- */
/* Labels/eyebrows sitting on DARK sections must stay light gold, not the dark #6E5410 */
.hero .label, .cta-band .label, .decision-inner .label,
.why-frac .label, section[class*="why"] .label,
.prefooter-contact .pfc-eyebrow, .st-band *,
.ic-editorial .ic-editorial-kicker{ color:#E8C56A !important; }

/* brand accent word "Consultants" in the top nav sits on dark — keep gold.
   Only darken gold spans that are on light surfaces (handled case-by-case below). */

/* "THE SITUATION" / numbered labels / "M+" stat — these sit on white cards: darken */
.scenario strong, .situation strong, .stat-num, .stat span, .proof span{ color:#6E5410 !important; }

/* ═══ FINAL PRECISE CONTRAST FIXES ═══ */

/* A) Labels/eyebrows on DARK sections must be LIGHT gold (override the dark-gold default) */
.why-frac .label, .why-frac .section-header .label,
.hero .label, .cta-band .label, .decision-inner .label,
.prefooter-contact .pfc-eyebrow{ color:#E8C56A !important; }

/* B) Heading italic accents (em) — currently light gold #D8B65C on light paper (fails).
   Darken to accessible gold on light. These appear in page-hero and section headings. */
h1 em, h2 em, h3 em,
.page-hero h1 em, .section-header h2 em, .lead em{ color:#6E5410 !important; }
/* but keep em light where the heading is on a dark hero */
.hero h1 em, body:has(.v24-categories) .hero h1 em,
.cta-band h2 em, .prefooter-contact h2 em, .st-band em{ color:#F4C783 !important; }

/* C) Gold text accents on white/paper cards -> accessible dark gold */
.scenario strong, .mat-situation strong,
strong.gold, .gold-text,
.key-box h4, .svc-faq h2 em, .stat .num,
.plan-price .cur, .read-link{ color:#6E5410 !important; }
/* Generic: any .num and "THE SITUATION/SHORT VERSION" style strongs on light */
.num{ color:#6E5410 !important; }

/* D) Page-jump bar "Start a Conversation" CTA was navy-on-navy -> gold bg, navy text */
.page-jump-inner .jump-cta, .jump-cta{ background:#C7A043 !important; color:#0F2139 !important; }

/* E) Hero outline button navy-on-navy -> light gold border/text */
.hero .btn-outline, body:has(.v24-categories) .hero .btn-outline{
  color:#F4C783 !important; border-color:#E8C56A !important; background:rgba(4,19,36,.5) !important; }

/* F) Dark-navy headings/paragraphs sitting ON navy sections (why-frac) -> light */
.why-frac h2, .why-frac h3{ color:#fff !important; }
.why-frac p, .why-frac .lead{ color:rgba(255,255,255,.82) !important; }
.why-frac .cred-text span, .why-frac .cred-icon{ color:#E8C56A !important; }

/* G) Muted grey small text on light (#7A8D9B / #122,141,155 ~3.1:1) -> darker slate */
.price-note, .plan-unit, .meta-line, .ic-editorial-note,
.blog-card-meta, .blog-meta, .national-lead, .national-card p,
.national-hubs p, p.small, .small{ color:#56636E !important; }

/* H) text-link gold on white -> accessible */
.text-link{ color:#6E5410 !important; }


/* ═══ LAST-MILE TARGETED FIXES ═══ */

/* decision-cta: has a LIGHT bg (#ebf1f7) — ensure its inner navy panel text is light,
   but its label/heading on the light part stay dark. The inner dark box: */
.decision-cta .decision-inner{ color:#fff; }
.decision-cta .decision-inner h2{ color:#fff !important; }
.decision-cta .decision-inner .label{ color:#E8C56A !important; }
.decision-cta .decision-inner p{ color:rgba(255,255,255,.85) !important; }
.decision-cta .decision-inner .text-link{ color:#F4C783 !important; }

/* stat-block grey paragraphs + gold "M+" accents + "THE SITUATION" strong on light cards */
.stat-block p{ color:#56636E !important; }
.stat-block span, .stat-block strong{ color:#6E5410 !important; }
.scenario-card strong, .proof-card strong, .mat-scenario strong,
.situation-label, [class*=situation] strong{ color:#6E5410 !important; }

/* the brand accent word "Consultants" when it appears on a LIGHT hero overlay (v24-brand area)
   is handled by the hero dark-bg fix; the footer .fl-txt is on dark so leave gold. */

/* "Read the full pricing guide" style gold links on light */
a.price-link, .pricing a.text-link, a[href*="pricing"].text-link{ color:#6E5410 !important; }


/* Safety net: any element explicitly coloured gold #C7A043 as TEXT on a near-white
   surface is hard to read; nudge the shared gold used for small labels darker globally.
   (Logo SVG strokes use their own attributes, unaffected.) */
.sector-note, .loc-note, .muted, .text-muted{ color:#56636E !important; }

/* ═══ FINAL STRUCTURAL CONTRAST FIXES ═══ */

/* "THE SITUATION / THE CHALLENGE" step labels (gold on white card) */
.step strong, .step-label, .steps strong{ color:#6E5410 !important; }

/* Greater Manchester town list: name + note on light cards */
.town-name{ color:#0F2139 !important; }
.town-note{ color:#56636E !important; }

/* "EXPLORE:" page-jump prefix label (grey on light) */
.page-jump .jump-label, .page-jump-inner > span:first-child,
.jump-label{ color:#56636E !important; }

/* Pricing guide gold links / "Read the full pricing guide" on light */
.pricing a, .price-note a, a.gold-link{ color:#6E5410 !important; }

/* Grey body copy that is still ~3.1:1 (muted slate) — darken the shared light-slate token.
   Covers .sector copy, plan units, notes across cards. */
.plan-unit, .price-note, .sector p, .section-sub,
.lead-muted, .subtle, .note{ color:#56636E !important; }


/* The brand lockup accent word used as TEXT on a light header/hero (the gold "Consultants").
   On dark surfaces (nav, footer) it must stay gold; on light surfaces darken it.
   Scope: inside a light page-hero overlay only. */
body:has(.v24-categories) .v24-brand span,
body:has(.v24-categories) .v24-brand-sub{ color:#fff !important; }

/* Chat launcher is a dark navy bubble (#0d2942) with light gold text — correct contrast.
   Reinforce so nothing overrides it to dark-on-dark. */
#wi-launch, .wi-launch{ background:#0d2942 !important; color:#ffe0b0 !important; }
#wi-launch .wi-launch-icon, .wi-launch .wi-launch-icon{ background:#e6bb80 !important; color:#102b43 !important; }

/* ═══ FINAL: grey body text + brand gold on light ═══ */
/* The muted slate #7A8D9B (rgb 122,141,155) fails on light. Darken the variable at source
   so every use that relies on it passes AA, without touching white-on-dark uses. */
:root{ --ink-light:#56636E !important; }
/* Catch bare grey paragraphs set directly to the old value */
p[style*="7A8D9B"], p[style*="122,141,155"]{ color:#56636E !important; }

/* Brand accent gold word "Consultants" (#C7A043) when rendered as TEXT on a LIGHT surface.
   The nav sits on a light header on interior pages, so darken the brand accent there for AA.
   Logo SVG (stroke) is unaffected — this only touches text spans. */
.nav-brand .brand-txt span, .brand-txt b span,
.footer-logo .fl-txt span{ /* footer is dark -> handled below */ }
/* interior pages have a light nav: darken the gold brand word to accessible gold */
.national-header .national-logo, .nav:not(.scrolled) .nav-brand span{ }
/* Simplest robust rule: the brand gold used as small text on light becomes accessible gold.
   Footer logo is on dark navy, so force it light there explicitly. */
.footer .fl-txt span, .footer-logo .fl-txt span{ color:#D8B65C !important; }

/* ═══ FIX: imagine-group section lost its dark background (white-on-white) ═══ */
.imagine-group{ background:#0F2139 !important; color:#fff !important; }
.imagine-group h2, .imagine-group h3{ color:#fff !important; }
.imagine-group p, .imagine-group .ig-lead{ color:rgba(255,255,255,.85) !important; }
.imagine-group .label, .imagine-group .eyebrow{ color:#E8C56A !important; }
.imagine-group a{ color:#F4C783 !important; }

/* ═══ Brand "Consultants" gold word: accessible on light, gold on dark ═══ */
/* Default (interior pages have a LIGHT header): darken the brand accent for AA */
.nav-brand .brand-txt b span{ color:#63490F !important; }
/* The homepage/dark nav and footer are dark -> keep it light gold */
.footer .fl-txt span{ color:#D8B65C !important; }  /* footer is dark -> light gold OK */

/* ═══ Contrast fixes — WCAG audit (round 2) ═══ */
/* 1. Case-study "brief" quote: dark text was on a navy tag background (invisible). Make it light. */
.case-tag h4, .case-tag .ct-label{ color:#FFFFFF !important; }
.case-tag h4{ opacity:1 !important; }

/* 2. Nav brand "Consultants" gold on light header — deepen to accessible gold (>=4.5). */
.nav-brand .brand-txt span{ color:#63490F !important; }

/* 3. "Imagine Group" section: eyebrow label + em accent need stronger contrast on their bg.
   On light bg use accessible gold; on dark bg use light gold. Scope to the imagine-group section. */
.imagine-group .label{ color:#E8C56A !important; }  /* dark section */
.imagine-group em{ color:#F4C783 !important; }

/* 4. MAT pages: "Better futures." em and the toolkit button text. */
.mat-hero-premium h1 em{ color:#F7D9A8 !important; }
a.mat-button{ color:#0F2139 !important; background:#E8C56A !important; }
a.mat-button:hover{ background:#F0D48A !important; color:#0F2139 !important; }

/* 5. Generic safety net: any .label eyebrow sitting on the warm paper/white gets the accessible gold,
   while labels inside dark sections (hero/footer/cta/why-frac/prefooter/st-band/imagine-group handled above). */
:is(section:not(.contact):not(.cta-band):not(.why-frac):not(.imagine-group):not(.decision-cta)) .section-header .label{ color:#6E5214 !important; }
.hero .section-header .label, .page-hero .section-header .label{ color:#E8C56A !important; }

/* ═══ Contrast fixes — WCAG audit (round 3, higher specificity) ═══ */
/* Nav brand "Consultants" gold span — force accessible gold on the light header (beat any later rule). */
.nav .nav-brand .brand-txt b span,
.nav-brand .brand-txt b span,
header .nav-brand .brand-txt span{ color:#63490F !important; }

/* MAT outline button: pale text on gold bg was invisible. Make it transparent bg + dark text. */
a.mat-button.mat-outline, .mat-button.mat-outline{
  background:transparent !important; color:#0F2139 !important; border:2px solid #0F2139 !important;
}
a.mat-button.mat-outline:hover, .mat-button.mat-outline:hover{
  background:#0F2139 !important; color:#FFFFFF !important;
}

/* ═══ Contrast fixes — WCAG audit (round 4) ═══ */
/* Guarantee intentionally-dark sections keep their navy background (belt-and-braces vs nth-of-type shading). */
.contact, .why-frac, .cta-band, .imagine-group, .decision-cta, .prefooter-contact{ background:#0F2139 !important; }
.st-band{ background:#0F2139 !important; }

/* MAT outline button sits on a DARK hero/banner -> light text + light border. */
a.mat-button.mat-outline, .mat-button.mat-outline{
  background:transparent !important; color:#F7D9A8 !important; border:2px solid #E8C56A !important;
}
a.mat-button.mat-outline:hover, .mat-button.mat-outline:hover{
  background:#E8C56A !important; color:#0F2139 !important;
}

/* Contact section headings/text must be light on the navy background. */
.contact h2, .contact-left h2, .contact h3, .contact-left p,
.contact-form h3, .contact-form label{ color:#FFFFFF !important; }
.contact-left p{ color:rgba(255,255,255,.82) !important; }
.contact-item-text strong{ color:#E8C56A !important; }
.contact-item-text a, .contact-item-text span{ color:rgba(255,255,255,.88) !important; }
.contact .social-btn{ color:#FFFFFF !important; border-color:rgba(255,255,255,.4) !important; }

/* ═══ Final: labels on dark sections must be light gold (not the dark gold used on light sections) ═══ */
.contact .label, .imagine-group .label, .cta-band .label, .why-frac .label,
.decision-cta .label, .prefooter-contact .pfc-eyebrow, .st-band .label{ color:#E8C56A !important; }

/* ═══ DEFINITIVE last-word: eyebrow labels inside dark sections = light gold (beats inline + generic) ═══ */
section.contact span.label,
section.imagine-group span.label,
section.cta-band span.label,
section.why-frac span.label,
section.decision-cta span.label,
body section.prefooter-contact .pfc-eyebrow{ color:#E8C56A !important; }

/* ═══════════════════════════════════════════════════════════
   FINAL OVERRIDE (last in file = wins ties): eyebrow labels on
   dark navy sections must be light gold #E8C56A (ratio ~5.9 on #0F2139).
   High specificity (section.class .label) + last source position.
   ═══════════════════════════════════════════════════════════ */
section.contact .label,
section.contact .contact-left .label,
section.imagine-group .label,
section.imagine-group .imagine-inner .label,
section.cta-band .label,
section.why-frac .label,
section.decision-cta .label,
section.prefooter-contact .pfc-eyebrow{ color:#E8C56A !important; }

/* ═══ City/location page CTA band (.national-end) must stay dark navy ═══ */
.national-end{ background:#102b35 !important; }
.national-end h2, .national-end strong{ color:#FFFFFF !important; }
.national-end p{ color:#E1E8E9 !important; }
.national-end a.national-button{ background:#C7A043 !important; color:#0F2139 !important; }
.national-end a.national-outline{ color:#F4E3C0 !important; border-color:#E8C56A !important; }
/* Calculator eyebrow bump */
.hero .eyebrow, .mat-hero .eyebrow, p.eyebrow{ color:#6E5410 !important; }
body.mat-unified .hero .eyebrow, .content .eyebrow, header.hero .eyebrow{ color:#6E5410 !important; }  /* calculator hero is LIGHT */