/* Панель נגישות и режимы отображения. Загружается на всех страницах фронта. */

/* Ссылка «пропустить к содержимому»: видна только при фокусе с клавиатуры. */
.isco-skip {
	position: fixed;
	inset-block-start: -100px;
	inset-inline-start: 16px;
	z-index: 100000;
	padding: 12px 20px;
	border-radius: 0 0 var(--isco-radius-md) var(--isco-radius-md);
	background: var(--isco-action-secondary);
	color: #fff;
	font-family: Rubik, sans-serif;
	font-size: 16px;
	text-decoration: none;
	transition: inset-block-start 0.15s ease;
}

.isco-skip:focus {
	inset-block-start: 0;
	color: #fff;
	outline: 3px solid var(--isco-sun-500);
	outline-offset: 2px;
}

/* --- Панель --- */

.isco-a11y {
	position: fixed;
	inset-block-end: 92px;
	right: 16px;  /* кнопка נגישות физически справа, RTL здесь ни при чём */
	z-index: 10000;
	inline-size: min(360px, calc(100vw - 24px));
	max-block-size: min(76vh, 660px);
	overflow-y: auto;
	padding: 18px;
	border: 1px solid var(--isco-border-default);
	border-radius: var(--isco-radius-lg);
	background: var(--isco-bg-surface);
	box-shadow: var(--isco-shadow-float);
	font-family: Rubik, sans-serif;
	color: var(--isco-text-primary);
	direction: rtl;
	text-align: right;
}

.isco-a11y[hidden] {
	display: none;
}

.isco-a11y__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-block-end: 16px;
}

.isco-a11y__head h2 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--isco-text-primary);
}

.isco-a11y__head h2 svg {
	color: var(--isco-icon-brand);
	flex: 0 0 auto;
}

.isco-a11y__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 36px;
	block-size: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--isco-bg-subtle);
	color: var(--isco-icon-primary);
	cursor: pointer;
}

.isco-a11y__close:hover {
	background: var(--isco-border-default) !important;
	color: var(--isco-icon-primary) !important;
}

.isco-a11y__font {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-block-end: 14px;
	padding: 12px 14px;
	border-radius: var(--isco-radius-md);
	background: var(--isco-bg-brand-soft);
}

.isco-a11y__label {
	font-size: 14px;
	font-weight: 500;
}

.isco-a11y__stepper {
	display: flex;
	align-items: center;
	gap: 6px;
}

.isco-a11y__stepper button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 36px;
	block-size: 36px;
	padding: 0;
	border: 1px solid var(--isco-border-default);
	border-radius: 50%;
	background: var(--isco-bg-surface);
	color: var(--isco-icon-primary);
	cursor: pointer;
}

.isco-a11y__stepper button:hover {
	background: var(--isco-bg-surface) !important;
	border-color: var(--isco-border-focus);
	color: var(--isco-icon-brand) !important;
}

.isco-a11y__stepper output {
	min-inline-size: 52px;
	text-align: center;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}

.isco-a11y__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
}

.isco-a11y__toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	min-block-size: 48px;
	padding: 10px;
	border: 1px solid var(--isco-border-default);
	border-radius: var(--isco-radius-md);
	background: var(--isco-bg-surface);
	color: var(--isco-text-primary);
	font-family: inherit;
	font-size: 13px;
	line-height: 1.25;
	text-align: start;
	cursor: pointer;
}

.isco-a11y__toggle:hover {
	border-color: var(--isco-border-focus);
	background: var(--isco-bg-brand-soft) !important;
	color: var(--isco-text-primary) !important;
}

.isco-a11y__toggle-icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--isco-icon-secondary);
}

.isco-a11y__toggle[aria-pressed="true"] {
	border-color: var(--isco-action-secondary);
	background: var(--isco-bg-brand-soft);
	color: var(--isco-text-brand);
	font-weight: 500;
}

.isco-a11y__toggle[aria-pressed="true"] .isco-a11y__toggle-icon {
	color: var(--isco-icon-brand);
}

.isco-a11y__foot {
	margin-block-start: 16px;
	padding-block-start: 14px;
	border-block-start: 1px solid var(--isco-border-default);
	display: grid;
	gap: 10px;
	justify-items: start;
}

.isco-a11y__reset {
	padding: 10px 16px;
	border: 1px solid var(--isco-border-strong);
	border-radius: var(--isco-radius-pill);
	background: transparent;
	color: var(--isco-text-primary);
	font-family: inherit;
	font-size: 14px;
	cursor: pointer;
}

.isco-a11y__reset:hover {
	background: var(--isco-bg-subtle) !important;
	color: var(--isco-text-primary) !important;
}

.isco-a11y__link {
	font-size: 14px;
	color: var(--isco-text-brand);
	text-decoration: underline;
}

.isco-a11y__note {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--isco-text-secondary);
}

@media (max-width: 640px) {
	.isco-a11y {
		inset-inline: 12px;
		inline-size: auto;
		inset-block-end: 84px;
	}
}

/* --- Режимы отображения --- */

/* Подсветка ссылок */
html[data-a11y-links="1"] a {
	text-decoration: underline !important;
	text-underline-offset: 3px;
	outline: 1px dashed currentColor;
	outline-offset: 2px;
}

/* Подсветка заголовков */
html[data-a11y-titles="1"] :is(h1, h2, h3, h4, h5, h6) {
	background: var(--isco-sun-100) !important;
	color: var(--isco-neutral-900) !important;
	outline: 2px dashed var(--isco-sun-700);
	outline-offset: 2px;
}

/* Читаемый шрифт */
html[data-a11y-font="1"] body,
html[data-a11y-font="1"] body :not(i):not([class*="icon"]):not([class*="eicon"]) {
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
	letter-spacing: normal !important;
}

/* Межстрочный интервал */
html[data-a11y-spacing="1"] body :is(p, li, a, span, td, th, dd, dt, h1, h2, h3, h4, h5, h6) {
	line-height: 1.9 !important;
	letter-spacing: 0.05em !important;
	word-spacing: 0.12em !important;
}

/* Крупный курсор */
html[data-a11y-cursor="1"],
html[data-a11y-cursor="1"] * {
	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 2 L6 38 L15 29 L21 43 L28 40 L22 26 L34 26 Z" fill="%23000" stroke="%23fff" stroke-width="2.5" stroke-linejoin="round"/></svg>') 4 2, auto !important;
}

/* Остановка анимаций */
html[data-a11y-motion="1"] *,
html[data-a11y-motion="1"] *::before,
html[data-a11y-motion="1"] *::after {
	animation: none !important;
	transition: none !important;
	scroll-behavior: auto !important;
}

/* Явный фокус для навигации с клавиатуры */
html[data-a11y-keyboard="1"] :is(a, button, input, select, textarea, summary, [tabindex]):focus {
	outline: 4px solid var(--isco-sun-600) !important;
	outline-offset: 3px !important;
	border-radius: 4px;
}

/* Высокая контрастность */
html[data-a11y-contrast="1"] body,
html[data-a11y-contrast="1"] body *:not(svg):not(svg *) {
	background-color: #000 !important;
	background-image: none !important;
	color: #fff !important;
	border-color: #fff !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

html[data-a11y-contrast="1"] a,
html[data-a11y-contrast="1"] a * {
	color: #ffdd00 !important;
	text-decoration: underline !important;
}

html[data-a11y-contrast="1"] :is(button, .isco-btn, input, select, textarea) {
	border: 2px solid #fff !important;
}

html[data-a11y-contrast="1"] svg {
	color: #fff !important;
	fill: none;
}

html[data-a11y-contrast="1"] :is(img, video) {
	opacity: 0.85;
}

/* Инверсия и обесцвечивание вешаются скриптом на <html> как filter,
   изображения и видео возвращаем к исходному виду. */
html[data-a11y-invert="1"] :is(img, video, iframe, picture, .isco-hero__media) {
	filter: invert(1) hue-rotate(180deg);
}

/* Подписи только для скринридеров — тема их не объявляет. */
.screen-reader-text {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
