/*
Theme Name: Panel Base
Theme URI: https://roxy.agency/
Author: Roxy Agency
Author URI: https://roxy.agency/
Description: Мінімальна класична тема під субдомен клієнтського кабінету. Нічого не оформлює: дає чисту сторінку на всю ширину і коректно підключає wp_head() та wp_footer(), щоб плагін «Клієнтська панель» міг намалювати кабінет своїми стилями.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: panel-base
Requires at least: 6.0
Requires PHP: 7.4
Tags: full-width-template
*/

/* ==========================================================================
   Мінімальний ресет.
   Тільки те, без чого сітка кабінету поїде: модель коробки, нульові
   відступи html/body і повна висота екрана під бокове меню панелі.
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box; /* плагін рахує ширини з урахуванням padding */
}

html,
body {
	margin: 0;
	padding: 0;
}

body {
	min-height: 100vh; /* темне бокове меню кабінету тягнеться на весь екран */
}

/* Правка: адмін-бар додає html { margin-top: 32px !important }, і 100vh разом
   з ним дає постійну вертикальну прокрутку на кожній сторінці для залогінених.
   Віднімаємо його висоту. Клас .admin-bar на body ставить саме ядро. */
body.admin-bar {
	min-height: calc(100vh - 32px);
}

/* Нижче 783px ядро малює адмін-бар вищим — 46px. */
@media screen and (max-width: 782px) {
	body.admin-bar {
		min-height: calc(100vh - 46px);
	}
}

/* Тема свідомо НЕ задає font-family, color і background для вмісту:
   уся типографіка й кольори приходять з kp-design.css та kp-frontend.css.
   Якщо колись знадобиться прибрати біле блимання до завантаження стилів
   плагіна, сюди додається один рядок background-color на body. */

/* ==========================================================================
   Ширина контенту.
   Кабінет займає весь екран, тому жодних max-width і центрувальних
   контейнерів тут немає і бути не повинно.
   ========================================================================== */

.pb-content {
	width: 100%;
}

/* ==========================================================================
   Медіа.
   Щоб випадкова картинка в контенті не розпирала сторінку по горизонталі.
   svg та iframe тут свідомо НЕ перелічені: height:auto перебиває HTML-атрибут
   height (CSS сильніший за презентаційний атрибут) і схлопнув би iframe
   плагіна з height="600" та інлайнові іконки до дефолтних 150px.
   ========================================================================== */

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

/* ==========================================================================
   Службові класи WordPress.
   Мінімум, щоб ядро й плагіни не зламались.
   ========================================================================== */

/* Текст для скрінрідерів: прибираємо з екрана, але лишаємо в потоці. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%); /* сучасна заміна застарілого clip */
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	position: absolute !important; /* !important, бо ядро й плагіни часто перебивають position у своїх стилях */
	word-wrap: normal !important;
}

/* Показуємо посилання «Перейти до вмісту» при фокусі з клавіатури. */
.screen-reader-text:focus {
	clip: auto !important;
	clip-path: none;
	height: auto;
	width: auto;
	display: block;
	top: 5px;
	left: 5px;
	z-index: 100000; /* вище за все, що малює плагін */
	padding: 15px 23px 14px;
	background-color: #fff;
	color: #000;
	font-size: 14px;
	line-height: normal;
	text-decoration: none;
}

/* Широке і повне вирівнювання блоків. Оскільки контент і так на всю
   ширину, обидва класи просто розтягуються без від'ємних відступів. */
.alignwide,
.alignfull {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* ==========================================================================
   Сторінка 404.
   Єдине місце, де тема щось оформлює: сюди плагін не приходить,
   і без цих правил текст висів би в лівому верхньому куті.
   ========================================================================== */

.pb-404 {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 24px;
	/* Шрифт задаємо тільки тут, бо сторінка 404 живе поза кабінетом
	   і успадковувати їй нема від чого. */
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	text-align: center;
}

.pb-404__title {
	margin: 0 0 8px;
	font-size: 48px;
	line-height: 1.1;
	font-weight: 600;
}

.pb-404__text {
	margin: 0 0 24px;
	font-size: 16px;
	line-height: 1.5;
}

.pb-404__link {
	display: inline-block;
	padding: 12px 24px;
	border-radius: 8px;
	background: #111;
	color: #fff;
	font-size: 15px;
	text-decoration: none;
}

.pb-404__link:hover,
.pb-404__link:focus {
	background: #333;
}