/* =============================================================
   DSBN HIGH CONTRAST MODE
   -------------------------------------------------------------
   Opt-in accessibility layer toggled by the utility-bar contrast
   button (see js/scripts.js). Not a WCAG/AODA requirement itself
   (the actual compliance rule is 4.5:1 contrast on the DEFAULT
   theme) — this is a supplementary high-visibility mode using a
   pure black/white maximum-contrast palette (21:1 ratio).

   Strategy: redeclare the shared design tokens (design-tokens.css
   is the single source of truth for colour) under
   html.dsbn-high-contrast so every component that already reads
   var(--dsbn-*) picks up the high-contrast palette automatically.
   A smaller set of structural overrides below handles anything
   that isn't token-driven (raw background-color/borders/images).

   Must be enqueued LAST (after design-tokens/style/patterns) so
   its higher-specificity `html.dsbn-high-contrast` selectors win
   the cascade without needing !important everywhere.
   ============================================================= */

html.dsbn-high-contrast {
	/* --- Brand palette -> flattened to pure black/white --- */
	--dsbn-color-primary: #000000;
	--dsbn-color-secondary: #000000;
	--dsbn-color-accent: #FFFFFF;
	--dsbn-color-accent-blue: #FFFFFF;
	--dsbn-color-accent-blue-alt: #FFFFFF;
	--dsbn-color-surface-tint: #000000;

	--dsbn-color-ink: #FFFFFF;
	--dsbn-color-body: #FFFFFF;
	--dsbn-color-muted: #FFFFFF;
	--dsbn-color-surface: #000000;
	--dsbn-color-surface-alt: #000000;
	--dsbn-color-line: #FFFFFF;
	--dsbn-color-card-border: #FFFFFF;
	--dsbn-color-footer-bg: #000000;
	--dsbn-color-footer-text: #FFFFFF;
	--dsbn-color-backdrop: rgba(0, 0, 0, 0.85);

	--dsbn-color-eyebrow: #FFFFFF;
	--dsbn-surface-blue-soft: #000000;
	--dsbn-surface-cream: #000000;
	--dsbn-surface-gray: #000000;

	/* All decorative gradients collapse to flat black backgrounds —
	   text/icons on top stay legible via the ink/accent overrides above. */
	--dsbn-eyebrow-purple: #FFFFFF;
	--dsbn-eyebrow-pink: #FFFFFF;
	--dsbn-eyebrow-blue: #FFFFFF;
	--dsbn-eyebrow-orange: #FFFFFF;
	--dsbn-eyebrow-dark-pink: #FFFFFF;
	--dsbn-eyebrow-red: #FFFFFF;
	--dsbn-eyebrow-light-purple: #FFFFFF;
	--dsbn-eyebrow-light-pink: #FFFFFF;
	--dsbn-eyebrow-yellow: #FFFFFF;
	--dsbn-eyebrow-light-blue: #FFFFFF;
	--dsbn-eyebrow-light-green: #FFFFFF;
	--dsbn-eyebrow-green: #FFFFFF;
	--dsbn-eyebrow-dark-green: #FFFFFF;

	--dsbn-grad-1: #000000;
	--dsbn-grad-2: #000000;
	--dsbn-grad-3: #000000;
	--dsbn-grad-purple: #000000;
	--dsbn-grad-pink: #000000;
	--dsbn-grad-blue: #000000;
	--dsbn-grad-light-purple: #000000;
	--dsbn-grad-light-pink: #000000;
	--dsbn-grad-yellow: #000000;
	--dsbn-grad-light-blue: #000000;

	--dsbn-video-half-bg: #000000;
	--dsbn-video-full-overlay: rgba(0, 0, 0, 0.75);

	--dsbn-hub-nav-bg: #000000;
	--dsbn-hub-nav-border: #FFFFFF;
	--dsbn-hub-nav-active: #262626;

	--dsbn-btn-main: #FFFFFF;
	--dsbn-btn-alt: #FFFFFF;

	/* --- Bootstrap-shim palette (bootstrap-shim.css) ------------------
	   Bootstrap itself is gone, but several REAL, currently-live
	   components still read these --bs-* custom properties directly
	   (.subpage-nav, .lp-tabs-nav, .btn-dsbn, .close-dropdown,
	   .text-dark-blue, etc.) — a
	   completely separate variable namespace from --dsbn-*, easy to
	   miss entirely when only auditing --dsbn-* usage (as happened here
	   the first time through). Flattened the same way as the --dsbn-*
	   block above so every consumer of EITHER namespace is covered. */
	--bs-white: #000000;
	--bs-black: #FFFFFF;
	--bs-primary: #FFFFFF;
	--bs-secondary: #FFFFFF;
	--bs-info: #FFFFFF;
	--bs-warning: #FFFFFF;
	--bs-light: #000000;
	--bs-dark-blue: #FFFFFF;
	--bs-blue: #FFFFFF;
	--bs-body-bg: #000000;
	--bs-border-color: #FFFFFF;
}

/* --dsbn-inside-hero-color/-image are set via a per-page INLINE style
   attribute (an intentional customizable-per-page hero colour/photo
   feature — see page.php, page-hub.php, single.php, etc.), which sits
   above the normal external-stylesheet cascade. Overriding the token
   in :root above doesn't reach it because the element declares its own
   value inline; must target the same element/property directly with
   !important to win over that inline declaration.

   The photo itself stays VISIBLE — only the colour token changes to
   black. Both .dsbn-inside-hero and .dsbn-hub-visual-hero already paint
   a solid/gradient overlay driven by this same colour token (::after)
   specifically so text stays readable over ANY photo; forcing the
   colour to black makes that existing overlay do the exact same job in
   high contrast, just black-tinted instead of blue-tinted, rather than
   hiding the photo outright. */
html.dsbn-high-contrast .dsbn-inside-page,
html.dsbn-high-contrast .dsbn-inside-hero {
	--dsbn-inside-hero-color: #000000 !important;
}

html.dsbn-high-contrast .dsbn-hub-visual-hero {
	border-bottom: 2px solid #FFFFFF !important;
}

/* The gradient scrim above (::after, now driven black) already guarantees
   contrast for text sitting in its solid zone, but that zone's reach is a
   percentage of the hero's width — a long/wrapped title can still spill
   past it, and on mobile the photo crowds closer to the text overall. Add
   an actual solid black box hugging just the title/description/slideshow-
   caption TEXT itself (width:fit-content, capped by each element's own
   pre-existing max-width) as a second, guaranteed layer of contrast that
   doesn't depend on gradient math at all — same idea as the slideshow's
   own dark-tint treatment, just opaque instead of a wash. */
html.dsbn-high-contrast .dsbn-hub-visual-hero__title,
html.dsbn-high-contrast .dsbn-hub-visual-hero__description,
html.dsbn-high-contrast .dsbn-inside-hero__title,
html.dsbn-high-contrast .dsbn-inside-breadcrumb,
html.dsbn-high-contrast .carousel-title {
	background: #000000 !important;
	width: fit-content !important;
	padding: 0.2em 0.5em !important;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

/* Image-left/image-right slides are the one slideshow layout that does NOT
   render through .carousel-title/.dsbn-slideshow-copy (see style.css's own
   comment on .dsbn-slideshow-split__body) — they use a Kicker/Heading/
   Subtitle sitting directly on the slide's own admin-picked background
   color/image, set as an inline style the box above never reaches. Same
   solid-box treatment, scoped to just these two layouts so it isn't
   redundantly applied a second time inside the already-boxed
   .carousel-title used by every other layout. */
html.dsbn-high-contrast .carousel-item--layout-image-left .dsbn-slideshow-title,
html.dsbn-high-contrast .carousel-item--layout-image-left .dsbn-slideshow-subtitle,
html.dsbn-high-contrast .carousel-item--layout-image-right .dsbn-slideshow-title,
html.dsbn-high-contrast .carousel-item--layout-image-right .dsbn-slideshow-subtitle {
	background: #000000 !important;
	color: #FFFFFF !important;
	width: fit-content !important;
	padding: 0.2em 0.5em !important;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

/* A per-slide "Text color: Dark" choice (carousel-item--text-dark, from the
   dsbn-slideshow plugin's Text color field) forces ink text in normal mode.
   Here the slideshow text sits on a forced solid-black box, where dark text
   would be illegible — reassert white over that plugin-driven !important
   override. The html.dsbn-high-contrast prefix keeps this ahead of style.css's
   own equal-class override on specificity so it always wins in this mode. */
html.dsbn-high-contrast .carousel-item .dsbn-slideshow-copy,
html.dsbn-high-contrast .carousel-item .dsbn-slideshow-copy>*:not(.dsbn-btn),
html.dsbn-high-contrast .carousel-item .dsbn-slideshow-split__body,
html.dsbn-high-contrast .carousel-item .dsbn-slideshow-split__body>*:not(.dsbn-btn) {
	color: #FFFFFF !important;
}

/* Force a darker scrim than the default --dsbn-color-backdrop token
   for stronger contrast against the page content in high-contrast mode. */
html.dsbn-high-contrast .dsbn-modal__backdrop {
	background: rgba(0, 0, 0, 0.85) !important;
}

/* --- Base page + text ------------------------------------------ */
html.dsbn-high-contrast body,
html.dsbn-high-contrast #main-content {
	background-color: #000000 !important;
	color: #FFFFFF !important;
}

html.dsbn-high-contrast h1,
html.dsbn-high-contrast h2,
html.dsbn-high-contrast h3,
html.dsbn-high-contrast h4,
html.dsbn-high-contrast h5,
html.dsbn-high-contrast h6 {
	color: #FFFFFF !important;
}

/* Many components hardcode a dark text colour directly (not via a
   shared token) for body copy/eyebrows/titles against their normal
   light card backgrounds — e.g. .dsbn-card-carousel__eyebrow,
   .dsbn-news-card__text, .dsbn-card-carousel__text. Rather than
   chase every individual BEM class, force every text-level element
   to white so nothing can render invisible against the forced black
   card backgrounds above. */
html.dsbn-high-contrast p,
html.dsbn-high-contrast li,
html.dsbn-high-contrast dt,
html.dsbn-high-contrast dd,
html.dsbn-high-contrast blockquote,
html.dsbn-high-contrast figcaption,
html.dsbn-high-contrast label,
html.dsbn-high-contrast span,
html.dsbn-high-contrast address,
html.dsbn-high-contrast time {
	color: #FFFFFF !important;
}

/* --- Links + buttons -------------------------------------------- */
html.dsbn-high-contrast a {
	color: #FFFFFF !important;
	text-decoration: underline;
}

html.dsbn-high-contrast .skip-link {
	background-color: #000000 !important;
	color: #FFFFFF !important;
	border: 2px solid #FFFFFF;
}

html.dsbn-high-contrast a:visited {
	color: #CCCCCC !important;
}

html.dsbn-high-contrast .dsbn-btn,
html.dsbn-high-contrast .wp-block-button__link,
html.dsbn-high-contrast input[type="submit"] {
	background-color: #000000 !important;
	color: #FFFFFF !important;
	border: 2px solid #FFFFFF !important;
	text-decoration: none;
}

html.dsbn-high-contrast .dsbn-btn:hover,
html.dsbn-high-contrast .wp-block-button__link:hover {
	background-color: #FFFFFF !important;
	color: #000000 !important;
}

/* Bare <button> elements without one of the classes above are almost all
   custom icon-only components (modal close X, card-carousel chevron
   controls, FAQ +/- toggles, etc.) that already have their OWN correctly
   token-driven background/icon treatment — forcing a background here (as
   an earlier version of this file did) clobbered that on hover, painting
   the button and its masked icon both solid white and making the icon
   disappear. Only force a visible border colour + text colour (some,
   like .dsbn-carousel-tabs__tab, have real text content coloured via
   --dsbn-color-primary, which is black in this palette). */
html.dsbn-high-contrast button {
	border-color: #FFFFFF !important;
	color: #FFFFFF !important;
}

/* Card "stretched link" overlays (.dsbn-card__link, .dsbn-news-card__link,
   .dsbn-image-link-card__link, .dsbn-card-carousel__link) are invisible
   click-target anchors absolutely positioned over the ENTIRE card
   (inset: -1px) for whole-card clickability — they are not visible
   buttons themselves. The generic .wp-block-button__link rule above
   was painting them solid black, hiding the real image/text underneath.
   Keep them fully transparent. */
html.dsbn-high-contrast .dsbn-card__link .wp-block-button__link,
html.dsbn-high-contrast .dsbn-news-card__link .wp-block-button__link,
html.dsbn-high-contrast .dsbn-image-link-card__link .wp-block-button__link,
html.dsbn-high-contrast .dsbn-card-carousel__link .wp-block-button__link {
	background-color: transparent !important;
	border: none !important;
}

/* "Watch Now" video buttons (.dsbn-btn--watch, .dsbn-btn--play-full) are
   designed to float transparently/translucently over a video thumbnail —
   the generic solid-black-box button rule above was clobbering that,
   turning them into an unexpected opaque box. Text is already forced
   white by the rules above, so these stay legible without needing the
   solid fill; just keep them free of the generic button treatment. */
html.dsbn-high-contrast .dsbn-btn--watch,
html.dsbn-high-contrast .dsbn-btn--watch .wp-block-button__link,
html.dsbn-high-contrast .dsbn-btn--play-full,
html.dsbn-high-contrast .dsbn-btn--play-full .wp-block-button__link {
	background-color: rgba(0, 0, 0, 0.6) !important;
	border: none !important;
}

/* The generic button:hover rule above (solid white flash) was also
   clobbering these on hover, breaking their floating-over-video look.
   Keep hover subtle: just darken slightly, no white flash. */
html.dsbn-high-contrast .dsbn-btn--watch:hover,
html.dsbn-high-contrast .dsbn-btn--watch .wp-block-button__link:hover,
html.dsbn-high-contrast .dsbn-btn--play-full:hover,
html.dsbn-high-contrast .dsbn-btn--play-full .wp-block-button__link:hover {
	background-color: rgba(0, 0, 0, 0.85) !important;
	color: #FFFFFF !important;
}

/* --- Any element still painting a raw/hardcoded background ------ */
html.dsbn-high-contrast section,
html.dsbn-high-contrast .dsbn-section,
html.dsbn-high-contrast .wp-block-group,
html.dsbn-high-contrast .dsbn-card,
html.dsbn-high-contrast .dsbn-icon-card,
html.dsbn-high-contrast .dsbn-modal__content,
html.dsbn-high-contrast .dsbn-utility-bar,
html.dsbn-high-contrast .dsbn-site-header,
html.dsbn-high-contrast .dsbn-primary-nav__submenu,
html.dsbn-high-contrast .dsbn-primary-nav,
html.dsbn-high-contrast .dsbn-megamenu,
html.dsbn-high-contrast .dsbn-megamenu__sublist,
html.dsbn-high-contrast .dsbn-home-menu,
html.dsbn-high-contrast .dsbn-home-menu__item,
html.dsbn-high-contrast footer,
html.dsbn-high-contrast .dsbn-hub-hero__nav {
	background-color: #000000 !important;
	background-image: none !important;
	color: #FFFFFF !important;
}

/* Adjacent sections normally read as distinct bands via different
   background colours/tints (palette utility classes, .dsbn-section--
   cream/gray/alt, or bespoke per-template classes like the homepage's
   .dsbn-home-template__belong/__quick/__image-links, which have no
   shared naming convention to hook a conditional rule onto) — all of
   that becomes the SAME flat black here, so two originally-distinct
   sections now run together with no visible boundary at all (e.g. the
   homepage's quick-links menu into "Who We Are" into the image-links
   row). Rather than try to detect "was this pair actually different
   colours before" (unreliable — too many different mechanisms create
   that distinction sitewide), add one consistent seam between EVERY
   adjacent section — matches the same "add a seam wherever a colour-
   based boundary would otherwise vanish" approach already used for the
   header/utility-bar/footer above.

   Scoped OUT of any page carrying a sidebar (.dsbn-inside-sidebar —
   page.php/page-hub.php/page-sub-page-with-nav.php): on those templates
   every .dsbn-section sits in the narrower content COLUMN alongside the
   sidebar, not full page width, so the seam only spans the column and
   looks like a stray disconnected line floating next to the sidebar
   instead of a real full-width section boundary. Full-width templates
   (front-page.php, landing-page.php, page-sub-page-no-nav.php, etc. —
   nothing with :has(.dsbn-inside-sidebar) true) keep the seam. */
html.dsbn-high-contrast body:not(:has(.dsbn-inside-sidebar)) section+section,
html.dsbn-high-contrast body:not(:has(.dsbn-inside-sidebar)) .dsbn-section+.dsbn-section {
	border-top: 1px solid #FFFFFF !important;
}

/* Pagination links (search.php/index.php/page-news.php archive listing)
   have a hardcoded `background:#fff` (not a token) — the generic `a {
   color:#fff !important }` rule above still forces their text white
   regardless, so untouched they render fully invisible white-on-white. */
html.dsbn-high-contrast .page-numbers {
	background-color: #000000 !important;
	border-color: #FFFFFF !important;
	color: #FFFFFF !important;
}

html.dsbn-high-contrast .page-numbers.current {
	background-color: #FFFFFF !important;
	color: #000000 !important;
}

html.dsbn-high-contrast .page-numbers.dots {
	background-color: transparent !important;
	border-color: transparent !important;
}

/* Emergency banner — header.php's #emergency_notification is just a passive
   JS-toggled wrapper with no background/box-model of its own; the visible
   red bar is .emergency-notification, the feed's OWN outermost element
   (js/emergency.js injects .emergency-notification > .emergency-inner >
   .emergency-msg inside that wrapper). Overriding the outer #id here would
   paint white on an invisible zero-size box while the inner div's own
   hardcoded background-color:#bc2e2d shows through untouched — has to
   target .emergency-notification directly. Normal mode is white-on-red,
   and the site-wide force-white-text rule would otherwise put white text
   straight onto that red background too once high-contrast's own base
   rules get involved: an active emergency notification would be unreadable
   exactly when it matters most. Inverted (white bg / black text), matching
   the same flag-like treatment already used for .page-numbers.current, so
   it stays both readable and visually distinct from the rest of the page. */
html.dsbn-high-contrast .emergency-notification {
	background-image: none !important;
	background-color: #FFFFFF !important;
	color: #000000 !important;
	border: 2px solid #000000 !important;
}

/* The container color above is inherited, but the sitewide h1-h6 and `a`
   force-white-text rules further down target the feed's own <h1>/<h2>/link
   elements directly with !important, which wins over inheritance — same
   white-on-white trap the container fix above was meant to close. Also
   covers .emergency-date-posted (unused by the feed today, kept defensive
   like style.css's own rule for it) — its normal-mode #FF7371 would be
   near-invisible on the forced white background too. */
html.dsbn-high-contrast #emergency_notification h1,
html.dsbn-high-contrast #emergency_notification h2,
html.dsbn-high-contrast #emergency_notification h3,
html.dsbn-high-contrast #emergency_notification a,
html.dsbn-high-contrast #emergency_notification p {
	color: #000000 !important;
}

/* style.css's .emergency-msg background-image icon is a raster asset
   (images/emergency/notification-icon.png), not a CSS-drawn shape — unlike
   the heading/link text above, its color can't be flipped with a simple
   `color` override. Hiding it here (padding-left reset to match) is the
   same tradeoff already made for narrow screens, where the icon disappears
   too — safer than guessing whether the asset is light-on-transparent and
   would actually survive a filter:invert. */
html.dsbn-high-contrast .emergency-msg {
	background-image: none !important;
	padding-left: 0 !important;
	padding-top: 0 !important;
}

/* The homepage slideshow (#main-content > .carousel) isn't a .dsbn-section
   itself (it's the DSBN_Slideshow_Render plugin's own markup), so the
   sibling-based rule above never fires for the FIRST real section right
   after it — same "boundary disappears once everything's black" problem,
   just for the one non-.dsbn-section case sitewide. */
html.dsbn-high-contrast #main-content>.carousel {
	border-bottom: 1px solid #FFFFFF !important;
}

/* Every card type gets a REAL border, not just a recoloured one — several
   card variants (.dsbn-card, .dsbn-card--fill) have no border at all by
   default (only border-radius/box-shadow), so overriding border-color
   alone was a no-op and they were rendering as borderless black boxes
   indistinguishable from the page background. */
html.dsbn-high-contrast .dsbn-card,
html.dsbn-high-contrast .dsbn-card--fill,
html.dsbn-high-contrast .dsbn-card--fill .dsbn-card__head,
html.dsbn-high-contrast .dsbn-card--fill .dsbn-card__body,
html.dsbn-high-contrast .dsbn-icon-card,
html.dsbn-high-contrast .dsbn-modal__content,
html.dsbn-high-contrast .dsbn-video-card,
html.dsbn-high-contrast .dsbn-staff-card,
html.dsbn-high-contrast .dsbn-hub-hero__nav {
	border: 2px solid #FFFFFF !important;
}

/* --- Decorative-only effects: high contrast should read as flat and
   unambiguous, so strip soft depth/glow/blur treatments that only matter
   in the colour theme. Functional motion (menu open/close, accordion
   chevrons, carousel sliding, hover-lift transforms) is left alone —
   only pure decoration is removed here. `:focus-visible` is explicitly
   excluded: several stretched-link cards (.dsbn-card__link etc.) use an
   inset box-shadow as their REAL visible focus indicator (WCAG 2.4.7),
   not decoration — killing it unconditionally removed a compliance
   feature, which is the opposite of this mode's purpose. --- */
html.dsbn-high-contrast *:not(:focus-visible) {
	box-shadow: none !important;
}

html.dsbn-high-contrast * {
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

/* Home-menu (quick menu below the slideshow) per-item colour glow on
   hover — a soft radial gradient wash unique to each icon's brand tint.
   Purely decorative colour; remove it rather than try to recolour it. */
html.dsbn-high-contrast .dsbn-home-menu::before {
	display: none !important;
}

/* Megamenu links already get the universal `a { text-decoration:
   underline }` rule above as their "this is a link" signal. They ALSO
   have their own full-width border-bottom row-divider by default (a
   subtle light-grey list separator, unrelated to underlining) — in
   white-on-black that divider reads as a second, wider line sitting
   right under the real underline, looking like a double underline.
   Drop the divider in high contrast; item spacing/padding is enough. */
html.dsbn-high-contrast .dsbn-megamenu__link {
	border-bottom: none !important;
}

/* Hamburger icon bars read their colour from --dsbn-color-primary (the
   brand blue, intentional in the normal theme) — black in this palette,
   so the icon disappeared against the black header. */
html.dsbn-high-contrast .dsbn-menu-toggle__bar {
	background-color: #FFFFFF !important;
}

/* The open mobile nav dropdown and the inside-page hero banner both sit
   directly above page content with no boundary of their own — harmless
   in the colour theme (different background shades already separated
   them) but everything is black here, so add a visible seam instead. */
html.dsbn-high-contrast .dsbn-primary-nav.is-open,
html.dsbn-high-contrast .dsbn-inside-hero {
	border-bottom: 2px solid #FFFFFF !important;
}

/* Same reasoning for the main site header (logo/nav row) and the utility
   bar above it — both are now solid black same as everything else, so
   without their own seam they blend straight into whatever comes next
   (hero banner, or the utility bar blending into the nav row below it). */
html.dsbn-high-contrast .dsbn-site-header {
	border-bottom: 2px solid #FFFFFF !important;
}

html.dsbn-high-contrast .dsbn-utility-bar {
	border-bottom: 1px solid #FFFFFF !important;
}

html.dsbn-high-contrast .dsbn-site-footer {
	border-top: 2px solid #FFFFFF !important;
}

/* --- Images: keep real content photos visible with a clear boundary
   against the black background (their pixel content can't be recoloured
   to the token palette). Scoped to core/image content (.wp-block-image)
   rather than every <img> so small decorative UI icons (home-menu icons,
   site logo, nav chevrons) don't get an odd little border box. --- */
html.dsbn-high-contrast .wp-block-image img {
	border: 1px solid #FFFFFF;
}

html.dsbn-high-contrast .dsbn-home-menu__icon img,
html.dsbn-high-contrast .dsbn-logo {
	border: none !important;
}

/* The home-menu icons are muted grey SVGs (grayscale + 72% opacity) meant
   to sit on a light background — nearly invisible against the forced
   black background here. Invert them to solid white. */
html.dsbn-high-contrast .dsbn-home-menu__icon {
	filter: brightness(0) invert(1) !important;
	opacity: 1 !important;
}

/* The header site logo (dsbn-logo-hor-lg.png) is brand-blue line art on a
   genuinely transparent background — it doesn't get swapped to the forced
   black/white palette the way text and tokens do, so it stays brand-blue
   against the forced-black background here. Same fix as the home-menu
   icons above: brightness(0) flattens the opaque blue pixels to black,
   invert(1) flips that to solid white, and the transparent background is
   untouched since filter only operates on RGB, not alpha. */
html.dsbn-high-contrast .dsbn-logo {
	filter: brightness(0) invert(1) !important;
}

/* The footer logo (dsbn-logo-vert-border.png) is a different asset — a
   solid-color badge (opaque blue card, no transparency), not transparent
   line art, so the invert trick above would flatten the whole opaque
   rectangle to one solid white block instead of revealing a mark. Treat it
   like the real-photo rule above instead: leave its own colours alone and
   just add a boundary so the badge doesn't blend into the forced-black
   background. */
html.dsbn-high-contrast .dsbn-site-footer__logo {
	border: 1px solid #FFFFFF;
}

/* Same issue, same fix: the hub-hero/inside-nav sidebar's per-item icons
   (.dsbn-hub-hero__nav-icon) are also colour <img> files at 70% opacity,
   tuned for a light background. */
html.dsbn-high-contrast .dsbn-hub-hero__nav-icon {
	filter: brightness(0) invert(1) !important;
	opacity: 1 !important;
}

/* --- Decorative-only elements (backgrounds glows/blurs behind
   cards, hover glows, etc.) — hide rather than force-recolour. --- */
html.dsbn-high-contrast [class*="glow"],
html.dsbn-high-contrast [class*="blob"] {
	display: none !important;
}

/* --- Focus visibility: always the strongest signal in high
   contrast mode, regardless of what the base theme already does. --- */
html.dsbn-high-contrast :focus-visible {
	outline: 3px solid #FFFFFF !important;
	outline-offset: 2px !important;
}

/* --- The toggle button itself shows its own on state clearly --- */
.dsbn-utility-bar .dsbn-utility-bar__high-contrast {
	/* Constant padding regardless of pressed state, so toggling doesn't
	   resize the button and shove neighbouring utility-bar items sideways
	   — only background/colour change to signal the on state.
	   Needs the 2-class compound selector here: style.css's own
	   `.dsbn-utility-bar button` reset (class+tag = higher specificity
	   than a single class) was beating a plain `.dsbn-utility-bar__high-contrast`
	   rule regardless of stylesheet load order. */
	padding: 0.3rem 0.5rem;
	border-radius: 4px;
}

.dsbn-utility-bar__high-contrast[aria-pressed="true"] {
	background-color: #FFFFFF;
	color: #000000;
}

.dsbn-utility-bar__high-contrast[aria-pressed="true"] .material-symbols-outlined {
	color: #000000 !important;
}

/* The tooltip's normal-mode background is --dsbn-color-ink, which THIS FILE
   itself redefines to white a few lines up (line 31) — left alone it would
   be a white box with the hardcoded white text still set in style.css,
   invisible. Forced back to a real black box + border, matching the
   "real border on every popover" HC convention rather than just recolouring
   what's already there. */
.dsbn-utility-bar__tooltip {
	background-color: #000000 !important;
	color: #FFFFFF !important;
	border: 1px solid #FFFFFF;
}

.dsbn-utility-bar__tooltip::before {
	border-bottom-color: #000000 !important;
}

/* =============================================================
   GAPS FOUND IN THE 2026-07-28 SYSTEMATIC PASS
   -------------------------------------------------------------
   Everything below was found by tracing every component against
   the cascade above rather than spot-checking — see
   docs/phase-plan.md's Accessibility section for the full list
   and computed contrast ratios.
   ============================================================= */

/* --- Community Connections plugin: legend + filter badges ---
   .dsbn-cc-legend hardcodes a white background; the generic h1-h6/p
   force-rules above then flip its text white too, on TOP of that
   untouched white background. The filter badges read --bs-primary/
   --bs-warning, both of which flatten to white above, so badge
   background and the generic white text collide there too. */
html.dsbn-high-contrast .dsbn-cc-legend {
	background: #000000 !important;
	border: 2px solid #FFFFFF;
}

html.dsbn-high-contrast .dsbn-cc-filter-badge {
	background: #FFFFFF !important;
	color: #000000 !important;
	border: 2px solid #FFFFFF;
}

/* The visible letter ("A"/"B"/"C") is a nested inner <span
   aria-hidden="true">, not text directly on .dsbn-cc-filter-badge itself —
   the generic `span { color: #FFFFFF !important }` rule above independently
   forces THAT span white regardless of what colour its badge parent wants,
   so a partner-level badge (a plain, non-button span — no aria-pressed
   state to hook a different rule onto, unlike the legend buttons below)
   rendered a white letter on the white circle above: invisible. Inherit
   instead of letting the generic span rule win. Higher specificity
   (0,2,2) than the generic `span` rule (0,1,2) beats it regardless of
   source order, and covers both this badge's own default state and the
   unpressed-button state below (whichever colour that state sets becomes
   what this inherits). */
html.dsbn-high-contrast .dsbn-cc-filter-badge span {
	color: inherit !important;
}

/* Unselected state: outline-only instead of a second solid fill, so
   selected vs. unselected stays visually distinct without relying on
   the decorative opacity dip (removed here — HC strips decorative-only
   effects everywhere else, this is the same rule applied consistently). */
html.dsbn-high-contrast button.dsbn-cc-filter-badge[aria-pressed="false"] {
	background: #000000 !important;
	color: #FFFFFF !important;
	opacity: 1 !important;
}

/* --- Public contact form (dsbn-basic-form) ---
   The form now uses a real dsbn-form component (plugin CSS) + a .dsbn-btn
   submit, so the submit button is covered by the .dsbn-btn rule above. The
   inputs, notices and inline errors still need forcing legible on black:
   the token borders/tints the plugin CSS uses all flatten in this palette. */
html.dsbn-high-contrast .dsbn-form :is(input, textarea, select) {
	/* background-COLOR, not the shorthand — the shorthand would also reset the
	   select's background-repeat/position/size and tile its chevron. */
	background-color: #000000 !important;
	color: #FFFFFF !important;
	border: 1px solid #FFFFFF !important;
}

html.dsbn-high-contrast .dsbn-form ::placeholder {
	color: #CCCCCC !important;
}

/* The select's dropdown chevron is a baked dark-navy SVG — invisible on the
   forced-black field. Swap it for a white one. */
html.dsbn-high-contrast .dsbn-form select {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

html.dsbn-high-contrast .dsbn-form__notice {
	background: #000000 !important;
	color: #FFFFFF !important;
	border: 2px solid #FFFFFF !important;
}

/* Red on black fails contrast, so lean on weight + underline instead. */
html.dsbn-high-contrast .dsbn-form__error {
	color: #FFFFFF !important;
	font-weight: 700;
	text-decoration: underline;
}

/* --- Search icon (CSS-mask, filled via --dsbn-color-primary) ---
   Sits inside the nav, whose background is forced black above; the
   icon's own fill token also flattens to black, so both go black on
   black with nothing to tell them apart. */
html.dsbn-high-contrast .dsbn-primary-nav__search-icon {
	background: #FFFFFF !important;
}

/* --- Video-modal close icon ---
   The X itself is a baked-in white SVG (can't be recoloured by any
   token), so it's fine at rest against its semi-transparent dark
   circle — the problem is only the :hover state, whose background
   reads --dsbn-color-accent-blue, which flattens to white above. */
html.dsbn-high-contrast .dsbn-video-modal__close:hover {
	background-color: #000000 !important;
}

/* --- Staff-card contact icons/bullets + PDF-button icon/button ---
   All read --dsbn-color-primary as an icon-mask/bullet fill, sitting
   on --dsbn-color-surface — both flatten to black above, so every one
   of these is a black icon on a black card with nothing to see. */
html.dsbn-high-contrast .dsbn-staff-card__contact-list li::before,
html.dsbn-high-contrast .dsbn-staff-card__schools-list li::before,
html.dsbn-high-contrast .wp-block-file.dsbn-pdf-button::before {
	background-color: #FFFFFF !important;
}

/* The button itself has no border at all, so once its background
   flattens to the same black as its parent card, its shape/boundary
   disappears entirely even though its (hardcoded) white label text
   stays legible. */
html.dsbn-high-contrast .wp-block-file.dsbn-pdf-button .wp-block-file__button {
	border: 2px solid #FFFFFF;
}

/* --- Legacy Bootstrap-era content button/testimonial classes ---
   Can't confirm these are still used by any currently-published page
   without DB access (same caveat already documented for other legacy
   classes in bootstrap-shim.css), but landing-page.php is a real,
   currently-selectable template, and the fix is cheap either way:
   each hardcodes a white background with a hardcoded blue text color,
   which the generic `a{color:#fff!important}` rule above then turns
   into white-on-white once the hardcoded background goes untouched. */
html.dsbn-high-contrast .landing-page-header-button a,
html.dsbn-high-contrast .landing-page-offset-feature-button a,
html.dsbn-high-contrast .dsbn-generic-button-wrapper a {
	background: #000000 !important;
	color: #FFFFFF !important;
	border: 2px solid #FFFFFF;
}

html.dsbn-high-contrast .testimonial-container {
	background: #000000 !important;
	border: 2px solid #FFFFFF;
}

/* --- Icon-card gradient badge ---
   --dsbn-icon-color is a LOCAL custom property (set per-gradient in
   patterns.css), never redeclared by the global token flatten above,
   so it's the one decorative element that slipped through — it was
   rebuilt in the 2026-07-23/24 icon-card rework, after this file was
   first written. html.dsbn-high-contrast .dsbn-icon-card__icon alone
   (0-2-1) already outranks every single .is-icon-grad-* modifier
   (0-2-0), so one rule covers all eight gradients without repeating
   the selector per variant. */
html.dsbn-high-contrast .dsbn-icon-card__icon {
	background: #000000 !important;
	border: 2px solid #FFFFFF;
	--dsbn-icon-color: #FFFFFF;
}

/* --- FAQ open-state icon: token drift, not a failure ---
   The closed state already reads --dsbn-color-ink (so it already goes
   white here automatically); the open state was hardcoded to #4B6EBC
   instead of the same token — passes AA even in HC by coincidence, but
   never actually flattens like everything else. Point it at the token
   it was clearly meant to match. (The expandable icon-card's own
   gray/blue toggle icon is a deliberate two-tone accent unrelated to
   the ink token, not a drift bug — left as-is; it also already passes
   AA in HC per the same audit.) */
html.dsbn-high-contrast .dsbn-faq__item[open] summary::after {
	background-color: var(--dsbn-color-ink) !important;
}