.scm {
	--scm-text: #222;
	--scm-bg: #fff;
	--scm-hover: #E9E9E9;
	--scm-press: #DEDEDE;
	--scm-current: #C1282D;
	--scm-current-strong: #AA2328;
	--scm-mobile-bg: #F3F3F3;
	--scm-stroke: #949494;
	--scm-stroke-light: #C9C9C9;
	--scm-focus: #222;
	--scm-logo-h: 50px;
	--scm-pad: 32px;
	font-family: "Poppins", sans-serif;
	color: var(--scm-text);
	background: var(--scm-bg);
}

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

.scm ul { list-style: none; margin: 0; padding: 0; }
.scm li { margin: 0; padding: 0; }
.scm li::before, .scm li::marker { content: none; }

.scm-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.scm-ico { display: block; width: 24px; height: 24px; flex: none; }

.scm-logo { display: inline-flex; border-radius: 4px; }
.scm-logo img { display: block; height: var(--scm-logo-h); width: auto; max-width: none; }

/* Reset van theme-knopstijlen */
.scm button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	border: 0;
	box-shadow: none;
	text-transform: none;
	letter-spacing: 0;
	min-height: 0;
	font-family: inherit;
	cursor: pointer;
}

.scm a:focus-visible,
.scm button:focus-visible {
	outline: 2px solid var(--scm-focus);
	outline-offset: 2px;
}

/* ---------- Desktop ---------- */
.scm-desk {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	min-height: 98px;
	padding: 0 var(--scm-pad);
	background: var(--scm-bg);
}
.scm-start { justify-self: start; display: flex; align-items: center; }
.scm-list { display: flex; align-items: center; gap: 4px; }
.scm-tools { justify-self: end; display: flex; align-items: center; }
/* 8px tussen de social-iconen (Instagram en Facebook). */
.scm-tools .scm-icon + .scm-icon { margin-left: 8px; }

.scm .scm-item,
.scm .scm-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 10px 12px;
	border-radius: 12px;
	background: var(--scm-bg);
	color: var(--scm-text);
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	text-decoration: none;
	white-space: nowrap;
}
.scm .scm-icon { padding: 10px; }

.scm .scm-item:hover,
.scm .scm-icon:hover,
.scm .scm-toggle[aria-expanded="true"] { background: var(--scm-hover); color: var(--scm-text); }
.scm .scm-item:active,
.scm .scm-icon:active { background: var(--scm-press); }

.scm .scm-item[aria-current="page"],
.scm .scm-has-sub.is-current > .scm-toggle { color: var(--scm-current); }
.scm .scm-item[aria-current="page"]:hover,
.scm .scm-item[aria-current="page"]:active,
.scm .scm-has-sub.is-current > .scm-toggle:hover,
.scm .scm-has-sub.is-current > .scm-toggle:active,
.scm .scm-has-sub.is-current > .scm-toggle[aria-expanded="true"] { color: var(--scm-current-strong); }

.scm-toggle .scm-ico { transition: transform .15s ease; }
.scm-toggle[aria-expanded="true"] .scm-ico { transform: rotate(180deg); }

.scm-has-sub { position: relative; }
.scm-flyout {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 1000;
	min-width: 280px;
	padding: 8px 0 !important;
	overflow: hidden;
	background: var(--scm-bg);
	border-radius: 16px;
	box-shadow: 0 8px 32px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.08), 0 4px 8px rgba(0,0,0,.08);
}
.scm-flyout[hidden] { display: none; }
.scm .scm-flyout-item {
	display: block;
	padding: 12px 16px;
	color: var(--scm-text);
	background: var(--scm-bg);
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	text-decoration: none;
	white-space: nowrap;
}
.scm .scm-flyout-item:hover { background: var(--scm-hover); color: var(--scm-text); }
.scm .scm-flyout-item:active { background: var(--scm-press); }
.scm .scm-flyout-item[aria-current="page"] { color: var(--scm-current); }
.scm .scm-flyout-item[aria-current="page"]:hover,
.scm .scm-flyout-item[aria-current="page"]:active { color: var(--scm-current-strong); }
.scm .scm-flyout-item:focus-visible { outline-offset: -2px; }

/* Taalkeuze */
.scm-lang { position: relative; width: 80px; height: 44px; margin-left: 10px; }
.scm-lang-box {
	position: absolute;
	top: 0; left: 0; right: 0;
	z-index: 1000;
	overflow: hidden;
	background: var(--scm-bg);
	border: 1px solid var(--scm-stroke);
	border-radius: 8px;
}
.scm .scm-lang-toggle,
.scm .scm-lang-opt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 42px;
	padding: 8px 12px;
	background: var(--scm-bg);
	color: var(--scm-text);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	text-decoration: none;
	border-radius: 0;
}
.scm .scm-lang-opt { height: 44px; }
.scm .scm-lang-toggle:hover,
.scm .scm-lang-opt:hover { background: var(--scm-hover); color: var(--scm-text); }
.scm .scm-lang-toggle:active,
.scm .scm-lang-opt:active { background: var(--scm-press); }
.scm .scm-lang-toggle:focus-visible,
.scm .scm-lang-opt:focus-visible { outline-offset: -3px; }
.scm-lang-toggle[aria-expanded="true"] .scm-ico { transform: rotate(180deg); }
.scm-lang-list[hidden] { display: none; }

/* ---------- Mobiel en tablet ---------- */
.scm-mob {
	display: none;
	align-items: center;
	justify-content: space-between;
	min-height: 82px;
	padding: 16px;
	background: var(--scm-bg);
}

.scm .scm-menu-btn,
.scm .scm-close {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	margin-right: -12px;
	border-radius: 12px;
	background: var(--scm-bg);
	color: var(--scm-text);
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
}
.scm .scm-menu-btn:hover,
.scm .scm-close:hover { background: var(--scm-hover); color: var(--scm-text); }
.scm .scm-menu-btn:active,
.scm .scm-close:active { background: var(--scm-press); }

/*
 * Het venster zelf scrollt niet: kop en taalkeuze staan vast, alleen .scm-mbody scrollt.
 * Dat voorkomt het haperen van een scrollend venster boven een geblokkeerde pagina in iOS Safari.
 */
.scm-dialog {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	height: 100dvh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--scm-bg);
	color: var(--scm-text);
	overflow: hidden;
}
.scm-dialog[open] { display: flex; flex-direction: column; }
.scm-dialog::backdrop { background: transparent; }
.scm-dialog:focus, .scm-dialog:focus-visible { outline: none; }

/* Optische uitlijning: iets boven het geometrische midden, zodat de knop in balans is met het logo. */
.scm-mob .scm-menu-btn,
.scm-dlg-head .scm-close { position: relative; top: -1px; }

.scm-dlg-head {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 82px;
	padding: 16px;
	background: var(--scm-bg);
}

.scm-mbody {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 0 16px 16px;
}

.scm-mlist {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 8px !important;
	border-radius: 12px;
	overflow: hidden;
}
.scm .scm-mitem {
	display: block;
	padding: 16px;
	background: var(--scm-mobile-bg);
	color: var(--scm-text);
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	text-decoration: none;
}
.scm .scm-mitem:hover { background: var(--scm-hover); color: var(--scm-text); }
.scm .scm-mitem:active { background: var(--scm-press); }
.scm .scm-mitem[aria-current="page"] { color: var(--scm-current); }
.scm .scm-mitem[aria-current="page"]:hover,
.scm .scm-mitem[aria-current="page"]:active { color: var(--scm-current-strong); }
.scm .scm-mitem:focus-visible { outline-offset: -2px; }

/* Social media in het mobiele menu: eigen blok, 16px onder het menu, met icoon en naam. */
.scm-msocial {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 16px !important;
	border-radius: 12px;
	overflow: hidden;
}
.scm .scm-msocial-item { display: flex; align-items: center; gap: 8px; }

/* Taalkeuze vast onderin, in een witte balk. Schaduw alleen als er menu onder de balk doorloopt. */
.scm-mfoot {
	flex: none;
	position: relative;
	z-index: 1;
	padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
	background: var(--scm-bg);
	transition: box-shadow .2s ease;
}
.scm-mfoot.is-raised { box-shadow: 0 -4px 16px rgba(0,0,0,.08); }

.scm-mlang {
	display: flex;
	gap: 8px;
}
.scm-mlang li { flex: 1 1 0; }
.scm .scm-mlang-opt {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	border: 1px solid var(--scm-stroke-light);
	border-radius: 8px;
	background: var(--scm-bg);
	color: var(--scm-text);
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	text-decoration: none;
}
.scm .scm-mlang-opt[aria-current="true"] { border-color: var(--scm-text); }
.scm .scm-mlang-opt:hover { background: var(--scm-hover); color: var(--scm-text); }
.scm .scm-mlang-opt:active { background: var(--scm-press); }

html.scm-lock, html.scm-lock body { overflow: hidden; }

/* Laptop: dezelfde zijmarge als de rest van de site (40px). */
@media (min-width: 1025px) and (max-width: 1366px) {
	.scm { --scm-pad: 40px; }
}

@media (max-width: 1024px) {
	.scm-desk { display: none; }
	.scm-mob { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
	.scm-toggle .scm-ico, .scm-mfoot { transition: none; }
}