/*
Theme Name: OKart School
Theme URI: https://okartschool.ru/
Description: Тема сайта школы картинга. Дочерняя к Twenty Twenty-Five: блочная разметка остаётся родительской, свои только палитра, шрифты и паттерны.
Author: seowm
Template: twentytwentyfive
Version: 0.1
Text Domain: okartschool
*/

/* Полноширинные секции стыкуются встык: зазор между блоками давал белые полоски
   на границах тёмных секций. */
.wp-site-blocks > *,
.wp-block-post-content > .alignfull,
.wp-block-post-content > .wp-block-cover.alignfull {
	margin-block-start: 0;
	margin-block-end: 0;
}
.wp-block-post-content > .alignfull + .alignfull { margin-top: 0; }

/* Фигуры, вырезанные из фотографии, пересекают границу секций: верх на светлой,
   шлемы и колени уже на тёмной. Линия стыка читается как предмет, на котором
   ребята сидят, а не как край картинки. */
.pb-cutout-host { overflow: visible; position: relative; z-index: 2; }
.pb-cutout { margin: 0 !important; }
.pb-cutout img {
	display: block;
	width: min(560px, 48%) !important;
	max-width: 560px;
	height: auto;
	margin: -30px 0 0 auto;
	/* сдвигаем ТОЛЬКО картинку: отрицательный отступ тянул за собой всю
	   соседнюю секцию и её заголовок уезжал под фигуры */
	transform: translateY(16%);
	position: relative;
	z-index: 3;
	filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .28));
}

/* соседние секции не должны перекрывать вылезающую фигуру */
.pb-cutout-host + .wp-block-group { position: relative; z-index: 1; }

@media (max-width: 781px) {
	/* на узком экране фигуры при 78% становятся неразличимо мелкими */
	.pb-cutout img { width: 100% !important; max-width: none; margin: 8px 0 0; transform: translateY(18%); }
}

/* Длинные слова в узких карточках рвались посреди слова — запрещаем разрыв. */
.wp-block-column h3,
.wp-block-column h2 { overflow-wrap: normal; word-break: normal; hyphens: manual; }

/* Второстепенный текст на тёмных секциях: contrast-2 (#5a6070) на почти чёрном
   фоне не читается — клиент поймал это на «Дальше картинг работает как фундамент».
   На тёмном подменяем его на приглушённый белый, иерархия сохраняется. */
.has-contrast-background-color .has-contrast-2-color,
[style*="#101048"] .has-contrast-2-color,
[style*="#12141a"] .has-contrast-2-color {
	color: rgba(255, 255, 255, .74) !important;
}

/* Форма заявки. Поля крупные — с телефона попадать пальцем в мелкое поле неудобно. */
.okart-form { max-width: 520px; margin-top: 1.2rem; }
.okart-form__row { display: block; margin-bottom: .7rem; }
.okart-form__row span { display: block; font-size: .95rem; margin-bottom: .3rem; }
.okart-form input[type="text"],
.okart-form input[type="tel"],
.okart-form input[type="number"] {
	/* без border-box поле шире контейнера ровно на свои отступы и рамку —
	   справа оно упиралось в край попапа, слева оставался нормальный отступ */
	box-sizing: border-box;
	width: 100%; max-width: 100%; padding: .6rem .8rem; font-size: 1rem;
	border: 1px solid var(--wp--preset--color--line, #e2e5ea); border-radius: 10px;
	background: #fff; color: var(--wp--preset--color--contrast, #12141a);
}
.okart-form input:focus { outline: 2px solid var(--wp--preset--color--accent-2, #f09000); outline-offset: 1px; }
.okart-form__check { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; margin: .4rem 0 1rem; }
.okart-form__check input { margin-top: .2rem; }
.okart-form__submit {
	display: inline-block; padding: .85rem 1.6rem; font-size: 1.05rem; font-weight: 700;
	border: 0; border-radius: 10px; cursor: pointer;
	background: var(--wp--preset--color--accent-2, #f09000); color: var(--wp--preset--color--contrast, #12141a);
}
.okart-form__submit:hover { filter: brightness(1.06); }
.okart-form__note { font-size: .85rem; opacity: .75; margin-top: .8rem; }
.okart-form__prog { font-size: .95rem; margin-bottom: .6rem; }
.okart-form__ok {
	padding: .8rem 1rem; border-radius: 10px; margin-bottom: 1rem;
	background: #e7f5e7; color: #12141a; font-weight: 600;
}
/* ловушка для ботов — человек её не видит */
.okart-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* На тёмной секции подписи полей должны читаться. */
[style*="#101048"] .okart-form__row span,
[style*="#101048"] .okart-form__check,
[style*="#101048"] .okart-form__note { color: #fff; }

/* Попап заявки */
.okart-modal { position: fixed; inset: 0; z-index: 999; display: flex; align-items: center; justify-content: center; }
.okart-modal[hidden] { display: none; }
.okart-modal__back { position: absolute; inset: 0; background: rgba(10, 10, 30, .6); }
.okart-modal__box {
	position: relative; z-index: 1; width: min(520px, calc(100vw - 2rem));
	max-height: calc(100vh - 2rem); overflow: auto;
	background: #fff; color: var(--wp--preset--color--contrast, #12141a);
	border-radius: 16px; padding: 1.6rem 1.6rem 1.2rem;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.okart-modal__title { margin: 0 2rem 0 0; font-size: 1.4rem; }
.okart-modal__x {
	position: absolute; top: .6rem; right: .8rem; border: 0; background: none;
	font-size: 1.8rem; line-height: 1; cursor: pointer; color: #5a6070;
}
.okart-modal .okart-form { margin-top: .8rem; max-width: 100%; }

/* Метка на выделенном тарифе: рамка без подписи читается как ошибка вёрстки. */
.okart-pick { position: relative; }
.okart-pick__badge {
	/* стикер поверх карточки: в потоке метка сдвигала заголовок и цену вниз,
	   и выделенная карточка переставала совпадать по сетке с соседними */
	position: absolute; top: -14px; left: 20px; z-index: 2;
	box-shadow: 0 4px 10px rgba(0, 0, 0, .18);
	display: inline-block; margin: 0; padding: .25rem .7rem;
	border-radius: 999px; font-size: .8rem; font-weight: 700; letter-spacing: .01em;
	background: var(--wp--preset--color--accent, #a80000); color: #fff;
}
.okart-card-btn {
	display: inline-block; margin-top: .9rem; padding: .6rem 1.1rem; cursor: pointer;
	border: 1px solid var(--wp--preset--color--brand, #1a1a78); border-radius: 10px;
	background: #fff; color: var(--wp--preset--color--brand, #1a1a78); font-weight: 700;
}
.okart-card-btn:hover { background: var(--wp--preset--color--brand, #1a1a78); color: #fff; }
.okart-modal__chosen:empty { display: none; }
.okart-modal__chosen { margin: .5rem 0 0; font-size: .95rem; font-weight: 700; color: var(--wp--preset--color--brand, #1a1a78); }

/* Кнопка «Записаться» прижата к низу карточки: описания разной длины,
   иначе кнопки скачут по высоте. */
.wp-block-column:has(> .okart-card-btn) { display: flex; flex-direction: column; }
.wp-block-column:has(> .okart-card-btn) .okart-card-btn { margin-top: auto; align-self: flex-start; }

/* Ссылки на тёмных секциях: синий по тёмно-синему не виден вовсе —
   «политика конфиденциальности» и адрес почты читались как пустое место. */
.has-contrast-background-color a:not(.wp-element-button),
[style*="#101048"] a:not(.wp-element-button),
[style*="#12141a"] a:not(.wp-element-button) {
	color: var(--wp--preset--color--accent-2, #f09000);
	text-decoration: underline;
}

/* Форма в секции заявки идёт по левому краю, как и весь текст секции. */
/* родительский constrained-макет центрирует детей через margin:auto — перебиваем */
.okart-form { margin-left: 0; margin-right: auto; }
.okart-modal .okart-form { margin-left: auto !important; margin-right: auto !important; }

/* Форма в колонке справа: карточка на тёмном фоне, чтобы поля не висели в воздухе. */
.okart-form-col {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 14px;
	padding: 1.4rem 1.4rem 1.1rem;
}
.okart-form-col .okart-form { max-width: none; margin-top: 0; }

/* Меню в шапке. Пункты — обычные ссылки: блочная тема не даёт места под меню,
   а заводить конструктор ради пяти пунктов незачем. */
.okart-nav { gap: .85rem; }
.okart-nav p { margin: 0; font-size: .92rem; font-weight: 600; white-space: nowrap; }
.okart-nav a { color: var(--wp--preset--color--contrast, #12141a); text-decoration: none; }
.okart-nav a:hover { color: var(--wp--preset--color--brand, #1a1a78); text-decoration: underline; }
@media (max-width: 900px) { .okart-nav { gap: .7rem; } .okart-nav p { font-size: .9rem; } }
/* Меню отдельной строкой под логотипом: в одну строку с телефоном и кнопкой
   семь пунктов не помещаются, и телефон срывался вниз. */
.okart-navrow { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--wp--preset--color--line, #e2e5ea); }