/* =====================================================================
   Версия для слабовидящих — hotelborisoglebsk.ru (ГОСТ Р 52872-2019)
   Подключается после styles/main.css. Правила спецверсии — под html.a11y.
   ===================================================================== */

/* ---------- Полоса над шапкой: переключатель языка и кнопка ---------- */

/* Внутри <header> всё спозиционировано абсолютно и места под кнопку нет,
   поэтому языки и кнопка вынесены в отдельную строку над шапкой */
#a11y-bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 8px 20px;
	padding: 4px 16px;
	background: #fff8ec;
	border-bottom: 1px solid #c8a380;
}
/* Сбрасываем позиционирование #lang из main.css (там он под логотипом) */
#a11y-bar #lang {
	position: static;
	width: auto;
	margin: 0;
	display: flex;
	gap: 4px;
}
#a11y-bar #lang a {
	float: none;
	display: inline-block;
	min-width: 44px;
	padding: 10px 6px;
	opacity: 1;
	color: #5c3218; /* 10:1 на #fff8ec */
	font: 15px/1.2 Arial, sans-serif;
	text-align: center;
	text-decoration: underline;
}
#a11y-bar #lang a.current { font-weight: bold; text-decoration: none; }
#a11y-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	margin: 0;
	padding: 6px 14px;
	border: 2px solid #5c3218;
	border-radius: 4px;
	background: #fff;
	color: #3d2210;
	font: bold 15px/1.2 Arial, sans-serif;
	cursor: pointer;
}
#a11y-toggle:hover { background: #5c3218; color: #fff; }
#a11y-toggle svg { width: 24px; height: 24px; flex: none; }

/* Видимый фокус. В main.css стоит * { outline: none } — селекторы по id сильнее */
#a11y-bar a:focus-visible,
#a11y-toggle:focus-visible,
#a11y-panel button:focus-visible {
	outline: 3px solid #000 !important;
	outline-offset: 2px;
	box-shadow: 0 0 0 5px #fff !important;
}

/* ---------- Панель настроек ---------- */

html.a11y { --a11y-fg: #000; --a11y-bg: #fff; }

#a11y-panel { display: none; }
/* В спецверсии кнопку заменяет панель, языки остаются в полосе */
html.a11y #a11y-toggle { display: none; }
html.a11y #a11y-bar { background: var(--a11y-bg); border-color: var(--a11y-fg); }
html.a11y #a11y-bar #lang a { color: var(--a11y-fg); }
html.a11y #a11y-panel {
	display: block;
	position: relative;
	z-index: 100001;
	border-bottom: 3px solid var(--a11y-fg);
	background: var(--a11y-bg);
	color: var(--a11y-fg);
	/* Панель — <section>: отменяем отступы секций из перекомпоновки ниже */
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
/* Шрифт панели фиксирован: она не должна расти вместе с текстом страницы */
#a11y-panel,
#a11y-panel * {
	font-family: Arial, sans-serif !important;
	font-size: 18px !important;
	font-style: normal !important;
	line-height: 1.3 !important;
	letter-spacing: normal !important;
	word-spacing: normal !important;
	text-transform: none !important;
	box-sizing: border-box;
}
/* main.css задаёт всем элементам margin: 0 auto */
#a11y-panel * { margin: 0; }
#a11y-panel .a11y-panel__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 10px 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	align-items: flex-end;
}
#a11y-panel .a11y-panel__groups { display: contents; }
#a11y-panel .a11y-group__label { display: block; padding: 0 0 4px; font-weight: bold; }
#a11y-panel .a11y-group__btns { display: flex; flex-wrap: wrap; gap: 4px; }
#a11y-panel button {
	min-width: 44px;
	min-height: 44px;
	margin: 0;
	padding: 6px 10px;
	border: 2px solid var(--a11y-fg) !important;
	border-radius: 4px;
	background: var(--a11y-bg) !important;
	color: var(--a11y-fg) !important;
	font-weight: bold;
	cursor: pointer;
}
#a11y-panel button[aria-pressed="true"] {
	background: var(--a11y-fg) !important;
	color: var(--a11y-bg) !important;
}
#a11y-panel .a11y-panel__service { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; }
#a11y-panel .a11y-panel__more { display: none; }

/* Телефон: панель свёрнута в кнопку «Настройки» */
@media (max-width: 767px) {
	#a11y-panel .a11y-panel__more { display: inline-block; }
	#a11y-panel.is-collapsed .a11y-panel__groups { display: none; }
	#a11y-panel .a11y-panel__service { margin-left: 0; }

	/* Компактно: свёрнутая панель — одна строка «Настройки» + «Обычная версия сайта»,
	   «Сбросить настройки» — внутри развёрнутых настроек. Высота кнопок 44 px сохранена */
	#a11y-bar { padding: 0 12px; }
	#a11y-bar #lang a { padding: 12px 6px; }
	#a11y-panel .a11y-panel__inner { padding: 6px 12px; gap: 6px; align-items: center; }
	#a11y-panel,
	#a11y-panel * { font-size: 15px !important; }
	#a11y-panel button { padding: 4px 10px; }
	#a11y-panel.is-collapsed [data-action="reset"] { display: none; }
}

/* Образцы цветовых схем — всегда в своих цветах */
#a11y-panel .a11y-swatch { min-width: 52px; font-family: Georgia, serif !important; }
#a11y-panel .a11y-swatch[data-v="bw"]    { background: #fff !important; color: #000 !important; border-color: #000 !important; }
#a11y-panel .a11y-swatch[data-v="wb"]    { background: #000 !important; color: #fff !important; border-color: #fff !important; }
#a11y-panel .a11y-swatch[data-v="blue"]  { background: #9dd1ff !important; color: #063462 !important; border-color: #063462 !important; }
#a11y-panel .a11y-swatch[data-v="sepia"] { background: #f7f3d6 !important; color: #4d4b43 !important; border-color: #4d4b43 !important; }
#a11y-panel .a11y-swatch[data-v="green"] { background: #3b2716 !important; color: #a9e44d !important; border-color: #a9e44d !important; }
#a11y-panel .a11y-swatch[aria-pressed="true"] {
	box-shadow: 0 0 0 3px var(--a11y-bg), 0 0 0 6px var(--a11y-fg) !important;
	text-decoration: underline;
}

/* =====================================================================
   Этап 3. Цветовые схемы, размер шрифта, интервалы, шрифты
   ===================================================================== */

/* ---------- Цветовые схемы (ГОСТ Р 52872-2019, контраст текста ≥ 7:1) ---------- */

html.a11y.a11y-scheme-wb    { --a11y-fg: #fff;    --a11y-bg: #000; }
html.a11y.a11y-scheme-blue  { --a11y-fg: #063462; --a11y-bg: #9dd1ff; }  /* 7,8 : 1 */
html.a11y.a11y-scheme-sepia { --a11y-fg: #4d4b43; --a11y-bg: #f7f3d6; }  /* 7,8 : 1 */
html.a11y.a11y-scheme-green { --a11y-fg: #a9e44d; --a11y-bg: #3b2716; }  /* 9,3 : 1 */

html.a11y,
html.a11y body {
	background: var(--a11y-bg) !important;
	color: var(--a11y-fg) !important;
}
/* Слайды не трогаем: фото баннера — фоновая картинка */
html.a11y body *:not(img):not(svg):not(svg *):not(iframe):not(.a11y-swatch):not(.slide) {
	background-color: transparent !important;
	background-image: none !important;
	color: var(--a11y-fg) !important;
	border-color: var(--a11y-fg) !important;
	text-shadow: none !important;
	box-shadow: none !important;
}
html.a11y a { text-decoration: underline !important; }

/* ---------- Размер шрифта и интервалы ---------- */

/* В main.css размеры в px, поэтому задаём базовый кегль на body,
   а всем потомкам — 1em; заголовки крупнее по правилам ниже */
html.a11y body {
	font-size: calc(18px * var(--a11y-scale, 1)) !important;
	line-height: 1.4;
}
/* :where() обнуляет специфичность, чтобы правила заголовков ниже её перебивали */
html.a11y body :where(*:not(#a11y-panel):not(#a11y-panel *):not(svg *)) {
	font-size: 1em !important;
	line-height: inherit !important;
	letter-spacing: inherit !important;
	word-spacing: inherit !important;
	font-style: normal !important;
	text-transform: none !important;
}
html.a11y body h1,
html.a11y body .PageHeaderInner { font-size: 1.75em !important; font-weight: bold !important; }
html.a11y body h2 { font-size: 1.5em !important; font-weight: bold !important; }
html.a11y body h3,
html.a11y body .ContentHeaderInner,
html.a11y body .SectionHeader,
html.a11y body .PageHeader { font-size: 1.3em !important; font-weight: bold !important; }
html.a11y body h4,
html.a11y body .RoomHeader { font-size: 1.15em !important; font-weight: bold !important; }

html.a11y.a11y-ls-1 body { letter-spacing: .12em; word-spacing: .16em; }
html.a11y.a11y-ls-2 body { letter-spacing: .25em; word-spacing: .3em; }
html.a11y.a11y-lh-0 body { line-height: 1.4 !important; }
html.a11y.a11y-lh-1 body { line-height: 1.5 !important; }
html.a11y.a11y-lh-2 body { line-height: 2 !important; }

/* ---------- Шрифты ---------- */

/* Файл шрифта кладётся в a11y/fonts/; в OpenDyslexic нет кириллицы —
   её браузер выводит запасным Verdana */
@font-face {
	font-family: "OpenDyslexic";
	src: url("fonts/OpenDyslexic-Regular.woff2") format("woff2");
	font-display: swap;
}
html.a11y.a11y-font-sans  body *:not(#a11y-panel *) { font-family: Arial, Helvetica, sans-serif !important; }
html.a11y.a11y-font-serif body *:not(#a11y-panel *) { font-family: Georgia, "Times New Roman", serif !important; }
html.a11y.a11y-font-dys   body *:not(#a11y-panel *) { font-family: "OpenDyslexic", Verdana, sans-serif !important; }

/* ---------- Ч/б и инверсия (панель не затрагиваем) ---------- */

html.a11y.a11y-filter-gray body > *:not(#a11y-panel) { filter: grayscale(1); }
html.a11y.a11y-filter-invert body > *:not(#a11y-panel) { filter: invert(1) hue-rotate(180deg); }
html.a11y.a11y-filter-invert body > *:not(#a11y-panel) img { filter: invert(1) hue-rotate(180deg); }

/* ---------- Перекомпоновка: фиксированная ширина 1000–1200 px → резиновая ---------- */

html.a11y body { overflow-x: hidden; overflow-wrap: anywhere; }

/* Декоративное и то, что ломает перекомпоновку */
html.a11y #topLine,
html.a11y #cty,
html.a11y #logotype,
html.a11y .hr-alpha,
html.a11y .hr-content,
html.a11y .link-mobile,
html.a11y .slider-nav,
html.a11y .slider-arrows { display: none !important; }

html.a11y header,
html.a11y header *,
html.a11y nav,
html.a11y .search-form-inner,
html.a11y #BreadCrumbs,
html.a11y #boxSection .boxSectionDescription,
html.a11y #boxSectionRooms .boxSectionDescriptionRooms,
html.a11y #boxSectionRooms .boxSectionShortTextRooms,
html.a11y #boxSectionRooms .boxSectionButton,
html.a11y .room-link {
	position: static !important;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	margin: 0 !important;
	top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
	float: none !important;
	text-align: left !important;
}
html.a11y header {
	max-width: 1200px;
	margin: 0 auto !important;
	padding: 12px 16px !important;
	display: flex !important;
	flex-wrap: wrap;
	gap: 8px 32px;
}
html.a11y header .headerText { display: block !important; }
html.a11y nav { flex-basis: 100%; border: 0 !important; }
html.a11y #topMenu { display: flex !important; flex-wrap: wrap; gap: 4px 24px; padding: 8px 0 !important; }
html.a11y #topMenu > li { display: block !important; }
html.a11y #topMenu > li > a { display: inline-block !important; padding: 6px 0 !important; }
/* Подменю — панель на всю ширину меню: при большом шрифте выпадающий блок от пункта
   уходил за край экрана, а узкий рвал слова по буквам. Курсор попадает в панель прямо вниз */
html.a11y #topMenu { position: relative !important; }
html.a11y #topMenu > li { position: static !important; }
html.a11y #topMenu .subMenu {
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	padding: 8px 12px !important;
	border: 2px solid var(--a11y-fg) !important;
	background: var(--a11y-bg) !important;
}
html.a11y #topMenu .subMenu li { padding: 4px 0 !important; }
/* На узком экране подменю — в потоке: выпадающий блок там не помещается */
@media (max-width: 1023px) {
	html.a11y #topMenu .subMenu {
		position: static !important;
	}
}
/* Крошки плавающие: без clear заголовок страницы обтекает их и съезжает */
html.a11y #BreadCrumbs::after { content: ""; display: block; clear: both; }
html.a11y #BreadCrumbs { margin-bottom: 12px !important; }
html.a11y section h1.PageHeaderInner { clear: both; }

html.a11y section,
html.a11y footer,
html.a11y section[data-role="content"],
html.a11y section[data-role="content_not_slider"] {
	width: auto !important;
	max-width: 1200px;
	margin: 16px auto 0 !important;
	padding: 16px !important;
	box-sizing: border-box;
}
html.a11y section[data-role="banner"] {
	height: 260px !important;
	max-width: none;
	padding: 0 !important;
	-webkit-mask-image: none !important;
}
/* Слайдер стоит на первом слайде */
html.a11y .slides { transform: none !important; transition: none !important; margin-left: 0 !important; }
html.a11y .slide { background-size: cover !important; }

html.a11y #contentLeft,
html.a11y #contentRight,
html.a11y .menuContainer,
html.a11y .menuContent,
html.a11y .menuContentNoPhoto,
html.a11y .newsImage,
html.a11y #boxSection li,
html.a11y #boxSectionRooms li,
html.a11y footer #footerMenu > li,
html.a11y #footerCopy div {
	float: none !important;
	width: auto !important;
	padding-right: 0 !important;
}
html.a11y #boxSection,
html.a11y #boxSectionRooms { display: flex; flex-wrap: wrap; gap: 16px; }
html.a11y #boxSection li,
html.a11y #boxSectionRooms li { max-width: 320px; }
html.a11y #boxSectionRooms .boxSectionImageRooms,
html.a11y #boxSection .boxSectionImage { height: auto !important; }
html.a11y footer #footerMenu > li { margin-bottom: 12px !important; }
html.a11y #footerCopy { height: auto !important; padding: 12px !important; }
html.a11y .header-container { padding: 0 !important; }
html.a11y #contentRight .RoomDescription { padding-right: 0 !important; }
html.a11y #MakeYourStay { white-space: normal !important; height: auto !important; }
/* Цена номера стояла белым поверх фото; после перекомпоновки она под фото,
   на светлом фоне — берём цвет текста спецверсии */
html.a11y #boxSectionRooms .boxSectionShortTextRooms { color: var(--a11y-fg) !important; }

/* Строка текста — не шире ~70 знаков; картинки и встроенное — не шире колонки */
html.a11y #contentCenter p,
html.a11y #infoSection p,
html.a11y .header-container p,
html.a11y .RoomDescription { max-width: 42em; }
html.a11y img,
html.a11y iframe,
html.a11y object,
html.a11y table { max-width: 100% !important; height: auto; }
html.a11y iframe { min-height: 300px; }
/* Отступы картинок из визуального редактора (style="margin: 0 10px") добавляются
   к max-width: 100% и выводят картинку за колонку на телефоне */
@media (max-width: 767px) {
	html.a11y img { margin-left: 0 !important; margin-right: 0 !important; }
}

/* Таблицы без заголовков — вёрстка плиток: выстраиваем ячейки в поток */
html.a11y section table:not(:has(th)):not(.menuTable):not(.reservationTable),
html.a11y section table:not(:has(th)):not(.menuTable):not(.reservationTable) > tbody,
html.a11y section table:not(:has(th)):not(.menuTable):not(.reservationTable) > tbody > tr > td {
	display: block !important;
	width: auto !important;
	margin: 0 !important;
}
html.a11y section table:not(:has(th)):not(.menuTable):not(.reservationTable) > tbody > tr {
	display: flex !important;
	flex-wrap: wrap;
	gap: 12px;
}
html.a11y .reservationTable td,
html.a11y .reservationTable th,
html.a11y .menuTable td,
html.a11y .menuTable th { border: 1px solid var(--a11y-fg) !important; padding: 6px !important; }

/* Плавающая кнопка TravelLine «Узнать цены» — обычный блок внизу страницы */
html.a11y .x-tl-booking-widget-container,
html.a11y .x-tl-booking-widget,
html.a11y .x-tl-booking-widget__label {
	position: static !important;
	width: auto !important;
	max-width: 100% !important;
	transform: none !important;
	writing-mode: horizontal-tb !important;
}
html.a11y .x-tl-booking-widget-container { margin: 16px !important; }


/* Форма поиска TravelLine: в main.css у .search-form ширина 1000/1201 px, и iframe
   виджета растягивал страницу на телефоне. Внутрь виджета не вмешиваемся —
   ограничиваем контейнер шириной колонки, остальное прокручивается внутри него */
html.a11y .search-form {
	width: auto !important;
	max-width: 100%;
	height: auto !important;
	margin: 0 !important;
}
/* Русский виджет фиксированной ширины (~1200 px) и прижимается влево — центрируем колонку */
html.a11y .search-form,
html.a11y .search-form-inner {
	max-width: 1200px !important;
	margin: 0 auto !important;
}
html.a11y #tl-search-form,
html.a11y #tl-booking-form {
	max-width: 100%;
	overflow-x: auto;
}
/* Формы TravelLine (поиск на главной, бронирование) не перестраиваются под узкий
   iframe — оставляем им родную ширину и прокрутку внутри контейнера */
html.a11y #tl-search-form iframe,
html.a11y #tl-booking-form iframe {
	max-width: none !important;
	min-height: 0;
}

/* Анимации (animate.css) и переходы — выключены */
html.a11y *,
html.a11y *::before,
html.a11y *::after {
	animation: none !important;
	transition: none !important;
}

/* =====================================================================
   Этап 4. Клавиатура, фокус, ссылка-пропуск, заголовки, режим без картинок
   ===================================================================== */

/* main.css:20 задаёт всем * { outline: none } — возвращаем видимый фокус (2.4.7) */
*:focus-visible {
	outline: 3px solid #ffbf47 !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 6px #1a1a1a !important;
}
html.a11y *:focus,
html.a11y *:focus-visible {
	outline: 4px solid var(--a11y-fg) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 7px var(--a11y-bg) !important;
}
#main:focus { outline: none !important; box-shadow: none !important; }

/* Ссылка «Перейти к основному содержимому» — видна только в фокусе (2.4.1) */
.a11y-skip {
	position: absolute;
	left: 8px;
	top: -200px;
	z-index: 100002;
	padding: 12px 18px;
	background: #1a1a1a;
	color: #fff !important;
	font: bold 18px/1.2 Arial, sans-serif;
	text-decoration: underline;
}
.a11y-skip:focus { top: 8px; }

/* Заголовок страницы стал <h1> — сохраняем прежний вид div.PageHeaderInner */
h1.PageHeaderInner { font-weight: normal; }

/* Подменю открываются с клавиатуры (2.1.1); Esc закрывает */
#topMenu > li:focus-within > .subMenu,
#topMenu > li.a11y-open > .subMenu { display: block; }
#topMenu > li.a11y-closed > .subMenu { display: none !important; }

/* ---------- Изображения: показать · ч/б · скрыть (с выводом alt) ---------- */

html.a11y.a11y-img-gray img,
html.a11y.a11y-img-gray iframe,
html.a11y.a11y-img-gray .slide { filter: grayscale(1) !important; }
html.a11y.a11y-img-hide img,
html.a11y.a11y-img-hide section[data-role="banner"],
html.a11y.a11y-img-hide .a360,
html.a11y.a11y-img-hide object { display: none !important; }
.a11y-alt { display: none; }
html.a11y.a11y-img-hide .a11y-alt {
	display: inline-block !important;
	margin: 2px 0;
	padding: 4px 8px;
	border: 1px dashed var(--a11y-fg) !important;
}

/* =====================================================================
   Этап 5. Контент, формы, слайдер
   ===================================================================== */

/* Текст только для экранного диктора */
/* html.a11y .a11y-sr — чтобы перебить html.a11y header * из перекомпоновки,
   иначе текст для диктора становится видимым и растягивает шапку */
.a11y-sr,
html.a11y .a11y-sr {
	position: absolute !important;
	width: 1px !important; height: 1px !important;
	margin: -1px !important; padding: 0 !important; border: 0 !important;
	overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important;
}

/* Контакт в шапке стал <button> (открывает Callme) — вид прежнего div */
header button.headerText {
	padding: 0;
	border: 0;
	background: none;
	text-align: right;
	cursor: pointer;
}

/* Кнопка паузы слайдера — в правом нижнем углу баннера */
.a11y-slider-pause {
	position: relative;
	z-index: 20;
	display: block;
	margin: -56px 16px 16px auto;
	padding: 8px 14px;
	border: 2px solid #fff;
	border-radius: 4px;
	background: rgba(0, 0, 0, .75);
	color: #fff;
	font: 16px/1.2 Arial, sans-serif;
	cursor: pointer;
}
html.a11y .a11y-slider-pause { display: none !important; }

/* Бронирование: телефон и e-mail рядом с формой TravelLine */
.a11y-booking-alt { margin: 0 0 12px; }
html.a11y .a11y-booking-alt {
	padding: 12px;
	border: 2px solid var(--a11y-fg) !important;
}

/* «Сделайте проживание комфортнее»: блоки стали кнопками */
.YouStaySection[role="button"],
.YouStayClose[role="button"] { cursor: pointer; }