/*
Theme Name: Ligtvoet Bouw
Theme URI: https://aannemersbedrijf-ligtvoet.nl/
Author: Aannemersbedrijf Ligtvoet
Description: A bespoke Gutenberg block theme for Aannemersbedrijf Ligtvoet.
Version: 1.0.0
Text Domain: ligtvoet-bouw
*/

/*
 * Colours, fonts, spacing, buttons and links are set in theme.json and in the
 * block settings of each page. This file only holds what those settings cannot do.
 */

/* Keyboard focus outline. theme.json has no setting for focus outlines. */
a:focus-visible {
	outline: 3px solid var(--wp--preset--color--signal-red);
	outline-offset: 4px;
}

/* Smooth scrolling for in-page links such as "Bekijk de diensten". */
html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Rotated frame behind the hero graphic. Rotation is not a block setting. */
.hero__visual {
	position: relative;
	isolation: isolate;
}

.hero__visual::before {
	position: absolute;
	inset: 8% 2% 5% 7%;
	z-index: -1;
	border: 1px solid rgba(245, 245, 245, 0.16);
	content: "";
	transform: rotate(-5deg);
}

/* The hero SVG is pasted as raw HTML, so it needs to scale inside its column. */
.hero__visual svg {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Inline text colour wraps highlighted words in <mark>; drop the browser's yellow default. */
mark.has-inline-color{background:transparent}