/* ===========================================
   LINDA VAN DER KOIJK — STYLE.CSS
   Design transported from the original site (2010s, by Joeri Boodt),
   rebuilt database-free. Lightbox (auto/HDR toggles) ported from
   joeriboodt.nl, restyled to this site's plain black/white chrome
   instead of the Liquid Glass system.
   =========================================== */

/* ---------- Reset ---------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

/* ---------- Root tokens ---------- */
:root {
	--outside-bg: #ACCAC9;
	--inside-bg: #ECF9F9;

	--lb-bg: rgba(20, 20, 20, 0.6);
	--lb-bg-hover: rgba(20, 20, 20, 0.8);
	--lb-border: rgba(255, 255, 255, 0.35);
	--lb-border-strong: rgba(255, 255, 255, 0.6);
	--lb-text: #fff;
	--lb-text-secondary: rgba(255, 255, 255, 0.75);
}

/* ---------- Base ---------- */
html {
	padding: 1em;
}

body {
	max-width: 1280px;
	min-width: 280px;
	font-family: Georgia, serif;
	margin: 0 auto;
	word-wrap: break-word;
	background-color: var(--outside-bg);
}

section p {
	line-height: 1.4em;
	margin: 0.8em 0;
}

h1 { font-size: 2em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.6em; }
h4 { font-size: 1.4em; }
h5 { font-size: 1.3em; }
h6 { font-size: 1.2em; }
h1, h2, h3, h4, h5, h6 {
	margin: 0.2em 0;
	padding: 0.2em 0;
}

a { text-decoration: none; color: black; }
a:link { text-decoration: none; color: black; }

strong, b { font-weight: bold; }
em { font-style: italic; }

img {
	max-width: 200%;
	height: auto;
	margin: 0.5em;
}

section img {
	max-width: 98%;
	border: 3px solid black;
	background-color: black;
	border-radius: 0.3em;
}

footer {
	border-top: 3px solid black;
	padding-top: 0.3em;
	margin-top: 0.7em;
}

.taCenter { text-align: center; }

.clear:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.tekstArea {
	text-align: left;
	margin: 0.8em 0;
}

.tekstArea p.center,
.tekstArea p[class~="center"] {
	text-align: center;
}

.tekstMargin { margin: 0.7em; }

/* ---------- Navigation ---------- */
#navigation {
	border-top: 3px solid black;
	border-bottom: 3px solid black;
	padding: 0.2em;
	font-size: 1.7em;
	text-transform: capitalize;
	line-height: 1.4em;
	word-wrap: normal !important;
}

#navigation a { margin: 0 0.5em; }

#navigation a:hover,
#navigation a.active {
	color: white;
	text-shadow: -2px -2px 5px #000;
}

#footernavigation {
	font-size: 1em;
	font-weight: bold;
	text-transform: capitalize;
	line-height: 1.4em;
	word-wrap: normal !important;
	padding: 0.3em 0;
}

#footernavigation a:hover {
	color: white;
	text-shadow: -2px -2px 5px #000;
}

/* ---------- Wrapper / header ---------- */
#wrapper {
	padding: 1em;
	border-radius: 0.4em;
	border: 3px solid black;
	box-shadow: 1px 1px 15px #000;
	background-color: var(--inside-bg);
}

#mainTitle {
	padding: 0.2em 0 0.3em 0;
	border-top: 3px solid black;
	border-bottom: 3px solid black;
}

#mainTitle img {
	margin: 0.2em auto 0 auto;
	max-width: 100%;
}

#upperTitle {
	font-size: 1.8em;
	margin-top: 0.2em;
	padding: 0.1em;
	text-transform: capitalize;
}

#miniTitle {
	padding: 0.1em;
	white-space: nowrap;
	width: 90%;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0 auto 0.3em auto;
}

#headerImg {
	/* Full wrapper width — the source thumb is 1200px while the content
	   column can be ~1240px, so without an explicit width the banner left a
	   gap on the right (the ~3% upscale is imperceptible). */
	width: 100%;
	max-width: 100%;
	padding: 0.8em 0 0.7em 0;
	margin: 0;
}

#headerIcons {
	position: absolute;
	right: 0.4em;
	bottom: 0.8em;
	display: inline-block;
}

#footerlogo img {
	height: 50px;
	margin: 0;
}

#wdjoeri {
	border-top: 3px solid black;
	margin-top: 1em;
	padding-top: 1.2em;
	font-size: 0.7em;
}

#wdjoeri a { text-decoration: underline; }
#wdjoeri a:hover { font-weight: bold; }

.footerInfo {
	width: 200px;
	display: inline-block;
	margin: 0.75em 1em;
}

/* ---------- Icons ---------- */
.icon_thumbnail,
.icon_thumbnail_footer {
	display: inline-block;
	height: 2em;
	width: 2em;
	margin: 0.2em 0;
	border-radius: 0.2em;
	border: 2px solid black;
	background-color: black;
}

.icon_thumbnail:hover,
.icon_thumbnail_footer:hover {
	transform: scale(1.07, 1.07);
}

a[href*="facebook"]:not(#headerIcons a):not(.footerInfo a) {
	font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
	font-weight: bold;
	color: white !important;
	background-color: #3b5998;
	padding: 0 3px;
	border: 2px solid #3b5998;
	border-radius: 0.2em;
}

a[href*="facebook"]:not(#headerIcons a):not(.footerInfo a):hover {
	border: 2px solid white;
}

/* ---------- Section-index album tiles ---------- */
.portfolioTnU {
	display: inline-block;
	margin: 0;
}

.portfolioTn {
	height: 200px;
	width: 300px;
	overflow: hidden;
	border: 3px solid black;
	border-radius: 0.3em;
	background-color: black;
}

.portfolioTn img {
	position: relative;
	max-height: none;
	margin: 0;
	border: none;
	max-width: 305px;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.portfolioTnP {
	text-align: left;
	margin-left: 0.2em;
	position: relative;
	font-size: 2.5em;
	color: white;
	text-shadow: -2px -2px 5px black;
	margin-top: -1.3em;
	margin-bottom: 0;
	width: 280px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.portfolioTnU:hover > .portfolioTn {
	border: 3px solid white;
	background-color: white;
}

.portfolioTnU:hover { opacity: 0.8; }

.portfolioTnU:hover > p {
	color: black;
	text-shadow: -1px 1px 2px white;
}

/* ---------- Album photo grid (replaces the old FlexSlider) ---------- */
.photoGrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 0.6em;
	margin: 1em 0;
}

.gallery__item {
	display: block;
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border: 3px solid black;
	border-radius: 0.3em;
	background-color: black;
	cursor: pointer;
}

.gallery__item img {
	width: 100%;
	height: 100%;
	/* override section img { max-width: 98% } so cover fills edge-to-edge —
	   otherwise a ~3px black sliver of the tile shows on every thumbnail */
	max-width: 100%;
	object-fit: cover;
	margin: 0;
	border: none;
	display: block;
}

.gallery__item:hover {
	border-color: white;
	opacity: 0.85;
}

.photoGrid__empty {
	text-align: center;
	padding: 2em 1em;
}

/* ---------- Contact form ---------- */
.contactform {
	width: 45%;
	margin: 0.2em;
	font-family: Georgia, serif;
	font-size: 1em;
	padding: 0.4em;
	border: 2px solid black;
	border-radius: 0.4em;
}

textarea.contactform { width: 45%; }

.knop {
	margin: 0.2em;
	border: 2px solid white;
	background: black;
	color: white;
	width: 140px;
	padding: 0.5em;
	border-radius: 0.4em;
	font-family: Georgia, serif;
	font-size: 1em;
	cursor: pointer;
}

.knop:hover {
	background: white;
	color: black;
	border: 2px solid black;
}

.formMessage {
	margin: 0.6em auto;
	padding: 0.6em 1em;
	border-radius: 0.4em;
	max-width: 45%;
	border: 2px solid black;
}

.formMessage--error {
	background: #fdecec;
}

.formMessage--success {
	background: #eafaf0;
}

.honeypotField {
	position: absolute;
	left: -9999px;
	top: -9999px;
}

/* ---------- Lightbox (ported from joeriboodt.nl, restyled) ---------- */
.lightbox {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: 100vh;
	height: 100dvh;
	background: #000;
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 2000;
	opacity: 0;
	transition: opacity 0.2s ease;
	overscroll-behavior: none;
	touch-action: pan-x;
}

.lightbox--active {
	display: flex;
	opacity: 1;
}

.lightbox__close {
	position: absolute;
	top: 1.2em;
	right: 1.2em;
	width: 46px;
	height: 46px;
	background: var(--lb-bg);
	border: 1px solid var(--lb-border);
	border-radius: 50%;
	color: var(--lb-text);
	font-size: 1.5rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s, transform 0.15s;
	z-index: 11;
}

.lightbox__close:hover { background: var(--lb-bg-hover); transform: scale(1.1); }
.lightbox__close:active { transform: scale(0.9); }

.lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 46px;
	height: 46px;
	background: var(--lb-bg);
	border: 1px solid var(--lb-border);
	border-radius: 50%;
	color: var(--lb-text);
	font-size: 1.1rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s, transform 0.15s;
	z-index: 10;
}

.lightbox__nav--prev { left: 1.2em; }
.lightbox__nav--next { right: 1.2em; }
.lightbox__nav:hover { background: var(--lb-bg-hover); transform: translateY(-50%) scale(1.1); }
.lightbox__nav:active { transform: translateY(-50%) scale(0.9); }

.lightbox__controls { display: contents; }
.lightbox__toggles { display: contents; }

.lightbox__counter {
	position: absolute;
	bottom: 1.2em;
	left: 50%;
	transform: translateX(-50%);
	padding: 0.35em 1em;
	background: var(--lb-bg);
	border: 1px solid var(--lb-border);
	border-radius: 999px;
	color: var(--lb-text);
	font-size: 0.9rem;
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.lightbox__description {
	position: absolute;
	bottom: calc(1.2em + 2.75rem);
	left: 50%;
	max-width: min(90vw, 32rem);
	padding: 0.6em 1em;
	background: var(--lb-bg);
	border: 1px solid var(--lb-border);
	border-radius: 0.4em;
	color: var(--lb-text-secondary);
	font-size: 0.85rem;
	line-height: 1.5;
	text-align: center;
	margin: 0;
	opacity: 0;
	transform: translateX(-50%) translateY(6px) scale(0.96);
	pointer-events: none;
	transition: opacity 0.2s, transform 0.2s;
}

.lightbox__description--visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0) scale(1);
	pointer-events: auto;
}

.lightbox__info-btn {
	background: none;
	border: 1px solid var(--lb-border);
	border-radius: 50%;
	width: 18px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.65rem;
	font-style: italic;
	font-weight: 700;
	color: var(--lb-text-secondary);
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
}

.lightbox__info-btn:hover,
.lightbox__info-btn--active {
	color: var(--lb-text);
	border-color: var(--lb-border-strong);
	background: rgba(255, 255, 255, 0.1);
}

.lightbox__share {
	background: none;
	border: none;
	color: var(--lb-text-secondary);
	cursor: pointer;
	padding: 2px;
	display: flex;
	align-items: center;
	transition: color 0.15s, transform 0.15s;
	flex-shrink: 0;
}

.lightbox__share:hover { color: var(--lb-text); transform: scale(1.15); }
.lightbox__share:active { transform: scale(0.9); }
.lightbox__share svg { width: 16px; height: 16px; }

.lightbox__share-toast {
	position: absolute;
	bottom: calc(100% + 8px);
	right: 0;
	padding: 4px 10px;
	background: var(--lb-bg);
	border: 1px solid var(--lb-border);
	border-radius: 0.3em;
	color: var(--lb-text);
	font-size: 0.75rem;
	font-weight: 600;
	white-space: nowrap;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.2s, transform 0.2s;
	pointer-events: none;
}

.lightbox__share-toast--visible { opacity: 1; transform: translateY(0); }

.lightbox__hdr,
.lightbox__auto {
	position: absolute;
	bottom: 1.2em;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0.35em 0.7em;
	background: var(--lb-bg);
	border: 1px solid var(--lb-border);
	border-radius: 0.4em;
	color: var(--lb-text-secondary);
	font-family: Georgia, serif;
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s;
	z-index: 10;
}

.lightbox__hdr { right: 1.2em; }
.lightbox__auto { left: 1.2em; }

.lightbox__hdr:hover,
.lightbox__auto:hover { color: var(--lb-text); border-color: var(--lb-border-strong); }

.lightbox__hdr-track,
.lightbox__auto-track {
	width: 32px;
	height: 18px;
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid var(--lb-border);
	border-radius: 9px;
	display: flex;
	align-items: center;
	padding: 2px;
	flex-shrink: 0;
	transition: background 0.15s, border-color 0.15s;
}

.lightbox__hdr-thumb,
.lightbox__auto-thumb {
	width: 12px;
	height: 12px;
	background: rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	transition: transform 0.15s, background 0.15s;
}

.lightbox__hdr--on .lightbox__hdr-track,
.lightbox__auto--on .lightbox__auto-track {
	background: rgba(255, 255, 255, 0.4);
	border-color: var(--lb-border-strong);
}

.lightbox__hdr--on .lightbox__hdr-thumb,
.lightbox__auto--on .lightbox__auto-thumb {
	transform: translateX(14px);
	background: #fff;
}

.lightbox__hdr--on,
.lightbox__auto--on { color: var(--lb-text); }

.lightbox__hdr-info {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.lightbox__hdr-info-icon {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 1px solid var(--lb-border);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.55rem;
	font-style: italic;
	font-weight: 700;
	line-height: 1;
	color: var(--lb-text-secondary);
	opacity: 0.8;
}

.lightbox__hdr-info:hover .lightbox__hdr-info-icon { opacity: 1; border-color: var(--lb-border-strong); }

.lightbox__hdr-tooltip {
	position: absolute;
	bottom: calc(100% + 14px);
	right: -0.7em;
	min-width: 200px;
	max-width: 240px;
	padding: 0.4em 0.6em;
	background: rgba(10, 10, 10, 0.9);
	border: 1px solid var(--lb-border);
	border-radius: 0.3em;
	font-size: 0.7rem;
	font-weight: 400;
	font-style: normal;
	color: var(--lb-text-secondary);
	white-space: normal;
	pointer-events: none;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.15s, transform 0.15s;
	z-index: 20;
}

.lightbox__hdr-info:hover .lightbox__hdr-tooltip,
.lightbox__hdr-info--active .lightbox__hdr-tooltip {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.lightbox__stage {
	/* Transparent passthrough — the lightbox backdrop is already pure #000,
	   so a black stage box here was redundant and, since it can end up
	   slightly larger than the image it wraps, left a rounded black strip
	   below the photo (mismatched corners). Rounding + shadow now live on
	   the image itself, guaranteeing 4 equal corners.
	   No position:relative here — keeps the DOM out of a new stacking
	   context so Safari's HDR gain-map compositing on <img> still applies
	   at the document layer (see CLAUDE.md). */
	max-width: 85%;
	max-height: 85%;
	line-height: 0;
}

.lightbox__image {
	max-width: 85vw;
	max-height: 85vh;
	display: block;
	object-fit: contain;
	border-radius: 0.4em;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
	transition: opacity 0.15s ease;
	user-select: none;
	-webkit-user-drag: none;
}

@media (max-width: 768px) {
	.lightbox__nav {
		width: 40px; height: 40px; font-size: 1rem;
		position: static; transform: none;
	}
	.lightbox__nav--prev { order: -2; }
	.lightbox__nav--next { order: -1; }
	.lightbox__nav:hover { transform: scale(1.1); }
	.lightbox__nav:active { transform: scale(0.95); }

	.lightbox__close { width: 40px; height: 40px; font-size: 1.25rem; top: 0.8em; right: 0.8em; }

	.lightbox__controls {
		display: grid;
		grid-template-columns: auto 1fr auto;
		grid-template-rows: auto auto;
		align-items: center;
		position: absolute;
		bottom: 1em; left: 0; right: 0;
		z-index: 10;
		row-gap: 1em;
		padding: 0 0.8em;
	}
	.lightbox__nav--prev { grid-row: 1; grid-column: 1; justify-self: start; }
	.lightbox__nav--next { grid-row: 1; grid-column: 3; justify-self: end; }

	.lightbox__toggles {
		display: flex; align-items: center; justify-content: center; gap: 8px;
		grid-row: 1; grid-column: 2;
	}
	.lightbox__auto, .lightbox__hdr {
		position: static; font-size: 0.75rem; padding: 4px 8px; border-radius: 0.4em;
	}
	.lightbox__counter {
		grid-row: 2; grid-column: 1 / -1; width: 100%;
		position: static; transform: none; font-size: 0.8rem;
		justify-content: center; text-align: center; border-radius: 0.4em;
	}
	.lightbox__image { max-width: 95vw; max-height: 80vh; max-height: 80dvh; }
	.lightbox__stage { max-width: 95%; max-height: 80%; }
}

@media (max-width: 768px) and (orientation: landscape) {
	.lightbox { align-items: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; }
	.lightbox__stage { max-height: none; margin: 1.2em auto; }
	.lightbox__image { max-width: 95vw; max-height: none; }
	.lightbox__controls { position: fixed; bottom: 0.8em; }
}

/* ---------- Responsive (transported breakpoints) ---------- */
@media screen and (max-width: 750px) {
	.photoGrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

@media screen and (max-width: 675px) {
	.icon_thumbnail { height: 1.6em; width: 1.6em; }
}

@media screen and (max-width: 600px) {
	#headerIcons { display: none; }
	.contactform, textarea.contactform, .formMessage { width: 80%; }
}

@media screen and (max-width: 500px) {
	#headerImg { padding: 0.5em 0 0.4em 0; }
}

@media screen and (max-width: 400px) {
	#navigation { font-size: 1.4em; }
	.portfolioTn { height: 150px; width: 225px; }
	.portfolioTnP { width: 225px; font-size: 1.5em; }
	.photoGrid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.4em; }
}