/* ==========================================================================
   Accessibility menu (תפריט נגישות) – IS 5568
   ========================================================================== */

/* Screen-reader only utility */
.cabri-a11y-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ----- Toggle button --------------------------------------------------- */

.cabri-a11y-toggle {
	position: fixed;
	inset-inline-start: 1rem;
	bottom: 1rem;
	width: 3.4rem;
	height: 3.4rem;
	padding: 0;
	border: 2px solid #fff;
	border-radius: 50%;
	background: #1f4d8f;
	color: #fff;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
	cursor: pointer;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.cabri-a11y-toggle:hover,
.cabri-a11y-toggle:focus-visible {
	background: #2a64b0;
	transform: scale(1.06);
	outline: 3px solid var(--yellow, #fecf26);
	outline-offset: 2px;
}

.cabri-a11y-toggle__icon {
	display: inline-flex;
	width: 1.9rem;
	height: 1.9rem;
}

.cabri-a11y-toggle__icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

/* ----- Dialog (panel) -------------------------------------------------- */

.cabri-a11y-panel {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: none;
}

.cabri-a11y-panel[aria-hidden="false"] {
	display: block;
}

.cabri-a11y-panel__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	animation: cabri-a11y-fade-in 0.2s ease-out;
}

.cabri-a11y-panel__inner {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 360px;
	max-width: 92vw;
	background: #fff;
	color: #222;
	box-shadow: 0 0 24px rgba(0, 0, 0, 0.3);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	animation: cabri-a11y-slide-in 0.25s ease-out;
	font-family: 'Noto Sans Hebrew', Arial, sans-serif;
	font-size: 16px;
	line-height: 1.4;
}

@keyframes cabri-a11y-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* In RTL the panel is anchored to the right; slide in from the right edge */
@keyframes cabri-a11y-slide-in {
	from { transform: translateX(100%); }
	to   { transform: translateX(0); }
}

[dir="ltr"] .cabri-a11y-panel__inner {
	animation-name: cabri-a11y-slide-in-ltr;
}

@keyframes cabri-a11y-slide-in-ltr {
	from { transform: translateX(-100%); }
	to   { transform: translateX(0); }
}

.cabri-a11y-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	background: #1f4d8f;
	color: #fff;
	position: sticky;
	top: 0;
	z-index: 1;
}

.cabri-a11y-panel__title {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 700;
	color: #fff;
}

.cabri-a11y-close {
	background: transparent;
	border: 2px solid transparent;
	color: #fff;
	font-size: 1.6rem;
	line-height: 1;
	width: 2.2rem;
	height: 2.2rem;
	border-radius: 50%;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.cabri-a11y-close:hover,
.cabri-a11y-close:focus-visible {
	background: rgba(255, 255, 255, 0.18);
	border-color: var(--yellow, #fecf26);
	outline: none;
}

.cabri-a11y-panel__body {
	padding: 1rem 1.25rem 1.5rem;
}

.cabri-a11y-section {
	border-bottom: 1px solid #e5e5e5;
	padding: 0.85rem 0;
}

.cabri-a11y-section:last-child {
	border-bottom: 0;
}

.cabri-a11y-section h3 {
	margin: 0 0 0.6rem;
	font-size: 0.95rem;
	font-weight: 700;
	color: #1f4d8f;
}

/* Stepper (font / line / letter) */
.cabri-a11y-stepper {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

.cabri-a11y-stepper:last-child {
	margin-bottom: 0;
}

.cabri-a11y-stepper button {
	flex: 0 0 2.4rem;
	height: 2.4rem;
	border: 2px solid #1f4d8f;
	background: #fff;
	color: #1f4d8f;
	font-size: 1.2rem;
	font-weight: 700;
	border-radius: 6px;
	cursor: pointer;
	line-height: 1;
}

.cabri-a11y-stepper button:hover,
.cabri-a11y-stepper button:focus-visible {
	background: #1f4d8f;
	color: #fff;
	outline: 3px solid var(--yellow, #fecf26);
	outline-offset: 1px;
}

.cabri-a11y-stepper__value {
	flex: 1 1 auto;
	text-align: center;
	font-size: 0.95rem;
	font-weight: 600;
	color: #222;
	background: #f3f3f3;
	border-radius: 6px;
	padding: 0.5rem 0.4rem;
	min-height: 2.4rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Grid of toggle buttons */
.cabri-a11y-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
}

.cabri-a11y-grid button {
	border: 2px solid #1f4d8f;
	background: #fff;
	color: #1f4d8f;
	border-radius: 6px;
	padding: 0.55rem 0.6rem;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	text-align: center;
	min-height: 2.6rem;
	line-height: 1.25;
}

.cabri-a11y-grid button:hover,
.cabri-a11y-grid button:focus-visible {
	background: #e9eff8;
	outline: 3px solid var(--yellow, #fecf26);
	outline-offset: 1px;
}

.cabri-a11y-grid button[aria-pressed="true"] {
	background: #1f4d8f;
	color: #fff;
}

.cabri-a11y-grid button[aria-pressed="true"]::before {
	content: "✓ ";
	font-weight: 700;
}

/* Reset and link row */
.cabri-a11y-section--actions {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	align-items: stretch;
	padding-top: 1rem;
}

.cabri-a11y-reset {
	background: #b91c1c;
	color: #fff;
	border: 2px solid #b91c1c;
	border-radius: 6px;
	padding: 0.65rem 1rem;
	font-size: 0.95rem;
	font-weight: 700;
	cursor: pointer;
}

.cabri-a11y-reset:hover,
.cabri-a11y-reset:focus-visible {
	background: #991313;
	outline: 3px solid var(--yellow, #fecf26);
	outline-offset: 2px;
}

.cabri-a11y-statement {
	text-align: center;
	color: #1f4d8f;
	font-weight: 700;
	text-decoration: underline;
	padding: 0.4rem;
}

.cabri-a11y-statement:hover,
.cabri-a11y-statement:focus-visible {
	color: #0f2a52;
	outline: 3px solid var(--yellow, #fecf26);
	outline-offset: 2px;
}

/* When dialog is open: lock background scroll */
html.cabri-a11y-locked,
html.cabri-a11y-locked body {
	overflow: hidden !important;
}

/* ==========================================================================
   GLOBAL ACCESSIBILITY MODES
   These classes are toggled on the <html> element by accessibility-menu.js
   ========================================================================== */

/* ----- Font size (per +/- step = 5%) ------------------------------------ */
html.a11y-font-plus-1  { font-size: 1.05em !important; }
html.a11y-font-plus-2  { font-size: 1.10em !important; }
html.a11y-font-plus-3  { font-size: 1.15em !important; }
html.a11y-font-plus-4  { font-size: 1.20em !important; }
html.a11y-font-minus-1 { font-size: 0.95em !important; }
html.a11y-font-minus-2 { font-size: 0.90em !important; }

/* ----- Line spacing ----------------------------------------------------- */
html.a11y-line-1 body,
html.a11y-line-1 body p,
html.a11y-line-1 body li,
html.a11y-line-1 body span,
html.a11y-line-1 body div { line-height: 1.6 !important; }

html.a11y-line-2 body,
html.a11y-line-2 body p,
html.a11y-line-2 body li,
html.a11y-line-2 body span,
html.a11y-line-2 body div { line-height: 1.9 !important; }

html.a11y-line-3 body,
html.a11y-line-3 body p,
html.a11y-line-3 body li,
html.a11y-line-3 body span,
html.a11y-line-3 body div { line-height: 2.2 !important; }

/* ----- Letter spacing --------------------------------------------------- */
html.a11y-letter-1 body,
html.a11y-letter-1 body p,
html.a11y-letter-1 body li,
html.a11y-letter-1 body span,
html.a11y-letter-1 body a,
html.a11y-letter-1 body h1,
html.a11y-letter-1 body h2,
html.a11y-letter-1 body h3,
html.a11y-letter-1 body h4 { letter-spacing: 0.05em !important; }

html.a11y-letter-2 body,
html.a11y-letter-2 body p,
html.a11y-letter-2 body li,
html.a11y-letter-2 body span,
html.a11y-letter-2 body a,
html.a11y-letter-2 body h1,
html.a11y-letter-2 body h2,
html.a11y-letter-2 body h3,
html.a11y-letter-2 body h4 { letter-spacing: 0.1em !important; }

html.a11y-letter-3 body,
html.a11y-letter-3 body p,
html.a11y-letter-3 body li,
html.a11y-letter-3 body span,
html.a11y-letter-3 body a,
html.a11y-letter-3 body h1,
html.a11y-letter-3 body h2,
html.a11y-letter-3 body h3,
html.a11y-letter-3 body h4 { letter-spacing: 0.15em !important; }

/* ----- High-contrast mode (yellow on black) ----------------------------- */
html.a11y-contrast-high body,
html.a11y-contrast-high body * {
	background: #000 !important;
	color: #ffea00 !important;
	border-color: #ffea00 !important;
	text-shadow: none !important;
	box-shadow: none !important;
}

html.a11y-contrast-high body a,
html.a11y-contrast-high body a * {
	color: #00e6ff !important;
	text-decoration: underline !important;
}

html.a11y-contrast-high body img,
html.a11y-contrast-high body video,
html.a11y-contrast-high body iframe,
html.a11y-contrast-high body svg {
	background: transparent !important;
	filter: grayscale(100%) contrast(1.2);
}

/* ----- Negative contrast (invert) --------------------------------------- */
html.a11y-contrast-negative body {
	background: #fff;
}

html.a11y-contrast-negative body {
	filter: invert(100%) hue-rotate(180deg) !important;
}

html.a11y-contrast-negative body img,
html.a11y-contrast-negative body video,
html.a11y-contrast-negative body iframe,
html.a11y-contrast-negative body picture {
	filter: invert(100%) hue-rotate(180deg) !important;
}

/* Keep our own dialog readable on top of the inverted page */
html.a11y-contrast-negative #cabri-a11y-panel,
html.a11y-contrast-negative .cabri-a11y-toggle {
	filter: invert(100%) hue-rotate(180deg) !important;
}

/* ----- Light background (force white bg / dark text) -------------------- */
html.a11y-contrast-light body,
html.a11y-contrast-light body * {
	background-color: #fff !important;
	color: #111 !important;
	background-image: none !important;
	text-shadow: none !important;
}

html.a11y-contrast-light body a,
html.a11y-contrast-light body a * {
	color: #0030a0 !important;
	text-decoration: underline !important;
}

html.a11y-contrast-light .cabri-a11y-panel__header,
html.a11y-contrast-light .cabri-a11y-panel__header * {
	background-color: #1f4d8f !important;
	color: #fff !important;
}

/* ----- Monochrome ------------------------------------------------------- */
html.a11y-monochrome body {
	filter: grayscale(100%) !important;
}

/* ----- Color-blind (deuteranopia) – via SVG filter ---------------------- */
html.a11y-cb body {
	filter: url(#cabri-a11y-deuteranopia) !important;
}

/* The panel itself should remain unfiltered so the controls are usable */
html.a11y-monochrome #cabri-a11y-panel,
html.a11y-cb        #cabri-a11y-panel,
html.a11y-monochrome .cabri-a11y-toggle,
html.a11y-cb        .cabri-a11y-toggle {
	filter: none !important;
}

/* ----- Readable mode (cleaner sans-serif font) -------------------------- */
html.a11y-readable body,
html.a11y-readable body * {
	font-family: 'Arial', 'Tahoma', 'Verdana', sans-serif !important;
	font-weight: 500 !important;
	font-style: normal !important;
}

html.a11y-readable body h1,
html.a11y-readable body h2,
html.a11y-readable body h3,
html.a11y-readable body h4,
html.a11y-readable body strong,
html.a11y-readable body b {
	font-weight: 700 !important;
}

/* ----- Underline / highlight links -------------------------------------- */
html.a11y-underline body a {
	text-decoration: underline !important;
	text-underline-offset: 2px;
	outline: 1px dotted currentColor;
	outline-offset: 2px;
}

/* ----- Stop animations / transitions ------------------------------------ */
html.a11y-stop-anim body *,
html.a11y-stop-anim body *::before,
html.a11y-stop-anim body *::after {
	animation-duration: 0.001s !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.001s !important;
	scroll-behavior: auto !important;
}

/* GIFs / videos / iframes: hint that they are paused (visual frame around) */
html.a11y-stop-anim body video,
html.a11y-stop-anim body img[src$=".gif"] {
	outline: 2px dashed #b91c1c;
	outline-offset: -2px;
}

/* ----- Big cursor ------------------------------------------------------- */
html.a11y-big-cursor,
html.a11y-big-cursor body,
html.a11y-big-cursor body * {
	cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'><path d='M6 4 L6 38 L15 30 L20 44 L27 41 L22 28 L34 28 Z' fill='black' stroke='white' stroke-width='2' stroke-linejoin='round'/></svg>") 0 0, auto !important;
}

html.a11y-big-cursor body a,
html.a11y-big-cursor body button,
html.a11y-big-cursor body [role="button"],
html.a11y-big-cursor body input[type="submit"],
html.a11y-big-cursor body input[type="button"],
html.a11y-big-cursor body label {
	cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'><path d='M22 4 L22 22 L17 22 L17 14 L13 14 L13 30 L17 32 L17 26 L26 26 L26 36 L34 36 L34 22 L30 22 L30 18 L34 18 L34 14 L30 14 L30 10 L26 10 L26 4 Z' fill='black' stroke='white' stroke-width='2' stroke-linejoin='round'/></svg>") 6 0, pointer !important;
}

/* ----- Small screens ---------------------------------------------------- */
@media (max-width: 480px) {
	.cabri-a11y-panel__inner {
		width: 100vw;
		max-width: 100vw;
	}

	.cabri-a11y-toggle {
		width: 3rem;
		height: 3rem;
	}
}

/* Respect prefers-reduced-motion for our own animations */
@media (prefers-reduced-motion: reduce) {
	.cabri-a11y-panel__inner,
	.cabri-a11y-panel__backdrop,
	.cabri-a11y-toggle {
		animation: none !important;
		transition: none !important;
	}
}