/*
 * ID Studio — надбудова над theme.json.
 * Тільки те, чого не вміє theme.json: шапка, hero, дрібна типографіка, motion.
 */

/* ---------- Шапка ---------- */

.id-site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: color-mix( in srgb, var( --wp--preset--color--base ) 88%, transparent );
	-webkit-backdrop-filter: blur( 10px );
	backdrop-filter: blur( 10px );
	border-bottom: 1px solid color-mix( in srgb, var( --wp--preset--color--contrast ) 10%, transparent );
}

/* Шапка sticky і має лежати щільно на контенті. WP додає між <header> і <main>
 * стандартний block-gap – прибираємо, щоб під шапкою не було смуги тла. */
.wp-site-blocks > main {
	margin-block-start: 0;
}

.id-site-header .wp-block-navigation a {
	text-decoration: none;
}

.id-site-header .wp-block-navigation a:hover,
.id-site-header .wp-block-navigation a:focus-visible {
	color: var( --wp--preset--color--primary );
}

/* Компактніша CTA-кнопка в шапці */
.id-header-cta .wp-block-button__link {
	padding: 0.9em 1.7em;
}

/* ---------- Hero ---------- */

.id-hero {
	position: relative;
	min-height: min( 92svh, 60rem );
	display: flex;
	align-items: flex-end;
	/* Заголовок – акцент hero: тепле золото в тон палітрі, яке тримає увагу на
	 * собі й не зливається з фото. Значення задані під кожну тему окремо, бо
	 * похідні від приглушеного primary виходили блідими: у світлій темі фото
	 * світле, тож потрібен тон світліший і насиченіший за нього, а в темній
	 * (де hero інвертується) – навпаки, глибока бронза.
	 * Тінь у протифазі до тексту – тримає читабельність поверх фото. */
	--id-hero-title: #ecd6a4;
	--id-hero-title-shadow: 0 2px 18px rgba( 20, 18, 14, 0.38 );
	/* Ліва межа контентної сітки – та сама, за якою вирівняні нижні секції. */
	--id-content-left: max(
		var( --wp--style--root--padding-left, 1.25rem ),
		calc( ( 100% - var( --wp--style--global--wide-size, 1400px ) ) / 2 )
	);
	/* Повітря між краєм скла і текстом. */
	--id-glass-pad: clamp( 1.25rem, 2.5vw, 2.5rem );
	/* Обрізає зовнішню тінь скла, щоб вона не лягала на сусідні секції. */
	overflow: clip;
}

/* Темна тема: заголовок стає бронзою, тінь світлою. Саме скло (тінт contrast)
 * адаптується автоматично — у темній стає світлим frosted. */
:root[data-theme='dark'] .id-hero {
	--id-hero-title: #4a3617;
	--id-hero-title-shadow: 0 2px 18px rgba( 237, 232, 223, 0.42 );
}

.id-hero__title {
	max-width: 14em;
	text-wrap: balance;
	color: var( --id-hero-title );
	text-shadow: var( --id-hero-title-shadow );
}

.id-hero .wp-block-cover__inner-container {
	padding-bottom: var( --wp--preset--spacing--60 );
}

/* Скляна підкладка під текстом hero: розмиває фото за собою, щоб текст читався
 * впевненіше. contrast інвертується разом із темою, тож у світлій темі панель
 * ледь затемнює фон, а в темній – ледь висвітлює. */
/* Скляна смуга під текстом hero: на всю висоту секції, ліва межа збігається з
 * початком контенту (та сама сітка, що й у нижніх секціях), ширина – по
 * найдовшому рядку з невеликим запасом. Ледь розмиває фото за собою, щоб текст
 * читався впевненіше; прозорість наростає згори вниз. contrast інвертується
 * разом із темою: у світлій ледь затемнює, у темній ледь висвітлює.
 * Зроблено окремим шаром на cover, а не обгорткою тексту, бо дітям
 * constrained-контейнера core задає центрувальні auto-марджини через
 * !important, і смугу не вдалося б притиснути до лівого краю сітки. */
.id-hero::after {
	content: '';
	position: absolute;
	inset-block: 0;
	/* Ліва межа контенту (та сама сітка, що й у нижніх секціях), зсунута ліворуч
	 * на --id-glass-pad, щоб текст усередині скла мав повітря з боків. */
	left: max( 0px, calc( var( --id-content-left ) - var( --id-glass-pad ) ) );
	width: min( calc( 63rem + 2 * var( --id-glass-pad ) ), 100% );
	pointer-events: none;
	/* Класичне матове скло: легкий градієнтний тінт (contrast, адаптується під
	 * тему) + помірне розмиття. Права межа чітка — видно, де закінчується блок.
	 * Єдиний motion-hook — opacity для плавної появи; у статиці скло як в
	 * оригіналі теми. */
	opacity: var( --id-glass-op, 1 );
	background: linear-gradient(
		to bottom,
		color-mix( in srgb, var( --wp--preset--color--contrast ) 2%, transparent ),
		color-mix( in srgb, var( --wp--preset--color--contrast ) 13%, transparent )
	);
	-webkit-backdrop-filter: blur( var( --id-glass-blur, 5px ) );
	backdrop-filter: blur( var( --id-glass-blur, 5px ) );
	/* Світіння кромки: тонкі світлі відблиски по боках (фіксовано світлі, тож
	 * читаються як скляна грань в обох темах і не стирчать, як темні канти).
	 * Плюс легка бічна тінь — делікатний об'єм, не важкий. */
	box-shadow:
		inset 1px 0 0 rgba( 255, 255, 255, 0.22 ),
		inset -1px 0 0 rgba( 255, 255, 255, 0.22 ),
		0 0 34px -14px rgba( 20, 18, 14, 0.22 );
}

/* Реакція кнопки hero на наведення. Core фарбує її фон preset-класом через
 * !important, тож даємо відгук властивостями, що з ним не конфліктують: підйом,
 * м'яка тінь у колір акценту (золото/бронза) і легке підсвічення. Працює на
 * світлій і темній кнопці однаково. */
.id-hero .wp-block-button__link {
	transition:
		transform 0.35s cubic-bezier( 0.22, 1, 0.36, 1 ),
		box-shadow 0.35s cubic-bezier( 0.22, 1, 0.36, 1 ),
		filter 0.35s ease;
}

.id-hero .wp-block-button__link:hover,
.id-hero .wp-block-button__link:focus-visible {
	transform: translateY( -3px );
	box-shadow: 0 14px 34px -12px color-mix( in srgb, var( --id-hero-title ) 70%, transparent );
	filter: brightness( 1.05 );
}

/* Підзаголовок hero – курсивом. Саме серифом: Inter підключено лише в normal,
 * тож його курсив був би синтетичним нахилом, а Playfair має справжнє italic-
 * накреслення. Заодно дає типографічну пару до серифного заголовка. */
.id-hero__lead {
	font-family: var( --wp--preset--font-family--serif );
	font-style: italic;
}

.id-kicker {
	font-size: var( --wp--preset--font-size--xs );
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* ---------- Поява секцій та hero (motion-шар) ----------
 * Anti-FOUC: приховуємо цілі тільки під html.js (додається до першого рендеру
 * в functions.php). .id-reveal — наявний контракт теми; motion.js мапить його
 * на data-reveal. Скло hero ховаємо до старту, щоб його поява не блимала.
 * Без JS або при reduced-motion усе видиме одразу.
 */
html.js :where( [data-reveal], .id-reveal ) {
	opacity: 0;
}

html.js :where( [data-reveal], .id-reveal ).is-visible {
	opacity: 1;
}

html.js .id-hero {
	--id-glass-op: 0;
}

@media ( prefers-reduced-motion: reduce ) {
	html.js :where( [data-reveal], .id-reveal ) {
		opacity: 1;
	}

	html.js .id-hero {
		--id-glass-op: 1;
	}

	/* Гасимо будь-яку тривалу анімацію/parallax — reduced-motion отримує
	 * повноцінну статичну версію, а не вкорочену виставу. */
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Посилання-стрілка (текстовий CTA) ---------- */

.id-arrow-link a,
a.id-arrow-link {
	text-decoration: none;
	font-size: var( --wp--preset--font-size--s );
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-bottom: 1px solid currentColor;
	padding-bottom: 0.3em;
}

.id-arrow-link a::after,
a.id-arrow-link::after {
	content: ' →';
	display: inline-block;
	transition: transform var( --wp--custom--transition, 0.3s ease );
}

.id-arrow-link a:hover::after,
a.id-arrow-link:hover::after {
	transform: translateX( 0.35em );
}

/* Посилання-стрілка в hero. Глобальний стиль фарбує посилання в contrast, але
 * hero має власну інверсію, тож contrast там завжди протилежний до кольору
 * решти тексту секції – і в обох темах напис зливався з фото. Успадковуємо
 * колір секції, а на наведення беремо той самий акцент, що й заголовок. */
.id-hero .id-arrow-link a {
	color: inherit;
}

.id-hero .id-arrow-link a:hover,
.id-hero .id-arrow-link a:focus-visible {
	color: var( --id-hero-title );
}

/* ---------- Процес (нумеровані етапи) ---------- */

.id-process-step__num {
	font-family: var( --wp--preset--font-family--serif );
	font-size: var( --wp--preset--font-size--xl );
	font-style: italic;
	color: var( --wp--preset--color--primary );
	line-height: 1;
}

/* ---------- Контакти ---------- */

.id-contact-line a {
	text-decoration: none;
}

.id-contact-line a:hover {
	color: var( --wp--preset--color--primary );
}

/* ---------- Форма (CF7 та інші) під стиль теми ---------- */

.id-form input[type='text'],
.id-form input[type='email'],
.id-form input[type='tel'],
.id-form input[type='url'],
.id-form textarea {
	width: 100%;
	background: transparent;
	border: 0;
	border-bottom: 1px solid color-mix( in srgb, var( --wp--preset--color--contrast ) 30%, transparent );
	border-radius: 0;
	color: inherit;
	font: inherit;
	padding: 0.8em 0;
	transition: border-color 0.25s ease;
}

.id-form input:focus,
.id-form textarea:focus {
	outline: none;
	border-bottom-color: var( --wp--preset--color--primary );
}

.id-form input[type='submit'],
.id-form button[type='submit'] {
	background: var( --wp--preset--color--contrast );
	color: var( --wp--preset--color--base );
	border: 0;
	border-radius: 0;
	cursor: pointer;
	font-size: var( --wp--preset--font-size--xs );
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 1.2em 2.4em;
	transition: background-color 0.25s ease;
}

.id-form input[type='submit']:hover,
.id-form button[type='submit']:hover {
	background: var( --wp--preset--color--primary );
}

/* ---------- Дрібниці ---------- */

.wp-block-image img {
	height: auto;
}

:where( a, button, input, textarea, [tabindex] ):focus-visible {
	outline: 2px solid var( --wp--preset--color--primary );
	outline-offset: 2px;
}

::selection {
	background: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
}

/* ---------- Перемикання теми: темна / світла ----------
 * Темна тема = перевизначення 5 змінних палітри під html[data-theme="dark"].
 * Уся тема побудована на цих змінних, тож перефарбовується автоматично.
 * Тепла темна гама в тон світлій (вугільний замість чистого чорного,
 * трохи світліший акцент – для достатнього контрасту на темному тлі).
 */
:root {
	color-scheme: light;
}

:root[data-theme='dark'] {
	color-scheme: dark;
	--wp--preset--color--base: #14120e;
	--wp--preset--color--surface: #201d17;
	--wp--preset--color--contrast: #ede8df;
	--wp--preset--color--primary: #c2a67f;
	--wp--preset--color--muted: #9c958a;
}

/* Кнопка-перемикач у шапці. hidden за замовчуванням – показує лише JS
 * (progressive enhancement, як .id-reveal). Без JS кнопки немає взагалі. */
.id-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 999px;
	color: inherit;
	cursor: pointer;
	line-height: 0;
	transition: color var( --wp--custom--transition, 0.3s ease ),
		background-color var( --wp--custom--transition, 0.3s ease );
}

.id-theme-toggle[hidden] {
	display: none;
}

.id-theme-toggle:hover,
.id-theme-toggle:focus-visible {
	color: var( --wp--preset--color--primary );
	background: color-mix( in srgb, var( --wp--preset--color--contrast ) 8%, transparent );
}

.id-theme-toggle svg {
	width: 1.25rem;
	height: 1.25rem;
}

/* Світла тема показує місяць (перехід у темну), темна – сонце (перехід у світлу).
 * display задаємо через класи самих іконок, щоб не конфліктувати за
 * специфічністю з правилом `.id-theme-toggle svg`. */
.id-theme-toggle__moon {
	display: block;
}

.id-theme-toggle__sun {
	display: none;
}

:root[data-theme='dark'] .id-theme-toggle__moon {
	display: none;
}

:root[data-theme='dark'] .id-theme-toggle__sun {
	display: block;
}