/* ============================================================================
   Bright Wealth — regulatory risk warnings
   ----------------------------------------------------------------------------
   Added 25 Aug 2026 following the compliance review, which required certain
   warnings to appear "in a prominent position which is no less font size than
   the rest of the text".

   SIZE — CHANGED 26 Aug 2026, READ BEFORE EDITING
   .risk-warning was originally set at 1rem (16px), equal to the site's body
   paragraphs, to satisfy that requirement. On 26 Aug 2026 Nick Johal asked for
   it to be reduced to 0.87rem (13.92px) so it matches .moment span — the
   compact supporting text the warnings sit beside — because at 16px the block
   read as larger than its neighbours.

   The consequence, recorded here deliberately: the warnings are now SMALLER
   than the site's main body copy, so the "no less font size than the rest of
   the text" wording in the review is no longer met on size alone. Prominence
   now rests on the tinted panel, the leading rule and the placement. If
   compliance revisits this, 1rem is the value to restore.

   Every risk warning on the site uses this one component, so they all share the
   same size, spacing, tinted panel and leading rule. The reference is the
   warning under "Retire on your terms" on the Our services page.

   Two colour variants exist and only two: dark sections and white panels. The
   geometry, the font size and the weight of the tint are identical in both —
   only the ink and the tint colour flip, because white text on a white panel
   would be unreadable.
   ========================================================================== */
.risk-warning{
  /* 0.87rem = 13.92px at the 16px root, matching .moment span — the supporting
     text the warnings sit beside on the services and retirement pages.

     NOTE FOR COMPLIANCE: this is smaller than the site's main body paragraphs,
     which inherit the 16px root. The August 2026 review asked for warnings "in a
     prominent position which is no less font size than the rest of the text";
     set at this size they are no longer equal to body copy. Changed on Nick
     Johal's instruction, 26 Aug 2026. Prominence is now carried by the tinted
     panel and the leading rule rather than by type size. */
  font-size: 0.87rem;
  line-height: 1.55;
  margin: 30px 0 0;
  padding: 18px 22px;
  border-left: 3px solid var(--glow-soft, #ec779e);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  max-width: 62ch;
}
.risk-warning p{ margin: 0; font-size: 0.87rem; line-height: 1.55; }
.risk-warning p + p{ margin-top: 10px; }

/* A risk warning must never be hidden behind the scroll-reveal animation, so it
   is exempt from .fade even if the class is applied by mistake. */
.risk-warning.fade{ opacity: 1 !important; transform: none !important; }

/* White panels: identical box, ink on a pink tint of the same strength. */
.panel-light .risk-warning,
.sec-light .risk-warning{
  color: rgba(23,21,44,0.88);
  background: rgba(199,47,99,0.06);
  border-left-color: #a92452;
}

/* ------------------------------- article sources and disclaimers ---------- */
/* The source citation and the disclaimer at the foot of every article now use
   the same panel as .risk-warning above: same tint, same leading rule, same
   padding, same type size. Previously the disclaimer sat at 0.82rem in faint
   grey with only a hairline rule, and the source block at 0.92rem — three
   different treatments for three pieces of regulatory small print on the same
   page. They are one visual family now.

   Articles render on .panel-light, so the light variant is the one that shows;
   the dark values below are the fallback if a note is ever placed on a dark
   section. */
.article-source,
.article-note{
  font-size: 0.87rem;          /* matches .risk-warning */
  line-height: 1.55;
  margin: 34px 0 0;
  padding: 18px 22px;
  max-width: 62ch;
  border-left: 3px solid var(--glow-soft, #ec779e);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
}
/* On the white article panels — the case that actually renders. The selector is
   two levels deep to beat site-theme.css's `.panel-light .article-note`. */
.panel-light .article-source,
.panel-light .article-note,
.sec-light .article-source,
.sec-light .article-note{
  color: rgba(23,21,44,0.88);
  background: rgba(199,47,99,0.06);
  border-left-color: #a92452;
}
.article-source a,
.article-note a{ color:#a92452; text-decoration:underline; text-underline-offset:2px; }
.panel-light .article-source a:hover,
.panel-light .article-note a:hover{ color:#8e1c43; }

/* Where both appear, they read as one grouped block rather than two panels
   separated by a gap the size of a paragraph break. */
.article-source + .article-note{ margin-top: 10px; }