/* ==========================================================================
   Het Zeeuws Meisje - aanvullende thema-stijlen
   theme.json regelt kleur, typografie en spacing. Hier staat alleen wat
   theme.json niet kan: componenten, grids en interactie.
   ========================================================================== */

:root {
	--hzm-overgang: 200ms cubic-bezier(0.4, 0, 0.2, 1);
	--hzm-rand: color-mix(in srgb, var(--wp--preset--color--duin) 95%, transparent);
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Zichtbare focus voor toetsenbordgebruikers, ook binnen blokken. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--zonsondergang);
	outline-offset: 3px;
	border-radius: 3px;
}

/* Overslaan-naar-inhoud link. */
.hzm-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--zee);
	color: var(--wp--preset--color--schelp);
	text-decoration: none;
	border-radius: 0 0 6px 0;
}
.hzm-skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   Koptekst
   -------------------------------------------------------------------------- */

.hzm-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--zand);
	border-bottom: 1px solid var(--hzm-rand);
}

/* Het logo is uitgespaard: de letters zijn doorzichtig en nemen de
   achtergrond van de kopbalk aan. Daarom is die balk dekkend. */
.hzm-logo.wp-block-site-logo {
	margin: 0;
	line-height: 0;
	flex-shrink: 0;
}

/*
   Op hoogte sturen, niet op breedte: het logo is bijna vierkant en zou bij een
   vaste breedte de kopbalk onnodig hoog maken. Zo blijft de balk voorspelbaar.
*/
.hzm-logo.wp-block-site-logo img {
	height: 124px;
	width: auto;
	max-width: none;
	display: block;
}

@media (max-width: 1179px) {
	.hzm-logo.wp-block-site-logo img { height: 100px; }
}

@media (max-width: 599px) {
	.hzm-logo.wp-block-site-logo img { height: 76px; }
}

/* Navigatie: rustige links, subtiel onderstreept bij hover en op de actieve pagina. */
.hzm-header .wp-block-navigation {
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 500;
	letter-spacing: 0.01em;
}

.hzm-header .wp-block-navigation-item__content {
	text-decoration: none;
	padding-block: 0.35rem;
	border-bottom: 2px solid transparent;
	transition: border-color var(--hzm-overgang), color var(--hzm-overgang);
}

.hzm-header .wp-block-navigation-item__content:hover,
.hzm-header .current-menu-item > .wp-block-navigation-item__content {
	border-bottom-color: var(--wp--preset--color--zonsondergang);
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hzm-hero { position: relative; isolation: isolate; }

.hzm-hero .wp-block-cover__background {
	background: linear-gradient(
		180deg,
		rgba(29, 78, 90, 0.15) 0%,
		rgba(29, 78, 90, 0.30) 45%,
		rgba(29, 78, 90, 0.62) 100%
	);
}

.hzm-hero__titel {
	text-shadow: 0 2px 24px rgba(29, 78, 90, 0.45);
	max-width: 20ch;
}

.hzm-hero__intro {
	max-width: 46ch;
	text-shadow: 0 1px 12px rgba(29, 78, 90, 0.5);
}

/*
   De hero op een binnenpagina is lager dan die op de homepage: daaronder
   begint meteen de inhoud, dus hij hoeft het scherm niet te vullen.
*/
.hzm-hero--pagina .hzm-hero__titel {
	max-width: 24ch;
	margin-bottom: 0;
}

.hzm-hero--pagina .hzm-hero__intro {
	margin-top: 0.9rem;
}

/* De kopbalk is dekkend, dus de hero begint eronder en niet erachter. */
.hzm-hero--pagina {
	margin-top: 0;
}

/* --------------------------------------------------------------------------
   Kenmerken-rij (personen, slaapkamers, oppervlakte, afstand strand)
   -------------------------------------------------------------------------- */

.hzm-kenmerken {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: clamp(1rem, 3vw, 2.5rem);
	text-align: center;
}

.hzm-kenmerk__waarde {
	font-family: var(--wp--preset--font-family--kop);
	font-size: var(--wp--preset--font-size--kop-m);
	font-weight: 500;
	line-height: 1.1;
	color: var(--wp--preset--color--zee);
	display: block;
}

.hzm-kenmerk__label {
	font-size: var(--wp--preset--font-size--klein);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grijs);
	display: block;
	margin-top: 0.4rem;
}

/* --------------------------------------------------------------------------
   Fotogrids
   -------------------------------------------------------------------------- */

.hzm-fotogrid.wp-block-gallery {
	--wp--style--unstable-gallery-gap: clamp(0.5rem, 1.2vw, 1rem);
	gap: clamp(0.5rem, 1.2vw, 1rem);
}

.hzm-fotogrid .wp-block-image img {
	border-radius: 6px;
	transition: transform var(--hzm-overgang), box-shadow var(--hzm-overgang);
}

.hzm-fotogrid .wp-block-image:hover img {
	transform: scale(1.015);
	box-shadow: var(--wp--preset--shadow--zacht);
}

/* Bijschriften over de foto, alleen op schermen waar dat past. */
@media (min-width: 600px) {
	.hzm-fotogrid.hzm-fotogrid--bijschrift figure.wp-block-image { position: relative; }

	.hzm-fotogrid.hzm-fotogrid--bijschrift figcaption {
		position: absolute;
		inset: auto 0 0 0;
		margin: 0;
		padding: 2.5rem 0.9rem 0.7rem;
		background: linear-gradient(180deg, transparent, rgba(29, 78, 90, 0.78));
		color: #fff;
		font-size: var(--wp--preset--font-size--klein);
		border-radius: 0 0 6px 6px;
		opacity: 0;
		transition: opacity var(--hzm-overgang);
	}

	.hzm-fotogrid.hzm-fotogrid--bijschrift figure.wp-block-image:hover figcaption,
	.hzm-fotogrid.hzm-fotogrid--bijschrift figure.wp-block-image:focus-within figcaption {
		opacity: 1;
	}
}

/* --------------------------------------------------------------------------
   Kaarten (omgeving, uitstapjes)
   -------------------------------------------------------------------------- */

.hzm-kaart {
	background: var(--wp--preset--color--wit);
	border: 1px solid var(--hzm-rand);
	border-radius: 10px;
	overflow: hidden;
	height: 100%;
	transition: transform var(--hzm-overgang), box-shadow var(--hzm-overgang);
}

.hzm-kaart:hover {
	transform: translateY(-3px);
	box-shadow: var(--wp--preset--shadow--zacht);
}

.hzm-kaart .wp-block-image { margin: 0; }

.hzm-kaart .wp-block-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0;
}

.hzm-kaart__body { padding: clamp(1rem, 2.5vw, 1.5rem); }

.hzm-kaart__body :where(h2, h3, h4) { margin-top: 0; }

.hzm-kaart__afstand {
	display: inline-block;
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--helmgras);
	margin-bottom: 0.4rem;
}

/* --------------------------------------------------------------------------
   Tarieventabel
   -------------------------------------------------------------------------- */

.hzm-tarieven table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.hzm-tarieven :where(th, td) {
	padding: 0.85rem 1rem;
	text-align: left;
	border-bottom: 1px solid var(--hzm-rand);
}

.hzm-tarieven th {
	font-size: var(--wp--preset--font-size--klein);
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grijs);
	font-weight: 600;
}

.hzm-tarieven td:last-child,
.hzm-tarieven th:last-child { text-align: right; }

.hzm-tarieven tbody tr:hover { background: var(--wp--preset--color--schelp); }

.hzm-tarieven__prijs {
	font-family: var(--wp--preset--font-family--kop);
	font-size: var(--wp--preset--font-size--groot);
	color: var(--wp--preset--color--zee);
	white-space: nowrap;
}

/* Op smalle schermen de tabel horizontaal kunnen schuiven. */
.hzm-tarieven { overflow-x: auto; }

/* --------------------------------------------------------------------------
   Voettekst
   -------------------------------------------------------------------------- */

.hzm-footer {
	background: var(--wp--preset--color--zee);
	color: color-mix(in srgb, var(--wp--preset--color--schelp) 85%, transparent);
}

.hzm-footer :where(h2, h3, h4, h5, h6) { color: var(--wp--preset--color--schelp); }

.hzm-footer a { color: var(--wp--preset--color--schelp); }

.hzm-footer a:hover { color: var(--wp--preset--color--duin); }

/* --------------------------------------------------------------------------
   Hoofdmenu (eigen navigatieblok, volgt de actieve taal)
   -------------------------------------------------------------------------- */

.hzm-nav {
	display: flex;
	align-items: center;
}

.hzm-nav__schakelaar {
	display: none;
	background: none;
	border: 0;
	padding: 0.4rem;
	color: var(--wp--preset--color--zee);
	cursor: pointer;
}

.hzm-nav__paneel {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2rem);
}

.hzm-nav__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: clamp(0.9rem, 2vw, 1.75rem);
}

.hzm-nav__link {
	text-decoration: none;
	font-size: var(--wp--preset--font-size--normaal);
	font-weight: 500;
	color: var(--wp--preset--color--zee);
	padding-block: 0.35rem;
	border-bottom: 2px solid transparent;
	transition: border-color var(--hzm-overgang), color var(--hzm-overgang);
	white-space: nowrap;
}

.hzm-nav__link:hover,
.hzm-nav__link.is-actief {
	border-bottom-color: var(--wp--preset--color--zonsondergang);
	color: var(--wp--preset--color--zee);
	text-decoration: none;
}

.hzm-talen {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 0.35rem;
	align-items: center;
}

.hzm-talen__link {
	display: inline-block;
	text-decoration: none;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--grijs);
	padding: 0.3rem 0.5rem;
	border-radius: 4px;
	transition: background-color var(--hzm-overgang), color var(--hzm-overgang);
}

.hzm-talen__link:hover {
	background: var(--wp--preset--color--schelp);
	color: var(--wp--preset--color--zee);
	text-decoration: none;
}

.hzm-talen__link.is-actief {
	background: var(--wp--preset--color--zee);
	color: var(--wp--preset--color--schelp);
}

.hzm-nav__knop {
	display: inline-block;
	text-decoration: none;
	background: var(--wp--preset--color--zee);
	color: var(--wp--preset--color--schelp);
	font-size: 0.98rem;
	font-weight: 600;
	padding: 0.72em 1.5em;
	border-radius: 999px;
	white-space: nowrap;
	transition: background-color var(--hzm-overgang);
}

.hzm-nav__knop:hover {
	background: var(--wp--preset--color--zee-licht);
	color: var(--wp--preset--color--schelp);
	text-decoration: none;
}

/* Onder 1180px klapt het menu open vanuit de knop. */
@media (max-width: 1179px) {
	.hzm-nav__schakelaar { display: block; }

	.hzm-nav__paneel {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0.5rem;
		padding: 1.25rem var(--wp--preset--spacing--30) 1.75rem;
		background: var(--wp--preset--color--zand);
		border-bottom: 1px solid var(--hzm-rand);
		box-shadow: var(--wp--preset--shadow--zacht);
		display: none;
	}

	.hzm-nav__paneel.is-open { display: flex; }

	.hzm-nav__lijst {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.hzm-nav__link {
		display: block;
		padding: 0.75rem 0;
		border-bottom: 1px solid var(--hzm-rand);
		font-size: var(--wp--preset--font-size--normaal);
	}

	.hzm-nav__link.is-actief { border-bottom-color: var(--wp--preset--color--zonsondergang); }

	.hzm-talen { margin-top: 0.75rem; }

	.hzm-nav__knop { text-align: center; margin-top: 0.5rem; }
}

.hzm-header { position: sticky; }

/* --------------------------------------------------------------------------
   Voettekst
   -------------------------------------------------------------------------- */

.hzm-voet {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: clamp(1.5rem, 4vw, 3rem);
}

.hzm-voet__titel {
	font-family: var(--wp--preset--font-family--kop);
	font-size: var(--wp--preset--font-size--kop-s);
	font-weight: 500;
	margin: 0 0 0.6rem;
	color: var(--wp--preset--color--schelp);
}

.hzm-voet__kop {
	font-family: var(--wp--preset--font-family--tekst);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	margin: 0 0 0.6rem;
	color: var(--wp--preset--color--schelp);
}

.hzm-voet p {
	margin: 0;
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.7;
}

.hzm-voet__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--klein);
	line-height: 2;
}

.hzm-voet__slot {
	margin: clamp(2rem, 5vw, 3.5rem) 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--wp--preset--color--zee-licht);
	text-align: center;
	font-size: var(--wp--preset--font-size--klein);
	opacity: 0.85;
}

/* --------------------------------------------------------------------------
   Vergrote weergave van foto's (lightbox van WordPress zelf)
   -------------------------------------------------------------------------- */

/* Standaard is de achtergrond wit; donker laat de foto's beter uitkomen. */
.wp-lightbox-overlay .scrim {
	background-color: var(--wp--preset--color--inkt);
	opacity: 0.94;
}

.wp-lightbox-overlay .wp-lightbox-close-button {
	color: var(--wp--preset--color--schelp);
}

.wp-lightbox-overlay .wp-lightbox-close-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--zonsondergang);
	outline-offset: 3px;
	border-radius: 4px;
}

/* De vergrootknop rechtsboven in de foto. */
.hzm-fotogrid button.lightbox-trigger,
.wp-block-image button.lightbox-trigger {
	background: color-mix(in srgb, var(--wp--preset--color--inkt) 55%, transparent);
	border-radius: 4px;
	opacity: 0;
	transition: opacity var(--hzm-overgang);
}

.wp-block-image:hover button.lightbox-trigger,
.wp-block-image:focus-within button.lightbox-trigger,
button.lightbox-trigger:focus-visible {
	opacity: 1;
}

/* Op aanraakschermen is er geen hover, dus daar staat de knop altijd aan. */
@media (hover: none) {
	.wp-block-image button.lightbox-trigger { opacity: 1; }
}

/* Het bijschrift zit onderin de foto, de knop bovenin: die botsen niet. */
.hzm-fotogrid .wp-block-image:hover img {
	transform: none;
}

.hzm-fotogrid .wp-block-image {
	overflow: hidden;
	border-radius: 6px;
}

.hzm-fotogrid .wp-block-image img {
	transition: transform var(--hzm-overgang);
}

.hzm-fotogrid .wp-block-image:hover img,
.hzm-fotogrid .wp-block-image:focus-within img {
	transform: scale(1.03);
}

.hzm-voet__email {
	margin-top: 0.6rem !important;
	word-break: break-word;
}

/* Kop boven een tarieventabel van een seizoen. */
.hzm-tarieven__jaar {
	font-size: var(--wp--preset--font-size--kop-s);
	margin: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--20);
}

.hzm-tarieven__jaar:first-child {
	margin-top: 0;
}

/* --------------------------------------------------------------------------
   Huisje vooraan in het menu
   -------------------------------------------------------------------------- */

.hzm-nav__link--home {
	display: flex;
	align-items: center;
	padding-block: 0.25rem;
}

.hzm-nav__huis {
	display: block;
	transition: transform var(--hzm-overgang);
}

.hzm-nav__link--home:hover .hzm-nav__huis {
	transform: translateY(-1px);
}

/* Alleen zichtbaar voor schermlezers. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* In het uitklapmenu leest een woord prettiger dan een los pictogram. */
@media (max-width: 1179px) {
	.hzm-nav__link--home {
		gap: 0.6rem;
	}

	.hzm-nav__link--home .screen-reader-text {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		clip-path: none;
	}
}