/*
 * Accessibility compatibility layer for the yydevelopment-accessibility toolbar.
 *
 * Upstream contract used here (yydevelopment-accessibility 2.3.1):
 *   .yydev-accessibility (root), .yydev_rtl (root, RTL sites), .yy-button (trigger),
 *   .yy-box (panel), .yy-box a (controls), a.accessibility-notice (optional statement link).
 * Everything else is this layer's own (.yydev-a11y-*), set by accessibility-fixes.js.
 *
 * Every rule is scoped to the toolbar root, except the text-size classes on <html>,
 * which only accessibility-fixes.js sets. The plugin prints its own <style> in
 * wp_head after this file, so overrides here win on specificity (no !important).
 */

/* ---- Focus visibility ------------------------------------------------- */

/* Two-tone ring: readable on the trigger's own colour and on light or dark pages. */
.yydev-accessibility .yy-button:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 0;
	box-shadow: 0 0 0 6px #0e2c54;
}

/* Inset so the panel border / scroll container cannot clip it. Keeps each item's own background. */
.yydev-accessibility .yy-box a:focus-visible {
	outline: 3px solid #1b4ab3;
	outline-offset: -3px;
}

/* The statement link sits on the site's configured colour: two-tone so either tone shows. */
.yydev-accessibility .yy-box a.accessibility-notice:focus-visible {
	outline-color: #fff;
	box-shadow: inset 0 0 0 5px #0e2c54;
}

/* ---- Toggle state ----------------------------------------------------- */

/* Visible counterpart to aria-pressed="true": a bar on the inline-start edge. */
.yydev-accessibility .yy-box a[aria-pressed="true"] {
	background: #e8f0fd;
	box-shadow: inset 4px 0 0 #1b4ab3;
}

.yydev-accessibility.yydev_rtl .yy-box a[aria-pressed="true"] {
	box-shadow: inset -4px 0 0 #1b4ab3;
}

/* ---- Status message (text size) -------------------------------------- */

.yydev-accessibility .yydev-a11y-status {
	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;
}

/* ---- Placement -------------------------------------------------------- */

/*
 * Bottom-anchored toolbars stay above the home indicator on notched devices
 * (0 elsewhere; no effect when the plugin anchors it to the top).
 */
.yydev-accessibility {
	margin-bottom: env(safe-area-inset-bottom, 0px);
}

/* Moved clear of site-configured fixed/sticky UI (yydev_a11y_collision_selectors). */
.yydev-accessibility.yydev-a11y--shifted {
	transform: translateY(var(--yydev-a11y-shift, 0px));
}

/* Open panel would leave the viewport or cover configured UI: scroll inside it. */
.yydev-accessibility.yydev-a11y--constrained .yy-box {
	max-height: var(--yydev-a11y-panel-max, none);
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* ---- Text size -------------------------------------------------------- */

/*
 * Bounded, non-compounding steps on the root font-size. Scales rem / root-relative
 * em / clamp(rem…) typography and respects the visitor's browser font setting.
 * Fixed px typography (e.g. per-widget page-builder sizes) is not affected.
 */
html.yydev-a11y-text-m1 { font-size: 90%; }
html.yydev-a11y-text-1 { font-size: 110%; }
html.yydev-a11y-text-2 { font-size: 125%; }
html.yydev-a11y-text-3 { font-size: 140%; }