/**
 * Optima Accessibility — toolbar chrome + Pojo-compatible body classes.
 * Parity with optimataxrelief.com AccessibilityTools + accessibility.css
 */

/* -------------------------------------------------------------------------
   Toolbar chrome
   ------------------------------------------------------------------------- */

#pojo-a11y-toolbar.otr-a11y {
	position: fixed;
	z-index: 60;
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-start;
	bottom: max(1.25rem, calc(env(safe-area-inset-bottom) + 0.75rem));
	left: 1.25rem;
	font-family: var(--otr-font);
	font-size: 16px !important;
	transition: transform 0.3s ease-out;
}

.otr-a11y__toggle {
	display: flex;
	width: 2.75rem;
	height: 2.75rem;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 9999px;
	background: var(--otr-blue);
	color: #fff;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.2);
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.otr-a11y__toggle:hover {
	background: var(--otr-blue-bright);
}

.otr-a11y__toggle:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.otr-a11y.is-open .otr-a11y__toggle {
	background: var(--otr-blue-deep);
}

.otr-a11y__icon {
	width: 1.5rem;
	height: 1.5rem;
	display: block;
}

.otr-a11y__panel {
	display: flex;
	width: min(18.5rem, calc(100vw - 2rem));
	flex-direction: column;
	overflow: hidden;
	margin-bottom: 0.5rem;
	border: 1px solid rgba(12, 113, 195, 0.1);
	border-radius: 1rem;
	background: #fff;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	color: var(--otr-text);
}

/* Mobile: hide the panel completely when closed */
.otr-a11y:not(.is-open) .otr-a11y__panel {
	display: none;
}

.otr-a11y__header {
	padding: 0.875rem 1rem;
	border-bottom: 1px solid rgba(12, 113, 195, 0.1);
	background: linear-gradient(to bottom, var(--otr-bg-soft), #fff);
}

.otr-a11y__title {
	margin: 0;
	color: var(--otr-navy);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.otr-a11y__accent {
	width: 2.5rem;
	height: 3px;
	margin-top: 0.5rem;
	border-radius: 9999px;
	background: var(--otr-blue-deep);
}

.otr-a11y__subtitle {
	margin: 0.5rem 0 0;
	color: var(--otr-text-muted);
	font-size: 0.75rem;
	line-height: 1.5;
}

.otr-a11y__font-label {
	color: var(--otr-navy);
	font-weight: 600;
}

.otr-a11y__body {
	max-height: min(28rem, 60vh);
	padding: 0.75rem;
	overflow-y: auto;
}

.otr-a11y__group + .otr-a11y__group {
	margin-top: 1rem;
}

.otr-a11y__group-title {
	margin: 0;
	padding: 0 0.25rem;
	color: var(--otr-blue);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.otr-a11y__list {
	margin: 0.375rem 0 0;
	padding: 0;
	list-style: none;
}

.otr-a11y__list > li + li {
	margin-top: 0.25rem;
}

.otr-a11y__tool {
	display: flex;
	width: 100%;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 0.625rem;
	border: 0;
	border-radius: 0.75rem;
	background: transparent;
	color: var(--otr-navy);
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.otr-a11y__tool:hover {
	background: var(--otr-bg-soft);
}

.otr-a11y__tool:focus-visible {
	outline: 2px solid var(--otr-blue);
	outline-offset: 2px;
}

.otr-a11y__tool.is-active {
	background: var(--otr-blue);
	color: #fff;
}

.otr-a11y__tool-icon {
	display: inline-flex;
	width: 2rem;
	height: 2rem;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	border-radius: 0.5rem;
	background: var(--otr-bg-soft);
	color: var(--otr-blue);
	box-shadow: inset 0 0 0 1px rgba(12, 113, 195, 0.1);
}

.otr-a11y__tool.is-active .otr-a11y__tool-icon {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
	box-shadow: none;
}

.otr-a11y__tool-icon svg {
	width: 1rem;
	height: 1rem;
	display: block;
}

.otr-a11y__footer {
	padding: 0.75rem;
	border-top: 1px solid rgba(12, 113, 195, 0.1);
	background: var(--otr-bg-soft);
}

.otr-a11y__reset {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.625rem 1rem;
	border: 1px solid rgba(12, 113, 195, 0.2);
	border-radius: 9999px;
	background: #fff;
	color: var(--otr-navy);
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.otr-a11y__reset:hover {
	border-color: var(--otr-blue);
	color: var(--otr-blue);
}

.otr-a11y__reset:focus-visible {
	outline: 2px solid var(--otr-blue);
	outline-offset: 2px;
}

.otr-a11y__reset-icon {
	display: inline-flex;
	color: var(--otr-blue);
}

.otr-a11y__reset-icon svg {
	width: 1rem;
	height: 1rem;
	display: block;
}

@media (min-width: 640px) {
	#pojo-a11y-toolbar.otr-a11y {
		top: calc(50% + 2.5rem);
		right: 0;
		bottom: auto;
		left: auto;
		flex-direction: row;
		align-items: stretch;
		transform: translate(calc(100% - 2.75rem), -50%);
	}

	#pojo-a11y-toolbar.otr-a11y.is-open {
		transform: translate(0, -50%);
	}

	.otr-a11y__toggle {
		width: 2.75rem;
		height: 3rem;
		border-radius: 0.75rem 0 0 0.75rem;
		box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15);
	}

	.otr-a11y__panel,
	.otr-a11y:not(.is-open) .otr-a11y__panel {
		display: flex;
		width: min(18.5rem, calc(100vw - 3.5rem));
		margin-bottom: 0;
		border-radius: 0;
		border-left: 0;
		border-right: 0;
	}
}

/* Keep toolbar chrome readable / fixed-size in every a11y mode */
#pojo-a11y-toolbar,
#pojo-a11y-toolbar * {
	filter: none !important;
}

/* -------------------------------------------------------------------------
   Display modes
   Toolbar (#pojo-a11y-toolbar) is excluded so controls stay usable.
   ------------------------------------------------------------------------- */

body.pojo-a11y-grayscale > *:not(#pojo-a11y-toolbar) {
	filter: grayscale(1);
}

body.pojo-a11y-high-contrast {
	background: #000 !important;
	color: #fff !important;
}
body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar, #pojo-a11y-toolbar *) {
	background-color: #000 !important;
	background-image: none !important;
	color: #fff !important;
	border-color: #fff !important;
	box-shadow: none !important;
	text-shadow: none !important;
}
body.pojo-a11y-high-contrast a:not(#pojo-a11y-toolbar a),
body.pojo-a11y-high-contrast a:not(#pojo-a11y-toolbar a) * {
	color: #4db8ff !important;
}
body.pojo-a11y-high-contrast h1:not(#pojo-a11y-toolbar *),
body.pojo-a11y-high-contrast h2:not(#pojo-a11y-toolbar *),
body.pojo-a11y-high-contrast h3:not(#pojo-a11y-toolbar *),
body.pojo-a11y-high-contrast h4:not(#pojo-a11y-toolbar *),
body.pojo-a11y-high-contrast h5:not(#pojo-a11y-toolbar *),
body.pojo-a11y-high-contrast h6:not(#pojo-a11y-toolbar *) {
	color: #40c090 !important;
}
body.pojo-a11y-high-contrast img:not(#pojo-a11y-toolbar img),
body.pojo-a11y-high-contrast video:not(#pojo-a11y-toolbar video),
body.pojo-a11y-high-contrast svg:not(#pojo-a11y-toolbar svg) {
	filter: contrast(1.2) grayscale(0.15);
}

body.pojo-a11y-negative-contrast {
	background: #000 !important;
	color: #fff !important;
}
body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar, #pojo-a11y-toolbar *) {
	background-color: #000 !important;
	background-image: none !important;
	color: #fff !important;
	border-color: #666 !important;
	box-shadow: none !important;
}
body.pojo-a11y-negative-contrast a:not(#pojo-a11y-toolbar a),
body.pojo-a11y-negative-contrast a:not(#pojo-a11y-toolbar a) * {
	color: #ffff00 !important;
}
body.pojo-a11y-negative-contrast button:not(#pojo-a11y-toolbar button),
body.pojo-a11y-negative-contrast input:not(#pojo-a11y-toolbar input),
body.pojo-a11y-negative-contrast select:not(#pojo-a11y-toolbar select),
body.pojo-a11y-negative-contrast textarea:not(#pojo-a11y-toolbar textarea) {
	background-color: #000 !important;
	color: #fff !important;
	border: 1px solid #fff !important;
}

body.pojo-a11y-light-background {
	background: #fff !important;
	color: #000 !important;
}
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar, #pojo-a11y-toolbar *) {
	background-color: #fff !important;
	background-image: none !important;
	color: #000 !important;
	border-color: #333 !important;
	box-shadow: none !important;
}
body.pojo-a11y-light-background a:not(#pojo-a11y-toolbar a),
body.pojo-a11y-light-background a:not(#pojo-a11y-toolbar a) * {
	color: #0000ee !important;
}

/* -------------------------------------------------------------------------
   Reading aids
   ------------------------------------------------------------------------- */

body.pojo-a11y-links-underline a,
body.pojo-a11y-links-underline a *,
body.pojo-a11y-links-underline button,
body.pojo-a11y-links-underline [role="button"],
body.pojo-a11y-links-underline [role="link"],
body.pojo-a11y-links-underline [role="menuitem"],
body.pojo-a11y-links-underline [role="tab"],
body.pojo-a11y-links-underline [role="option"],
body.pojo-a11y-links-underline summary,
body.pojo-a11y-links-underline label[for],
body.pojo-a11y-links-underline input[type="button"],
body.pojo-a11y-links-underline input[type="submit"],
body.pojo-a11y-links-underline input[type="reset"],
body.pojo-a11y-links-underline select {
	text-decoration: underline !important;
	text-underline-offset: 0.12em;
}

body.pojo-a11y-readable-font,
body.pojo-a11y-readable-font *:not(i) {
	font-family: Verdana, Arial, Helvetica, sans-serif !important;
}

/* -------------------------------------------------------------------------
   Text size (Pojo-compatible class names)
   ------------------------------------------------------------------------- */

body.pojo-a11y-resize-font-130 {
	font-size: 130% !important;
}
body.pojo-a11y-resize-font-130 :is(p, li, label, input, select, textarea, button, a):not(#pojo-a11y-toolbar, #pojo-a11y-toolbar *) {
	font-size: inherit;
}
body.pojo-a11y-resize-font-140 {
	font-size: 140% !important;
}
body.pojo-a11y-resize-font-140 :is(p, li, label, input, select, textarea, button, a):not(#pojo-a11y-toolbar, #pojo-a11y-toolbar *) {
	font-size: inherit;
}
body.pojo-a11y-resize-font-150 {
	font-size: 150% !important;
}
body.pojo-a11y-resize-font-150 :is(p, li, label, input, select, textarea, button, a):not(#pojo-a11y-toolbar, #pojo-a11y-toolbar *) {
	font-size: inherit;
}
body.pojo-a11y-resize-font-160 {
	font-size: 160% !important;
}
body.pojo-a11y-resize-font-160 :is(p, li, label, input, select, textarea, button, a):not(#pojo-a11y-toolbar, #pojo-a11y-toolbar *) {
	font-size: inherit;
}
body.pojo-a11y-resize-font-170 {
	font-size: 170% !important;
}
body.pojo-a11y-resize-font-170 :is(p, li, label, input, select, textarea, button, a):not(#pojo-a11y-toolbar, #pojo-a11y-toolbar *) {
	font-size: inherit;
}
body.pojo-a11y-resize-font-180 {
	font-size: 180% !important;
}
body.pojo-a11y-resize-font-180 :is(p, li, label, input, select, textarea, button, a):not(#pojo-a11y-toolbar, #pojo-a11y-toolbar *) {
	font-size: inherit;
}
body.pojo-a11y-resize-font-190 {
	font-size: 190% !important;
}
body.pojo-a11y-resize-font-190 :is(p, li, label, input, select, textarea, button, a):not(#pojo-a11y-toolbar, #pojo-a11y-toolbar *) {
	font-size: inherit;
}
body.pojo-a11y-resize-font-200 {
	font-size: 200% !important;
}
body.pojo-a11y-resize-font-200 :is(p, li, label, input, select, textarea, button, a):not(#pojo-a11y-toolbar, #pojo-a11y-toolbar *) {
	font-size: inherit;
}