/* Accessibility toolbar and the html.a11y-* modes it controls (spec § 2.1, § 3.4; from the Casa).
   One instance: in the masthead from 900 px, at the end of the menu panel below (main.js moves
   it; its placement there is in the header section of main.css). Tokens from main.css. */

/* ---------- Toggle and panel ---------- */
.a11y-toolbar { position: relative; }
.a11y-toolbar__toggle {
	display: inline-flex; align-items: center; gap: var(--cu-s2);
	min-height: 44px; min-width: 44px; padding: 0 var(--cu-s2); border: 0; border-radius: var(--cu-radius-btn);
	background: none; font-weight: 600; color: var(--cu-black);
}
.a11y-toolbar__toggle:hover, .a11y-toolbar__toggle[aria-expanded="true"] { background: var(--cu-bg-light); color: var(--cu-red-dark); }
.a11y-toolbar__toggle .icon { width: 24px; height: 24px; flex: none; vertical-align: 0; }
.a11y-toolbar__panel {
	position: absolute; top: 100%; left: 0; z-index: 1100; min-width: 260px; padding: var(--cu-s2);
	display: grid; gap: var(--cu-s1); background: var(--cu-white); color: var(--cu-text);
	border: 1px solid var(--cu-grey-light); border-radius: var(--cu-radius-btn);
	box-shadow: var(--cu-shadow); 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(--cu-s2); width: 100%; min-height: 44px; padding: 0 var(--cu-s3);
	border: 1px solid var(--cu-grey-light); border-radius: var(--cu-radius-btn); background: var(--cu-white); color: var(--cu-black); 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:hover, .a11y-toolbar__reset:hover { background: var(--cu-bg-light); }
.a11y-toolbar__option[aria-pressed="true"] { background: var(--cu-black); color: var(--cu-white); border-color: var(--cu-black); }
.a11y-toolbar__option[aria-pressed="true"]::before { background: var(--cu-white); box-shadow: inset 0 0 0 3px var(--cu-black); }
.a11y-toolbar__state { font-weight: 400; }
.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(--cu-s2); margin-top: var(--cu-s1); padding-top: var(--cu-s2); border-top: 1px solid var(--cu-border); }
.a11y-toolbar__link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.a11y-toolbar__reset { width: auto; font-weight: 400; }

/* Fallback when the header did not provide its slot. */
.a11y-toolbar--floating { position: fixed; left: var(--cu-s4); bottom: var(--cu-s4); z-index: 1100; }
.a11y-toolbar--floating .a11y-toolbar__toggle { background: var(--cu-black); color: var(--cu-white); border-radius: 999px; padding: 0 var(--cu-s4); box-shadow: var(--cu-shadow); }
.a11y-toolbar--floating .a11y-toolbar__panel { top: auto; bottom: calc(100% + var(--cu-s2)); }

/* ---------- High contrast (≥ 7:1, black on white, links #0645ad underlined) ---------- */
/* Every colour token, the coral ones included: rules and borders turn black. */
html.a11y-contrast {
	--cu-text: #000; --cu-black: #000; --cu-grey: #000; --cu-grey-light: #000; --cu-bg-light: #fff; --cu-border: #000; --cu-white: #fff;
	--cu-coral: #000; --cu-coral-tint: #fff; --cu-red: #a40e0e; --cu-red-dark: #a40e0e; --cu-red-darkest: #a40e0e;
	--cu-focus-color: #0645ad; --cu-yellow: #0645ad; --cu-shadow: none;
}
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; }
/* Boxes drawn with a background get a border (the notice keeps its 2 px one). */
html.a11y-contrast :is(.cu-notice, .is-style-cu-notice) { border: 2px solid #000; }
html.a11y-contrast :is(.card, .result, .event-box, .post-nav__link, .cu-copy) { border: 1px solid #000; }
/* Footer: white, as in the Casa; the graphite logo replaces the white one and the UPV mark keeps its colour. */
html.a11y-contrast .site-footer, html.a11y-contrast .skip-link:focus { background: #fff; color: #000; border: 2px solid #000; }
html.a11y-contrast :is(.footer__title, .footer__tagline, .footer__copy, .footer__hours, .footer__name) { color: #000; }
html.a11y-contrast .site-footer 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 .footer__logo-img--negative { display: none !important; }
html.a11y-contrast .footer__logo-img--positive { display: block !important; }
html.a11y-contrast .footer__upv img { filter: none; }
html.a11y-contrast .lang-switcher__link[aria-current="page"], html.a11y-contrast .pagination .page-numbers.current,
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 .card__day { background: #000; color: #fff; }
/* 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, .cu-btn) { background: #000 !important; color: #fff !important; border: 2px solid #000 !important; text-decoration: none; }
html.a11y-contrast :is(.button--outline, .is-style-outline > .wp-block-button__link, .cu-btn--outline, .cu-btn--secondary),
html.a11y-contrast :is(.button, .wp-block-button__link, .wp-element-button, .wp-block-file__button, .cu-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, .cu-btn):is(:hover, :focus) { text-decoration: underline; }
html.a11y-contrast img:not(.brand__upv img, .brand__home img, .footer__logo img, .footer__upv img) { border: 1px solid #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). */
@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); }
	html.a11y-contrast .footer__logo { background: #fff; } /* the graphite logo on its own plate */
}
@media print {
	.a11y-toolbar { display: none !important; }
}