/* layout.css — the page frame: header, top bar (search, login, «Меню»), the two columns, sidebar blocks, breadcrumbs, footer,
   and the phone menu panel. Up to 800px the page is one column: a sticky top bar, the content, then the sidebar blocks. */

/* ==== Page frame and header ==== */

.wrapper {
	width: 92%;
	min-width: 978px;
	max-width: 1120px;
	margin: 0 auto;
	text-align: left;
}
.wwide {
	width: 100%;
	min-width: 978px;
}
.container {
	margin: 0 3px;
}
#header h1 {
	font-size: 24pt;
}
.logo {
	float: left;
	padding: 16px 0;
}

@media (max-width: 800px) {
	.wrapper,
	.wwide {
		min-width: 0;
	}
	.wrapper {
		width: auto;
		padding: 0 12px;
	}
	.container {
		margin: 0;
	}
	#header {
		text-align: center;
	}
	.logo {
		float: none;
		padding: 14px 0 10px;
	}
	.logo img {
		max-width: 100%;
		height: auto;
	}
}

@media (max-width: 480px) {
	.wrapper {
		padding: 0 10px;
	}
	.logo {
		padding: 10px 0 6px;
	}
}

/* ==== Top bar: search, login ==== */

#toolbar {
	position: relative;
	background: #fff;
	border-bottom: 1px solid var(--border);
}
#toolbar .dpad {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 60px;
}
#toolbar .loginbox {
	order: 1;
}
#toolbar .searchform {
	order: 2;
	display: block;
	margin-left: auto;
}
/* search: one bordered field with the button inside, like a sidebar block row */
.searchbar {
	display: flex;
	margin: 0;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--r);
}
.searchbar:focus-within {
	border-color: var(--link);
}
.searchbar .lfield input {
	display: block;
	box-sizing: border-box;
	width: 220px;
	height: 34px;
	margin: 0;
	padding: 0 10px;
	font-size: 14px;
	color: var(--text);
	background: #fff;
	border: 0;
	appearance: none;
}
.searchbar .lfield input::placeholder {
	color: var(--faint);
}
.searchbar .lbtn button {
	display: block;
	width: 38px;
	height: 34px;
	margin: 0;
	padding: 0;
	border: 0;
	border-left: 1px solid var(--border);
	background: var(--strip) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='6.5' cy='6.5' r='5' fill='none' stroke='%23516168' stroke-width='2'/%3E%3Cpath d='M10.3 10.3L15 15' stroke='%23516168' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 50% 50%;
	cursor: pointer;
}
.searchbar .lbtn button:hover {
	background-color: var(--hover);
}
/* login: a quiet button with a caret; the form drops down under it */
.loginbox {
	display: flex;
	align-items: center;
	gap: 14px;
}
.loginbox .loginbtn,
.loginbox .loginava {
	position: relative;
}
.loginbtn {
	white-space: nowrap;
}
.lbn {
	position: relative;
	z-index: 13;
	display: inline-block;
	padding: 7px 12px;
	font-size: 14px;
	line-height: 18px;
	color: var(--text);
	background: var(--strip);
	border: 1px solid var(--border);
	border-radius: var(--r);
}
.lbn:hover {
	background-color: var(--hover);
	text-decoration: none;
}
.lbn b {
	position: relative;
	display: block;
	padding: 0 18px 0 0;
	cursor: pointer;
}
.lbn b:after {
	content: "";
	position: absolute;
	right: 2px;
	top: 50%;
	margin-top: -2px;
	border: 5px solid transparent;
	border-bottom: 0;
	border-top-color: var(--muted);
}
.lbn.selected {
	background: #fff;
	border-color: var(--link);
	border-radius: var(--r) var(--r) 0 0;
}
.lbn.selected b:after {
	border-top: 0;
	border-bottom: 5px solid var(--link);
}
.loginbox #logform {
	display: none;
	position: absolute;
	z-index: 12;
	top: 100%;
	left: 0;
	box-sizing: border-box;
	width: 230px;
	margin-top: -1px;
	padding: 12px;
	background: #fff;
	border: 1px solid var(--link);
	border-radius: 0 var(--r-lg) var(--r-lg) var(--r-lg);
}
.loginbox #logform .lfield {
	margin-bottom: 1em;
}
.loginbox #logform .lfield label {
	display: block;
	margin-bottom: 0.2em;
}
.loginbox #logform .lfield input {
	box-sizing: border-box;
	width: 100%;
	height: 32px;
	padding: 0 8px;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
}
.loginbox #logform .lfield input:focus {
	border-color: var(--link);
}
.loginbox #logform .lbtn {
	text-align: center;
}
.loginbox #logform .lbtn .fbutton {
	width: 100%;
}
.loginbox .lreg {
	margin-top: 10px;
	padding-top: 8px;
	text-align: center;
	border-top: 1px solid var(--line);
}
.loginbox .mob-only {
	display: none;
}
/* the signed-in menu */
.loginenter {
	margin: -4px 0;
}
.loginenter li a {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 7px 4px;
	color: var(--link);
	border-bottom: 1px solid var(--line);
}
.loginenter li:last-child a {
	border-bottom: 0;
}
.loginenter li a:hover {
	background-color: var(--strip);
	text-decoration: none;
}
/* new-messages counter: blue, a quiet grey 0 */
.loginbox .lvsep {
	font-size: 14px;
	line-height: 20px;
}
.radial {
	border-radius: var(--r);
}
.loginbox .lvsep .radial {
	display: inline-block;
	margin-right: 5px;
	padding: 0 7px;
	color: #fff;
	background-color: var(--link);
	border-radius: 9px;
}
.loginbox a.radial.is-zero {
	color: var(--muted);
	background: var(--hover);
}
/* avatar: a round frame with a thin ring in the block border colour */
.loginbox .loginava {
	width: 34px;
	height: 34px;
	overflow: hidden;
	background: var(--hover);
	border: 1px solid var(--border);
	border-radius: 50%;
}
.loginbox .loginava img {
	display: block;
	width: 34px;
	height: 34px;
	object-fit: cover;
}
.loginbox .loginava b {
	display: none;
}
.loginbox .lexit {
	display: inline-block;
	margin-left: 6px;
	vertical-align: middle;
	font-size: 13px;
	color: var(--muted);
}
.loginbox .lexit:hover {
	color: var(--danger);
	text-decoration: none;
}

@media (max-width: 800px) {
	/* the bar stays at the top while scrolling; its three controls are 40px tall on one centre line */
	#toolbar {
		position: sticky;
		top: 0;
		z-index: 50;
	}
	#toolbar .dpad {
		gap: 8px;
		min-height: 54px;
	}
	#toolbar .searchform {
		order: 1;
		flex: 1 1 auto;
		min-width: 0;
		margin: 0;
	}
	.searchbar .lfield {
		flex: 1 1 auto;
		min-width: 0;
	}
	/* 16px: no zoom-in on iOS */
	.searchbar .lfield input {
		width: 100%;
		height: 38px;
		font-size: 16px;
	}
	.searchbar .lbtn button {
		height: 38px;
	}
	#toolbar .loginbox {
		order: 2;
		flex: none;
		gap: 8px;
	}
	#toolbar .loginbox,
	#toolbar .loginbox .loginbtn {
		display: flex;
		align-items: center;
		margin: 0;
	}
	.lbn {
		display: block;
		box-sizing: border-box;
		height: 40px;
		padding: 0 10px;
		line-height: 38px;
	}
	.lbn b {
		max-width: 96px;
		overflow: hidden;
		line-height: 38px;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.loginbox .lvsep,
	.loginbox .lexit {
		display: none;
	}
	.loginbox .mob-only {
		display: block;
	}
	.loginbox #logform {
		left: auto;
		right: 0;
		width: 250px;
		border-radius: var(--r-lg) 0 var(--r-lg) var(--r-lg);
	}
	.loginenter li a {
		padding: 10px 6px;
	}
}

@media (max-width: 480px) {
	.loginbox .loginava {
		display: none;
	}
}

/* ==== Columns ==== */

/* .vsep holds both columns: the sidebar sits in its left padding */
.vsep {
	padding-left: 289px;
}
.vsep .vsep {
	width: 100%;
	padding: 0;
}
#midside {
	width: 100%;
	margin-top: -4px;
}
#midside img {
	max-width: 650px;
}

@media (max-width: 800px) {
	.vsep {
		padding-left: 0;
	}
	#midside {
		float: none;
		display: block;
		width: auto;
		margin: 0;
	}
	#midside img {
		max-width: 100%;
		height: auto;
	}
}

/* ==== Sidebar ==== */

/* -10px + the first block's 6px = #midside's -4px: «Навігація» level with the breadcrumbs */
#sidebar {
	width: 289px;
	margin: -10px 0 0 -289px;
}
.block {
	width: 260px;
	margin: 6px 6px 12px 0;
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
}
.block .btl {
	position: relative;
	padding: 8px 16px;
	background-color: var(--strip);
	border-bottom: 1px solid var(--border);
	border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.block .btl h4 {
	color: var(--text-2);
}
/* navigation menu */
.bluemenu {
	padding: 12px 16px;
}
.bluemenu li {
	padding: 4px;
	border-radius: var(--r-sm);
}
.bluemenu li:hover {
	background-color: var(--strip);
}
.bluemenu li.active {
	background-color: #e4eef8;
}
.bluemenu li.active a {
	font-weight: bold;
	color: #2a6aa8;
}
.bluemenu li.hot a {
	font-weight: bold;
	color: var(--danger);
}
.birthday {
	padding: 12px 16px;
}
/* news archive: calendar / list, switched by two small tab buttons in the title strip */
.tabcont {
	display: none;
}
#news-arch .btl {
	border-bottom: 0;
}
#news-arch .dpad {
	padding: 10px 12px 12px;
}
/* the «В вигляді календаря / списку» line repeated the selected tab; the buttons carry the name (title, aria) */
#news-arch .tabcont > p {
	display: none;
}
.tabmenu {
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -12px;
	display: flex;
	gap: 4px;
}
.tabmenu a {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: 26px;
	height: 24px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	text-indent: -999px;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
}
.tabmenu a.selected {
	background: var(--link);
	border-color: var(--link-hover);
}
/* list icon: three bars; calendar icon: a frame with a thick top */
.tabmenu a:after {
	content: "";
	position: absolute;
	left: 6px;
	right: 6px;
	top: 6px;
	height: 2px;
	background: var(--muted);
	box-shadow: 0 4px 0 var(--muted), 0 8px 0 var(--muted);
}
.tabmenu a.tabcal:after {
	top: 5px;
	bottom: 5px;
	height: auto;
	background: none;
	border: 2px solid var(--muted);
	border-top-width: 4px;
	border-radius: 2px;
	box-shadow: none;
}
.tabmenu a.selected:after {
	background-color: #fff;
	box-shadow: 0 4px 0 #fff, 0 8px 0 #fff;
}
.tabmenu a.tabcal.selected:after {
	background: none;
	border-color: #fff;
	box-shadow: none;
}
.tabmenu a:focus-visible {
	outline: 2px solid var(--link);
	outline-offset: 1px;
}
/* the list: by year — the year, then its months as pills «Вер 1»; older years behind «Раніше: 2023–2009» */
.arch-year {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	gap: 0 6px;
	align-items: start;
	padding: 5px 0;
	border-top: 1px solid var(--line);
}
.arch-years > .arch-year:first-child {
	padding-top: 0;
	border-top: 0;
}
.arch-y {
	padding-top: 3px;
	font-size: 13px;
	font-weight: bold;
	color: var(--text);
}
.arch-months {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 4px;
	margin: 0;
	padding: 0;
}
.arch-months li {
	display: flex;
	list-style: none;
}
#news-arch .arch-months a {
	display: flex;
	flex: 1 1 auto;
	justify-content: space-between;
	align-items: center;
	gap: 4px;
	box-sizing: border-box;
	min-height: 22px;
	padding: 1px 4px 1px 8px;
	font-size: 12px;
	line-height: 18px;
	color: var(--link-hover);
	white-space: nowrap;
	text-decoration: none;
	background: var(--strip);
	border: 1px solid var(--border);
	border-radius: 10px;
}
#news-arch .arch-months a span {
	box-sizing: border-box;
	min-width: 16px;
	padding: 0 4px;
	font-size: 11px;
	line-height: 16px;
	text-align: center;
	color: var(--text-2);
	background: #fff;
	border-radius: var(--r-lg);
}
#news-arch .arch-months a:hover,
#news-arch .arch-months a:focus-visible {
	background: var(--hover);
	border-color: #b7d0dc;
}
.arch-more {
	border-top: 1px solid var(--line);
}
.arch-more > summary {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 0 2px;
	font-size: 13px;
	color: var(--link-hover);
	list-style: none;
	cursor: pointer;
}
.arch-more > summary::-webkit-details-marker {
	display: none;
}
.arch-more > summary::before {
	content: "";
	width: 6px;
	height: 6px;
	margin: 0 2px 2px 3px;
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	transition: transform 0.15s;
}
.arch-more > summary:hover {
	text-decoration: underline;
}
.arch-more[open] > summary {
	padding-bottom: 6px;
}
.arch-more[open] > summary::before {
	margin-bottom: -2px;
	transform: rotate(-135deg);
}
.arch-more > .arch-year:first-of-type {
	border-top: 0;
}
/* «Популярні матеріали» ({topnews}): numbered rows; number and title share one first baseline */
#sidebar #popular ul {
	margin: 0;
	padding: 4px 0;
	list-style: none;
	counter-reset: top;
}
#sidebar #popular li {
	counter-increment: top;
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 7px 16px;
	line-height: 1.35;
	border-top: 1px solid var(--line);
}
#sidebar #popular li:first-child {
	border-top: 0;
}
#sidebar #popular li::before {
	content: counter(top);
	flex: 0 0 18px;
	font-weight: bold;
	line-height: inherit;
	text-align: right;
	color: var(--faint);
}
#sidebar #popular li a {
	flex: 1 1 auto;
	min-width: 0;
	line-height: inherit;
	color: var(--link-hover);
	text-decoration: none;
}
#sidebar #popular li a:hover {
	color: var(--link);
	text-decoration: underline;
}

@media (max-width: 800px) {
	#sidebar {
		float: none;
		display: block;
		width: auto;
		margin: 24px 0 0;
	}
	.block {
		width: auto;
		margin: 0 0 12px;
	}
	/* every card has the same 12px inner inset as the article cards */
	.block .btl {
		padding: 9px 12px;
	}
	.birthday {
		padding: 10px 12px;
	}
	/* the menu: bigger rows to tap, at the bottom of the page and in the panel */
	.bluemenu {
		padding: 8px 10px;
	}
	.bluemenu li {
		padding: 0;
	}
	.bluemenu li a {
		display: block;
		padding: 9px 8px;
	}
	.bluemenu + .bluemenu {
		border-top: 1px solid var(--line);
	}
	/* the block is full width here */
	.arch-months {
		grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	}
	#news-arch .arch-months a {
		min-height: 28px;
	}
	#sidebar #popular li {
		padding: 9px 12px;
	}
}

/* ==== Breadcrumbs ==== */

.speedbar {
	margin-bottom: 12px;
	padding: 8px 16px;
	font-size: 0.95em;
	color: var(--muted);
	background: var(--strip);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
}
.speedbar a {
	color: var(--link);
}

@media (max-width: 800px) {
	.speedbar {
		padding: 7px 12px;
	}
}

/* ==== Footer ==== */

#footmenu {
	position: relative;
	margin-top: 24px;
	background: var(--strip);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}
#footmenu .dpad {
	overflow: hidden;
}
#footmenu ul {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 8px 0;
}
#footmenu ul a {
	display: block;
	padding: 4px 10px;
	line-height: 20px;
	color: var(--text);
	border-radius: var(--r-sm);
}
#footmenu ul a:hover {
	color: var(--link);
	background-color: #fff;
	text-decoration: none;
}
#footer {
	padding: 16px 0 28px;
	background: #fff;
}
.copyright {
	float: left;
	line-height: 1.5;
	color: #6b7a81;
}
.copyright a {
	color: #6b7a81;
}
.copyright .iaru {
	float: left;
	margin-right: 24px;
}
/* counters and the RSS informer */
.counts {
	display: inline;
}
.counts ul {
	float: right;
}
.counts ul li {
	float: right;
	width: 88px;
	height: 31px;
	margin: 0 0 0 8px;
	opacity: 0.4;
}
.counts ul li:hover {
	opacity: 1;
}
.informer {
	margin-bottom: 15px;
	padding-top: 13px;
	border-top: 1px solid #b6cbd6;
}

@media (max-width: 800px) {
	#footmenu ul {
		justify-content: center;
	}
	.copyright {
		float: none;
		display: block;
		font-size: 13px;
	}
	.copyright .iaru {
		margin-right: 14px;
	}
}

/* ==== Phone menu panel ==== */
/* «Меню» opens the sidebar navigation (#mainnav) as a panel over the page (js/libs.js); no second copy at the page bottom */

.navbtn,
.navclose {
	display: none;
}

@media (max-width: 800px) {
	.navbtn {
		order: 0;
		flex: none;
		display: flex;
		align-items: center;
		gap: 8px;
		box-sizing: border-box;
		height: 40px;
		margin: 0;
		padding: 0 12px;
		font: bold 14px var(--font);
		color: var(--text);
		background: var(--strip);
		border: 1px solid var(--border);
		border-radius: var(--r);
		cursor: pointer;
	}
	.navbtn:active,
	.navbtn[aria-expanded="true"] {
		color: var(--link);
		background: #fff;
		border-color: var(--link);
	}
	/* the three-bar icon */
	.navbtn-ico,
	.navbtn-ico:before,
	.navbtn-ico:after {
		display: block;
		width: 16px;
		height: 2px;
		background: currentColor;
		border-radius: 1px;
	}
	.navbtn-ico {
		position: relative;
	}
	.navbtn-ico:before,
	.navbtn-ico:after {
		content: "";
		position: absolute;
		left: 0;
	}
	.navbtn-ico:before {
		top: -5px;
	}
	.navbtn-ico:after {
		top: 5px;
	}
	#mainnav,
	#navshade {
		display: none;
	}
	body.nav-open {
		overflow: hidden;
	}
	body.nav-open #navshade {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 60;
		background: rgba(43, 55, 61, 0.45);
	}
	body.nav-open #mainnav {
		display: block;
		position: fixed;
		z-index: 70;
		top: 0;
		bottom: 0;
		left: 0;
		width: 300px;
		max-width: 86%;
		margin: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		background: #fff;
		border-width: 0 1px 0 0;
		border-radius: 0 var(--r-lg) var(--r-lg) 0;
	}
	body.nav-open #mainnav .btl {
		position: sticky;
		top: 0;
		z-index: 1;
		padding: 13px 16px;
		border-radius: 0 var(--r-lg) 0 0;
	}
	.navclose {
		position: absolute;
		right: 8px;
		top: 50%;
		width: 34px;
		height: 34px;
		margin-top: -17px;
		padding: 0;
		font: 24px/30px var(--font);
		color: var(--text-2);
		background: #fff;
		border: 1px solid var(--border);
		border-radius: var(--r);
		cursor: pointer;
	}
	body.nav-open .navclose {
		display: block;
	}
}

@media (max-width: 360px) {
	.navbtn {
		padding: 0 10px;
	}
	.navbtn-txt {
		display: none;
	}
}