/* ==========================================================================
   Smooth Scroll
   ========================================================================== */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 80px;
}

/* ==========================================================================
   Sticky Header
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	padding-top: 1.5rem !important;
	padding-bottom: 1.5rem !important;
	overflow: visible !important;
}

/* Decoratief rondje onder logo */
.site-header::after {
	content: '';
	position: absolute;
	bottom: -14px;
	left: 50%;
	transform: translateX(-50%);
	width: 80px;
	height: 80px;
	background-color: var(--wp--preset--color--cream);
	border-radius: 50%;
	z-index: 0;
}

/* Logo gecentreerd, nav rechts */
.site-header > .wp-block-group {
	position: relative;
}

.site-header .wp-block-site-logo {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	margin-left: -8px;
}

.site-header .wp-block-navigation {
	margin-left: auto !important;
}

.wp-site-blocks > .front-page {
	margin-top: 0 !important;
}

/* ==========================================================================
   Overlapping Cards
   ========================================================================== */
/* Shared overlap card styles */
.overlap-card-heading {
	font-style: italic;
	font-weight: 700;
}

/* Wat het brengt photo */
.wat-het-brengt-photo img {
	width: 100%;
	object-fit: cover;
	max-height: 550px;
	border-radius: 12px;
}

/* Bottom row: card left + tagline right */
.wat-brengt-bottom {
	display: flex !important;
	align-items: center;
	gap: 2rem;
	margin-top: -6rem !important;
	position: relative;
	z-index: 2;
}

.quote-break {
	margin-top: 6rem !important;
	padding: 3rem 0 !important;
}

.wat-brengt-card {
	max-width: 520px;
	border-radius: 12px;
	flex-shrink: 0;
}

/* Aanbod photo + overlap card */
.aanbod-photo img {
	width: 100%;
	object-fit: cover;
	max-height: 550px;
	border-radius: 12px;
}

/* Aanbod rows */
.aanbod-row-top {
	margin-top: -6rem !important;
	position: relative;
	z-index: 2;
}

.aanbod-row-top > .module-card {
	margin-top: 7rem;
}

.aanbod-row-bottom {
	margin-top: 2rem !important;
}

.aanbod-overlap-card {
	border-radius: 12px;
}

@media (max-width: 781px) {
	.wat-brengt-bottom {
		flex-direction: column;
		margin-top: -2rem !important;
	}

	.quote-break {
		width: 100% !important;
		margin-top: 0 !important;
	}

	.wat-brengt-card {
		max-width: 100%;
	}

	.aanbod-row-top {
		margin-top: -2rem !important;
	}

	.aanbod-row-top > .module-card {
		margin-top: 0;
	}

	.aanbod-row-top,
	.aanbod-row-bottom {
		flex-direction: column !important;
	}
}

/* ==========================================================================
   Decorative Brackets
   ========================================================================== */
.bracket-tagline-col {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
}

.decorative-bracket-text {
	display: inline-block;
	position: relative;
	padding: 1.5rem 2rem;
	font-size: 1.75rem;
	font-style: italic;
	text-align: center;
	flex: 1;
	overflow: visible;
}

.decorative-bracket-text::before,
.decorative-bracket-text::after {
	content: '';
	position: absolute;
	width: 80px;
	height: 80px;
	border: 2px solid var(--wp--preset--color--text-dark);
	pointer-events: none;
	opacity: 0.7;
}

.decorative-bracket-text::before {
	top: -8px;
	right: -8px;
	border-bottom: none;
	border-left: none;
	border-radius: 0 20px 0 0;
}

.decorative-bracket-text::after {
	bottom: -8px;
	left: -8px;
	border-top: none;
	border-right: none;
	border-radius: 0 0 0 20px;
}

/* Corner brackets base */
.section-aanbod .decorative-bracket-card {
	position: relative !important;
	overflow: visible !important;
}

.section-aanbod .decorative-bracket-card::before,
.section-aanbod .decorative-bracket-card::after {
	content: '' !important;
	position: absolute !important;
	width: 80px;
	height: 80px;
	border: 2px solid var(--wp--preset--color--text-dark);
	pointer-events: none;
	z-index: 1;
	opacity: 0.7;
}

/* Card 1 + Card 2: top-right + bottom-left */
.aanbod-row-top .decorative-bracket-card::before,
.aanbod-row-bottom > .module-card:first-child .decorative-bracket-card::before {
	top: -8px;
	right: -8px;
	border-bottom: none !important;
	border-left: none !important;
	border-radius: 0 20px 0 0;
}

.aanbod-row-top .decorative-bracket-card::after,
.aanbod-row-bottom > .module-card:first-child .decorative-bracket-card::after {
	bottom: -8px;
	left: -8px;
	border-top: none !important;
	border-right: none !important;
	border-radius: 0 0 0 20px;
}

/* Card 3 (Journey): top-left + bottom-right */
.aanbod-row-bottom > .module-card:last-child .decorative-bracket-card::before {
	top: -8px;
	left: -8px;
	border-bottom: none !important;
	border-right: none !important;
	border-radius: 20px 0 0 0;
}

.aanbod-row-bottom > .module-card:last-child .decorative-bracket-card::after {
	bottom: -8px;
	right: -8px;
	border-top: none !important;
	border-left: none !important;
	border-radius: 0 0 20px 0;
}

/* ==========================================================================
   Ampersand Watermark
   ========================================================================== */
.groepswandeling-card {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	margin-top: 3rem;
	background-size: 200px auto !important;
	background-position: right 2rem center !important;
	background-repeat: no-repeat !important;
}

.groepswandeling-card > * {
	position: relative;
	z-index: 1;
}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.see-and-be-quote {
	font-size: 1.35rem;
	font-style: italic;
	line-height: 1.8;
}

.see-and-be-cite {
	font-weight: 600;
	font-size: 0.95rem;
}

/* ==========================================================================
   Voor Wie Button
   ========================================================================== */
.voor-wie-btn .wp-block-button__link {
	border: 2px solid #1a1a1a;
	border-radius: 50px;
	color: #1a1a1a;
	margin-top: 2rem;
}

/* ==========================================================================
   Contact Section
   ========================================================================== */
.contact-heading {
	font-style: italic;
	font-weight: 700;
}

.contact-intro {
	font-style: italic;
}

/* ==========================================================================
   Module Cards & Pricing
   ========================================================================== */
.module-card {
	border-radius: 8px;
}

.aanbod-row-bottom {
	align-items: stretch !important;
}

.decorative-bracket-card {
	height: 100%;
	display: flex !important;
	flex-direction: column;
}

.decorative-bracket-card > * {
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.module-price {
	font-weight: 600;
	padding-top: 20px !important;
	margin-top: auto !important;
}

/* ==========================================================================
   Photos
   ========================================================================== */
.section-voor-wie .wp-block-columns {
	align-items: stretch;
}

.section-voor-wie .wp-block-columns > .wp-block-column:first-child {
	display: flex;
	flex-direction: column;
}

.voor-wie-photo {
	flex: 1;
	margin: 0;
}

.voor-wie-photo img
{
	object-fit: cover;
	width: 100%;
	height: 100%;
	min-height: 400px;
}

.wat-het-brengt-photo img,
.aanbod-photo img {
	object-fit: cover;
	width: 100%;
	max-height: 550px;
	border-radius: 12px;
}

/* ==========================================================================
   Certification Logos
   ========================================================================== */
.certification-logos {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin-top: 1rem;
}

.certification-logo {
	max-width: 120px;
	max-height: 55px;
}

/* ==========================================================================
   Mobile Navigation
   ========================================================================== */
/* Show hamburger menu at 830px instead of WordPress default 600px */
@media (max-width: 830px) {
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}

	.wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}
}

.wp-block-navigation__responsive-container.is-menu-open {
	padding: 2rem !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
	max-width: 100% !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: center !important;
	justify-content: center !important;
	flex-grow: 1;
	gap: 1.5rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.5rem;
}

/* ==========================================================================
   Scroll Reveal Animations
   ========================================================================== */
/* Base: elements start invisible (only when JS is available to reveal them) */
html.has-js .animate-fade-up,
html.has-js .animate-fade-in,
html.has-js .animate-fade-left,
html.has-js .animate-fade-right {
	opacity: 0;
	will-change: opacity, transform;
}

html.has-js .animate-fade-up {
	transform: translateY(24px);
}

html.has-js .animate-fade-left {
	transform: translateX(-24px);
}

html.has-js .animate-fade-right {
	transform: translateX(24px);
}

/* Revealed state (html.has-js needed to beat hiding-rule specificity) */
html.has-js .animate-fade-up.is-visible,
html.has-js .animate-fade-in.is-visible,
html.has-js .animate-fade-left.is-visible,
html.has-js .animate-fade-right.is-visible {
	opacity: 1;
	transform: translateY(0) translateX(0);
}

html.has-js .animate-fade-up.is-visible {
	transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
		transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

html.has-js .animate-fade-in.is-visible {
	transition: opacity 800ms ease;
}

html.has-js .animate-fade-left.is-visible {
	transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
		transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

html.has-js .animate-fade-right.is-visible {
	transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
		transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Stagger delays */
.animate-stagger-1 {
	transition-delay: 200ms !important;
}

.animate-stagger-2 {
	transition-delay: 400ms !important;
}

/* ==========================================================================
   Hero Animation (plays on page load)
   ========================================================================== */
.hero-section .wp-block-cover__inner-container {
	animation: heroFadeUp 900ms cubic-bezier(0.25, 0.1, 0.25, 1.0) 300ms both;
}

@keyframes heroFadeUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ==========================================================================
   Logo Slide-in (plays on page load)
   ========================================================================== */
.site-header .wp-block-site-logo {
	animation: logoSlideDown 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;
}

@keyframes logoSlideDown {
	0% {
		opacity: 0;
		transform: translateX(-50%) translateY(-60px);
	}
	60% {
		opacity: 1;
		transform: translateX(-50%) translateY(4px);
	}
	100% {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}

/* ==========================================================================
   Header Shadow on Scroll
   ========================================================================== */
.site-header {
	transition: box-shadow 300ms ease;
}

.site-header.has-scrolled {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* ==========================================================================
   Bracket Scale Animation (Aanbod)
   ========================================================================== */
html.has-js .section-aanbod .decorative-bracket-card::before,
html.has-js .section-aanbod .decorative-bracket-card::after {
	opacity: 0;
	transform: scale(0.85);
	transition: opacity 500ms ease 400ms,
		transform 500ms cubic-bezier(0.16, 1, 0.3, 1) 400ms;
}

.section-aanbod .module-card.is-visible .decorative-bracket-card::before,
.section-aanbod .module-card.is-visible .decorative-bracket-card::after {
	opacity: 0.7;
	transform: scale(1);
}

/* ==========================================================================
   Button Hover Enhancement
   ========================================================================== */
.voor-wie-btn .wp-block-button__link {
	transition: background-color 300ms ease, color 300ms ease, transform 200ms ease;
}

.voor-wie-btn .wp-block-button__link:hover {
	background-color: #1a1a1a;
	color: #fff;
	transform: translateY(-1px);
}

/* ==========================================================================
   Accessibility: Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	html.has-js .animate-fade-up,
	html.has-js .animate-fade-in,
	html.has-js .animate-fade-left,
	html.has-js .animate-fade-right {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.hero-section .wp-block-cover__inner-container,
	.site-header .wp-block-site-logo {
		animation: none !important;
		opacity: 1 !important;
	}

	html.has-js .section-aanbod .decorative-bracket-card::before,
	html.has-js .section-aanbod .decorative-bracket-card::after {
		opacity: 0.7 !important;
		transform: scale(1) !important;
		transition: none !important;
	}
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 781px) {
	.section-voor-wie .wp-block-columns,
	.section-contact .wp-block-columns {
		flex-direction: column-reverse;
	}

	.section-wie-ben-ik .wp-block-columns {
		flex-direction: column-reverse;
	}

	.voor-wie-photo img,
	.wie-ben-ik-photo img {
		min-height: 300px;
	}

	.groepswandeling-card {
		background-size: 100px auto !important;
	}

	/* Animation: simplify directions on mobile */
	html.has-js .animate-fade-left,
	html.has-js .animate-fade-right {
		transform: translateY(16px);
	}

	html.has-js .animate-fade-up {
		transform: translateY(16px);
	}

	.animate-stagger-1 {
		transition-delay: 100ms !important;
	}

	.animate-stagger-2 {
		transition-delay: 200ms !important;
	}
}