/**
 * Адаптивный слой поверх JSN Epic Free 5.1.0.
 *
 * Подключается ПОСЛЕДНИМ в <head> — после template.css и после инлайнового
 * <style>, который задаёт десктопный макет (#jsn-page { width: 960px } и
 * колонки на float с процентными ширинами). Ни template.css, ни инлайновые
 * стили не редактируются: специфичность здесь та же (по id), побеждает
 * порядок подключения.
 *
 * Инлайновый макет существует в трёх вариантах (типовые страницы: контент
 * 79% + сайдбар 21%; главная: промо-зона со слайдером; corporate-authority-
 * board: контент 100% без сайдбара), поэтому десктопные значения не
 * дублируются здесь, а нейтрализуются только на узких экранах.
 */

/* ---------- Общее: действует на всех ширинах ---------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Переключатель мобильного меню: на десктопе не нужен.
   Скрываем и чекбокс, и его подпись — меню ведёт себя как раньше. */
.jsn-menu-toggle,
.jsn-menu-burger {
	display: none;
}

/* Текст только для скринридеров: визуально скрыт, но остаётся в дереве
   доступности (display:none его бы оттуда убрал). */
.jsn-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- Ссылка «к содержимому» ---------- */

/*
 * Перед контентом идут 33 ссылки меню, и с клавиатуры их пришлось бы
 * проходить на каждой странице. Ссылка не видна, пока на неё не встанет
 * фокус, — тогда она появляется поверх шапки.
 */
.jsn-skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	z-index: 100000;
	padding: 0.75rem 1.25rem;
	background: #028736;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
}

.jsn-skip-link:focus {
	top: 0;
}

/* Цель ссылки не должна получать рамку фокуса: она попадает в фокус
   программно, а не по действию пользователя. */
#jsn-maincontent:focus {
	outline: none;
}

/* ---------- Слайдер на главной ---------- */

/*
 * Раньше это был Skitter — плагин jQuery: 96 КБ самого плагина плюс
 * jQuery 1.8.2 и два дополнения, и всё ради автосмены шести картинок.
 * Разметка (<ul><li><img>) осталась прежней, а листание обеспечивает
 * scroll-snap: горизонтальный свайп на телефоне, обычный скролл мышью
 * или колесом на десктопе. JavaScript не нужен.
 */
.box_skitter {
	width: auto !important;
	height: auto !important;
	max-width: 100%;
	position: relative;
	overflow: hidden;
}

.box_skitter > ul {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.box_skitter > ul::-webkit-scrollbar {
	display: none;
}

.box_skitter > ul > li {
	flex: 0 0 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	scroll-snap-align: center;
}

.box_skitter > ul > li > a {
	display: block;
}

.box_skitter > ul > li img {
	display: block;
	width: 100%;
	height: auto;
}

/* Служебная разметка Skitter и SEO-заглушка плагина не нужны */
.box_skitter .label_text,
.jsn-themeslider-seocontent,
.box_skitter .info_slide,
.box_skitter .prev_button,
.box_skitter .next_button {
	display: none;
}

/* Медиа не должны распирать колонку */
img,
video,
iframe,
embed,
object {
	max-width: 100%;
	height: auto;
}

/*
 * Картинка — строчный элемент, и под ней остаётся место под нижние выносные
 * элементы шрифта. В ячейках таблиц это давало заметный зазор после перехода
 * с XHTML 1.0 Transitional (режим «почти стандартный») на HTML5-doctype
 * (полностью стандартный режим).
 */
td > img,
td > a > img {
	vertical-align: bottom;
}

/* Инлайновые width/height у картинок из редактора Joomla */
img[width],
img[height] {
	height: auto;
}

/* Длинные ссылки и слова не рвут макет */
p,
li,
td,
dd,
blockquote {
	overflow-wrap: break-word;
}

/* Таблицы (10 страниц используют их для контента) скроллятся внутри себя,
   а не растягивают страницу. */
.jsn-article-content table,
#jsn-mainbody-content table,
.contentpaneopen table {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ---------- Мобильные экраны ---------- */

@media (max-width: 767px) {

	/* Страница по ширине экрана вместо жёстких 960px */
	#jsn-page {
		width: auto;
		max-width: 100%;
		border-left: 0;
		border-right: 0;
	}

	#jsn-master {
		background-attachment: scroll;
	}

	/* Колонки макета: снимаем float и трюк с отрицательными смещениями.
	   Перечислены все id, которые инлайновый <style> позиционирует. */
	#jsn-header,
	#jsn-headerright,
	#jsn-menu,
	#jsn-body,
	#jsn-content,
	#jsn-content_inner,
	#jsn-content_inner1,
	#jsn-content_inner2,
	#jsn-content_inner3,
	#jsn-content_inner4,
	#jsn-content_inner5,
	#jsn-content_inner6,
	#jsn-content_inner7,
	#jsn-centercol,
	#jsn-centercol_inner,
	#jsn-maincontent,
	#jsn-leftsidecontent,
	#jsn-rightsidecontent,
	#jsn-pos-promo,
	#jsn-pos-promo-left,
	#jsn-pos-promo-right,
	#jsn-pos-innerleft,
	#jsn-pos-innerright,
	#jsn-logo,
	#jsn-pos-top,
	#jsn-headerright #jsn-pos-top,
	#jsn-footer,
	#jsn-footermodules {
		float: none;
		width: auto;
		max-width: 100%;
		left: auto;
		right: auto;
		position: static;
	}

	/* Сайдбар уходит под контент */
	#jsn-rightsidecontent,
	#jsn-pos-promo-right {
		margin-top: 1.5rem;
	}

	#jsn-headerright {
		padding: 0.75rem;
	}

	/* Логотип по центру, на всю ширину */
	#jsn-logo {
		text-align: center;
	}

	#jsn-logo img {
		display: inline-block;
	}

	/* Поиск: 16px обязательны, иначе iOS зумит страницу при фокусе */
	#jsn-pos-top form .search {
		display: flex;
		gap: 0.5rem;
		justify-content: center;
	}

	#jsn-pos-top input.inputbox {
		flex: 1 1 auto;
		min-width: 0;
		font-size: 16px;
	}

	#jsn-pos-top input.button {
		flex: 0 0 auto;
		font-size: 16px;
	}

	/* Модули в подвале — в колонку */
	#jsn-footermodules div.jsn-modulecontainer {
		float: none;
		width: auto;
	}

	/* Слайдер Skitter проставляет размеры инлайном через JS (width/left на
	   .image_main), поэтому обычный max-width его не удержит — нужен
	   !important, а обрезку берёт на себя контейнер. */
	.jsn-themeslider-container,
	.box_skitter,
	.box_skitter .container_skitter {
		width: 100% !important;
		max-width: 100%;
		overflow: hidden;
	}

	.box_skitter .image_main,
	.box_skitter img.image_main {
		max-width: none !important;
	}

	/* ---------- Мобильное меню ---------- */

	/* Селекторы шаблона — div.jsn-modulecontainer ul.menu-mainmenu li
	   (0,2,3). Чтобы перебить, добавляем #jsn-menu: без этого правила
	   проигрывают по специфичности и float остаётся. */
	#jsn-menu {
		position: relative;
	}

	/* Кнопка-бургер вместо горизонтального меню */
	#jsn-menu .jsn-menu-burger {
		display: flex;
		align-items: center;
		gap: 0.6rem;
		padding: 0.9rem 1rem;
		min-height: 44px;
		color: #fff;
		font-weight: bold;
		font-size: 1rem;
		cursor: pointer;
		user-select: none;
	}

	/* Три полоски — на чистом CSS, без иконочного шрифта и картинок */
	#jsn-menu .jsn-menu-burger-icon,
	#jsn-menu .jsn-menu-burger-icon::before,
	#jsn-menu .jsn-menu-burger-icon::after {
		display: block;
		width: 22px;
		height: 3px;
		background: currentColor;
		content: '';
	}

	#jsn-menu .jsn-menu-burger-icon {
		position: relative;
	}

	#jsn-menu .jsn-menu-burger-icon::before {
		position: absolute;
		top: -7px;
	}

	#jsn-menu .jsn-menu-burger-icon::after {
		position: absolute;
		top: 7px;
	}

	/* Сам чекбокс не показываем, но оставляем доступным с клавиатуры */
	#jsn-menu .jsn-menu-toggle {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		border: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	/* Видимая рамка при переходе табом */
	#jsn-menu .jsn-menu-toggle:focus-visible + .jsn-menu-burger {
		outline: 2px solid #fff;
		outline-offset: -4px;
	}

	/* Меню свёрнуто, пока чекбокс не отмечен */
	#jsn-menu div.jsn-modulecontainer ul.menu-mainmenu {
		display: none;
	}

	/* Чекбокс, подпись и <ul> — соседи внутри div.jsn-modulecontent,
	   поэтому works комбинатор ~. Специфичность (1,3,1) перебивает
	   правило скрытия (1,2,2) за счёт большего числа классов. */
	#jsn-menu .jsn-menu-toggle:checked ~ ul.menu-mainmenu {
		display: block;
	}

	#jsn-menu div.jsn-modulecontainer,
	#jsn-menu div.jsn-modulecontainer_inner,
	#jsn-menu div.jsn-modulecontent,
	#jsn-menu #jsn-pos-mainmenu {
		float: none;
		width: auto;
		margin: 0;
	}

	/* display здесь не трогаем — им управляет пара «чекбокс + бургер» выше */
	#jsn-menu div.jsn-modulecontainer ul.menu-mainmenu {
		width: auto;
		margin: 0;
		padding: 0;
	}

	#jsn-menu div.jsn-modulecontainer ul.menu-mainmenu li,
	#jsn-menu div.jsn-modulecontainer ul.menu-mainmenu > li {
		float: none;
		width: auto;
		display: block;
		border-right: 0;
		background-image: none;
	}

	#jsn-menu div.jsn-modulecontainer ul.menu-mainmenu li a,
	#jsn-menu div.jsn-modulecontainer ul.menu-mainmenu > li > a {
		display: block;
		width: auto;
		height: auto;
		padding: 0.85rem 1rem;
		/* цель нажатия не меньше 44px по рекомендации Apple HIG */
		min-height: 44px;
		line-height: 1.3;
	}

	/* Описания пунктов («Start here…») на мобильном только шумят */
	#jsn-menu div.jsn-modulecontainer ul.menu-mainmenu span.jsn-menudescription {
		display: none;
	}

	/* Подменю: из absolute-выпадашки в обычный вложенный список.
	   margin обнуляем обязательно: у третьего уровня шаблон задаёт
	   margin-left: 199px, чтобы на десктопе подменю выезжало вправо от
	   родительского. В разложенном столбиком меню этот отступ уводил
	   пункт («Sex Offender Registry») далеко вбок. */
	#jsn-menu div.jsn-modulecontainer ul.menu-mainmenu ul,
	#jsn-menu div.jsn-modulecontainer ul.menu-mainmenu ul ul,
	#jsn-menu div.jsn-modulecontainer ul.menu-mainmenu li:hover > ul {
		position: static;
		display: block;
		width: auto;
		margin: 0;
		padding: 0;
		top: auto;
		left: auto;
		visibility: visible;
		opacity: 1;
		box-shadow: none;
		background: rgba(0, 0, 0, 0.15);
	}

	/* Вложенность показываем отступом: второй уровень и третий должны
	   отличаться, иначе они читаются как один. */
	#jsn-menu div.jsn-modulecontainer ul.menu-mainmenu ul li a {
		padding-left: 2rem;
	}

	#jsn-menu div.jsn-modulecontainer ul.menu-mainmenu ul ul li a {
		padding-left: 3.25rem;
	}

	/* Читаемость текста */
	body {
		-webkit-text-size-adjust: 100%;
	}

	#jsn-mainbody-content,
	.jsn-article-content {
		font-size: 1rem;
		line-height: 1.55;
	}

	/* Контент из редактора приходит с инлайновыми font-size в px и
	   вложенными <span style="font-family:…"> — не даём им уезжать. */
	#jsn-mainbody-content span[style*="font-size"],
	.jsn-article-content span[style*="font-size"] {
		font-size: inherit !important;
	}

	/* Презентационная разметка старого контента (align=, bgcolor=, <center>)
	   встречается на отдельных страницах — не даём ей ломать поток. */
	#jsn-mainbody-content [align],
	.jsn-article-content [align] {
		float: none !important;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ---------- Планшеты: промежуточная ступень ---------- */

@media (min-width: 768px) and (max-width: 1023px) {

	#jsn-page {
		width: auto;
		max-width: 100%;
	}

	/* Боковая колонка остаётся, но не зажимает контент */
	#jsn-rightsidecontent,
	#jsn-pos-promo-right {
		width: 30%;
	}

	#jsn-maincontent,
	#jsn-pos-promo {
		width: 70%;
	}
}

/* ---------- Печать ---------- */

/*
 * Печатных стилей на сайте не было вовсе, а на нём лежат документы, которые
 * люди распечатывают. Без них на бумагу уходили меню, слайдер, сайдбар и
 * фоновая заливка, а текст печатался светлым по тёмному.
 */
@media print {

	/* Тёмный фон страницы и рамки — только расход тонера */
	#jsn-master {
		background: none;
	}

	#jsn-page {
		width: auto;
		max-width: 100%;
		border: 0;
		background: none;
	}

	body,
	#jsn-mainbody-content,
	.jsn-article-content {
		background: #fff;
		color: #000;
		font-size: 11pt;
		line-height: 1.4;
	}

	/* Навигация, слайдер и служебные блоки на бумаге бесполезны */
	#jsn-menu,
	.jsn-menu-burger,
	.jsn-menu-toggle,
	.jsn-skip-link,
	#jsn-rightsidecontent,
	#jsn-pos-promo-right,
	#jsn-footermodules,
	.box_skitter,
	.jsn-themeslider-container,
	.breadcrumbs,
	div[id*="jsn-pos-stick-"] {
		display: none;
	}

	/* Контент занимает всю ширину листа */
	#jsn-content,
	#jsn-content_inner,
	#jsn-centercol,
	#jsn-centercol_inner,
	#jsn-maincontent,
	#jsn-pos-promo {
		float: none;
		width: auto;
		left: auto;
		right: auto;
		position: static;
	}

	/* Адрес ссылки на бумаге не виден — дописываем его.
	   Только для внешних: внутренние в распечатке бесполезны. */
	#jsn-maincontent a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		word-break: break-all;
	}

	/* Заголовок не должен отрываться от текста, а таблицы и картинки —
	   разрываться между страницами */
	h1, h2, h3 {
		page-break-after: avoid;
		break-after: avoid;
	}

	img,
	table,
	.img_caption {
		page-break-inside: avoid;
		break-inside: avoid;
	}

	/* Таблицы на бумаге не скроллятся — возвращаем обычное поведение */
	.jsn-article-content table,
	#jsn-mainbody-content table,
	.contentpaneopen table {
		display: table;
		overflow: visible;
	}

	@page {
		margin: 1.5cm;
	}
}
