/*
	Hoevers theme
	-----------------------------------------------------------------
	Source of default.css (compiled by compilerconfig.json, Web Compiler); both stay the same: plain CSS, because the
	bundler drops a file with nesting, :is(), :where() or :has(). Paths in url() are absolute: the bundler does not rewrite them.

	A port of the U8 site's default.css (_migration/_u8-source/Css/default.css) onto the Codebase markup, measured against
	https://www.hoeversgroep.nl. Header, hero, breadcrumb, footer, counter and sitemap are the theme's own partials
	(Views/Partials); the sections are block grid rows, whose anchor (#onze_diensten ...) and theme colour (Blauw, Grijs)
	come from the row settings.
	- Every top-level row is a section: 15px from the window edges and from each other, 94px above and 128px below the
	  content, the content on the 1680px line with 55px inside the section.
	- An image that is the only block in the left or right column of a row fills that half of the section with the diagonal
	  edge of live; once the columns stack it sits on top of the section (default.js marks its column).
	- An image followed by other blocks in a one-column row is the section background (Facts & Figures).
	- Breakpoints are live's: 992px (columns stack, hamburger header), 768px and 576px.
*/

/* 1. Fonts ---------------------------------------------------------------------------------------------------------- */

@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/_Codebase/_Themes/Hoevers/Fonts/Outfit-Regular.woff2') format('woff2');
}

@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('/_Codebase/_Themes/Hoevers/Fonts/Outfit-Bold.woff2') format('woff2');
}

/* 2. Tokens and text ------------------------------------------------------------------------------------------------ */

:root {
	--hv-blue: #1D71B8;
	--hv-dark-blue: #1C609D;
	--hv-red: #E30513;
	--hv-grey: #F4F4F4;
	--hv-text: #4A4949;
	--lz-flow: 34px;
	--lz-row-gap: 15px;
}

html, body {
	margin: 0;
	padding: 0;
	line-height: 34px;
	font-family: 'Outfit', arial, sans-serif;
	font-size: 20px;
	font-weight: 400;
}

/* Live loaded Bootstrap's reboot: its text colour and image alignment. */
body {
	background-color: #FFFFFF;
	color: #212529;
	--fa-width: auto;
}

img, svg {
	vertical-align: middle;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

h1, h2, h3, h4, h5, h6, p {
	margin: 34px 0 0 0;
	color: var(--hv-blue);
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
	overflow-wrap: normal;
	hyphens: manual;
}

p {
	color: var(--hv-text);
}

h1 { line-height: 48px; font-size: 48px; }
h2 { line-height: 40px; font-size: 40px; }
h3 { line-height: 34px; font-size: 28px; }
h4 { font-size: 20px; font-weight: 400; }
h5, h6 { font-size: 16px; }
h2 + h3, h3 + h4 { margin-top: 0; }

ul, ol, .rich-text ul, .rich-text ol {
	margin: 34px 0 0 0;
	padding: 0;
}

ul li, ol li {
	margin: 0 0 0 16px;
	padding: 0;
	list-style-type: disc;
}

/* TipTap stores list items as <li><p>; keep them tight like live. */
ul li > p, ol li > p {
	margin: 0;
}

/* TipTap writes fixed width/height attributes on images. */
.rich-text img {
	max-width: 100%;
	height: auto;
}

a, a:active, a:focus, a:hover, a:visited {
	color: #000000;
}

a {
	text-decoration: underline;
}

a:hover {
	text-decoration: none;
}

p.phone, p.email {
	padding-left: 35px;
	position: relative;
	color: var(--hv-blue);
}

p.phone a, p.email a {
	text-decoration: none;
	color: var(--hv-blue);
}

p.phone a:hover, p.email a:hover {
	text-decoration: underline;
}

p.phone::before, p.email::before {
	top: 0;
	left: 0;
	font-family: "Font Awesome 7 Pro";
	font-weight: 300;
	color: var(--hv-red);
	position: absolute;
}

p.phone::before { content: "\f095"; }
p.email::before { content: "\f0e0"; }

/* Core rules that would change the ported look (gotchas U17 upgrade: styling & scripts). */
.rich-text {
	max-width: none;
}

#main iframe {
	margin: 0;
}

#scrollTopBtn {
	display: none;
}

.img-fluid {
	max-width: 100%;
	height: auto;
	display: block;
}

/* 3. Buttons (live a.button; block "Button" = filled, "Link" = live's outlined "alternative") ------------------------- */

#main p.button, #main p.link {
	margin: 34px 15px 0 0;
	float: left;
}

#main p.button a, #main p.link a {
	padding: 7px 19px;
	background-color: var(--hv-blue);
	border: 1px solid var(--hv-blue);
	border-radius: 25px;
	text-decoration: none;
	color: #FFFFFF;
	display: inline-block;
	transition: all linear 125ms;
}

#main p.button a:hover {
	background-color: var(--hv-red);
	border-color: var(--hv-red);
}

#main p.link a {
	background-color: transparent;
	color: var(--hv-blue);
}

#main p.link a:hover {
	background-color: var(--hv-blue);
	border-color: var(--hv-blue);
	color: #FFFFFF;
}

/* Live puts the second button of "Werken bij Hoevers" on the right. */
#werken_bij_hoevers p.button + p.button {
	margin-right: 0;
	float: right;
}

/* 4. Header: logo, header button and the hamburger with the onepage menu, over the first section --------------------- */

.hv-header {
	top: 15px;
	right: 15px;
	left: 15px;
	padding: 0 15px;
	position: absolute;
	z-index: 10;
}

/* The 1680px line of live (inner-wrapper); the hamburger sits against it. */
.hv-header__inner {
	max-width: 1680px;
	margin: 0 auto;
	position: relative;
}

.hv-header__bar {
	padding: 34px 87px 34px 55px;
	box-sizing: border-box;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.hv-header__logo {
	display: inline-block;
}

.hv-header__logo img {
	width: auto;
	height: 96px;
	display: block;
}

a.hv-header__button, a.hv-header__button:visited {
	margin: 15px 0;
	padding: 7px 19px;
	background-color: transparent;
	border: 1px solid #FFFFFF;
	border-radius: 25px;
	text-decoration: none;
	color: #FFFFFF;
	display: inline-block;
	transition: all linear 125ms;
}

a.hv-header__button:hover, a.hv-header__button:focus {
	background-color: #FFFFFF;
	color: var(--hv-blue);
}

.burger-placeholder {
	top: 58px;
	right: 15px;
	width: 32px;
	height: 32px;
	display: block;
	position: absolute;
}

.hv-burger {
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	display: block;
	position: relative;
	cursor: pointer;
}

.burger-placeholder .bun, .burger-placeholder .burger {
	display: block;
}

.burger-placeholder .bun::before {
	top: 5px;
	right: 5px;
	width: 32px;
	height: 2px;
	background: #FFFFFF;
	transition: all 0.5s cubic-bezier(0.1, 0.9, 0, 1.2);
	content: "";
	position: absolute;
}

.burger-placeholder .bun::after {
	bottom: 5px;
	left: -5px;
	width: 32px;
	height: 2px;
	background: #FFFFFF;
	transition: all 0.5s cubic-bezier(0.1, 0.9, 0, 1.2);
	content: "";
	position: absolute;
}

.burger-placeholder .bun .burger {
	top: 0;
	left: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	position: absolute;
}

.burger-placeholder .bun .burger::before, .burger-placeholder .bun .burger::after {
	width: 100%;
	height: 2px;
	background: #FFFFFF;
	transition: all 0.5s cubic-bezier(0.1, 0.9, 0, 1.2);
	content: "";
	position: absolute;
}

.burger-placeholder.is-open .bun::before, .burger-placeholder.is-open .bun::after {
	width: 0;
}

.burger-placeholder.is-open .bun .burger::before {
	transform: rotate(135deg);
}

.burger-placeholder.is-open .bun .burger::after {
	transform: rotate(45deg);
}

.burger-placeholder nav {
	top: calc(100% + 42px);
	right: 0;
	background-color: #FFFFFF;
	position: absolute;
	visibility: hidden;
	opacity: 0;
	transform: translateY(-2em);
	z-index: 1;
	transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}

.burger-placeholder.is-open nav {
	visibility: visible;
	opacity: 1;
	transform: translateY(0%);
	transition-delay: 0s, 0s, 0.3s;
}

.burger-placeholder nav ul, .burger-placeholder nav ul li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.burger-placeholder nav ul li a {
	text-decoration: none;
	display: block;
}

.burger-placeholder nav ul li a:hover {
	text-decoration: underline;
}

.burger-placeholder nav ul li a span {
	padding: 7px 20px;
	white-space: nowrap;
	display: block;
}

/* 5. Hero (homepage): the outlined label, the title, the truck that drives in and the bouncing chevron ---------------- */

.hv-hero {
	padding: 15px 15px 0 15px;
}

.hv-hero__box {
	height: calc(100vh - 30px);
	background-color: var(--hv-blue);
	position: relative;
	overflow: hidden;
}

.hv-hero__box::before {
	top: 0;
	right: 0;
	bottom: 0;
	left: 100%;
	width: 100%;
	height: 100%;
	/* The homepage's header image (header.cshtml sets --hv-hero-truck); the theme's own truck without one. */
	background-image: var(--hv-hero-truck, url('/_Codebase/_Themes/Hoevers/Images/sliding_truck_with_shadow.png'));
	background-position: center left;
	background-size: 50% auto;
	background-repeat: no-repeat;
	content: "";
	display: block;
	position: absolute;
	animation: hv-load-up 4s forwards;
}

.hv-hero__box::after {
	left: 50%;
	bottom: 94px;
	width: 48px;
	height: 48px;
	line-height: 48px;
	font-family: "Font Awesome 7 Pro";
	font-size: 32px;
	font-weight: 300;
	text-align: center;
	color: #FFFFFF;
	content: "\f078";
	display: block;
	transform: translateX(-50%);
	transform-origin: bottom;
	position: absolute;
	animation: hv-bounce 2s ease infinite;
}

/* Centred in what is left under live's 94px top padding: 50% + 47px. */
.hv-hero__text {
	top: calc(50% + 47px);
	left: 0;
	right: 0;
	max-width: 1680px;
	margin: 0 auto;
	padding: 0 40px 128px 55px;
	box-sizing: border-box;
	position: absolute;
	transform: translateY(-50%);
	z-index: 1;
}

.hv-hero__text h2 {
	line-height: 168px;
	font-size: 168px;
	font-style: italic;
	color: var(--hv-blue);
	opacity: 0.5;
	-webkit-text-stroke: 1px #FFFFFF;
}

.hv-hero__text h1 {
	max-width: 50%;
	line-height: 72px;
	font-size: 72px;
	color: #FFFFFF;
}

@keyframes hv-load-up {
	from { left: 100%; }
	to { left: 50%; }
}

@keyframes hv-bounce {
	0% { transform: translate(-50%, 0); }
	30% { transform: translate(-50%, -34px); }
	50% { transform: translate(-50%, 0); }
	100% { transform: translate(-50%, 0); }
}

/* 6. Breadcrumb band (subpages) --------------------------------------------------------------------------------------- */

.hv-breadcrumb {
	padding: 15px 15px 0 15px;
}

.hv-breadcrumb__box {
	padding: 166px 0 34px 0;
	background-color: var(--hv-blue);
}

.hv-breadcrumb ol.breadcrumb {
	max-width: 1680px;
	margin: 0 auto;
	padding: 0 55px;
	box-sizing: border-box;
}

.hv-breadcrumb ol.breadcrumb::after {
	content: "";
	display: table;
	clear: both;
}

.hv-breadcrumb ol.breadcrumb li {
	margin: 0 10px 0 0;
	padding: 0;
	list-style-type: none;
	color: #FFFFFF;
	display: inline-block;
	float: left;
}

.hv-breadcrumb ol.breadcrumb li:last-of-type {
	margin-right: 0;
}

.hv-breadcrumb ol.breadcrumb li:not(:last-of-type)::after {
	margin-left: 10px;
	content: ">";
	display: inline-block;
}

.hv-breadcrumb ol.breadcrumb li a {
	color: #FFFFFF;
	display: inline-block;
}

.hv-breadcrumb ol.breadcrumb li a span {
	display: block;
}

/* 7. Sections: the top-level rows of the block grid -------------------------------------------------------------------- */

#main {
	padding-block: 0;
}

#main > .umb-block-grid {
	max-width: none;
	padding: 15px 15px 0 15px;
	row-gap: 15px;
}

#main > .umb-block-grid > .lz-row {
	padding: 94px 0 128px 0;
	background-color: var(--lz-row-bg, transparent);
}

#main > .umb-block-grid > .lz-row > .umb-block-grid__layout-container {
	max-width: 1680px;
	margin: 0 auto;
	padding: 0 55px;
	box-sizing: border-box;
	position: static;
}

/* Umbraco's column gap counts at all 11 track boundaries: on a phone that alone is wider than the row. Capped at what fits. */
#main .umb-block-grid__layout-container {
	column-gap: min(var(--umb-block-grid--column-gap, 0px), calc(99% / 11));
}

#main .umb-block-grid__area-container {
	column-gap: min(var(--umb-block-grid--areas-column-gap, 32px), calc(99% / 11));
}

/* Two columns 110px apart as on live (15 + 40 on either side of the line), as padding: a gap would count 11 times. */
#main > .umb-block-grid > .lz-row > .umb-block-grid__layout-container > .umb-block-grid__layout-item > .umb-block-grid__area-container {
	column-gap: 0;
}

#main > .umb-block-grid > .lz-row > .umb-block-grid__layout-container > .umb-block-grid__layout-item > .umb-block-grid__area-container > .umb-block-grid__area[data-area-alias="left"] {
	padding-right: 55px;
}

#main > .umb-block-grid > .lz-row > .umb-block-grid__layout-container > .umb-block-grid__layout-item > .umb-block-grid__area-container > .umb-block-grid__area[data-area-alias="right"] {
	padding-left: 55px;
}

/* Static down to the columns, so an image in a column can fill (half of) the section itself. */
#main > .umb-block-grid > .lz-row > .umb-block-grid__layout-container > .umb-block-grid__layout-item,
#main > .umb-block-grid > .lz-row > .umb-block-grid__layout-container > .umb-block-grid__layout-item > .umb-block-grid__area-container,
#main > .umb-block-grid > .lz-row > .umb-block-grid__layout-container > .umb-block-grid__layout-item > .umb-block-grid__area-container > .umb-block-grid__area {
	position: static;
}

.lz-on-dark h2, .lz-on-dark h3, .lz-on-dark p {
	color: #FFFFFF;
}

/* The video column of "Wij zijn Hoevers" starts at the top of the section, as on live. */
#wij_zijn_hoevers .umb-block-grid__area[data-area-alias="right"] > div:first-child {
	margin-top: 0;
}

/* 8. Images as (half) section backgrounds ------------------------------------------------------------------------------ */

#main > .umb-block-grid > .lz-row .umb-block-grid__area[data-area-alias="left"] > .image:only-child,
#main > .umb-block-grid > .lz-row .umb-block-grid__area[data-area-alias="right"] > .image:only-child {
	top: 0;
	bottom: 0;
	width: 50%;
	margin: 0;
	position: absolute;
	overflow: hidden;
}

#main > .umb-block-grid > .lz-row .umb-block-grid__area[data-area-alias="left"] > .image:only-child {
	left: 0;
}

#main > .umb-block-grid > .lz-row .umb-block-grid__area[data-area-alias="right"] > .image:only-child {
	right: 0;
}

#main > .umb-block-grid > .lz-row .umb-block-grid__area > .image:only-child picture,
#main > .umb-block-grid > .lz-row .umb-block-grid__area > .image:only-child img,
#main > .umb-block-grid > .lz-row .umb-block-grid__area[data-area-alias="Column"] > .image:first-child picture,
#main > .umb-block-grid > .lz-row .umb-block-grid__area[data-area-alias="Column"] > .image:first-child img {
	width: 100%;
	height: 100%;
	max-width: none;
	display: block;
	object-fit: cover;
}

#main > .umb-block-grid > .lz-row .umb-block-grid__area[data-area-alias="left"] > .image:only-child img {
	object-position: right center;
}

#main > .umb-block-grid > .lz-row .umb-block-grid__area[data-area-alias="right"] > .image:only-child img {
	object-position: left center;
}

/* The diagonal edge towards the text (live: background_image_left/right.svg, white or grey as the section). */
#main > .umb-block-grid > .lz-row .umb-block-grid__area[data-area-alias="left"] > .image:only-child::after,
#main > .umb-block-grid > .lz-row .umb-block-grid__area[data-area-alias="right"] > .image:only-child::after {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-repeat: no-repeat;
	background-size: auto 100%;
	content: "";
	position: absolute;
	z-index: 1;
}

#main > .umb-block-grid > .lz-row .umb-block-grid__area[data-area-alias="left"] > .image:only-child::after {
	background-image: url('/_Codebase/_Themes/Hoevers/Images/background_image_left.svg');
	background-position: right -1px top;
}

#main > .umb-block-grid > .lz-row .umb-block-grid__area[data-area-alias="right"] > .image:only-child::after {
	background-image: url('/_Codebase/_Themes/Hoevers/Images/background_image_right.svg');
	background-position: left -1px top;
}

#main > .umb-block-grid > .lz-row.lz-bg--grijs .umb-block-grid__area[data-area-alias="left"] > .image:only-child::after {
	background-image: url('/_Codebase/_Themes/Hoevers/Images/background_image_left_grey.svg');
}

#main > .umb-block-grid > .lz-row.lz-bg--grijs .umb-block-grid__area[data-area-alias="right"] > .image:only-child::after {
	background-image: url('/_Codebase/_Themes/Hoevers/Images/background_image_right_grey.svg');
}

/* Section background (Facts & Figures): the photo over the full window width, multiplied with the blue. */
#main > .umb-block-grid > .lz-row .umb-block-grid__area[data-area-alias="Column"] > .image:first-child:not(:only-child) {
	top: 0;
	right: -15px;
	bottom: 0;
	left: -15px;
	margin: 0;
	background-color: var(--hv-blue);
	position: absolute;
	overflow: hidden;
}

#main > .umb-block-grid > .lz-row .umb-block-grid__area[data-area-alias="Column"] > .image:first-child:not(:only-child) img {
	object-position: center center;
	mix-blend-mode: multiply;
}

/* 9. Services (#onze_diensten): every text block that starts with a heading 3 is an accordion item (default.js) ------- */

.rich-text.service {
	margin: 28px 0 0 0;
	padding: 0 30px 30px 30px;
	background-color: rgba(244, 244, 244, 0.5);
	/* Only the colour: default.js adds .service after load, a transition on all would animate padding and margin in. */
	transition: background-color linear 125ms;
	cursor: pointer;
}

.rich-text:not(.service) + .rich-text.service {
	margin-top: 34px;
}

/* Live's .group: the margin of the heading stays inside the item. */
.rich-text.service::before, .rich-text.service::after {
	content: "";
	display: table;
}

.rich-text.service:hover {
	background-color: var(--hv-grey);
}

.rich-text.service h3 {
	margin-top: 30px;
	padding-left: 89px;
	padding-right: 22px;
	line-height: 50px;
	font-size: 28px;
	background-image: url('/_Codebase/_Themes/Hoevers/Images/logo.svg');
	background-position: center left;
	background-repeat: no-repeat;
	background-size: auto 50px;
	position: relative;
}

.rich-text.service h3::after {
	top: 0;
	right: 0;
	font-family: "Font Awesome 7 Pro";
	font-weight: 300;
	color: var(--hv-red);
	content: "\f054";
	position: absolute;
}

.rich-text.service:not(.is--expanded) p {
	display: none;
}

.rich-text.service.is--expanded {
	background-color: var(--hv-dark-blue);
}

.rich-text.service.is--expanded h3, .rich-text.service.is--expanded p {
	color: #FFFFFF;
}

.rich-text.service.is--expanded h3::after {
	content: "\f00d";
	color: #FFFFFF;
}

/* 10. Truck animation: a dashed route between two pins, the truck drives along it --------------------------------------- */

#main > .umb-block-grid > #vrachtwagen-animatie {
	padding: 0;
}

#main > .umb-block-grid > #vrachtwagen-animatie > .umb-block-grid__layout-container {
	max-width: none;
	padding: 0;
}

.truck-animation {
	margin: 0 -15px;
}

.truck-animation .placeholder {
	height: 64px;
	margin: 34px 0;
	position: relative;
	overflow: hidden;
}

.truck-animation .placeholder hr {
	margin: 31px 0;
	padding: 0;
	border: 0;
	border-top: 2px dashed var(--hv-blue);
}

.truck-animation .placeholder hr::before, .truck-animation .placeholder hr::after {
	top: 0;
	font-family: "Font Awesome 7 Pro";
	font-weight: 300;
	color: var(--hv-blue);
	position: absolute;
}

.truck-animation .placeholder hr::before {
	left: 15px;
	content: "\f041";
}

.truck-animation .placeholder hr::after {
	right: 15px;
	content: "\f60d";
}

.truck-animation .placeholder .truck {
	top: 0;
	left: -30%;
	width: 200px;
	height: 64px;
	display: block;
	position: absolute;
	animation: hv-move 10s linear 0s infinite;
}

.truck-animation .placeholder .truck img {
	width: 100%;
	height: 100%;
	display: block;
}

@keyframes hv-move {
	from { left: -30%; }
	to { left: 100%; }
}

/* 11. Counters (#facts_and_figures): three, two or one wide, as live's col-md-6 col-lg-4 -------------------------------- */

#facts_and_figures .umb-block-grid__area[data-area-alias="Column"] {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: start;
	column-gap: 30px;
}

#main .counter {
	height: auto;
	margin-top: 34px;
	text-align: center;
	position: relative;
	z-index: 1;
}

#main .counter img {
	width: auto;
	height: 96px;
	margin: 0 auto 34px auto;
}

#main .counter h3 {
	color: var(--hv-blue);
}

#main .lz-on-dark .counter h3, #main .lz-on-dark .counter p {
	color: #FFFFFF;
}

/* 12. Sitemap -------------------------------------------------------------------------------------------------------- */

.sitemap ul {
	margin: 34px 0 0 0;
	padding: 0;
}

.sitemap ul li, .sitemap ul li.level-2, .sitemap ul li.level-3 {
	margin: 0 0 0 16px;
	padding: 0;
	list-style-type: disc;
}

/* 13. Footer and the legal navigation under it ------------------------------------------------------------------------- */

#footer {
	margin-top: 15px;
}

#footer::after {
	content: "";
	display: table;
	clear: both;
}

.hv-footer {
	margin-bottom: 15px;
	padding: 0 15px;
}

.hv-footer__box {
	background-color: var(--hv-blue);
}

.hv-footer__grid {
	max-width: 1680px;
	margin: 0 auto;
	padding: 94px 0 0 0;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hv-footer__grid > div {
	padding: 0 55px 128px 55px;
}

.hv-footer a.logo img {
	width: auto;
	height: 80px;
	margin-top: 34px;
}

.hv-footer .certificates {
	margin-top: 34px;
}

.hv-footer .certificates img {
	width: auto;
	height: 120px;
	margin-right: 20px;
	display: inline-block;
}

.hv-footer .certificates img:nth-child(1) {
	height: 70px;
	margin: 30px 20px 30px 0;
}

.hv-footer .certificates img:nth-child(2) {
	height: 90px;
	margin: 30px 0 30px 0;
}

.hv-footer p, .hv-footer p a, .hv-footer p a:hover {
	color: #FFFFFF;
}

.hv-footer p a {
	text-decoration: none;
}

.hv-footer p a:hover {
	text-decoration: underline;
}

#disclaimer-navigation {
	margin: 0 0 15px 15px;
	padding: 0;
	font-size: 16px;
	float: left;
}

/* Live: no bullets in the Cookiebot banner (loaded by GTM); the theme's list bullets would otherwise reach it. */
.CybotCookiebotDialogContentWrapper ul > li {
	list-style-type: none;
}

/* 14. Smaller screens (live's breakpoints) ---------------------------------------------------------------------------- */

@media (max-width: 992px) {
	html, body {
		font-size: 18px;
	}

	h1 { line-height: 34px; font-size: 32px; }
	h2 { line-height: 34px; font-size: 28px; }
	h3 { font-size: 24px; }
	h4 { font-size: 20px; }

	.hv-header__bar {
		padding: 34px 30px 34px 30px;
		display: block;
	}

	.hv-header__logo {
		width: max-content;
		display: block;
	}

	a.hv-header__button, a.hv-header__button:visited {
		margin: 34px auto 15px auto;
		text-align: center;
		display: table;
	}

	/* Live: 40% down what is left under its 14px top padding. */
	.hv-hero__text {
		top: calc(40% + 8.4px);
		padding: 0 30px 48px 30px;
		text-align: center;
	}

	/* Live keeps the 10% side padding of its desktop headings here, which decides where the title breaks. */
	.hv-hero__text h2, .hv-hero__text h1 {
		max-width: none;
		padding-left: 10%;
		padding-right: 10%;
	}

	.hv-hero__text h2 {
		line-height: 64px;
		font-size: 64px;
	}

	.hv-hero__text h1 {
		line-height: 48px;
		font-size: 48px;
	}

	.hv-hero__box::before {
		background-position: bottom left;
		background-size: 100% auto;
		animation-name: hv-load-up-small;
	}

	.hv-breadcrumb ol.breadcrumb {
		padding: 0 30px;
	}

	/* As live: 14px above, and every column carries its own 48px below (also between stacked columns). */
	#main > .umb-block-grid > .lz-row {
		padding: 14px 0 0 0;
	}

	#main > .umb-block-grid > .lz-row > .umb-block-grid__layout-container {
		padding: 0 30px;
	}

	#main > .umb-block-grid > .lz-row > .umb-block-grid__layout-container > .umb-block-grid__layout-item > .umb-block-grid__area-container > .umb-block-grid__area,
	#main > .umb-block-grid > .lz-row > .umb-block-grid__layout-container > .umb-block-grid__layout-item > .umb-block-grid__area-container > .umb-block-grid__area[data-area-alias="left"],
	#main > .umb-block-grid > .lz-row > .umb-block-grid__layout-container > .umb-block-grid__layout-item > .umb-block-grid__area-container > .umb-block-grid__area[data-area-alias="right"] {
		padding: 0 0 48px 0;
	}

	#main > .umb-block-grid > #vrachtwagen-animatie > .umb-block-grid__layout-container > .umb-block-grid__layout-item > .umb-block-grid__area-container > .umb-block-grid__area {
		padding-bottom: 0;
	}

	/* Columns stack at 992px as on live (the core does that only from 900px, with its own gap). */
	#main [data-content-element-type-alias] > .umb-block-grid__area-container {
		row-gap: 0;
		column-gap: 0;
	}

	#main [data-content-element-type-alias] > .umb-block-grid__area-container > .umb-block-grid__area {
		grid-column: 1 / -1;
	}

	/* A half-section image sits on top of the section, full width and 4:3, without the diagonal edge; the text follows
	   14px under it (its column's 48px less 34px). */
	#main > .umb-block-grid > .lz-row .umb-block-grid__area.hv-media-area {
		order: -1;
	}

	#main > .umb-block-grid > .lz-row .umb-block-grid__area[data-area-alias="left"] > .image:only-child,
	#main > .umb-block-grid > .lz-row .umb-block-grid__area[data-area-alias="right"] > .image:only-child {
		width: auto;
		margin: -14px -30px -34px -30px;
		aspect-ratio: 4 / 3;
		position: relative;
	}

	#main > .umb-block-grid > .lz-row .umb-block-grid__area[data-area-alias="left"] > .image:only-child::after,
	#main > .umb-block-grid > .lz-row .umb-block-grid__area[data-area-alias="right"] > .image:only-child::after {
		display: none;
	}

	.rich-text.service {
		padding: 0 15px 15px 15px;
	}

	.rich-text.service h3 {
		margin-top: 15px;
		padding-left: 42px;
		background-size: auto 25px;
		font-size: 24px;
	}

	.truck-animation .placeholder {
		height: 66px;
	}

	.truck-animation .placeholder .truck {
		top: 34px;
		width: 100px;
		height: 32px;
	}

	.truck-animation .placeholder hr {
		margin: 49px 0 15px 0;
	}

	#facts_and_figures .umb-block-grid__area[data-area-alias="Column"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hv-footer__grid {
		padding-top: 14px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hv-footer__grid > div {
		padding: 0 30px 48px 30px;
	}

	.hv-footer__grid > .hv-footer__brand {
		grid-column: 1 / -1;
	}

	#disclaimer-navigation {
		margin: 0;
		text-align: center;
		float: none;
	}

	@keyframes hv-load-up-small {
		from { left: 100%; }
		to { top: 0; left: 5%; }
	}
}

@media (max-width: 767.98px) {
	#facts_and_figures .umb-block-grid__area[data-area-alias="Column"], .hv-footer__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Mobile: buttons stacked and left-aligned, also the second "Werken bij Hoevers" button (feedback testsessie 2026-10-28). */
	#main p.button, #main p.link, #werken_bij_hoevers p.button + p.button {
		margin-right: 0;
		float: none;
	}
}

@media (max-width: 576px) {
	.hv-hero__text {
		top: calc(50% + 7px);
	}

	.hv-hero__text h2 {
		line-height: 48px;
		font-size: 48px;
	}

	.hv-hero__text h1 {
		line-height: 32px;
		font-size: 32px;
	}

	.hv-hero__box::after {
		display: none;
	}

	.hv-breadcrumb__box {
		padding-top: 248px;
	}

	.rich-text.service h3 {
		padding-left: 52px;
		line-height: 24px;
		font-size: 20px;
	}

	#disclaimer-navigation {
		margin: 0 15px;
	}
}

@media (min-height: 319px) and (max-height: 576px) and (orientation: landscape) {
	.hv-hero__box {
		height: 992px;
	}

	.hv-breadcrumb__box {
		padding-top: 248px;
	}

	.hv-hero__box::after {
		display: none;
	}
}