/*
 * Theme Name:  Wende Theme
 * Theme URI:   https://wende.nl/
 * Author:      Benthon Labs
 * Author URI:  https://benthonlabs.com/
 * Description: Custom WordPress theme for WENDE Makelaardij ("Quiet Luxury in Real Estate"). Converted from the Figma static export. Ships a modular functions layer (inc/*), a Services CPT, Customizer-driven header/footer branding, and templates for posts (Insights), pages, and the `properties` CPT provided by the properties-listing plugin.
 * Version:     1.0.0
 * Requires at least: 6.2
 * Tested up to:      6.6
 * Requires PHP:      8.0
 * License:     GNU General Public License v2 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: wende-theme
 * Tags:        real-estate, custom-post-type, block-editor-styles, translation-ready, custom-logo, custom-menu, featured-images
 *
 * NOTE: All presentational CSS lives in assets/css/*.css and is enqueued from
 * inc/assets.php. This file intentionally contains the theme header only, so
 * that the design system stays in versioned, cache-busted partials rather than
 * in a single monolithic stylesheet.
 */
/* ---------- REVIEWS PREVIEW ---------- */
.nav-links a.is-current:not(.btn),
.nav-links a:not(.btn):hover {
	border-bottom: 2px solid #E07A5F;
}
.nav-links a:not(.btn) {
	padding-bottom: 4px;
	border-bottom: 2px solid transparent;
}
.inner-div {
	max-width: 1120px;
	margin: auto;
}
.reviews {
	background: #FEF2E3;
	padding: 60px 80px;
}
.reviews .inner {
	max-width: 1120px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
}
.reviews-head {
	text-align: center;
	max-width: 640px;
}
.reviews-head h2 {
	font-size: 40px;
	font-weight: 600;
	letter-spacing: -.4px;
	margin: 18px 0;
	color: #6A6F49;
}
.reviews-head p {
	font-size: 16px;
	line-height: 1.6;
	margin: 0;
}
.rating-badge {
	display: flex;
	align-items: center;
	gap: 24px;
	background: #F8ECDE;
	border: 1px solid #C8C7BA80;
	border-radius: 8px;
	padding: 24px 40px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.stars {
	display: flex;
	gap: 2px;
}
.stars svg {
	width: 20px;
	height: 19px;
	fill: #6A6F49;
}
.stars svg.half {
	fill: #e4d6b8;
}
.rating-divider {
	width: 1px;
	height: 40px;
	background: rgba(200, 199, 186, .6);
}
.rating-num {
	display: flex;
	align-items: center;
	gap: 12px;
}
.rating-num .score {
	font-family: 'Playfair Display', serif;
	font-size: 32px;
	color: #525733;
	line-height: 1;
	position: relative;
	top: -5px;
}
.rating-num .of {
	font-size: 12px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: #47473D;
	font-weight: 500;
	margin-left: 12px;
}
.review-row {
	display: flex;
	gap: 32px;
	width: 100%;
}
.review-card {
	flex: 1;
	background: #FFF8F3;
	border: 1px solid rgba(200, 199, 186, .4);
	border-radius: 8px;
	padding: 40px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.review-card.dark {
	background: #525733;
	border-color: transparent;
	box-shadow: 0 4px 10px -2px rgba(0, 0, 0, .15);
}
.review-card.dark svg, .review-card.dark svg path {
	fill: #C5CA9D;
}
.review-card .stars {
	margin-bottom: 24px;
}
.review-card blockquote {
	margin: 0 0 24px;
	font-weight: 300;
	font-size: 18px;
	line-height: 1.62;
}
.review-card.dark blockquote {
	color: #fff8f3;
}
.review-card .who {
	border-top: 1px solid rgba(200, 199, 186, .3);
	padding-top: 20px;
}
.review-card.dark .who {
	border-top-color: rgba(255, 248, 243, .2);
}
.review-card .who .name {
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .7px;
	color: #201b12;
}
.review-card.dark .who .name {
	color: #fff8f3;
}
.review-card .who .ctx {
	font-size: 12px;
	color: #78786c;
	margin-top: 2px;
}
.review-card.dark .who .ctx {
	color: rgba(255, 248, 243, .7);
}
.reviews .btn svg {
	width: 9px;
	height: 9px;
	stroke: #fff;
	fill: none;
	stroke-width: 2;
}
.nav-links a.btn.btn-primary {
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 14px;
	line-height: 24px;
	letter-spacing: 0.7px;
	text-align: center;
	vertical-align: middle;
	color: #fff;
}
/* Base Lightbox Styles */
.video-lightbox {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
}
.video-lightbox__overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	cursor: pointer;
}
.video-lightbox__content {
	position: relative;
	z-index: 10000;
	width: 90%;
	max-width: 900px;
}
.video-lightbox__close {
	position: absolute;
	top: -40px;
	right: 0;
	background: none;
	border: none;
	color: #fff;
	font-size: 32px;
	cursor: pointer;
}
.video-lightbox__iframe-wrap {
	position: relative;
	padding-bottom: 56.25%;
	/* 16:9 */
	height: 0;
	overflow: hidden;
	background: #000;
}
.video-lightbox__iframe-wrap video,
.video-lightbox__iframe-wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/* Gallery Lightbox Extensions */
.gallery-lightbox__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.gallery-lightbox__content img {
	max-height: 80vh;
	max-width: 100%;
	object-fit: contain;
}
.gallery-lightbox__btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	border: none;
	font-size: 40px;
	padding: 0 15px 5px;
	cursor: pointer;
	z-index: 10001;
	transition: background 0.2s ease;
}
.gallery-lightbox__btn:hover {
	background: rgba(0, 0, 0, 0.8);
}
.gallery-lightbox__prev {
	left: -60px;
}
.gallery-lightbox__next {
	right: -60px;
}
.gallery-lightbox__counter {
	color: #fff;
	margin-top: 15px;
	font-family: var(--font-sans, Montserrat, sans-serif);
	font-size: 14px;
	letter-spacing: 1px;
}
/* ==========================================================================
   CONTACT FORM 7 - PIXEL PERFECT DESIGN
   ========================================================================== */
.contact-form-card .wpcf7-form {
	margin-top: 24px;
}
/* Row & Field Spacing */
.contact-form-card .form-row {
	display: flex;
	gap: 20px;
	margin-bottom: 0px;
}
.contact-form-card .form-field {
	display: flex;
	flex-direction: column;
	gap: 10px;
	/* Space between label and input */
	width: 100%;
	margin-bottom: 10px;
}
/* .contact-form-card .form-row .form-field {
	margin-bottom: 0;
} */
/* Labels Typography */
.contact-form-card .form-field label {
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: #828172;
	line-height: 16px;
	margin-bottom: 8px;
	display: inline-block;
}
/* Force CF7 Wrappers to 100% */
.contact-form-card .wpcf7-form-control-wrap {
	display: block !important;
	width: 100% !important;
}
/* Inputs & Textarea Styling */
.contact-form-card input[type="text"],
.contact-form-card input[type="email"],
.contact-form-card input[type="tel"],
.contact-form-card textarea {
	width: 100% !important;
	box-sizing: border-box !important;
	background-color: #FFF8F3;
	border: 1px solid #E5E0D4;
	border-radius: 6px;
	padding: 10px 16px;
	font-family: var(--font-sans, Montserrat, sans-serif);
	font-size: 14px;
	color: #47473D;
	box-shadow: none;
	transition: border-color 0.2s ease;
}
.contact-form-card input::placeholder,
.contact-form-card textarea::placeholder {
	color: #A6A69F;
	opacity: 1;
}
.contact-form-card input:focus,
.contact-form-card textarea:focus {
	outline: none;
	border-color: #525733;
}
.contact-form-card textarea{
	height: 100px;
}
/* Custom Square Checkbox Integration */
.contact-form-card .form-consent {
	margin-top: 0px;
	margin-bottom: 0px;
	display: block;
}
.contact-form-card .wpcf7-list-item {
	margin: 0;
	display: block;
}
.contact-form-card .wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	cursor: pointer;
}
/* Hiding default checkbox and creating custom one */
.contact-form-card .wpcf7-list-item input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	background-color: #FFF8F3;
	border: 1px solid #D5D0C3;
	border-radius: 4px;
	margin: 0 14px 0 0;
	cursor: pointer;
	position: relative;
	flex-shrink: 0;
	transform: translateY(2px);
	/* Aligns perfectly with text */
}
/* Checkmark logic */
.contact-form-card .wpcf7-list-item input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	left: 6px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid #D3755A;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
/* Checkbox Text */
.contact-form-card .wpcf7-list-item-label {
	font-family: var(--font-sans, Montserrat, sans-serif);
	font-size: 14px;
	color: #6C6B5E;
	line-height: 1.6;
	font-weight: 400;
}
/* Submit Button Styling */
.contact-form-card .wpcf7-submit {
	background-color: #DF7A5F;
	/* Coral Orange */
	color: #FFFFFF;
	border: none;
	border-radius: 8px;
	padding: 16px 36px;
	font-family: var(--font-sans, Montserrat, sans-serif);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.5px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.contact-form-card .wpcf7-submit:hover {
	background-color: #C4674E;
}
/* Validation Messages */
.contact-form-card .wpcf7-not-valid-tip {
	font-size: 12px;
	color: #dc3232;
	margin-top: 6px;
	display: block;
}
.contact-form-card .wpcf7-response-output {
	border-radius: 6px;
	margin: 24px 0 0 0 !important;
}
/* Broker CTA Submit Button - Outline Style */
.broker-cta__content .wpcf7-submit {
	background-color: #e07a5f !important;
	border: none !important;
	color: #FFFFFF !important;
	border-radius: 0ch !important;
	/* Match rounded corners from design */
	padding: 16px 32px !important;
	font-family: Montserrat;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.5px;
	cursor: pointer;
	transition: all 0.3s ease;
	width: auto !important;
	display: inline-block;
}
/* Hover effect */
.broker-cta__content .wpcf7-submit:hover {
	background-color: #FFFFFF !important;
	color: #525733 !important;
	/* Changes text to olive green on hover */
}
/* ==========================================================================
   NEWSLETTER - CF7 FIXES
   ========================================================================== */
.newsletter-form p,
.sidebar-card--newsletter .wpcf7 p {
	margin: 0;
	padding: 0;
}
.newsletter-form {
	flex-direction: column;
	gap: 0;
}
.contact-form-card .wpcf7-not-valid-tip {
	font-size: 12px;
	color: #dc3232;
	margin-top: 4px;
	display: block;
	position: absolute;
}
nav.wende-pagination:empty {
	display: none;
}
/* Make the auto-generated <p> tag the flex container */
.newsletter-flex-wrap p {
	display: flex;
	gap: 16px;
	width: 100%;
	align-items: flex-start;
	position: relative;
	/* For positioning error messages */
}
.newsletter-flex-wrap .wpcf7-spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
}
.newsletter-flex-wrap .wpcf7-form-control-wrap {
	max-width: 68%;
	display: block;
}
.newsletter-flex-wrap input[type="email"] {
	width: 100% !important;
	box-sizing: border-box;
}
.newsletter-flex-wrap input[type="submit"] {
	flex: 1;
	width: 100%;
	cursor: pointer;
	background-color: #DF7A5F;
	/* Coral Orange */
}
/* Make error messages display nicely */
.newsletter-flex-wrap .wpcf7-not-valid-tip {
	font-size: 11px;
	color: #dc3232;
	margin-top: 4px;
	position: relative;
}
.wpcf7-form.newsletter-form .wpcf7-response-output,
.sidebar-card--newsletter .wpcf7-response-output {
	margin: 16px 0 0 0 !important;
	font-size: 12px;
	border-radius: 4px;
	padding: 10px;
}
p.map-para {
	margin-bottom: 40px;
}
.detail-map__card p {
	max-width: 200px;
}
iframe.map-bg {
	top: -90px !important;
	height: calc(100% + 180px) !important;
}
/* ==========================================================================
   SIDEBAR NEWSLETTER FIXES (single.php)
   ========================================================================== */
/* Force column layout specifically for the sidebar */
.sidebar-card--newsletter .newsletter-flex-wrap p {
	flex-direction: column;
	gap: 16px;
	align-items: stretch;
	position: relative;
}
/* Make input field take 100% width in sidebar */
.sidebar-card--newsletter .newsletter-flex-wrap .wpcf7-form-control-wrap {
	flex: 1 1 100%;
	max-width: 100%;
}
/* Style the input field to match the dark background */
.sidebar-card--newsletter .newsletter-flex-wrap input[type="email"] {
	background-color: transparent !important;
	border: 1px solid rgba(255, 255, 255, 0.3) !important;
	color: #FFFFFF !important;
	padding: 14px 16px;
	border-radius: 4px;
}
.sidebar-card--newsletter .newsletter-flex-wrap input[type="email"]::placeholder {
	color: rgba(255, 255, 255, 0.6);
}
.sidebar-card--newsletter .newsletter-flex-wrap input[type="email"]:focus {
	border-color: #FFFFFF !important;
}
/* Style the submit button to match the cream design */
.sidebar-card--newsletter .newsletter-flex-wrap input[type="submit"] {
	background-color: #FFF8F3 !important;
	/* Cream color */
	color: #525733 !important;
	/* Olive green text */
	font-weight: 600;
	padding: 14px 16px !important;
	border-radius: 4px !important;
	border: none !important;
	width: 100%;
	transition: background-color 0.2s ease;
}
.sidebar-card--newsletter .newsletter-flex-wrap input[type="submit"]:hover {
	background-color: #F0EAE3 !important;
	/* Slightly darker cream on hover */
}
.nav-toggle[aria-expanded="true"] span {
	background-color: transparent !important;
}
.nav-toggle[aria-expanded="true"] span::before {
	transform: rotate(45deg);
	top: 0;
}
.nav-toggle[aria-expanded="true"] span::after {
	transform: rotate(-45deg);
	top: 0;
}
section.promise-section .eyebrow {
	display: none;
}
.listings-header .btn-link {
	text-transform: uppercase;
	color: #6A6F49;
}
.contact-popup .contact-form-card{
	padding: 38px !important;
}
@media (max-width: 600px) {
	.newsletter-flex-wrap p {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}
	.newsletter-flex-wrap .wpcf7-form-control-wrap {
		flex: 1 1 auto;
		max-width: 100%;
		width: 100%;
	}
	.newsletter-flex-wrap input[type="submit"] {
		width: 100%;
	}
	.newsletter-flex-wrap .wpcf7-not-valid-tip {
		position: relative;
	}
}
/* Mobile Responsiveness */
@media (max-width: 600px) {
	.contact-form-card .form-row {
		flex-direction: column;
		gap: 24px;
	}
}
@media (max-width: 1100px) {
	.gallery-lightbox__prev {
		left: 0;
	}
	.gallery-lightbox__next {
		right: 0;
	}
}
@media (max-width:900px) {
	.reviews {
		padding: 32px 20px;
	}
	.reviews .inner {
		gap: 20px;
	}
	.reviews-head p {
		font-size: 15px;
		line-height: 24px;
	}
	.reviews-head h2 {
		font-size: 28px;
	}
	.review-row {
		flex-direction: column;
		gap: 20px;
	}
	.rating-badge {
		flex-direction: column;
		padding: 24px 21px;
		width: 100%;
		align-items: start;
		gap: 20px;
	}
	.rating-divider {
		width: 100%;
		height: 1px;
	}
	.review-card {
		padding: 28px 20px;
	}
	.review-card blockquote {
		margin-bottom: 52px;
		font-size: 16px;
		line-height: 26px;
		font-weight: 400;
	}
	section#reviews .btn {
		padding: 16px 20px;
		border-radius: 8px;
        width: 100%;
        max-width: 500px;
	}
	.review-card .who {
		padding-top: 24px;
	}
	.newsletter-flex-wrap .wpcf7-spinner {
		position: absolute;
		top: 77%;
		left: 75%;
		transform: translateY(-50%);
	}
	.broker-cta__profile {
		margin: auto;
		width: 100%;
	}
	.broker-cta__photo {
		width: 100%;
		height: auto;
	}
}

/* ==========================================================================
   CONTACT POPUP (header .popup-open)
   ========================================================================== */
body.popup-is-open {
	overflow: hidden;
}
.contact-popup {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 16px;
}
.contact-popup[hidden] {
	display: none;
}
.contact-popup__overlay {
	position: absolute;
	inset: 0;
	background: rgba(32, 27, 18, 0.6);
}
.contact-popup__dialog {
	position: relative;
	width: 100%;
	max-width: 656px;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	border-radius: var(--radius-xl);
}
.contact-popup__close {
	position: absolute;
	top: 12px;
	right: 16px;
	z-index: 1;
	background: none;
	border: 0;
	font-size: 32px;
	line-height: 1;
	color: var(--color-olive);
	cursor: pointer;
}
/* Mirrors .contact-form-card in contact.css, which only loads on the contact page. */
.contact-popup .contact-form-card {
	background: #EFE6DA;
	border-radius: var(--radius-xl);
	padding: 48px;
}
.contact-popup .contact-form-card h2 {
	color: var(--color-olive);
	font-size: 30px;
	margin-bottom: 8px;
	font-weight: 700;
}
.contact-popup .contact-form-card > p {
	margin-bottom: 24px;
	line-height: 26px;
}
@media (max-width: 767px) {
	.contact-popup .contact-form-card {
		padding: 48px 24px 24px;
	}
	.contact-popup .contact-form-card .form-row {
		flex-direction: column;
		gap: 0;
	}
}