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

   Two halves:
     1-6  the toolbar itself - the corner button and the panel of options;
     7-13 the display modes, each keyed off an attribute on <html> that
          assets/js/accessibility.js sets.

   Adding a mode means adding a block here and a button in
   inc/accessibility.php; there is no JavaScript to change.

   The panel deliberately uses its own colours rather than the design tokens,
   because it has to stay legible inside every mode it switches on - a panel
   themed in --masm-paper would disappear the moment the reader inverted the
   page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The toolbar's own tokens
   -------------------------------------------------------------------------- */
.masm-a11y {
	--a11y-bg: #11294B;
	--a11y-bg-soft: #1B3A64;
	--a11y-fg: #FFFFFF;
	--a11y-fg-dim: #BFD0E6;
	--a11y-accent: #DFA426;
	--a11y-accent-ink: #11294B;
	--a11y-radius: 14px;
	--a11y-shadow: 0 18px 44px rgba(9, 22, 40, .34);

	position: fixed;
	bottom: 22px;
	z-index: 9999;
	font-family: var(--masm-sans, system-ui, sans-serif);
	line-height: 1.3;
}

/* The toolbar sizes itself; the theme's box model must not change that. */
.masm-a11y,
.masm-a11y *,
.masm-a11y *::before,
.masm-a11y *::after {
	box-sizing: border-box;
}

.masm-a11y[data-position="bottom-right"] {
	right: 22px;
}

.masm-a11y[data-position="bottom-left"] {
	left: 22px;
}

/* Visually hidden, still read out. */
.masm-a11y-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   2. The corner button
   -------------------------------------------------------------------------- */
.masm-a11y-toggle {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	margin: 0;
	padding: 0;
	border: 2px solid var(--a11y-accent);
	border-radius: 50%;
	background: var(--a11y-bg);
	color: var(--a11y-fg);
	cursor: pointer;
	box-shadow: var(--a11y-shadow);
	transition: transform .18s ease, background-color .18s ease;
}

.masm-a11y-toggle:hover,
.masm-a11y-toggle:focus-visible {
	background: var(--a11y-bg-soft);
	transform: scale(1.06);
}

.masm-a11y-toggle:focus-visible,
.masm-a11y-panel :focus-visible {
	outline: 3px solid var(--a11y-accent);
	outline-offset: 3px;
}

.masm-a11y-toggle svg {
	width: 28px;
	height: 28px;
}

/* --------------------------------------------------------------------------
   3. The panel
   -------------------------------------------------------------------------- */
.masm-a11y-panel {
	position: absolute;
	bottom: calc(100% + 14px);
	width: 352px;
	max-width: calc(100vw - 32px);
	max-height: calc(100vh - 120px);
	overflow-y: auto;
	padding: 18px;
	border-radius: var(--a11y-radius);
	background: var(--a11y-bg);
	color: var(--a11y-fg);
	box-shadow: var(--a11y-shadow);
}

.masm-a11y[data-position="bottom-right"] .masm-a11y-panel {
	right: 0;
}

.masm-a11y[data-position="bottom-left"] .masm-a11y-panel {
	left: 0;
}

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

.masm-a11y-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.masm-a11y-title {
	margin: 0;
	font-family: var(--masm-stamp, var(--masm-sans, sans-serif));
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--a11y-fg);
}

.masm-a11y-close {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 8px;
	background: none;
	color: var(--a11y-fg);
	cursor: pointer;
}

.masm-a11y-close:hover {
	background: rgba(255, 255, 255, .12);
}

/* --------------------------------------------------------------------------
   4. Option tiles
   -------------------------------------------------------------------------- */
.masm-a11y-group {
	margin: 16px 0 8px;
	font-family: var(--masm-stamp, var(--masm-sans, sans-serif));
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--a11y-fg-dim);
}

.masm-a11y-group:first-of-type {
	margin-top: 0;
}

.masm-a11y-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.masm-a11y-opt {
	position: relative;
	display: grid;
	justify-items: center;
	align-content: center;
	gap: 6px;
	min-height: 86px;
	padding: 12px 6px;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 10px;
	background: rgba(255, 255, 255, .06);
	color: var(--a11y-fg);
	font: inherit;
	font-size: 11px;
	line-height: 1.35;
	text-align: center;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}

.masm-a11y-opt:hover {
	background: rgba(255, 255, 255, .14);
	border-color: rgba(255, 255, 255, .4);
}

.masm-a11y-opt[aria-pressed="true"] {
	background: var(--a11y-accent);
	border-color: var(--a11y-accent);
	color: var(--a11y-accent-ink);
	font-weight: 700;
}

/* The tick badge in the tile's corner, shown only on the active tile. */
.masm-a11y-tick {
	position: absolute;
	top: 5px;
	right: 5px;
	display: none;
	color: #1E8E3E;
}

.masm-a11y-tick svg {
	width: 18px;
	height: 18px;
	display: block;
}

.masm-a11y-opt[aria-pressed="true"] .masm-a11y-tick {
	display: block;
}

.masm-a11y-ico {
	display: grid;
	place-items: center;
}

.masm-a11y-lbl {
	display: block;
}

.masm-a11y-state {
	display: block;
	font-size: 10px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--a11y-fg-dim);
}

.masm-a11y-opt[aria-pressed="true"] .masm-a11y-state {
	color: var(--a11y-accent-ink);
	opacity: .78;
}

/* --------------------------------------------------------------------------
   5. The current text size, under the text tiles
   -------------------------------------------------------------------------- */
.masm-a11y-readout {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 8px 0 0;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--a11y-fg-dim);
}

.masm-a11y-readout span {
	font-weight: 700;
	color: var(--a11y-fg);
}

/* --------------------------------------------------------------------------
   6. Reset
   -------------------------------------------------------------------------- */
.masm-a11y-reset {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin-top: 12px;
	padding: 11px;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 10px;
	background: none;
	color: var(--a11y-fg);
	font: inherit;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
}

.masm-a11y-reset:hover {
	background: rgba(255, 255, 255, .14);
}

.masm-a11y-reset svg {
	width: 16px;
	height: 16px;
}

@media (max-width: 480px) {
	.masm-a11y {
		bottom: 14px;
	}

	.masm-a11y[data-position="bottom-right"] {
		right: 14px;
	}

	.masm-a11y[data-position="bottom-left"] {
		left: 14px;
	}

	.masm-a11y-panel {
		width: calc(100vw - 28px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.masm-a11y-toggle {
		transition: none;
	}

	.masm-a11y-toggle:hover,
	.masm-a11y-toggle:focus-visible {
		transform: none;
	}
}

/* ==========================================================================
   DISPLAY MODES
   ========================================================================== */

/* --------------------------------------------------------------------------
   7. High contrast

   Done by swapping the design tokens rather than with a filter, so every
   stylesheet that reads them follows along: black paper, white ink, yellow
   for every rule, link and accent. The short aliases in tokens.css are
   declared on :root and point at these, so they re-resolve on their own.
   -------------------------------------------------------------------------- */
html[data-a11y-contrast="high"] {
	--masm-paper: #000000;
	--masm-paper-deep: #000000;
	--masm-surface: #0B0B0B;
	--masm-ink: #FFFFFF;
	--masm-ink-soft: #F2F2F2;
	--masm-ink-faint: #E2E2E2;
	--masm-rule: #FFE000;
	--masm-ochre: #FFE000;
	--masm-rust: #FFE000;
	--masm-rust-ink: #FFE000;
	--masm-hero-scrim: linear-gradient(100deg, rgba(0, 0, 0, .96) 0%, rgba(0, 0, 0, .9) 38%, rgba(0, 0, 0, .5) 56%, rgba(0, 0, 0, .15) 70%);

	--coral: #FFE000;
	--sage: #FFE000;
	--orchid: #FFE000;
	--sky: #FFE000;
	--ochre-ink: #FFE000;
	--coral-ink: #FFE000;
	--sage-ink: #FFE000;
	--orchid-ink: #FFE000;
	--sky-ink: #FFE000;
}

/* The chapter classes set --c / --c-ink to literal hues of their own. */
html[data-a11y-contrast="high"] [class*="is-chapter-"] {
	--c: #FFE000;
	--c-ink: #FFE000;
}

html[data-a11y-contrast="high"] body {
	background: #000;
	color: #fff;
}

/* Anything with a colour hard-coded rather than tokenised. */
html[data-a11y-contrast="high"] :is(h1, h2, h3, h4, h5, h6, p, li, dt, dd, td, th, label, figcaption, blockquote, cite, small, strong, em, span):not(.masm-a11y, .masm-a11y *) {
	color: #fff;
}

html[data-a11y-contrast="high"] :is(a, a :is(h1, h2, h3, h4, h5, h6, p, span, em, strong)):not(.masm-a11y, .masm-a11y *) {
	color: #FFE000;
}

html[data-a11y-contrast="high"] :is(.masthead, .masthead *, .site-footer, .site-footer *, .masm-band, .spb-row, .spb-col, .wrap, section, article, aside, header, footer, main):not(.masm-a11y, .masm-a11y *) {
	background-color: transparent;
	background-image: none;
	box-shadow: none;
}

html[data-a11y-contrast="high"] :is(.masthead, .site-footer) {
	background-color: #000;
	border-color: #FFE000;
}

html[data-a11y-contrast="high"] :is(input, select, textarea, button, .wpcf7 input, .wpcf7 textarea):not(.masm-a11y, .masm-a11y *) {
	background: #000;
	color: #fff;
	border-color: #FFE000;
}

html[data-a11y-contrast="high"] :is(input[type="submit"], button[type="submit"], .wp-element-button):not(.masm-a11y, .masm-a11y *) {
	background: #FFE000;
	color: #000;
	border-color: #FFE000;
}

html[data-a11y-contrast="high"] :is(hr, .rule, .page-head::after):not(.masm-a11y, .masm-a11y *) {
	border-color: #FFE000;
	background-color: #FFE000;
}

/* Photographs stay photographs, but gain an edge against the black. */
html[data-a11y-contrast="high"] :is(img, video):not(.masm-a11y, .masm-a11y *) {
	outline: 1px solid #FFE000;
	outline-offset: 0;
}

/* The collage behind the hero is a photograph too bright to read white
   text over once the page is black, so it is dimmed rather than hidden. */
html[data-a11y-contrast="high"] :is(.masm-hero, .masm-hero-slide) :is(img, .hero-media) {
	filter: brightness(.45) contrast(1.15);
}

/* The brand kit includes a reverse (white) logo for dark backgrounds, which is
   what high contrast is. The site logo is the editor's own <img>, so its file
   cannot be swapped from CSS; the reverse version is drawn on the link behind
   it instead and the colour image is hidden, which leaves the normal logo and
   the Site Identity setting untouched. */
html[data-a11y-contrast="high"] :is(.masthead, .site-footer) :is(.custom-logo-link, .wp-block-site-logo a) {
	display: block;
	background: url("../img/logo-reverse.svg") left center / contain no-repeat;
}

html[data-a11y-contrast="high"] :is(.masthead, .site-footer) :is(.custom-logo, .wp-block-site-logo img) {
	visibility: hidden;
}

/* --------------------------------------------------------------------------
   8. Invert and saturation

   `filter` on any element other than the root makes it a containing block
   for fixed-position descendants, which would unstick the header. On the
   root element it does not, which is why both of these sit on <html>. The
   combined rule is needed because filter does not accumulate across rules.
   -------------------------------------------------------------------------- */
html[data-a11y-invert="1"] {
	filter: invert(1) hue-rotate(180deg);
}

html[data-a11y-sat="1"] {
	filter: saturate(.45);
}

html[data-a11y-sat="2"] {
	filter: grayscale(1);
}

html[data-a11y-invert="1"][data-a11y-sat="1"] {
	filter: invert(1) hue-rotate(180deg) saturate(.45);
}

html[data-a11y-invert="1"][data-a11y-sat="2"] {
	filter: invert(1) hue-rotate(180deg) grayscale(1);
}

/* Invert the inverted things back: photographs should still look right, and
   the toolbar has to keep its own colours so its buttons stay readable. */
html[data-a11y-invert="1"] :is(img, video, iframe, .masm-a11y) {
	filter: invert(1) hue-rotate(180deg);
}

html[data-a11y-invert="1"][data-a11y-sat="2"] :is(img, video, iframe) {
	filter: invert(1) hue-rotate(180deg) grayscale(1);
}


/* The logo is artwork, not a photograph. Section 8 turns images back the right
   way round so photographs still look like themselves; the logo is better off
   inverting with the page, which keeps it legible against the reversed paper. */
html[data-a11y-invert="1"] :is(.masthead, .site-footer) :is(img, .custom-logo) {
	filter: none;
}

/* --------------------------------------------------------------------------
   9. Highlight links
   -------------------------------------------------------------------------- */
html[data-a11y-links="1"] a:not(.masm-a11y a) {
	text-decoration: underline !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 3px !important;
	outline: 1px dashed currentColor;
	outline-offset: 2px;
}

html[data-a11y-links="1"] a:not(.masm-a11y a):hover,
html[data-a11y-links="1"] a:not(.masm-a11y a):focus-visible {
	background: var(--masm-ochre, #DFA426);
	color: var(--masm-ink, #11294B);
	outline-style: solid;
}

/* --------------------------------------------------------------------------
   10. Text size

   The multiplier only. The hundred and thirty rules it multiplies live in
   the generated assets/css/a11y-text.css.
   -------------------------------------------------------------------------- */
html[data-a11y-fs] {
	--a11y-fs: 1;
}

/* --------------------------------------------------------------------------
   11. Text spacing

   letter-spacing and word-spacing are inherited, but the design sets
   letter-spacing explicitly on eyebrows, stamps and nav items, so the
   override has to reach those too.
   -------------------------------------------------------------------------- */
html[data-a11y-spacing="1"] body :not(.masm-a11y, .masm-a11y *) {
	letter-spacing: .06em !important;
	word-spacing: .14em !important;
}

html[data-a11y-spacing="2"] body :not(.masm-a11y, .masm-a11y *) {
	letter-spacing: .12em !important;
	word-spacing: .26em !important;
}

/* --------------------------------------------------------------------------
   12. Line height
   -------------------------------------------------------------------------- */
html[data-a11y-line="1"] body :not(.masm-a11y, .masm-a11y *) {
	line-height: 1.7 !important;
}

html[data-a11y-line="2"] body :not(.masm-a11y, .masm-a11y *) {
	line-height: 2.1 !important;
}

/* --------------------------------------------------------------------------
   13. Print

   None of the reading aids belong on paper, and neither does the button.
   -------------------------------------------------------------------------- */
@media print {
	.masm-a11y {
		display: none;
	}

	html[data-a11y-invert="1"],
	html[data-a11y-sat] {
		filter: none;
	}
}