/* Leafsong Retreat — hero + media showcase additions */

.hero-section {
	position: relative;
	overflow: hidden;
	background: #121212;
}
.hero-bg-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}
.hero-bg-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(100deg, rgba(18, 18, 18, 0.82) 0%, rgba(18, 18, 18, 0.62) 38%, rgba(18, 18, 18, 0.18) 62%, rgba(18, 18, 18, 0.30) 100%);
}
.hero-columns {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	min-height: 680px;
	max-width: 1440px;
	margin: 0 auto;
	padding: 108px 56px 48px;
}

/* Left: headline content over the photo */
.hero-content-col {
	max-width: 620px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.hero-content-col .hero-location-pill {
	align-self: flex-start;
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(245, 244, 236, 0.92);
	border-radius: 999px;
	padding: 9px 18px;
}
.hero-content-col .hero-location-pill span {
	font-size: 12.5px;
	font-weight: 700;
	color: #121212;
}
.hero-content-headline {
	font-family: "Cormorant", serif;
	font-size: 3.4rem;
	font-weight: 500;
	color: #f5f4ec;
	margin: 0;
	line-height: 1.08;
}
.hero-content-desc {
	font-size: 16px;
	color: #e7e5d9;
	line-height: 1.6;
	margin: 0;
	max-width: 540px;
}
.hero-badges {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}
.hero-badge {
	background: rgba(245, 244, 236, 0.14);
	border: 1px solid rgba(245, 244, 236, 0.3);
	border-radius: 999px;
	padding: 9px 16px;
}
.hero-badge span {
	font-size: 12.5px;
	font-weight: 700;
	color: #f5f4ec;
	letter-spacing: 0.2px;
}
.hero-content-ctas {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 6px;
}
.hero-cta-primary {
	display: inline-flex;
	align-items: center;
	padding: 14px 26px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
}
.hero-cta-outline.hero-cta-light {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 26px;
	border-radius: 8px;
	border: 1.5px solid #f5f4ec;
	background: rgba(18, 18, 18, 0.35);
	color: #f5f4ec;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	text-decoration: none;
}
.hero-cta-outline.hero-cta-light:hover {
	background: #f5f4ec;
	color: #121212;
}

/* Right: enquiry form card */
.hero-form-col {
	width: 440px;
	flex-shrink: 0;
}
.hero-form-wrap {
	background: #fff;
	border-radius: 18px;
	padding: 26px 28px;
	box-shadow: 0 24px 60px rgba(18, 18, 18, 0.28);
	width: 100%;
}
.hero-form-logo img {
	height: 32px;
	width: auto;
	display: block;
	margin-bottom: 14px;
}
.hero-form-heading {
	margin-bottom: 14px;
}
.hero-form-eyebrow {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: #476a50;
	margin-bottom: 4px;
}
.hero-form-title {
	font-family: "Cormorant", serif;
	font-size: 1.6rem;
	font-weight: 500;
	color: #121212;
	margin: 0;
	line-height: 1.1;
}

/* Collapse the row-register/col-form grid's default padding so the
   compact hero card doesn't inherit the big modal form's spacing */
.hero-form-wrap .wpcf7-form .columns.row-register {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 !important;
}
.hero-form-wrap .wpcf7-form .column.col-register {
	padding: 0 !important;
	margin: 0 !important;
}
.hero-form-wrap .wpcf7-form p {
	margin: 0 !important;
}
.hero-form-wrap .wpcf7-form-control-wrap {
	display: block;
}
.hero-form-wrap .col-form .contact-label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	color: #121212;
	margin-bottom: 4px;
}
.hero-form-wrap .col-form .form-control {
	font-family: "Lato", sans-serif;
	font-size: 14px;
	color: #121212;
	background: #f5f4ec;
	border: 1px solid #e3e1d4;
	border-radius: 8px;
	padding: 10px 12px;
}
.hero-form-wrap .col-form .form-control::placeholder {
	color: #9a988c;
}
.hero-form-wrap .modal-checkbox-field {
	display: flex;
}
.hero-form-wrap .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}
.hero-form-wrap .wpcf7-acceptance .wpcf7-list-item-label {
	font-size: 11.5px;
	color: #656565;
	line-height: 1.4;
}
.hero-form-wrap .wpcf7-submit {
	width: 100%;
	background: #476a50;
	color: #f5f4ec;
	border: none;
	border-radius: 8px;
	padding: 12px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
}
.hero-form-wrap .wpcf7 .screen-reader-response,
.hero-form-wrap .wpcf7-response-output {
	font-size: 0.8rem;
	margin-top: 6px;
}
.hero-form-divider {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 12px 0 10px;
}
.hero-form-divider::before,
.hero-form-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #e3e1d4;
}
.hero-form-divider span {
	font-size: 11px;
	color: #9a988c;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.hero-floorplan-cta {
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
	gap: 8px;
	border: 1.5px solid #476a50;
	color: #476a50;
	border-radius: 8px;
	padding: 12px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
}
.hero-floorplan-cta:hover {
	background: #476a5010;
}

@media screen and (max-width: 1200px) {
	.hero-columns {
		padding: 96px 32px 40px;
		gap: 28px;
	}
	.hero-content-headline {
		font-size: 2.8rem;
	}
	.hero-form-col {
		width: 380px;
	}
}

@media screen and (max-width: 1024px) {
	.hero-bg-overlay {
		background: linear-gradient(180deg, rgba(18, 18, 18, 0.35) 0%, rgba(18, 18, 18, 0.55) 55%, rgba(18, 18, 18, 0.88) 100%);
	}
	.hero-columns {
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
		padding: 88px 20px 28px;
		gap: 24px;
	}
	.hero-content-col {
		max-width: none;
	}
	.hero-content-headline {
		font-size: 2.4rem;
	}
	.hero-form-col {
		width: 100%;
	}
	.hero-form-wrap {
		padding: 28px 24px;
	}
}

@media screen and (max-width: 480px) {
	.hero-content-headline {
		font-size: 2rem;
	}
	.hero-badges {
		gap: 8px;
	}
	.hero-badge {
		padding: 7px 12px;
	}
	.hero-content-ctas {
		flex-direction: column;
	}
	.hero-content-ctas a {
		justify-content: center;
	}
}

/* Media / Video showcase */
.media-showcase-grid {
	margin-top: 2rem;
}
.media-showcase-card {
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
	height: 100%;
}
.media-showcase-card video {
	width: 100%;
	display: block;
	aspect-ratio: 16 / 9;
	background: #000;
}
.media-showcase-title {
	padding: 1rem;
	font-size: 1.05rem;
}
.media-showcase-floorplan {
	padding: 1rem;
	text-align: center;
}
.media-showcase-floorplan picture img {
	width: 100%;
	border-radius: 8px;
	display: block;
}

/* Header call link */
.column.col-header:has(.header-call-link) {
	display: flex;
	align-items: center;
	gap: 18px;
	justify-content: flex-end;
}
.header-call-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #476a50;
	font-weight: 700;
	font-size: 14px;
	white-space: nowrap;
}
.header-call-link:hover {
	color: #2c4a34;
}
@media screen and (max-width: 1023px) {
	.header-call-link {
		display: none;
	}
}

/* Keep header Contact Us button on one line now that the call link sits beside it */
.column.col-header:has(.header-call-link) {
	flex-wrap: nowrap;
}
.column.col-header:has(.header-call-link) .btn.btn-outline-green {
	flex-shrink: 0;
	white-space: nowrap;
}
.column.col-header:has(.header-call-link) .btn.btn-outline-green span {
	white-space: nowrap;
}
.header-call-link {
	flex-shrink: 0;
}

/* Header utility bar: RERA number + phone numbers */
:root {
	--header-height: 118px;
}

/* The topbar now lives outside <header> so it can span full width,
   independent of header's own (large, breakpoint-varying) side padding.
   This wrapper takes over the fixed positioning that #header used to have. */
#site-header-fixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9999;
}
#site-header-fixed header#header {
	/* relative (not static) so it still anchors the mobile hamburger's
	   absolute positioning to just the nav row, not the whole
	   topbar+header block */
	position: relative !important;
	top: auto !important;
	left: auto !important;
	width: 100% !important;
	z-index: auto !important;
}

.header-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: #476a50;
	color: #f5f4ec;
	padding: 7px 30px;
	font-size: 11.5px;
	flex-wrap: wrap;
}
.header-topbar-rera {
	color: #e7e5d9;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.header-topbar-rera-num {
	color: #f5f4ec;
	font-weight: 700;
}
.header-topbar-phones {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-shrink: 0;
}
.header-topbar-phones a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #f5f4ec;
	font-weight: 700;
	white-space: nowrap;
}
.header-topbar-phones a:hover {
	color: #fff;
	text-decoration: underline;
}

body {
	padding-top: var(--header-height) !important;
}
.hero-columns {
	padding-top: calc(var(--header-height) + 40px) !important;
}

@media screen and (max-width: 1023px) {
	.header-topbar {
		padding: 6px 20px;
		font-size: 10.5px;
		gap: 8px;
	}
	.header-topbar-rera {
		max-width: 46%;
	}
	.header-topbar-phones {
		gap: 12px;
	}
}

@media screen and (max-width: 560px) {
	.header-topbar {
		justify-content: center;
		text-align: center;
		padding: 6px 14px;
		gap: 4px 10px;
	}
	.header-topbar-rera {
		max-width: 100%;
		width: 100%;
		order: 2;
		white-space: normal;
		font-size: 10px;
	}
	.header-topbar-phones {
		width: 100%;
		order: 1;
		justify-content: center;
	}
}

@media screen and (max-width: 1024px) {
	.hero-columns {
		padding-top: calc(var(--header-height) + 20px) !important;
	}
}

.footer-phones {
	margin-top: 4px;
}
.footer-phones small {
	font-size: 16px;
}
.footer-phones a {
	color: #f5f4ec;
	font-weight: 700;
	font-size: 16px;
}
.footer-phones a:hover {
	text-decoration: underline;
}

/* Keep the always-on-screen sticky enquiry bar from covering the
   footer's last line (phone numbers) on any screen size */
#footer {
	padding-bottom: 200px !important;
}
@media screen and (max-width: 1023px) {
	#footer {
		padding-bottom: 90px !important;
	}
}
@media screen and (max-width: 767px) {
	#footer {
		padding-bottom: 70px !important;
	}
}

/* Mobile nav slide-out panel: start below the fixed header/topbar
   instead of the very top of the viewport, so it doesn't overlap it */
@media screen and (max-width: 1023px) {
	.theme-menu {
		top: var(--header-height) !important;
		height: calc(100vh - var(--header-height)) !important;
	}
}

.hero-form-phones {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 16px;
	flex-wrap: wrap;
}
.hero-form-phones a {
	color: #476a50;
	font-weight: 700;
	font-size: 14px;
}
.hero-form-phones a:hover {
	color: #2c4a34;
	text-decoration: underline;
}
.hero-form-phones-sep {
	color: #c9c7ba;
}

/* Logo column: size to its content (the two-logo group) instead of a
   fixed width, so it never fights the flex layout and starves the
   nav column next to it (which holds the mobile hamburger trigger) */
.col-header:first-child {
	flex: 0 0 auto !important;
	width: auto !important;
}

/* Hero Homes developer badge on the hero photo */
.hero-developer-badge {
	width: 200px;
	height: auto;
	display: block;
	margin-bottom: 6px;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}
@media screen and (max-width: 1024px) {
	.hero-developer-badge {
		width: 200px;
	}
}
@media screen and (max-width: 480px) {
	.hero-developer-badge {
		width: 200px;
	}
}
.hero-developer-badge {
		background:white;
padding:10px;
border-radius:10px;
	}

/* Header: Leafsong Retreat logo + Hero Homes developer logo,
   matched to the same box size so neither dominates */
.header-logo-group {
	display: flex;
	align-items: center;
	gap: 16px;
}
.header-logo-divider {
	width: 1px;
	height: 44px;
	background: #d9d7ca;
	flex-shrink: 0;
}
.header-logo-group .theme-logo {
	display: flex;
	align-items: center;
	height: 62px;
	width: 145px;
}
.header-logo-group .theme-logo picture,
.header-logo-group .theme-logo img {
	height: 100% !important;
	width: 100% !important;
	max-height: none !important;
	max-width: none !important;
	object-fit: contain;
	object-position: left center;
}
.header-developer-logo {
	height: 62px;
	width: 145px;
	object-fit: contain;
	object-position: left center;
	flex-shrink: 0;
}
@media screen and (max-width: 1023px) {
	.header-logo-group {
		gap: 10px;
	}
	.header-logo-divider {
		height: 34px;
	}
	.header-logo-group .theme-logo,
	.header-developer-logo {
		height: 46px;
		width: 110px;
	}
}
@media screen and (max-width: 480px) {
	.header-logo-group .theme-logo,
	.header-developer-logo {
		height: 38px;
		width: 90px;
	}
}

/* Footer: Leafsong Retreat logo + Hero Homes developer logo,
   kept as two columns side by side at every screen size */
.footer-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	flex-wrap: nowrap;
}
.footer-logo-divider {
	width: 1px;
	height: 44px;
	background: rgba(245, 244, 236, 0.35);
	flex-shrink: 0;
}
.footer-logo picture {
	display: flex;
	align-items: center;
}
.footer-logo picture img {
	height: 56px !important;
	width: auto !important;
	max-width: 130px;
	object-fit: contain;
}
.footer-developer-logo {
	height: 44px !important;
	width: auto !important;
	max-width: 110px;
	object-fit: contain;
}
@media screen and (max-width: 480px) {
	.footer-logo {
		gap: 10px;
	}
	.footer-logo-divider {
		height: 34px;
	}
	.footer-logo picture img {
		height: 42px !important;
		max-width: 100px;
	}
	.footer-developer-logo {
		height: 32px !important;
		max-width: 82px;
	}
}

/* Fix: CF7's consent-checkbox label was inheriting the theme's
   ".col-form label span { color: #ff0000 }" rule (meant for a
   required-field asterisk), making it unreadable on dark backgrounds */
.theme-modal-card-body .wpcf7-acceptance .wpcf7-list-item-label,
.sticky-bottom-form .wpcf7-acceptance .wpcf7-list-item-label {
	color: #f5f4ec;
}

/* Fix: CF7's success/error message (.wpcf7-response-output) only sets a
   border color by default and inherits ambient text color (#656565),
   which is unreadable on the dark green modal/sticky-bar backgrounds */
.theme-modal-card-body .wpcf7-response-output,
.sticky-bottom-form .wpcf7-response-output {
	color: #f5f4ec;
}

/* Fix: the theme's global "input:-webkit-autofill" rule forces white
   autofilled text (for the dark modal/sticky forms), but that makes
   autofilled text invisible on the hero form and contact-section form,
   which both sit on light backgrounds */
.hero-form-wrap input:-webkit-autofill,
.contact-form-fields input:-webkit-autofill {
	-webkit-text-fill-color: #121212 !important;
	caret-color: #121212;
}

/* Fix: CF7's spinner reserves 24px + 24px margin of layout space even
   while hidden (it toggles visibility, not display), which was adding
   extra empty space below the sticky bar's submit button. Take it out
   of the flow and center it over the button instead. */
.sticky-bottom-form .col-form-btn {
	position: relative;
}
.sticky-bottom-form .wpcf7-spinner {
	position: absolute;
	top: 50%;
	right: 10px;
	margin: 0;
	transform: translateY(-50%);
}

/* Thank You page */
.section-thankyou {
	min-height: 60vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f5f4ec;
}
.thankyou-content {
	text-align: center;
	max-width: 560px;
	margin: 0 auto;
	padding: 60px 20px;
}
.thankyou-icon {
	color: #476a50;
	margin-bottom: 20px;
}
.thankyou-content h1 {
	font-family: "Cormorant", serif;
	font-size: 2.6rem;
	color: #121212;
	margin-bottom: 16px;
}
.thankyou-content p {
	font-size: 16px;
	color: #656565;
	line-height: 1.6;
	margin-bottom: 10px;
}