/* =============================================================
   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-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, the emergency banner's .bg-warning, 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 .carousel-title {
	background: #000000 !important;
	width: fit-content !important;
	padding: 0.2em 0.5em !important;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

/* 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-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 (js/emergency.js, external feed markup: .alert.bg-warning
   in header.php) — .bg-warning's --bs-warning token flattens to white in
   high-contrast mode (see --bs-warning above), and the site-wide
   force-white-text rule then puts white text on that same white
   background: an active emergency notification would be fully invisible
   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-color: #FFFFFF !important;
	color: #000000 !important;
	border: 2px solid #000000 !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-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;
}

/* 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;
}