/*
Theme Name: Spa People
Template: twentytwentyfour
Description: Custom child theme for Spa People, built on Twenty Twenty-Four with Spa People's brand colors (Turquoise Splash, Magenta Spunk, Sunshine Yellow) and typography (Montserrat, standing in for Gotham).
Version: 1.0
Author: Spa People
Text Domain: spa-people
*/

/* ===== Sticky navigation ===== */

header.wp-block-template-part,
header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: #FFFFFF;
	border-bottom: 1px solid #F0F0F0;
}

/* ===== Hero: overlaid headline on featured image ===== */

.spa-people-hero-wrap {
	position: relative;
	border-radius: 20px;
	overflow: hidden;
}

.spa-people-hero-image img {
	transition: transform 0.5s ease;
}

.spa-people-hero-wrap:hover .spa-people-hero-image img {
	transform: scale(1.03);
}

.spa-people-hero-overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 40px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0) 100%);
}

.spa-people-hero-excerpt {
	opacity: 0.9;
}

/* ===== Article cards: subtle hover ===== */

.spa-people-card {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.spa-people-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.spa-people-card-image {
	overflow: hidden;
}

.spa-people-card-image img {
	transition: transform 0.35s ease;
}

.spa-people-card:hover .spa-people-card-image img {
	transform: scale(1.03);
}

.spa-people-card-title a {
	transition: color 0.2s ease;
}

.spa-people-card:hover .spa-people-card-title a {
	color: #F0158A !important;
}

/* ===== Logo: subtle hover color shift ===== */

.wp-block-site-logo img {
	transition: filter 0.25s ease;
}

.wp-block-site-logo:hover img {
	filter: hue-rotate(20deg) saturate(1.3);
}

/* ===== Responsive: hero text and grid adjust on smaller screens ===== */

@media (max-width: 782px) {
	.spa-people-hero-overlay {
		padding: 24px;
	}
}