@charset "UTF-8";

/**
 * accessibility.css 1.0.0
 *
 * Accessibility — toggle, focus-visible, zoom and contrast options.
 *
 * SECTIONS
 * VARS                 — custom properties
 * ANIMATIONS           — transitions
 * ACCESSIBILITY        — #accessibility-toggle
 * FOCUS-VISIBLE        — :focus-visible rules per context
 * ACCESSIBILITY OPTIONS — .accessibility-options, controller, switcher
 */



/* ================================================================================================== */
/* ============================================= CONFIG ============================================= */
/* ================================================================================================== */


:root {
	
}



/* ====================================================================================================== */
/* ============================================= ANIMATIONS ============================================= */
/* ====================================================================================================== */


/* ============================== REDUCED MOTION ============================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}



/* ================================================================================================= */
/* ============================================= THEME ============================================= */
/* ================================================================================================= */


/*
body.zoomed     == font-size changed (JS)
body.contrasted == colors changed (JS)
*/


/* ============================== ACCESSIBILITY-TOGGLE ============================== */

#accessibility-toggle {
	position: relative;
	z-index: 2100;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5em;
	line-height: 1;
	font-weight: var(--font-weight-bold);
}
#accessibility-toggle:after {
	display: none;
}


/* ============================== ACCESSIBILITY OPTIONS ============================== */

/* =============== OPTIONS =============== */

.accessibility-options {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1em;
	font-size: 1em;
	line-height: 1;
}
.accessibility-options > * {
	margin: 0;
	flex-grow: 1;
	flex-basis: 0;
}


/* =============== BUTTON CONTROLLER =============== */

.controller.button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5em;
	padding: 0;
	white-space: nowrap;
	pointer-events: none;
	color: var(--dark-color) !important;
	/*background: var(--bright-color) !important;*/
}
.controller.button::after {
	display: none;
}
.controller.button .increase,
.controller.button .decrease {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding: 1em;
	aspect-ratio: 1/1;
	pointer-events: all;
}
.controller.button .decrease {
	border-radius: 2em 0 0 2em;
}
.controller.button .increase {
	border-radius: 0 2em 2em 0;
}
.controller.button .increase:hover,
.controller.button .decrease:hover {
	color: var(--bright-color);
	/*background: var(--dark-color);*/
}


/* =============== BUTTON SWITCHER =============== */

a.switcher {
	position: relative;
	z-index: 10;
	padding-left: 4em;
	overflow: hidden;
}
a.switcher:before,
a.switcher:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate3d(0, -50%, 0);
	display: flex;
	justify-content: center;
	align-items: center;
}
a.switcher:before {
	content: "OFF";
	font-size: .75em;
	height: 100%;
	aspect-ratio: 1/1;
	color: var(--bright-color);
}
a.switcher:after {
	content: "";
	z-index: -1;
	height: 3em;
	width: 3em;
}
a.switcher.active {
	color: var(--bright-color);
}
a.switcher.active:before {
	content: "ON";
	left: 100%;
	transform: translate3d(-100%, -50%, 0);
}
a.switcher.active:after {
	width: 100%;
}


/* =============== HOVER =============== */

@media (hover: hover) {
	.controller.button .increase:hover,
	.controller.button .decrease:hover {
		background: var(--dark-color);
	}
	a.switcher:hover:before {
		left: 1em;
	}
	a.switcher:hover:after {
		width: 4em;
		background: var(--dark-color);
	}
	a.switcher.active:hover:before {
		left: calc(100% - 1em);
	}
	a.switcher.active:hover:after {
		width: calc(100% - 1em);
	}
}


/* ============================== FOCUS-VISIBLE ============================== */

/*
:focus         == hover and keyboard
:focus-visible == tab key only
tabindex = -1  == no keyboard
*/


/* =============== DEFAULT =============== */

button:focus-visible,
a:focus-visible {
	outline: solid;
	outline-width: var(--stroke-width);
	outline-offset: calc(var(--stroke-width) * -1);
}

p > a:focus-visible,
.read-more:focus-visible,
.link:focus-visible {
	outline-offset: calc(var(--stroke-width) * 2);
}


/* =============== BUTTONS =============== */

.buttons a:focus-visible,
.button:focus-visible,
.section-link:focus-visible {
	outline-offset: calc(var(--stroke-width) * 4);
}


/* =============== NAVBAR =============== */

#navbar a:focus-visible {
	outline-offset: 0;
}


/* =============== GRID FILTERS =============== */

nav.grid-filters a {
	outline-offset: calc(var(--stroke-width) * 2);
}


/* =============== LOGO =============== */

header .index:focus-visible {
	outline-offset: calc(var(--stroke-width) * 3);
}


/* =============== PRIMARY =============== */

nav.primary a:focus-visible {
	outline: none;
}
nav.primary a:focus-visible span {
	outline: solid;
	outline-width: var(--stroke-width);
	outline-color: var(--dark-color);
}