/* Accessibility toolbar and the html.a11y-* modes it controls. */

/* ---------- Toggle and panel ---------- */
.a11y-toolbar { position: relative; }
.a11y-toolbar__toggle {
	display: inline-flex; align-items: center; gap: var(--ce-s1, 4px);
	min-height: 40px; min-width: 44px; padding: 0 var(--ce-s2, 8px); border: 0; background: none; font-weight: 600; color: inherit;
}
.a11y-toolbar__toggle[aria-expanded="true"] { color: var(--ce-red-dark, #bf2d2d); }
.a11y-toolbar__toggle .icon { width: 1.25em; height: 1.25em; flex: none; }
.a11y-toolbar__panel {
	position: absolute; top: 100%; left: 0; z-index: 1100; min-width: 240px; padding: var(--ce-s2, 8px);
	display: grid; gap: var(--ce-s1, 4px); background: var(--ce-white, #fff); color: var(--ce-text, #363636);
	border: 1px solid var(--ce-border, #cfcfcf); border-radius: var(--ce-radius-btn, 8px);
	box-shadow: var(--ce-shadow, 0 4px 16px rgba(17, 17, 17, 0.12)); font-size: 1rem; text-align: left;
}
.a11y-toolbar__panel[hidden] { display: none; }
/* No JS: the options cannot work, so only the statement link is shown, inline. */
html:not(.a11y-js) .a11y-toolbar__toggle, html:not(.a11y-js) .a11y-toolbar__option, html:not(.a11y-js) .a11y-toolbar__reset { display: none; }
html:not(.a11y-js) .a11y-toolbar__panel[hidden] { display: block; position: static; min-width: 0; padding: 0; border: 0; background: none; box-shadow: none; }
html:not(.a11y-js) .a11y-toolbar__actions { margin: 0; padding: 0; border: 0; font-size: 0.875rem; }
.a11y-toolbar__option, .a11y-toolbar__reset {
	display: flex; align-items: center; gap: var(--ce-s2, 8px); width: 100%; min-height: 44px; padding: 0 var(--ce-s3, 12px);
	border: 1px solid var(--ce-border, #cfcfcf); border-radius: var(--ce-radius-btn, 8px); background: var(--ce-white, #fff); color: inherit; font-weight: 600; text-align: left;
}
.a11y-toolbar__option::before {
	content: ""; flex: none; width: 1.1em; height: 1.1em; border: 2px solid currentColor; border-radius: 4px; background: transparent;
}
.a11y-toolbar__option[aria-pressed="true"] { background: var(--ce-black, #111); color: var(--ce-white, #fff); border-color: var(--ce-black, #111); }
.a11y-toolbar__option[aria-pressed="true"]::before { background: var(--ce-white, #fff); box-shadow: inset 0 0 0 3px var(--ce-black, #111); }
.a11y-toolbar__state { font-weight: 400; opacity: 0.9; }
.a11y-toolbar__state:not(:empty)::before { content: "("; }
.a11y-toolbar__state:not(:empty)::after { content: ")"; }
.a11y-toolbar__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ce-s2, 8px); margin-top: var(--ce-s1, 4px); padding-top: var(--ce-s2, 8px); border-top: 1px solid var(--ce-border, #cfcfcf); }
.a11y-toolbar__link { font-weight: 600; }
.a11y-toolbar__reset { width: auto; min-height: 36px; font-weight: 400; }

@media (max-width: 599.98px) {
	.a11y-toolbar__label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
	.a11y-toolbar:not(.a11y-toolbar--floating) .a11y-toolbar__panel { position: fixed; left: 0; right: 0; border-radius: 0 0 var(--ce-radius-btn, 8px) var(--ce-radius-btn, 8px); max-height: calc(100vh - 40px); overflow: auto; }
}

/* Fallback when the header did not provide the top bar slot. */
.a11y-toolbar--floating { position: fixed; left: var(--ce-s4, 16px); bottom: var(--ce-s4, 16px); z-index: 1100; }
.a11y-toolbar--floating .a11y-toolbar__toggle { background: var(--ce-black, #111); color: var(--ce-white, #fff); border-radius: 999px; padding: 0 var(--ce-s4, 16px); min-height: 44px; box-shadow: var(--ce-shadow, 0 4px 16px rgba(17, 17, 17, 0.12)); }
.a11y-toolbar--floating .a11y-toolbar__panel { top: auto; bottom: calc(100% + var(--ce-s2, 8px)); }

/* ---------- High contrast ---------- */
html.a11y-contrast {
	--ce-text: #000; --ce-black: #000; --ce-grey: #000; --ce-grey-light: #000; --ce-bg-light: #fff; --ce-border: #000; --ce-white: #fff;
	--ce-red: #a40e0e; --ce-red-dark: #a40e0e; --ce-red-darkest: #a40e0e; --ce-blue: #0645ad; --ce-yellow: #0645ad; --ce-shadow: none;
	--ce-focus: 0 0 0 3px #fff, 0 0 0 6px #0645ad;
}
html.a11y-contrast body { color: #000; background: #fff; }
html.a11y-contrast a { color: #0645ad; text-decoration: underline; }
html.a11y-contrast :focus-visible { outline: 3px solid #0645ad; outline-offset: 2px; box-shadow: 0 0 0 2px #fff; }
html.a11y-contrast img { border: 1px solid #000; }
html.a11y-contrast .hero, html.a11y-contrast .site-footer, html.a11y-contrast .skip-link:focus,
html.a11y-contrast .hero__title, html.a11y-contrast .hero__date, html.a11y-contrast .hero__excerpt,
html.a11y-contrast .footer__title, html.a11y-contrast .footer__subtitle, html.a11y-contrast .site-footer a { background: #fff; color: #000; }
html.a11y-contrast .hero, html.a11y-contrast .site-footer, html.a11y-contrast .skip-link:focus { border: 2px solid #000; }
html.a11y-contrast .site-footer a, html.a11y-contrast .hero__title a { color: #0645ad; }
html.a11y-contrast .site-footer a:hover, html.a11y-contrast .site-footer a:focus { color: #000; }
html.a11y-contrast .site-footer :focus-visible { outline-color: #0645ad; box-shadow: 0 0 0 2px #fff; }
html.a11y-contrast .lang-switcher__link[aria-current="page"],
html.a11y-contrast .a11y-toolbar__option[aria-pressed="true"], html.a11y-contrast .a11y-toolbar--floating .a11y-toolbar__toggle { background: #000; color: #fff; border-color: #000; }
html.a11y-contrast .a11y-toolbar__panel, html.a11y-contrast .a11y-toolbar__option, html.a11y-contrast .a11y-toolbar__reset { border-color: #000; }
/* Every button, the block ones included: black on white or white on black, never the link blue on
   red. !important because editor colour presets (.has-*-background-color) carry it too. */
html.a11y-contrast :is(.button, .wp-block-button__link, .wp-element-button, .wp-block-file__button, .ce-btn) { background: #000 !important; color: #fff !important; border: 2px solid #000 !important; text-decoration: none; }
html.a11y-contrast :is(.button--outline, .button--ghost, .is-style-outline > .wp-block-button__link, .ce-btn--secondary),
html.a11y-contrast :is(.button, .wp-block-button__link, .wp-element-button, .wp-block-file__button, .ce-btn):is(:hover, :focus) { background: #fff !important; color: #000 !important; }
html.a11y-contrast :is(.button, .wp-block-button__link, .wp-element-button, .wp-block-file__button, .ce-btn):is(:hover, :focus) { text-decoration: underline; }
/* Home contact strip: black band in the normal design, white box here. */
html.a11y-contrast .contact-strip { background: #fff; color: #000; border: 2px solid #000; }
html.a11y-contrast .contact-strip h2 { color: #000; }
html.a11y-contrast .contact-strip a { color: #0645ad; }
html.a11y-contrast .contact-strip a:hover, html.a11y-contrast .contact-strip a:focus { color: #000; }
/* Logos: no frame; the footer one is drawn white for the black footer (main.css), so here it keeps its own dark colour. */
html.a11y-contrast :is(.brand__upv, .footer__upv) img { border: 0; }
html.a11y-contrast .footer__upv img { filter: none; }
html.a11y-contrast .card__topic { border: 1px solid #000; }
html.a11y-contrast .error-404__code { color: #000; }

/* ---------- Larger text ---------- */
html.a11y-large { font-size: 112.5%; }
html.a11y-larger { font-size: 125%; }

/* ---------- Text spacing (WCAG 1.4.12) ---------- */
html.a11y-spacing :where(body, body *:not(svg, svg *)) { line-height: 1.8 !important; letter-spacing: 0.06em !important; word-spacing: 0.16em !important; }
html.a11y-spacing p { margin-bottom: 2em !important; }

/* ---------- Reduced motion ---------- */
html.a11y-motion, html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

/* ---------- Windows high contrast (forced colours) ---------- */
/* The pressed state is drawn with backgrounds, which forced colours drop: use system colours.
   "html .a11y-toolbar" matches the weight of the high-contrast rules above, which would
   otherwise paint it black again when both modes are on (the same for the current language).
   The footer logo keeps its dark plate (main.css), so it stays white here. */
@media (forced-colors: active) {
	html .a11y-toolbar .a11y-toolbar__option[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
	html .a11y-toolbar .a11y-toolbar__option[aria-pressed="true"]::before { background: HighlightText; box-shadow: inset 0 0 0 3px Highlight; }
	html.a11y-contrast .lang-switcher__link[aria-current="page"] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
	html.a11y-contrast .footer__upv img { filter: brightness(0) invert(1); }
}