/* ADA Accessibility Widget styles
   Namespaced with .adaw- to avoid clashing with theme CSS */

.adaw-wrapper, .adaw-wrapper * {
	box-sizing: border-box;
}

.adaw-wrapper {
	--adaw-primary: #2e3192;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.adaw-floating {
	position: fixed;
	z-index: 999999;
}

.adaw-pos-bottom-left  { left: 20px; bottom: 20px; }
.adaw-pos-bottom-right { right: 20px; bottom: 20px; }
.adaw-pos-top-left     { left: 20px; top: 20px; }
.adaw-pos-top-right    { right: 20px; top: 20px; }

.adaw-inline {
	position: relative;
	display: inline-block;
}

/* Launcher button
   !important is used on shape/color/layout properties because this button
   is a plain <button> injected into arbitrary themes — many themes apply
   global `button { ... }` resets (border-radius, background, color) that
   would otherwise override it and turn the round badge into a plain square. */
.adaw-launcher {
	box-sizing: border-box;
	width: 56px;
	height: 56px;
	min-width: 56px;
	min-height: 56px;
	border-radius: 50% !important;
	border: none !important;
	background: var(--adaw-primary) !important;
	color: #fff !important;
	cursor: pointer;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: 0 2px 10px rgba(0,0,0,0.25);
	padding: 0 !important;
	margin: 0 !important;
	line-height: 1;
	appearance: none;
	-webkit-appearance: none;
	overflow: hidden;
	flex: none;
	transition: transform 0.15s ease;
}

.adaw-launcher:hover {
	transform: scale(1.06);
}

/* The icon glyph's color/fill is forced here (rather than relying on the
   SVG's own fill="..." attributes) because some themes/icon libraries ship
   a global `svg, svg * { fill: none; stroke: currentColor; }` reset that
   silently strips fills from any SVG dropped into the page — the launcher
   would otherwise render as an empty/hollow circle with no visible icon. */
.adaw-launcher svg {
	width: 60%;
	height: 60%;
	display: block !important;
	flex: none;
	overflow: visible;
}

.adaw-launcher svg,
.adaw-launcher svg * {
	fill: #fff !important;
	stroke: none !important;
}

.adaw-launcher:focus-visible {
	outline: 3px solid #ffbf47;
	outline-offset: 2px;
}

/* Panel */
.adaw-panel {
	position: absolute;
	width: 300px;
	max-width: 90vw;
	background: #fff;
	border: 1px solid var(--adaw-primary);
	border-radius: 4px;
	box-shadow: 0 8px 30px rgba(0,0,0,0.2);
	overflow: hidden;
	max-height: 80vh;
	overflow-y: auto;
}

.adaw-pos-bottom-left .adaw-panel,
.adaw-pos-top-left .adaw-panel {
	left: 0;
}

.adaw-pos-bottom-right .adaw-panel,
.adaw-pos-top-right .adaw-panel {
	right: 0;
}

.adaw-pos-bottom-left .adaw-panel,
.adaw-pos-bottom-right .adaw-panel {
	bottom: 66px;
}

.adaw-pos-top-left .adaw-panel,
.adaw-pos-top-right .adaw-panel {
	top: 66px;
}

.adaw-inline .adaw-panel {
	top: 62px;
	left: 0;
}

.adaw-panel[hidden] {
	display: none;
}

.adaw-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px 10px;
}

.adaw-panel-header h2 {
	margin: 0;
	font-size: 22px;
	font-weight: 800;
	color: #1a1a2e;
}

.adaw-close {
	background: none !important;
	border: none !important;
	width: 32px;
	height: 32px;
	min-width: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	cursor: pointer;
	color: #444;
	padding: 0 !important;
	margin: 0;
	border-radius: 4px;
	flex: none;
}

.adaw-close svg {
	width: 16px;
	height: 16px;
	display: block;
}

.adaw-close:hover,
.adaw-close:focus-visible {
	color: #000;
	background: #f2f2f8 !important;
}

.adaw-close:focus-visible {
	outline: 2px solid #ffbf47;
	outline-offset: 1px;
}

.adaw-tool-list {
	list-style: none;
	margin: 0;
	padding: 4px 6px 16px;
}

.adaw-tool {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 14px;
	background: none;
	border: none;
	text-align: left;
	padding: 12px 14px;
	font-size: 16px;
	color: #1a1a2e;
	cursor: pointer;
	border-radius: 6px;
}

.adaw-tool:hover,
.adaw-tool:focus-visible {
	background: #f2f2f8;
}

.adaw-tool.adaw-active {
	background: rgba(46, 49, 146, 0.1);
	font-weight: 600;
}

.adaw-icon {
	width: 22px;
	height: 22px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #1a1a2e;
}

.adaw-icon svg {
	width: 100%;
	height: 100%;
}

/* ===================== Front-end effect classes =====================
   These apply to <html> so they affect the whole page consistently. */

html.adaw-grayscale {
	filter: grayscale(100%);
}

html.adaw-high-contrast body {
	background: #000 !important;
	color: #fff !important;
}
html.adaw-high-contrast body * {
	background-color: #000 !important;
	color: #fff !important;
	border-color: #fff !important;
}
html.adaw-high-contrast a {
	color: #ffd700 !important;
}
/* Keep the widget itself readable even under high contrast / negative modes */
html.adaw-high-contrast .adaw-wrapper,
html.adaw-negative-contrast .adaw-wrapper,
html.adaw-high-contrast .adaw-wrapper *,
html.adaw-negative-contrast .adaw-wrapper * {
	filter: none !important;
}
html.adaw-high-contrast .adaw-panel,
html.adaw-high-contrast .adaw-panel * {
	background-color: #fff !important;
	color: #1a1a2e !important;
	border-color: var(--adaw-primary) !important;
}
html.adaw-high-contrast .adaw-launcher {
	background-color: var(--adaw-primary) !important;
}

html.adaw-negative-contrast {
	filter: invert(100%) hue-rotate(180deg);
}
html.adaw-negative-contrast img,
html.adaw-negative-contrast video,
html.adaw-negative-contrast svg,
html.adaw-negative-contrast .adaw-wrapper {
	filter: invert(100%) hue-rotate(180deg);
}

html.adaw-light-bg body,
html.adaw-light-bg body * {
	background-color: #ffffff !important;
	color: #111111 !important;
}
html.adaw-light-bg .adaw-panel,
html.adaw-light-bg .adaw-launcher {
	background-color: revert !important;
}

html.adaw-underline-links a {
	text-decoration: underline !important;
}

html.adaw-readable-font body,
html.adaw-readable-font body * {
	font-family: Arial, Helvetica, "Segoe UI", sans-serif !important;
	line-height: 1.6 !important;
	letter-spacing: 0.02em !important;
}

/* Increase/Decrease Text scales the whole page with `zoom` instead of just
   setting body font-size. font-size only affects elements that inherit
   *relative* sizing (em/rem/%) from body — most modern WP themes and page
   builders (Elementor, Divi, Gutenberg, etc.) set explicit px font-sizes on
   headings, buttons, and widgets, so those never inherited body's scale and
   the effect only ever showed up in whatever plain, unstyled content
   happened to still use relative sizing (typically near the top of the
   page). `zoom` rescales layout for every element regardless of what units
   the theme uses, so the whole site scales consistently. The widget itself
   is excluded so the launcher/panel stay a fixed, predictable size. */
html[style*="--adaw-font-scale"] body > *:not(.adaw-wrapper) {
	zoom: var(--adaw-font-scale, 1);
}

@media (max-width: 480px) {
	.adaw-panel {
		width: 260px;
	}
}