/*
Theme Name: Woonkade
Theme URI: https://woonkade.org
Author: PingVinni
Description: Kameralny dom nad wodą w Gdańsku-Sobieszewie.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: woonkade
*/

:root {
	--wkd-steen: #e7e2d6;
	--wkd-inkt: #2c2824;
	--wkd-rivier: #4a6d7c;
	--wkd-papier: #f4f1ea;
	--wkd-display: "DM Serif Display", serif;
	--wkd-text: "Figtree", sans-serif;
}
* { box-sizing: border-box; }
body {
	margin: 0;
	font-family: var(--wkd-text);
	color: var(--wkd-inkt);
	background: var(--wkd-steen);
	line-height: 1.7;
	font-size: 1.05rem;
}
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--wkd-display); font-weight: 400; margin: 0 0 0.45em; line-height: 1.12; }
h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
h2 { font-size: clamp(1.45rem, 2.8vw, 2.15rem); }
a { color: var(--wkd-rivier); }
address { font-style: normal; }
.wkd-knop, .wkd-lijnknop {
	display: inline-block; padding: 12px 18px; text-decoration: none; font-weight: 650;
	font-family: var(--wkd-text); border: 0; cursor: pointer; letter-spacing: 0.03em;
}
.wkd-knop { background: var(--wkd-rivier); color: #fff; }
.wkd-knop:hover { background: #3a5865; }
.wkd-lijnknop { background: transparent; box-shadow: inset 0 0 0 1.5px var(--wkd-inkt); color: var(--wkd-inkt); }
.wkd-lijnknop:hover { background: var(--wkd-papier); }
.wkd-kicker {
	font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--wkd-rivier); font-weight: 650; margin: 0 0 8px;
}

/* Header: address row, then nav row */
.wkd-kop { width: 100%; }
.wkd-adresrij {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 22px;
	padding: 8px 6vw;
	background: var(--wkd-steen);
	color: var(--wkd-inkt);
	font-size: 0.82rem;
	border-bottom: 1px solid #d4cfc2;
}
.wkd-adresrij a { color: var(--wkd-inkt); text-decoration: none; }
.wkd-adresrij a:hover { color: var(--wkd-rivier); }
.wkd-navrij {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 0 6vw;
	background: var(--wkd-inkt);
	min-height: 58px;
}
.wkd-merk {
	font-family: var(--wkd-display);
	color: var(--wkd-steen);
	text-decoration: none;
	font-size: 1.35rem;
	letter-spacing: 0.04em;
	flex-shrink: 0;
}
.wkd-navrij nav { flex: 1; }
.wkd-navrij ul { display: flex; flex-wrap: wrap; gap: 6px 20px; list-style: none; margin: 0; padding: 12px 0; }
.wkd-navrij a { color: var(--wkd-steen); text-decoration: none; font-size: 0.9rem; font-weight: 600; }
.wkd-navrij .current-menu-item a { box-shadow: inset 0 -2px 0 var(--wkd-rivier); }
.wkd-open {
	display: none; background: var(--wkd-rivier); color: #fff; border: 0;
	padding: 8px 12px; cursor: pointer; font-family: inherit;
}
.wkd-schuif { display: none; background: var(--wkd-inkt); color: var(--wkd-steen); padding: 18px 6vw 28px; }
.wkd-schuif a { color: var(--wkd-steen); }
.wkd-schuif.is-open, .wkd-schuif:not([hidden]) { display: block; }
.wkd-schuif ul { list-style: none; margin: 12px 0 0; padding: 0; }
.wkd-schuif li { padding: 8px 0; border-bottom: 1px solid #3d3833; }

/* Divider: three offset stone bars */
.wkd-steen {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 26px 6vw;
	background: var(--wkd-steen);
}
.wkd-steen i {
	display: block;
	height: 3px;
	background: var(--wkd-rivier);
	opacity: 0.72;
}
.wkd-steen i:nth-child(1) { width: 28%; margin-left: 0; }
.wkd-steen i:nth-child(2) { width: 28%; margin-left: 14%; }
.wkd-steen i:nth-child(3) { width: 28%; margin-left: 28%; }

.wkd-baan { padding: 56px 6vw 80px; width: 100%; max-width: none; }
.wkd-baan p { max-width: none; }

/* Home: house hero */
.wkd-huisbaan {
	min-height: 78vh;
	background: #2c2824 url("images/huis.jpg") 55% 42%/cover;
	display: flex;
	align-items: flex-end;
}
.wkd-huisplaat {
	width: 100%;
	background: rgba(231, 226, 214, 0.93);
	padding: 32px 6vw 44px;
}
.wkd-huisplaat p { max-width: none; }

/* Three stays as alternating quay bands */
.wkd-verblijfbaan { padding: 48px 0 20px; }
.wkd-verblijfbaan > .wkd-kicker,
.wkd-verblijfbaan > h2,
.wkd-verblijfbaan > p { padding-left: 6vw; padding-right: 6vw; }
.wkd-stee {
	display: grid;
	grid-template-columns: 40% 1fr;
	margin: 28px 0 0;
	background: var(--wkd-papier);
}
.wkd-stee:nth-child(even) { grid-template-columns: 1fr 40%; }
.wkd-stee:nth-child(even) figure { order: 2; }
.wkd-stee figure { min-height: 280px; margin: 0; background-size: cover; background-position: center; }
.wkd-stee-copy { padding: 28px 6vw 32px; }
.wkd-stee-copy strong {
	display: block;
	margin-top: 12px;
	font-family: var(--wkd-display);
	font-size: 1.7rem;
	color: var(--wkd-rivier);
}
.wkd-f-kade { background-image: url("images/kamer.jpg"); }
.wkd-f-tuin { background-image: url("images/tuin.jpg"); }
.wkd-f-pand { background-image: url("images/pand.jpg"); }
.wkd-f-kade2 { background-image: url("images/slaap.jpg"); }
.wkd-f-tuin2 { background-image: url("images/haag.jpg"); }
.wkd-f-pand2 { background-image: url("images/gevel.jpg"); }

/* Extras widget: arrival ledger */
.wkd-extra-tafel {
	padding: 52px 6vw 72px;
	background: var(--wkd-papier);
}
.wkd-raming {
	margin-top: 22px;
	padding: 22px 24px 26px;
	background: var(--wkd-steen);
	border-left: 7px solid var(--wkd-rivier);
}
.wkd-raming label, .wkd-raming legend { font-weight: 650; }
.wkd-raming select {
	display: block;
	width: 100%;
	margin-top: 8px;
	padding: 12px 14px;
	border: 1px solid #c8c2b4;
	font-family: inherit;
	background: #fff;
}
.wkd-raming fieldset { border: 0; padding: 16px 0 0; margin: 0; }
.wkd-raming fieldset label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 500;
	padding: 8px 0;
	border-bottom: 1px solid #d8d2c4;
}
.wkd-raming input[type="checkbox"] { width: 1.1rem; height: 1.1rem; }
.wkd-som {
	font-family: var(--wkd-display);
	font-size: 1.65rem;
	margin: 18px 0 0;
	color: var(--wkd-inkt);
}

/* Hours */
.wkd-urenbaan {
	padding: 52px 6vw 72px;
	background: var(--wkd-inkt);
	color: var(--wkd-steen);
}
.wkd-urenbaan > p { margin: 0 0 1.1rem; }
.wkd-urenbaan a { color: #b7c9d1; }
.wkd-urenbaan .wkd-kicker { color: #9bb4be; }
.wkd-urengordel {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
	margin: 28px 0 36px;
}
.wkd-urengordel article {
	padding: 0;
	border-right: 0;
	min-width: 0;
}
.wkd-urengordel figure {
	height: 176px;
	margin: 0 0 14px;
	overflow: hidden;
	background: #1a1816;
}
.wkd-urengordel figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.wkd-urengordel h3 { color: #fff; margin: 0 0 4px; }
.wkd-uurtijd {
	font-family: var(--wkd-display);
	font-size: 1.35rem;
	color: #fff;
	margin: 0 0 10px;
}
.wkd-urengordel article > p:last-child { margin: 0; font-size: 0.95rem; line-height: 1.5; }

/* Photo bands */
.wkd-foto-huis { min-height: 42vh; background: #2c2824 url("images/about-huis.jpg") 50% 40%/cover; margin: 0; }
.wkd-foto-tuin { min-height: 38vh; background: #2c2824 url("images/about-tuin.jpg") 50% 50%/cover; margin: 0; }
.wkd-foto-kamer { min-height: 320px; background: #2c2824 url("images/kamer.jpg") 50% 45%/cover; margin: 0; }
.wkd-foto-vecht { min-height: 36vh; background: #2c2824 url("images/vecht.jpg") 45% 50%/cover; margin: 0; }
.wkd-foto-tafel { min-height: 320px; background: #2c2824 url("images/tafel.jpg") 50% 48%/cover; margin: 0; }
.wkd-foto-deur { min-height: 300px; background: #2c2824 url("images/deur.jpg") 50% 55%/cover; margin: 0; }
.wkd-foto-index { min-height: 36vh; background: #2c2824 url("images/indextuin.jpg") 50% 50%/cover; margin: 0; }
.wkd-foto-contact-deur { min-height: 300px; background: #2c2824 url("images/contact-deur.jpg") 50% 55%/cover; margin: 0; }
.wkd-foto-kadewater { min-height: 36vh; background: #2c2824 url("images/kadewater.jpg") 45% 50%/cover; margin: 0; }
.wkd-foto-leeg { min-height: 36vh; background: #2c2824 url("images/leegkade.jpg") 45% 50%/cover; margin: 0; }

/* About: year rail */
.wkd-jaarraal { margin: 28px 0; padding: 0; list-style: none; }
.wkd-jaarraal li {
	display: grid;
	grid-template-columns: 6.5rem 1fr;
	gap: 18px;
	padding: 14px 0;
	border-top: 1px solid #d0cabb;
}
.wkd-jaarraal strong { font-family: var(--wkd-display); font-size: 1.35rem; color: var(--wkd-rivier); }

/* Features stay stack */
.wkd-inzet { display: flex; flex-direction: column; gap: 0; margin: 32px 0; }
.wkd-inzet article {
	display: grid;
	grid-template-columns: 220px 1fr auto;
	gap: 22px;
	align-items: center;
	padding: 22px 0;
	border-bottom: 1px solid #d0cabb;
}
.wkd-inzet figure { min-height: 150px; margin: 0; background-size: cover; background-position: center; }
.wkd-inzet strong { font-family: var(--wkd-display); font-size: 1.7rem; color: var(--wkd-rivier); }

/* Reviews: guest ledger rows */
.wkd-lijst { margin: 24px 0 0; border-top: 2px solid var(--wkd-inkt); }
.wkd-lijstrij {
	display: grid;
	grid-template-columns: 14rem 1fr;
	gap: 20px;
	padding: 16px 0 18px;
	border-bottom: 1px solid #c9c3b5;
	background: repeating-linear-gradient(transparent 0 31px, rgba(74, 109, 124, 0.08) 31px 32px);
}
.wkd-lijstrij header { font-family: var(--wkd-display); font-size: 1.15rem; }
.wkd-lijstrij span { display: block; font-family: var(--wkd-text); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wkd-rivier); margin-top: 4px; }
.wkd-lijstrij p { margin: 0; }

/* Blog: wide editorial headline + dek */
.wkd-kopdek { padding: 48px 6vw 28px; }
.wkd-kopdek + .wkd-kopdek { padding-top: 8px; }
.wkd-dek {
	font-size: 1.28rem;
	line-height: 1.55;
	color: var(--wkd-rivier);
	margin: 0 0 16px;
}
.wkd-stuk > p:first-of-type {
	font-size: 1.28rem;
	line-height: 1.55;
	color: var(--wkd-rivier);
}
.wkd-kopdek article, .wkd-notitierij {
	padding: 28px 0 32px;
	border-bottom: 1px solid #d0cabb;
}
.wkd-notitierij time { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wkd-rivier); }
.wkd-notitierij h2 { margin-top: 6px; }
.wkd-notitierij h2 a { color: var(--wkd-inkt); text-decoration: none; }

.wkd-faq details { border-bottom: 1px solid #d0cabb; padding: 12px 0; }
.wkd-faq summary { cursor: pointer; font-weight: 650; }
.wkd-form label { display: block; margin: 0 0 14px; font-weight: 650; font-size: 0.92rem; }
.wkd-form input, .wkd-form textarea, .wkd-form select {
	width: 100%; padding: 12px 14px; border: 1px solid #c8c2b4; font-family: inherit; background: #fff; margin-top: 6px;
}
.wkd-form input:focus, .wkd-form textarea:focus, .wkd-form select:focus {
	outline: 2px solid var(--wkd-rivier); border-color: var(--wkd-rivier);
}
.wkd-form input[type="checkbox"] { width: auto; margin-right: 8px; }
.wkd-baan table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.wkd-baan th, .wkd-baan td { border-bottom: 1px solid #c9c3b5; padding: 10px 12px; text-align: left; }
.wkd-baan th { background: var(--wkd-papier); font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; }
.wkd-melding { background: #dce6ea; padding: 10px 14px; }
.wkd-melding-fout { background: #ead8d4; }

/* Footer: quay plaque + river hours + legal line */
.wkd-kadevoet { background: var(--wkd-inkt); color: var(--wkd-steen); }
.wkd-voetplaat {
	padding: 40px 6vw 32px;
	border-left: 14px solid var(--wkd-rivier);
}
.wkd-voetplaat strong { font-family: var(--wkd-display); font-size: 1.6rem; display: block; margin-bottom: 10px; }
.wkd-voetplaat p { margin: 0 0 12px; }
.wkd-voeturen {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	padding: 14px 6vw;
	background: var(--wkd-rivier);
	color: #fff;
	font-size: 0.88rem;
}
.wkd-voetjur {
	padding: 16px 6vw 28px;
	font-size: 0.86rem;
}
.wkd-voetjur a { color: #b7c9d1; margin-right: 14px; }
.wkd-rechten {
	margin: 0;
	padding: 10px 6vw 22px;
	font-size: 0.82rem;
	border-top: 1px solid #3a3632;
}

.wkd-koek {
	position: fixed; bottom: 0; left: 0; right: 0;
	background: var(--wkd-inkt); color: var(--wkd-steen);
	padding: 14px 6vw; display: none; z-index: 20;
}
.wkd-koek a { color: #b7c9d1; }
.wkd-koek.is-open { display: block; }
.wkd-koek .wkd-lijnknop { box-shadow: inset 0 0 0 1.5px var(--wkd-steen); color: var(--wkd-steen); margin-right: 8px; }

@media (max-width: 880px) {
	.wkd-navrij nav { display: none; }
	.wkd-open { display: block; }
	.wkd-stee, .wkd-stee:nth-child(even), .wkd-inzet article, .wkd-lijstrij { display: block; }
	.wkd-stee:nth-child(even) figure { order: 0; }
	.wkd-stee figure, .wkd-inzet figure { min-height: 200px; }
	.wkd-urengordel { grid-template-columns: 1fr 1fr; }
	.wkd-urengordel article { border-right: 0; border-bottom: 0; }
	.wkd-urengordel figure { height: 160px; }
	.wkd-adresrij { font-size: 0.76rem; }
}

@media (max-width: 560px) {
	.wkd-urengordel { grid-template-columns: 1fr; }
	.wkd-urengordel figure { height: 200px; }
}