/**
 * Dutch Vans pre-footer & footer. Footer ligt vast achter de pagina en wordt
 * onthuld bij het scrollen; footer.js meet de hoogte (--dv-footer-h).
 *
 * Author: Armand Niehaus (oddmanout.nl)
 */

:root {
	--dv-ft-primary: #ff7c00;
}

/* Reveal plumbing */

/* The wrapper must not paint over the fixed footer — .dv-page does the painting */
.container-wrapper {
	background-color: transparent;
}

.dv-page {
	position: relative;
	z-index: 1;
	background-color: #ffffff;
}

.dv-page.SooqrHide {
	display: block !important;
}

.dv-page.SooqrHide > :not(.container-topbar, .container-header, .container-search, .sooqrSearchContainer, .dv-mega-menu-overlay, .dv-mega-menu-wrapper) {
	display: none !important;
}

.dv-footer-spacer {
	display: none;
}

html.dv-footer-reveal .dv-footer-spacer {
	display: block;
	height: var(--dv-footer-h, 0px);
}

html.dv-footer-reveal .dv-footer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
}

/* The mobile filter drawer sits at z-index -1000 and is revealed by sliding .container-wrapper away. A fixed footer would show up in that gap instead. */
body.mobile-shift .dv-footer {
	display: none;
}

/* Pre-footer */

.dv-prefooter {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, #ffffff 0%, #f4f5f7 100%);
	padding-top: 48px;
}

.dv-prefooter__inner {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
}


.dv-prefooter__team {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	flex: 0 1 auto;
	height: 340px;
}

/* All three are trimmed to the subject and share one intrinsic height, so a single CSS height keeps them at the same scale. */
.dv-prefooter__person {
	display: block;
	width: auto;
	height: 100%;
	max-width: none;
	position: relative;
}

/* Jurrian anchors the group at full height on the lower layer. Tamara and Samuel translate over him from either side. */
.dv-prefooter__person--tamara {
	z-index: 2;
	margin-left: 0px;
	height: 87%;
	transform: translateX(96px);
}

.dv-prefooter__person--jurrian {
	height: 100%;
	z-index: 1;
}

.dv-prefooter__person--samuel {
	z-index: 2;
	height: 90%;
	transform: translateX(-72px);
}


.dv-prefooter__content {
	flex: 0 1 460px;
	padding-bottom: 56px;
}

.dv-prefooter__title {
	margin: 0 0 14px;
	font-size: 34px;
	line-height: 1.15;
	font-weight: 700;
	color: #1c1e21;
}

.dv-prefooter__text {
	margin: 0 0 26px;
	font-size: 16px;
	line-height: 1.6;
	color: #5c6166;
}

.dv-prefooter__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.dv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 26px;
	border-radius: 6px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.dv-btn:hover,
.dv-btn:focus {
	text-decoration: none;
}

.dv-prefooter .dv-btn--primary {
	background-color: var(--dv-ft-primary);
	border: 1px solid var(--dv-ft-primary);
	color: #ffffff;
}

.dv-prefooter .dv-btn--primary:hover,
.dv-prefooter .dv-btn--primary:focus {
	background-color: #e86f00;
	border-color: #e86f00;
	color: #ffffff;
}

.dv-prefooter .dv-btn--ghost {
	background-color: transparent;
	border: 1px solid #c9ccd1;
	color: #1c1e21;
}

.dv-prefooter .dv-btn--ghost:hover,
.dv-prefooter .dv-btn--ghost:focus {
	border-color: var(--dv-ft-primary);
	color: var(--dv-ft-primary);
}

/* Footer — orange shell with an inset white panel The shape is built from two border-top-left-radius values that share one variable, so there is no border, mask or SVG to keep in sync. Every measure is a clamp(), which means the curve and the left inset scale on their own and collapse to a flat edge on phones. */

.dv-footer {
	/* Thickness of the orange band, identical on the top and the left edge */
	--dv-ft-band: clamp(24px, 5.5vw, 80px);
	/* Outer corner of the shell */
	--dv-ft-radius: clamp(44px, 11vw, 160px);
	--dv-ft-logo-h: clamp(26px, 3.2vw, 44px);
	--dv-ft-gap: clamp(16px, 2.4vw, 40px);

	/* Gutter links van de shell; geen gutter erboven, de footer sluit aan op de pre-footer en neemt de eindkleur van diens gradient over. */
	padding: 0 0 0 var(--dv-ft-gap);
	background: #f4f5f7;
	color: #2b2f33;
}

.dv-footer__shell {
	background-color: var(--dv-ft-primary);
	border-top-left-radius: var(--dv-ft-radius);
	overflow: hidden; /* keeps the panel corners inside the shell */
}


.dv-footer__brandbar {
	display: flex;
	align-items: center;
	/* The band IS the brandbar: its height has to equal the left strip, or the two corner arcs cannot share a centre. The logo simply centres inside. */
	min-height: var(--dv-ft-band);
	/* Same inset as the panel, so the logo lines up with the first column */
	padding-left: var(--dv-ft-band);
}

.dv-footer__brand {
	display: inline-block;
	line-height: 0;
}

.dv-footer__brand img {
	height: var(--dv-ft-logo-h);
	width: auto;
}


/* Concentric corner: the inner arc shares its centre with the outer one only when its radius is the outer radius minus the band. Both variables scale on vw with the radius climbing faster, so the difference never goes negative. */
.dv-footer__panel {
	margin-left: var(--dv-ft-band);
	padding: clamp(22px, 2.4vw, 34px) 0 clamp(14px, 1.4vw, 20px);
	background-color: #ffffff;
	border-top-left-radius: calc(var(--dv-ft-radius) - var(--dv-ft-band));
}

/* Paneel start na gap + band, dus margin:auto centreert ~(gap+band)/2 te ver rechts. Trek die helft terug, nooit voorbij de band. */
.dv-footer__brandbar > .container,
.dv-footer__panel > .container {
	--dv-ft-container: 100%;
	flex: 1 1 auto; /* brandbar is flex: anders krimpt width:auto naar het logo */
	width: auto;
	max-width: var(--dv-ft-container);
	margin-left: max(0px, calc((100% - var(--dv-ft-container) - var(--dv-ft-gap) - var(--dv-ft-band)) / 2));
}

@media (min-width: 992px)  { .dv-footer__brandbar > .container, .dv-footer__panel > .container { --dv-ft-container: 970px; } }
@media (min-width: 1200px) { .dv-footer__brandbar > .container, .dv-footer__panel > .container { --dv-ft-container: 1170px; } }

.dv-footer a {
	color: #4a5057;
	text-decoration: none;
	transition: color 0.2s ease;
}

.dv-footer a:hover,
.dv-footer a:focus {
	color: var(--dv-ft-primary);
	text-decoration: none;
}


/* Four tracks: footer.php already renders up to four widget areas, so a fourth one slots in without touching the CSS again. */
.dv-footer__widgets {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
	padding-bottom: 24px;
}

.dv-footer__widget ul,
.dv-footer__widget .menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dv-footer__widget li {
	line-height: 1.7;
	list-style: none;
}

.dv-footer__widget .widget-title,
.dv-footer__widget h2,
.dv-footer__widget h3,
.dv-footer__widget h4 {
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 700;
	color: #1c1e21;
}

.dv-footer__widget,
.dv-footer__widget p {
	font-size: 14px;
	line-height: 1.7;
	color: #4a5057;
}


/* Nieuwsbrief (HubSpot raw-HTML embed): veld + vierkante verzendknop op één rij. display:contents op het veld maakt label/input/fouten losse grid-items, zodat de knop bij een foutmelding op de input-rij blijft. */
.dv-footer .hs-form {
	--dv-ft-field-h: 44px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--dv-ft-field-h);
	column-gap: 8px;
}

.dv-footer .hs-form > * { grid-column: 1 / -1; }
.dv-footer .hs-form .hs_email { display: contents; }
.dv-footer .hs-form .hs_email > label { grid-column: 1 / -1; margin-bottom: 4px; }
.dv-footer .hs-form .hs_email > .input { grid-column: 1; grid-row: 2; margin: 0; }
.dv-footer .hs-form .hs_email > .hs-error-msgs { grid-column: 1 / -1; grid-row: 3; }
.dv-footer .hs-form .hs_submit { grid-column: 2; grid-row: 2; }
.dv-footer .hs-form .hs_submit .actions { margin: 0; padding: 0; }

.dv-footer .hs-form .hs-input[type="email"] {
	width: 100%;
	height: var(--dv-ft-field-h);
	box-sizing: border-box;
}

.dv-footer .hs-form .hs-button {
	display: block;
	width: var(--dv-ft-field-h);
	height: var(--dv-ft-field-h);
	padding: 0;
	border: 0;
	border-radius: 4px;
	/* Lucide "send"; value blijft de toegankelijke naam, tekst alleen visueel weg */
	background: var(--dv-ft-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z'/%3E%3Cpath d='m21.854 2.147-10.94 10.939'/%3E%3C/svg%3E") center / 20px no-repeat;
	color: transparent;
	font-size: 0;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.dv-footer .hs-form .hs-button:hover,
.dv-footer .hs-form .hs-button:focus-visible {
	background-color: #e86f00;
}


.dv-footer__links {
	padding-top: 8px;
}

.dv-footer__links > ul.menu {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 8px 32px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.dv-footer__links > ul.menu > li {
	list-style: none;
}

.dv-footer__links h4 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 0 0 4px;
	padding: 12px 0;
	font-size: 15px;
	font-weight: 700;
	color: #1c1e21;
}

.dv-footer__links hr {
	display: none;
}

.dv-footer__links .sub-mega-menu {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
}

.dv-footer__links .sub-mega-menu li {
	list-style: none;
	line-height: 1.7;
}

/* Reset anything the shared mega-menu styling puts on these anchors */
.dv-footer__links .sub-mega-menu a {
	display: inline;
	padding: 0;
	border: none;
	box-shadow: none;
	background: none;
	font-size: 14px;
	line-height: 1.7;
}

/* The rich-text menu item ships its own inline styling meant for the header mega menu; it has no place in this column layout. */
.dv-footer__links .rich-text {
	display: none;
}

/* ...which can leave a column with nothing but a heading, so drop it whole */
.dv-footer__links > ul.menu > li:has(> .rich-text):not(:has(> .sub-mega-menu)) {
	display: none;
}

/* Menu item 6163 is the second "Zoek op model" column: it continues the list from the column beside it, so the repeated heading is faded out but keeps its box, otherwise that column would sit higher than the rest. Mobile keeps it visible — there it is the accordion toggle. */
@media (min-width: 768px) {
	.dv-footer__links .menu-item-6163 > h4 {
		opacity: 0;
	}
}

/* Toggle affordance is mobile-only; JS adds .dv-is-collapsible */
.dv-footer__links h4 .dv-footer__links-chevron {
	display: none;
	flex: 0 0 auto;
	font-size: 12px;
	color: #8b9198;
	transition: transform 0.2s ease;
}


.dv-footer__socials {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
}

.dv-footer__socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--dv-ft-primary);
	font-size: 20px;
}

.dv-footer__socials a:hover,
.dv-footer__socials a:focus {
	color: #c96200;
}

/* Credits */

.dv-footer__credits {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 24px;
	margin-top: 8px;
	padding-top: 20px;
	border-top: 1px solid #e4e6e9;
	font-size: 14px;
	color: #6b7178;
}

.dv-footer__credits p {
	margin: 0;
}

.dv-footer__copyright {
	flex: 1 1 auto;
}

.dv-footer__legal {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 12px;
}

.dv-footer__legal-sep {
	color: #b6bbc0;
	line-height: 1;
	user-select: none;
}

/* Tablet */

@media (max-width: 991px) {
	.dv-prefooter__team {
		height: 280px;
	}

	.dv-prefooter__title {
		font-size: 28px;
	}

	.dv-prefooter__content {
		flex-basis: 380px;
		padding-bottom: 40px;
	}
}

/* Mobile */

@media (max-width: 767px) {
	.dv-prefooter {
		padding-top: 36px;
	}

	/* Plain column: the copy already comes first in the markup */
	.dv-prefooter__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.dv-prefooter__content {
		flex-basis: auto;
		padding-bottom: 28px;
	}

	/* Both buttons stay on one row now that they are smaller */
	.dv-prefooter__actions {
		flex-wrap: nowrap;
	}

	.dv-prefooter .dv-btn {
		padding: 12px;
	}

	/* Touch target for the favourites icon in the header */
	#fav-link {
		min-height: 42px;
	}

	.dv-prefooter__title {
		font-size: 24px;
	}

	.dv-prefooter__team {
		height: 230px;
		justify-content: center;
	}

	/* Same overlap, scaled to the shorter mobile group */
	.dv-prefooter__person--tamara {
		transform: translateX(64px);
	}

	.dv-prefooter__person--samuel {
		transform: translateX(-48px);
	}

	/* No room to give up on a phone: the band drops to nothing so the panel runs full width, which also means there is no corner to stay concentric with — the panel just sits flat under the logo bar. */
	.dv-footer {
		--dv-ft-band: 0px;
		--dv-ft-radius: 20px;
		--dv-ft-gap: 14px;
	}

	.dv-footer__brandbar {
		min-height: calc(var(--dv-ft-logo-h) + 32px);
	}

	.dv-footer__panel {
		border-top-left-radius: 0;
	}

	.dv-footer__credits {
		justify-content: center;
		text-align: center;
	}

	.dv-footer__copyright {
		flex: 1 1 100%;
	}

	.dv-footer__widgets {
		grid-template-columns: 1fr;
		gap: 24px;
		padding-bottom: 0;
	}

	/* Collapsed link columns keep every link in the HTML, just out of sight */
	.dv-footer__links > ul.menu {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.dv-footer__links .dv-is-collapsible > h4 {
		cursor: pointer;
		margin-bottom: 0;
		border-bottom: 1px solid #e4e6e9;
	}

	/* The last one already has the credits divider underneath it. :last-of-type would match on the li type, and the final li is the hidden rich-text column — so ask for the collapsible with no collapsible after it. */
	.dv-footer__links .dv-is-collapsible:not(:has(~ .dv-is-collapsible)) > h4 {
		border-bottom: none;
	}

	.dv-footer__links .dv-is-collapsible > h4 .dv-footer__links-chevron {
		display: inline-flex;
	}

	.dv-footer__links .dv-is-collapsible[data-open="false"] > .sub-mega-menu {
		display: none;
	}

	.dv-footer__links .dv-is-collapsible[data-open="true"] > h4 .dv-footer__links-chevron {
		transform: rotate(180deg);
	}

	.dv-footer__links .sub-mega-menu {
		margin: 8px 0;
	}

	.dv-footer__credits {
		justify-content: center;
		text-align: center;
	}
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
	.dv-btn,
	.dv-footer a,
	.dv-footer__links h4 .dv-footer__links-chevron {
		transition: none;
	}
}