/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

/* Amazone Font */
@font-face {
    font-family: 'Amazone';
    src: url('../fonts/AmazoneBT-Regular.woff2') format('woff2'),
         url('../fonts/AmazoneBT-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Logo text styling with Amazone font */
.header-logo-text {
    font-family: 'Amazone', serif;
}
.bg-white-text-primary { background-color: var(--color-white) !important;}
.bg-white-text-primary a { color: var(--color-primary) !important; }

/* Primary met opacity (voor bg-primary/10, bg-primary/20, ring-primary) */
.bg-primary\/10 { background-color: color-mix(in srgb, var(--color-primary, #000) 10%, transparent); }
.bg-primary\/20 { background-color: color-mix(in srgb, var(--color-primary, #000) 20%, transparent); }
.ring-primary { --tw-ring-color: var(--color-primary, #000); }
.bg-secondary-text-white { background-color: var(--color-secondary) !important; }
.bg-secondary-text-white a { color: var(--color-white) !important; }

 header #primary-navigation nav .menu-item.text-primary > a,
 header #primary-navigation .menu-item.text-primary > a,
 header #primary-navigation .text-primary a {
	 color: var(--color-primary) !important;
 }

/* Desktop navigation: submenu dropdown */
@media (min-width: 782px) {
	#primary-menu .menu-item-has-children {
		position: relative;
	}

	#primary-menu .menu-item-has-children > a::after {
		content: '';
		display: inline-block;
		margin-left: 5px;
		vertical-align: middle;
		border-left: 4px solid transparent;
		border-right: 4px solid transparent;
		border-top: 5px solid currentColor;
		transition: transform 0.2s ease;
	}

	#primary-menu .menu-item-has-children:hover > a::after {
		transform: rotate(180deg);
	}

	#primary-menu .sub-menu {
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translateX(-50%) translateY(-4px);
		min-width: 200px;
		background-color: #ffffff;
		border-radius: 0.75rem;
		box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 4px 10px -4px rgba(0, 0, 0, 0.08);
		padding: 0.5rem 0;
		margin: 0;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
		z-index: 200;
		list-style: none;
		display: block !important;
		flex-direction: unset;
	}

	#primary-menu .menu-item-has-children:hover > .sub-menu {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateX(-50%) translateY(0);
	}

	#primary-menu .sub-menu li {
		margin: 0;
		padding: 0;
	}

	#primary-menu .sub-menu a {
		display: block;
		padding: 0.6rem 1.25rem;
		color: var(--color-zinc-900, #18181b) !important;
		white-space: nowrap;
		font-size: 0.9375rem;
		transition: color 0.15s ease, background-color 0.15s ease;
	}

	#primary-menu .sub-menu a:hover {
		color: var(--color-primary, #000) !important;
		background-color: #f9fafb;
	}
}

/* Mobile navigation: submenu indented below parent */
#mobile-primary-menu .sub-menu {
	margin-left: 1rem;
	margin-top: 0.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	list-style: none;
	padding: 0;
	border-left: 2px solid var(--color-zinc-200, #e4e4e7);
	padding-left: 1rem;
}
/* Wat feature: styles now handled by Tailwind CSS */
.wat-feature__content a {
    text-decoration: none !important;
}

/* Wat newsletter: button hover (Tailwind hover classes from PHP may not be in frontend build) */
.wat-newsletter__button {
	border: 2px solid transparent;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.wat-newsletter__button:hover {
	background-color: var(--color-white, #fff) !important;
	color: var(--color-primary, #000) !important;
	border-color: var(--color-primary, #000) !important;
}

/* Wat header image: button hovers (Tailwind hover classes from theme header.php may not be in frontend build) */
.wat-header-image-buttons .wat-header-image-button {
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.wat-header-image-buttons .wat-header-image-button:first-of-type {
	border: 2px solid transparent;
}
/* Alle buttons: zelfde hover – wit met primary tekst en rand */
.wat-header-image-buttons .wat-header-image-button:hover {
	background-color: var(--color-white, #fff) !important;
	color: var(--color-primary, #000) !important;
	border-color: var(--color-primary, #000) !important;
}
/* Wat before-after: slider styles now handled by Tailwind CSS */
/* Note: clipPath and dynamic left positioning remain inline styles due to dynamic values */
h1, h2, h3, h4, h5, h6 {
	line-height: 1;
}
/* Wat before-after placeholder: styles now handled by Tailwind CSS */

/* Wat posts grid: styles now handled by Tailwind CSS */

/* Isotope filtering styles for diensten posts grid */
.wat-posts-grid__filter-button.is-checked {
	background-color: #000;
	color: #fff;
	border-color: #000;
}

.wat-posts-grid__filter-button:hover {
	background-color: #f3f4f6;
}

.wat-posts-grid__filter-button.is-checked:hover {
	background-color: #1f2937;
}

/* Wat posts slider: button hover (Tailwind hover classes from PHP may not be in frontend build) */
.wat-posts-slider__button {
	border: 2px solid transparent;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.wat-posts-slider__button:hover {
	background-color: var(--color-white, #fff) !important;
	color: var(--color-primary, #000) !important;
	border-color: var(--color-primary, #000) !important;
	opacity: 1;
}

/* Wat container selector: skip button hover (outline-stijl: default wit/primary, hover primary/wit) */
.wat-container-selector__skip-button {
	border: 2px solid var(--color-primary, #000);
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.wat-container-selector__skip-button:hover {
	background-color: var(--color-primary, #000) !important;
	color: var(--color-white, #fff) !important;
	border-color: var(--color-white, #fff) !important;
}

/* Wat container selector: product button hover (Tailwind hover classes from JS may not be in frontend build) */
.wat-container-selector__product-button {
	border: 2px solid transparent;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.wat-container-selector__product-button:hover {
	background-color: var(--color-white, #fff) !important;
	color: var(--color-primary, #000) !important;
	border-color: var(--color-primary, #000) !important;
}

/* Wat container selector: order button hover (Tailwind hover classes from PHP may not be in frontend build) */
.wat-container-selector__order-button {
	border: 2px solid transparent;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.wat-container-selector__order-button:hover {
	background-color: var(--color-white, #fff) !important;
	color: var(--color-primary, #000) !important;
	border-color: var(--color-primary, #000) !important;
}

/* Wat FAQ: question blijft rounded, vraagtekst blauw bij hover */
.wat-faq__question {
	border-radius: 2rem; /* rounded-4xl, blijft rond bij hover */
	transition: background-color 0.2s ease;
}
.wat-faq__question:hover .wat-faq__question-text {
	color: var(--color-primary, #2563eb) !important;
}

/* Wat container selector: disabled optional product (single grond choice – rest not selectable) */
.wat-container-selector__optional-product--disabled {
	opacity: 0.6;
	pointer-events: none;
	cursor: not-allowed;
}
/* Selecteren-knop blijft klikbaar op uitgegrijsde kaarten om van grondsoort te wisselen */
.wat-container-selector__optional-product--disabled .wat-container-selector__select-button-wrap {
	pointer-events: auto;
	cursor: pointer;
}

/* Wat container selector: Selecteren-knop (grond) hover */
.wat-container-selector__select-grond-button {
	border: 2px solid transparent;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.wat-container-selector__select-grond-button:hover {
	background-color: var(--color-white, #fff) !important;
	color: var(--color-primary, #000) !important;
	border-color: var(--color-primary, #000) !important;
}

/* Wat container selector: quantity locked until grond is selected (select grond first, then amount) */
.wat-container-selector__optional-product--quantity-locked .wat-container-selector__optional-quantity,
.wat-container-selector__optional-product--quantity-locked .wat-container-selector__quantity-plus,
.wat-container-selector__optional-product--quantity-locked .wat-container-selector__quantity-minus {
	opacity: 0.7;
	cursor: not-allowed;
}

/* Wat container selector: continue button hover (Tailwind hover classes from PHP may not be in frontend build) */
.wat-container-selector__continue-button {
	border: 2px solid transparent;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.wat-container-selector__continue-button:hover {
	background-color: var(--color-white, #fff) !important;
	color: var(--color-primary, #000) !important;
	border-color: var(--color-primary, #000) !important;
}

/* Wat product delivery selector: continue button hover (Tailwind hover classes from PHP may not be in frontend build) */
.wat-product-delivery-selector__continue-button {
	border: 2px solid transparent;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.wat-product-delivery-selector__continue-button:hover {
	background-color: var(--color-white, #fff) !important;
	color: var(--color-primary, #000) !important;
	border-color: var(--color-primary, #000) !important;
}

/* Wat categories grid: button hover */
.wat-categories-grid__button {
	border: 2px solid transparent;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.wat-categories-grid__button:hover {
	background-color: var(--color-white, #fff) !important;
	color: var(--color-primary, #000) !important;
	border-color: var(--color-primary, #000) !important;
}

/* Wat posts grid: button hover (primary link, donker bij hover) */
.wat-posts-grid__button {
	transition: background-color 0.2s ease, color 0.2s ease;
}
.wat-posts-grid__button:hover {
	background-color: #1f2937 !important;
	color: var(--color-white, #fff) !important;
}

/* Wat pricing plans: button hover (popular = zwart, normaal = grijs) */
.wat-pricing-plans__button {
	transition: background-color 0.2s ease, color 0.2s ease;
}
.wat-pricing-plans__button.bg-black:hover {
	background-color: #1f2937 !important;
	color: var(--color-white, #fff) !important;
}
.wat-pricing-plans__button.bg-gray-200:hover {
	background-color: #d1d5db !important;
	color: #000 !important;
}

/* Wat product delivery selector: order button hover (secondary -> wit met secondary rand) */
.wat-product-delivery-selector__order-button {
	border: 2px solid transparent;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.wat-product-delivery-selector__order-button:hover {
	background-color: var(--color-white, #fff) !important;
	color: var(--color-secondary, #16a34a) !important;
	border-color: var(--color-secondary, #16a34a) !important;
}

/* Wat product selector: skip button hover */
.wat-product-selector__skip-button {
	transition: border-color 0.2s ease, background-color 0.2s ease;
}
.wat-product-selector__skip-button:hover {
	border-color: var(--color-primary, #000) !important;
}

/* Wat product selector: product button (Selecteren) hover */
.wat-product-selector__product-button {
	border: 2px solid transparent;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.wat-product-selector__product-button:hover {
	background-color: var(--color-white, #fff) !important;
	color: var(--color-primary, #000) !important;
	border-color: var(--color-primary, #000) !important;
}

/* Wat product selector: continue button hover */
.wat-product-selector__continue-button {
	border: 2px solid transparent;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.wat-product-selector__continue-button:hover {
	background-color: var(--color-white, #fff) !important;
	color: var(--color-primary, #000) !important;
	border-color: var(--color-primary, #000) !important;
}

/* Wat product selector: order button hover (groen) */
.wat-product-selector__order-button {
	transition: background-color 0.2s ease;
}
.wat-product-selector__order-button:hover:not(:disabled) {
	background-color: #15803d !important;
	color: var(--color-white, #fff) !important;
}

/* Wat posts slider: spacing between items */
.wat-posts-slider__container .slick-slide {
	margin: 0 12px;
}

.wat-posts-slider__container .slick-list {
	margin: 0 -12px;
}

.wat-posts-slider__container .slick-track {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}

/* Wat reviews block: gelijke kolomhoogte + slider vult kolom */
.wat-reviews-block .grid {
	align-items: stretch;
}

/* Eerste kolom rekt mee met grid */
.wat-reviews-block__intro-col {
	min-height: 0;
}

/* Tweede kolom: flex zodat slider 100% hoogte kan nemen */
.wat-reviews-block__slider-col {
	align-self: stretch;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

/* Slider container vult beschikbare kolomhoogte */
.wat-reviews-slider__container {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	border-radius: 25px;
	background-color: rgba(255, 255, 255, 0.1);
}

.wat-reviews-slider__container .slick-slide {
	margin: 0 12px;
	height: 100%;
}

.wat-reviews-slider__container .slick-slide > div {
	height: 100%;
}

.wat-reviews-slider__container .slick-list {
	margin: 0 -12px;
	flex: 1;
	min-height: 0;
}

.wat-reviews-slider__container.slick-initialized .slick-list {
	height: 100% !important;
}

.wat-reviews-slider__container .slick-track {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
	height: 100% !important;
	min-height: 0;
}

.wat-reviews-slider__container.slick-initialized {
	height: 100%;
}

.wat-reviews-slider__container.slick-initialized .slick-track {
	min-height: 0;
}

.wat-reviews-slider__item {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* md:container centreren vanaf md-breakpoint */
@media (min-width: 768px) {
	.md\:container {
		margin-left: auto;
		margin-right: auto;
	}

}

/* Header: list items verbergen en titel kleiner op schermen kleiner dan tablet */
@media (max-width: 767px) {
	.wat-header-image-list-items {
		display: none !important;
	}
	.oms4b-fields.oms4b-fields--form {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}
}

.oms4b-fields.oms4b-fields--form {
	display: grid;
  	grid-template-columns: auto auto;
	gap: 40px;
}
.oms4b-fields .oms4b-field.oms4b-field--details > div {
	border: 1px solid;
	border-radius:2rem;
	background: transparent;
}
.oms4b-fields .oms4b-field.oms4b-field--details div input {
	padding: 4px 8px;
}
.oms4b-fields .oms4b-field:last-child {
	background: #0082c7;
	color: white;
	text-align:center;
	padding: 8px 16px;
	border-radius: 2rem;
  grid-column: 1 / span 2;
	
}
.oms4b-fields .oms4b-field:last-child:hover {
	background: #ffffff;
	color: #0082c7;
	border: 1px solid #0082c7;
	
}

/* Block font size override: desktop only, overrides Theme Options */
@media (min-width: 1025px) {
	.wat-fs-desktop-override {
		font-size: var(--wat-fs-desktop) !important;
	}
}

/* Theme font size utilities (no Tailwind text-* classes) */
.wat-text-small {
	font-size: 0.875rem;
}
.wat-icon-m {
	font-size: 1.25rem;
}
.wat-icon-l {
	font-size: 1.5rem;
}
.wat-icon-xl {
	font-size: 1.875rem;
}
.wat-icon-s {
	font-size: 1rem;
}
.wat-text-large {
	font-size: 1.125rem;
}

/* Container Selector: Product description formatting */
.wat-container-selector__product-description {
	line-height: 1.6;
}

.wat-container-selector__product-description p {
	margin: 0.5rem 0;
}

.wat-container-selector__product-description p:first-child {
	margin-top: 0;
}

.wat-container-selector__product-description p:last-child {
	margin-bottom: 0;
}

.wat-container-selector__product-description ul,
.wat-container-selector__product-description ol {
	margin: 0.5rem 0;
	padding-left: 1.5rem;
}

.wat-container-selector__product-description li {
	margin: 0.25rem 0;
}

.wat-container-selector__product-description h1,
.wat-container-selector__product-description h2,
.wat-container-selector__product-description h3,
.wat-container-selector__product-description h4,
.wat-container-selector__product-description h5,
.wat-container-selector__product-description h6 {
	margin: 0.75rem 0 0.5rem 0;
	font-weight: 600;
}

.wat-container-selector__product-description h1:first-child,
.wat-container-selector__product-description h2:first-child,
.wat-container-selector__product-description h3:first-child,
.wat-container-selector__product-description h4:first-child,
.wat-container-selector__product-description h5:first-child,
.wat-container-selector__product-description h6:first-child {
	margin-top: 0;
}

.wat-container-selector__product-description strong {
	font-weight: 600;
}

.wat-container-selector__product-description em {
	font-style: italic;
}

.wat-container-selector__product-description a {
	color: inherit;
	text-decoration: underline;
}

.wat-container-selector__product-description a:hover {
	opacity: 0.8;
}

/* Container Selector: Category description formatting */
.wat-container-selector__category-description {
	line-height: 1.6;
}

.wat-container-selector__category-description p {
	margin: 0.5rem 0;
}

.wat-container-selector__category-description p:first-child {
	margin-top: 0;
}

.wat-container-selector__category-description p:last-child {
	margin-bottom: 0;
}

.wat-container-selector__category-description br {
	display: block;
	margin: 0.5rem 0;
	content: "";
}

.wat-container-selector__category-description ul,
.wat-container-selector__category-description ol {
	margin: 0.5rem 0;
	padding-left: 1.5rem;
}

.wat-container-selector__category-description li {
	margin: 0.25rem 0;
}

.wat-container-selector__category-description h1,
.wat-container-selector__category-description h2,
.wat-container-selector__category-description h3,
.wat-container-selector__category-description h4,
.wat-container-selector__category-description h5,
.wat-container-selector__category-description h6 {
	margin: 0.75rem 0 0.5rem 0;
	font-weight: 600;
}

.wat-container-selector__category-description h1:first-child,
.wat-container-selector__category-description h2:first-child,
.wat-container-selector__category-description h3:first-child,
.wat-container-selector__category-description h4:first-child,
.wat-container-selector__category-description h5:first-child,
.wat-container-selector__category-description h6:first-child {
	margin-top: 0;
}

.wat-container-selector__category-description strong {
	font-weight: 600;
}

.wat-container-selector__category-description em {
	font-style: italic;
}

.wat-container-selector__category-description a {
	color: inherit;
	text-decoration: underline;
}

.wat-container-selector__category-description a:hover {
	opacity: 0.8;
}

/* Wat Header Gallery: Accommodation header image gallery */
.wat-header-gallery {
	width: 100%;
	margin: 0 0 2rem 0;
}

.wat-header-gallery__container {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 10px;
	height: 400px;
}

.wat-header-gallery__main {
	position: relative;
	overflow: hidden;
	border-radius: 8px;
	cursor: pointer;
}

.wat-header-gallery__main-item {
	width: 100%;
	height: 100%;
}

.wat-header-gallery__main-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wat-header-gallery__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.wat-header-gallery__grid-item {
	position: relative;
	overflow: hidden;
	border-radius: 8px;
	cursor: pointer;
}

.wat-header-gallery__grid-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wat-header-gallery__view-more-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
}

.wat-header-gallery__view-more-btn {
	border: none;
	padding: 10px 20px;
	border-radius: 2rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 500;
	color: #fff;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.wat-header-gallery__view-more-btn:hover {
	background-color: var(--color-white, #fff) !important;
	color: var(--color-primary, #000) !important;
}

.wat-header-gallery__view-more-btn .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

/* Wat Header Gallery: Lightbox */
.wat-header-gallery__lightbox {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.95);
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wat-header-gallery__lightbox-content {
	position: relative;
	max-width: 90%;
	max-height: 90%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wat-header-gallery__lightbox-image {
	max-width: 100%;
	max-height: 85vh;
	object-fit: contain;
}

.wat-header-gallery__lightbox-close {
	position: absolute;
	top: 20px;
	right: 20px;
	background: rgba(255, 255, 255, 0.2);
	border: none;
	color: #fff;
	font-size: 32px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.3s ease;
	z-index: 100000;
}

.wat-header-gallery__lightbox-close:hover {
	background: rgba(255, 255, 255, 0.4);
}

.wat-header-gallery__lightbox-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, 0.2);
	border: none;
	color: #fff;
	font-size: 24px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.3s ease;
}

.wat-header-gallery__lightbox-nav:hover {
	background: rgba(255, 255, 255, 0.4);
}

.wat-header-gallery__lightbox-nav--prev {
	left: 20px;
}

.wat-header-gallery__lightbox-nav--next {
	right: 20px;
}

.wat-header-gallery__lightbox-counter {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	color: #fff;
	font-size: 14px;
	background: rgba(0, 0, 0, 0.5);
	padding: 8px 16px;
	border-radius: 2rem;
}

/* Wat Header Gallery: Responsive */
@media (max-width: 768px) {
	.wat-header-gallery__container {
		grid-template-columns: 1fr;
		height: auto;
	}
	
	.wat-header-gallery__main {
		height: 250px;
	}
	
	.wat-header-gallery__grid {
		grid-template-columns: 1fr 1fr;
		height: 200px;
	}
	
	.wat-header-gallery__grid-item {
		height: 100%;
	}
	
	.wat-header-gallery__lightbox-nav {
		width: 40px;
		height: 40px;
		font-size: 20px;
	}
	
	.wat-header-gallery__lightbox-nav--prev {
		left: 10px;
	}
	
	.wat-header-gallery__lightbox-nav--next {
		right: 10px;
	}
}

/* WAT List Block */
.wat-list-block {
	width: 100%;
}

.wat-list-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 0;
	border-bottom: 1px solid #eee;
}

.wat-list-row:last-child {
	border-bottom: none;
}

.wat-list-left {
	text-align: left;
	flex: 1;
}

.wat-list-right {
	text-align: right;
	flex: 1;
}