/**
 * Kfar Saba Accessibility widget — tokens aligned with kfar-saba-museum / kspm.
 */
:root {
	--ksa11y-primary: #38494B;
	--ksa11y-accent: #E16A54;
	--ksa11y-cream: #f4f1ea;
	/* Launcher = theme brand primary ($color-brand-primary), hover slightly lifted */
	--ksa11y-launcher-hover: #465c5f;
	--ksa11y-launcher-ring: rgba(255, 255, 255, 0.95);
	--ksa11y-bg: #ffffff;
	--ksa11y-surface: #fbfaf9;
	--ksa11y-text: #2d2828;
	--ksa11y-text-muted: #8c8c85;
	--ksa11y-border: rgba(56, 73, 75, 0.18);
	--ksa11y-radius: 16px;
	--ksa11y-radius-sm: 10px;
	--ksa11y-shadow: 0 12px 40px rgba(45, 40, 40, 0.14);
	--ksa11y-z-launch: 30040;
	--ksa11y-z-panel: 30050;
}

/* ---- Skip link ---- */
.ksa11y-skip-link {
	position: fixed;
	top: -100px;
	inset-inline-start: 12px;
	z-index: 30060;
	padding: 12px 20px;
	background: var(--ksa11y-primary);
	color: #f4f1ea;
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--ksa11y-radius-sm);
	box-shadow: var(--ksa11y-shadow);
	transition: top 0.2s ease;
}

.ksa11y-skip-link:focus {
	top: 12px;
	outline: 3px solid var(--ksa11y-accent);
	outline-offset: 2px;
}

/* ---- Widget shell ---- */
.ksa11y-root:not([hidden]) {
	position: fixed;
	inset: 0;
	z-index: var(--ksa11y-z-panel);
	pointer-events: none;
	font-family: inherit;
}

.ksa11y-root:not([hidden]) * {
	pointer-events: auto;
}

.ksa11y-launcher {
	position: fixed;
	bottom: 24px;
	z-index: var(--ksa11y-z-launch);
	width: 56px;
	height: 56px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--ksa11y-primary);
	color: var(--ksa11y-cream);
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(56, 73, 75, 0.35);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.ksa11y-launcher--end {
	inset-inline-end: 24px;
}

.ksa11y-launcher--start {
	inset-inline-start: 24px;
}

.ksa11y-launcher:hover {
	transform: scale(1.05);
	background: var(--ksa11y-launcher-hover);
	box-shadow: 0 10px 28px rgba(56, 73, 75, 0.42);
}

.ksa11y-launcher:focus {
	outline: none;
}

.ksa11y-launcher:focus-visible {
	transform: scale(1.05);
	background: var(--ksa11y-launcher-hover);
	box-shadow: 0 10px 28px rgba(56, 73, 75, 0.42), 0 0 0 3px var(--ksa11y-launcher-ring);
	outline-offset: 0;
}

.ksa11y-launcher__icon {
	width: 24px;
	height: 24px;
	display: block;
	flex-shrink: 0;
}

.ksa11y-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(45, 40, 40, 0.35);
	backdrop-filter: blur(2px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

.ksa11y-backdrop--open {
	opacity: 1;
	visibility: visible;
}

.ksa11y-panel-wrap {
	position: fixed;
	bottom: 96px;
	display: flex;
	justify-content: center;
	width: 100%;
	max-height: min(85vh, 640px);
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.ksa11y-panel-wrap--end {
	inset-inline-end: 0;
	width: auto;
	max-width: calc(100vw - 24px);
	padding-inline-end: 24px;
	justify-content: flex-end;
}

.ksa11y-panel-wrap--start {
	inset-inline-start: 0;
	width: auto;
	max-width: calc(100vw - 24px);
	padding-inline-start: 24px;
	justify-content: flex-start;
}

.ksa11y-panel-wrap--open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

.ksa11y-panel {
	width: min(360px, calc(100vw - 32px));
	max-height: min(85vh, 600px);
	overflow: auto;
	background: var(--ksa11y-bg);
	color: var(--ksa11y-text);
	border-radius: var(--ksa11y-radius);
	box-shadow: var(--ksa11y-shadow);
	border: 1px solid var(--ksa11y-border);
	direction: rtl;
	text-align: right;
	pointer-events: auto;
}

.ksa11y-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 20px 14px;
	border-bottom: 1px solid var(--ksa11y-border);
	position: sticky;
	top: 0;
	background: var(--ksa11y-bg);
	z-index: 1;
}

.ksa11y-panel__title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--ksa11y-text);
	line-height: 1.2;
}

.ksa11y-panel__close {
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--ksa11y-text-muted);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	border-radius: var(--ksa11y-radius-sm);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ksa11y-panel__close:hover,
.ksa11y-panel__close:focus-visible {
	color: var(--ksa11y-text);
	background: var(--ksa11y-surface);
	outline: 2px solid var(--ksa11y-accent);
	outline-offset: 2px;
}

.ksa11y-panel__body {
	padding: 8px 0 12px;
}

.ksa11y-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 20px;
	min-height: 52px;
}

.ksa11y-row__label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 1rem;
	line-height: 1.35;
	color: var(--ksa11y-text);
	flex: 1 1 auto;
}

.ksa11y-row__icon {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	color: var(--ksa11y-primary);
	opacity: 0.85;
}

.ksa11y-row__icon svg {
	width: 22px;
	height: 22px;
	display: block;
}

/* Text size segment control */
.ksa11y-segments {
	display: flex;
	gap: 4px;
	flex-shrink: 0;
}

.ksa11y-seg {
	min-width: 44px;
	min-height: 44px;
	padding: 0 10px;
	border: 1px solid var(--ksa11y-border);
	background: var(--ksa11y-surface);
	color: var(--ksa11y-text);
	font-size: 0.95rem;
	font-weight: 600;
	border-radius: var(--ksa11y-radius-sm);
	cursor: pointer;
}

.ksa11y-seg:hover,
.ksa11y-seg:focus-visible {
	border-color: var(--ksa11y-primary);
	outline: 2px solid var(--ksa11y-accent);
	outline-offset: 1px;
}

.ksa11y-seg--active {
	background: var(--ksa11y-primary);
	color: #f4f1ea;
	border-color: var(--ksa11y-primary);
}

/* Toggle */
.ksa11y-switch {
	position: relative;
	width: 48px;
	height: 28px;
	flex-shrink: 0;
}

.ksa11y-switch input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ksa11y-switch__ui {
	position: absolute;
	inset: 0;
	background: #e8e6e3;
	border-radius: 14px;
	transition: background 0.15s ease;
	cursor: pointer;
}

.ksa11y-switch__ui::after {
	content: "";
	position: absolute;
	width: 22px;
	height: 22px;
	inset-block-start: 3px;
	inset-inline-start: 3px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
	transition: transform 0.15s ease;
}

.ksa11y-switch input:checked + .ksa11y-switch__ui {
	background: var(--ksa11y-primary);
}

.ksa11y-switch input:focus-visible + .ksa11y-switch__ui {
	outline: 2px solid var(--ksa11y-accent);
	outline-offset: 2px;
}

.ksa11y-switch input:checked + .ksa11y-switch__ui::after {
	transform: translateX(20px);
}

[dir="rtl"] .ksa11y-switch input:checked + .ksa11y-switch__ui::after {
	transform: translateX(-20px);
}

/* Reset — ברירת מחדל, מנקה localStorage */
.ksa11y-panel__reset {
	padding: 4px 20px 14px;
	border-top: 1px solid var(--ksa11y-border);
}

.ksa11y-reset {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px;
	padding: 0.55rem 1rem;
	margin: 0;
	border: 1px solid var(--ksa11y-primary);
	border-radius: var(--ksa11y-radius-sm);
	background: var(--ksa11y-surface);
	color: var(--ksa11y-primary);
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ksa11y-reset:hover {
	background: var(--ksa11y-primary);
	color: var(--ksa11y-cream);
	border-color: var(--ksa11y-primary);
}

.ksa11y-reset:focus {
	outline: none;
}

.ksa11y-reset:focus-visible {
	outline: 2px solid var(--ksa11y-primary);
	outline-offset: 2px;
}

/* Footer */
.ksa11y-panel__footer {
	padding: 12px 20px 18px;
	border-top: 1px solid var(--ksa11y-border);
}

.ksa11y-statement {
	display: inline-block;
	font-weight: 600;
	font-size: 1rem;
	color: var(--ksa11y-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	min-height: 44px;
	line-height: 44px;
}

.ksa11y-statement:hover,
.ksa11y-statement:focus-visible {
	color: var(--ksa11y-accent);
	outline: 2px solid var(--ksa11y-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ---- Page preference classes (on html) ---- */
html.ksa11y-text-sm {
	font-size: 93.75%;
}

html.ksa11y-text-lg {
	font-size: 112.5%;
}

html.ksa11y-grayscale {
	filter: grayscale(1);
}

html.ksa11y-readable-font body {
	font-family: "Segoe UI", "Helvetica Neue", Arial, "Arial Hebrew", "Noto Sans Hebrew", sans-serif !important;
}

html.ksa11y-readable-font body button,
html.ksa11y-readable-font body input,
html.ksa11y-readable-font body select,
html.ksa11y-readable-font body textarea {
	font-family: inherit !important;
}

html.ksa11y-line-spacing body {
	line-height: 1.75 !important;
}

html.ksa11y-line-spacing body p,
html.ksa11y-line-spacing body li {
	margin-bottom: 0.85em !important;
}

html.ksa11y-highlight-links a {
	text-decoration: underline !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 3px !important;
	outline: 2px solid currentColor !important;
	outline-offset: 3px;
}

html.ksa11y-large-cursor,
html.ksa11y-large-cursor body,
html.ksa11y-large-cursor button,
html.ksa11y-large-cursor a,
html.ksa11y-large-cursor input,
html.ksa11y-large-cursor textarea,
html.ksa11y-large-cursor label {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 3l7.5 14L12 13l6.5 2L5 3z' fill='%2338494B' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E") 0 0, auto !important;
}

html.ksa11y-reduce-motion *,
html.ksa11y-reduce-motion *::before,
html.ksa11y-reduce-motion *::after {
	animation-duration: 0.01ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.01ms !important;
	scroll-behavior: auto !important;
}

html.ksa11y-high-contrast body {
	background: #fff !important;
	color: #000 !important;
}

html.ksa11y-high-contrast body a {
	color: #0000d8 !important;
	text-decoration: underline !important;
}

html.ksa11y-high-contrast body button,
html.ksa11y-high-contrast body input,
html.ksa11y-high-contrast body select,
html.ksa11y-high-contrast body textarea {
	border: 2px solid #000 !important;
}

html.ksa11y-high-contrast body .ksa11y-launcher {
	background: #0d280d !important;
	color: #fff !important;
	box-shadow: none !important;
	border: 2px solid #fff !important;
}

html.ksa11y-high-contrast body .ksa11y-launcher:hover,
html.ksa11y-high-contrast body .ksa11y-launcher:focus-visible {
	background: #1a3d1a !important;
	box-shadow: 0 0 0 3px #fff !important;
}

html.ksa11y-high-contrast body .ksa11y-panel {
	border: 2px solid #000 !important;
}

html.ksa11y-high-contrast body .ksa11y-reset {
	border: 2px solid #000 !important;
	background: #fff !important;
	color: #000 !important;
}

html.ksa11y-high-contrast body .ksa11y-reset:hover {
	background: #000 !important;
	color: #fff !important;
}

@media (max-width: 480px) {
	.ksa11y-panel-wrap--end,
	.ksa11y-panel-wrap--start {
		width: 100%;
		max-width: 100%;
		padding-inline-end: 12px;
		padding-inline-start: 12px;
		justify-content: center;
	}

	.ksa11y-launcher--end,
	.ksa11y-launcher--start {
		inset-inline-end: 16px;
		inset-inline-start: auto;
	}

	.ksa11y-launcher--start {
		inset-inline-start: 16px;
		inset-inline-end: auto;
	}
}