/* ==========================================================================
   a11y.css — colour-contrast corrections (WCAG 2.1 AA)
   Added 2026-09-21. This file only deepens or lightens tones that carry
   small text; it does not change layout, spacing or the brand hue.
   Remove this one <link> to revert everything in it.
   ========================================================================== */

/* --- Body and muted text --------------------------------------------------
   Was #64748b body / rgba(100,116,139,.75) muted: 4.3:1 and 2.8:1 on the
   pale section backgrounds. */
:root {
   --bs-body-color: #566274;
   --bs-body-color-rgb: 86, 98, 116;
   --bs-secondary-color: #5b6879;
   --bs-secondary-color-rgb: 91, 104, 121;
}
[data-bs-theme="dark"] {
   --bs-body-color: #aab6c6;
   --bs-body-color-rgb: 170, 182, 198;
   --bs-secondary-color: #9aa7b8;
   --bs-secondary-color-rgb: 154, 167, 184;
}

/* --- Main navigation ------------------------------------------------------
   The navbar is white in light mode and #1e293b in dark mode, but the links
   stayed mid-grey in both (3.1:1 dark, 2.1:1 on the program page).
   The leading `body` only raises specificity over the theme's own rule. */
body .navbar .navbar-nav .nav-item .nav-link { color: #566274; }
[data-bs-theme="dark"] body .navbar .navbar-nav .nav-item .nav-link { color: #cbd5e1; }
[data-bs-theme="dark"] body .navbar .navbar-nav .nav-item .nav-link:hover,
[data-bs-theme="dark"] body .navbar .navbar-nav .nav-item .nav-link:focus,
[data-bs-theme="dark"] body .navbar .navbar-nav .nav-item .nav-link.active,
[data-bs-theme="dark"] body .navbar .navbar-nav .nav-item .nav-link.show { color: #ffffff; }

/* --- Dropdown menus ------------------------------------------------------- */
.dropdown-item { color: var(--bs-body-color); }
[data-bs-theme="dark"] .dropdown-item { color: #cbd5e1; }

/* --- Amber badges ---------------------------------------------------------
   `.text-dark` flips to near-white in dark mode, leaving white on #ffc107
   at 1.6:1. Amber always carries dark text. */
.badge.bg-warning,
.bg-warning.text-dark { color: #0f172a !important; }

/* --- Danger text ---------------------------------------------------------- */
.text-danger { color: #c0102f !important; }
[data-bs-theme="dark"] .text-danger { color: #ff8da0 !important; }

/* --- Focus visibility ----------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }

/* --- Cards that stay light in dark mode -----------------------------------
   speakers.php paints its cards white in both themes, so their contents
   must keep dark text rather than inherit the dark-mode body colour. */
[data-bs-theme="dark"] .speaker-card { color: #334155; }

/* --- Stragglers -----------------------------------------------------------
   `.text-secondary` falls back to Bootstrap's #6c757d on pages that load
   their own Bootstrap after the theme. Inline <code> inside an alert took a
   pink that only works on white. */
[data-bs-theme="dark"] .text-secondary { color: #adb5bd !important; }
.alert code { color: inherit; }

/* --- Coloured card headings -----------------------------------------------
   Committee cards colour their headings with .text-secondary / .text-warning
   / .text-success, which in this theme resolve to tints meant for fills,
   not for text (down to 1.2:1 on a white card). */
.card-title.text-secondary { color: #5b6879 !important; }
.card-title.text-warning   { color: #8a6100 !important; }
.card-title.text-success   { color: #16704a !important; }
.card-title.text-info      { color: #17627d !important; }
[data-bs-theme="dark"] .card-title.text-secondary { color: #9aa7b8 !important; }
[data-bs-theme="dark"] .card-title.text-warning   { color: #ffca2c !important; }
[data-bs-theme="dark"] .card-title.text-success   { color: #5dd39e !important; }
[data-bs-theme="dark"] .card-title.text-info      { color: #7cc7e0 !important; }

/* --- Inline pure red ------------------------------------------------------
   `style="color:red"` is only 4.0:1 on white. */
[style*="color:red"], [style*="color: red"] { color: #d10000 !important; }
[data-bs-theme="dark"] [style*="color:red"],
[data-bs-theme="dark"] [style*="color: red"] { color: #ff8da0 !important; }

/* --- Image dimensions -----------------------------------------------------
   <img> tags now carry width/height attributes so the browser can reserve
   space before the file arrives. Those attributes are presentational hints
   with zero specificity; width/height:auto keeps every existing CSS rule
   authoritative and leaves the attributes supplying only the aspect ratio. */
img { width: auto; height: auto; }

/* --- Brand blue -----------------------------------------------------------
   #6197b0 gives 3.2:1 against white, both as link text and behind white
   button text. #497184 is the same hue one step deeper: 5.3:1. */
:root {
   --fl-accent: #497184;
   --bs-link-color: #446a7b;
   --bs-link-color-rgb: 68, 106, 123;
   --bs-link-hover-color: #3f6272;
}
.text-primary { color: #446a7b !important; }
.btn-primary {
   --bs-btn-bg: #497184;
   --bs-btn-border-color: #497184;
   --bs-btn-hover-bg: #3f6272;
   --bs-btn-hover-border-color: #3f6272;
   --bs-btn-active-bg: #3a5b6a;
   --bs-btn-active-border-color: #3a5b6a;
   --bs-btn-disabled-bg: #497184;
   --bs-btn-disabled-border-color: #497184;
}
[data-bs-theme="dark"] {
   --fl-accent: #8fbdd2;
   --bs-link-color: #8fbdd2;
   --bs-link-color-rgb: 143, 189, 210;
   --bs-link-hover-color: #b3d6e5;
}
[data-bs-theme="dark"] .text-primary { color: #8fbdd2 !important; }
.dropdown-item.active, .dropdown-item:active,
[data-bs-theme="dark"] .dropdown-item.active,
[data-bs-theme="dark"] .dropdown-item:active { color: #fff; background-color: #497184; }
.btn-outline-primary {
   --bs-btn-color: #497184;
   --bs-btn-border-color: #497184;
   --bs-btn-hover-bg: #497184;
   --bs-btn-hover-border-color: #497184;
   --bs-btn-hover-color: #fff;
}
[data-bs-theme="dark"] .btn-outline-primary {
   --bs-btn-color: #8fbdd2;
   --bs-btn-border-color: #8fbdd2;
   --bs-btn-hover-bg: #497184;
   --bs-btn-hover-border-color: #497184;
   --bs-btn-hover-color: #fff;
}
[data-bs-theme="dark"] .speaker-card a { color: #497184; }
[data-bs-theme="dark"] .badge.bg-primary-subtle,
[data-bs-theme="dark"] .bg-primary-subtle.text-primary { color: #d6e9f3 !important; }

/* Page-local accent classes that set the brand blue directly and so are not
   reached by the token overrides above. */
body .speaker-section .text-primary { color: #446a7b !important; }
[data-bs-theme="dark"] body .speaker-section .text-primary { color: #8fbdd2 !important; }
[data-bs-theme="light"] body .ws-eyebrow,
[data-bs-theme="light"] body .ws-flag { color: #446a7b; }

/* --- CQCS only ------------------------------------------------------------
   This site recolours --bs-warning to a pale blue (#aee4fe). That reads fine
   on the dark hero but sat at 1.4:1 where the key dates appear on white.
   Elements over the hero image, and badge fills, keep the original tone. */
[data-bs-theme="light"] .text-warning:not(.badge):not(.border-warning) { color: #2f6d8f !important; }
[data-bs-theme="light"] .bg-dark .text-warning,
[data-bs-theme="light"] .bg-overlay .text-warning,
[data-bs-theme="light"] [class*="overlay"] .text-warning { color: #aee4fe !important; }

/* Programme and online-link accents on the pale blue panels */
[data-bs-theme="light"] body .prog-eyebrow,
[data-bs-theme="light"] body .prog-item-time,
[data-bs-theme="light"] body .ol-label { color: #36616f; }

/* --- Brand logo -----------------------------------------------------------
   The theme paints every .navbar-brand / .text-inverse white in dark mode
   with filter: brightness(0) invert(1). That works for the transparent
   line-art logos on the sister sites, but the CQCS mark is a full-colour
   badge, so the filter flattened it into a blank white rectangle.
   The logo keeps its own colours in both themes. */
[data-bs-theme="dark"] .logo-link,
[data-bs-theme="dark"] .navbar-brand.logo-link,
[data-bs-theme="dark"] .text-inverse.logo-link { filter: none !important; }