/* ALY Accessibility - frontend */

#aly-a11y-root {
	--aly-cur-size: var(--aly-size, 56px);
	font-family: -apple-system, "Segoe UI", Arial, "Noto Sans Hebrew", sans-serif;
	direction: rtl;
}

/* ---------- הכפתור הצף ---------- */
#aly-a11y-btn {
	width: var(--aly-cur-size);
	height: var(--aly-cur-size);
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .55);
	background: var(--aly-bg, #1e5aa8);
	color: var(--aly-icon, #fff);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	box-shadow: 0 3px 14px rgba(0, 0, 0, .3);
	transition: transform .35s ease, opacity .35s ease, box-shadow .2s ease;
	-webkit-tap-highlight-color: transparent;
}

#aly-a11y-btn svg {
	width: 62%;
	height: 62%;
	display: block;
	pointer-events: none;
}

#aly-a11y-btn:hover,
#aly-a11y-btn:focus-visible {
	box-shadow: 0 5px 20px rgba(0, 0, 0, .45);
}

#aly-a11y-btn:focus-visible {
	outline: 3px solid #ffbf47;
	outline-offset: 2px;
}

/* הסתרה אוטומטית - fade: מוקטן ושקוף אבל עדיין נגיש */
#aly-a11y-root.aly-autohidden.aly-mode-fade #aly-a11y-btn {
	opacity: .25;
	transform: scale(.6);
}

/* הסתרה אוטומטית - slide: ה-transform מוגדר ב-CSS דינמי לפי צד */
#aly-a11y-root.aly-autohidden.aly-mode-slide #aly-a11y-btn {
	opacity: .55;
}

#aly-a11y-root.aly-autohidden #aly-a11y-btn:hover,
#aly-a11y-root.aly-autohidden #aly-a11y-btn:focus-visible {
	opacity: 1;
	transform: none;
}

/* ---------- הפאנל ---------- */
#aly-a11y-panel {
	position: absolute;
	bottom: calc(var(--aly-cur-size) + 12px);
	width: 300px;
	max-width: calc(100vw - 24px);
	max-height: calc(100vh - var(--aly-cur-size) - 44px);
	overflow-y: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	background: #fff;
	color: #1a1a2e;
	border-radius: 14px;
	box-shadow: 0 8px 34px rgba(0, 0, 0, .35);
	direction: rtl;
	text-align: right;
	overscroll-behavior: contain;
}

#aly-a11y-panel::-webkit-scrollbar {
	display: none;
	width: 0;
}

#aly-a11y-root.aly-pos-top #aly-a11y-panel {
	bottom: auto;
	top: calc(var(--aly-cur-size) + 12px);
}

#aly-a11y-root.aly-pos-middle #aly-a11y-panel {
	bottom: auto;
	top: 50%;
	transform: translateY(-50%);
}

.aly-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	background: var(--aly-bg, #1e5aa8);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	border-radius: 14px 14px 0 0;
	position: sticky;
	top: 0;
	z-index: 2;
}

#aly-a11y-close {
	background: transparent;
	border: 0;
	color: inherit;
	font-size: 16px;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 6px;
	line-height: 1;
}

#aly-a11y-close:hover,
#aly-a11y-close:focus-visible {
	background: rgba(255, 255, 255, .2);
}

.aly-panel-tools {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	padding: 10px;
}

.aly-tool {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 8px 6px;
	background: #f2f4f8;
	border: 2px solid transparent;
	border-radius: 10px;
	cursor: pointer;
	font-size: 13px;
	color: inherit;
	text-align: center;
	transition: background .15s ease, border-color .15s ease;
}

.aly-tool:hover {
	background: #e4e9f2;
}

.aly-tool:focus-visible {
	outline: 3px solid #ffbf47;
	outline-offset: 1px;
}

.aly-tool[aria-pressed="true"] {
	background: var(--aly-bg, #1e5aa8);
	border-color: var(--aly-bg, #1e5aa8);
	color: #fff;
}

.aly-tool-icon {
	font-size: 18px;
	line-height: 1;
	font-weight: 700;
}

.aly-tool-label {
	line-height: 1.25;
}

/* שורת גודל טקסט - תופסת שתי עמודות */
.aly-tool-stepper {
	grid-column: 1 / -1;
	flex-direction: row;
	justify-content: space-between;
	cursor: default;
	padding: 8px 12px;
}

.aly-stepper {
	display: flex;
	align-items: center;
	gap: 8px;
}

.aly-stepper button {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	border: 0;
	background: var(--aly-bg, #1e5aa8);
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	cursor: pointer;
	line-height: 1;
}

.aly-stepper button:focus-visible {
	outline: 3px solid #ffbf47;
}

#aly-font-level {
	min-width: 46px;
	text-align: center;
	font-weight: 700;
	font-size: 13px;
}

.aly-panel-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 14px;
	border-top: 1px solid #e3e6ec;
	font-size: 13px;
}

.aly-credit {
	padding: 0 14px 10px;
	font-size: 10px;
	line-height: 1.4;
	color: #8a90a0;
	text-align: center;
}

#aly-a11y-panel.aly-panel-dark .aly-credit {
	color: #6f7789;
}

#aly-a11y-reset {
	background: transparent;
	border: 1px solid #c8cdd8;
	border-radius: 8px;
	padding: 6px 12px;
	cursor: pointer;
	font-size: 13px;
	color: inherit;
}

#aly-a11y-reset:hover {
	background: #f2f4f8;
}

.aly-panel-foot a {
	color: var(--aly-bg, #1e5aa8);
	text-decoration: underline;
}

/* פאנל כהה */
#aly-a11y-panel.aly-panel-dark {
	background: #20232b;
	color: #f0f2f7;
}

#aly-a11y-panel.aly-panel-dark .aly-tool {
	background: #2c313c;
}

#aly-a11y-panel.aly-panel-dark .aly-tool:hover {
	background: #384050;
}

#aly-a11y-panel.aly-panel-dark .aly-panel-foot {
	border-top-color: #384050;
}

#aly-a11y-panel.aly-panel-dark #aly-a11y-reset {
	border-color: #4a5264;
}

#aly-a11y-panel.aly-panel-dark .aly-panel-foot a {
	color: #8ab4ff;
}

/* מובייל - עיגול קטן ופאנל קומפקטי שנכנס כולו במסך */
@media (max-width: 782px) {
	#aly-a11y-root {
		--aly-cur-size: var(--aly-size-m, 38px);
	}

	#aly-a11y-panel {
		width: 236px;
	}

	.aly-panel-head {
		padding: 8px 12px;
		font-size: 14px;
	}

	.aly-panel-tools {
		gap: 5px;
		padding: 8px;
	}

	.aly-tool {
		padding: 6px 4px;
		gap: 3px;
		font-size: 11px;
		border-radius: 8px;
	}

	.aly-tool-icon {
		font-size: 14px;
	}

	.aly-tool-stepper {
		padding: 5px 8px;
	}

	.aly-stepper button {
		width: 26px;
		height: 26px;
		font-size: 15px;
	}

	#aly-font-level {
		min-width: 38px;
		font-size: 11px;
	}

	.aly-panel-foot {
		padding: 6px 10px;
		font-size: 11px;
	}

	#aly-a11y-reset {
		padding: 4px 8px;
		font-size: 11px;
	}

	.aly-credit {
		font-size: 9px;
		padding: 0 10px 8px;
	}
}

/* ---------- אפקטים על העמוד (classes על <html>) ---------- */

html.aly-grayscale {
	filter: grayscale(1) !important;
}

html.aly-contrast {
	filter: contrast(1.35) !important;
}

html.aly-invert {
	filter: invert(1) hue-rotate(180deg) !important;
	background: #fff;
}

html.aly-invert img,
html.aly-invert video,
html.aly-invert iframe,
html.aly-invert #aly-a11y-root {
	filter: invert(1) hue-rotate(180deg) !important;
}

/* שילובי פילטרים */
html.aly-grayscale.aly-contrast {
	filter: grayscale(1) contrast(1.35) !important;
}

html.aly-lightbg body,
html.aly-lightbg body * :not(img):not(video):not(svg):not(path) {
	background-color: #fff !important;
	color: #111 !important;
}

html.aly-lightbg a {
	color: #0645ad !important;
}

html.aly-links a {
	text-decoration: underline !important;
	outline: 2px solid #ffbf47 !important;
	outline-offset: 1px;
	background: rgba(255, 191, 71, .18) !important;
}

html.aly-font body,
html.aly-font body * {
	font-family: Arial, "Noto Sans Hebrew", Tahoma, sans-serif !important;
	letter-spacing: .02em;
}

html.aly-headings h1,
html.aly-headings h2,
html.aly-headings h3,
html.aly-headings h4,
html.aly-headings h5,
html.aly-headings h6 {
	background: #fff3bf !important;
	color: #1a1a2e !important;
	outline: 2px dashed #b98900 !important;
	outline-offset: 2px;
}

html.aly-animations *,
html.aly-animations *::before,
html.aly-animations *::after {
	animation: none !important;
	transition: none !important;
	scroll-behavior: auto !important;
}

html.aly-cursor,
html.aly-cursor * {
	cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24"><path d="M4 2l16 11h-8l4 8-3 1.5L9.5 14 4 18z" fill="black" stroke="white" stroke-width="1.4"/></svg>') 4 2, auto !important;
}

html.aly-spacing body,
html.aly-spacing body p,
html.aly-spacing body li {
	letter-spacing: .12em !important;
	word-spacing: .16em !important;
	line-height: 1.9 !important;
}

/* קו קריאה */
#aly-reading-guide {
	position: fixed;
	left: 0;
	right: 0;
	height: 10px;
	background: rgba(255, 191, 71, .9);
	border-top: 2px solid #b98900;
	border-bottom: 2px solid #b98900;
	pointer-events: none;
	z-index: 2147483646;
}

@media (prefers-reduced-motion: reduce) {
	#aly-a11y-btn {
		transition: none;
	}
}