/*
	modern.v1.css
	Современный слой поверх master/responsive: заменяет то, что раньше делал
	jQuery (blend_bundle). Подключается последним, поэтому выигрывает по каскаду.
	- раскрытие выпадающего меню на чистом CSS (:hover / :focus-within / .open);
	- адаптивные видео (замена fitVids) через aspect-ratio;
	- оформление нативного <dialog> для форм логина/регистрации.
*/

/* ===== Выпадающее меню (было: navigation.show/hide на jQuery) ===== */
/* по умолчанию подменю скрыто; раньше это делал класс .hidden в разметке */
.menubar .nav_children { display: none; }

/* показываем при наведении, при фокусе внутри и по клику (класс .open от JS) */
.menubar .nav_list_item:hover > .nav_children,
.menubar .nav_list_item:focus-within > .nav_children,
.menubar .nav_list_item.open > .nav_children {
	display: block;
}

/* курсор-указатель на раскрывающих пунктах (это <div>, а не ссылка) */
.menubar .nav_parent { cursor: pointer; }

/* ===== Адаптивные видео (замена fitVids) ===== */
.fit_media { position: relative; }
.fit_media iframe,
.fit_media object,
.fit_media embed {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
}

/* ===== Таблицы не переполняют экран на мобиле =====
   Широкая таблица прокручивается внутри обёртки .table_scroll, а не тянет
   горизонтальный скролл всей страницы. Семантику <table> не трогаем
   (display:block на самой таблице ломает её роль в скринридерах). */
.table_scroll {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ===== Нативный <dialog> для форм (замена jQuery UI dialog) ===== */
dialog.blend_dialog {
	width: 600px;
	max-width: 95vw;
	max-height: 90vh;
	overflow: auto;
	padding: 0;
	border: 1px solid #767676;
	border-radius: 4px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
	color: #333;
}
dialog.blend_dialog::backdrop {
	background: rgba(0, 0, 0, .5);
}
.dialog_head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding: .6em 1em;
	background: #8b0f04;
	color: #fff;
}
.dialog_head h2 {
	margin: 0;
	font-size: 1.1em;
	color: #fff;
}
.dialog_close {
	background: none;
	border: 0;
	color: #fff;
	font-size: 1.6em;
	line-height: 1;
	padding: 0 .2em;
	cursor: pointer;
}
.dialog_close:hover,
.dialog_close:focus { color: #ffd7d2; }
.blend_dialog .form { padding: 1em 1.2em 1.4em; }