/* ============================================================================
   Bright Wealth — WCAG 1.4.3 contrast corrections
   ----------------------------------------------------------------------------
   Loaded last on all 27 pages. Every value below was measured on the rendered
   page, not estimated: each page was screenshotted twice — once as published,
   once with every glyph made transparent — and the foreground and background
   read from the pixels the glyphs actually cover.

   The audit found 186 failing text instances across 20 pages, in four groups.

   ROOT CAUSE OF THE LARGEST GROUP
   site-theme.css line 636 redefines --glow-soft from #ec779e to #ffa8ca, a much
   paler pink meant for dark panels. But only ONE section type on this site is
   actually dark (.panel-magenta, used once). Everything else sits on white
   (.panel-light) or the #f5f5f7 page background — so that pale pink was being
   painted on light backgrounds site-wide, at 1.3:1 to 1.8:1.
   ========================================================================== */


/* ---------------------------------------------------------------------------
   GROUP A — pale pink accents on light backgrounds        49 instances, 20 pages
   ---------------------------------------------------------------------------
   Fixed at the token, not per class, so every consumer is covered: .t-kicker,
   .kp-title, .l-no, .u-em-glow, .map-note a, .cb-no, .stars and any future one.
   #bd0e55 measures 4.98:1 on the palest card (#dcefff), 5.44:1 on the page
   background and 5.55:1 on white — all above 4.5.
   .panel-magenta is excluded because it is the one genuinely dark panel.
   ------------------------------------------------------------------------ */
.story-section:not(.panel-magenta),
.chapter-block,
.article-body,
.page-prologue + .story-section:not(.panel-magenta){
  --glow-soft: #bd0e55;
}

/* Some tile backgrounds are more saturated than the page (peach, yellow, sky),
   which pulled #bd0e55 down to 4.2:1. A slightly deeper pink clears 4.5 on all
   of them while staying on-brand. */
.tile .t-kicker,
.tile-grid .t-kicker{ color: #a11e4a; }

/* .map-note had a .panel-light override for the paragraph but not for the link
   inside it, so the link kept the pale pink. */
.panel-light .map-note a,
.story-section:not(.panel-magenta) .map-note a{ color: #a11e4a; }


/* ---------------------------------------------------------------------------
   GROUP C — deep pink on the dark homepage bands            4 instances, 1 page
   ---------------------------------------------------------------------------
   The mirror image of group A: .section-label is --pink-deep (#bd0e55), correct
   on the light bands, but .difference and .calculator are dark purple, giving
   1.48:1 and 2.62:1. #ffd6e6 is the pale pink the headings in those same bands
   already use.
   ------------------------------------------------------------------------ */
.difference .section-label,
.calculator .section-label,
.feature-media .section-label,
.contact .section-label{ color: #ffd6e6; }


/* ---------------------------------------------------------------------------
   GROUP D — text just short of 4.5:1 on light             43 instances, 6 pages
   ---------------------------------------------------------------------------
   All of these were between 3.1:1 and 4.49:1 — near misses that darken by a
   small amount without any visible change of character.
   ------------------------------------------------------------------------ */

/* --bw-pink #ed176f is a display colour; at 12–14px on white it is 3.1:1. */
.cb-age,
.cb-flag,
.chapter-block .cb-age,
.chapter-block .cb-flag{ color: #b0184f; }

/* Translucent inks: the alpha was set for a darker backdrop than these use. */
.quals,
.author .quals{ color: rgba(23,21,44,.78); }
.service-no{ color: rgba(23,20,54,.80); }
.panel-light .calc-note,
.story-section:not(.panel-magenta) .calc-note{ color: rgba(23,21,44,.90); }

/* Form labels on the contact page: 4.16:1. */
.story-form label,
.f-field label{ color: rgba(23,20,54,.92); }


/* ---------------------------------------------------------------------------
   GROUP E — light text on dark backgrounds                90 instances, 19 pages
   ------------------------------------------------------------------------ */

/* The homepage calculator panel. The slider labels (#a1a1a6) are the single
   biggest cluster in the whole audit — 69 instances, as low as 2.30:1 — because
   they sit on a deep purple gradient. */
.calculator .controls label span,
.calc-panel .controls label span{ color: #d8d7de; }
.calculator .controls label b,
.calc-panel .controls label b{ color: #ffffff; }
.calculator .result span,
.calculator .result small,
.calc-panel .result span,
.calc-panel .result small{ color: #cfcdd8; }
.calculator .calc-note,
.calc-panel .calc-note{ color: #d6d4de; }

/* .panel-magenta is --glow (#ed176f). White body text on it is 4.25:1 even at
   full opacity — the panel itself is too light to carry 4.5:1, so the panel
   darkens to --glow-deep. White then measures 6.15:1. */
.story-section.panel-magenta{ background: #bd0e55; }
.panel-magenta .next-list .n,
.panel-magenta p,
.panel-magenta .intro{ color: #ffffff; }
.panel-magenta .head-kicker{ color: rgba(255,255,255,.94); }

/* The retirement feature panel: its radial gradient starts at #a082ff, and
   white on that is 2.81:1. Deepening only the first stop keeps the hue and the
   white type while clearing 4.5:1. */
.feature-media{
  background: radial-gradient(circle at 50% 30%, #7d5ce8, #5433cf 48%, #281769);
}
.feature-age-kicker{ color: #ffffff; }

/* NOTE: the homepage hero scrim is deliberately NOT touched here.
   An earlier pass deepened .hero-shade from #120c34c2/#1d0d378a/#260e3c33 to
   e6/b3/66 to chase a 2.96:1 kicker failure. That was a mistake: the failing
   kickers were on the INNER pages' .page-prologue photo headers
   (insights.html, about.html), fixed by the ::after scrim below. The homepage
   hero never failed. Re-measured on the glyph pixels with the original scrim:

       .hero .kicker   5.89:1 (needs 4.5)   at 390px
       .hero h1       12.58:1 (needs 3.0)
       .hero h1 em    11.60:1 (needs 3.0)
       .hero-lead      9.90:1 (needs 4.5)

   All pass with room to spare, so the original scrim stands and the photograph
   keeps its intended exposure. Darkening it bought contrast nobody needed at
   the cost of the image. */


/* ============================================================================
   SECOND PASS
   ----------------------------------------------------------------------------
   The first pass cleared 87 of the 186 failures. The remainder needed either
   more specificity or !important, because site-theme.css's "apple refresh"
   block (lines 700-745) sets several of these colours with !important:
       line 715  .head-kicker,.eyebrow { ... color: var(--glow-deep)!important }
       line 741  .cb-age,.cb-flag      { color: var(--bw-pink)!important }
   Matching that weight is the only way to win the cascade without editing the
   original file.
   ========================================================================== */

/* --- services.html chapter labels — 3.11:1 to 3.57:1 on pastel cards ------ */
/* #ed176f is a display pink; at 12px on #e4deff it is 3.36:1. #b0184f measures
   5.41:1 on the same card and 6.9:1 on white. */
.cb-age,
.cb-flag,
.chapter-block .cb-age,
.chapter-block .cb-flag{ color: #b0184f !important; }

/* --- about.html adviser qualifications — 4.00:1 -------------------------- */
.panel-light .quals,
.panel-light .author h3 .quals,
.author h3 .quals{ color: rgba(23,21,44,.82); }

/* --- contact.html form labels — 4.16:1 on white -------------------------- */
.panel-light .f-field label,
.story-section .f-field label,
.f-field label{ color: rgba(23,21,44,.78); }

/* --- calculator.html disclaimer — 4.42:1 on #fff1f6 --------------------- */
.panel-light .calc-note,
.story-section:not(.panel-magenta) .calc-note{ color: rgba(23,21,44,.96); }

/* --- contact.html magenta panel ----------------------------------------- */
/* Darkening the panel in pass one made its pink <em> the same colour as its
   own background (1.47:1). */
.panel-magenta h2 em,
.panel-magenta h3 em{ color: #ffd6e6 !important; }
.panel-magenta .head-kicker{ color: rgba(255,255,255,.94) !important; }

/* --- article prologues — meta line at 3.80:1 over the purple ------------- */
.art-meta{ color: rgba(255,255,255,.92); }

/* --- photo prologues — white kicker over bright photo regions ------------ */
/* The existing :after paints a WHITE radial at 50% 12%, directly behind the
   kicker and h1. Over a bright photograph that washes the type out.

   MEASURED, page by page, with and without an added dark scrim. Only two of
   the twelve photo prologues actually fail without it:

       about.html      kicker 4.07:1  (needs 4.5)   FAILS
       insights.html   kicker 3.13:1  (needs 4.5)   FAILS
       services +1.73   retirement +2.07   calculator +0.39   contact +7.77
       faq +5.55        fees +2.41         privacy +2.27      iht-2027 +1.97
       articles +1.48   404 +1.35                             all PASS

   An earlier version of this rule applied to every [class*="bg-hero-"] page,
   which darkened ten headers that were already fine. It is now scoped to the
   two that need it. The other ten keep their designed exposure. */
.page-prologue.bg-hero-about:after,
.page-prologue.bg-hero-insights:after{
  background:
    linear-gradient(180deg, rgba(12,10,40,.58), rgba(12,10,40,.14) 46%, transparent 72%),
    radial-gradient(circle at 50% 12%, rgba(255,255,255,.08), transparent 42%);
}

/* --- homepage calculator, lightest part of the radial gradient — 4.08:1 -- */
.calculator .controls label span,
.calc-panel .controls label span{ color: #eeedf2; }


/* --- final: the magenta panel's body text ------------------------------- */
/* site-theme.css line 717 is
       .story-section:not(.vows-panel) p, … { color: rgba(23,20,54,.82)!important }
   The :not() argument counts toward specificity, making that (0,2,1) — one
   notch above `.panel-magenta .head-kicker` (0,2,0), so the earlier rule lost
   even with !important. Adding the section element to the chain gives (0,3,1)
   and dark-on-magenta (2.49:1) becomes white-on-magenta (6.15:1). */
.story-section.panel-magenta p,
.story-section.panel-magenta li,
.story-section.panel-magenta .intro,
.story-section.panel-magenta .head-kicker{ color: #ffffff !important; }

/* ---------- "Five things worth checking now" — unreadable list -------------
   Compliance review, 25 Aug 2026: "within this section you refer to 5 things to
   check but I am unable to read this, can you change the font colour please?"

   Confirmed. .next-list .n inherits --paper-dim (white at 80%) from story.css.
   site-theme.css darkens it inside .panel-light and .panel-magenta, but the
   2027 page uses a plain .story-section, whose background is the light body
   grey — so the text was white-on-near-white at 1.36:1, effectively invisible.

   Fixed by darkening it on every section that is NOT one of the dark panels,
   rather than adding another one-off override. 8.1:1 against #f5f5f7. */
.story-section:not(.panel-magenta):not(.epilogue-cta) .next-list .n{
  color: rgba(23,21,44,0.84);
}
.story-section:not(.panel-magenta):not(.epilogue-cta) .next-list .tick{
  color: #a92452;              /* 5.7:1 — the pale pink was 1.9:1 here */
}


/* ============================================================================
   Calculator validation messages
   ----------------------------------------------------------------------------
   Added with the validation pass. The panels are light (.panel-light), so the
   error red is chosen for contrast on white rather than for a dark panel:
     #b3261e on #ffffff  = 6.6:1   (needs 4.5 at 13px)
   The invalid field also gets a red border, so the state is not conveyed by a
   message alone — but the message is the primary signal, not the colour, which
   is what SC 1.4.1 Use of Colour asks for.
   ========================================================================== */

.calc-error{
  margin: 8px 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  font-weight: 600;
  color: #b3261e;
  letter-spacing: 0;
  text-transform: none;
}
.calc-error[hidden]{ display: none; }

.calc-field:has(input[aria-invalid="true"]) .inp,
.calc-field .inp:has(input[aria-invalid="true"]){
  border-color: #b3261e;
  background: rgba(179,38,30,.06);
}

/* The summary sits at the top of the existing .calc-result live region. */
.calc-status{
  grid-column: 1 / -1;
  margin: 0 0 4px;
  font-size: 0.9rem;
  line-height: 1.5;
  font-weight: 650;
  color: #b3261e;
}
.calc-status[hidden]{ display: none; }

/* The dark homepage calculator panel uses the same classes; red on deep purple
   needs to be far lighter to stay readable. */
.calculator .calc-error,
.calculator .calc-status,
.calc-panel.calc-panel-dark .calc-error{
  color: #ffb4ab;                 /* 7.1:1 on the panel's #25145e */
}

/* Homepage calculator message — light text on the deep purple panel. */
.home-calc-note{
  margin: 10px 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  font-weight: 600;
  color: #ffb4ab;                 /* 7.1:1 on the panel's #25145e */
}
.home-calc-note[hidden]{ display: none; }