/*
Theme Name: Спектр — testbesplatno.ru
Description: Тема сайта онлайн-тестов. Оформление задают tokens.css, site.css и marks.css из дизайн-пакета; здесь — стыковка с WordPress и движком тестов.
Author: Редакция testbesplatno.ru
Version: 0.2.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.0
Text Domain: testru-spektr
*/

/* ─────────────────────────────────────────────────────────────
   1. Стыковка с WordPress

   Пресеты палитры WP печатаются инлайном ПОСЛЕ стилей темы, поэтому
   переопределяем их через :root:root — при равной специфичности
   побеждают они. Значения берём из токенов дизайн-пакета, чтобы блоки
   редактора жили в той же палитре, что и наша разметка.
   ───────────────────────────────────────────────────────────── */
:root:root {
	--wp--preset--color--ground: var(--tb-paper);
	--wp--preset--color--card: var(--tb-card);
	--wp--preset--color--ink: var(--tb-ink);
	--wp--preset--color--muted: var(--tb-mute);
	--wp--preset--color--hair: var(--tb-hair);
	--wp--preset--color--eros: var(--tb-relations);
	--wp--preset--color--fun: var(--tb-fun);
	--wp--preset--color--health: var(--tb-health);
	--wp--preset--color--mind: var(--tb-intellect);
	--wp--preset--color--person: var(--tb-personality);
	--wp--preset--color--psyche: var(--tb-psyche);
}

body,
:root :where(body) {
	background: var(--tb-paper);
	color: var(--tb-ink);
}

/* Шапка и подвал рисуются нашей разметкой во всю ширину окна, поэтому
   контейнеры блочной темы вокруг них не нужны. */
.wp-site-blocks > header.wp-block-group,
.wp-site-blocks > footer.wp-block-group {
	padding: 0;
	max-width: none;
}

/* Полосу контента задаёт .tb-wrap; констрейнт-контейнер WP её дублирует. */
main.tb-wrap > * {
	max-width: none;
}

/* Заголовок страницы блочной темы приводим к нашей типографике. */
.wp-block-post-title {
	font-family: var(--tb-font-head);
	font-weight: 800;
	font-size: var(--tb-fs-h1);
	line-height: var(--tb-lh-h1);
	letter-spacing: var(--tb-tracking-tight);
	text-wrap: balance;
	margin: 0;
}

/* ─────────────────────────────────────────────────────────────
   2. Текст посадочных и статей

   Раздел рисует шорткод [testru_section]: вступление до списка тестов,
   длинная часть под ним. Ширину строки держим по требованию макета.
   ───────────────────────────────────────────────────────────── */
.testru-intro {
	max-width: 74ch;
	display: flex;
	flex-direction: column;
	gap: var(--tb-sp-3);
	color: var(--tb-mute);
	font-size: var(--tb-fs-lead);
	line-height: var(--tb-lh-lead);
}

.testru-longread {
	margin-top: var(--tb-sp-8);
	max-width: 74ch;
	display: flex;
	flex-direction: column;
	gap: var(--tb-sp-3);
}

.testru-longread h2 {
	margin-top: var(--tb-sp-4);
}

.testru-longread p {
	margin: 0;
}

.testru-longread strong {
	font-weight: 600;
	color: var(--tb-ink);
}

/* Текстовые страницы: строка не длиннее 70 символов. */
.page .wp-block-post-content {
	max-width: 68ch;
	display: flex;
	flex-direction: column;
	gap: var(--tb-sp-3);
}

.page .wp-block-post-content h2 {
	margin-top: var(--tb-sp-5);
}

/* ─────────────────────────────────────────────────────────────
   3. Движок теста

   Разметку рисует assets/test.js, менять её ради оформления дороже,
   чем привести классы движка к виду дизайн-пакета здесь.
   ───────────────────────────────────────────────────────────── */
.testru {
	max-width: 860px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: var(--tb-sp-4);
}

.testru__progress {
	height: 6px;
	border-radius: 999px;
	background: var(--tb-paper);
	overflow: hidden;
	border: 0;
}

.testru__progress .testru__fill,
.testru__progress > span,
.testru__progress > div {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--tb-tone), var(--tb-tone-2));
	transition: width .24s var(--tb-ease);
}

.testru__q {
	background: var(--tb-card);
	border: 1px solid var(--tb-hair);
	border-radius: var(--tb-radius);
	padding: var(--tb-sp-5) 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	font-family: var(--tb-font-head);
	font-weight: 600;
	font-size: 1.4375rem;
	line-height: 1.25;
	letter-spacing: var(--tb-tracking-head);
}

.testru__num {
	font-family: var(--tb-font-mono);
	font-weight: 400;
	font-size: var(--tb-fs-meta);
	color: var(--tb-mute);
	letter-spacing: 0;
}

.testru__opts {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	font-family: var(--tb-font-body);
	font-weight: 400;
	font-size: 1rem;
	letter-spacing: 0;
	line-height: 1.4;
}

.testru__opts button,
.testru__opts label {
	min-height: var(--tb-tap);
	display: flex;
	align-items: center;
	gap: .875rem;
	padding: .5rem 1.125rem;
	border: 1px solid var(--tb-hair);
	border-radius: var(--tb-radius-sm);
	background: var(--tb-card);
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color .12s, background .12s;
}

.testru__opts button:hover,
.testru__opts label:hover {
	border-color: var(--tb-tone);
}

.testru__opts button[aria-pressed="true"],
.testru__opts button.is-active,
.testru__opts label.is-active {
	border-color: var(--tb-tone);
	background: var(--tb-selected-wash);
	font-weight: 500;
}

.testru__next,
.testru__back,
.testru__start,
.testru__save {
	min-height: var(--tb-tap);
	padding-inline: 1.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	border: 1px solid transparent;
	border-radius: var(--tb-radius-sm);
	background: var(--tb-ink);
	color: var(--tb-paper);
	font-family: var(--tb-font-head);
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	align-self: flex-start;
}

.testru__back {
	background: var(--tb-card);
	color: var(--tb-ink);
	border-color: var(--tb-hair);
}

.testru__next[disabled],
.testru__start[disabled] {
	background: var(--tb-hair);
	color: var(--tb-mute);
	pointer-events: none;
}

.testru__nav {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
}

.testru__result {
	background: var(--tb-card);
	border: 1px solid var(--tb-hair);
	border-radius: var(--tb-radius);
	box-shadow: var(--tb-shadow);
	padding: 2rem 2.125rem;
	display: flex;
	flex-direction: column;
	gap: var(--tb-sp-3);
	position: relative;
	overflow: hidden;
}

/* Лента тона над результатом — та же сигнатура, что на обложках. */
.testru__result::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 8px;
	background: linear-gradient(90deg, var(--tb-tone), var(--tb-tone-2));
}

.testru__result > :first-child {
	margin-top: .5rem;
}

.testru__bars {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.625rem 2.125rem;
	margin-top: var(--tb-sp-3);
}

.testru__bar {
	/* Движок рисует три элемента подряд: подпись, дорожка, число.
	   Сетка ставит подпись и число в строку, дорожку — под них. */
	display: grid;
	grid-template-columns: 1fr auto;
	gap: .4rem .75rem;
	align-items: baseline;
	font-size: var(--tb-fs-ui);
	font-weight: 500;
}

.testru__bar > span:first-child {
	min-width: 0;
	order: 1;
}

/* Число стоит в строке с подписью, дорожка — под ними. */
.testru__bar .testru__num {
	order: 2;
}

.testru__bar .testru__track {
	order: 3;
}

.testru__track {
	grid-column: 1 / -1;
	display: block;
	width: 100%;
	height: 12px;
	border-radius: 999px;
	background: var(--tb-hair);
	overflow: hidden;
}

.testru__fill {
	display: block;
	height: 100%;
	background: var(--tb-tone);
}

.testru__bar .testru__num {
	justify-self: end;
}

/* Радар: подписи по краям обрезались о край карточки. */
.testru__radar {
	max-width: 520px;
	margin-inline: auto;
	overflow: visible;
}

.testru__radar svg {
	overflow: visible;
}

.testru__sources,
.testru__facts,
.testru__learn,
.testru__outcomes,
.testru__faq {
	background: var(--tb-card);
	border: 1px solid var(--tb-hair);
	border-radius: var(--tb-radius);
	padding: 1.625rem 1.75rem;
	max-width: 74ch;
}

.testru__sources a {
	color: var(--tb-intellect);
}

.testru__sources .testru__doi,
.testru__facts dt {
	font-family: var(--tb-font-mono);
	font-size: var(--tb-fs-meta);
	color: var(--tb-mute);
}

.testru__disclaimer,
.testru-crisis {
	max-width: 82ch;
}

.testru__disclaimer {
	border: 1px dashed var(--tb-hair);
	border-radius: var(--tb-radius);
	padding: 1.375rem 1.625rem;
	font-size: var(--tb-fs-ui);
	line-height: 1.65;
	color: var(--tb-mute);
}

/* Кризисный блок: заметный, но не алерт. Никакой анимации. */
.testru-crisis {
	background: var(--tb-card);
	border: 1px solid var(--tb-hair);
	border-left: 4px solid var(--tb-psyche);
	border-radius: var(--tb-radius);
	padding: 1.5rem 1.75rem;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.testru-crisis a {
	font-family: var(--tb-font-mono);
	font-size: 1.375rem;
	color: var(--tb-ink);
}

.testru__chips {
	display: flex;
	gap: .625rem;
	flex-wrap: wrap;
}

/* ─────────────────────────────────────────────────────────────
   4. Мелочи страниц
   ───────────────────────────────────────────────────────────── */
.testru-samples__art {
	display: block;
}

.testru-samples__art svg {
	width: 100%;
	height: 96px;
}

.testru-byline {
	display: flex;
	align-items: center;
	gap: .75rem;
	font-size: var(--tb-fs-ui);
	color: var(--tb-mute);
}

.testru-byline__photo {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}

@media (max-width: 640px) {
	.testru__bars {
		grid-template-columns: 1fr;
	}

	.testru__q {
		padding: 1.125rem;
		font-size: 1.25rem;
	}

	.testru__result {
		padding: 1.25rem;
	}
}

/* ─────────────────────────────────────────────────────────────
   5. Строчные обёртки внутри ссылок

   wpautop рвёт <div> внутри <a>: карточка распадается на два узла и
   теряет обложку. Поэтому тело карточки и строки результата —
   строчные элементы, а раскладку им задаём здесь.
   ───────────────────────────────────────────────────────────── */
.tb-card__body,
.tb-row__body {
	display: flex;
	flex-direction: column;
}

.tb-row__body {
	gap: .25rem;
	min-width: 0;
}

/* Крошки движка приводим к виду дизайн-пакета. */
.testru-crumbs {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: .8125rem;
	color: var(--tb-mute);
	margin-bottom: .75rem;
}

.testru-crumbs a {
	color: inherit;
}

/* ─────────────────────────────────────────────────────────────
   6. Телефон: шапка и бургер-панель

   Поиск в шапке на узком экране не помещается и выталкивает бургер
   за край окна — на телефоне поиск живёт на первом экране и в панели.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
	.tb-header__row .tb-search--sm {
		display: none;
	}

	.tb-burger {
		margin-left: auto;
	}
}

/* Панель разделов: раскрывается бургером, без внешних запросов. */
.tb-menu {
	display: none;
	border-top: 1px solid var(--tb-hair);
	background: var(--tb-card);
	padding: var(--tb-sp-3) var(--tb-gutter) var(--tb-sp-4);
	flex-direction: column;
	gap: .25rem;
}

.tb-menu[data-open] {
	display: flex;
}

.tb-menu a {
	display: flex;
	align-items: center;
	gap: .625rem;
	min-height: var(--tb-hit);
	font-size: 1rem;
	font-weight: 500;
}

@media (min-width: 641px) {
	.tb-menu {
		display: none !important;
	}
}

/* Плиток разделов может быть меньше шести — тогда они растягиваются
   на всю полосу, а не жмутся к левому краю. */
.tb-grid--6 {
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}