/*
 * Osnova — каркас.
 *
 * Тільки розкладка: сітка, потік, розміри, співвідношення сторін, стани.
 * Жодного кольору, шрифту й радіуса — усе це в osnova-skin.css, який
 * дочірня тема має право зняти цілком.
 *
 * Правила теми:
 *   · стеля специфічності — один клас;
 *   · жодного !important, #id, :link/:visited;
 *   · жодного float і від'ємного margin у каркасі;
 *   · три брейкпоінти, завжди max-width: 1024 / 768 / 540.
 */

/* ==========================================================================
   Основа
   ========================================================================== */

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

body {
	margin: 0;
}

img,
video,
iframe,
embed,
object {
	max-width: 100%;
	height: auto;
}

.osn-page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.osn-container {
	width: 100%;
	max-width: var(--osn-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--osn-gutter);
	padding-right: var(--osn-gutter);
}

/* Доступність: посилання-пропуск і текст лише для читача з екрана.
   margin: -1px нижче — канонічний рецепт приховування, а не зсув розкладки:
   він діє на абсолютно спозиційований елемент 1×1. Це єдиний від'ємний
   margin у файлі, і правило «жодних від'ємних відступів у каркасі» його
   не стосується. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.osn-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 12px 20px;
}

.osn-skip:focus {
	left: 8px;
	top: 8px;
}

/* Колір обведення бере скін; форму задаємо тут, щоб фокус був видимий
   навіть коли скін знято. */
:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ==========================================================================
   Шапка
   ========================================================================== */

.osn-header__inner {
	display: flex;
	align-items: center;
	gap: calc(var(--osn-space) * 4);
	min-height: 72px;
}

.osn-header__brand {
	flex: 0 0 auto;
	min-width: 0;
}

.osn-header__panel {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex: 1 1 auto;
	gap: calc(var(--osn-space) * 4);
	min-width: 0;
}

.osn-header__actions {
	display: flex;
	align-items: center;
	gap: var(--osn-space);
	flex: 0 0 auto;
}

.osn-header__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	margin-left: auto;
	background: none;
	border: 0;
	cursor: pointer;
}

.osn-header__toggle-icon,
.osn-header__toggle-icon::before,
.osn-header__toggle-icon::after {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
}

.osn-header__toggle-icon {
	position: relative;
}

.osn-header__toggle-icon::before,
.osn-header__toggle-icon::after {
	content: "";
	position: absolute;
	left: 0;
}

.osn-header__toggle-icon::before {
	top: -7px;
}

.osn-header__toggle-icon::after {
	top: 7px;
}

.osn-brand {
	margin: 0;
	line-height: 1.2;
}

.osn-brand__tagline {
	margin: 2px 0 0;
}

.custom-logo {
	display: block;
	width: auto;
	height: var(--osn-logo-height);
}

/* ==========================================================================
   Навігація
   ========================================================================== */

.osn-nav__list,
.osn-footernav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(var(--osn-space) * 3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.osn-nav__list li {
	position: relative;
}

.osn-nav__list a {
	display: block;
	padding: 6px 0;
}

/* Випадайки. Показуються при наведенні й при фокусі всередині — тобто
   доступні з клавіатури без жодного скрипта. */
.osn-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 30;
	display: block;
	min-width: 200px;
	margin: 0;
	padding: calc(var(--osn-space) * 1.5) 0;
	list-style: none;
	visibility: hidden;
	opacity: 0;
}

.osn-nav__list li:hover > .sub-menu,
.osn-nav__list li:focus-within > .sub-menu {
	visibility: visible;
	opacity: 1;
}

.osn-nav__list .sub-menu .sub-menu {
	top: 0;
	left: 100%;
}

.osn-nav__list .sub-menu a {
	padding: 7px calc(var(--osn-space) * 2);
	white-space: nowrap;
}

/* Кнопку розкриття підменю додає скрипт. На широкому екрані вона не потрібна:
   там підменю веде CSS через :hover і :focus-within. */
.osn-navtoggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
}

/* Пошук у шапці */
.osn-headersearch {
	position: relative;
}

.osn-headersearch__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.osn-headersearch__form {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 30;
	width: 280px;
	padding: var(--osn-space);
}

.osn-headersearch__form[hidden] {
	display: none;
}

.osn-search {
	display: flex;
	align-items: stretch;
	gap: 6px;
}

.osn-search__field {
	flex: 1 1 auto;
	min-width: 0;
	padding: 9px 12px;
}

.osn-search__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 42px;
	padding: 0;
	cursor: pointer;
}

.osn-icon {
	display: block;
	width: 1.15em;
	height: 1.15em;
	flex: 0 0 auto;
}

/* ==========================================================================
   Каркас сторінки
   ========================================================================== */

.osn-body {
	flex: 1 0 auto;
	padding-top: calc(var(--osn-space) * 6);
	padding-bottom: calc(var(--osn-space) * 8);
}

.osn-body__inner {
	display: grid;
	gap: var(--osn-gap);
	grid-template-columns: minmax(0, 1fr) var(--osn-sidebar);
	align-items: start;
}

.osn-layout-left .osn-body__inner {
	grid-template-columns: var(--osn-sidebar) minmax(0, 1fr);
}

.osn-layout-left .osn-main {
	order: 2;
}

.osn-layout-left .osn-sidebar {
	order: 1;
}

.osn-layout-none .osn-body__inner,
.osn-no-sidebar .osn-body__inner {
	grid-template-columns: minmax(0, 1fr);
}

.osn-main {
	min-width: 0;
}

.osn-sidebar {
	display: grid;
	gap: calc(var(--osn-space) * 4);
	min-width: 0;
}

/* Віджет у колонці завжди на всю її ширину — ніколи не в дві вузькі */
.osn-widget {
	width: 100%;
}

/* ==========================================================================
   Стрічка й картка
   ========================================================================== */

.osn-loop {
	display: grid;
	gap: calc(var(--osn-space) * 5);
}

.osn-card {
	display: grid;
	gap: calc(var(--osn-space) * 2);
	min-width: 0;
}

.osn-card__cover {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.osn-card__cover img,
.osn-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.osn-card__body {
	display: grid;
	gap: var(--osn-space);
	min-width: 0;
}

.osn-card__title {
	margin: 0;
}

.osn-card__excerpt {
	margin: 0;
}

.osn-card__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(var(--osn-space) * 3);
	padding-top: calc(var(--osn-space) * 2);
}

.osn-card__more,
.osn-commentslink {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 40px;
}

/* Патерн «фото зліва, текст справа» — вмикається фільтром osn_card_layout */
.osn-card--split {
	grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
	align-items: center;
	gap: calc(var(--osn-space) * 3);
}

.osn-card--split .osn-card__cover {
	aspect-ratio: 4 / 3;
}

/* ==========================================================================
   Мета, терміни, порожній стан
   ========================================================================== */

.osn-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
}

.osn-meta__sep {
	padding: 0 7px;
}

.osn-terms {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--osn-space);
}

.osn-terms__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--osn-space);
	margin: 0;
	padding: 0;
	list-style: none;
}

.osn-empty {
	display: grid;
	gap: calc(var(--osn-space) * 2);
	justify-items: start;
	padding: calc(var(--osn-space) * 5) 0;
}

.osn-empty__title,
.osn-empty__text {
	margin: 0;
}

/* ==========================================================================
   Запис і сторінка
   ========================================================================== */

.osn-single {
	display: grid;
	gap: calc(var(--osn-space) * 3);
	min-width: 0;
}

.osn-single__head {
	display: grid;
	gap: var(--osn-space);
	justify-items: start;
}

.osn-single__title {
	margin: 0;
}

.osn-single__cover {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.osn-single__cover img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Довжина рядка в тілі матеріалу. Заголовки й широкі блоки не обмежуємо. */
.osn-prose > * {
	max-width: var(--osn-prose);
}

.osn-prose > .alignwide,
.osn-prose > .alignfull,
.osn-prose > figure,
.osn-prose > table,
.osn-prose > .wp-block-table,
.osn-prose > .wp-block-embed {
	max-width: none;
}

.osn-prose img {
	height: auto;
}

.osn-prose table {
	width: 100%;
	border-collapse: collapse;
}

/* Широкий вміст ніколи не штовхає сторінку вбік */
.osn-prose .wp-block-table,
.osn-prose pre {
	overflow-x: auto;
}

.osn-single__foot {
	display: grid;
	gap: var(--osn-space);
}

.osn-attachment {
	margin: 0;
	display: grid;
	gap: var(--osn-space);
}

/* ==========================================================================
   Навігація між записами й пагінація
   ========================================================================== */

.osn-postnav {
	display: grid;
	gap: calc(var(--osn-space) * 2);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: calc(var(--osn-space) * 5);
}

.osn-postnav__item {
	display: grid;
	gap: 5px;
	padding: calc(var(--osn-space) * 2);
	min-width: 0;
}

.osn-postnav__item--prev:only-child {
	grid-column: 1;
}

.osn-pagination {
	margin-top: calc(var(--osn-space) * 6);
}

.osn-pagination__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.osn-pagination__list a,
.osn-pagination__list span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: 0 12px;
}

.osn-pagelinks {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--osn-space);
	margin-top: calc(var(--osn-space) * 3);
}

/* ==========================================================================
   Коментарі
   ========================================================================== */

.osn-comments {
	display: grid;
	gap: calc(var(--osn-space) * 3);
	margin-top: calc(var(--osn-space) * 7);
}

.osn-comments__title {
	margin: 0;
}

.osn-comments__list,
.osn-comments__list .children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.osn-comments__list .children {
	margin-top: calc(var(--osn-space) * 3);
	padding-left: calc(var(--osn-space) * 4);
}

.osn-comment {
	margin-bottom: calc(var(--osn-space) * 3);
}

.osn-comment__inner {
	display: grid;
	gap: var(--osn-space);
	padding: calc(var(--osn-space) * 2.5);
}

.osn-comment__head {
	display: flex;
	align-items: center;
	gap: calc(var(--osn-space) * 1.5);
}

.osn-comment__avatar {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	overflow: hidden;
}

.osn-comment__avatar img {
	display: block;
	width: 100%;
	height: 100%;
}

.osn-comment__author,
.osn-comment__meta,
.osn-comment__reply,
.osn-comment__pending {
	margin: 0;
}

.osn-commentform p {
	margin: 0 0 calc(var(--osn-space) * 2);
}

.osn-commentform input[type="text"],
.osn-commentform input[type="email"],
.osn-commentform input[type="url"],
.osn-commentform textarea {
	width: 100%;
	padding: 10px 12px;
}

.osn-commentform textarea {
	min-height: 160px;
	resize: vertical;
}

/* ==========================================================================
   Підвал, 404
   ========================================================================== */

.osn-footer {
	flex: 0 0 auto;
	padding-top: calc(var(--osn-space) * 5);
	padding-bottom: calc(var(--osn-space) * 5);
}

.osn-footer__widgets {
	display: grid;
	gap: var(--osn-gap);
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	padding-bottom: calc(var(--osn-space) * 4);
}

.osn-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: calc(var(--osn-space) * 2);
}

.osn-footer__copy {
	margin: 0;
}

.osn-404 {
	display: grid;
	gap: calc(var(--osn-space) * 2);
	justify-items: start;
	max-width: var(--osn-prose);
	padding: calc(var(--osn-space) * 6) 0;
}

.osn-404__code,
.osn-404__title,
.osn-404__text,
.osn-404__home {
	margin: 0;
}

.osn-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 44px;
	padding: 0 calc(var(--osn-space) * 3);
	cursor: pointer;
}

.osn-archhead {
	display: grid;
	gap: var(--osn-space);
	margin-bottom: calc(var(--osn-space) * 5);
}

.osn-archhead__title {
	margin: 0;
}

.osn-crumbs {
	margin-bottom: calc(var(--osn-space) * 3);
}

/* ==========================================================================
   Адаптив: 1024 / 768 / 540
   ========================================================================== */

@media (max-width: 1024px) {
	:root {
		--osn-gap: 32px;
		--osn-sidebar: 280px;
	}

	.osn-header__inner {
		gap: calc(var(--osn-space) * 2.5);
	}

	.osn-nav__list {
		gap: calc(var(--osn-space) * 2);
	}
}

@media (max-width: 768px) {
	:root {
		--osn-gutter: 18px;
		--osn-gap: 40px;
	}

	/* Меню ховається за кнопку. Панель розкриває скрипт, змінюючи
	   aria-expanded на кнопці — стан лишається в одному місці. */
	.osn-header__toggle {
		display: flex;
	}

	.osn-header__panel {
		display: none;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		flex-basis: 100%;
		gap: calc(var(--osn-space) * 2);
		padding: calc(var(--osn-space) * 2) 0 calc(var(--osn-space) * 3);
	}

	.osn-header__inner {
		flex-wrap: wrap;
	}

	.osn-header__toggle[aria-expanded="true"] ~ .osn-header__panel {
		display: flex;
	}

	.osn-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.osn-nav__list li {
		position: static;
	}

	.osn-nav__list a {
		padding: 11px 0;
	}

	.osn-nav__list .sub-menu {
		position: static;
		visibility: visible;
		opacity: 1;
		display: none;
		min-width: 0;
		padding: 0 0 var(--osn-space) calc(var(--osn-space) * 2);
	}

	.osn-nav__list li.osn-open > .sub-menu {
		display: block;
	}

	/* Пункт із підменю стає рядком «посилання + кнопка», підменю під ними */
	.osn-nav__list .menu-item-has-children {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 40px;
		align-items: center;
	}

	.osn-nav__list .menu-item-has-children > .sub-menu {
		grid-column: 1 / -1;
	}

	.osn-navtoggle {
		display: flex;
	}

	.osn-header__actions {
		justify-content: flex-start;
	}

	.osn-headersearch {
		width: 100%;
	}

	.osn-headersearch__form {
		position: static;
		width: 100%;
		padding: 0;
	}

	.osn-headersearch__toggle {
		display: none;
	}

	.osn-headersearch__form[hidden] {
		display: block;
	}

	.osn-body__inner,
	.osn-layout-left .osn-body__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.osn-layout-left .osn-main,
	.osn-layout-left .osn-sidebar {
		order: 0;
	}

	.osn-card--split {
		grid-template-columns: minmax(0, 1fr);
	}

	.osn-comments__list .children {
		padding-left: calc(var(--osn-space) * 2);
	}
}

@media (max-width: 540px) {
	:root {
		--osn-gap: 32px;
	}

	.osn-loop {
		gap: calc(var(--osn-space) * 4);
	}

	.osn-postnav {
		grid-template-columns: minmax(0, 1fr);
	}

	.osn-footer__bar {
		flex-direction: column;
		align-items: flex-start;
	}

	.osn-comment__inner {
		padding: calc(var(--osn-space) * 2);
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms;
		animation-iteration-count: 1;
		transition-duration: .01ms;
		scroll-behavior: auto;
	}
}