/* =========================================================
   База: reset, типографіка, контейнер, утиліти.
   Жодних компонентів — вони лежать у components/<name>/<name>.css
   ========================================================= */

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

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	/* Липка шапка змінює висоту при скролі. Браузерна прив'язка прокрутки
	   компенсує цю зміну, зсуваючи scrollY назад за поріг — шапка починає
	   стискатися й розтискатися по колу (видиме миготіння при скролі вгору).
	   Вимикаємо прив'язку для документа. */
	overflow-anchor: none;
	background: var(--phm-beige);
	font-family: var(--phm-font-body);
	font-size: var(--phm-body);
	line-height: var(--phm-body-lh);
	color: var(--phm-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;            /* ТЗ §7: нуль горизонтального скролу */
}

/* Довгі німецькі складені слова (ТЗ §7).
   У макеті переносів немає, тому за замовчуванням їх не робимо — лише
   страхуємось від виїзду за межі блока. Автоперенос вмикаємо точково
   там, де слово фізично не влазить (див. .phm-cards__title,
   .phm-chips__label). Глобально перемкнути можна одним токеном нижче. */
body {
	hyphens: var(--phm-hyphens, manual);
	-webkit-hyphens: var(--phm-hyphens, manual);
	overflow-wrap: break-word;

	/* Діє лише там, де перенос увімкнено (hyphens: auto), тож глобально
	   безпечно. Забороняє відривати куций хвіст: браузер сам розбивав
	   «Muttermalkontrol-le» і «Hautbildverbesse-rung» — обидва рази
	   в останню можливу точку. Мінімум 4 літери до дефіса й 5 після
	   зсуває розрив ближче до межі складеного слова. */
	hyphenate-limit-chars: 10 4 5;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--phm-primary-dark);
	text-decoration: none;
	transition: color var(--phm-dur) var(--phm-ease);
}

a:hover {
	color: var(--phm-primary);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--phm-font-heading);
	font-weight: 500;
	color: var(--phm-primary-dark);
	margin: 0;
}

h1 { font-size: var(--phm-h1); line-height: 1.18; }
h2 { font-size: var(--phm-h2); line-height: 1.3; }
h3 { font-size: var(--phm-h3); line-height: 1.35; }

p {
	margin: 0;
}

ul, ol {
	margin: 0;
	padding: 0;
}

button {
	font: inherit;
	color: inherit;
}

/* ---------- Контейнер і секції ---------- */

.phm-container {
	width: 100%;
	max-width: var(--phm-container);
	margin-inline: auto;
	padding-inline: var(--phm-gutter);
}

.phm-section {
	padding-block: var(--phm-section-y);
}

.phm-section--beige { background: var(--phm-beige); }
.phm-section--white { background: var(--phm-white); }
.phm-section--dark  { background: var(--phm-primary-dark); }

/* ---------- Типографічні утиліти ---------- */

.phm-eyebrow {
	font-family: var(--phm-font-body);
	font-weight: 500;
	text-transform: uppercase;
	font-size: var(--phm-eyebrow-size);
	letter-spacing: var(--phm-eyebrow-ls);
	line-height: 1.4;
	color: var(--phm-primary);
}

.phm-lead {
	font-size: var(--phm-body);
	line-height: var(--phm-body-lh);
	color: var(--phm-text);
	max-width: var(--phm-measure);
}

/* ---------- Доступність ---------- */

.phm-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.phm-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
}

.phm-skip-link:focus {
	left: 16px;
	top: 16px;
	background: var(--phm-white);
	color: var(--phm-primary-dark);
	padding: 12px 20px;
	border-radius: var(--phm-radius-btn);
}

:focus-visible {
	outline: 2px solid var(--phm-primary);
	outline-offset: 3px;
}

/* Тач-таргети ≥44px (ТЗ §7) */
@media (pointer: coarse) {
	a, button {
		min-height: 44px;
	}
}

/* Місце під липку мобільну CTA-панель */
@media (max-width: 767px) {
	body {
		padding-bottom: 68px;
	}
}

/* Блокування скролу, коли відкрите мобільне меню */
.phm-scroll-locked,
.phm-scroll-locked body {
	overflow: hidden;
}

/* ---------- Прості списки записів (блог/архіви) ---------- */

.phm-entry-list {
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.phm-entry-list__title {
	font-size: var(--phm-h3);
	margin-bottom: 12px;
}

/* ---------- 404 ---------- */

.phm-404__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	text-align: left;
}

.phm-404__title {
	margin-top: 8px;
}

.phm-404__actions {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 16px;
}