/*
 * Accessibility panel (U26).
 *
 * Ported from the kit's own stylesheet, which carries the whole panel and all
 * eight settings; only the markup was never exported, so there is no specimen
 * to check this against. Two things differ from the kit by necessity: it wraps
 * the page in .wf-root and we do not, so the settings hang off <html> and reach
 * main and the footer directly.
 */

.cu-a11y-btn {
	position: relative;
}

/* A dot on the trigger whenever any setting is on. */
.cu-a11y-btn.on::after {
	content: '';
	position: absolute;
	top: -2px;
	right: -2px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent);
}

.cu-a11y-back {
	position: fixed;
	inset: 0;
	z-index: 190;
	background: rgba(10, 12, 18, .42);
}

.cu-a11y-panel {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 191;
	width: min(400px, var(--vw100, 100vw));
	overflow-y: auto;
	background: var(--panel);
	color: var(--text);
	border-left: 1px solid var(--border-strong);
	box-shadow: -18px 0 48px rgba(0, 0, 0, .18);
	padding: 22px clamp(18px, 4vw, 28px) 32px;
	font-family: var(--sans);
}

.cu-a11y-panel :focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.cu-a11y-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--border);
}

.cu-a11y-head h2 {
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--text);
}

.cu-a11y-x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--border-strong);
	border-radius: 50%;
	color: var(--text);
	cursor: pointer;
}

.cu-a11y-x:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.cu-a11y-intro {
	font-size: 13px;
	line-height: 1.6;
	color: var(--text-soft);
	margin: 14px 0 6px;
}

.cu-a11y-row {
	padding: 16px 0;
	border-bottom: 1px solid var(--border);
}

.cu-a11y-lbl {
	display: block;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--text);
	margin-bottom: 10px;
}

.cu-a11y-seg {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border: 1px solid var(--border-strong);
}

.cu-a11y-seg button {
	background: transparent;
	border: none;
	border-left: 1px solid var(--border-strong);
	padding: 10px 6px;
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 500;
	color: var(--text-soft);
	cursor: pointer;
}

.cu-a11y-seg button:first-child {
	border-left: none;
}

.cu-a11y-seg button.on {
	background: var(--text);
	color: var(--bg);
}

.cu-a11y-seg button.on:hover {
	color: var(--bg);
}

/* The switch is the row: it carries its own rule under it. */
.cu-a11y-sw {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	text-align: left;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--border);
	padding: 15px 0;
	font-family: var(--sans);
	color: var(--text);
	cursor: pointer;
}

.cu-a11y-swl {
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.4;
}

.cu-a11y-swd {
	font-size: 12.5px;
	font-weight: 400;
	color: var(--text-mute);
}

.cu-a11y-tg {
	position: relative;
	flex: 0 0 auto;
	width: 42px;
	height: 24px;
	border-radius: 12px;
	border: 1px solid var(--border-strong);
	background: var(--bg-soft);
	transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.cu-a11y-tg::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--text-mute);
	transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.cu-a11y-sw[aria-checked="true"] .cu-a11y-tg {
	background: var(--accent);
	border-color: var(--accent);
}

.cu-a11y-sw[aria-checked="true"] .cu-a11y-tg::after {
	transform: translateX(18px);
	background: #fff;
}

.cu-a11y-reset {
	margin-top: 22px;
	width: 100%;
	padding: 13px 18px;
	background: transparent;
	border: 1px solid var(--border-strong);
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--text);
	cursor: pointer;
}

.cu-a11y-reset:hover,
.cu-a11y-seg button:hover,
.cu-a11y-sw:hover .cu-a11y-swl {
	color: var(--accent);
}

/* ---------- what the settings do ---------- */

/*
 * Text size. Only the content zooms: the header, the mobile menu and this panel
 * keep their size, or the controls no longer fit at 390px. --vw100 keeps the
 * full-width elements honest, since zoom makes 100vw lie.
 */
html.cu-a11y-fs-1 main,
html.cu-a11y-fs-1 .cu-footer {
	zoom: 1.12;
	--vw100: calc(100vw / 1.12);
}

html.cu-a11y-fs-2 main,
html.cu-a11y-fs-2 .cu-footer {
	zoom: 1.25;
	--vw100: calc(100vw / 1.25);
}

/* High contrast, stated separately for the two themes. */
html.cu-a11y-contrast {
	--bg: #ffffff !important;
	--bg-soft: #ffffff !important;
	--panel: #ffffff !important;
	--border: #5c5c5c !important;
	--border-strong: #111111 !important;
	--text: #000000 !important;
	--text-soft: #111111 !important;
	--text-mute: #262626 !important;
	/* The accent darkens too: #F18E00 on white is 2.4:1, which fails AA. */
	--accent: #8a4600 !important;
	--accent-soft: rgba(138, 70, 0, .10) !important;
	--accent-line: #8a4600 !important;
	--accent-text: #8a4600 !important;
	/* Stated even though the base view now says the same: this mode owns its
	   own contrast, so it must not inherit whatever the brand chooses for the
	   button. White on #8a4600 is 7.10:1; the #1a1a1a this mode used to
	   inherit was 2.45:1. */
	--on-accent: #ffffff !important;
}

html.cu-a11y-contrast[data-theme="dark"] {
	--bg: #000000 !important;
	--bg-soft: #000000 !important;
	--panel: #0b0b0d !important;
	--border: rgba(255, 255, 255, .55) !important;
	--border-strong: #ffffff !important;
	--text: #ffffff !important;
	--text-soft: #f2f2f2 !important;
	--text-mute: #e2e2e2 !important;
	--accent: #ffb04d !important;
	--accent-soft: rgba(255, 176, 77, .14) !important;
	--accent-line: #ffb04d !important;
	--accent-text: #ffb04d !important;
	/* The light accent takes dark lettering: white on #ffb04d is 1.81:1. */
	--on-accent: #1a1a1a !important;
}

/*
 * The bands that are dark in both themes.
 *
 * ui.css hands them the plain accent, which in the base view is the brand
 * orange and reads on navy. High contrast replaces that accent with #8a4600,
 * meant for white -- measured at 2.3:1 on the navy box. They take the
 * light-on-dark accent instead, the same one the dark contrast theme uses.
 */
html.cu-a11y-contrast :is(.cu-dark, .cu-spot-box, .cu-map-box, .cu-topbar--navy, .cu-gband, .cu-card--img, .cu-video) {
	--accent: #ffb04d !important;
	--accent-soft: rgba(255, 176, 77, .14) !important;
	--accent-line: #ffb04d !important;
	--accent-text: #ffb04d !important;
	--on-accent: #1a1a1a !important;
}

/* No prefers-color-scheme branch: dark is an explicit choice now, so a rule
   keyed on the attribute's absence never fires. See assets/tokens.css. */
/*
 * The hero states its colours literally, so that it stays light in dark mode;
 * high contrast therefore has to reach it by name. Its wash is cream in both
 * themes, so black is the contrasting choice either way.
 */
html.cu-a11y-contrast .cu-hero-copy .cu-h1,
html.cu-a11y-contrast .cu-hero-copy .cu-sub,
html.cu-a11y-contrast .cu-hero-meta {
	color: #000000 !important;
}

/* Text spacing, towards the WCAG 1.4.12 values. */
html.cu-a11y-spacing :is(p, li, dd, dt, blockquote, td, th, label, h1, h2, h3, h4, h5, h6) {
	line-height: 1.85 !important;
	letter-spacing: .04em !important;
	word-spacing: .14em !important;
}

html.cu-a11y-underline a {
	text-decoration: underline !important;
	text-decoration-thickness: 1px !important;
	text-underline-offset: .22em !important;
}

/* Motion off, which the scripts read as well. */
html.cu-a11y-nomotion,
html.cu-a11y-nomotion * {
	scroll-behavior: auto !important;
}

html.cu-a11y-nomotion *,
html.cu-a11y-nomotion *::before,
html.cu-a11y-nomotion *::after {
	animation-duration: 0s !important;
	animation-delay: 0s !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0s !important;
	transition-delay: 0s !important;
}

html.cu-a11y-nomotion .cu-zoom {
	transform: none !important;
}

/* A plainer typeface: the serif headings turn to the sans as well. */
html.cu-a11y-font body,
html.cu-a11y-font body *:not(svg):not(svg *) {
	font-family: var(--sans) !important;
}

html.cu-a11y-focus :focus-visible {
	outline: 3px solid var(--accent) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 7px var(--text) !important;
}

/* Enlarged text needs room: the row grid narrows and long words may break. */
html:is(.cu-a11y-fs-1, .cu-a11y-fs-2, .cu-a11y-font) .cu-row {
	grid-template-columns: 40px minmax(0, 1fr) !important;
	gap: 8px 16px !important;
}

html:is(.cu-a11y-fs-1, .cu-a11y-fs-2, .cu-a11y-font) .cu-row-end {
	grid-column: 2;
}

html:is(.cu-a11y-fs-1, .cu-a11y-fs-2, .cu-a11y-font, .cu-a11y-spacing) :is(main, footer) :is(h1, h2, h3, h4, p, li, a, span, em, strong, div) {
	overflow-wrap: anywhere;
}