/* TEXT-SIZE AND CONTRAST CONTROL — the control's own look (added 2026-09-25)
   Shared file: keep identical across themes.
   Colors come from the theme's --color-strong and --color-background, so the control
   follows the theme's palette and its higher-contrast mode.
   Sizes are in px on purpose: the control stays the same size while the visitor
   enlarges the page text. */

.hwd-a11y {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 900; /* below the work lightbox and the navigation menus */
	font-family: var(--font-body, sans-serif);
	font-size: 16px;
	line-height: 1.3;
}

.hwd-a11y button {
	font: inherit;
	margin: 0;
	cursor: pointer;
}

.hwd-a11y :focus-visible {
	outline: 3px solid var(--color-strong, #000);
	outline-offset: 2px;
}

/* the round "Aa" button */
.hwd-a11y .hwd-a11y-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--color-background, #fff);
	border-radius: 50%;
	background: var(--color-accent4, #222);
	color: var(--color-background, #fff);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.02em;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.hwd-a11y .hwd-a11y-toggle:hover { opacity: 0.88; }

/* the panel it opens */
.hwd-a11y-panel {
	position: absolute;
	right: 0;
	bottom: 52px;
	width: 220px;
	padding: 14px;
	background: var(--color-background, #fff);
	color: var(--color-strong, #000);
	border: 1px solid var(--color-strong, #000);
	border-radius: 6px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.hwd-a11y-panel[hidden] { display: none; }

.hwd-a11y .hwd-a11y-heading {
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 600;
	color: inherit;
}

.hwd-a11y-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 12px;
}
.hwd-a11y-level {
	min-width: 4ch;
	font-size: 15px;
	text-align: center;
}

.hwd-a11y-row button,
.hwd-a11y .hwd-a11y-contrast,
.hwd-a11y .hwd-a11y-reset {
	min-height: 40px;
	border: 1px solid var(--color-strong, #000);
	border-radius: 4px;
	background: transparent;
	color: var(--color-strong, #000);
}
.hwd-a11y-row button {
	width: 48px;
	font-size: 18px;
}
.hwd-a11y .hwd-a11y-contrast,
.hwd-a11y .hwd-a11y-reset {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 6px 10px;
	font-size: 15px;
	text-align: left;
}
.hwd-a11y .hwd-a11y-contrast { margin-bottom: 8px; }
.hwd-a11y .hwd-a11y-reset { justify-content: center; }

.hwd-a11y .hwd-a11y-contrast[aria-pressed="true"] {
	background: var(--color-strong, #000);
	color: var(--color-background, #fff);
}
.hwd-a11y-state { font-weight: 600; }

.hwd-a11y [aria-disabled="true"] {
	opacity: 0.35;
	cursor: default;
}

/* Hidden on the opening screen: it fades in once the visitor has scrolled down
   more than 50px, and out again back at the top (js/accessibility-widget.js adds
   .is-shown). On a page too short to scroll it shows all the time. While hidden it
   cannot be tabbed to, but tabbing down the page scrolls it, which shows it. */
.hwd-a11y {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.hwd-a11y.is-shown {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.25s ease, visibility 0s linear 0s;
}

@media print {
	.hwd-a11y { display: none; }
}