/* Accessibility mode overlay styles */

/* Skip link */
.a11y-skip-link {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 100000;
	padding: 12px 20px;
	background: #000;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	border-radius: 4px;
}

.a11y-skip-link:focus,
.a11y-skip-link:focus-visible {
	top: 16px;
	outline: 3px solid #fff;
	outline-offset: 2px;
}

/* Footer toggle button */
.a11y-footer-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 16px;
	padding: 12px 24px;
	border: 2px solid rgba(255, 255, 255, 0.7);
	border-radius: 6px;
	background: transparent;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.a11y-footer-toggle:hover,
.a11y-footer-toggle:focus-visible {
	background: #fff;
	color: #21293b;
	outline: none;
}

.a11y-footer-toggle[aria-pressed="true"] {
	background: #fff;
	color: #21293b;
}

/* Settings panel */
.a11y-panel {
	position: relative;
	z-index: 9999;
	background: #f5f5f5;
	border-bottom: 3px solid #000;
	color: #000;
}

.a11y-panel__inner {
	padding: 16px 0;
}

.a11y-panel__title {
	margin: 0 0 12px;
	font-size: 18px;
	font-weight: 700;
}

.a11y-panel__group {
	margin-bottom: 12px;
}

.a11y-panel__label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 600;
}

.a11y-panel__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.a11y-panel__btn,
.a11y-panel__disable {
	min-height: 44px;
	padding: 10px 16px;
	border: 2px solid #000;
	border-radius: 4px;
	background: #fff;
	color: #000;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
}

.a11y-panel__btn[aria-pressed="true"],
.a11y-panel__btn:hover,
.a11y-panel__btn:focus-visible,
.a11y-panel__disable:hover,
.a11y-panel__disable:focus-visible {
	background: #000;
	color: #fff;
	outline: 3px solid #000;
	outline-offset: 2px;
}

.a11y-panel__disable {
	margin-top: 4px;
}

/* Font sizes */
html.a11y-font-sm,
body.a11y-on.a11y-font-sm {
	font-size: 100%;
}

html.a11y-font-md,
body.a11y-on.a11y-font-md {
	font-size: 125%;
}

html.a11y-font-lg,
body.a11y-on.a11y-font-lg {
	font-size: 150%;
}

/* Line heights */
body.a11y-on.a11y-lh-sm,
body.a11y-on.a11y-lh-sm * {
	line-height: 1.15 !important;
}

body.a11y-on.a11y-lh-md,
body.a11y-on.a11y-lh-md * {
	line-height: 1.5 !important;
}

body.a11y-on.a11y-lh-lg,
body.a11y-on.a11y-lh-lg * {
	line-height: 2 !important;
}

/* Focus visible in a11y mode */
body.a11y-on :focus-visible {
	outline: 3px solid currentColor !important;
	outline-offset: 2px !important;
}

body.a11y-on a,
body.a11y-on button,
body.a11y-on input,
body.a11y-on select,
body.a11y-on textarea,
body.a11y-on [tabindex] {
	outline-color: currentColor;
}

/* Disable animations */
body.a11y-on *,
body.a11y-on *::before,
body.a11y-on *::after {
	animation: none !important;
	transition: none !important;
}

/* Color scheme: black on white */
body.a11y-on.a11y-scheme-bw,
body.a11y-on.a11y-scheme-bw .boxed_wrapper {
	background: #fff !important;
	color: #000 !important;
}

body.a11y-on.a11y-scheme-bw *:not(.a11y-panel):not(.a11y-panel *):not(.a11y-skip-link) {
	background-color: #fff !important;
	color: #000 !important;
	border-color: #000 !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

body.a11y-on.a11y-scheme-bw a:not(.a11y-panel a):not(.a11y-skip-link) {
	color: #000 !important;
	text-decoration: underline !important;
}

body.a11y-on.a11y-scheme-bw img:not(.a11y-panel img) {
	filter: none !important;
}

/* Color scheme: white on black */
body.a11y-on.a11y-scheme-wb,
body.a11y-on.a11y-scheme-wb .boxed_wrapper {
	background: #000 !important;
	color: #fff !important;
}

body.a11y-on.a11y-scheme-wb *:not(.a11y-panel):not(.a11y-panel *):not(.a11y-skip-link) {
	background-color: #000 !important;
	color: #fff !important;
	border-color: #fff !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

body.a11y-on.a11y-scheme-wb a:not(.a11y-panel a):not(.a11y-skip-link) {
	color: #fff !important;
	text-decoration: underline !important;
}

/* Color scheme: blue on light blue */
body.a11y-on.a11y-scheme-blue,
body.a11y-on.a11y-scheme-blue .boxed_wrapper {
	background: #9dd1ff !important;
	color: #063462 !important;
}

body.a11y-on.a11y-scheme-blue *:not(.a11y-panel):not(.a11y-panel *):not(.a11y-skip-link) {
	background-color: #9dd1ff !important;
	color: #063462 !important;
	border-color: #063462 !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

body.a11y-on.a11y-scheme-blue a:not(.a11y-panel a):not(.a11y-skip-link) {
	color: #063462 !important;
	text-decoration: underline !important;
}

/* Remove decorative background images in a11y mode */
body.a11y-on [style*="background-image"]:not(.a11y-panel):not(.a11y-panel *) {
	background-image: none !important;
}

body.a11y-on .image-layer,
body.a11y-on .single-event-style2_bg {
	background-image: none !important;
}

/* Images off mode */
body.a11y-on.a11y-images-off img:not(.a11y-panel img) {
	visibility: hidden !important;
	position: relative;
	min-height: 1px;
}

body.a11y-on.a11y-images-off .a11y-img-caption {
	display: block;
	margin: 8px 0 16px;
	padding: 8px 12px;
	border: 2px solid currentColor;
	font-size: 0.9em;
	font-weight: 600;
}

/* Panel keeps its own colors regardless of scheme */
body.a11y-on .a11y-panel,
body.a11y-on .a11y-panel * {
	background-color: #f5f5f5 !important;
	color: #000 !important;
	border-color: #000 !important;
}

body.a11y-on .a11y-panel__btn[aria-pressed="true"],
body.a11y-on .a11y-panel__btn:hover,
body.a11y-on .a11y-panel__btn:focus-visible,
body.a11y-on .a11y-panel__disable:hover,
body.a11y-on .a11y-panel__disable:focus-visible {
	background-color: #000 !important;
	color: #fff !important;
}

/* Letter spacing for readability */
body.a11y-on p,
body.a11y-on li,
body.a11y-on span,
body.a11y-on a,
body.a11y-on h1,
body.a11y-on h2,
body.a11y-on h3,
body.a11y-on h4,
body.a11y-on h5,
body.a11y-on h6 {
	letter-spacing: 0.02em;
}

/* Underline links for clarity */
body.a11y-on a:not(.a11y-panel__btn):not(.a11y-footer-toggle) {
	text-decoration: underline !important;
}

@media (max-width: 767px) {
	.a11y-panel__buttons {
		flex-direction: column;
	}

	.a11y-panel__btn,
	.a11y-panel__disable {
		width: 100%;
	}
}