/*
 * WordPress integration only.
 * The reference design lives untouched in assets/css/main.css.
 */

/* Skip link and visually hidden helper (not part of the compiled CSS). */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	z-index: 100;
	background: #241f19;
	color: #fbf9f5;
	padding: 0.75rem 1.25rem;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
}

.skip-link:focus,
.skip-link:focus-visible {
	left: 1rem;
	top: 1rem;
}

/* The header is fixed; keep it below the admin bar. */
body.admin-bar #site-nav {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar #site-nav {
		top: 46px;
	}
}

/* Anchor targets clear the fixed header. */
#top,
#salon,
#behandelingen,
#prijzen,
#reviews,
#contact {
	scroll-margin-top: 5rem;
}

/* Core block-library CSS adds "figure { margin: 0 0 1em }"; the design expects none. */
#reviews figure {
	margin: 0;
}

/* A WordPress custom logo must match the bundled logo sizing. */
.custom-logo-link {
	display: inline-flex;
	align-items: center;
}

.custom-logo-link .custom-logo {
	height: 2.25rem;
	width: auto;
	mix-blend-mode: multiply;
}

@media (min-width: 1024px) {
	.custom-logo-link .custom-logo {
		height: 2.5rem;
	}
}