/* Dash Process Technology - opmaak voor de Elementor-pagina's
   De pagina's staan in Elementor (build/pages.py) met kleuren en fonts uit de
   kit-globals. Wat Elementor niet zonder gehannes kan, staat hier: het
   watermerk, de kaarten, de stappen, het mobiele menu en het formulier.
   Klassenamen komen overeen met build/elementor.py en build/pages.py. */

/* Koppen in Sora (kit.py); de CSS-counter voor de stapnummers pakt dezelfde. */
:root {
	--dash-kopfont: "Sora", var(--dash-font);
}

/* --- geneste containers ---------------------------------------------------- */
/* Het kit geeft elke container 24px zijpadding, ook de geneste kolommen in
   een rij. Drie niveaus diep bleef er op 375px 231px over voor de kop. De
   buitenste band houdt zijn padding; kolommen erin krijgen geen zijpadding.
   Kaarten zetten hun eigen padding verderop (hogere positie in de cascade). */
.e-con .e-con,
.e-con-inner > .e-con {
	padding-left: 0;
	padding-right: 0;
}

/* --- header --------------------------------------------------------------- */
.dash-header {
	border-bottom: 1px solid var(--dash-rand);
}

/* Elementor Pro maakt de header sticky (motion effects); de schaduw komt pas
   zodra hij plakt, zodat de balk bovenaan de pagina vlak in de hero ligt. */
.dash-header.elementor-sticky--effects {
	box-shadow: 0 6px 24px rgba(16, 53, 123, 0.1);
}

.dash-header .elementor-nav-menu--main .elementor-item {
	padding-left: 14px;
	padding-right: 14px;
	font-weight: 500;
}

.dash-header .elementor-nav-menu--main .elementor-item.elementor-item-active {
	color: var(--dash-teal-donker);
}

@media (max-width: 1024px) {
	/* Elementor zet het uitklapmenu in de flow, in de smalle menukolom. Hier
	   wordt het absoluut op de hele header gezet (kolom en widget doen niet mee
	   als anker), zodat het over de volle breedte onder de balk openklapt. */
	.dash-header .dash-header__menu,
	.dash-header .elementor-widget-nav-menu,
	.dash-header .elementor-widget-nav-menu > .elementor-widget-container {
		position: static;
	}

	/* Zes klassen diep: de 8px margin-top van Elementor staat met !important in
	   de widget-CSS en wint anders op specificiteit. */
	.dash-header.e-con .elementor-element.elementor-widget-nav-menu .elementor-nav-menu--dropdown.elementor-nav-menu__container {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		z-index: 100;
		width: auto;
		margin-top: 0 !important; /* Elementor zet hier zelf !important op */
		background: #fff;
		border-top: 1px solid var(--dash-rand);
		box-shadow: 0 18px 34px rgba(16, 53, 123, 0.16);
	}

	.dash-header .elementor-nav-menu--dropdown a.elementor-item {
		padding: 16px 24px;
	}
}

/* Het thema (thruster-child) zet Elementor-knoppen en het mobiele menu in
   kapitalen met spatiëring. De huisstijl is gewone zinnen in Roboto 500. */
.elementor-widget-button .elementor-button,
.dash-header .elementor-nav-menu a.elementor-item {
	text-transform: none;
	letter-spacing: 0;
}

/* --- hero ---------------------------------------------------------------- */
/* Het pijlmerk uit het logo als stil watermerk rechts in de hero. Een
   HTML-widget met de SVG, absoluut gezet; `.elementor-element` erbij om van de
   widget-positionering van Elementor te winnen. */
.dash-hero {
	position: relative;
	overflow: hidden;
}

.dash-hero .elementor-element.dash-watermerk {
	position: absolute;
	right: -5vw;
	top: -10%;
	width: clamp(260px, 36vw, 560px);
	transform: none;
	opacity: 0.1;
	pointer-events: none;
	user-select: none;
}

.dash-hero .elementor-element.dash-watermerk svg {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 767px) {
	.dash-hero .elementor-element.dash-watermerk {
		width: 260px;
		right: -90px;
		top: auto;
		bottom: -60px;
		transform: none;
		opacity: 0.07;
	}
}

/* De tekst in de hero staat boven het watermerk. */
.dash-hero > .elementor-element:not(.dash-watermerk) {
	position: relative;
	z-index: 1;
}

/* Elementor zet de kop op de body-kleur zonder eigen kleur; in de hero is dat
   navy op navy. De kleur komt uit de global, dit is de vangnet-regel. */
.dash-hero .elementor-heading-title {
	max-width: 14ch;
}

.dash-hero--laag .elementor-heading-title {
	max-width: 18ch;
}

@media (max-width: 767px) {
	/* Geen hyphens: auto; de browser brak dan "be-drijfsproces" af in plaats
	   van gewoon voor het woord te wrappen. overflow-wrap grijpt alleen in als
	   een woord echt niet past ("veiligheidsprocessen" op 30px past net). */
	.dash-hero .elementor-heading-title,
	.dash-hero--laag .elementor-heading-title {
		max-width: none;
		overflow-wrap: anywhere;
	}
}

/* De secundaire knop in de hero: alleen een lijn, zodat de teal knop de enige
   gevulde knop in beeld is. */
.dash-knop--lijn .elementor-button {
	background: transparent;
	border: 1.5px solid rgba(255, 255, 255, 0.55);
	color: #fff;
}

.dash-knop--lijn .elementor-button:hover,
.dash-knop--lijn .elementor-button:focus-visible {
	background: rgba(255, 255, 255, 0.1);
	border-color: #fff;
	color: #fff;
}

/* Microcopy onder een knop: neemt de twijfel van dat moment weg. */
.dash-microcopy {
	font-size: 15px;
	color: rgba(255, 255, 255, 0.78);
}

.dash-microcopy--donker {
	color: var(--dash-grijs);
}

/* --- v2: hero over de volle breedte ----------------------------------------- */
.dash-hero .elementor-element.dash-hero__tekst {
	position: relative;
	z-index: 1;
}

.dash-hero .dash-hero__intro {
	max-width: 56ch;
}

/* De achtergrondfoto zit op de container; Elementor lazy-loadt achtergronden
   na de eerste container. De hero is de eerste, dus die laadt direct. */
.dash-hero.e-con {
	overflow: hidden;
}

/* --- v2: bewijsstrip over de onderrand van de hero ------------------------- */
.elementor-element.dash-strip {
	margin-top: -84px;
	position: relative;
	z-index: 2;
}

.elementor-element.dash-strip__kaart {
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 24px 60px rgba(16, 53, 123, 0.16);
	padding: 34px 36px;
	gap: 28px 40px;
}

.dash-strip__item .elementor-icon-box-wrapper {
	display: grid;
	grid-template-columns: 44px 1fr;
	column-gap: 16px;
	text-align: left;
	align-items: start;
}

.dash-strip__item .elementor-icon-box-icon {
	margin: 0;
}

.dash-strip__item .elementor-icon-box-icon .elementor-icon {
	font-size: 28px;
}

.dash-strip__item .elementor-icon-box-title {
	font-size: 1.05rem;
	margin-bottom: 4px;
}

.dash-strip__item .elementor-icon-box-description {
	font-size: 15px;
	line-height: 1.55;
	color: var(--dash-grijs);
}

@media (max-width: 767px) {
	.elementor-element.dash-strip {
		margin-top: -64px;
	}

	.elementor-element.dash-strip__kaart {
		padding: 24px 22px;
	}
}

/* --- v2: foto met teal kader ------------------------------------------------ */
/* Het kader steekt schuin achter de foto uit: het 'offset'-motief dat ook in
   de hero (lijn onder de foto) en het beeldmerk zit. */
.elementor-element.dash-kader {
	position: relative;
	padding: 0 22px 22px 0;
}

.elementor-element.dash-kader::before {
	content: "";
	position: absolute;
	inset: 22px 0 0 22px;
	border-radius: 10px;
	background: var(--dash-teal);
	opacity: 0.9;
}

.elementor-element.dash-kader .dash-foto img {
	position: relative;
	border-radius: 10px;
	box-shadow: 0 18px 44px rgba(16, 53, 123, 0.18);
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.elementor-element.dash-kader--klein .dash-foto img {
	aspect-ratio: 4 / 3;
}

/* --- v2: quote --------------------------------------------------------------- */
.dash-quote .elementor-heading-title {
	padding-left: 22px;
	border-left: 4px solid var(--dash-teal);
	line-height: 1.3;
	font-weight: 600;
}

/* --- v2: donkere band ------------------------------------------------------- */
.dash-band--donker .dash-label .elementor-heading-title::before {
	background: var(--dash-teal);
}

/* Drie klassen: de basiskaart (verderop in dit bestand, wit) heeft dezelfde
   specificiteit en zou anders winnen. */
.elementor-element.dash-kaart.dash-kaart--donker {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-top: 3px solid var(--dash-teal);
}

.elementor-element.dash-kaart.dash-kaart--donker.dash-kaart--klik:hover,
.elementor-element.dash-kaart.dash-kaart--donker.dash-kaart--klik:focus-within {
	background: rgba(255, 255, 255, 0.09);
	box-shadow: 0 24px 50px rgba(0, 0, 0, 0.3);
}

.dash-kaart--donker .dash-kaart__beeld img {
	border-color: rgba(255, 255, 255, 0.18);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
}

/* --- v2: grote stapnummers -------------------------------------------------- */
.dash-stappen--groot .elementor-element.dash-stap::before {
	content: counter(dash-stap, decimal-leading-zero);
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	color: var(--dash-teal);
	font-family: var(--dash-kopfont, var(--dash-font));
	font-size: 56px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
	margin-bottom: 18px;
	display: block;
}

.dash-stappen--groot .elementor-element.dash-stap {
	position: relative;
	padding-top: 22px;
	border-top: 1px solid var(--dash-rand);
}

.dash-stappen--groot .elementor-element.dash-stap::after {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 56px;
	height: 3px;
	background: var(--dash-teal);
}

/* --- v2: sectiekop ---------------------------------------------------------- */
.dash-sectiekop--midden .dash-label .elementor-heading-title {
	justify-content: center;
}

/* --- v2: animaties en bewegingsvoorkeur ------------------------------------- */
/* Elementor verbergt elementen met een entree-animatie tot ze in beeld
   komen. Wie minder beweging wil, ziet alles direct. */
@media (prefers-reduced-motion: reduce) {
	.elementor-invisible {
		visibility: visible !important;
	}

	.animated {
		animation: none !important;
	}
}

/* --- foto's ---------------------------------------------------------------- */
/* De foto in de hero: afgerond, met een teal lijn eronder als knipoog naar
   het beeldmerk. De tekst staat links, dus de foto mag naar de rand toe. */
.dash-hero__foto img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
	box-shadow: 0 24px 60px rgba(4, 18, 50, 0.45);
}

.dash-hero .elementor-widget.dash-hero__foto {
	position: relative;
}

.dash-hero .elementor-widget.dash-hero__foto::after {
	content: "";
	position: absolute;
	left: 28px;
	right: -14px;
	bottom: -14px;
	height: 6px;
	border-radius: 3px;
	background: var(--dash-teal);
}

/* Foto naast tekst in een band. */
.dash-foto img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

/* De interface-impressies hebben hun eigen zachte achtergrond in de PNG;
   alleen een rand en een schaduw, zodat ze als 'scherm' lezen. */
.dash-impressie img,
.dash-kaart__beeld img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
	border: 1px solid var(--dash-rand);
	box-shadow: 0 18px 44px rgba(16, 53, 123, 0.14);
}

.dash-bijschrift {
	font-size: 14px;
}

.elementor-element.dash-kaart--beeld {
	padding-top: 24px;
}

.dash-kaart--beeld .elementor-widget.dash-kaart__beeld {
	margin-bottom: 8px;
}

@media (max-width: 767px) {
	.dash-hero .elementor-widget.dash-hero__foto::after {
		right: 0;
		left: 16px;
	}
}

/* --- labels --------------------------------------------------------------- */
/* Het label boven een kop ("Maatwerk", "Portfolio"): klein, teal, met een
   streepje in de kleur van het beeldmerk. */
.dash-label .elementor-heading-title,
.dash-label {
	display: flex;
	align-items: center;
	gap: 12px;
}

.dash-label .elementor-heading-title::before {
	content: "";
	display: inline-block;
	width: 26px;
	height: 3px;
	background: var(--dash-teal);
	flex: 0 0 auto;
}

/* --- rasters -------------------------------------------------------------- */
/* Elementor zet containers op flex. Voor kaarten en stappen is een grid
   handiger: gelijke kolommen zonder per breakpoint procenten te rekenen.
   `.elementor-element` staat erbij om van `.e-con { display: flex }` te winnen. */
.elementor-element.dash-raster {
	display: grid;
	gap: 28px;
}

.elementor-element.dash-raster--2 {
	grid-template-columns: repeat(2, 1fr);
}

.elementor-element.dash-raster--3 {
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1024px) {
	.elementor-element.dash-raster--3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.elementor-element.dash-raster--2,
	.elementor-element.dash-raster--3 {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/* --- kaarten -------------------------------------------------------------- */
.elementor-element.dash-kaart {
	background: #fff;
	border: 1px solid var(--dash-rand);
	border-top: 3px solid var(--dash-teal);
	border-radius: 6px;
	padding: 34px 32px 30px;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.elementor-element.dash-kaart--klik:hover,
.elementor-element.dash-kaart--klik:focus-within {
	box-shadow: 0 14px 34px rgba(16, 53, 123, 0.12);
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.elementor-element.dash-kaart--klik:hover {
		transform: none;
	}
}

.dash-kaart .elementor-heading-title {
	font-size: 1.375rem;
}

.dash-kaart .dash-kaart__sub .elementor-heading-title {
	font-size: 1rem;
	font-weight: 500;
	color: var(--dash-teal-donker);
}

/* Icon-boxen op de "robuust"-band: icoon links van de kop, tekst eronder. */
.dash-kaart .elementor-icon-box-wrapper {
	text-align: left;
}

.dash-kaart .elementor-icon-box-icon {
	margin-bottom: 18px;
}

.dash-kaart .elementor-icon-box-title {
	margin-bottom: 8px;
}

/* --- stappen ------------------------------------------------------------- */
/* De nummers komen uit een CSS-counter: verschuift Max later een stap, dan
   klopt de nummering nog steeds. Het traject is een echte volgorde, dus de
   cijfers dragen betekenis. */
.dash-stappen {
	counter-reset: dash-stap;
}

.dash-stap {
	counter-increment: dash-stap;
}

/* Elementor gebruikt `.e-con::before` zelf voor de achtergrond-overlay en zet
   die op absolute. Zonder deze reset legt het cijfer zich over de kop heen. */
.elementor-element.dash-stap::before {
	content: counter(dash-stap);
	position: relative;
	inset: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	margin-bottom: 16px;
	border-radius: 50%;
	background: var(--dash-navy);
	color: #fff;
	font-family: var(--dash-font);
	font-weight: 700;
	font-size: 18px;
	line-height: 1;
}

/* Op de lichte band met vijf stappen: nummer links, tekst rechts, als een
   traject van boven naar beneden. Een verticale lijn verbindt de stappen. */
.elementor-element.dash-stappen--lijst {
	display: grid;
	gap: 0;
}

.dash-stappen--lijst .elementor-element.dash-stap {
	display: grid;
	grid-template-columns: 46px 1fr;
	column-gap: 26px;
	padding: 0 0 36px;
	position: relative;
}

.dash-stappen--lijst .elementor-element.dash-stap::before {
	margin-bottom: 0;
	grid-row: 1 / span 2;
}

.dash-stappen--lijst .elementor-element.dash-stap::after {
	content: "";
	position: absolute;
	left: 22px;
	top: 46px;
	bottom: 0;
	width: 2px;
	background: var(--dash-rand);
}

.dash-stappen--lijst .elementor-element.dash-stap:last-child::after {
	display: none;
}

.dash-stappen--lijst .elementor-element.dash-stap > .elementor-element {
	grid-column: 2;
}

.dash-stap .elementor-heading-title {
	font-size: 1.2rem;
}

/* --- partners -------------------------------------------------------------- */
/* Namen als rustige chips: er zijn (nog) geen logo's aangeleverd, en tekst is
   eerlijker dan een nagemaakt beeldmerk. */
.dash-partners ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.dash-partners li {
	border: 1px solid var(--dash-rand);
	border-radius: 999px;
	padding: 10px 20px;
	font-weight: 500;
	color: var(--dash-navy);
	background: #fff;
}

/* --- lijsten met streepje ------------------------------------------------ */
.dash-lijst ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dash-lijst li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 10px;
}

.dash-lijst li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.75em;
	width: 14px;
	height: 3px;
	background: var(--dash-teal);
}

/* --- contactgegevens ----------------------------------------------------- */
.dash-gegevens a {
	color: var(--dash-navy);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.dash-gegevens p {
	margin-bottom: 14px;
}

/* --- placeholders -------------------------------------------------------- */
/* Alles wat nog van Dash moet komen, is expres zichtbaar: dan kan het niet per
   ongeluk live gaan. */
.dash-placeholder {
	border: 1px dashed var(--dash-teal);
	background: rgba(0, 144, 157, 0.07);
	padding: 12px 16px;
	font-size: 15px;
}

/* --- footer -------------------------------------------------------------- */
.dash-footer a {
	color: #fff;
	text-decoration: none;
}

.dash-footer a:hover,
.dash-footer a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.elementor-element.dash-footer-kolommen {
	display: grid;
	grid-template-columns: 1.4fr 1fr 0.8fr 1fr;
	gap: 40px;
}

.dash-footer {
	border-top: 4px solid var(--dash-teal);
}

@media (max-width: 1024px) {
	.elementor-element.dash-footer-kolommen {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 600px) {
	.elementor-element.dash-footer-kolommen {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

.dash-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dash-footer li {
	margin-bottom: 8px;
}

.dash-footer__onder {
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	padding-top: 22px;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.72);
}

.dash-footer__kop .elementor-heading-title {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}

/* --- formulier (Gravity Forms) ------------------------------------------- */
/* Het Orbital-thema van GF kleurt via eigen variabelen; hier naar de huisstijl.
   De klasse komt uit de cssClass van het formulier (build/forms.py). */
.dash-formulier .gform-theme--orbital {
	--gf-color-primary: #007a86;
	--gf-color-primary-rgb: 0, 122, 134;
	--gf-color-primary-contrast: #fff;
	--gf-color-primary-darker: #10357b;
	--gf-color-primary-lighter: #00909d;
	--gf-color-in-ctrl: #24303f;
	--gf-color-danger: #b3261e;
	--gf-font-size-primary: 16px;
	--gf-ctrl-font-family: var(--dash-font);
	--gf-ctrl-size: 16px;
	--gf-ctrl-color: #24303f;
	--gf-ctrl-bg-color: #fff;
	--gf-ctrl-border-color: rgba(16, 53, 123, 0.28);
	--gf-ctrl-border-color-focus: #00909d;
	--gf-ctrl-border-width: 1px;
	--gf-ctrl-radius: 4px;
	--gf-ctrl-padding-y: 12px;
	--gf-ctrl-padding-x: 14px;
	--gf-ctrl-shadow: none;
	--gf-ctrl-shadow-focus: 0 0 0 3px rgba(0, 144, 157, 0.2);
	--gf-ctrl-label-font-family: var(--dash-font);
	--gf-ctrl-label-font-size-primary: 15px;
	--gf-ctrl-label-font-weight: 500;
	--gf-ctrl-label-color-primary: #10357b;
	--gf-ctrl-label-color-req: #007a86;
	--gf-ctrl-desc-color: #5b6675;
	--gf-ctrl-btn-font-family: var(--dash-font);
	--gf-ctrl-btn-font-size: 16px;
	--gf-ctrl-btn-font-weight: 500;
	--gf-ctrl-btn-padding-y: 14px;
	--gf-ctrl-btn-padding-x: 28px;
	--gf-ctrl-btn-radius: 4px;
	--gf-ctrl-btn-border-width: 0;
	--gf-ctrl-btn-bg-color-primary: #007a86;
	--gf-ctrl-btn-bg-color-hover-primary: #10357b;
	--gf-ctrl-btn-color-primary: #fff;
	--gf-ctrl-btn-color-hover-primary: #fff;
	--gf-ctrl-btn-shadow: none;
	--gf-ctrl-btn-shadow-hover: none;
	--gf-form-gap-y: 20px;
	--gf-form-gap-x: 4%;
}

/* De bedanktekst, in dezelfde toon als de rest van de pagina. */
.dash-formulier .gform_confirmation_message {
	padding: 18px 22px;
	border-left: 3px solid var(--dash-teal);
	background: rgba(0, 144, 157, 0.07);
	font-size: 17px;
	line-height: 1.6;
	color: var(--dash-tekst);
}