/* M4 — Accessibility panel
   Floating bottom-right widget. Collapsed by default = circular trigger
   button with "A" glyph. Expanded = brand-styled panel with three controls.
   z-index 100050 sits above the hamburger overlay (100000) and our grain
   overlay (9999) so the panel is always reachable. */

.np-a11y-root {
	position: fixed;
	bottom: 16px;
	right: 16px;
	z-index: 100050;
	font-family: "Sprat", serif;
}

/* === Trigger button (collapsed state) =================================== */

.np-a11y-trigger {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--section-accent);
	background: var(--wp--preset--color--bg);
	color: var(--section-accent);
	cursor: pointer;
	font-family: "Sprat", serif;
	font-size: 22px;
	font-weight: 175;
	font-stretch: 117%;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.np-a11y-trigger:hover,
.np-a11y-trigger:focus-visible {
	background: var(--section-accent);
	color: var(--wp--preset--color--bg);
	outline: none;
}
.np-a11y-root[data-state="expanded"] .np-a11y-trigger {
	display: none;
}

/* === Panel (expanded state) ============================================ */

.np-a11y-panel {
	background: var(--wp--preset--color--bg);
	border: 1px solid var(--section-accent);
	border-radius: 8px;
	padding: 16px 18px;
	width: 280px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
	color: var(--wp--preset--color--fg);
}
.np-a11y-panel[hidden] {
	display: none;
}

.np-a11y-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	padding-bottom: 10px;
	margin-bottom: 12px;
}
.np-a11y-title {
	font-family: "Sprat", serif;
	font-size: 18px;
	font-weight: 165;
	font-stretch: 117%;
	margin: 0;
	color: var(--section-accent);
}
.np-a11y-close {
	width: 28px;
	height: 28px;
	background: transparent;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 4px;
	color: var(--wp--preset--color--fg);
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	font-family: "Sprat", serif;
	font-weight: 100;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 180ms ease, border-color 180ms ease;
}
.np-a11y-close:hover,
.np-a11y-close:focus-visible {
	background: var(--section-accent);
	color: var(--wp--preset--color--bg);
	border-color: var(--section-accent);
	outline: none;
}

/* === Row layout ======================================================== */

.np-a11y-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
}
.np-a11y-label {
	font-family: "Sprat", serif;
	font-size: 14px;
	font-weight: 120;
	font-stretch: 117%;
	color: var(--wp--preset--color--fg);
	cursor: default;
}

/* === Switch (motion / contrast) ======================================== */

.np-a11y-switch {
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	width: 44px;
	height: 24px;
}
.np-a11y-switch-track {
	position: relative;
	width: 44px;
	height: 24px;
	background: var(--wp--preset--color--rule);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 12px;
	transition: background-color 180ms ease, border-color 180ms ease;
}
.np-a11y-switch-thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	background: var(--wp--preset--color--fg);
	border-radius: 50%;
	transition: transform 180ms ease, background-color 180ms ease;
}
.np-a11y-switch[aria-checked="true"] .np-a11y-switch-track {
	background: var(--section-accent);
	border-color: var(--section-accent);
}
.np-a11y-switch[aria-checked="true"] .np-a11y-switch-thumb {
	transform: translateX(20px);
	background: var(--wp--preset--color--bg);
}
.np-a11y-switch:focus-visible .np-a11y-switch-track {
	outline: 2px solid var(--section-accent);
	outline-offset: 2px;
}

/* === Segmented control (text size) ===================================== */

.np-a11y-segmented {
	display: inline-flex;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 6px;
	overflow: hidden;
}
.np-a11y-seg {
	background: transparent;
	border: 0;
	border-right: 1px solid var(--wp--preset--color--rule);
	color: var(--wp--preset--color--fg);
	font-family: "Sprat", serif;
	font-weight: 120;
	font-stretch: 117%;
	font-size: 13px;
	padding: 4px 10px;
	cursor: pointer;
	min-width: 28px;
	transition: background-color 180ms ease, color 180ms ease;
}
.np-a11y-seg:last-child {
	border-right: 0;
}
.np-a11y-seg.is-current {
	background: var(--section-accent);
	color: var(--wp--preset--color--bg);
	font-weight: 175;
}
.np-a11y-seg:hover:not(.is-current),
.np-a11y-seg:focus-visible:not(.is-current) {
	background: var(--wp--preset--color--rule);
	outline: none;
}
.np-a11y-seg:focus-visible.is-current {
	outline: 2px solid var(--wp--preset--color--fg);
	outline-offset: 2px;
}

/* === Mobile: nudge the panel slightly to avoid covering content edges === */
@media (max-width: 600px) {
	.np-a11y-root {
		bottom: 12px;
		right: 12px;
	}
	.np-a11y-panel {
		width: calc(100vw - 32px);
		max-width: 280px;
	}
}