/*
	Frank van der Velde — static rebuild
	Plain HTML + CSS, no JavaScript.

	Ported from the "frankTheme" WordPress theme (Underscores-based).
	The original used Swiper 8 + jQuery; the slideshow here is pure CSS.
*/

/* --------------------------------------------------------------
   Base
   -------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	position: relative;
	height: 100%;
}

body {
	margin: 0;
	padding: 0;
	background: #eee;
	color: #000;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
}

img {
	max-width: 100%;
}

/* --------------------------------------------------------------
   Slideshow

   Five slides sit side by side in a flex track: the four photos
   plus a clone of the first, so the wrap-around is seamless.
   The track is 5 viewports wide and each step shifts it by 20%
   of its own width, i.e. exactly one viewport.

   Timing matches the original Swiper config — 3s hold, 1s move,
   so one full cycle is 4 slides x 4s = 16s.
   -------------------------------------------------------------- */

.slideshow {
	width: 100%;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
}

.track {
	display: flex;
	width: 500%;
	height: 100%;
	animation: slide 16s infinite;
}

.slide {
	flex: 0 0 20%; /* 20% of a 5-viewport track = 100vw */
	height: 100%;
	margin: 0;
	background: #fff;
	overflow: hidden;
}

.slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@keyframes slide {
	0%      { transform: translateX(0); }
	18.75%  { transform: translateX(0);     animation-timing-function: ease-in-out; }
	25%     { transform: translateX(-20%); }
	43.75%  { transform: translateX(-20%);  animation-timing-function: ease-in-out; }
	50%     { transform: translateX(-40%); }
	68.75%  { transform: translateX(-40%);  animation-timing-function: ease-in-out; }
	75%     { transform: translateX(-60%); }
	93.75%  { transform: translateX(-60%);  animation-timing-function: ease-in-out; }
	100%    { transform: translateX(-80%); } /* the clone — identical to slide 1 */
}

/* Respect a reduced-motion preference: hold on the first photo. */
@media (prefers-reduced-motion: reduce) {
	.track {
		animation: none;
	}
}

/* --------------------------------------------------------------
   Footer
   -------------------------------------------------------------- */

.footerTxt {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	background: #ffffffd1;
	color: rgb(39, 39, 39);
	text-align: center;
	font-family: "Tinos", Times, "Times New Roman", serif;
	font-style: normal;
	font-weight: 400;
	line-height: 1.1;
	text-transform: uppercase;

	/* Fluid, so the single line never overflows on narrow screens.
	   Tops out at the original 18px / 7px tracking on desktop. */
	font-size: clamp(10px, 2.2vw, 18px);
	letter-spacing: clamp(0.5px, 0.55vw, 7px);
}

.footerTxt p {
	margin: 0;
	padding: 1.1em 0.75rem;
}

.footerTxt a {
	color: inherit;
	text-decoration: none;
}

/* Short "mail" label replaces the full address on narrow screens. */
.footerTxt .mailShort {
	display: none;
}

@media (max-width: 600px) {
	.footerTxt .mailFull {
		display: none;
	}

	.footerTxt .mailShort {
		display: inline;
	}
}