@charset "UTF-8";

/*
 * Theme  : Neutral
 * Version: 1.0.0
 * Author : hybrid.
 */


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

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


/* =============== ALTERATIONS =============== */

body.contrasted a.active,
body.contrasted a:hover {
	text-decoration: underline;
	text-decoration-thickness: .0625rem;
	-webkit-text-decoration-color: inherit;
	-moz-text-decoration-color: inherit;
	text-decoration-color: inherit;
}

body.contrasted #primary a.active span,
body.contrasted #primary a:hover span {
	text-decoration: underline;
	-webkit-text-decoration-color: inherit;
	-moz-text-decoration-color: inherit;
	text-decoration-color: inherit;
	text-decoration-thickness: .0625rem;
}

body.contrasted #primary a,
body.contrasted a.accessibility-toggle,
body.contrasted a.switcher,
body.contrasted nav.buttons a,
body.contrasted a.button {
	text-decoration: none !important;
}


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

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

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

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

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

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

nav.grid-filters a {
	outline-offset: calc(var(--logo-line-height) * 2);
}

#logo:focus-visible {
	outline-offset: calc(var(--logo-line-height) * 3);
}

#primary a:focus-visible {
	outline: none;
}

#primary a:focus-visible span {
	outline: solid;
	outline-width: var(--logo-line-height);
	outline-color: var(--dark-color);
}

body.introduced:not(.off) #primary a:focus-visible span {
	outline-color: var(--bright-color);
}

nav.mode .nav-tabs a:focus-visible {
	outline: 0;
}

nav.mode .nav-tabs a:focus-visible:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	height: 100%;
	width: 100%;
	padding: calc(var(--logo-line-height) * 2);
	transform: translate(-50%, -50%);
	box-shadow: inset 0 0 0 var(--logo-line-height);
}

.grid .event-link:focus-visible {
	outline: 0;
}

.grid .event-link:focus-visible:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	height: 100%;
	width: 100%;
	padding: calc(var(--logo-line-height) * 4);
	transform: translate(-50%, -50%);
	box-shadow: inset 0 0 0 var(--logo-line-height);
}


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

.accessibility-options {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1em;
	font-size: 1em;
	line-height: 1em;
}

.accessibility-options > * {
	margin: 0;
	flex-grow: 1;
	flex-basis: 0;
}

.fontSize-buttons {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5em;
	white-space: nowrap;
	box-shadow: inset 0 0 0 var(--logo-line-height);
}

.accessibility-options .fontSize {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding: 1em;
	aspect-ratio: 1/1;
}

.accessibility-options .fontSize:hover {
	color: var(--bright-color);
	background: var(--dark-color);
}


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

/* ex. accessibility contrast button */

a.switcher {
	position: relative;
	z-index: 10;
	color: var(--dark-color);
	box-shadow: inset 0 0 0 var(--logo-line-height);
	padding: 1em 1em 1em 4em;
}

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;
	background: var(--dark-color);
}

a.switcher.active {
	color: var(--bright-color);
	padding: 1em 4em 1em 1em;
	box-shadow: inset 0 0 0 var(--logo-line-height) var(--dark-color);
}

a.switcher.active:before {
	content: "ON";
	left: 100%;
	transform: translate3d(-100%, -50%, 0);
}

a.switcher.active:after {
	width: 100%;
}

@media (hover: hover) {
	a.switcher:hover:before {
		left: 1em;
	}

	a.switcher:hover:after {
		width: 4em;
	}

	a.switcher.active:hover:before {
		left: calc(100% - 1em);
	}

	a.switcher.active:hover:after {
		width: calc(100% - 1em);
	}
}