/* Stal Sjáland — global stylesheet.
   Plain, hand-written CSS deliberately kept out of Astro's bundler (see BaseLayout.astro
   for why: it lets every page reference it with one relative, unhashed path, which is
   what makes the built site browseable directly via file://). One file for a six-page
   site is simpler to maintain than distributing scoped component styles. */

@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/open-sans-400.woff2') format('woff2');
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/open-sans-600.woff2') format('woff2');
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/open-sans-700.woff2') format('woff2');
}
@font-face {
	font-family: 'Droid Serif';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/droid-serif-400.woff2') format('woff2');
}
@font-face {
	font-family: 'Droid Serif';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/droid-serif-400-italic.woff2') format('woff2');
}
@font-face {
	font-family: 'Droid Serif';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/droid-serif-700.woff2') format('woff2');
}

:root {
	--font-serif: 'Droid Serif', Georgia, 'Times New Roman', serif;
	--font-sans: 'Open Sans', 'Segoe UI', Arial, sans-serif;

	--c-text: #555353;
	--c-text-strong: #3f3d3d;
	--c-white: #ffffff;

	/* Colors below are measured directly from the live site's computed styles, not
	   estimated from screenshots (see the site-migration conversation history for the
	   verification method) — cross-checked against the offshore reconstruction's CSS,
	   which independently arrived at the same hex values for the three panel tones. */
	--c-panel-gray: #f0f0f0;
	--c-panel-green: #cce472;
	--c-panel-taupe: #aca298;

	--c-nav: #555353;
	--c-nav-active: #bebebe;
	--c-logo-red: #b32026;
	/* Mobile full-screen menu overlay background — measured directly from the live
	   Wix mobile site's open-menu state (rgb(173, 199, 67)), distinct from
	   --c-panel-green which is a different, separately-measured shade. */
	--c-nav-overlay: #adc743;
	/* Button color measured directly from the live "Contact"/"Tarieven" buttons
	   (rgba(56,54,51,0.82) — a semi-transparent dark overlay, not a flat hex). Hover has
	   no verified live value (can't be read from a static computed-style snapshot) so it's
	   a conservative darkening of the same verified color, not an adopted guess.
	   Warning and "emphasis" text turned out to be the SAME verified color
	   (rgb(139,0,0)) with no underline — corrected after an earlier pass had used two
	   different unverified colors (one with an underline) based on misreading a screenshot. */
	--c-button: rgba(56, 54, 51, 0.82);
	--c-button-hover: rgba(56, 54, 51, 0.95);
	--c-link-amber: rgb(139, 0, 0);
	--c-warning: rgb(139, 0, 0);

	--content-width: 1000px;
	--section-gap: 0;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	/* Reserves the vertical scrollbar's width whether or not the page actually needs to
	   scroll, so the centered .header-inner doesn't shift a few pixels between short pages
	   (no scrollbar) and long pages (scrollbar present) — see .header-inner's centering
	   comment below. No effect on mobile, where scrollbars are overlaid rather than
	   reserving layout space. */
	scrollbar-gutter: stable;
}

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.65;
	color: var(--c-text);
	background: var(--c-white);
}

img {
	max-width: 100%;
	display: block;
}

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

h1, h2, h3, h4 {
	font-family: var(--font-serif);
	color: var(--c-text-strong);
	font-weight: 400;
	line-height: 1.2;
	margin: 0 0 0.6em;
}

p {
	margin: 0 0 1em;
}
p:last-child {
	margin-bottom: 0;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Header ---------- */

.site-header {
	background: var(--c-white);
	position: relative;
	z-index: 20;
}

/* Insets the header's content (logo through social icons) to the same width and
   horizontal centering as the page's content column below (.content-wrap) — measured
   directly on the live site, where the logo starts at the same x as the content column,
   not flush against the browser edge. */
.header-inner {
	max-width: var(--content-width);
	margin: 0 auto;
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
}

.brand {
	display: flex;
	align-items: center;
	gap: 0;
	flex-shrink: 0;
}

.brand-logo {
	padding: 10px 14px;
}
.brand-logo img {
	width: 84px;
	height: 84px;
}

.brand-name {
	background: var(--c-panel-taupe);
	color: var(--c-white);
	padding: 20px 28px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 96px;
}
.brand-name .site-title {
	font-family: var(--font-serif);
	font-size: 1.5rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	margin: 0;
	color: var(--c-white);
	font-weight: 400;
}
.brand-name .site-subtitle {
	font-family: var(--font-sans);
	font-size: 0.85rem;
	color: var(--c-text-strong);
	margin-top: 4px;
	text-align: center;
}

.main-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	flex: 1;
	flex-wrap: wrap;
	font-size: 0.95rem;
	padding-left: 20px;
}
.main-nav a {
	color: var(--c-nav);
	padding: 6px 2px;
}
.main-nav a:hover {
	color: var(--c-nav-active);
}
.main-nav a[aria-current="page"] {
	/* The live site dims the current page's link rather than bolding/underlining it —
	   confirmed via computed style (rgb(190,190,190) vs rgb(85,83,83) for other links). */
	color: var(--c-nav-active);
}

.header-right {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 0 20px;
}

.social-icons {
	display: flex;
	gap: 14px;
	align-items: center;
}
.social-icons a {
	color: #8a8a8a;
	display: inline-flex;
}
.social-icons svg {
	width: 18px;
	height: 18px;
}
.social-icons a:hover {
	color: var(--c-nav-active);
}

.nav-toggle {
	display: none;
	background: none;
	border: none;
	padding: 10px;
	cursor: pointer;
	color: var(--c-nav);
}
.nav-toggle svg {
	width: 26px;
	height: 26px;
}
.nav-toggle .icon-close {
	display: none;
}

/* ---------- Title band (wood texture) ---------- */

.title-band {
	background-image: url('../images/shared/footer-location.jpg');
	background-size: cover;
	background-position: center;
	padding: 56px 24px;
	text-align: center;
}
.title-band h1 {
	color: var(--c-white);
	font-style: italic;
	font-size: 2.75rem;
	margin: 0;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

/* ---------- Page background (flanking beach photo behind centered content) ---------- */

.page-body {
	background-image: url('../images/shared/hero-banner.jpg');
	/* Fixed relative to the viewport (not the document) so it stays stationary while the
	   page scrolls, matching the live site — this also inherently stops the tiling
	   symptom `repeat-y` caused on long pages, since a fixed background only ever needs
	   to fill the (much shorter) viewport height, not the full document height. */
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: top center;
	/* The source photo has a wide blank middle by design (see docs/IMAGE_MANIFEST.md) —
	   sized wider than --content-width so its two photo halves land in the side margins
	   flanking the centered white content column, matching the original site's look. */
	background-size: 1900px auto;
}

.content-wrap {
	max-width: var(--content-width);
	margin: 0 auto;
	background: var(--c-white);
}

/* ---------- Hero (home page) ---------- */

.hero {
	position: relative;
	overflow: hidden;
}
.hero .gallery {
	height: 640px;
}
.hero-overlay {
	position: absolute;
	top: 0;
	/* Aligned with the content container's edge, not the viewport edge — measured on the
	   live site: the overlay starts at the same x as the page's normal content column
	   (~223px in a 1425px viewport), not flush against the full-bleed gallery's own edge. */
	left: max(0px, calc((100% - var(--content-width)) / 2));
	bottom: 0;
	width: 370px;
	max-width: calc(100% - 2 * max(0px, calc((100% - var(--content-width)) / 2)));
	background: rgba(255, 255, 255, 0.8);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 40px;
	z-index: 10;
	pointer-events: none;
}
.hero-overlay .btn {
	pointer-events: auto;
}
.hero-overlay h2 {
	font-size: 2.4rem;
	font-style: normal;
	color: var(--c-text-strong);
	margin-bottom: 1.4em;
}
.btn {
	display: inline-block;
	background: var(--c-button);
	color: var(--c-white);
	font-family: var(--font-sans);
	font-weight: 600;
	padding: 14px 30px;
	border: none;
	cursor: pointer;
	font-size: 0.95rem;
	align-self: flex-start;
}
.btn:hover {
	background: var(--c-button-hover);
}
.btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* ---------- Content sections (alternating colored panel + image) ---------- */

/* Column ratio and row height are per-instance (set as inline custom properties by
   ContentSection.astro), not a fixed template — the source material uses different
   proportions per row (e.g. 40/60, 50/50, 45/55) and a bespoke height per row's actual
   image, not one reusable ratio. Falls back to 50/50 + 260px if unset. */
.section-row {
	display: grid;
	grid-template-columns: var(--col-text, 1fr) var(--col-media, 1fr);
	min-height: var(--row-h, 260px);
}
.section-row.no-image {
	grid-template-columns: 1fr 1fr;
}
.section-row.image-left {
	grid-template-columns: var(--col-media, 1fr) var(--col-text, 1fr);
}
.section-row.image-left .panel {
	order: 2;
}
.section-row.image-left .section-media {
	order: 1;
}

.panel {
	padding: 44px 48px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.panel.tone-gray { background: var(--c-panel-gray); color: var(--c-text); }
.panel.tone-green { background: var(--c-panel-green); color: var(--c-text-strong); }
.panel.tone-taupe { background: var(--c-panel-taupe); color: var(--c-white); }
.panel.tone-taupe h2, .panel.tone-taupe h3 { color: var(--c-white); }
.panel.tone-white { background: var(--c-white); color: var(--c-text); }

.panel h2 {
	font-size: 1.9rem;
	margin-bottom: 0.5em;
}
.panel h3 {
	font-size: 1.3rem;
	margin-top: 1.2em;
	margin-bottom: 0.4em;
}
.panel .btn-row {
	display: flex;
	gap: 14px;
	margin-top: 20px;
	flex-wrap: wrap;
}

.section-media {
	background: var(--c-panel-gray);
	overflow: hidden;
}
.section-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
img.section-media {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.emphasis {
	color: var(--c-link-amber);
}
.warning-text {
	color: var(--c-warning);
	font-weight: 600;
}
.availability-note {
	font-style: italic;
	opacity: 0.85;
}

/* ---------- Gallery ----------
   Reproduces the source's ambient, chromeless auto-rotating panels (Wix slideshow /
   the offshore reconstruction's Slick config: autoplay true, arrows false, dots false,
   pauseOnHover false) rather than a user-driven carousel with permanent visible controls.
   No arrows/counter are shown inline — the whole gallery is one click target that opens
   a full-screen lightbox with real prev/next controls and captions, matching the
   source's click-to-zoom gallery behaviour. Autoplay + lightbox are driven by a small
   vanilla-JS script (see Gallery.astro) — no jQuery/Slick dependency. */

.gallery {
	position: relative;
	background: #111;
	overflow: hidden;
	cursor: pointer;
}
.gallery-track {
	display: flex;
	height: 100%;
	transition: transform 1.1s ease;
	will-change: transform;
}
.gallery-slide {
	flex: 0 0 100%;
	position: relative;
	height: 100%;
}
.gallery-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.gallery-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
	color: var(--c-white);
	padding: 24px 16px 10px;
	font-size: 0.9rem;
	opacity: 0;
	transition: opacity 0.3s;
	pointer-events: none;
}
.gallery:hover .gallery-caption.is-current {
	opacity: 1;
}
.gallery-standalone {
	height: 420px;
}

/* Lightbox: full-screen, real controls, opened on click of any .gallery */
.lightbox {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.92);
	z-index: 1000;
	display: none;
	align-items: center;
	justify-content: center;
}
.lightbox.is-open {
	display: flex;
}
.lightbox-frame {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.lightbox-frame img {
	max-width: 82%;
	max-height: 82vh;
	object-fit: contain;
	display: block;
}
.lightbox-caption {
	position: absolute;
	bottom: 8%;
	left: 0;
	right: 0;
	text-align: center;
	color: var(--c-white);
	font-size: 1rem;
}
.lightbox-close {
	position: absolute;
	top: 24px;
	right: 32px;
	background: none;
	border: none;
	color: var(--c-white);
	cursor: pointer;
	padding: 8px;
}
.lightbox-close svg {
	width: 28px;
	height: 28px;
}
.lightbox-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: var(--c-white);
	cursor: pointer;
	padding: 12px;
}
.lightbox-nav svg {
	width: 32px;
	height: 32px;
}
.lightbox-nav.prev {
	left: 3%;
}
.lightbox-nav.next {
	right: 3%;
}

/* stacked image column (e.g. wat-wij-doen Pension section's 3 photos) */
.image-stack {
	display: grid;
	grid-template-rows: repeat(3, 1fr);
	gap: 2px;
	background: #ddd;
	height: 100%;
}
.image-stack img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- Simple list-style sections (tarieven, te-koop) ---------- */

/* --panel-w is per-instance (StackPanel.astro prop) — the source uses a different panel
   width per row (e.g. 80% for Hooi, 60% for Paarden/Diversen on Te koop), not a fixed 50%. */
.stack-row {
	display: grid;
	grid-template-columns: var(--panel-w, 60%) 1fr;
}
.stack-row .panel {
	grid-column: 1;
}
.stack-row.align-right {
	grid-template-columns: 1fr var(--panel-w, 60%);
}
.stack-row.align-right .panel {
	grid-column: 2;
}

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

.site-footer {
	background-image: url('../images/shared/footer-location.jpg');
	background-size: cover;
	background-position: center;
	color: var(--c-white);
	padding: 48px 24px 28px;
}
.footer-grid {
	max-width: var(--content-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	text-align: center;
	gap: 24px;
}
.footer-grid > div {
	padding: 0 20px;
	border-left: 1px solid rgba(255, 255, 255, 0.4);
}
.footer-grid > div:first-child {
	border-left: none;
}
.footer-address {
	font-weight: 600;
}
.footer-title {
	font-family: var(--font-serif);
	font-size: 1.4rem;
}
.footer-phone {
	font-weight: 600;
	margin-bottom: 14px;
}
.footer-social {
	display: flex;
	gap: 14px;
	justify-content: center;
}
.footer-social svg {
	width: 20px;
	height: 20px;
	color: var(--c-white);
}
.footer-copyright {
	text-align: center;
	margin-top: 32px;
	font-size: 0.85rem;
	opacity: 0.9;
}

/* ---------- Contact page ---------- */

/* Measured on the live site: a ~60/40 two-column layout — left column stacks the info
   panel above the form, right column holds an embedded Google Map (restored — see
   .contact-map-slot iframe below; this is the one deliberate external-runtime exception
   in an otherwise self-contained site, per explicit instruction). */
.contact-grid {
	display: grid;
	grid-template-columns: 60% 40%;
}
.contact-left {
	display: flex;
	flex-direction: column;
}
.contact-map-slot {
	background: var(--c-panel-gray);
	min-height: 300px;
}
.contact-map-slot iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 300px;
	border: 0;
}
.contact-info {
	background: var(--c-panel-gray);
	padding: 44px 48px;
}
.contact-info p {
	margin-bottom: 1.2em;
}
.contact-details p {
	margin: 0;
	line-height: 1.5;
}
.contact-form {
	background: var(--c-panel-green);
	padding: 44px 48px;
}
.form-field {
	width: 100%;
	border: none;
	padding: 14px 16px;
	margin-bottom: 10px;
	font-family: var(--font-sans);
	font-size: 0.95rem;
	color: var(--c-text);
	background: var(--c-white);
}
textarea.form-field {
	min-height: 120px;
	resize: vertical;
	font-family: var(--font-sans);
}
.form-field::placeholder {
	color: #8d8d8d;
}
.form-submit-row {
	display: flex;
	justify-content: flex-end;
	margin-top: 10px;
}
.form-note {
	font-size: 0.82rem;
	color: var(--c-text-strong);
	opacity: 0.75;
	margin-top: 14px;
}
.form-note:empty {
	margin-top: 0;
}
.form-note.is-error {
	color: var(--c-warning);
	opacity: 1;
}

/* ---------- Responsive ---------- */

@media (max-width: 760px) {
	/* Mobile header composition, matching the live Wix mobile site: logo alone on
	   its own centered row, then social icons + hamburger on a row below, then the
	   taupe title panel below that — rather than the desktop's side-by-side
	   logo+title arrangement. `.brand` drops its own box (display: contents) so
	   its two children can be independently ordered as siblings of .header-right
	   within .header-inner's flex-wrap layout; this is CSS-only and has no effect
	   on desktop, where .brand keeps its normal box and side-by-side layout. */
	.brand {
		display: contents;
	}
	.brand-logo {
		order: 1;
		width: 100%;
		display: flex;
		justify-content: center;
		padding: 24px 0 12px;
	}
	.brand-logo img {
		width: 110px;
		height: 110px;
	}
	.header-right {
		order: 2;
		width: 100%;
		justify-content: space-between;
		padding: 10px 16px;
	}
	.brand-name {
		order: 3;
		text-align: center;
		width: 100%;
		align-items: center;
		padding: 32px 28px;
	}
	.main-nav {
		display: none;
	}
	/* Full-screen overlay menu, matching the live Wix mobile site's behaviour: the
	   nav takes over the entire viewport (not the normal header flow), large
	   centered links, active page in white, inactive pages in the site's regular
	   nav gray. See --c-nav-overlay above for the measured background color. */
	.main-nav.is-open {
		display: flex;
		position: fixed;
		inset: 0;
		z-index: 1100;
		background: var(--c-nav-overlay);
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 32px;
		width: 100%;
		padding: 24px;
	}
	.main-nav.is-open a {
		font-size: 1.4rem;
		letter-spacing: 0.05em;
		padding: 4px 0;
		color: var(--c-nav);
	}
	.main-nav.is-open a[aria-current="page"] {
		color: var(--c-white);
	}
	.nav-toggle {
		display: inline-flex;
	}
	/* While the overlay is open, the header's own logo/title and social icons must
	   not remain visible underneath it. The toggle button (now showing the close
	   X) is deliberately kept above the overlay so it stays reachable — same
	   physical button, elevated along with its .header-right parent layer. */
	.site-header.nav-open .brand-logo,
	.site-header.nav-open .brand-name {
		visibility: hidden;
	}
	.site-header.nav-open .social-icons {
		visibility: hidden;
	}
	.site-header.nav-open .header-right {
		position: relative;
		z-index: 1101;
	}
	.site-header.nav-open .nav-toggle {
		color: var(--c-white);
	}
	.site-header.nav-open .nav-toggle svg {
		width: 32px;
		height: 32px;
	}
	.site-header.nav-open .nav-toggle .icon-open {
		display: none;
	}
	.site-header.nav-open .nav-toggle .icon-close {
		display: inline-flex;
	}

	.title-band h1 {
		font-size: 1.9rem;
	}

	.page-body {
		background-size: 0 0;
		background-image: none;
	}

	/* Mobile hero composition, matching the live Wix mobile site: the heading/CTA
	   stay overlaid on the right-hand portion of the hero image as one visual
	   composition (like desktop), not stacked as a separate full-width block
	   below the photo. The panel keeps the same translucent white treatment as
	   desktop (rather than going fully transparent like Wix's fixed, deliberately
	   light hero photo) since our hero rotates through several images — including
	   busier ones — and a plain text-on-photo treatment can't guarantee contrast
	   the way Wix's single fixed light image can. */
	.hero .gallery {
		height: 280px;
	}
	.hero-overlay {
		left: auto;
		right: 0;
		width: 58%;
		max-width: none;
		padding: 20px 18px;
	}
	.hero-overlay h2 {
		font-size: 1.5rem;
		margin-bottom: 0.6em;
	}

	.section-row,
	.section-row.image-left,
	.stack-row,
	.stack-row.align-right {
		grid-template-columns: 1fr;
		min-height: 0;
	}
	.section-row.image-left .panel {
		order: 0;
	}
	.section-row.image-left .section-media {
		order: 0;
	}
	.stack-row .panel,
	.stack-row.align-right .panel {
		grid-column: 1;
	}
	.section-media {
		min-height: 240px;
	}
	.panel {
		padding: 32px 24px;
	}

	.gallery-standalone {
		height: 260px;
	}

	.image-stack {
		grid-template-rows: repeat(3, 200px);
	}

	.footer-grid {
		grid-template-columns: 1fr;
	}
	.footer-grid > div {
		border-left: none;
		border-top: 1px solid rgba(255, 255, 255, 0.4);
		padding-top: 20px;
	}
	.footer-grid > div:first-child {
		border-top: none;
	}

	.contact-grid {
		grid-template-columns: 1fr;
	}
	.contact-map-slot {
		min-height: 200px;
	}
	.contact-map-slot iframe {
		min-height: 200px;
	}
	.contact-info,
	.contact-form {
		padding: 28px 22px;
	}
}