/* Адаптив: рівень теми.
   Вантажиться ПІСЛЯ сторінкового CSS, тож перекриває його без !important.

   Тут лежить лише те, що стосується всіх сторінок одразу. Правила окремої
   сторінки лишаються у своєму файлі — інакше цей швидко перетвориться на
   звалище винятків. */

/* ── 1. Широкі екрани: хром і контент по одній сітці ──
   Тіла сторінок обмежені контейнером 1200px, а хедер із футером були
   `max-width:none` з полями 10px. На 1440 це ще читалось, на 1920 логотип
   уже стояв у самому кутку, а на 2560 меню відʼїжджало від нього на пів
   екрана. Прив'язуємо хром до тієї самої сітки. */
.wlh-in,
.wlf-in {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

/* Поля хрому ростуть разом із полями контенту: до 1220px контент уже впритул
   до країв, тож і хром має відступати так само. */
@media (min-width: 1240px) {
	.wlh-in { padding-left: 0; padding-right: 0; }
	.wlf { padding-left: 20px; padding-right: 20px; }
}

/* ── 2. Дуже широкі: не даємо рядку тексту розтягуватись ──
   Понад 1600px браузер отримує зайву висоту вікна, а не ширину рядка. */
@media (min-width: 1600px) {
	.wlf-word { font-size: clamp(70px, 15vw, 300px); }
}

/* ── 3. Планшет у портреті ──
   На 768–900 меню вже під бургером, але сітки сторінок здебільшого ще
   тримають дві-три колонки. Нічого не ламаємо — лише прибираємо залипання
   хедера, коли висоти екрана мало (клавіатура на планшеті зʼїдає пів вікна). */
@media (max-height: 480px) {
	.wlh { position: static; }
}

/* ── 4. Вузькі телефони ──
   Найнижчий брейкпоінт у сторінкових CSS був 460px, а найпоширеніші реальні
   ширини — 360, 390, 393, 412, 430. Тобто весь основний мобільний трафік
   отримував правила, писані під 600–640. */
@media (max-width: 430px) {
	:root { --pad: 14px; }
}

/* ── 5. Дуже вузькі (320–360): iPhone SE та бюджетні Android ── */
@media (max-width: 360px) {
	:root { --pad: 12px; }
}

/* ── 6. Нічого не має вилазити за правий край ──
   Довгі слова, URL без пробілів і формули в тексті — найчастіша причина
   горизонтального скролу на телефоні. Ламаємо їх, а не ховаємо скрол:
   `overflow-x:hidden` на body прибирає симптом і заразом ламає
   `position:sticky` у частині браузерів. */
#wl-main p,
#wl-main li,
#wl-main h1,
#wl-main h2,
#wl-main h3,
#wl-main h4,
#wl-main td,
#wl-main th {
	overflow-wrap: break-word;
}

/* Таблиці й код прокручуються всередині себе, а не тягнуть сторінку.

   🔴 `display:block` на самій таблиці ламає її розкладку: діти лишаються
   рядками, тож усередині блоку народжується анонімна таблиця, яка стискається
   ПО ВМІСТУ. Ширина 100% при цьому стосується блоку, а не сітки — і праворуч
   лишається мертва пляма (на `/internet-magazin-horoshop/` це було 410 px із
   1200: лінії рядків і фон шапки обривались на середині картки).
   Заміряно 14.09.2026 на 5 сторінках із таблицями: `display:table` прибирає
   пляму скрізь і ніде не дає горизонтального скролу сторінки.

   Прокрутку тримає обгортка (`*-tablewrap` з `overflow-x:auto`), а там, де
   таблиця стоїть без обгортки — у статтях блогу — вузькі екрани лишаємо як
   було: там кращий скрол, ніж зіжмаканий у 360 px рядок. */
#wl-main table {
	display: table;
	width: 100%;
	max-width: 100%;
}
@media (max-width: 600px) {
	#wl-main :not([class*="tablewrap"]) > table {
		display: block;
		overflow-x: auto;
		width: max-content;
		min-width: 100%;
		-webkit-overflow-scrolling: touch;
	}
}
#wl-main pre {
	max-width: 100%;
	overflow-x: auto;
}

/* Картинки й вбудовані рамки не ширші за контейнер. */
#wl-main img,
#wl-main video,
#wl-main iframe,
#wl-main svg {
	max-width: 100%;
}
#wl-main iframe {
	height: auto;
	aspect-ratio: 16 / 9;
}

/* ── 7. Зони натискання ──
   Заміряно на 224 комбінаціях сторінок і ширин. Норма WCAG 2.5.8 — 24×24
   CSS-пікселі; Lighthouse рахує комфортною зону від 48.

   Логотипи ростимо НЕ самі по собі, а лише зоною натискання: висота
   хедера зашита в --hdr і в scroll-margin сторінок, тож збільшений
   логотип поїхав би по всій верстці.
   Заміряно: .wlh-logo 143×34, .wlf-logo 97×36. */
.wlh-logo,
.wlf-logo {
	position: relative;
}
.wlh-logo::after,
.wlf-logo::after {
	content: "";
	position: absolute;
	inset: -7px -8px;
}

/* Перемикач мов: 40×30 у панелі. Тут ростимо самі пігулки — панель
   вертикальна, місця під нею вдосталь, нічого не зсунеться. */
.wlh-plang a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/* 🔴 Пошта в мобільній панелі — 120×21, це не проходить навіть мінімум
   WCAG. Панель вертикальна, тож просто даємо їй вертикальні поля. */
.wlh-pmail {
	display: inline-block;
	padding-block: 10px;
}

/* Дрібні текстові посилання в картках: .site 73×17, .more 244×20.
   Накладку `::after` тут ставити не можна — вона перекрила б заголовок
   картки, який теж посилання, і палець потрапляв би не туди. Тому
   ростимо полями, а від'ємний margin лишає елемент на місці.
   Тільки для сенсорних: на миші 17px висоти проблеми не створюють. */
@media (hover: none) {
	#wl-main a.site {
		padding-block: 5px;
		margin-top: -3px;
	}
	#wl-main a.more {
		padding-block: 4px;
	}
}

/* ── 8. Дрібний текст ──
   Заміряно: .k, .tag, .wlp-tag — 11px. На телефоні це вже межа читаного;
   на десктопі лишаємо як є, там відстань до екрана інша. */
@media (max-width: 600px) {
	#wl-main .k,
	#wl-main .tag,
	#wl-main .wlp-tag {
		font-size: 12px;
	}
}

/* ── 9. Вирізи й заокруглення екранів ──
   На iPhone у горизонтальній орієнтації віджет звʼязку опинявся під
   смугою жестів, а на пристроях із вирізом — під ним. */
.wlcw {
	right: max(20px, env(safe-area-inset-right));
	bottom: max(20px, env(safe-area-inset-bottom));
}
@media (max-width: 600px) {
	.wlcw {
		right: max(14px, env(safe-area-inset-right));
		bottom: max(14px, env(safe-area-inset-bottom));
	}
}
.wlop-back {
	padding-bottom: max(24px, env(safe-area-inset-bottom));
}
@media (max-width: 520px) {
	.wlop {
		padding-bottom: max(26px, env(safe-area-inset-bottom));
	}
	.wlop-back {
		padding-bottom: 0;
	}
}

/* ── 10. Фолбек для dvh ──
   `100dvh` не знають Safari до 15.4 і Firefox до 101. Там уся декларація
   стає невалідною, max-height не застосовується — і попап на телефоні
   виростає вище за екран, а кнопки надсилання не видно. Тому спершу
   те саме у vh, і лише потім dvh: браузер візьме останнє зрозуміле. */
.wlop {
	max-height: calc(100vh - 48px);
	max-height: calc(100dvh - 48px);
}
@media (max-width: 520px) {
	.wlop {
		max-height: 92vh;
		max-height: 92dvh;
	}
}

/* ── 11. Горизонтальна орієнтація телефона ──
   Висота вікна близько 380px: попап на весь екран лишає надто мало місця,
   тож дозволяємо йому прокручуватись, а не стискати поля. */
@media (max-height: 520px) and (orientation: landscape) {
	.wlop-back {
		align-items: flex-start;
		padding: 12px;
		overflow-y: auto;
	}
	.wlop {
		max-height: none;
		padding: 22px 20px 20px;
	}
	.wlh-panel {
		overflow-y: auto;
	}
}

/* ── 11. Віджет звʼязку над липкою панеллю ──
   Панель (parts/mobile-cta.php) займає низ екрана на мобільному, тож
   кругла кнопка віджета має піднятись, інакше вони перекриються.
   Правило стоїть ПІСЛЯ секції 9 навмисно: там bottom уже заданий, і
   переважити його має порядок, а не штучна специфічність. */
@media (max-width: 700px) {
	.wlcw {
		bottom: calc(max(14px, env(safe-area-inset-bottom)) + 74px);
	}
}
/* Низ сторінки не має ховатись під панеллю. */
@media (max-width: 700px) {
	body {
		padding-bottom: calc(62px + env(safe-area-inset-bottom));
	}
}