/* NGAZE Accessibility widget — floating toolbar + the page-wide effects it toggles. */

/* Position: left is the default (no extra class needed); the admin "Icon position" setting adds
   .ngz-a11y-side-right to <html> to flip both the button and panel to the right edge instead.
   Vertical offset from the bottom (the admin "Raise above other icons" field, for sites that
   already have a chat/back-to-top button in the same corner) is set by the JS as the
   --ngz-a11y-offset custom property, so one admin number drives both elements consistently. */
.ngz-a11y-toggle {
	position: fixed;
	left: 18px;
	bottom: var(--ngz-a11y-offset, 18px);
	width: var(--ngz-a11y-size, 58px);
	height: var(--ngz-a11y-size, 58px);
	border-radius: 50%;
	background: linear-gradient(145deg, #1D4ED8, #11297A);
	color: #fff;
	border: none;
	box-shadow: 0 8px 22px rgba(17, 41, 122, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.12);
	cursor: pointer;
	z-index: 2147483000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 11px;
	transition: width .15s, height .15s, transform .15s, box-shadow .15s, opacity .25s;
}
.ngz-a11y-toggle:hover { transform: scale(1.06); box-shadow: 0 10px 26px rgba(17, 41, 122, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.12); }
.ngz-a11y-toggle:focus-visible { outline: 3px solid #FFD400; outline-offset: 3px; }
.ngz-a11y-toggle svg { width: 100%; height: 100%; }
html.ngz-a11y-widget-large .ngz-a11y-toggle { width: 78px; height: 78px; padding: 14px; }
html.ngz-a11y-side-right .ngz-a11y-toggle { left: auto; right: 18px; }

/* Visibility while scrolling: "Always visible" (default) needs nothing extra. "Appears after
   scrolling down" adds .ngz-a11y-reveal, which fades the button out until the JS scroll listener
   (past ~30% of one viewport height) adds .ngz-a11y-revealed to <html>. It stays reachable by
   keyboard the whole time either way — only the fade/click-through is scroll-gated, since hiding
   an accessibility tool from keyboard users would defeat its purpose. */
html.ngz-a11y-reveal .ngz-a11y-toggle { opacity: 0; transform: translateY(16px); pointer-events: none; }
html.ngz-a11y-reveal.ngz-a11y-revealed .ngz-a11y-toggle { opacity: 1; transform: translateY(0); pointer-events: auto; }

.ngz-a11y-panel {
	position: fixed;
	left: 18px;
	bottom: calc(var(--ngz-a11y-offset, 18px) + 64px);
	width: 336px;
	max-width: calc(100vw - 36px);
	max-height: min(660px, calc(100vh - 110px));
	overflow-y: auto;
	background: #fff;
	color: #111827;
	border-radius: 14px;
	box-shadow: 0 16px 48px rgba(17, 24, 39, 0.28), 0 0 0 1px rgba(17, 24, 39, 0.06);
	z-index: 2147483000;
	font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.ngz-a11y-panel[hidden] { display: none; }
.ngz-a11y-panel *:focus-visible { outline: 3px solid #1D4ED8; outline-offset: 2px; }
html.ngz-a11y-side-right .ngz-a11y-panel { left: auto; right: 18px; }

.ngz-a11y-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 16px 16px;
	background: linear-gradient(135deg, #1D4ED8, #11297A);
	color: #fff;
	position: sticky;
	top: 0;
	border-radius: 14px 14px 0 0;
}
.ngz-a11y-panel__head h2 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: .01em; }
.ngz-a11y-panel__skip {
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.4);
	color: #fff;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	padding: 5px 10px;
	cursor: pointer;
	margin-left: auto;
}
.ngz-a11y-panel__skip:hover { background: rgba(255, 255, 255, 0.26); }
.ngz-a11y-panel__close {
	background: rgba(255, 255, 255, 0.14); border: none; cursor: pointer; font-size: 18px; line-height: 1;
	color: #fff; width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
}
.ngz-a11y-panel__close:hover { background: rgba(255, 255, 255, 0.26); }

.ngz-a11y-list { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 2px; }

.ngz-a11y-group {
	margin: 10px 6px 4px;
	padding: 0 4px;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #6b7280;
}
.ngz-a11y-group:first-child { margin-top: 2px; }

.ngz-a11y-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 8px;
}
.ngz-a11y-row:hover { background: #eef2ff; }
.ngz-a11y-row__label { font-weight: 600; }

.ngz-a11y-btn {
	border: 1px solid #d1d5db;
	background: #f9fafb;
	color: #111827;
	border-radius: 999px;
	padding: 5px 12px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	min-width: 64px;
	text-align: center;
}
.ngz-a11y-btn[aria-pressed="true"],
.ngz-a11y-row[data-level]:not([data-level="0"]) .ngz-a11y-btn {
	background: #1D4ED8;
	border-color: #1D4ED8;
	color: #fff;
}

.ngz-a11y-reset {
	display: block;
	width: calc(100% - 16px);
	margin: 6px 8px 14px;
	padding: 10px;
	border-radius: 8px;
	border: 1px solid #d1d5db;
	background: #f9fafb;
	color: #111827;
	font-weight: 700;
	cursor: pointer;
}
.ngz-a11y-reset:hover { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }

/* Keep the widget's own toggle/panel legible and in their designed colors even while page-wide
   Dark/Light contrast is on — the `body *` rules below would otherwise flatten every row and
   button to the same black-on-white (or white-on-black), hiding which options are actually on.
   (Contrast Invert already got this treatment below; Dark/Light did not, until now.) */
html.ngz-a11y-contrast-dark .ngz-a11y-toggle,
html.ngz-a11y-contrast-light .ngz-a11y-toggle {
	background: linear-gradient(145deg, #1D4ED8, #11297A) !important; color: #fff !important; border: none !important;
}
html.ngz-a11y-contrast-dark .ngz-a11y-panel,
html.ngz-a11y-contrast-light .ngz-a11y-panel {
	background-color: #fff !important; color: #111827 !important;
}
html.ngz-a11y-contrast-dark .ngz-a11y-panel *,
html.ngz-a11y-contrast-light .ngz-a11y-panel * {
	background-color: transparent !important; color: inherit !important; border-color: #e5e7eb !important;
}
html.ngz-a11y-contrast-dark .ngz-a11y-panel__head,
html.ngz-a11y-contrast-light .ngz-a11y-panel__head {
	background: linear-gradient(135deg, #1D4ED8, #11297A) !important; color: #fff !important;
}
html.ngz-a11y-contrast-dark .ngz-a11y-panel__head *,
html.ngz-a11y-contrast-light .ngz-a11y-panel__head * { color: #fff !important; }
html.ngz-a11y-contrast-dark .ngz-a11y-btn,
html.ngz-a11y-contrast-light .ngz-a11y-btn {
	background-color: #f9fafb !important; color: #111827 !important; border-color: #d1d5db !important;
}
html.ngz-a11y-contrast-dark .ngz-a11y-btn[aria-pressed="true"],
html.ngz-a11y-contrast-light .ngz-a11y-btn[aria-pressed="true"],
html.ngz-a11y-contrast-dark .ngz-a11y-row[data-level]:not([data-level="0"]) .ngz-a11y-btn,
html.ngz-a11y-contrast-light .ngz-a11y-row[data-level]:not([data-level="0"]) .ngz-a11y-btn {
	background-color: #1D4ED8 !important; border-color: #1D4ED8 !important; color: #fff !important;
}

/* ── Effects applied to <html> ───────────────────────────────────────────── */

html.ngz-a11y-contrast-invert { filter: invert(1) hue-rotate(180deg); }
html.ngz-a11y-contrast-invert img,
html.ngz-a11y-contrast-invert video,
html.ngz-a11y-contrast-invert svg,
html.ngz-a11y-contrast-invert .ngz-a11y-panel,
html.ngz-a11y-contrast-invert .ngz-a11y-toggle { filter: invert(1) hue-rotate(180deg); }
html.ngz-a11y-contrast-dark body { background: #000 !important; color: #fff !important; }
html.ngz-a11y-contrast-dark body * { background-color: #000 !important; color: #fff !important; border-color: #444 !important; }
html.ngz-a11y-contrast-light body { background: #fff !important; color: #000 !important; }
html.ngz-a11y-contrast-light body * { background-color: #fff !important; color: #000 !important; border-color: #ccc !important; }

html.ngz-a11y-highlight-links a { outline: 2px solid #1D4ED8 !important; background: #FEF3C7 !important; color: #111827 !important; text-decoration: underline !important; }

/* True page zoom (not just font-size), via a wrapper transform rather than the non-standard CSS
   `zoom` property — `zoom` is ignored by plenty of real browsers and, worse, also scales (and can
   shift off-screen) any position:fixed element on the page, including the widget's own toggle and
   panel. ensureScaleRoot() in the JS wraps everything already in <body> in #ngz-a11y-scale-root
   *before* the toggle/panel are created, so only real page content is ever inside this wrapper and
   gets scaled — the widget stays full-size and reachable at every zoom level. */
#ngz-a11y-scale-root {
	transform: scale(var(--ngz-a11y-zoom-scale, 1));
	transform-origin: top left;
}

/* Color Adjustment: SVG feColorMatrix filters defined by the widget JS (#ngz-a11y-filter-*),
   derived from a published colorblindness simulation combined with the standard Daltonize
   error-redirect step, so confused hues shift toward ones the viewer can still tell apart. */
html.ngz-a11y-color-protanopia { filter: url(#ngz-a11y-filter-protanopia); }
html.ngz-a11y-color-deuteranopia { filter: url(#ngz-a11y-filter-deuteranopia); }
html.ngz-a11y-color-tritanopia { filter: url(#ngz-a11y-filter-tritanopia); }
html.ngz-a11y-color-grayscale { filter: grayscale(1); }

html.ngz-a11y-spacing-1 body { letter-spacing: 0.06em !important; word-spacing: 0.08em !important; }
html.ngz-a11y-spacing-2 body { letter-spacing: 0.12em !important; word-spacing: 0.16em !important; }
html.ngz-a11y-spacing-3 body { letter-spacing: 0.2em !important; word-spacing: 0.3em !important; }

html.ngz-a11y-pause-animations *,
html.ngz-a11y-pause-animations *::before,
html.ngz-a11y-pause-animations *::after {
	animation-play-state: paused !important;
	transition: none !important;
	scroll-behavior: auto !important;
}

html.ngz-a11y-hide-images img,
html.ngz-a11y-hide-images picture,
html.ngz-a11y-hide-images svg:not(.ngz-a11y-toggle svg):not(.ngz-a11y-panel svg),
html.ngz-a11y-hide-images video,
html.ngz-a11y-hide-images [style*="background-image"] { visibility: hidden !important; }

html.ngz-a11y-dyslexia-1 body,
html.ngz-a11y-dyslexia-2 body {
	font-family: Verdana, Tahoma, "Comic Sans MS", sans-serif !important;
}
html.ngz-a11y-dyslexia-2 body { letter-spacing: 0.04em !important; line-height: 1.8 !important; }

html.ngz-a11y-cursor-1,
html.ngz-a11y-cursor-1 a,
html.ngz-a11y-cursor-1 button { cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M6 2 L6 26 L12 20 L16 29 L20 27 L16 18 L24 18 Z" fill="black" stroke="white" stroke-width="2"/></svg>') 4 4, auto !important; }
html.ngz-a11y-cursor-2,
html.ngz-a11y-cursor-2 a,
html.ngz-a11y-cursor-2 button { cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 32 32"><path d="M6 2 L6 26 L12 20 L16 29 L20 27 L16 18 L24 18 Z" fill="black" stroke="white" stroke-width="2"/></svg>') 6 6, auto !important; }
html.ngz-a11y-cursor-3,
html.ngz-a11y-cursor-3 a,
html.ngz-a11y-cursor-3 button { cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 32 32"><path d="M6 2 L6 26 L12 20 L16 29 L20 27 L16 18 L24 18 Z" fill="%23FFD400" stroke="black" stroke-width="2"/></svg>') 6 6, auto !important; }

html.ngz-a11y-tooltips-on .ngz-a11y-tooltip-bubble {
	position: fixed;
	z-index: 2147483001;
	background: #111827;
	color: #fff;
	padding: 6px 10px;
	border-radius: 6px;
	font: 13px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	max-width: 260px;
	pointer-events: none;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

html.ngz-a11y-line-height-1 body { line-height: 1.6 !important; }
html.ngz-a11y-line-height-2 body { line-height: 2 !important; }
html.ngz-a11y-line-height-3 body { line-height: 2.5 !important; }

html.ngz-a11y-align-left body { text-align: left !important; }
html.ngz-a11y-align-center body { text-align: center !important; }
html.ngz-a11y-align-right body { text-align: right !important; }

html.ngz-a11y-saturation-1 body { filter: saturate(0.5) !important; }
html.ngz-a11y-saturation-2 body { filter: saturate(0) !important; }
html.ngz-a11y-saturation-3 body { filter: saturate(1.8) !important; }

.ngz-a11y-reading-guide {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	height: 40px;
	background: rgba(255, 221, 0, 0.28);
	border-top: 2px solid rgba(180, 140, 0, 0.9);
	border-bottom: 2px solid rgba(180, 140, 0, 0.9);
	z-index: 2147482999;
	pointer-events: none;
}
html.ngz-a11y-reading-guide-on .ngz-a11y-reading-guide { display: block; }

/* Keyboard Focus: force a visible outline even on sites that style focus away. */
html.ngz-a11y-keyboard-nav :focus {
	outline: 3px solid #1544B8 !important;
	outline-offset: 2px !important;
}

/* Read Aloud: hint which elements will speak on hover/focus, without changing page layout. */
html.ngz-a11y-read-aloud-on p,
html.ngz-a11y-read-aloud-on li,
html.ngz-a11y-read-aloud-on h1, html.ngz-a11y-read-aloud-on h2, html.ngz-a11y-read-aloud-on h3,
html.ngz-a11y-read-aloud-on h4, html.ngz-a11y-read-aloud-on h5, html.ngz-a11y-read-aloud-on h6,
html.ngz-a11y-read-aloud-on blockquote,
html.ngz-a11y-read-aloud-on figcaption { cursor: pointer; }
html.ngz-a11y-read-aloud-on p:hover,
html.ngz-a11y-read-aloud-on li:hover,
html.ngz-a11y-read-aloud-on h1:hover, html.ngz-a11y-read-aloud-on h2:hover, html.ngz-a11y-read-aloud-on h3:hover,
html.ngz-a11y-read-aloud-on h4:hover, html.ngz-a11y-read-aloud-on h5:hover, html.ngz-a11y-read-aloud-on h6:hover,
html.ngz-a11y-read-aloud-on blockquote:hover,
html.ngz-a11y-read-aloud-on figcaption:hover { outline: 1px dashed #1D4ED8; outline-offset: 3px; background: rgba(29, 78, 216, 0.06); }

.ngz-a11y-footer {
	border-top: 1px solid #e5e7eb;
	padding: 12px 16px 14px;
	text-align: center;
	background: #f8fafc;
	border-radius: 0 0 14px 14px;
}
.ngz-a11y-footer a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	font-weight: 700;
	color: #4b5563;
	text-decoration: none;
}
.ngz-a11y-footer a:hover,
.ngz-a11y-footer a:focus-visible { color: #1D4ED8; }
.ngz-a11y-footer img { width: 20px; height: 20px; display: block; }

@media (max-width: 480px) {
	.ngz-a11y-panel { left: 10px; bottom: calc(var(--ngz-a11y-offset, 10px) + 66px); width: calc(100vw - 20px); }
	.ngz-a11y-toggle { left: 10px; bottom: var(--ngz-a11y-offset, 10px); width: var(--ngz-a11y-size-mobile, 44px); height: var(--ngz-a11y-size-mobile, 44px); }
	html.ngz-a11y-widget-large .ngz-a11y-toggle { left: 10px; bottom: var(--ngz-a11y-offset, 10px); }
	html.ngz-a11y-side-right .ngz-a11y-panel { left: auto; right: 10px; }
	html.ngz-a11y-side-right .ngz-a11y-toggle { left: auto; right: 10px; }
}