/*
 * The header's light/dark switch (#115): a round 44 px button left of
 * "Mitglied werden". Shown only with JavaScript, which it needs; the head
 * script marks the page with .svb-js before it draws.
 */
/* Our own designs only: Chrome's force-dark would recolour the light one badly
   (developer.chrome.com/blog/auto-dark-theme); the switch gives the dark one. */
:root { color-scheme: only light; }

.svb-scheme-switch { display: none; }
.svb-js .svb-scheme-switch {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	background: var(--wp--preset--color--light);
	color: var(--wp--preset--color--dark);
	cursor: pointer;
}
.svb-scheme-switch__sun { display: none; }

/* Room for the switch where the header is tight: on small phones the join
   button would run off the screen, and from 1024 px (where the menu groups
   sit on one row) up to 1099 px they would wrap onto a second row. */
@media (max-width: 389px) {
	.svb-js .svb-header { padding-left: 16px !important; padding-right: 16px !important; }
	.svb-js .svb-header > .wp-block-group:last-child { gap: 8px !important; }
}
@media (min-width: 1024px) and (max-width: 1099px) {
	.svb-js .svb-header > .wp-block-group:last-child { gap: 16px !important; }
}