/* ------------------------------------------------------------------
   layout.css — каркас страницы.

   Порядок блоков в разметке:

	<a class="mr-skip">
	<input id="mr-nav-toggle" class="mr-navtoggle mr-sr">   ← переключатель меню
	<header class="mr-header">
	<nav id="mr-nav" class="mr-nav">                        ← ВНЕ header
	<div class="mr-crumbs-bar">
	<div class="mr-container mr-layout mr-layout--article">
		<aside class="mr-layout__rail mr-layout__rail--left">
		<main class="mr-layout__main" id="mr-main">
		<aside class="mr-layout__rail mr-layout__rail--right">
	<footer class="mr-footer">

   Навигация вынесена из <header> намеренно: внутри header элемент с
   position:sticky прилипает к границам самого header и уезжает вместе
   с ним, а не к окну.

   Меню на телефоне работает без JS: скрытый чекбокс перед header,
   label-бургер внутри header, панель — соседний элемент после header.
   Чекбокс скрыт классом .mr-sr, то есть остаётся в фокусируемых:
   клавиатура открывает меню пробелом, скриптов для этого не нужно.
   ------------------------------------------------------------------ */

/* ---------------------------------------------------------------- Контейнер */

.mr-container {
	width: 100%;
	max-width: 83.75rem;                 /* 1340px */
	margin-inline: auto;
	padding-inline: 1.5rem;
}

@media (max-width: 700px) {
	.mr-container {
		padding-inline: 1rem;
	}
}

/* Узкий контейнер для страниц без рельсов: 404, «О справочнике». */
.mr-container--narrow {
	max-width: calc(var(--measure) + 3rem);
}

/* ---------------------------------------------------------------- Шапка */

.mr-header {
	position: relative;
	z-index: 40;
	background: var(--paper);
	border-bottom: 1px solid var(--line);
}

.mr-header__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: 4.75rem;
}

.mr-header__search {
	flex: 1 1 auto;
	max-width: 30rem;
	min-width: 0;
}

.mr-header__side {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 1.1rem;
	flex: 0 0 auto;
}

.mr-header__link {
	font-size: 0.85rem;
	color: var(--ink-3);
	text-decoration: none;
	white-space: nowrap;
}

.mr-header__link:hover {
	color: var(--brand);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mr-header__date {
	font-family: var(--mono);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-4);
	white-space: nowrap;
}

/* ---- Логотип ---- */

.mr-logo {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	flex: 0 0 auto;
	text-decoration: none;
	color: var(--ink);
}

.mr-logo__mark {
	width: 2.375rem;
	height: 2.375rem;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	overflow: hidden;
	background: var(--ink);
	border-radius: var(--r-sm);
}

.mr-logo__mark svg {
	width: 62%;
	height: auto;
	fill: var(--paper);
}

.mr-logo__mark img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mr-logo__text {
	display: block;
	line-height: 1.05;
	min-width: 0;
}

.mr-logo__name {
	display: block;
	font-size: 1.1875rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--ink);
}

.mr-logo__tagline {
	display: block;
	margin-top: 0.2rem;
	font-family: var(--mono);
	font-style: normal;
	font-size: 0.6rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-4);
}

/* ---- Бургер ---- */

.mr-burger {
	display: none;
	width: 2.75rem;
	height: 2.75rem;
	flex: 0 0 auto;
	place-items: center;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--paper);
	cursor: pointer;
}

.mr-burger__bar,
.mr-burger__bar::before,
.mr-burger__bar::after {
	display: block;
	width: 1.125rem;
	height: 2px;
	background: var(--ink);
}

.mr-burger__bar {
	position: relative;
}

.mr-burger__bar::before,
.mr-burger__bar::after {
	content: "";
	position: absolute;
	left: 0;
}

.mr-burger__bar::before { top: -6px; }
.mr-burger__bar::after  { top: 6px; }

.mr-burger:hover {
	border-color: var(--line-strong);
	background: var(--paper-2);
}

/* Чекбокс невидим, но фокусируем: рамку показываем на бургере. */
.mr-navtoggle:focus-visible ~ .mr-header .mr-burger {
	outline: 2px solid var(--brand-mid);
	outline-offset: 2px;
}

.mr-navtoggle:checked ~ .mr-header .mr-burger {
	background: var(--ink);
	border-color: var(--ink);
}

.mr-navtoggle:checked ~ .mr-header .mr-burger__bar,
.mr-navtoggle:checked ~ .mr-header .mr-burger__bar::before,
.mr-navtoggle:checked ~ .mr-header .mr-burger__bar::after {
	background: var(--paper);
}

/* ---------------------------------------------------------------- Навигация */

.mr-nav {
	position: sticky;
	top: 0;
	z-index: 45;
	background: var(--ink);
}

.mr-nav__list {
	display: flex;
	align-items: stretch;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mr-nav__list > li {
	margin: 0;
	flex: 0 0 auto;
}

.mr-nav__list a,
.mr-nav__link {
	display: flex;
	align-items: center;
	height: var(--navbar);
	padding: 0 0.85rem;
	color: var(--paper-3);
	font-size: 0.9rem;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
}

.mr-nav__list a:hover,
.mr-nav__link:hover {
	color: var(--paper);
	background: var(--ink-2);
}

.mr-nav__list a:active,
.mr-nav__link:active {
	background: var(--brand-dark);
}

.mr-nav__list a:focus-visible,
.mr-nav__link:focus-visible {
	outline-offset: -3px;
}

/* Текущий раздел: WordPress вешает класс на <li>, атрибут ставится вручную. */
.mr-nav__list > .current-menu-item > a,
.mr-nav__list > .current-menu-ancestor > a,
.mr-nav__list > .current-page-ancestor > a,
.mr-nav__link[aria-current] {
	color: var(--paper);
	background: var(--brand-dark);
	border-bottom-color: var(--brand-mid);
}

.mr-nav__sep {
	width: 1px;
	margin: 0.75rem 0.5rem;
	background: var(--ink-2);
	flex: 0 0 auto;
}

/* Отдельно выделенный пункт — например «Нерестовый запрет». */
.mr-nav__item--accent > a {
	color: var(--sc-2);
}

.mr-nav__item--accent > a:hover {
	color: var(--paper);
}

/* На десктопе длинное меню не должно разъезжать в две строки. */
@media (min-width: 901px) {
	.mr-nav__list {
		flex-wrap: wrap;
		min-height: var(--navbar);
	}
}

/* ---- Меню на телефоне: панель раскрывается чекбоксом ---- */

@media (max-width: 900px) {
	.mr-burger {
		display: grid;
	}

	.mr-header__link,
	.mr-header__date {
		display: none;
	}

	/* --navbar на этой ширине равен нулю (tokens.css): панель не липкая,
	   она раскрывается под шапкой и толкает содержимое вниз. Оверлей
	   поверх статьи здесь хуже: читатель приходит из поиска сразу
	   на текст и случайное открытие меню не должно его перекрывать. */
	.mr-nav {
		position: static;
		display: none;
		border-bottom: 1px solid var(--ink-2);
	}

	.mr-navtoggle:checked ~ .mr-nav {
		display: block;
	}

	.mr-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0.4rem 0 0.7rem;
	}

	.mr-nav__list > li {
		flex: 1 1 auto;
	}

	.mr-nav__list a,
	.mr-nav__link {
		height: auto;
		min-height: 2.75rem;
		padding: 0.7rem 0.9rem;
		font-size: 1rem;
		border-bottom: 0;
		border-left: 3px solid transparent;
	}

	.mr-nav__list > .current-menu-item > a,
	.mr-nav__list > .current-menu-ancestor > a,
	.mr-nav__list > .current-page-ancestor > a,
	.mr-nav__link[aria-current] {
		border-left-color: var(--brand-mid);
		border-bottom-color: transparent;
	}

	.mr-nav__sep {
		display: none;
	}

	.mr-header__inner {
		min-height: 0;
		padding: 0.75rem 0;
		gap: 0.75rem;
		flex-wrap: wrap;
	}

	.mr-header__search {
		order: 3;
		flex: 1 1 100%;
		max-width: none;
	}
}

@media (max-width: 380px) {
	.mr-logo__name { font-size: 1.05rem; }
	.mr-logo__mark { width: 2.125rem; height: 2.125rem; }
}

/* ---------------------------------------------------------------- Крошки */

/* Полоса на всю ширину; сам список — компонент .mr-crumbs в components.css. */
.mr-crumbs-bar {
	background: var(--paper-2);
	border-bottom: 1px solid var(--line);
}

/* ---------------------------------------------------------------- Макет */

.mr-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 var(--gap);
	align-items: start;
	padding-block: 2.25rem 3.5rem;
}

.mr-layout__main {
	min-width: 0;
}

.mr-layout__rail {
	min-width: 0;
}

/* Статья: рельс с оглавлением — контент — рельс с виджетами. */
@media (min-width: 1101px) {
	.mr-layout--article {
		grid-template-columns: var(--rail-left) minmax(0, 1fr) var(--rail-right);
	}

	/* Лента и архивы: контент и один правый рельс. */
	.mr-layout--feed {
		grid-template-columns: minmax(0, 1fr) var(--rail-right);
	}
}

/* Оглавление липнет под панелью навигации. Высоту ограничиваем, иначе
   длинный список из десяти разделов не поместится в экран целиком. */
.mr-layout__rail--left {
	position: sticky;
	top: calc(var(--navbar) + 1rem);
	max-height: calc(100vh - var(--navbar) - 2rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

.mr-layout__rail--right {
	display: flex;
	flex-direction: column;
	gap: 1.4rem;
}

/* Планшет: правый рельс не исчезает, а переезжает вниз страницы и
   раскладывается в ряд. Там живут «Соседние регионы» и календарь —
   это часть смысла страницы, а не украшение. */
@media (max-width: 1100px) {
	.mr-layout--article {
		grid-template-columns: var(--rail-left) minmax(0, 1fr);
	}

	.mr-layout--feed {
		grid-template-columns: minmax(0, 1fr);
	}

	.mr-layout__rail--right {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
		align-items: start;
		gap: 1.25rem;
		margin-top: 2.5rem;
		padding-top: 1.75rem;
		border-top: 2px solid var(--ink);
	}
}

/* Телефон: одна колонка. Оглавление из левого рельса переезжает в текст
   отдельным блоком .mr-toc--mobile, поэтому рельс можно убрать. */
@media (max-width: 900px) {
	.mr-layout {
		grid-template-columns: minmax(0, 1fr);
		padding-block: 1.5rem 2.5rem;
	}

	.mr-layout--article,
	.mr-layout--feed {
		grid-template-columns: minmax(0, 1fr);
	}

	.mr-layout__rail--left {
		display: none;
	}

	.mr-layout__rail--right {
		margin-top: 2rem;
		padding-top: 1.5rem;
		gap: 1rem;
	}
}

/* Страницы без рельсов вообще. */
.mr-layout--single {
	grid-template-columns: minmax(0, 1fr);
}

.mr-layout--single .mr-layout__main {
	max-width: var(--measure);
	margin-inline: auto;
}

/* ---------------------------------------------------------------- Подвал */

.mr-footer {
	margin-top: 3rem;
	padding: 2.75rem 0 1.6rem;
	background: var(--ink);
	color: var(--paper-3);
	font-size: 0.9rem;
}

.mr-footer__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 2.25rem;
}

.mr-footer__about {
	min-width: 0;
}

@media (min-width: 1000px) {
	/* Колонка с описанием шире прочих: в ней абзац, а не список ссылок. */
	.mr-footer__about {
		grid-column: span 2;
		max-width: 34rem;
	}
}

.mr-footer__about p {
	margin: 0.9rem 0 0;
	max-width: 38ch;
	font-size: 0.88rem;
	line-height: 1.6;
	color: var(--ink-4);
}

.mr-footer .mr-logo__name,
.mr-footer .mr-logo {
	color: var(--paper);
}

.mr-footer .mr-logo__mark {
	background: var(--ink-2);
}

/* Колонки подвала приходят из зоны виджетов footer-1 (setup.php). */
.mr-fw {
	min-width: 0;
}

.mr-fw__t {
	margin: 0 0 0.9rem;
	font-family: var(--mono);
	font-size: 0.66rem;
	font-weight: 500;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--ink-4);
}

.mr-fw ul,
.mr-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mr-fw li,
.mr-footer__list li {
	margin: 0 0 0.55rem;
	line-height: 1.4;
}

.mr-fw a,
.mr-footer a {
	color: var(--paper-3);
	text-decoration: none;
}

.mr-fw a:hover,
.mr-footer a:hover {
	color: var(--paper);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mr-fw .mr-w__t {
	background: none;
	padding: 0;
	color: var(--ink-4);
}

.mr-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1.4rem;
	margin-top: 2.1rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--ink-2);
	font-family: var(--mono);
	font-size: 0.72rem;
	line-height: 1.5;
	color: var(--ink-4);
}

.mr-footer__bottom a {
	color: var(--paper-3);
}

@media (max-width: 700px) {
	.mr-footer {
		padding-top: 2rem;
		font-size: 0.94rem;
	}

	.mr-footer__cols {
		gap: 1.6rem;
	}

	.mr-footer__bottom {
		margin-top: 1.6rem;
		font-size: 0.7rem;
	}
}

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

@media print {
	.mr-nav,
	.mr-burger,
	.mr-header__search,
	.mr-header__side,
	.mr-layout__rail,
	.mr-footer {
		display: none !important;
	}

	.mr-layout {
		display: block;
		padding: 0;
	}

	.mr-header {
		border-bottom-width: 2px;
	}
}