/* =============================================================================
   Accessibility toolbar
   ========================================================================== */

/* ---- Font scaling -------------------------------------------------------
   Overrides the theme's own root-size token, so everything sized in rem/em
   (body, headings, buttons, gutters…) scales with it. Direct font-size is a
   fallback in case html font-size isn't wired to the token. Tune to taste. */
html.a11y-font-small{font-size: calc(var(--ama-html-font-size) - 2px)}
html.a11y-font-big{font-size: calc(var(--ama-html-font-size) + 2px)}

/* ---- High contrast ------------------------------------------------------
   Classic accessibility high-contrast: near-black surfaces, white text,
   yellow links. Token overrides handle the theme-driven bits; the forced
   layer below guarantees the scheme even on elements with hardcoded or
   utility backgrounds. */
html.a11y-contrast-high{
   background-color: #000 !important;

   --ama-body-color: rgb(255 255 255);
   --ama-body-color-rgb: 255, 255, 255;
   --ama-heading-color: rgb(255 255 255);
   --ama-body-bg: rgb(0 0 0);
   --ama-wrapper-bg: rgb(0 0 0);
   --ama-footer-bgcolor: rgb(0 0 0);
   --ama-footer-color: rgb(255 255 255);
   --ama-link-color: rgb(245, 225, 164);
   --ama-link-hover-color: rgb(255 255 255);
   --ama-marker-color: rgb(245, 225, 164);
}

/* Force the dark scheme everywhere (media keeps its own pixels either way). */
html.a11y-contrast-high body,
html.a11y-contrast-high body *:not(svg, path, .ama-langswitch__caret, .splide__pagination, a){
   background-color: #000 !important;
   background-image: none !important;
   color: #fff !important;
   border-color: #fff !important;
   box-shadow: none !important;
   text-shadow: none !important;
}

/* Keep white logo tiles white so dark logos stay visible on black. */
html.a11y-contrast-high body #wrapper .logo-item,
html.a11y-contrast-high body #wrapper .body__big-group,
html.a11y-contrast-high body #wrapper .body__big-group .splide__slide{background-color: #fff !important}

	html.a11y-contrast-high body #wrapper .logo-item img,
	html.a11y-contrast-high body #wrapper .body__big-group img,
	html.a11y-contrast-high body #wrapper .body__big-group .splide__slide img{background-color: #fff !important}

/* Links: yellow + always underlined, invert on hover/focus. */
html.a11y-contrast-high body a{color: #f5e1a4 !important; text-decoration: underline !important}
html.a11y-contrast-high body a:hover,
html.a11y-contrast-high body a:focus{color: #fff !important}

/* Yellow list markers + placeholders stay legible. */
html.a11y-contrast-high li::marker{color: #f5e1a4 !important}
html.a11y-contrast-high ::placeholder{color: #ccc !important; opacity: 1}

/* Buttons read as interactive: yellow outline on black, invert on hover. */
html.a11y-contrast-high body .btn,
html.a11y-contrast-high body .button,
html.a11y-contrast-high body .wpcf7-submit,
html.a11y-contrast-high body .wp-block-button__link,
html.a11y-contrast-high body button,
html.a11y-contrast-high body [type=submit],
html.a11y-contrast-high body [type=button]{
   color: #f5e1a4 !important;
   background: #000 !important;
   border: 2px solid #f5e1a4 !important
}
html.a11y-contrast-high body .btn:hover,
html.a11y-contrast-high body .button:hover,
html.a11y-contrast-high body .wpcf7-submit:hover,
html.a11y-contrast-high body .wp-block-button__link:hover,
html.a11y-contrast-high body button:hover,
html.a11y-contrast-high body [type=submit]:hover,
html.a11y-contrast-high body [type=button]:hover{color: #000 !important; background: #f5e1a4 !important}

html.a11y-contrast-high body #wrapper #menu-toggle > span{background-color: currentColor!important}

/* Masked divider stays visible on black. */
html.a11y-contrast-high body .wp-block-separator{background-color: #fff !important}

/* Clearly visible keyboard focus. */
html.a11y-contrast-high :focus-visible{outline: 3px solid #f5e1a4 !important; outline-offset: 2px !important}

/* Toolbar active button stays obvious (filled yellow). */
html.a11y-contrast-high body .ama-a11y-btn.is-active{color: #000 !important; background: #f5e1a4 !important; border-color: #f5e1a4 !important}

/* Header logo */
html.a11y-contrast-high .main-logo path[fill="#F9F6F0"]{fill: #000 !important}
html.a11y-contrast-high .main-logo path[fill="#071D49"]{fill: #f5e1a4 !important}

/* Splide arrows */
html.a11y-contrast-high body #wrapper button.splide__arrow{
	border: none !important;
	color: #000 !important;
	background: #f5e1a4 !important
}

/* ---- Toolbar ------------------------------------------------------------ */
.ama-a11y-toolbar{display: flex; flex-wrap: wrap; align-items: center; gap: 1rem}

.ama-a11y-group{display: flex; align-items: center; gap: .125rem}

.ama-a11y-label{font-size: var(--ama-sm-font-size); font-weight: 600; margin-right: .25rem}

.ama-a11y-btn{
	font-size: var(--ama-sm-font-size);
	line-height: 1em;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font: inherit;
	line-height: 1;
	color: inherit;
	background: transparent;
	border: none;
	border-radius: .3125rem;
	padding: 0;
	width: 1.5rem;
	height: 1.5rem;
}
.ama-a11y-btn[data-a11y-font="small"]{font-size: .625rem}
.ama-a11y-btn[data-a11y-font="big"]{font-size: 1.125rem}

.ama-a11y-btn:hover{background: rgb(var(--rgb-dark-blue) / .06)}
.ama-a11y-btn.is-active{
	color: var(--ama-white-color);
	background: var(--ama-cinnabar-color);
}
.ama-a11y-btn:focus-visible{outline: 3px solid var(--ama-cinnabar-color); outline-offset: 2px}

html.a11y-contrast-high body #wrapper .block-supporters .splide__pagination{background: none!important}