/* Piknikovich — layout.css
   Site shell: header, logo, city dropdown, nav, icon buttons,
   footer, WP site-main/page-header/article, widgets, search form,
   comments, internal-page header behavior. */

/* ===== Header (global, sticky) ===== */
.pk-header {
	position: sticky;
	top: 0;
	z-index: 40;
	/* Шапка в header.php стоит ВНЕ #page, поэтому полотно --pk-container
	   (эталон: весь сайт в центрированных 1440px, ничего на всю ширину
	   экрана) ограничивает её здесь, а не через обёртку страницы. */
	max-width: var(--pk-container);
	margin-inline: auto;
	background: #fff;
	border-bottom: 1px solid var(--pk-border);
	transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.admin-bar .pk-header { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .pk-header { top: 46px; }
}
.pk-header__inner {
	display: flex;
	align-items: center;
	/* Эталон SiteHeader.jsx: gap 18, padding 0 18px, height --header-height,
	   maxWidth --pk-container. У шапки своё поле, уже секционного gutter. */
	gap: 18px;
	height: var(--header-height);
	padding: 0 18px;
	max-width: var(--pk-container);
	margin: 0 auto;
}
/* Overlay header on front page - fixed, transparent over hero.
   Полотно наследуется от базового .pk-header (max-width + margin-inline);
   left/right 0 дают fixed-шапке ширину для центрирования margin'ами.
   transform для центрирования не использовать - он сделает шапку
   containing block для fixed-потомков (мобильное меню, шторки). */
.pk-header--overlay {
	position: fixed;
	top: 0; left: 0; right: 0;
	background: transparent;
	border-bottom-color: transparent;
}
.admin-bar .pk-header--overlay { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .pk-header--overlay { top: 46px; }
}
.pk-header--overlay .pk-icon-btn,
.pk-header--overlay .pk-btn--ghost {
	background: rgba(255,255,255,0.92);
	backdrop-filter: saturate(150%) blur(4px);
	-webkit-backdrop-filter: saturate(150%) blur(4px);
}

/* Scrolled state — frosted glass */
.pk-header.is-scrolled,
.pk-header--overlay.is-scrolled {
	background: rgba(255, 255, 255, 0.72);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	box-shadow: 0 6px 24px rgba(16, 24, 40, 0.06);
	border-bottom-color: transparent;
}
.pk-header--overlay.is-scrolled .pk-icon-btn,
.pk-header--overlay.is-scrolled .pk-btn--ghost {
	background: rgba(255,255,255,0.75);
}

.pk-logo { display: flex; align-items: center; gap: 10px; }
.pk-logo img { height: 54px; width: auto; }
.pk-logo__text { display: flex; flex-direction: column; line-height: 1.05; }
.pk-logo__title { font-size: 22px; font-weight: 800; color: var(--pk-main); letter-spacing: -0.01em; }
.pk-logo__sub { font-size: 11px; color: var(--pk-muted); }

/* Выбор города в шапке. Комментарий про «стабилизированную ширину» снят
   2026-09-05 вместе с фиксированными 160px: у эталона ширина по содержимому,
   а от сдвига навигации держит не она, а auto-отступ .pk-nav. */
.pk-city {
	position: relative;
	flex: none;
	/* Эталон SiteHeader: город стоит при логотипе - marginLeft 8 (узкий
	   режим 4 задаёт site-header.css); прежние 25px отодвигали его. */
	margin-left: 8px;
}
/* Эталон: components/navigation/CitySelect.jsx, компактный вид.
   Ни рамки, ни тени, ни фиксированной ширины: зелёный пин, название города,
   микро-шеврон. Земля появляется ТОЛЬКО на ховере (--pk-green-soft) - в покое
   контрол читается как часть шапки, а не как поле ввода.

   Ширина по содержимому с потолком 170: город стоит слева от логотипа,
   навигация прижата вправо своим auto-отступом, поэтому смена города ничего
   не сдвигает и фиксированные 160px не нужны. */
.pk-city-select {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	max-width: 170px;
	padding: 0 9px 0 7px;
	border: none;
	border-radius: var(--pk-radius-pill);
	font-family: inherit;
	font-size: var(--fs-nav);
	font-weight: var(--fw-semibold);
	line-height: 1;
	color: var(--pk-text);
	background: transparent;
	cursor: pointer;
	white-space: nowrap;
	transition: background .15s, color .15s;
}
.pk-city__value {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: left;
}
.pk-city-select:hover { background: var(--pk-green-soft); color: var(--pk-green-dark); }
/* Пин зелёный всегда, в том числе на ховере: у эталона цвет иконки задан
   жёстко, а не через currentColor кнопки. */
.pk-city__pin {
	width: 16px;
	height: 15px;
	flex: none;
	display: block;
	align-self: center;
	color: var(--pk-green);
}
.pk-city__chev {
	width: 10px;
	height: 10px;
	flex: none;
	opacity: .4;
	transition: transform .15s, opacity .15s;
}
.pk-city-select:hover .pk-city__chev { opacity: .9; }

/* Над героем контрол берёт тихое стекло, иначе прозрачная кнопка не читается
   поверх фотографии. Значения эталона: .42 в покое, --glass-bg-overlay (.92)
   на ховере. Отдельного состояния для приклеенной шапки у эталона нет, и мы
   его не выдумываем: .pk-city-select намеренно выведен из групповых правил
   .pk-header--overlay выше, где .pk-icon-btn и .pk-btn--ghost остались на .92
   и .75 - у них своя история. */
.pk-header--overlay .pk-city-select {
	background: rgba(255, 255, 255, 0.42);
	backdrop-filter: saturate(150%) blur(4px);
	-webkit-backdrop-filter: saturate(150%) blur(4px);
}
.pk-header--overlay .pk-city-select:hover { background: rgba(255, 255, 255, 0.92); }

/* Выпадающий список города (.pk-city__menu) удалён 2026-09-04, перенос
   transfer-16: кнопка стала триггером единого окна выбора города, второго
   пикера в системе нет. */

/* Эталон SiteHeader.jsx: gap 26, margin 0 24px 0 auto. */
.pk-nav { display: flex; align-items: center; gap: 26px; margin: 0 24px 0 auto; }
.pk-header__right .pk-btn { font-size: 16px; }
.pk-nav a {
	font-size: 16px;
	font-weight: 500;
	color: var(--pk-text);
	padding: 6px 2px;
	white-space: nowrap;
	transition: color .15s;
}
.pk-nav a:hover { color: var(--pk-green); }
.pk-header--overlay .pk-nav a { color: var(--pk-text); }

.pk-header__right { display: flex; align-items: center; gap: 10px; }
/* Эталон: components/core/IconButton.jsx, variant "default" - кружок 44,
   белая заливка, рамка --pk-border, цвет --pk-text, тени нет; на ховере
   рамка и иконка зеленеют. */
.pk-icon-btn {
	width: 44px; height: 44px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: #fff; border: 1px solid var(--pk-border); color: var(--pk-text);
	transition: border-color .15s, color .15s;
}
/* Тег в селекторе НЕ для красоты: reset `.pk-front button { border: 0;
   background: none }` (0-1-1) перебивал одиночный класс, и в шапке от кнопки
   оставалось голое сердце без кружка. Тег даёт такую же 0-1-1, а layout.css
   грузится после base.css - спор решает порядок файлов.
   Выше 0-1-1 поднимать нельзя: стекло над героем
   (`.pk-header--overlay .pk-icon-btn`, 0-2-0) и мобильная шапка
   (`.pk-front .pk-mhead .pk-icon-btn`, 0-3-0) должны продолжать выигрывать. */
button.pk-icon-btn { background: #fff; border: 1px solid var(--pk-border); }
.pk-icon-btn:hover { border-color: var(--pk-green); color: var(--pk-green); }

/* ===== Footer (global) =====
   Переехал в assets/css/footer.css (перенос дизайна 2026-09-01): подвал
   и пре-футер перелинковки живут в отдельном файле своей зоны, чтобы
   шапка и подвал не делили один файл между окнами переноса. */

/* ===== WP site-main shell (used by default WP templates) ===== */
.pk-front .site-main {
	max-width: var(--pk-container);
	margin: 0 auto;
	padding: 48px var(--pk-gutter) 72px;
	min-height: 50vh;
}

/* Generic page header (archive titles, page titles, 404) */
.pk-front .page-header {
	margin: 0 0 32px;
	padding: 0 0 20px;
	border-bottom: 1px solid var(--pk-border);
}
.pk-front .page-title {
	font-size: 38px; font-weight: 800; letter-spacing: -0.02em;
	margin: 0 0 8px; line-height: 1.15;
}
.pk-front .archive-description {
	color: var(--pk-muted); font-size: 16px; max-width: 720px;
	margin: 6px 0 0;
}
.pk-front .archive-description > :last-child { margin-bottom: 0; }

/* Single post / page article */
.pk-front .site-main > article {
	background: #fff;
	border: 1px solid var(--pk-border);
	border-radius: var(--pk-radius);
	padding: 36px;
	margin: 0 0 24px;
}
.pk-front .entry-header { margin-bottom: 22px; }
.pk-front .entry-title { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 10px; line-height: 1.2; }
.pk-front .entry-meta,
.pk-front .entry-footer { font-size: 13px; color: var(--pk-muted); }
.pk-front .entry-footer { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--pk-border); }
.pk-front .entry-content > :first-child { margin-top: 0; }
.pk-front .entry-content > :last-child { margin-bottom: 0; }
.pk-front .entry-content img,
.pk-front .post-thumbnail img {
	border-radius: var(--pk-radius-sm);
	max-width: 100%;
	height: auto;
}
.pk-front .post-thumbnail { margin: 0 0 20px; }

/* WP core pagination / post-navigation */
.pk-front .posts-navigation,
.pk-front .post-navigation,
.pk-front .pagination {
	margin-top: 28px; padding-top: 20px;
	border-top: 1px solid var(--pk-border);
	font-size: 14px;
}
.pk-front .nav-links { display: flex; gap: 16px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.pk-front .nav-links a,
.pk-front .page-numbers {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 8px 14px;
	background: #fff;
	border: 1px solid var(--pk-border);
	border-radius: 999px;
	color: var(--pk-text);
	text-decoration: none;
	font-weight: 500;
	transition: border-color .15s, color .15s, background .15s;
}
.pk-front .nav-links a:hover,
.pk-front .page-numbers:hover { border-color: var(--pk-green); color: var(--pk-green); }
.pk-front .page-numbers.current {
	background: var(--pk-green-dark); color: #fff; border-color: var(--pk-green-dark);
}
.pk-front .nav-subtitle {
	display: block; font-size: 11px; color: var(--pk-muted); text-transform: uppercase; letter-spacing: 0.06em;
}
.pk-front .nav-title { font-weight: 600; }

/* Widgets */
.pk-front .widget {
	background: #fff;
	border: 1px solid var(--pk-border);
	border-radius: var(--pk-radius);
	padding: 20px 24px;
	margin: 18px 0 0;
}
.pk-front .widget-title {
	font-size: 15px; font-weight: 700; margin: 0 0 12px;
	padding-bottom: 10px; border-bottom: 1px solid var(--pk-border);
}
.pk-front .widget ul { list-style: none; padding: 0; margin: 0; }
.pk-front .widget li { padding: 6px 0; font-size: 14px; border-bottom: 1px dashed var(--pk-border); }
.pk-front .widget li:last-child { border-bottom: 0; }

/* WP search form (used on search.php, 404.php, default pages) */
.pk-front .search-form {
	display: flex; gap: 8px; margin: 0 0 16px;
}
.pk-front .search-form label { flex: 1; }
.pk-front .search-form .search-field {
	width: 100%; padding: 12px 16px;
	border: 1px solid var(--pk-border); border-radius: 999px;
	font: inherit; background: #fff; outline: none;
	transition: border-color .15s;
}
.pk-front .search-form .search-field:focus { border-color: var(--pk-green); }
.pk-front .search-form .search-submit,
.pk-front .search-form button.search-submit,
.pk-front .search-form input.search-submit {
	padding: 12px 20px; border-radius: 999px; font-weight: 600; font-size: 14px;
	background: var(--pk-green-dark) !important; color: #fff !important;
	border: 1px solid var(--pk-green-dark) !important;
	cursor: pointer;
}
.pk-front .search-form .search-submit:hover {
	background: var(--pk-green) !important; color: #fff !important;
	border-color: var(--pk-green) !important;
}

/* Comments */
.pk-front .comments-area {
	max-width: var(--pk-container); margin: 0 auto; padding: 0 var(--pk-gutter) 48px;
}
.pk-front .comments-title, .pk-front .comment-reply-title { font-size: 22px; font-weight: 700; margin: 24px 0 16px; }
.pk-front .comment-list { list-style: none; padding: 0; margin: 0; }
.pk-front .comment-body {
	background: #fff; border: 1px solid var(--pk-border); border-radius: var(--pk-radius);
	padding: 18px 20px; margin: 0 0 12px;
}

/* Header on internal pages — solid, NOT overlayed. */
.pk-front:not(.home) .pk-header {
	position: sticky;
	background: #fff;
	border-bottom: 1px solid var(--pk-border);
}
.pk-front:not(.home) .pk-header--overlay {
	position: sticky;
	top: 0;
	background: #fff;
	border-bottom: 1px solid var(--pk-border);
}
.admin-bar.pk-front:not(.home) .pk-header--overlay { top: 32px; }

/* Responsive — header (подвал: assets/css/footer.css) */
@media (max-width: 1200px) {
	.pk-nav { display: none; }
}
@media (max-width: 900px) {
	.pk-front:not(.home) h1 { font-size: 30px; }
	.pk-front .page-title { font-size: 28px; }
	.pk-front .entry-title { font-size: 24px; }
	.pk-front .site-main { padding: 28px 20px 56px; }
	.pk-front .site-main > article { padding: 24px; }
}
/* Блок @media (max-width: 560px) для .pk-header__inner удалён при доводке
   переноса 2026-09-01: ниже 1200px десктопная строка шапки не выводится
   вовсе, её место занимает .pk-mhead (site-header.css). Правила были
   мёртвыми и противоречили эталонной геометрии. */

/* Spotly chat widget (third-party plugin) — pin launcher to bottom-right.
   The plugin leaves the collapsed-state .spotly-panel in normal flow inside
   #spotly-root (fixed, right:20px bottom:20px). That empty panel block takes
   ~460px of height, which pushed the visible launcher card up to the middle
   of the viewport. Hiding the panel until it's actually expanded drops the
   launcher back into the corner. */
#spotly-root .spotly-panel:not(.open) { display: none !important; }

/* ================================================================
   Меню вошедшего владельца в шапке (этап D).
   Заменяет кнопку «Войти»: аватар с инициалами и попап того же стиля,
   что попапы поиска.
   ================================================================ */
.pk-front .pk-usermenu { position: relative; }
.pk-front .pk-usermenu__btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 3px 10px 3px 3px;
	border-radius: 999px;
	border: 1px solid var(--pk-border);
	background: rgba(255, 255, 255, 0.92);
	color: var(--pk-muted);
	cursor: pointer;
}
.pk-front .pk-usermenu__btn[aria-expanded="true"] { border-color: var(--pk-green); }
.pk-front .pk-usermenu__initials {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--pk-green-soft);
	color: var(--pk-green-dark);
	font-size: 15px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.pk-front .pk-usermenu__panel {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 50;
	min-width: 250px;
	padding: 6px;
	background: #fff;
	border: 1px solid var(--pk-border);
	border-radius: 12px;
	box-shadow: var(--pk-shadow-lg);
}
.pk-front .pk-usermenu__head {
	padding: 10px 12px 12px;
	border-bottom: 1px solid var(--pk-border);
	margin-bottom: 6px;
}
.pk-front .pk-usermenu__head strong { display: block; font-size: 14px; font-weight: 700; color: var(--pk-text); }
.pk-front .pk-usermenu__head span { display: block; margin-top: 2px; font-size: 12px; color: var(--pk-muted); }
.pk-front .pk-usermenu__panel a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 11px 12px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 500;
	color: var(--pk-text);
}
.pk-front .pk-usermenu__panel a:hover { background: var(--pk-bg-soft); }
.pk-front .pk-usermenu__panel a.is-muted { color: var(--pk-muted); border-top: 1px solid var(--pk-border); margin-top: 6px; padding-top: 12px; border-radius: 0 0 10px 10px; }