/* Aanvullingen op het ontwerp (site.css) voor het WordPress-thema. */

.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 1000; background: var(--paper); color: var(--ink); padding: 10px 16px; border-radius: 8px; }
.skip-link:focus { left: 16px; }

.is-midden { text-align: center; }
.hero-cta-row.is-midden { justify-content: center; margin-top: 32px; }
.section-intro + .hero-cta-row.is-midden, .prose-midden + .hero-cta-row.is-midden { margin-top: 8px; }
.prose-midden p { margin-bottom: 12px; }
.prose-midden p:last-child { margin-bottom: 24px; }

/* Licht goud vlak als alternatief voor het crème vlak */
.band-licht { background: linear-gradient(var(--gold-t), var(--gold-t)), var(--bg); }

/* Paginakop zonder foto (bijvoorbeeld de privacyverklaring) */
.page-hero-banner.zonder-beeld .page-hero-banner-inner { background: var(--bg-alt); min-height: 0; }
.page-hero-banner.zonder-beeld .banner-content { position: static; color: var(--ink); padding-top: 56px; padding-bottom: 40px; }
.page-hero-banner.zonder-beeld .banner-title, .page-hero-banner.zonder-beeld .breadcrumbs, .page-hero-banner.zonder-beeld .breadcrumbs strong { color: var(--ink); }
.page-hero-banner.zonder-beeld .banner-intro { color: var(--body); }

.split-omgekeerd .split-image { order: -1; }

.pakketten-grid.is-enkel { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; }

.tabel-noot { margin-top: 16px; }
.tabel-noot p { margin: 0; }

.galerij-item { display: block; cursor: zoom-in; }
.galerij-knop { margin-top: 28px; }

.spaslot-noot { padding-top: 0; }
.spaslot-noot .form-note { text-align: center; }

.stappen-lijst { grid-template-columns: 1fr; }
.stappen-lijst .stap { background: var(--paper); }

.boeking-card { max-width: none; margin-top: 40px; }
.boeking-card h3 { margin-bottom: 20px; }
.form-field-vol { grid-column: 1 / -1; }
.boeking-card .form-note { margin: 4px 0 18px; }
.route-sectie { padding-top: 0; }

.cta-reserveren .slogan-quote { font-size: clamp(26px, 3.5vw, 44px); }

/* Footerlink naar privacy */
.footer-bottom a { color: inherit; border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
.footer-bottom a:hover { color: #fff; }

/* WhatsApp-knop */
.whatsapp-knop { position: fixed; right: 20px; bottom: 20px; z-index: 90; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); transition: transform 0.2s; }
.whatsapp-knop:hover { transform: scale(1.06); }
.whatsapp-knop svg { width: 30px; height: 30px; }

/* Cookiemelding */
.cookie-melding { position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 100; max-width: 560px; background: var(--paper); border: 1px solid var(--gold-line); border-radius: 16px; padding: 20px 22px; box-shadow: 0 16px 40px rgba(42, 36, 32, 0.16); }
.cookie-melding[hidden] { display: none; }
.cookie-melding p { font-size: 15px; margin-bottom: 14px; }
.cookie-melding a { color: var(--gold-d); border-bottom: 1px solid var(--gold-line); }
.cookie-knoppen { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-knoppen .btn { padding: 10px 20px; }
body:has(.cookie-melding:not([hidden])) .whatsapp-knop { bottom: 96px; }

/* Lichtbak voor de galerij */
.lichtbak { position: fixed; inset: 0; z-index: 200; background: rgba(20, 16, 12, 0.92); display: flex; align-items: center; justify-content: center; padding: 24px; }
.lichtbak img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.lichtbak button { position: absolute; color: #fff; font-size: 34px; line-height: 1; padding: 12px 16px; background: rgba(255, 255, 255, 0.08); border-radius: 50%; width: 52px; height: 52px; display: grid; place-items: center; }
.lichtbak button:hover { background: rgba(255, 255, 255, 0.18); }
.lichtbak .lb-sluit { top: 18px; right: 18px; }
.lichtbak .lb-vorige { left: 18px; top: 50%; transform: translateY(-50%); }
.lichtbak .lb-volgende { right: 18px; top: 50%; transform: translateY(-50%); }

@media (max-width: 760px) {
	.split-omgekeerd .split-image { order: 0; }
	.cookie-melding { left: 12px; right: 12px; bottom: 12px; }
	.whatsapp-knop { right: 14px; bottom: 14px; width: 52px; height: 52px; }
}