/* ─────────────────────────────────────────────────────────────────────────────────────────────
   src/assets/css/v2-bridge.css — Task E2, 20 September 2026.

   THE THIRD STYLESHEET, AND THE ONE THAT MAKES THE OTHER TWO SAFE TOGETHER.

   base.njk loads main.css, then v2.css, then this file, on every page in the site. v2.css was
   written by Task E1 for four brand-new page types built from `.v2-*` markup; loading it over
   main.css is what puts the new palette, Atkinson Hyperlegible and the 18px floor on the ~57,000
   pages nobody rewrote, which is the whole of "no page may be left on the old layout". But a few
   of v2.css's rules are ELEMENT-LEVEL and therefore reach markup they were never measured
   against, and this file is where each of those is answered.

   ── THE THREE REAL COLLISIONS, AND WHY EACH ONE MATTERS ───────────────────────────────────

   1. LINK COLOUR INSIDE DARK REGIONS. v2.css sets `a { color: var(--v2-teal-ink) }`. #12705F is
      5.99:1 on white and passes; on main.css's navy bands it is 1.8:1 and fails outright. The
      site paints navy in the header, the footer, the cookie banner and several page heroes, so
      every link in those regions has to be restored to white. THIS IS A CONTRAST FIX, NOT A
      TASTE ONE: a 1.8:1 link is unreadable, not merely off-brand.

   2. BACKGROUND AND TEXT COLOUR ON <body>. v2.css paints #F4F6F8 and navy text. That is the
      intended new page background and it is kept. What it must not do is re-tint text inside
      regions main.css already gives an explicit colour, which is handled by (1) plus the
      inherited-colour rules below.

   3. THE HEADING SCALE. v2.css sets h1 at 1.85rem where main.css's heroes assume a larger
      figure. The heroes keep their own sizes because they carry their own class-level rules,
      which out-specify an element selector; nothing is needed here. Stated so the next reader
      does not go looking for a fix that is not required.

   ── WHAT THIS FILE DELIBERATELY DOES NOT DO ───────────────────────────────────────────────

   It does not restyle page components one by one. A per-page skin for 57,000 pages is not a
   thing one task can verify, and a half-finished one is worse than an honest theme: it leaves
   some pages new and some old, which is the state the brief is trying to end. The theme is
   applied at the token and element level so that it reaches everything at once, and this file
   fixes only what that breaks.

   It adds NO new origin. The one webfont is Atkinson Hyperlegible from fonts.googleapis.com,
   which main.css line 2 already imports from the same two origins, so the CSP is unchanged and
   /privacy/ needs no edit for it. CONFIRMED by reading netlify.toml rather than assumed - see
   the Task E2 findings doc.
   ───────────────────────────────────────────────────────────────────────────────────────── */

/* ─── 1. LINKS INSIDE DARK REGIONS ────────────────────────────────────────────────────────────
   White, underlined, with a visible focus ring that is not the same colour as the background.
   Listed explicitly rather than with a wildcard: a wildcard would also catch a light panel that
   happens to sit inside one of these elements. */
.site-header a,
.site-footer a,
.cookie-banner a,
.mobile-sub-bar a,
.v2-stale a {
  color: #FFFFFF;
}

.site-header a:hover,
.site-footer a:hover,
.cookie-banner a:hover {
  color: #FFFFFF;
  text-decoration-thickness: 2px;
}

/* The stale banner is the alert tint, which is light, so its own link colour is the ink. */
.v2-stale a { color: var(--v2-alert-ink); }

/* ─── 2. THE HEADER, IN THE NEW PALETTE ─────────────────────────────────────────────────────── */
.site-header {
  background: var(--v2-navy);
  border-bottom: 3px solid var(--v2-teal);
}

/* The wordmark is an IMAGE now (Task E2). It is sized by its height so the header row height is
   decided here and not by the file's pixel dimensions, and `width:auto` keeps the supplied
   aspect ratio rather than stretching the lettering. */
.site-logo--wordmark img {
  display: block;
  height: 34px;
  width: auto;
}

@media (min-width: 900px) {
  .site-logo--wordmark img { height: 40px; }
}

.site-tagline { color: #E7EDF3; }

/* The "A+" control in the nav row. It inherits the v2 control rules from v2.css via the shared
   .v2-textsize class; only the colours for a dark header are set here. */
.nav-textsize {
  background: transparent;
  color: #FFFFFF;
  border: 1px solid #FFFFFF;
}

.nav-textsize[aria-pressed="true"] {
  background: var(--v2-teal);
  color: var(--v2-navy);
  border-color: var(--v2-teal);
}

/* ─── 3. THE FOOTER, IN THE NEW PALETTE ─────────────────────────────────────────────────────── */
.site-footer {
  background: var(--v2-navy);
  color: #FFFFFF;
  border-top: 3px solid var(--v2-teal);
}

.site-footer .footer-col-h { color: var(--v2-teal); }

/* The two footer-bottom spans set `color: var(--grey-on-navy)` inline in base.njk. That variable
   is main.css's and it is kept working rather than re-declared here, because an inline style
   cannot be overridden from a stylesheet without !important and an !important in a bridge file
   is how a theme becomes unmaintainable. */

/* ─── 4. FOCUS, EVERYWHERE ──────────────────────────────────────────────────────────────────
   v2.css gives :focus-visible a teal ring, which is invisible on the teal header border and low
   contrast on navy. Inside the dark regions the ring goes white. */
.site-header :focus-visible,
.site-footer :focus-visible,
.cookie-banner :focus-visible,
.mobile-sub-bar :focus-visible {
  outline: 3px solid #FFFFFF;
  outline-offset: 2px;
}

/* ─── 5. THE COOKIE BANNER AND THE MOBILE BAR ─────────────────────────────────────────────── */
.cookie-banner { background: var(--v2-navy); color: #FFFFFF; }
.mobile-sub-bar { background: var(--v2-navy); }

/* ─── 6. PAGE CONTENT WIDTH ─────────────────────────────────────────────────────────────────
   main.css's .container and v2.css's .v2-wrap are the two content wrappers on the site. They are
   given the same maximum so a v2 page and a legacy page line up at the same edge; without this
   the header (main.css) and a v2 page body visibly disagree by ~80px. */
.v2-wrap { max-width: 1200px; }

/* ─── 7. THE SKIP LINK ──────────────────────────────────────────────────────────────────────
   main.css owns .skip-link and v2.css owns .v2-skip. Only the first is rendered by base.njk, so
   this is a colour fix and not a second control. */
.skip-link:focus {
  background: var(--v2-navy);
  color: #FFFFFF;
  outline: 3px solid var(--v2-teal);
}

/* ─── 8. THE [hidden] ATTRIBUTE, ON THE COMPONENTS THAT SET A DISPLAY ─────────────────────────
   LOAD-BEARING, and the same class of defect main.css records twice against .card-follow-star
   and .rh-card. The user-agent rule `[hidden] { display: none }` LOSES to any author rule that
   sets `display`, so a card, a list item or a panel that this stylesheet gives a display value
   stays visible when a script hides it. The filter is then logically correct and visually inert,
   which is the worst shape: the count says "3 of 149 shown" above 149 visible rows.

   Every selector here is a component v2.css or this file gives an explicit display AND that a
   script hides with the attribute. Adding a fourth such component means adding it here. */
.v2-card[hidden],
.v2-cards > li[hidden],
.v2-panel[hidden],
.v2-stat[hidden],
.v2-tiles > li[hidden] { display: none !important; }