/*
 * Accessibility button + panel, and the display modes it switches on.
 * Markup: template-parts/a11y-panel.php · behaviour: assets/js/a11y.js.
 * Modes are classes on <html> (a11y-still, a11y-contrast…). They change the
 * site only — "body > :not(.a11y)" — never the panel itself, so it stays usable.
 *
 * Token exception: the color modes (high contrast, black and yellow) and the
 * keyboard focus ring use plain black / white / yellow / blue on purpose —
 * that's what those modes are for.
 */

/* ============ Button ============ */

.a11y__toggle {
	position: fixed;
	z-index: 1000;
	inset-block-end: 16px;
	inset-inline-end: 16px;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 2px solid var(--c-white);
	border-radius: 50%;
	background: var(--c-text);
	color: var(--c-white);
	cursor: pointer;
	transition: background-color var(--dur-fast);
}

.a11y__toggle:hover,
.a11y__toggle[aria-expanded="true"] {
	background: var(--c-accent-text);
}

/* ============ Panel ============ */

.a11y__panel {
	position: fixed;
	z-index: 1001;
	inset-block-end: 76px;
	inset-inline-end: 16px;
	width: min(360px, calc(100vw - 32px));
	max-height: calc(100vh - 100px);
	max-height: calc(100dvh - 100px);
	overflow-y: auto;
	padding: 20px;
	border: 1px solid var(--c-line-strong);
	background: var(--c-white);
	color: var(--c-text);
	box-shadow: 0 8px 28px color-mix(in srgb, var(--c-footer-bg) 18%, transparent);
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	line-height: 1.4;
	text-align: start;
}

.a11y__panel[hidden] {
	display: none;
}

.a11y__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-block-end: 14px;
}

.a11y__title {
	margin: 0;
	font-size: var(--fs-h2);
	font-weight: var(--fw-bold);
	line-height: 1.2;
}

.a11y__close {
	display: flex;
	padding: 6px;
	border: 0;
	background: none;
	color: var(--c-text);
	cursor: pointer;
}

.a11y__subtitle {
	margin: 18px 0 8px;
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
	color: var(--c-body);
}

/* Text size / zoom: label, −, value, + */
.a11y__stepper {
	display: grid;
	grid-template-columns: 1fr 40px 56px 40px;
	align-items: center;
	margin-block-end: 8px;
}

.a11y__stepper button {
	height: 40px;
	padding: 0;
	border: 1px solid var(--c-line-strong);
	background: var(--c-cream);
	color: var(--c-text);
	font: inherit;
	font-size: 20px;
	cursor: pointer;
}

.a11y__stepper button:hover {
	border-color: var(--c-text);
}

.a11y__stepper-label,
.a11y__foot a,
.a11y__reset {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.a11y__icon {
	flex: none;
}

.a11y__value {
	text-align: center;
	font-weight: var(--fw-semibold);
}

.a11y__tiles {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.a11y__subtitle + .a11y__tiles {
	margin-block-start: 0;
}

.a11y__tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	height: 100%;
	min-height: 76px;
	padding: 10px 8px;
	border: 1px solid var(--c-line-strong);
	background: var(--c-cream);
	color: var(--c-text);
	font: inherit;
	font-size: var(--fs-small);
	line-height: 1.25;
	text-align: center;
	cursor: pointer;
}

.a11y__tile:hover {
	border-color: var(--c-text);
}

.a11y__tile[aria-pressed="true"] {
	border-color: var(--c-text);
	background: var(--c-text);
	color: var(--c-white);
}

.a11y__foot {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	margin-block-start: 20px;
	padding-block-start: 16px;
	border-block-start: 1px solid var(--c-line);
}

.a11y__foot a,
.a11y__reset {
	padding: 0;
	border: 0;
	background: none;
	color: var(--c-text);
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.a11y__reset {
	font-weight: var(--fw-semibold);
}

/* The panel ignores the site's modes (it's outside them), but a readable font
   and bigger text for the panel too make sense. */
.a11y-readable .a11y__panel {
	font-family: Arial, 'Helvetica Neue', sans-serif;
}

/* ============ Modes ============ */

/* Keyboard navigation: a thick, unmistakable ring on whatever has focus. */
.a11y-keyboard body :focus {
	outline: 3px solid #000 !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 6px #FFE500 !important;
}

/* Stop animations: everything jumps to its end state; the slideshow and
   parallax stop (assets/js/home.js). Same as the reduced-motion rules. */
.a11y-still *,
.a11y-still *::before,
.a11y-still *::after {
	animation-duration: 0.01ms !important;
	animation-iteration-count: 1 !important;
	animation-delay: 0ms !important;
	transition-duration: 0.01ms !important;
	transition-delay: 0ms !important;
	scroll-behavior: auto !important;
}

.a11y-still .intro-veil,
.a11y-still .hero__pause {
	display: none;
}

.a11y-still .hero__zoom,
.a11y-still .hero .rise {
	animation: none;
}

.a11y-still .thumb > img,
.a11y-still .thumb > .thumb__placeholder,
.a11y-still .press-list--grid .press-row {
	transform: none !important;
}

/* Readable font */
.a11y-readable body > :not(.a11y),
.a11y-readable body > :not(.a11y) * {
	font-family: Arial, 'Helvetica Neue', sans-serif !important;
	letter-spacing: 0.02em !important;
}

/* Highlight links */
.a11y-links body > :not(.a11y) a {
	text-decoration: underline !important;
	text-underline-offset: 3px !important;
	outline: 2px dashed currentColor;
	outline-offset: 2px;
}

/* Highlight headings */
.a11y-headings body > :not(.a11y) :is(h1, h2, h3, h4, h5, h6) {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* Zoom (level set on <html> as --a11y-zoom). The header keeps its size: zoomed,
   the desktop menu would run out of room (the site's layout sizes don't change). */
.a11y-zoomed body > :not(.a11y, .site-header, .mobile-menu) {
	zoom: var(--a11y-zoom, 1);
}

/* Filters: monochrome, sepia, invert (photos invert back so they look normal) */
.a11y-mono body > :not(.a11y) {
	filter: grayscale(1);
}

.a11y-sepia body > :not(.a11y) {
	filter: sepia(1);
}

.a11y-invert body > :not(.a11y) {
	filter: invert(1) hue-rotate(180deg);
}

/* The page background itself isn't inside the inverted parts: cream, inverted. */
.a11y-invert body {
	background: #05080D;
}

.a11y-invert body > :not(.a11y) :is(img, video, picture img) {
	filter: invert(1) hue-rotate(180deg);
}

/* High contrast (white / black / blue links) and black and yellow.
   Backgrounds go see-through so photos stay visible; text laid over photos
   gets a solid box. Decorative shades over photos are hidden. */
:is(.a11y-contrast, .a11y-yellow) body {
	background: var(--a11y-bg) !important;
}

.a11y-contrast { --a11y-bg: #FFF; --a11y-fg: #000; --a11y-link: #0033CC; }
.a11y-yellow { --a11y-bg: #000; --a11y-fg: #FFE500; --a11y-link: #FFF; }

:is(.a11y-contrast, .a11y-yellow) body > :not(.a11y),
:is(.a11y-contrast, .a11y-yellow) body > :not(.a11y) *:not(img, svg, svg *, video, dialog) {
	background-color: transparent !important;
	background-image: none !important;
	color: var(--a11y-fg) !important;
	border-color: var(--a11y-fg) !important;
	text-shadow: none !important;
	box-shadow: none !important;
}

:is(.a11y-contrast, .a11y-yellow) body > :not(.a11y) a,
:is(.a11y-contrast, .a11y-yellow) body > :not(.a11y) a * {
	color: var(--a11y-link) !important;
}

/* :not(#a11y-x) only raises priority above the "see-through" rule. */
:is(.a11y-contrast, .a11y-yellow) body :is(.site-header, .hero__text, .project-card__scrim span, .lightbox, .mobile-menu, .consent):not(#a11y-x) {
	background-color: var(--a11y-bg) !important;
}

:is(.a11y-contrast, .a11y-yellow) .hero__text {
	padding: 12px;
}

:is(.a11y-contrast, .a11y-yellow) :is(.hero__shade, .intro-veil, .filters__block) {
	display: none !important;
}

/* The chosen filter / language normally shows with a background — underline instead. */
:is(.a11y-contrast, .a11y-yellow) [aria-current] {
	text-decoration: underline !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 4px !important;
}

:is(.a11y-contrast, .a11y-yellow) .project-card__scrim {
	opacity: 1 !important;
}

/* Big cursors */
.a11y-cursor-white body,
.a11y-cursor-white body * {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M6 4l0 36 10-9 7 15 7-3-7-15 13 0z' fill='%23fff' stroke='%23000' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 4, auto !important;
}

.a11y-cursor-black body,
.a11y-cursor-black body * {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M6 4l0 36 10-9 7 15 7-3-7-15 13 0z' fill='%23000' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 4, auto !important;
}

/* Descriptions on hover (tooltip) */
.a11y-tip {
	position: fixed;
	z-index: 1002;
	max-width: min(320px, calc(100vw - 24px));
	padding: 8px 12px;
	background: #000;
	color: #FFF;
	font-family: Arial, 'Helvetica Neue', sans-serif;
	font-size: 16px;
	line-height: 1.35;
	pointer-events: none;
}

.a11y-tip[hidden] {
	display: none;
}

/* Image descriptions shown on the photos */
.a11y-caption {
	position: absolute;
	z-index: 2;
	inset-inline: 0;
	inset-block-end: 0;
	padding: 6px 10px;
	background: color-mix(in srgb, #000 82%, transparent);
	color: #FFF;
	font-family: Arial, 'Helvetica Neue', sans-serif;
	font-size: 15px;
	line-height: 1.3;
	text-align: start;
	pointer-events: none;
}

/* Out of the way when printing. */
@media print {
	.a11y,
	.a11y-tip {
		display: none !important;
	}
}