/**
 * Accessible Font Resizer — front-end styles.
 *
 * The widget is sized from a single multiplier (--afr-size-mult) and positioned
 * with --afr-offset-x / --afr-offset-y, all set inline from the admin settings.
 * Colors fall back to neutrals that adapt to dark mode; admin overrides win
 * because they are applied as inline custom properties.
 */

.afr-controls,
.afr-reopen {
	--afr-bg: #ffffff;
	--afr-fg: #1a1a1a;
	--afr-border: #d8d8d8;
	--afr-hover: #f2f2f2;
	--afr-focus: #2563eb;
	--afr-size-mult: 1;
	--afr-unit: calc(14px * var(--afr-size-mult));
	--afr-offset-x: 20px;
	--afr-offset-y: 20px;
	--afr-opacity: 1;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.afr-controls {
	display: inline-flex;
	align-items: center;
	gap: calc(var(--afr-unit) * 0.43);
	padding: calc(var(--afr-unit) * 0.43);
	font-size: var(--afr-unit);
	line-height: 1;
	color: var(--afr-fg);
	background: var(--afr-bg);
	border: 1px solid var(--afr-border);
	border-radius: 999px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
	opacity: var(--afr-opacity);
	transition: opacity 0.15s ease;
}

/* Stay usable: return to full opacity when interacted with. */
.afr-controls:hover,
.afr-controls:focus-within,
.afr-reopen:hover,
.afr-reopen:focus-within {
	opacity: 1;
}

.afr-controls.afr-dragging {
	opacity: 1 !important;
	cursor: grabbing;
	user-select: none;
}

/* Floating placement in a page corner, using the configured offsets. */
.afr-controls.afr-floating,
.afr-reopen {
	position: fixed;
	z-index: 99990;
}

.afr-pos-bottom-right { bottom: var(--afr-offset-y); right: var(--afr-offset-x); }
.afr-pos-bottom-left  { bottom: var(--afr-offset-y); left: var(--afr-offset-x); }
.afr-pos-top-right    { top: var(--afr-offset-y); right: var(--afr-offset-x); }
.afr-pos-top-left     { top: var(--afr-offset-y); left: var(--afr-offset-x); }

.afr-label {
	font-size: calc(var(--afr-unit) * 0.93);
	font-weight: 600;
	padding: 0 calc(var(--afr-unit) * 0.43) 0 calc(var(--afr-unit) * 0.71);
	white-space: nowrap;
	color: var(--afr-fg);
}

/* Button rules are prefixed with .afr-controls to outrank common theme
   selectors like `body button` or `.entry-content button`, which would
   otherwise override display/font-size/line-height and break centering.
   line-height matches the button height as a fallback: even if a theme still
   defeats the flex layout, the single-line glyph centers in its line box. */
.afr-controls .afr-btn {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: calc(var(--afr-unit) * 2.71);
	height: calc(var(--afr-unit) * 2.71);
	min-height: 0;
	max-width: none;
	width: auto;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: calc(var(--afr-unit) * 0.36);
	padding-right: calc(var(--afr-unit) * 0.36);
	margin: 0;
	background: transparent;
	color: var(--afr-fg);
	border: 1px solid var(--afr-border);
	border-radius: 999px;
	cursor: pointer;
	font-family: inherit;
	font-size: var(--afr-unit);
	font-weight: 700;
	line-height: calc(var(--afr-unit) * 2.71);
	letter-spacing: normal;
	text-transform: none;
	text-indent: 0;
	transition: background-color 0.15s ease, transform 0.05s ease;
}

.afr-controls .afr-btn:hover { background: var(--afr-hover); }
.afr-controls .afr-btn:active { transform: scale(0.96); }

.afr-controls .afr-btn:focus-visible,
.afr-chrome.afr-reopen:focus-visible {
	outline: 3px solid var(--afr-focus);
	outline-offset: 2px;
}

.afr-controls .afr-btn[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Glyph sizes give a visual size cue. */
.afr-controls .afr-btn-decrease { font-size: calc(var(--afr-unit) * 0.93); }
.afr-controls .afr-btn-reset    { font-size: calc(var(--afr-unit) * 1.07); }
.afr-controls .afr-btn-increase { font-size: calc(var(--afr-unit) * 1.36); }

/* Drag handle (grip). Pointer-only enhancement; hidden from assistive tech. */
.afr-grip {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: calc(var(--afr-unit) * 1.15);
	height: calc(var(--afr-unit) * 2.71);
	padding: 0;
	color: var(--afr-fg);
	opacity: 0.5;
	cursor: grab;
	touch-action: none;
	user-select: none;
}

.afr-grip:hover { opacity: 0.85; }
.afr-controls.afr-dragging .afr-grip { cursor: grabbing; }

/* Dismiss (close) button — smaller and quieter than the main controls. */
.afr-controls .afr-dismiss {
	min-width: calc(var(--afr-unit) * 1.9);
	width: calc(var(--afr-unit) * 1.9);
	height: calc(var(--afr-unit) * 1.9);
	padding: 0;
	margin-left: calc(var(--afr-unit) * 0.15);
	border-color: transparent;
	opacity: 0.7;
}

.afr-controls .afr-dismiss:hover { opacity: 1; }

/* Icons are centered with absolute positioning and sized from --afr-unit, so
   they track the widget size setting and stay dead-centered even when a theme
   forces its own font size, line-height, or display on buttons. */
.afr-controls .afr-btn svg,
.afr-controls .afr-grip svg {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}

.afr-controls .afr-grip svg {
	width: calc(var(--afr-unit) * 0.7);
	height: calc(var(--afr-unit) * 1.1);
}

.afr-controls .afr-dismiss svg {
	width: calc(var(--afr-unit) * 0.86);
	height: calc(var(--afr-unit) * 0.86);
}

/* Reopen handle shown after dismissal. Doubled class outranks theme rules
   like `body button`; line-height matches the height as fallback centering. */
.afr-chrome.afr-reopen {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: calc(var(--afr-unit) * 2.85);
	height: calc(var(--afr-unit) * 2.85);
	min-height: 0;
	padding: 0;
	font-family: inherit;
	font-size: calc(var(--afr-unit) * 1.07);
	font-weight: 700;
	line-height: calc(var(--afr-unit) * 2.85);
	color: var(--afr-fg);
	background: var(--afr-bg);
	border: 1px solid var(--afr-border);
	border-radius: 999px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
	cursor: pointer;
	opacity: var(--afr-opacity);
	transition: opacity 0.15s ease;
}

.afr-chrome.afr-reopen:hover { background: var(--afr-hover); }

/* Inline (shortcode) placement drops the fixed positioning and shadow. */
.afr-controls.afr-inline-controls {
	position: static;
	box-shadow: none;
	vertical-align: middle;
}

/* Toggled by the script. */
.afr-hidden { display: none !important; }

@media (prefers-color-scheme: dark) {
	.afr-controls,
	.afr-reopen {
		--afr-bg: #1f1f1f;
		--afr-fg: #f3f3f3;
		--afr-border: #444444;
		--afr-hover: #2c2c2c;
		--afr-focus: #60a5fa;
	}
}

@media (prefers-reduced-motion: reduce) {
	.afr-controls .afr-btn,
	.afr-controls,
	.afr-reopen { transition: none; }
}