/* Additions for the static site; elementor.css is the original Elementor/theme CSS, reduced to the rules in use. */

/* The hero photo behind every page title (elementor.css uses this variable): WebP, smaller on phones. */
:root {
	--hero-image: image-set(url(/images/hero-schadevergoeding.webp) type("image/webp"), url(/images/scahdevergoeding-strafrecht3.jpg) type("image/jpeg"));
}
@media (max-width: 767px) {
	:root {
		--hero-image: image-set(url(/images/hero-schadevergoeding-800.webp) type("image/webp"), url(/images/scahdevergoeding-strafrecht3.jpg) type("image/jpeg"));
	}
}

/* Elementor Pro made the header sticky with JavaScript. */
.elementor-location-header {
	position: sticky;
	top: 0;
	z-index: 99;
}

/* SmartMenus showed desktop submenus on hover; now CSS does, also for keyboard users. */
.elementor-nav-menu--main .menu-item-has-children:hover > .sub-menu,
.elementor-nav-menu--main .menu-item-has-children:focus-within > .sub-menu {
	display: block;
}
.elementor-nav-menu--main .elementor-nav-menu > li > .sub-menu {
	top: 100%;
	left: 0;
	width: auto;
	min-width: 12em;
}
.elementor-nav-menu--main .sub-menu .elementor-sub-item {
	white-space: nowrap;
}

/* Skip link from the Hello Elementor theme, visible on keyboard focus only. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	word-wrap: normal !important;
}
.skip-link:focus {
	z-index: 100000;
	top: 8px;
	left: 8px;
	width: auto;
	height: auto;
	padding: 12px 20px;
	clip: auto !important;
	background: #fff;
	color: #000;
	font-size: 14px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
}

/* The contact form became two buttons: keep the gap the form fields had. */
.elementor-widget-form .e-form__buttons + .e-form__buttons {
	margin-top: 10px;
}
.elementor-widget-form a.elementor-button {
	width: 100%;
}
.elementor-5 .elementor-element.elementor-element-acbf504 a.elementor-button,
.elementor-5 .elementor-element.elementor-element-acbf504 a.elementor-button:hover {
	background-color: #000;
	color: #fff;
}

/* Cloudflare's e-mail protection turned the footer address into plain text; now it is a mailto link that looks the same. */
.elementor-location-footer .elementor-icon-list-text a {
	display: inline;
	color: inherit;
}

/* Subheadings and lists in the page texts (added when the texts were rewritten), in the style of the site's headings. */
.elementor-widget-theme-post-content h2 {
	margin: 1.6em 0 .6em;
	font-family: "Rubik", Sans-serif;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--e-global-color-primary);
}
.elementor-widget-theme-post-content ul {
	margin: 0 0 .9rem;
	padding-left: 1.2em;
}
.elementor-widget-theme-post-content li {
	margin-bottom: .35em;
}

/* Frequently asked questions: native <details>, chevron in the accent red like the icon lists. */
.ssr-faq {
	margin-bottom: 1.5em;
	border-top: 1px solid #ececec;
}
.ssr-faq__item {
	border-bottom: 1px solid #ececec;
}
.ssr-faq__item summary {
	position: relative;
	padding: 14px 36px 14px 0;
	list-style: none;
	cursor: pointer;
	font-family: "Rubik", Sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--e-global-color-primary);
}
.ssr-faq__item summary::-webkit-details-marker {
	display: none;
}
.ssr-faq__item summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 8px;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--e-global-color-secondary);
	border-bottom: 2px solid var(--e-global-color-secondary);
	transform: translateY(-70%) rotate(45deg);
	transition: transform .2s;
}
.ssr-faq__item[open] summary::after {
	transform: translateY(-20%) rotate(-135deg);
}
.ssr-faq__item summary:hover,
.ssr-faq__item summary:focus-visible {
	color: var(--e-global-color-secondary);
}
.ssr-faq__answer {
	padding-bottom: 6px;
}