/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* --- Высота шапки как якорь для отступов --- */
/* Шапка position: fixed, поэтому контент не знает её высоты.
   Фиксируем высоту одной переменной и считаем от неё всё остальное.
   Содержимое: логотип 46px / кнопки 48px + 2 × var(--space-m) ≈ 80–86px,
   так что 88/96 дают запас. Менять наполнение шапки — проверить эти числа. */
:root {
	--header-height: 88px;
}

@media (min-width: 992px) {
	:root {
		--header-height: 96px;
	}
}

.site-header {
	height: var(--header-height);
	/* Фиксированная шапка не должна уезжать под админ-бар.
	   На фронте без логина переменной нет — работает fallback 0px. */
	top: var(--wp-admin--admin-bar--height, 0px);
}

.site-header > .brxe-container {
	height: 100%;
}

/* Отступ первой секции внутренних страниц задаётся классом section--first,
   а не позиционным селектором — иначе в канвасе билдера он попадает не на тот элемент. */

/* Якорные ссылки (#contacts и пр.) не уезжают под фиксированную шапку */
html {
	scroll-padding-top: calc(var(--header-height) + var(--wp-admin--admin-bar--height, 0px) + var(--space-s));
}

/* --- Мобильная шапка: кнопка звонка (#brxe-phncll) и гамбургер (#brxe-bbrbaz) --- */
@media (max-width: 767px) {
	#brxe-phncll {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		transition: transform .2s ease, box-shadow .2s ease;
	}

	#brxe-phncll svg {
		width: 22px;
		height: 22px;
	}

	#brxe-phncll:active {
		transform: translateY(1px);
	}

	#brxe-bbrbaz {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
	}

	#brxe-bbrbaz svg {
		width: 22px;
		height: 22px;
	}
}

/* --- Тоглы меню: линейные иконки (открыть / закрыть) --- */
#brxe-bbrbaz svg,
#brxe-rrbzei svg,
#brxe-ollahg svg {
	fill: none;
	stroke: var(--bricks-color-brand);
}

#brxe-ollahg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

#brxe-ollahg svg,
#brxe-rrbzei svg {
	width: 22px;
	height: 22px;
}

/* --- Анимация крестика закрытия --- */
#brxe-ollahg,
#brxe-rrbzei {
	transition: background-color .4s ease, border-color .4s ease;
}

#brxe-ollahg svg,
#brxe-rrbzei svg {
	transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

#brxe-ollahg:hover svg,
#brxe-rrbzei:hover svg,
#brxe-ollahg:focus-visible svg,
#brxe-rrbzei:focus-visible svg {
	transform: rotate(90deg);
}

#brxe-ollahg:active svg,
#brxe-rrbzei:active svg {
	transform: rotate(90deg) scale(.9);
}

/* появление крестика вместе с панелью */
.brxe-offcanvas.brx-open #brxe-ollahg svg {
	animation: dacha-close-in .6s cubic-bezier(.4, 0, .2, 1) both;
}

@keyframes dacha-close-in {
	from {
		opacity: 0;
		transform: rotate(-90deg) scale(.7);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	#brxe-ollahg svg,
	#brxe-rrbzei svg,
	.brxe-offcanvas.brx-open #brxe-ollahg svg {
		transition: none;
		animation: none;
	}

	#brxe-ollahg:hover svg,
	#brxe-rrbzei:hover svg {
		transform: none;
	}
}