/*
	LOGISZ Codebase - core styles
	-----------------------------------------------------------------
	This file is the source of core.css (compiled by compilerconfig.json, Web Compiler). Edit this file, not core.css.
	It has two parts:

	1. The base of the codebase: the page transition, the spacing classes of block grid rows (.wrapper.padding-top-enkel ...),
	   the skeleton of an Umbraco Forms form, the base of the mobile menu (slide-menu.js), the scroll-to-top button, the
	   sitemap and the base of buttons. Only what is needed to work; nothing of how it looks.
	2. The functional CSS of the site: everything the theme's markup needs to work and to lay out: wrappers and widths, the row
	   spacing (padding top/bottom, margin top), columns and grids, the header mechanics and the mobile menu, form layout,
	   the footer columns and the responsive behaviour. No colours, fonts, borders, rounded corners, shadows or decorative
	   artwork: that is the theme (_Themes/<theme>/default.scss).

	The theme defines one value that this file uses: --lz-header, the height of the header bar (with a fallback here).
	Sizes are in pixels; fluid values are avoided. Smaller screens get their own pixel values in media queries.
	Removed as unused: the chat window, the old timeline, the button variants of the chat, the field styling of the default
	Forms theme (the vacancy form; Umbraco loads its own stylesheet for it).
*/
/* ===============================================================================================================
	PART 1 - BASE OF THE CODEBASE
=============================================================================================================== */
:root {
  --pageTransitionColor: #fff;
}

.page-transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--pageTransitionColor);
  z-index: 2147483647 !important; /* Maximum possible z-index */
  /* Starts visible */
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transition: opacity 0.25s ease-in-out, visibility 0.25s;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.page-transition-overlay > img {
  max-width: 320px;
  margin-top: 160px;
}

/* This class handles the fade-out */
.page-transition-overlay.overlay-hidden {
  opacity: 0;
  visibility: hidden;
}

.page-transition-overlay.instant {
  transition: unset !important;
}

.wrapper {
  /* The old fixed row paddings (.wrapper.padding-top-enkel: 14/94/120px ...) are gone: every row with those classes is a
     .lz-row, spaced by --lz-padding-step in part 2. They only still reached nested rows, where they beat the
     step-based padding and gave the same choice a different size than on a top-level row. */
}
.wrapper.full-width .inner-wrapper .glide .glide__track {
  overflow: visible;
}
.wrapper .glide .glide__track > div {
  margin-top: 0;
}
.wrapper .glide .glide__track .grid {
  grid-template-columns: 100%;
}
.wrapper .glide .glide__track .glide__slides {
  white-space: wrap !important;
}
.wrapper .glide .glide__arrows {
  top: 0;
  right: 0;
  position: absolute;
  transform: none;
  display: flex;
}
.wrapper .glide .glide__arrows .glide__arrow {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  position: relative;
}
.wrapper .glide .glide__arrows .glide__arrow.glide__arrow--left {
  left: unset;
}
.wrapper .glide .glide__arrows .glide__arrow.glide__arrow--right {
  right: unset;
}

.form {
  margin: 32px 0 0 0;
}
.form .umbraco-forms-form form .umbraco-forms-page fieldset,
.form .umbraco-forms-form form .umbraco-forms-page .umbraco-forms-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}
.form .umbraco-forms-form form .umbraco-forms-page .umbraco-forms-hidden {
  display: none;
  visibility: hidden;
}
.form .umbraco-forms-form form .umbraco-forms-page .umbraco-forms-hidden + .umbraco-forms-tooltip {
  display: none;
  visibility: hidden;
}
.form .umbraco-forms-form form .umbraco-forms-page .umbraco-forms-navigation {
  margin: 32px 0 0 0;
}
.form .umbraco-forms-form form .umbraco-forms-page .umbraco-forms-navigation button,
.form .umbraco-forms-form form .umbraco-forms-page .umbraco-forms-navigation input {
  display: inline-block;
  cursor: pointer;
}

/* Mobile menu: the dark layer behind the panel, and the panel with its sliding levels (slide-menu.js). The hamburger button
   that opens it is in part 2. */
.overlay {
  position: fixed;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  z-index: 89;
}
.overlay.active {
  opacity: 1;
  visibility: visible;
}

.nav-menu {
  position: fixed;
  top: 0;
  left: -100%;
  width: 320px;
  max-width: 85vw;
  height: 100%;
  z-index: 1000;
  overflow: hidden;
}
.nav-menu.open {
  left: 0;
}
.nav-menu .menu-panel {
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.nav-menu .menu-panel .panel-header {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.nav-menu .menu-panel .panel-header .back-btn {
  width: 48px;
  height: 48px;
  background-color: transparent;
  border: 0;
  font-size: 0;
  position: relative;
  content: "";
  display: block;
  cursor: pointer;
}
.nav-menu .menu-panel .panel-header .back-btn::after {
  top: 50%;
  left: 50%;
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  font-size: 16px;
  content: "\f053";
  position: absolute;
  transform: translate(-50%, -50%);
}
.nav-menu .menu-panel .panel-header .panel-title {
  padding: 8px 32px;
}
.nav-menu .menu-panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.nav-menu .menu-panel ul li.menu-item {
  box-sizing: border-box;
}
.nav-menu .menu-panel ul li.menu-item.has-children {
  display: grid;
  grid-template-columns: auto minmax(auto, 48px);
}
.nav-menu .menu-panel ul li.menu-item a.menu-link {
  width: 100%;
  padding: 8px 32px;
  cursor: pointer;
  box-sizing: border-box;
  display: block;
}
.nav-menu .menu-panel ul li.menu-item .submenu-arrow {
  width: 48px;
  height: 48px;
  position: relative;
  content: "";
  display: block;
  cursor: pointer;
  box-sizing: border-box;
}
.nav-menu .menu-panel ul li.menu-item .submenu-arrow::after {
  top: 50%;
  left: 50%;
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  font-size: 16px;
  content: "\f054";
  position: absolute;
  transform: translate(-50%, -50%);
}
.nav-menu .menu-panel.active {
  left: 0;
}

iframe {
  width: 100%;
  margin: 16px 0 0 0;
}

/* The scroll-to-top button: fixed in the corner, shown by scroll-top.js (.show). The theme styles how it looks. */
#scrollTopBtn {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
}
#scrollTopBtn.show {
  opacity: 1;
  visibility: visible;
}

.sitemap ul {
  margin: 16px 0 0 0;
  padding: 0;
}
.sitemap ul li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sitemap ul li.level-3 {
  margin: 16px 0 0 0;
}
.sitemap ul li ul {
  margin-top: 0;
}

.buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 8px;
  /* Each button is a <p>; as a paragraph it would get the flow margin on top of the group's own. */
}
.buttons > p {
  margin: 0;
}

/* Buttons: a plain outlined button, black on hover; the theme restyles the ones it uses (form, hamburger, scroll-to-top). */
/* Buttons: only what every button needs; how they look is the theme's. */
button {
  font: inherit;
  cursor: pointer;
}

/* ===============================================================================================================
	PART 2 - FUNCTIONAL CSS OF THE SITE
=============================================================================================================== */
:root {
  --lz-wrapper: 1320px;
  --lz-gutter: 56px;
  --lz-section: 120px;
  /* Row rhythm: text starts with this top margin (h1-h6, p: 16px 0 0); the top padding of a row subtracts it. */
  --lz-space: calc(var(--lz-section) / 2);
  --lz-flow: 16px;
  /* The automatic gap between two top-level rows (on top of their own padding), and the step of a row's "Marge boven"
     setting (margin-top-enkel|dubbel|drievoudig: 1, 2 or 3 steps up over what sits above it). A theme that wants rows
     spaced only by their own padding sets --lz-row-gap to 0; everything that corrects for the gap follows it. */
  --lz-row-gap: var(--lz-section);
  --lz-overlap-step: var(--lz-space);
  /* The step of a row's padding settings (padding-top/bottom-enkel|dubbel|drievoudig: 1, 2 or 3 steps) and of its
     "Column gap" setting (column-gap-enkel|dubbel|drievoudig), and the gap between columns once they stack. */
  --lz-padding-step: var(--lz-space);
  --lz-column-gap-step: var(--lz-space);
  --lz-stack-gap: 32px;
}

/* Smaller screens: a tighter gutter and less section space. */
@media (max-width: 1024px) {
  :root {
    --lz-gutter: 40px;
    --lz-section: 96px;
  }
}
@media (max-width: 768px) {
  :root {
    --lz-gutter: 20px;
    --lz-section: 64px;
  }
}
/* ---------------------------------------------------------------
	Base
--------------------------------------------------------------- */
/* Nothing may make the page wider than the screen (a carousel that peeks past the edge, a full-width band, a decorative
   shape). html alone is not enough: Safari on iPhone/iPad ignores it for touch and still lets the page be swiped
   sideways, so the three top-level parts of the page clip as well. clip, not hidden: only sideways -- anything that
   deliberately sticks out up or down (a photo over a band's edge, a card over the row above) stays visible, and none of
   them becomes a scroll container. */
html, #header, #main, #footer {
  overflow-x: clip;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img, video {
  max-width: 100%;
}

/* Text starts with the flow margin (--lz-flow), the one vertical rhythm of a column. A long word in a big heading is wider
   than a phone column: it may break, with a hyphen where the browser knows the language (html lang). */
h1, h2, h3, h4, h5, h6 {
  margin: var(--lz-flow) 0 0 0;
  padding: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}

p {
  margin: var(--lz-flow) 0 0 0;
}

.wrapper {
  width: 100%;
  max-width: var(--lz-wrapper);
  margin: 0 auto;
  padding-inline: var(--lz-gutter);
  box-sizing: border-box;
}

/* Skip link: off screen until it has focus */
.lz-skip {
  top: -80px;
  left: 16px;
  padding: 12px 20px;
  position: fixed;
  z-index: 2000;
}
.lz-skip:focus {
  top: 16px;
}

/* Label above a title (branch or section label), Screamer & Beamer: only their spacing. */
.lz-label, p.subtitle {
  margin: 0;
}

.lz-screamer {
  margin: 0;
}

.lz-beamer {
  margin: 0;
  padding-top: 16px;
}

.lz-label + .lz-screamer, .lz-label + h2 {
  margin-top: 20px;
}

/* ---------------------------------------------------------------
	Header mechanics (markup: Views/master.cshtml)
	The bar with logo, navigation and hamburger; the dropdown under a navigation item opens on hover and on keyboard focus.
	How the header looks and where it sits is in default.scss.
--------------------------------------------------------------- */
#header {
  position: relative;
  /* A header video chosen by the editor covers the hero. */
}
#header > .placeholder > .top {
  height: var(--lz-header, 96px);
  display: flex;
  align-items: center;
  z-index: 100;
}
#header > .placeholder > .top .wrapper {
  display: flex;
  align-items: center;
  gap: 32px;
}
#header .logo {
  flex-shrink: 0;
}
#header .logo a {
  display: inline-flex;
  align-items: center;
}
#header .navigation {
  display: flex;
  align-items: center;
  gap: 8px;
}
#header .navigation nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4px;
}
#header .navigation nav ul li {
  margin: 0;
  padding: 0;
  position: relative;
  /* Dropdown under the item */
}
#header .navigation nav ul li a {
  display: block;
}
#header .navigation nav ul li ul {
  top: 100%;
  left: 0;
  min-width: 240px;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  position: absolute;
  visibility: hidden;
}
#header .navigation nav ul li ul li {
  position: static;
}
#header .navigation nav ul li:hover > ul, #header .navigation nav ul li:focus-within > ul {
  visibility: visible;
}
#header .navigation li.search input {
  width: 150px;
  height: 40px;
  box-sizing: border-box;
}
#header .lz-hero-media {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  z-index: -2;
}

/* A small logo picked in the backoffice is for a compact header; hidden until you use it. */
.logo .lz-lockup--small {
  display: none;
}

/* ---------------------------------------------------------------
	Mobile navigation (markup from the core: .hamburger, .overlay, .nav-menu)
--------------------------------------------------------------- */
.hamburger {
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  /* The core positions the hamburger 15px off; it sits in the header bar here. */
  top: 0;
  left: 0;
  right: auto;
  border-radius: 0;
  margin: 0;
  color: inherit;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  position: relative;
  z-index: 1000;
  /* The three bars; they take the text colour of the header. */
}
.hamburger span {
  width: 26px;
  height: 2px;
  background-color: currentColor;
  border-radius: 0;
  display: block;
}
.hamburger.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}
.hamburger:hover, .hamburger:focus-visible, .hamburger.active {
  background: transparent;
  color: inherit;
}

@media (max-width: 1024px) {
  #header .navigation {
    display: none;
  }
  .hamburger {
    display: flex;
    visibility: visible;
  }
}
/*
	The menu is a panel under the header bar. Inside it the core's sliding panels (slide-menu.js): the arrow opens a submenu
	panel, the back button returns to the level above. Selectors mirror the core (core.css .nav-menu) for specificity.
*/
.nav-menu {
  top: var(--lz-header, 96px);
  left: var(--lz-gutter);
  right: var(--lz-gutter);
  width: auto;
  max-width: none;
  /* The height follows the visible panel (initMobileMenu in default.js); this is the fallback and the cap. */
  height: min(640px, 100dvh - var(--lz-header, 96px) - var(--lz-gutter));
  max-height: calc(100dvh - var(--lz-header, 96px) - var(--lz-gutter));
  visibility: hidden;
  z-index: 90;
  overscroll-behavior: contain;
}
.nav-menu.open {
  left: var(--lz-gutter);
  visibility: visible;
}

/* Wider than the hamburger breakpoint the menu is never shown, also when it was open while the window grew. */
@media (min-width: 1025px) {
  .nav-menu, .overlay {
    display: none;
  }
}
.nav-menu .menu-panel {
  padding: 8px;
  box-sizing: border-box;
  /* The level you leave is parked to the left, the new one comes in from the right (and the other way round). */
  /* The root has no back button: the label sits on the line of the items. */
}
.nav-menu .menu-panel[data-depth="0"]:not(.active) {
  left: -100%;
}
.nav-menu .menu-panel .panel-header {
  min-height: 44px;
  padding: 0 8px 0 0;
  margin-bottom: 6px;
}
.nav-menu .menu-panel .panel-header .back-btn {
  width: 44px;
  height: 44px;
}
.nav-menu .menu-panel .panel-header .panel-title {
  padding: 0 8px;
}
.nav-menu .menu-panel[data-depth="0"] .panel-header .panel-title {
  padding-left: 16px;
}
.nav-menu .menu-panel ul {
  flex: 0 1 auto;
  min-height: 0;
  gap: 2px;
}
.nav-menu .menu-panel ul li.menu-item a.menu-link {
  padding: 12px 16px;
}
.nav-menu .menu-panel ul li.menu-item.has-children {
  grid-template-columns: minmax(0, 1fr) 48px;
  align-items: center;
}
.nav-menu .menu-panel ul li.menu-item .submenu-arrow {
  width: 44px;
  height: 44px;
  padding: 0;
}

/* The call to action (the last primary item, as on desktop) under the items; the contact details close the panel. */
.lz-menu__cta {
  margin: 16px 16px 0;
}

.nav-menu .lz-menu__footer {
  margin: 20px 8px 0;
  padding: 20px 8px 12px;
}
.nav-menu .lz-menu__footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
  overflow: visible;
}
.nav-menu .lz-menu__footer li {
  display: flex;
  align-items: center;
  gap: 14px;
}
.nav-menu .lz-menu__footer li i {
  width: 22px;
  text-align: center;
}

/* ---------------------------------------------------------------
	Main content & block grid
	Top-level blocks render flat inside the grid container (see
	Views/Partials/blockgrid/items.cshtml), so the container stacks them.
--------------------------------------------------------------- */
#main {
  flex: 1;
  padding-block: var(--lz-section);
  position: relative;
}
#main > .umb-block-grid, #main > .wrapper {
  width: 100%;
  max-width: var(--lz-wrapper);
  margin: 0 auto;
  padding-inline: var(--lz-gutter);
  box-sizing: border-box;
}

.umb-block-grid {
  display: flex;
  flex-direction: column;
  row-gap: var(--lz-row-gap);
  column-gap: 32px;
}

/* Grid items don't shrink below their content's own minimum width by default (min-width: auto); a column holding a
   form or a long word would then push out past its row instead of wrapping inside it. */
.umb-block-grid__layout-item, .umb-block-grid__area {
  min-width: 0;
}

/* Full-bleed sections inside the grid (Statement, Modules on a band) with their own wrapper. */
.lz-bleed {
  margin-inline: calc(50% - 50vw);
  padding-block: var(--lz-section);
  position: relative;
  isolation: isolate;
}
.lz-bleed > .wrapper {
  position: relative;
  z-index: 1;
}

/* Two bands of the same kind touch each other without a gap. */
.lz-bleed.lz-dark + .lz-bleed.lz-dark, .lz-bleed.lz-grey + .lz-bleed.lz-grey {
  margin-top: calc(var(--lz-row-gap) * -1);
  padding-top: 0;
}

/* A band as the last block runs straight into the footer. */
#main:has(> .umb-block-grid > .lz-bleed.lz-dark:last-child) {
  padding-bottom: 0;
}

/*
	Block grid rows: the layout elements (1 column, 50/50, 67/33 ...)
	Their settings (Views/Partials/blockgrid/items.cshtml) become classes:
	- lz-row on every row; rows sit on the same lines as the blocks.
	- lz-bg--{colour}: a theme colour (theme node, tab Branding). It only sets --lz-row-bg; the row itself is not painted.
	- lz-full: the row runs edge to edge, its content stays on the lines.
	- padding-top/bottom-enkel|dubbel|drievoudig: 1/2, 1 or 1 1/2 times
	  the section space; nothing is picked = zero, on purpose (so an editor always decides).
	- margin-top-enkel|dubbel|drievoudig: the row slides that far over
	  the row above it (on top of the normal gap).
	Elements keep their own margins; the top padding subtracts the 16px
	that text starts with (--lz-flow), so the white space is exact.
*/
/*
	Blocks that start with a card, tile or grid (Entries, Features, news, counters, the timeline ...), and a nested row
	(a row inside a column, class "nested"), keep the 16px top margin of text as well: everything in a column then follows
	whatever came before it with the same rhythm, headings, paragraphs and nested rows alike. Zero specificity, so a block
	that sets its own margin wins; blocks that start with text are left out (a nested row is not: its own top padding, if
	any, already subtracts this same margin, see .lz-row below, so the two do not add up).
*/
:where(.umb-block-grid__area > :not(.rich-text, .headlines, .lz-banner, p, h1, h2, h3, h4, h5, h6, ul, ol)) {
  margin-top: var(--lz-flow);
}

/* A nested row also carries the plain ".wrapper" class (every row does, items.cshtml), and .wrapper's own reset sets
   margin-top: 0 -- an ordinary, non-zero specificity, so it always won over the zero-specificity :where() rule above,
   silently. This is exactly the "nested row" case that rule already means to cover, just with just enough specificity
   to actually reach it; a block's own explicit margin-top still wins over this the same way it would over the rule
   above (0,2,0 here, same low tier). */
.umb-block-grid__area > .lz-row {
  margin-top: var(--lz-flow);
}

/* ...unless the nested row has its own "Marge boven": then it slides 1, 2 or 3 steps (--lz-overlap-step) up over what
   sits above it in the column -- out of its parent row's colour band, if it is the first thing in it. No row gap to
   make up for inside a column (the top-level version of this is further down). One class more than the flow rule just
   above, so the editor's setting wins over it. */
.umb-block-grid__area > .lz-row.margin-top-enkel {
  margin-top: calc(var(--lz-overlap-step) * -1);
}

.umb-block-grid__area > .lz-row.margin-top-dubbel {
  margin-top: calc(var(--lz-overlap-step) * -2);
}

.umb-block-grid__area > .lz-row.margin-top-drievoudig {
  margin-top: calc(var(--lz-overlap-step) * -3);
}

.umb-block-grid > .lz-row, .lz-row {
  --lz-pt: 0px;
  --lz-pb: 0px;
  width: auto;
  max-width: none;
  margin-inline: 0;
  padding: max(0px, var(--lz-pt) - var(--lz-flow)) 0 var(--lz-pb);
  position: relative;
}

/* The row's own "Vertical align" setting (items.cshtml -> class vertical-align-boven/midden/onder): the columns of a
   2+ column row (twoColumns_*, threeColumns_*, fourColumns_*) align to the top, middle or bottom of the row instead
   of the block grid's own default (stretch -- every column full row height regardless of its own content). A
   1-column row has nothing else to align against, so this is a no-op there. The exact child chain down to the row's
   own area-container, including the extra .inner-wrapper a full-width row has, is the same one the column gap below
   needs, for the same reason: a plain descendant selector also reaches a nested row's own, unrelated area-container
   further down a column. */
.lz-row.vertical-align-boven > .umb-block-grid__layout-container > .umb-block-grid__layout-item > .umb-block-grid__area-container,
.lz-row.vertical-align-boven > .inner-wrapper > .umb-block-grid__layout-container > .umb-block-grid__layout-item > .umb-block-grid__area-container {
  align-items: start;
}

.lz-row.vertical-align-midden > .umb-block-grid__layout-container > .umb-block-grid__layout-item > .umb-block-grid__area-container,
.lz-row.vertical-align-midden > .inner-wrapper > .umb-block-grid__layout-container > .umb-block-grid__layout-item > .umb-block-grid__area-container {
  align-items: center;
}

.lz-row.vertical-align-onder > .umb-block-grid__layout-container > .umb-block-grid__layout-item > .umb-block-grid__area-container,
.lz-row.vertical-align-onder > .inner-wrapper > .umb-block-grid__layout-container > .umb-block-grid__layout-item > .umb-block-grid__area-container {
  align-items: end;
}

/*
	The row's own "Column gap" setting (items.cshtml -> class column-gap-enkel/dubbel/drievoudig): the space between the
	columns of a 2/3/4-column row, 1, 2 or 3 steps of --lz-column-gap-step. Nothing chosen = Umbraco's own default.
	- Umbraco's grid is always 12 tracks wide and column-gap applies at all 11 track boundaries, not only the one you see
	  between two columns: 11 x a large gap is wider than most rows. min() caps it at what the row can hold, so in a narrow
	  row the gap shrinks instead of every track collapsing to 0 and the columns overflowing.
	- A full-width row has one more .inner-wrapper between the row and its layout-container, hence two selectors per
	  step. :is() can't cover both depths in one chain: its own combinators are relative to the element it matches.
*/
.lz-row.column-gap-enkel > .umb-block-grid__layout-container > .umb-block-grid__layout-item > .umb-block-grid__area-container,
.lz-row.column-gap-enkel > .inner-wrapper > .umb-block-grid__layout-container > .umb-block-grid__layout-item > .umb-block-grid__area-container {
  column-gap: min(var(--lz-column-gap-step), 9%);
}

.lz-row.column-gap-dubbel > .umb-block-grid__layout-container > .umb-block-grid__layout-item > .umb-block-grid__area-container,
.lz-row.column-gap-dubbel > .inner-wrapper > .umb-block-grid__layout-container > .umb-block-grid__layout-item > .umb-block-grid__area-container {
  column-gap: min(var(--lz-column-gap-step) * 2, 9%);
}

.lz-row.column-gap-drievoudig > .umb-block-grid__layout-container > .umb-block-grid__layout-item > .umb-block-grid__area-container,
.lz-row.column-gap-drievoudig > .inner-wrapper > .umb-block-grid__layout-container > .umb-block-grid__layout-item > .umb-block-grid__area-container {
  column-gap: min(var(--lz-column-gap-step) * 3, 9%);
}

/* The core view's old divider SVG. */
.lz-row > .divider {
  display: none;
}

/* Spacing: 1, 2 or 3 steps (--lz-padding-step), the same for a top-level and a nested row. The top padding subtracts the
   flow margin of the first element (the padding rule above), so exactly n steps show above the first heading or paragraph. */
.lz-row.padding-top-enkel {
  --lz-pt: var(--lz-padding-step);
}

.lz-row.padding-top-dubbel {
  --lz-pt: calc(var(--lz-padding-step) * 2);
}

.lz-row.padding-top-drievoudig {
  --lz-pt: calc(var(--lz-padding-step) * 3);
}

.lz-row.padding-bottom-enkel {
  --lz-pb: var(--lz-padding-step);
}

.lz-row.padding-bottom-dubbel {
  --lz-pb: calc(var(--lz-padding-step) * 2);
}

.lz-row.padding-bottom-drievoudig {
  --lz-pb: calc(var(--lz-padding-step) * 3);
}

.lz-row:is(.margin-top-enkel, .margin-top-dubbel, .margin-top-drievoudig) {
  z-index: 2;
}

/* A top-level row's "Marge boven": first the automatic row gap is taken back, then 1, 2 or 3 steps over the row above. */
.umb-block-grid > .lz-row.margin-top-enkel {
  margin-top: calc(var(--lz-row-gap) * -1 - var(--lz-overlap-step));
}

.umb-block-grid > .lz-row.margin-top-dubbel {
  margin-top: calc(var(--lz-row-gap) * -1 - var(--lz-overlap-step) * 2);
}

.umb-block-grid > .lz-row.margin-top-drievoudig {
  margin-top: calc(var(--lz-row-gap) * -1 - var(--lz-overlap-step) * 3);
}

/* Full width: the row runs edge to edge, the content stays on the page lines. */
.lz-row.lz-full {
  margin-inline: calc(50% - 50vw);
  padding-inline: 0;
}
.lz-row.lz-full > .inner-wrapper {
  width: 100%;
  max-width: var(--lz-wrapper);
  margin: 0 auto;
  padding-inline: var(--lz-gutter);
  box-sizing: border-box;
}

/* Full-width rows with a colour, and bands, touch each other without a gap. */
.umb-block-grid > .lz-row.lz-full[class*=lz-bg--] + .lz-row.lz-full[class*=lz-bg--],
.umb-block-grid > .lz-row.lz-full[class*=lz-bg--] + .lz-bleed:is(.lz-dark, .lz-grey),
.umb-block-grid > .lz-bleed:is(.lz-dark, .lz-grey) + .lz-row.lz-full[class*=lz-bg--] {
  margin-top: calc(var(--lz-row-gap) * -1);
}

/* A full-width row with a colour as the last row runs into the footer: no gap. */
#main:has(> .umb-block-grid > .lz-row.lz-full[class*=lz-bg--]:last-child) {
  padding-bottom: 0;
}

/*
	Column layouts on smaller screens (1 column, 50/50, 33/67, 67/33, three and four columns). The core's fallback reads the
	wrong variable (every area redefines --umb-block-grid--grid-columns), so its columns never stack.
	- Tablet on its side (901-1024px): 50/50 and 33/67 stay side by side; three and four columns become two per row, an
	  odd last one takes the full width.
	- Tablet upright (every iPad held upright: 744-834px) and phone, up to $bp-stack (900px): every column full width,
	  stacked with the normal gap -- the same breakpoint the banner and other two-column layouts stack at.
*/
@media (max-width: 1024px) {
  [data-content-element-type-alias] > .umb-block-grid__area-container {
    row-gap: var(--lz-stack-gap);
  }
  [data-content-element-type-alias] > .umb-block-grid__area-container > .umb-block-grid__area {
    grid-column-end: span var(--umb-block-grid--area-column-span, 12);
  }
  :is([data-content-element-type-alias^=threeColumns], [data-content-element-type-alias^=fourColumns]) > .umb-block-grid__area-container > .umb-block-grid__area {
    grid-column-end: span 6;
  }
  :is([data-content-element-type-alias^=threeColumns], [data-content-element-type-alias^=fourColumns]) > .umb-block-grid__area-container > .umb-block-grid__area:last-child:nth-child(odd) {
    grid-column-end: span 12;
  }
}
@media (max-width: 900px) {
  [data-content-element-type-alias] > .umb-block-grid__area-container {
    column-gap: 0;
  }
  [data-content-element-type-alias] > .umb-block-grid__area-container > .umb-block-grid__area {
    grid-column: 1/-1;
  }
}
/* Umbraco's own column gap (32px) counts 11 times in its 12-track grid, whether the columns are side by side or not; in a
   row narrower than that (a nested card on a tablet, say) the tracks collapse and a full-width column is pushed out past
   the row. Capped the same way as the row's own "Column gap" setting (theme): never more than the row can hold. */
.umb-block-grid__area-container {
  column-gap: min(var(--umb-block-grid--areas-column-gap, 32px), 9%);
}

/* ---------------------------------------------------------------
	Rich text
--------------------------------------------------------------- */
.rich-text {
  max-width: 640px;
}
.rich-text table {
  width: 100%;
}
.rich-text table th, .rich-text table td {
  padding: 14px 16px 14px 0;
  text-align: left;
}
.rich-text ul, .rich-text ol {
  margin: 16px 0 0;
  padding-left: 24px;
}

/* The rich text editor wraps list items in a paragraph; its top margin would push the text below the bullet. */
:is(.rich-text, .text, .answer) li > p {
  margin: 0;
}
:is(.rich-text, .text, .answer) li > p + p {
  margin-top: 8px;
}

/* Core counter block */
.counter {
  /* Side by side in a Columns layout: same height. */
  height: 100%;
  box-sizing: border-box;
}
.counter p {
  margin: 0;
}
.counter .counter__value {
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.counter .title {
  margin-top: 16px;
  display: block;
}
.counter .sub_title {
  margin-top: 4px;
  display: block;
}

/* Core quick links (masonry): the whole item is one link */
.masonry .item {
  position: relative;
}
.masonry .item a {
  inset: 0;
  position: absolute;
  z-index: 1;
}
.masonry .item h2 {
  margin: 0;
}
.masonry .item p.link {
  margin-top: 16px;
}

/* ---------------------------------------------------------------
	Statement (screamerBlock)
--------------------------------------------------------------- */
.lz-statement .lz-statement__copy {
  max-width: 900px;
}
.lz-statement .lz-statement__buttons {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.lz-statement .lz-statement__buttons p {
  margin: 0;
}
.lz-statement.lz-dark {
  padding-block: 180px;
}
@media (max-width: 768px) {
  .lz-statement.lz-dark {
    padding-block: 96px;
  }
}

/* ---------------------------------------------------------------
	Modules (featuresBlock) and Entries (entriesBlock): up to six items with an icon.
	- default: a grid of items
	- .lz-services--list: a two-column list (icon left, text right)
	- .lz-services--steps: three numbered steps on one line
--------------------------------------------------------------- */
.lz-services .lz-services__head {
  max-width: 720px;
  margin-bottom: 48px;
}
.lz-services .lz-services__head h2 {
  margin-top: 20px;
}
.lz-services ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 24px;
}
.lz-services .lz-service {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.lz-services .lz-service__icon {
  display: inline-flex;
  align-items: center;
}
.lz-services h3 {
  margin: 0;
}
.lz-services p {
  margin: 0;
}
.lz-services.lz-services--list ul {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 20px;
}
.lz-services.lz-services--list .lz-service {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 18px;
  row-gap: 6px;
}
.lz-services.lz-services--list .lz-service .lz-service__icon {
  grid-row: 1/span 2;
}
.lz-services.lz-services--steps ul {
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 48px;
}
.lz-services.lz-services--steps .lz-service {
  gap: 10px;
}

.lz-entries {
  /* An SVG icon is drawn as a mask in the text colour. */
}
.lz-entries .lz-service {
  cursor: pointer;
}
.lz-entries .lz-service__svg {
  width: 26px;
  height: 26px;
  background: currentColor;
  mask: var(--lz-icon) center/contain no-repeat;
  -webkit-mask: var(--lz-icon) center/contain no-repeat;
  display: block;
}
.lz-entries .lz-service__image {
  aspect-ratio: 3/2;
  overflow: hidden;
}
.lz-entries .lz-service__image img, .lz-entries .lz-service__image picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lz-entries .lz-service__link {
  margin-top: auto;
  padding-top: 4px;
}

/* ---------------------------------------------------------------
	Block (blockBlock): banner (logo, label, title, text, button, image) or card.
--------------------------------------------------------------- */
.lz-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 80px;
}
@media (max-width: 900px) {
  .lz-banner {
    gap: 32px;
  }
}
.lz-banner.lz-banner--image {
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
}
.lz-banner.lz-banner--heading {
  margin-bottom: calc(48px - var(--lz-flow));
}
@media (max-width: 768px) {
  .lz-banner.lz-banner--heading {
    margin-bottom: calc(32px - var(--lz-flow));
  }
}
@media (max-width: 900px) {
  .lz-banner.lz-banner--image {
    grid-template-columns: minmax(0, 1fr);
  }
}

.lz-banner__copy {
  max-width: 760px;
  /* The first element keeps the 16px text margin that the row padding counts on, whatever it is (logo, label, title). */
}
.lz-banner__copy > :first-child {
  margin-top: var(--lz-flow);
}

.lz-banner__logo {
  margin-bottom: 28px;
}
.lz-banner__logo img {
  max-width: 220px;
  max-height: 56px;
  width: auto;
  height: auto;
  display: block;
}

.lz-label + .lz-banner__title {
  margin-top: 20px;
}

.lz-banner__text {
  margin-top: 4px;
  max-width: 540px;
}

.lz-banner p.button {
  margin-top: 36px;
}

.lz-banner__image {
  aspect-ratio: 4/3;
  overflow: hidden;
}
.lz-banner__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lz-card-block {
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.lz-card-block__image {
  aspect-ratio: 3/2;
  overflow: hidden;
}
.lz-card-block__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lz-card-block__content {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.lz-card-block__content > .lz-label {
  align-self: flex-start;
}
.lz-card-block__content .lz-label + h3 {
  margin-top: 16px;
}

/* A phone number or e-mail address never breaks in the middle; other links wrap as usual. */
.lz-card-block__text a:is([href^="tel:"], [href^="mailto:"]) {
  white-space: nowrap;
}

.lz-card-block__link {
  margin-top: auto;
  padding-top: 20px;
}

/* Headlines block (headlinesBlock): the heading of a section, a subtitle above a title, with the space below that leads into
   the content that follows. */
.headlines {
  max-width: 760px;
  margin-bottom: calc(48px - var(--lz-flow));
  /* The first element keeps the 16px text margin that the row padding counts on. */
  /* Last in its column (nothing follows): no space below. */
}
@media (max-width: 768px) {
  .headlines {
    margin-bottom: calc(32px - var(--lz-flow));
  }
}
.headlines > :first-child {
  margin-top: var(--lz-flow);
}
.headlines .subtitle + h2 {
  margin-top: 20px;
}
.headlines.centered {
  margin-inline: auto;
  text-align: center;
}
.headlines:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------
	Modules (Nieuws, Evenementen, Vacatures, Team, Referenties, FAQ,
	Downloads, Kalender). Markup: Views/Partials/Modules/card.cshtml,
	Views/Partials/blockgrid/Components/*Block.cshtml and the detail
	templates in Views.
--------------------------------------------------------------- */
/* Overview grids: an image on top, a meta line, the title, a short text and one link */
.grid.news, .grid.events, .grid.vacancies, .grid.references, .grid.team {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 28px;
}
.grid.news > .item, .grid.news > .card, .grid.events > .item, .grid.events > .card, .grid.vacancies > .item, .grid.vacancies > .card, .grid.references > .item, .grid.references > .card, .grid.team > .item, .grid.team > .card {
  display: flex;
  flex-direction: column;
  position: relative;
}
.grid.news > .item > .image, .grid.news > .card > .image, .grid.events > .item > .image, .grid.events > .card > .image, .grid.vacancies > .item > .image, .grid.vacancies > .card > .image, .grid.references > .item > .image, .grid.references > .card > .image, .grid.team > .item > .image, .grid.team > .card > .image {
  aspect-ratio: 3/2;
  overflow: hidden;
}
.grid.news > .item > .image img, .grid.news > .item > .image picture, .grid.news > .card > .image img, .grid.news > .card > .image picture, .grid.events > .item > .image img, .grid.events > .item > .image picture, .grid.events > .card > .image img, .grid.events > .card > .image picture, .grid.vacancies > .item > .image img, .grid.vacancies > .item > .image picture, .grid.vacancies > .card > .image img, .grid.vacancies > .card > .image picture, .grid.references > .item > .image img, .grid.references > .item > .image picture, .grid.references > .card > .image img, .grid.references > .card > .image picture, .grid.team > .item > .image img, .grid.team > .item > .image picture, .grid.team > .card > .image img, .grid.team > .card > .image picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.grid.news > .item > .content, .grid.news > .card > .content, .grid.events > .item > .content, .grid.events > .card > .content, .grid.vacancies > .item > .content, .grid.vacancies > .card > .content, .grid.references > .item > .content, .grid.references > .card > .content, .grid.team > .item > .content, .grid.team > .card > .content {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  /* Three lines of summary, then an ellipsis: cards stay the same height. */
}
.grid.news > .item > .content h2, .grid.news > .item > .content h3, .grid.news > .card > .content h2, .grid.news > .card > .content h3, .grid.events > .item > .content h2, .grid.events > .item > .content h3, .grid.events > .card > .content h2, .grid.events > .card > .content h3, .grid.vacancies > .item > .content h2, .grid.vacancies > .item > .content h3, .grid.vacancies > .card > .content h2, .grid.vacancies > .card > .content h3, .grid.references > .item > .content h2, .grid.references > .item > .content h3, .grid.references > .card > .content h2, .grid.references > .card > .content h3, .grid.team > .item > .content h2, .grid.team > .item > .content h3, .grid.team > .card > .content h2, .grid.team > .card > .content h3 {
  margin: 0;
}
.grid.news > .item > .content p, .grid.news > .card > .content p, .grid.events > .item > .content p, .grid.events > .card > .content p, .grid.vacancies > .item > .content p, .grid.vacancies > .card > .content p, .grid.references > .item > .content p, .grid.references > .card > .content p, .grid.team > .item > .content p, .grid.team > .card > .content p {
  margin: 0;
}
.grid.news > .item > .content p.role, .grid.news > .card > .content p.role, .grid.events > .item > .content p.role, .grid.events > .card > .content p.role, .grid.vacancies > .item > .content p.role, .grid.vacancies > .card > .content p.role, .grid.references > .item > .content p.role, .grid.references > .card > .content p.role, .grid.team > .item > .content p.role, .grid.team > .card > .content p.role {
  margin-top: -4px;
}
.grid.news > .item > .content p.summary, .grid.news > .card > .content p.summary, .grid.events > .item > .content p.summary, .grid.events > .card > .content p.summary, .grid.vacancies > .item > .content p.summary, .grid.vacancies > .card > .content p.summary, .grid.references > .item > .content p.summary, .grid.references > .card > .content p.summary, .grid.team > .item > .content p.summary, .grid.team > .card > .content p.summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.grid.news > .item > .content p.link, .grid.news > .item > .content p.button, .grid.news > .card > .content p.link, .grid.news > .card > .content p.button, .grid.events > .item > .content p.link, .grid.events > .item > .content p.button, .grid.events > .card > .content p.link, .grid.events > .card > .content p.button, .grid.vacancies > .item > .content p.link, .grid.vacancies > .item > .content p.button, .grid.vacancies > .card > .content p.link, .grid.vacancies > .card > .content p.button, .grid.references > .item > .content p.link, .grid.references > .item > .content p.button, .grid.references > .card > .content p.link, .grid.references > .card > .content p.button, .grid.team > .item > .content p.link, .grid.team > .item > .content p.button, .grid.team > .card > .content p.link, .grid.team > .card > .content p.button {
  margin-top: auto;
  padding-top: 18px;
}

/* Small facts with an icon: hours, location, phone, e-mail */
.grid .item > .content > p.details {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.grid .item > .content > p.details .detail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.grid .item > .content > p.details .detail i {
  width: 16px;
  text-align: center;
}

/* Team: portraits get a finer grid than the other modules (four across on desktop). */
.grid.team {
  /* At most four columns (a track is never narrower than a quarter of the row), at least 220px each on smaller screens. */
  grid-template-columns: repeat(auto-fill, minmax(max(220px, (100% - 72px) / 4), 1fr));
  gap: 24px;
}
.grid.team > .item > .content {
  gap: 8px;
}
.grid.team > .item > .content p.details {
  flex-direction: column;
  gap: 6px;
}
.grid.team > .item > .image {
  aspect-ratio: 1;
}

/* Optional title above a module block (Views/Partials/Modules/title.cshtml) */
.module-title {
  margin-bottom: 32px;
}

/* Link to the complete overview under a module block */
p.more {
  margin: 36px 0 0;
}

/* Detail pages: one skeleton for every module. Text left, a sticky column right with the image and the facts. The hero shows the title. */
.detail {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 96px;
  align-items: start;
}
.detail > .content {
  max-width: 600px;
  /* Buttons under the text: primary first, the back link beside it */
}
.detail > .content > h2 {
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  position: absolute;
  white-space: nowrap;
}
.detail > .content > p.summary, .detail > .content > [itemprop=description] > p.summary {
  margin: 0 0 28px;
}
.detail > .content .text > :first-child {
  margin-top: 0;
}
.detail > .content .text p {
  margin: 0 0 20px;
}
.detail > .content .text h2, .detail > .content .text h3, .detail > .content .text h4 {
  margin: 40px 0 12px;
}
.detail > .content .text ul, .detail > .content .text ol {
  margin: 0 0 24px;
  padding-left: 24px;
}
.detail > .content .text img {
  max-width: 100%;
  height: auto;
}
.detail > .content > .actions {
  margin-top: 40px;
  padding-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.detail > .content > .actions p {
  margin: 0;
}
.detail > .content > .form {
  margin-top: 56px;
  scroll-margin-top: calc(var(--lz-header, 96px) + 24px);
}
.detail > .content > .form > h3 {
  margin: 0 0 20px;
}
.detail > .side {
  position: sticky;
  top: calc(var(--lz-header, 96px) + 24px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.detail > .side > .image {
  overflow: hidden;
}
.detail > .side > .image img, .detail > .side > .image picture {
  width: 100%;
  height: auto;
  display: block;
}
.detail > .side > p.button {
  margin: -4px 0 0;
}
@media (max-width: 900px) {
  .detail {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .detail > .side {
    position: static;
    order: -1;
  }
}

/* Facts: the key information of an item */
.facts {
  margin: 0;
}
.facts:empty {
  display: none;
}
.facts > div {
  padding: 16px 0;
  display: grid;
  grid-template-columns: minmax(96px, 36%) minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
}
.facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* Team detail: the portrait is square */
.team.detail > .side > .image {
  aspect-ratio: 1;
}
.team.detail > .side > .image img {
  height: 100%;
  object-fit: cover;
}

/* FAQ and downloads: search + categories left, the active category right */
.faq.umb-block-grid__area-container, .downloads.umb-block-grid__area-container {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 40px;
  row-gap: 32px;
  /* One column below 900px: twelve tracks with eleven 40px gaps would not fit a phone. */
}
.faq.umb-block-grid__area-container > .umb-block-grid__area, .downloads.umb-block-grid__area-container > .umb-block-grid__area {
  grid-column: span var(--umb-block-grid--area-column-span, 12);
}
@media (max-width: 900px) {
  .faq.umb-block-grid__area-container, .downloads.umb-block-grid__area-container {
    grid-template-columns: minmax(0, 1fr);
  }
  .faq.umb-block-grid__area-container > .umb-block-grid__area, .downloads.umb-block-grid__area-container > .umb-block-grid__area {
    grid-column: 1/-1;
  }
}
.faq .search > h3, .faq .categories > h3, .downloads .search > h3, .downloads .categories > h3 {
  margin: 0 0 12px;
}
.faq .search + .categories, .downloads .search + .categories {
  margin-top: 32px;
}
.faq .search input, .downloads .search input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  box-sizing: border-box;
}
.faq .categories ul, .downloads .categories ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.faq .categories ul li .title, .downloads .categories ul li .title {
  padding: 10px 0;
  cursor: pointer;
  user-select: none;
  display: block;
}
.faq .placeholder > h2.title, .downloads .placeholder > h2.title {
  margin: 0 0 8px;
}

/* Questions: accordion rows (the plus is in default.scss) */
.faq .list.questions .item.question > .title {
  margin: 0;
  padding: 18px 40px 18px 0;
  cursor: pointer;
  user-select: none;
  position: relative;
}
.faq .list.questions .item.question > .content.answer {
  display: none;
  padding: 0 40px 22px 0;
}
.faq .list.questions .item.question > .content.answer.show {
  display: block;
}
.faq .list.questions .item.question > .content.answer > :first-child {
  margin-top: 0;
}
.faq .list.questions .item.question > .content.answer > :last-child {
  margin-bottom: 0;
}

/* Downloads: rows with the file details and a download icon */
.downloads .list.downloads .item.download {
  padding: 16px 56px 16px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 20px;
  position: relative;
}
.downloads .list.downloads .item.download > a {
  inset: 0;
  position: absolute;
  z-index: 1;
}
.downloads .list.downloads .item.download p {
  margin: 0;
}
.downloads .list.downloads .item.download i {
  top: 50%;
  right: 8px;
  position: absolute;
  transform: translateY(-50%);
}

/* Calendar: the agenda as items with a date block, the holidays beside it */
.calendar > .placeholder.grid {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: 40px;
  align-items: start;
  /* Holidays: the dates as small rows. */
}
@media (max-width: 900px) {
  .calendar > .placeholder.grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.calendar > .placeholder.grid .list.agenda {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.calendar > .placeholder.grid .list.agenda .item.calendar-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.calendar > .placeholder.grid .list.agenda .item.calendar-item:not(:has(> .date)) {
  grid-template-columns: minmax(0, 1fr);
}
.calendar > .placeholder.grid .list.agenda .date {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.calendar > .placeholder.grid .list.agenda .date .month {
  margin-top: 6px;
}
.calendar > .placeholder.grid .list.agenda .content > h3 {
  margin: 0;
}
.calendar > .placeholder.grid .list.agenda .content > p {
  margin: 8px 0 0;
}
@media (max-width: 520px) {
  .calendar > .placeholder.grid .list.agenda .item.calendar-item {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 16px;
  }
}
.calendar > .placeholder.grid .list.vacation > h3 {
  margin: 0 0 8px;
}
.calendar > .placeholder.grid .list.vacation .item.calendar-item {
  padding: 14px 0;
}
.calendar > .placeholder.grid .list.vacation .item.calendar-item:last-child {
  padding-bottom: 0;
}
.calendar > .placeholder.grid .list.vacation .item.calendar-item p {
  margin: 0;
}
.calendar > .placeholder.grid .list.vacation .item.calendar-item h4 {
  margin: 4px 0 0;
}

/* ---------------------------------------------------------------
	Timeline (timelineBlock): milestones in chronological order, a year above each card.
	The line and pin spans in the markup are hooks for your own timeline styling.
--------------------------------------------------------------- */
.lz-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.lz-timeline__item {
  position: relative;
}

.lz-timeline__line, .lz-timeline__marker {
  display: none;
}

.lz-timeline__year {
  margin: 0 0 12px;
}

.lz-timeline__card h3 {
  margin: 0;
}
.lz-timeline__card > .image {
  margin-top: 20px;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.lz-timeline__card > .image img, .lz-timeline__card > .image picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The button to the whole timeline, under the teaser. */
p.more.lz-timeline__more {
  margin-top: 32px;
}

/* ---------------------------------------------------------------
	Umbraco Forms (theme "logisz")
	Umbraco's default form stylesheet is not loaded (see Views/Partials/Forms/Themes/logisz/Form.cshtml); everything is here.
	The field comes before its label in the markup; the label is moved above it, or floats inside the field (see below).
--------------------------------------------------------------- */
.umbraco-forms-hidden, .umbraco-forms-form .hiddenfield {
  display: none !important;
}

/* MODDED BY LOGISZ (pelgrimsafety U17-upgrade): r. 1659-1820 gescoped op .umbraco-forms-logisz (zie core.scss). */
.umbraco-forms-form.umbraco-forms-logisz {
  /* Captions above the field: move the label (rendered after the field) to the top. */
  --lz-field-height: 48px;
  /*
  	Floating labels, as in Google's outlined text fields: the label rests inside the empty field and moves onto the top
  	border when the field has focus or a value. Text fields, text areas, date pickers and selects.
  	- The markup (Forms theme "logisz") renders the field before its label and always gives it a placeholder (at least
  	  a space), so :placeholder-shown tells whether the field is empty; the placeholder text only shows once the label
  	  has moved up.
  	- Selects always show a value, so their label always sits on the border.
  	- The label covers the border line with --lz-field-bg (the background of the field; white by default, set it in the
  	  theme when fields have another colour). Colours and weight of the label are the theme's.
  */
  /* Selects with several choices: a list box. */
  /* Check boxes, radio buttons and consent. */
  /* A single check box (not consent): box and caption on one row, the field caption above them. */
  /* Check box and radio button lists: vertical by default, side by side when the editor picks "horizontal". */
  /* Title and description, rich text: content between the fields, not a field. */
  /* Fieldset and page captions of longer forms. */
  /* Help text and validation. */
}
.umbraco-forms-form.umbraco-forms-logisz .umbraco-forms-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}
.umbraco-forms-form.umbraco-forms-logisz .umbraco-forms-field {
  margin-top: 24px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.umbraco-forms-form.umbraco-forms-logisz .umbraco-forms-label, .umbraco-forms-form.umbraco-forms-logisz .umbraco-forms-legend {
  margin: 0 0 8px;
  padding: 0;
  display: block;
}
.umbraco-forms-form.umbraco-forms-logisz .umbraco-forms-field > .umbraco-forms-label {
  order: -1;
}
.umbraco-forms-form.umbraco-forms-logisz .umbraco-forms-indicator {
  margin-left: 2px;
}
.umbraco-forms-form.umbraco-forms-logisz input[type=text], .umbraco-forms-form.umbraco-forms-logisz input[type=email], .umbraco-forms-form.umbraco-forms-logisz input[type=password], .umbraco-forms-form.umbraco-forms-logisz input[type=tel], .umbraco-forms-form.umbraco-forms-logisz input[type=number], .umbraco-forms-form.umbraco-forms-logisz input[type=date], .umbraco-forms-form.umbraco-forms-logisz input[type=url], .umbraco-forms-form.umbraco-forms-logisz textarea, .umbraco-forms-form.umbraco-forms-logisz select {
  width: 100%;
  min-height: var(--lz-field-height);
  margin: 0;
  padding: 12px 16px;
  box-sizing: border-box;
}
.umbraco-forms-form.umbraco-forms-logisz textarea {
  min-height: 160px;
  resize: vertical;
}
.umbraco-forms-form.umbraco-forms-logisz :is(input.text, input.datepickerfield, textarea)::placeholder {
  color: transparent;
}
.umbraco-forms-form.umbraco-forms-logisz :is(input.text, input.datepickerfield, textarea):focus::placeholder {
  color: inherit;
  opacity: 0.5;
}
.umbraco-forms-form.umbraco-forms-logisz .umbraco-forms-field:has(> :where(input.text, input.datepickerfield, textarea, select)) > .umbraco-forms-label {
  order: 0;
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 0 4px;
  background: var(--lz-field-bg, #FFFFFF);
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: absolute;
  top: calc(var(--lz-field-height) / 2);
  left: 12px;
  transform: translateY(-50%);
  pointer-events: none;
  transition: top 0.2s, font-size 0.2s;
}
.umbraco-forms-form.umbraco-forms-logisz .umbraco-forms-field > :is(input.text, input.datepickerfield, textarea):is(:focus, :not(:placeholder-shown)) ~ .umbraco-forms-label,
.umbraco-forms-form.umbraco-forms-logisz .umbraco-forms-field > select ~ .umbraco-forms-label {
  top: 0;
  font-size: 12px;
}
.umbraco-forms-form.umbraco-forms-logisz select[multiple] {
  min-height: 140px;
}
.umbraco-forms-form.umbraco-forms-logisz .checkbox-wrapper, .umbraco-forms-form.umbraco-forms-logisz .checkboxlist > div, .umbraco-forms-form.umbraco-forms-logisz .radiobuttonlist > div {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.umbraco-forms-form.umbraco-forms-logisz .checkbox-wrapper label, .umbraco-forms-form.umbraco-forms-logisz .checkboxlist > div label, .umbraco-forms-form.umbraco-forms-logisz .radiobuttonlist > div label {
  cursor: pointer;
}
.umbraco-forms-form.umbraco-forms-logisz .checkboxlist, .umbraco-forms-form.umbraco-forms-logisz .radiobuttonlist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.umbraco-forms-form.umbraco-forms-logisz input[type=checkbox], .umbraco-forms-form.umbraco-forms-logisz input[type=radio] {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  flex: 0 0 auto;
  cursor: pointer;
}
.umbraco-forms-form.umbraco-forms-logisz .umbraco-forms-field:has(> input[type=checkbox]) {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  align-items: start;
}
.umbraco-forms-form.umbraco-forms-logisz .umbraco-forms-field:has(> input[type=checkbox]) > .umbraco-forms-label, .umbraco-forms-form.umbraco-forms-logisz .umbraco-forms-field:has(> input[type=checkbox]) > .umbraco-forms-tooltip, .umbraco-forms-form.umbraco-forms-logisz .umbraco-forms-field:has(> input[type=checkbox]) > .field-validation-error, .umbraco-forms-form.umbraco-forms-logisz .umbraco-forms-field:has(> input[type=checkbox]) > .field-validation-valid {
  grid-column: 1/-1;
}
.umbraco-forms-form.umbraco-forms-logisz .umbraco-forms-field:has(> input[type=checkbox]) > .umbraco-forms-label {
  grid-row: 1;
}
.umbraco-forms-form.umbraco-forms-logisz .umbraco-forms-field:has(> input[type=checkbox]) > label:not(.umbraco-forms-label) {
  cursor: pointer;
}
.umbraco-forms-form.umbraco-forms-logisz .checkboxlist-horizontal, .umbraco-forms-form.umbraco-forms-logisz .radiobuttonlist-horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px 24px;
}
.umbraco-forms-form.umbraco-forms-logisz input[type=file] {
  width: 100%;
  box-sizing: border-box;
}
.umbraco-forms-form.umbraco-forms-logisz .umbraco-forms-field:has(> input[type=file]) > p, .umbraco-forms-form.umbraco-forms-logisz .umbraco-forms-field:has(> input[type=file]) > ul {
  margin: 10px 0 0;
}
.umbraco-forms-form.umbraco-forms-logisz .umbraco-forms-field:has(> input[type=file]) > ul {
  padding-left: 18px;
}
.umbraco-forms-form.umbraco-forms-logisz .umbraco-forms-field:has(> .titleanddescription, > .richtext) :is(h2, h3, h4, h5, h6), .umbraco-forms-form.umbraco-forms-logisz .umbraco-forms-field.titleanddescription :is(h2, h3, h4, h5, h6), .umbraco-forms-form.umbraco-forms-logisz .umbraco-forms-field.richtext :is(h2, h3, h4, h5, h6) {
  margin: 8px 0 0;
}
.umbraco-forms-form.umbraco-forms-logisz .umbraco-forms-field:has(> .titleanddescription, > .richtext) p, .umbraco-forms-form.umbraco-forms-logisz .umbraco-forms-field.titleanddescription p, .umbraco-forms-form.umbraco-forms-logisz .umbraco-forms-field.richtext p {
  margin: 8px 0 0;
}
.umbraco-forms-form.umbraco-forms-logisz .heading-4, .umbraco-forms-form.umbraco-forms-logisz .heading-5 {
  margin: 32px 0 0;
}
.umbraco-forms-form.umbraco-forms-logisz .g-recaptcha {
  margin-top: 4px;
}
.umbraco-forms-form.umbraco-forms-logisz .umbraco-forms-tooltip {
  margin-top: 6px;
  order: 2;
}
.umbraco-forms-form.umbraco-forms-logisz .field-validation-error {
  margin-top: 6px;
  order: 3;
}
.umbraco-forms-form.umbraco-forms-logisz .validation-summary-errors {
  margin: 0 0 16px;
}

/*
	The buttons under the form: their layout and size. _Core/Content/Stylesheets/core.css styles them black and rounded, five
	selectors deep (.form .umbraco-forms-form form .umbraco-forms-page .umbraco-forms-navigation button); this selector is one
	class heavier so the theme wins. The look of the buttons is in default.scss.
*/
.umbraco-forms-form.umbraco-forms-logisz form .umbraco-forms-page .umbraco-forms-navigation {
  margin: 32px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.umbraco-forms-form.umbraco-forms-logisz form .umbraco-forms-page .umbraco-forms-navigation :is(button, input[type=submit]) {
  height: 48px;
  padding: 0 24px;
  line-height: 1;
  cursor: pointer;
}

/* ---------------------------------------------------------------
	Footer: contact banner, columns, legal navigation
--------------------------------------------------------------- */
#footer {
  margin-top: auto;
  position: relative;
}
#footer > .top {
  padding-block: var(--lz-section) 0;
  position: relative;
}
#footer > .top .banner {
  padding-bottom: var(--lz-section);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: 48px;
  position: relative;
  z-index: 1;
}
#footer > .top .banner .image {
  order: 2;
}
#footer > .top .banner .image img {
  width: 100%;
  height: auto;
  display: block;
}
#footer > .top .banner .content h2 {
  margin: 0;
}
#footer > .top .banner .content p:not(.button) {
  max-width: 560px;
}
#footer > .top .banner .content p.button {
  margin-top: 40px;
}
@media (max-width: 768px) {
  #footer > .top .banner {
    grid-template-columns: 1fr;
  }
}
#footer > .bottom {
  position: relative;
  z-index: 1;
}
#footer > .bottom .wrapper {
  padding-block: 64px 40px;
}
#footer > .bottom .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 40px;
}
#footer > .bottom .grid h2, #footer > .bottom .grid h3, #footer > .bottom .grid h4, #footer > .bottom .grid h5, #footer > .bottom .grid h6, #footer > .bottom .grid p.heading-4 {
  margin: 0 0 16px;
}
#footer > .bottom .grid p {
  margin-top: 8px;
}
#footer > .bottom .grid ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
#footer > .bottom .grid ul li {
  padding: 0;
}
#footer > .bottom .copyright {
  margin-top: 64px;
  padding-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
}
#footer > .bottom .copyright .logo {
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 20px;
}
#footer > .bottom .copyright p {
  margin: 0;
}
#footer > .bottom .copyright nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

/* An empty column grid in the footer takes no space. */
#footer > .bottom .grid:not(:has(*)) {
  display: none;
}
#footer > .bottom .grid:not(:has(*)) + .copyright {
  margin-top: 0;
  padding-top: 0;
}

@media (max-width: 768px) {
  #footer > .bottom .copyright {
    flex-direction: column;
    align-items: flex-start;
  }
  #footer > .bottom .copyright .logo {
    margin-right: 0;
  }
}
/* ---------------------------------------------------------------
	Store locator (App_Plugins/LOGISZ.StoreLocator)
	Its stylesheet loads after the theme bundle, so everything is scoped under "body .store-locator" to win without !important.
	- Heading and intro sit in the page wrapper, like every section.
	- As a full-width section the map is pulled back into the wrapper; on small screens it runs to the screen edges again.
--------------------------------------------------------------- */
body .store-locator {
  --sl-content-width: calc(var(--lz-wrapper) - 2 * var(--lz-gutter));
  margin: 0;
}
body .store-locator .sl-header {
  max-width: var(--lz-wrapper);
  margin: 0 auto 40px;
  padding-inline: var(--lz-gutter);
}
body .store-locator .sl-title {
  margin: 0;
}
body .store-locator .sl-intro {
  max-width: 600px;
  margin: 16px 0 0;
}
@media (max-width: 900px) {
  body .store-locator .sl-header {
    margin-bottom: 24px;
  }
}

body .store-locator.sl-full {
  --sl-map-height: 640px;
  --sl-panel-left: var(--sl-inset);
  width: 100%;
  max-width: var(--lz-wrapper);
  margin: 0 auto;
  padding-inline: var(--lz-gutter);
}
body .store-locator.sl-full .sl-header {
  max-width: none;
  margin: 0 0 40px;
  padding-inline: 0;
}
body .store-locator.sl-full .sl-stage {
  width: auto;
  max-width: none;
  margin-left: 0;
}
@media (max-width: 900px) {
  body .store-locator.sl-full {
    --sl-map-height: 560px;
  }
  body .store-locator.sl-full .sl-header {
    margin-bottom: 24px;
  }
  body .store-locator.sl-full .sl-stage {
    width: calc(100% + 2 * var(--lz-gutter));
    max-width: none;
    margin-left: calc(var(--lz-gutter) * -1);
  }
}

/* As a block (storeLocatorBlock) the row already provides the wrapper and its padding. */
body .umb-block-grid .store-locator.sl-full {
  max-width: none;
  padding-inline: 0;
}