/* rto-fixes.css - CAQA RTO 45459
   Rendered-audit fixes, 2 September 2026.

   This file is loaded LAST on every page, after style.css, cq.css,
   cq-ticker.css, register-theme.css and register.css. That is the whole point
   of it. The same fixes were first appended to style.css, which loads first,
   and five of them silently lost: `body .cqscroll a` and
   `body[data-rg-theme] a` both score (0,1,1) so load order decided it, and the
   .steps-quad and .cqtk-label rules were outranked by identical selectors in
   register.css and cq-ticker.css further down the chain.

   Every rule here fixes something confirmed by measuring the rendered page,
   and each carries the measurement that justified it. No !important is used;
   being last is enough.
   ========================================================================= */

/* 1. Scroll buttons were INVISIBLE on every page.
      cq.css: .cqscroll a{background:#0B1B3A;color:#fff}, icons are
      stroke="currentColor". register-theme.css: body[data-rg-theme] a{color:
      var(--rg-navy)}. Equal specificity, later file won, so the icon painted
      navy #132a5e on a navy #0B1B3A disc. Measured 1.23:1, ie. not visible.

      Being last is not sufficient here: body[data-rg-theme] a scores (0,1,2)
      against a bare .cqscroll a at (0,1,1), so the theme outranks it whatever
      the order. Scoping to the theme attribute takes this to (0,2,3). The
      final selector covers any page that does not carry data-rg-theme. */
body[data-rg-theme] .cqscroll a,
body[data-rg-theme] .cqscroll a:hover,
body[data-rg-theme] .cqscroll a:focus-visible,
.cqscroll a[aria-label]{color:#fff}

/* 2. Newsletter subscribe button: square corners inside a 999px pill with 5px
      padding left a white crescent around its right end. The theme squares the
      button off with body[data-rg-theme] .cqft-card form button{border-radius:0},
      which is (0,2,3), so this has to be scoped the same way to reach (0,3,4).
      Rounding the button to match its container is the smaller change: the pill
      is what the visitor actually sees. */
body[data-rg-theme] .cqft-card form > .cqft-pill > button,
.cqft-card form > .cqft-pill > button{border-radius:999px}

/* 3. Course catalogue: the active filter chip printed brass ink #806738 on
      near-black navy #0a1435. Measured 3.36:1. Light brass measures 12.1:1 on
      the same ground and keeps the accent. */
.filter-bar .fbtn.active,
.filter-bar .fbtn[aria-pressed="true"]{color:#e6d2a4}

/* 4. Recognition steps: the roman numerals were brass-l #c9ae74 on the
      translucent panel, which composites to rgb(65,84,126) over the navy
      section. Measured 3.51:1. Taking the panel down and the numeral up puts
      the numeral at about 5.5:1 and lifts the body copy from 4.71 as well. */
.rg .steps-quad{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.10)}
.rg .steps-quad > div{background:rgba(255,255,255,.03)}
.rg .steps-quad > div:hover{background:rgba(255,255,255,.07)}
.rg .steps-quad b{color:#dcc68f}

/* 5. Ticker label divider was rgba(255,255,255,.16), a white hairline on a
      near-white strip, so it never rendered. The label copy itself measures
      16.9:1 and is fine. */
.cqtk-label{border-right:1px solid rgba(19,42,94,.18)}

/* 6. Certificate verification form: the label sat 7px above its input and the
      hint 0px below it, so label, field and hint read as one block. This is
      the page people are sent to in order to check a document, so the fields
      should be unambiguous. */
.cqv-grid{gap:26px}
.cqv-grid label{display:block;margin-bottom:10px}
.cqv-grid .cqv-hint{margin-top:12px}

/* 7. Keep the ticker viewport an explicit flex child. With flex:0 1 auto a
      max-content track can size the viewport past the bar on some widths. */
.cqtk-vp{flex:1 1 auto;min-width:0}

/* 8. Consent rows, security checks and submit actions.
      style.css:316 styles every label inside .form as a short field caption:
      display:block, uppercase, 600 weight, .14em tracking. That is right for
      "YOUR NAME" and wrong for a sentence. It also outranks .consent-row
      (0,1,1 against 0,1,0), so the flex row lost its display and the checkbox
      sat hard against the first word with no gap at all.

      Written against the pattern rather than the one page, so any consent row,
      security check or action row added later lands correctly. */
.form label.consent-row,
label.consent-row{
  display:flex;
  gap:12px;
  align-items:flex-start;
  text-transform:none;
  letter-spacing:normal;
  font-weight:400;
  font-size:.9rem;
  line-height:1.6;
  color:var(--ink,#14171f);
  margin:0;
  cursor:pointer;
}
/* style.css:581 pins .consent-row input with width:auto!important, so matching
   !important here is the only way to give the box a real target size. */
.form label.consent-row > input[type=checkbox],
label.consent-row > input[type=checkbox]{
  width:18px!important;
  height:18px!important;
  min-height:0!important;
  flex:0 0 auto;
  margin:1px 0 0!important;
  accent-color:#132a5e;
}
.form label.consent-row a{text-decoration:underline}

/* The security check is part of the form, not a footnote after it. Give it its
   own breathing room and keep it hard against the action it gates. */
.form .cq-check{margin:20px 0 0}
.form .cq-check .cf-turnstile{margin:0}
.form .form-actions{margin:18px 0 0;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.form .form-note{
  font-size:.8rem;
  line-height:1.6;
  color:#5c6170;
  margin:14px 0 0;
  max-width:62ch;
}
.form .form-note a{text-decoration:underline}

/* Same intent in the footer newsletter form: the check sits under the field it
   gates rather than drifting away from it. */
.cqft-card form > .cf-turnstile{margin:14px 0 0}

/* 9. Inline grid overrides that no media query can beat.
      contact.html and team.html carry style="grid-template-columns:1fr 400px"
      and "repeat(2,1fr)" on their .layout wrapper. style.css:442 already
      collapses .layout to one column at 1024px, but an inline style outranks
      any author rule, so both pages stayed two-column on a phone. On a 390px
      viewport that left the content column 135px wide: the whole enquiry form,
      including its consent sentence, was crammed into a third of the screen.

      !important is the only thing that beats an inline declaration, so it is
      used deliberately here and scoped to the breakpoint and to elements that
      actually carry an inline template. */
@media(max-width:1024px){
  .layout[style*="grid-template-columns"],
  [class][style*="grid-template-columns:repeat(2,1fr)"]{
    grid-template-columns:1fr!important;
  }
}

/* 10. Dark bands were printing dark text on themselves.
       register-theme.css:99 paints every h1 to h4 in --rg-navy and :107 paints
       every p in --rg-ink-2. Both are scoped body[data-rg-theme], which scores
       (0,1,2) for the headings and (0,1,1) for the paragraph. The components
       that set light text on a dark ground score (0,1,1), so the headings lost
       on specificity and the paragraphs lost on load order. Measured against
       the actual rendered pixels:

         .cta-band h2            navy on the navy gradient      1.18 to 1.24
         .cine-artband h2        navy over the brand video      1.40
         .cta-band p             ink-2 on the navy gradient     1.60 to 1.65
         .cc-top h3              navy on the dark red header    1.05 to 1.13

       Separately, style.css:515 .cc-code{color:#B3121C} is one of the old
       generated "contrast pair" rules: it sets a dark value and then relists
       light contexts at :516 to undo it. .cc-top is a dark context and is not
       in that list, so the course code printed dark red on dark red at 2.31.

       Scoped under the theme attribute so these reach (0,2,3) and up. */
body[data-rg-theme] .cta-band h2,
body[data-rg-theme] .cta-band h3,
body[data-rg-theme] .cta-band .h-lg,
body[data-rg-theme] .cine-artband-copy h2,
body[data-rg-theme] .cc-top h3{color:#fff}

body[data-rg-theme] .cta-band p,
body[data-rg-theme] .cta-band li{color:#C9D3EA}

body[data-rg-theme] .cine-artband-copy p,
body[data-rg-theme] .cine-artband ul.cine-ab-points li{color:#E4EAF6}
body[data-rg-theme] .cine-artband .cine-ab-kicker{color:#E6C77E}

/* Gold reads 4.9:1 against the lightest stop of the .cc-top.red gradient and
   better against the rest of it. */
body[data-rg-theme] .cc-top .cc-code,
body[data-rg-theme] .cc-top.red .cc-code{color:#E6C77E}