/*
Theme Name: Maria Balatskaya
Description: Child theme for Twenty Twenty-Five
Template: twentytwentyfive
Version: 1.1.0
Text Domain: mary-balatskaya
*/

/* ==================================================
	 Sticky site header
	 ================================================== */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	margin-block-start: 0;
}

.wp-site-blocks > main,
.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0;
}

.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 46px;
	}
}

/* На узких экранах панель администратора прокручивается вместе со страницей. */
@media screen and (max-width: 600px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}

/* ==================================================
	 Service cards
	 ================================================== */

.service-card {
	position: relative;
	height: 100%;
	box-sizing: border-box;
	cursor: pointer;
	
	border-radius: 20px;

	transform: translateY(-2px);

	box-shadow:
		var(--wp--custom--service-card--shadow--default);

	transition:
		transform 0.18s ease,
		box-shadow 0.18s ease,
		border-color 0.18s ease;
}

/* Эффект наведения применяется только на устройствах с точным указателем. */
@media (hover: hover) and (pointer: fine) {
	.service-card:hover {
		transform: translateY(-5px);
		box-shadow:
			var(--wp--custom--service-card--shadow--hover);
	}
}

/* Растягиваем именно ссылку на всю карточку */
.service-card-link a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

/* При нажатии карточка слегка "утапливается" */
.service-card:active {
	transform: translateY(0);

	box-shadow:
		var(--wp--custom--service-card--shadow--active);
}

/* Видимый фокус при работе с клавиатуры */
.service-card:focus-within {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.service-card,
	.service-card:hover,
	.service-card:active {
		transform: none;
		transition: none;
	}
}

/*  End of service cards section
		================================================== */