/*
 * Willsmere — Super Modern Front Page Styles
 * Heritage-inspired design for Willsmere Residential Estate
 * For Twenty Twenty-Five block theme
 */

/* ============================================
   CUSTOM PROPERTIES
   ============================================ */
.willsmere-front {
	--wm-dark: #111111;
	--wm-cream: #FAF8F2;
	--wm-gold: #C7A44A;
	--wm-gold-light: #E8D5A0;
	--wm-green: #2D4A3E;
	--wm-green-light: #3B6355;
	--wm-gray: #686868;
	--wm-gray-light: #F0EEEA;
	--wm-white: #FFFFFF;
	--wm-border: #E5E2DB;
	--wm-radius: 0px;
	--wm-transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1);
	--wm-transition-fast: 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ============================================
   SMOOTH SCROLL & SELECTION
   ============================================ */
html {
	scroll-behavior: smooth;
}

.willsmere-front ::selection {
	background: var(--wm-gold);
	color: var(--wm-dark);
}

/* ============================================
   HERO SECTION
   ============================================ */
.wm-hero {
	position: relative;
	background-image:
		linear-gradient(165deg, rgba(45, 74, 62, 0.85) 0%, rgba(17, 17, 17, 0.7) 50%, rgba(45, 74, 62, 0.6) 100%);
}

.wm-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 80% 60% at 50% 45%, transparent 40%, rgba(0,0,0,0.35) 100%);
	pointer-events: none;
	z-index: 1;
}

.wm-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

.wm-hero-label {
	opacity: 0.85;
}

.wm-hero-title {
	text-shadow: 0 4px 60px rgba(0,0,0,0.3);
}

.wm-hero-sep.wp-block-separator {
	width: 100px;
	margin-left: auto;
	margin-right: auto;
	border-color: var(--wm-gold) !important;
	border-width: 2px;
	opacity: 1;
}

.wm-hero-sub {
	color: rgba(255,255,255,0.7) !important;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

/* Hero buttons */
.wm-btn-gold .wp-block-button__link {
	background: var(--wm-gold) !important;
	color: var(--wm-dark) !important;
	transition: var(--wm-transition-fast);
	position: relative;
	overflow: hidden;
}

.wm-btn-gold .wp-block-button__link:hover {
	background: var(--wm-gold-light) !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 30px rgba(199, 164, 74, 0.35);
}

.wm-btn-outline .wp-block-button__link {
	border-color: rgba(255,255,255,0.4) !important;
	transition: var(--wm-transition-fast);
}

.wm-btn-outline .wp-block-button__link:hover {
	background: rgba(255,255,255,0.1) !important;
	border-color: var(--wm-gold) !important;
	color: var(--wm-gold) !important;
	transform: translateY(-2px);
}

/* ============================================
   ENTRANCE ANIMATIONS
   ============================================ */
.wm-anim-up {
	opacity: 0;
	transform: translateY(40px);
	animation: wmFadeUp 0.9s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

.wm-anim-up:nth-child(1) { animation-delay: 0.15s; }
.wm-anim-up:nth-child(2) { animation-delay: 0.3s; }
.wm-anim-up:nth-child(3) { animation-delay: 0.45s; }
.wm-anim-up:nth-child(4) { animation-delay: 0.6s; }
.wm-anim-up:nth-child(5) { animation-delay: 0.75s; }
.wm-anim-up:nth-child(6) { animation-delay: 0.9s; }

@keyframes wmFadeUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Slide animations (triggered in viewport) */
.wm-anim-slide-r {
	opacity: 0;
	transform: translateX(-50px);
	transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1),
	            transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.wm-anim-slide-l {
	opacity: 0;
	transform: translateX(50px);
	transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1),
	            transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.wm-anim-slide-r.wm-visible,
.wm-anim-slide-l.wm-visible {
	opacity: 1;
	transform: translateX(0);
}

/* ============================================
   MARQUEE STRIP
   ============================================ */
.wm-marquee {
	background: var(--wm-cream);
	border-top: 1px solid var(--wm-border);
	border-bottom: 1px solid var(--wm-border);
}

/* ============================================
   SECTION TAGS
   ============================================ */
.wm-section-tag {
	position: relative;
}

.wm-section-tag::before {
	content: '';
	display: inline-block;
	width: 32px;
	height: 2px;
	background: var(--wm-gold);
	vertical-align: middle;
	margin-right: 12px;
}

.has-text-align-center .wm-section-tag::before,
.wm-section-tag.has-text-align-center::before {
	display: none;
}

/* ============================================
   ABOUT SECTION
   ============================================ */
.wm-about {
	overflow: hidden;
}

.wm-img-stack {
	position: relative;
}

.wm-img-main img {
	transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.wm-img-main:hover img {
	transform: scale(1.03);
}

.wm-img-stack::after {
	content: '';
	position: absolute;
	bottom: -16px;
	right: -16px;
	width: 140px;
	height: 140px;
	border: 3px solid var(--wm-gold);
	z-index: -1;
}

/* Stats */
.wm-stat-mini {
	min-width: 85px;
	padding-right: 24px;
	border-right: 1px solid var(--wm-border);
}

.wm-stat-mini:last-child {
	border-right: none;
}

/* Dark buttons */
.wm-btn-dark .wp-block-button__link {
	background: var(--wm-dark) !important;
	color: var(--wm-white) !important;
	transition: var(--wm-transition-fast);
}

.wm-btn-dark .wp-block-button__link:hover {
	background: var(--wm-green) !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.wm-btn-outline-dark .wp-block-button__link {
	border-color: var(--wm-dark) !important;
	color: var(--wm-dark) !important;
	transition: var(--wm-transition-fast);
}

.wm-btn-outline-dark .wp-block-button__link:hover {
	background: var(--wm-dark) !important;
	color: var(--wm-white) !important;
	transform: translateY(-2px);
}

/* ============================================
   AMENITY CARDS
   ============================================ */
.wm-amenities {
	background: var(--wm-cream);
}

.wm-amen-card {
	transition: var(--wm-transition);
}

.wm-amen-inner {
	background: var(--wm-white);
	border: 1px solid var(--wm-border);
	transition: var(--wm-transition);
	position: relative;
	overflow: hidden;
}

.wm-amen-inner::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: var(--wm-gold);
	transform: scaleX(0);
	transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
	transform-origin: left;
}

.wm-amen-card:hover .wm-amen-inner {
	transform: translateY(-6px);
	box-shadow: 0 20px 50px rgba(0,0,0,0.07);
	border-color: transparent;
}

.wm-amen-card:hover .wm-amen-inner::after {
	transform: scaleX(1);
}

/* Stagger animation for amenity cards */
.wm-amen-grid .wm-amen-card:nth-child(1) .wm-anim-up { animation-delay: 0.1s; }
.wm-amen-grid .wm-amen-card:nth-child(2) .wm-anim-up { animation-delay: 0.2s; }
.wm-amen-grid .wm-amen-card:nth-child(3) .wm-anim-up { animation-delay: 0.3s; }
.wm-amen-grid .wm-amen-card:nth-child(4) .wm-anim-up { animation-delay: 0.4s; }

/* ============================================
   PARALLAX QUOTE
   ============================================ */
.wm-parallax {
	background-image:
		linear-gradient(160deg, rgba(45, 74, 62, 0.88) 0%, rgba(17, 17, 17, 0.75) 100%);
	background-attachment: fixed;
}

@supports (-webkit-touch-callout: none) {
	.wm-parallax {
		background-attachment: scroll;
	}
}

.wm-gold-line.wp-block-separator {
	width: 60px;
	margin-left: auto;
	margin-right: auto;
	border-color: var(--wm-gold) !important;
	border-width: 2px;
	opacity: 1;
}

/* ============================================
   COMMUNITY SECTION
   ============================================ */
.wm-community {
	overflow: hidden;
}

.wm-img-community img {
	transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.wm-img-community:hover img {
	transform: scale(1.03);
}

/* ============================================
   EXPLORE CARDS
   ============================================ */
.wm-explore {
	background: var(--wm-cream);
}

.wm-explore-cover {
	transition: var(--wm-transition);
	overflow: hidden;
}

.wm-explore-cover .wp-block-cover__background {
	transition: opacity 0.5s ease;
}

.wm-explore-card:hover .wm-explore-cover {
	transform: translateY(-6px);
	box-shadow: 0 25px 60px rgba(0,0,0,0.12);
}

.wm-explore-card:hover .wm-explore-cover .wp-block-cover__background {
	opacity: 0.7;
}

/* ============================================
   POST CARDS
   ============================================ */
.wm-post-card {
	background: var(--wm-white);
	transition: var(--wm-transition);
	overflow: hidden;
}

.wm-post-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 50px rgba(0,0,0,0.07);
	border-color: transparent !important;
}

.wm-post-card .wp-block-post-featured-image img {
	transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.wm-post-card:hover .wp-block-post-featured-image img {
	transform: scale(1.05);
}

.wm-post-card .wp-block-post-featured-image {
	overflow: hidden;
	margin: 0;
}

.wm-post-card .wp-block-post-title a {
	text-decoration: none;
	transition: color 0.3s ease;
}

.wm-post-card .wp-block-post-title a:hover {
	color: var(--wm-green) !important;
}

/* ============================================
   GOOGLE MAP
   ============================================ */
.wm-map-wrap {
	width: 100%;
	height: 100%;
	min-height: 400px;
	position: relative;
	overflow: hidden;
	border: 1px solid var(--wm-border);
}

.wm-map-wrap iframe {
	width: 100%;
	height: 100%;
	min-height: 450px;
	display: block;
}

/* ============================================
   BOTTOM CTA
   ============================================ */
.wm-cta {
	background: linear-gradient(160deg, var(--wm-green) 0%, #1A2E26 60%, var(--wm-dark) 100%);
	position: relative;
	overflow: hidden;
}

.wm-cta::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -20%;
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, rgba(199, 164, 74, 0.07) 0%, transparent 70%);
	pointer-events: none;
}

.wm-btn-white .wp-block-button__link {
	transition: var(--wm-transition-fast);
}

.wm-btn-white .wp-block-button__link:hover {
	background: var(--wm-gold) !important;
	color: var(--wm-dark) !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 30px rgba(199, 164, 74, 0.3);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 781px) {
	.wm-about-cols,
	.wm-comm-cols,
	.wm-loc-cols {
		flex-direction: column !important;
	}

	.wm-about-cols .wp-block-column,
	.wm-comm-cols .wp-block-column,
	.wm-loc-cols .wp-block-column {
		flex-basis: 100% !important;
	}

	.wm-img-stack::after {
		display: none;
	}

	.wm-stat-mini {
		border-right: none;
		border-bottom: 1px solid var(--wm-border);
		padding-bottom: 12px;
		margin-bottom: 12px;
	}

	.wm-explore-grid {
		flex-direction: column !important;
	}

	.wm-amen-grid {
		flex-direction: column !important;
	}

	.wm-amen-grid .wp-block-column {
		flex-basis: 100% !important;
	}

	.wm-map-wrap {
		min-height: 300px;
	}

	.wm-parallax {
		background-attachment: scroll;
	}
}

/* ============================================
   SCROLLBAR (Webkit)
   ============================================ */
::-webkit-scrollbar {
	width: 8px;
}

::-webkit-scrollbar-track {
	background: var(--wm-cream);
}

::-webkit-scrollbar-thumb {
	background: var(--wm-gold);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--wm-green);
}

/* ============================================
   INTERSECTION OBSERVER SCRIPT STYLES
   The JS below triggers .wm-visible on scroll
   ============================================ */