/* De Snackbar — gedeeld door site en editor. Maten volgen het oude Digon-thema. */

:root {
	--sb-limoen: #bec922;
	--sb-breedte: 1020px;
}

/* Zwart op html, body transparant: anders valt de body over de achtergrondfoto's (z-index: -1). */
html { background: #000; }
body { margin: 0; background: transparent !important; }
img { max-width: 100%; height: auto; }
a { color: #fff; }
p { margin: 0 0 11px; }

/* Achtergrond: foto's over de volle breedte, vast achter de site */
.sb-achtergrond { position: fixed; inset: 0; z-index: -1; background: #000; overflow: hidden; }
.sb-achtergrond img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	max-width: none;
	object-fit: cover;
	opacity: 0;
	transition: opacity 700ms ease;
}
.sb-achtergrond img.is-actief { opacity: 1; }

/* Kop */
.sb-header { position: relative; background: #000; border-top: 30px solid #000; height: 105px; box-sizing: border-box; }
.sb-header-binnen {
	position: relative;
	max-width: var(--sb-breedte);
	height: 100%;
	margin: 0 auto;
}
.sb-logo { position: absolute; top: -9px; left: 0; margin: 0; z-index: 2; }
.sb-logo img { display: block; width: 300px; height: auto; }

.sb-nav { position: absolute; top: 9px; right: 0; }
.sb-nav-toggle { display: none; }
.sb-menu { list-style: none; margin: 0; padding: 0; display: flex; }
.sb-menu a {
	display: block;
	padding: 10px 20px;
	color: #fff;
	font-family: Lato, sans-serif;
	font-size: 14px;
	line-height: 21.45px;
	font-weight: 800;
	text-decoration: none;
	white-space: nowrap;
	transition: color 200ms;
}
.sb-menu li:last-child a { padding-right: 0; }
.sb-menu a:hover, .sb-menu a:focus-visible { color: var(--sb-limoen); }

.sb-main { position: relative; padding: 40px 0 30px; box-sizing: border-box; }

/* Standaardpagina en bericht: zwart paneel */
.sb-paneel {
	box-sizing: border-box;
	max-width: var(--sb-breedte);
	margin: 0 auto;
	background: #000;
	padding-bottom: 30px;
}
.sb-titel {
	margin: 20px 0 0;
	padding: 25px 50px;
	color: #fff;
	font-size: 32px;
	line-height: 1.2;
	font-weight: 400;
}
.sb-paneel-inhoud { padding: 0 50px 30px; }
.sb-paneel-inhoud h2 { margin: 0 0 10px; font-size: 24px; line-height: 32px; font-weight: 700; }
.sb-bericht { max-width: 642px; box-sizing: border-box; padding-right: 0; }
.sb-bericht .wp-block-post-featured-image { margin: 0 0 20px; }
.sb-bericht .wp-block-post-featured-image img { display: block; width: 100%; height: auto; }
.sb-lijst { list-style: none; margin: 0; padding: 0; }
.sb-lijst > li { max-width: 592px; margin-bottom: 40px; }
.sb-lijst .wp-block-post-excerpt__more-text { margin-top: 8px; }

/* Twee kolommen: Bedrijven, Buffetten, Contact */
.sb-kolommen {
	display: flex;
	justify-content: space-between;
	gap: 30px;
	box-sizing: border-box;
	max-width: var(--sb-breedte);
	margin: 0 auto;
}
.sb-kolom-links, .sb-kolom-rechts { box-sizing: border-box; background: #000; min-height: 750px; }
.sb-kolom-links { flex: 0 0 293px; padding: 22px 22px 45px; }
.sb-kolom-rechts { flex: 1 1 auto; min-width: 0; max-width: 697px; padding: 7px 7px 50px; }
.sb-kolom-links .wp-block-image { margin: -15px -15px; height: 185px; overflow: hidden; }
.sb-kolom-links .wp-block-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sb-kolom-links p, .sb-paneel-inhoud p, .sb-form-intro { margin-bottom: 11px; }
.sb-kolom-links h1 { margin: 0; padding: 30px 0 14.4px; color: #fff; font-size: 24px; line-height: 1.4; font-weight: 600; }

/* Fotoslider: Galerij-blok met stijl "Fotoslider" */
.wp-block-gallery.is-style-sb-slider.has-nested-images {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	position: relative;
	max-height: 526px;
	overflow: hidden;
}
.wp-block-gallery.is-style-sb-slider.has-nested-images figure.wp-block-image {
	grid-area: 1 / 1;
	width: 100% !important;
	margin: 0 !important;
	opacity: 0;
	transition: opacity 600ms ease;
}
.wp-block-gallery.is-style-sb-slider.has-nested-images figure.wp-block-image.is-actief,
.wp-block-gallery.is-style-sb-slider.has-nested-images:not(.sb-slider-klaar) figure.wp-block-image:first-child { opacity: 1; z-index: 1; }
.wp-block-gallery.is-style-sb-slider figure.wp-block-image img { display: block; width: 100%; height: auto; }
.sb-stippen { position: absolute; left: 10px; bottom: 10px; z-index: 3; display: flex; gap: 6px; }
.sb-stippen button {
	width: 12px; height: 12px; padding: 0;
	border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, .55);
	cursor: pointer;
}
.sb-stippen button.is-actief { background: #fff; }

/* Contactformulier */
.sb-form-intro { padding: 16px 16px 0; }
.sb-form { padding: 0 16px 16px; color: #fff; }
.sb-form p { margin: 0 0 3px; }
.sb-form label { display: block; }
.sb-form input[type=text], .sb-form input[type=email], .sb-form textarea {
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: 290px;
	padding: 1px 2px;
	border: 1px solid #767676;
	background: #fff;
	color: #000;
	font: inherit;
	line-height: normal;
}
.sb-form textarea { max-width: 250px; height: 42px; min-height: 42px; resize: both; }
.sb-form button { margin-top: 8px; padding: 1px 6px; border: 1px solid #767676; background: #efefef; color: #000; font: inherit; cursor: pointer; }
.sb-form button:disabled { opacity: .6; cursor: default; }
.sb-hp { position: absolute !important; left: -9999px; }
.sb-form-melding:empty { display: none; }
.sb-form-melding { margin-top: 10px; color: var(--sb-limoen); }
.sb-form-melding.is-fout { color: #ff8a80; }

/* Nieuwskaarten */
.sb-main-nieuws { min-height: calc(100vh - 105px); padding-top: 0; display: flex; flex-direction: column; justify-content: flex-end; box-sizing: border-box; padding-bottom: 67px; }
.admin-bar .sb-main-nieuws { min-height: calc(100vh - 137px); }
.sb-nieuws { width: 939px; max-width: 100%; margin: 0 auto; height: 500px; overflow: hidden; }
.sb-kaarten {
	list-style: none;
	display: flex;
	flex-wrap: nowrap;
	gap: 30px;
	margin: 0;
	padding: 0;
	height: 500px;
	transition: transform 500ms ease;
}
.sb-kaarten > li {
	flex: 0 0 293px;
	box-sizing: border-box;
	height: 500px;
	margin: 0;
	background: #000;
	overflow: hidden;
	transition: margin-top 350ms ease-out;
}
.sb-kaarten > li.is-dicht { margin-top: 350px; cursor: pointer; }
.sb-kaart-foto { display: block; height: 190px; margin: 0; overflow: hidden; transition: height 350ms ease-out; }
.sb-kaarten > li.is-dicht .sb-kaart-foto { height: 75px; }
.sb-kaart-foto a { display: block; height: 100%; }
.sb-kaart-foto img { display: block; width: calc(100% - 14px); height: auto; margin: 7px; }
.sb-kaart-titel { margin: 21px 20px 0; color: #fff; font-size: 18px; line-height: 1.2; font-weight: 600; }
.sb-kaart-tekst { margin: 6px 20px 20px; color: #fff; }
.sb-kaart-tekst p { margin-bottom: 8px; }
.sb-pijl {
	position: absolute;
	bottom: 14%;
	z-index: 10;
	width: 43px; height: 42px;
	padding: 0;
	border: 0;
	border-radius: 37px;
	background: #000 center / auto no-repeat;
	opacity: .8;
	cursor: pointer;
	transition: opacity 250ms;
}
.sb-pijl[hidden] { display: none; }
.sb-pijl-terug { left: 0; background-image: url(../img/pijl-links.png); }
.sb-pijl-verder { right: 0; background-image: url(../img/pijl-rechts.png); }

/* Lage schermen: kaarten in de normale stroom, zoals het oude thema */
@media (max-height: 680px) {
	.sb-main-nieuws { min-height: 0; padding-bottom: 20px; }
	.sb-nieuws { height: 520px; }
	.sb-kaarten > li { margin-top: 20px; }
	.sb-kaarten > li.is-dicht { margin-top: 20px; height: 173px; }
}

@media (max-width: 1040px) {
	.sb-header-binnen, .sb-paneel, .sb-kolommen { margin-left: 10px; margin-right: 10px; }
	.sb-kaarten { gap: 20px; }
	.sb-nieuws { width: 860px; }
	.sb-kaarten > li { flex-basis: 273px; }
}

@media (max-width: 959px) {
	.sb-nieuws { width: 566px; }
	.sb-kolommen { display: block; }
	.sb-kolom-links, .sb-kolom-rechts { min-height: 0; max-width: none; }
	.sb-kolom-links .wp-block-image { display: none; }
	.wp-block-gallery.is-style-sb-slider.has-nested-images { max-height: none; }
}

/* Mobiel: balk met menu bovenaan, schuifmenu vanaf links */
@media (max-width: 768px) {
	html { padding-top: 42px; }
	.sb-header { height: 44px; border-top: 0; }
	.sb-logo { top: 4px; left: 10px; }
	.sb-logo img { width: 145px; }
	.sb-nav { position: static; }
	.sb-nav-toggle {
		position: fixed;
		top: 0; left: 0; right: 0;
		z-index: 40;
		display: flex;
		align-items: center;
		gap: 6px;
		height: 42px;
		box-sizing: border-box;
		padding: 0 6px 0 16px;
		border: 0;
		background: #0c0000;
		color: #fff;
		font: inherit;
		font-size: 20px;
		text-transform: uppercase;
		cursor: pointer;
	}
	.admin-bar .sb-nav-toggle { top: 46px; }
	.sb-burger, .sb-burger::before, .sb-burger::after {
		display: block;
		width: 30px; height: 3px;
		border-radius: 3px;
		background: #fff;
		transition: transform 200ms, background 200ms;
	}
	.sb-burger { position: relative; }
	.sb-burger::before, .sb-burger::after { content: ""; position: absolute; left: 0; }
	.sb-burger::before { top: -9px; }
	.sb-burger::after { top: 9px; }
	.sb-nav-toggle[aria-expanded=true] .sb-burger { background: transparent; }
	.sb-nav-toggle[aria-expanded=true] .sb-burger::before { transform: translateY(9px) rotate(45deg); }
	.sb-nav-toggle[aria-expanded=true] .sb-burger::after { transform: translateY(-9px) rotate(-45deg); }
	.sb-menu {
		position: fixed;
		top: 42px; left: 0; bottom: 0;
		z-index: 39;
		flex-direction: column;
		width: 80%;
		max-width: 400px;
		background: #0c0000;
		transform: translateX(-100%);
		visibility: hidden;
		transition: transform 300ms ease, visibility 300ms;
	}
	.admin-bar .sb-menu { top: 88px; }
	.sb-nav.is-open .sb-menu { transform: none; visibility: visible; }
	.sb-menu li:last-child a, .sb-menu a { padding: 13px 14px; font-family: inherit; font-size: 15px; font-weight: 400; text-transform: uppercase; }

	.sb-main-nieuws { min-height: calc(100vh - 86px); }
	.sb-nieuws { width: 290px; }
	.sb-kaarten { gap: 20px; }
	.sb-kaarten > li { flex-basis: 290px; }
	.sb-kaart-titel { font-size: 18px; }
	.sb-titel { padding: 20px 10px; }
	.sb-paneel-inhoud { padding: 10px; }
	.sb-kolom-links { padding: 22px; }
	.sb-kolom-links h1 { padding-top: 10px; }
	.sb-bericht { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
	.sb-achtergrond img, .sb-kaarten, .sb-kaarten > li, .sb-kaart-foto,
	.wp-block-gallery.is-style-sb-slider figure.wp-block-image { transition: none !important; }
}