/* garagetcs.nl's footer, Elementor template 108 as bin/brand-footer.php builds it. The surface, ink, muted grey
   and line are the kit's colours (bin/brand-kit.php), the red and the faces its globals: the footer sits on the
   page's own background, where the header's surface is its bar's. The dim grey of the bottom line is the muted
   grey a fifth of the way to the surface, 6.1:1 on it. */

.elementor-location-footer .tcs-footer {
	--tcs-footer-surface: var(--e-global-color-background);
	--tcs-footer-ink: var(--e-global-color-text);
	--tcs-footer-muted: var(--e-global-color-muted);
	--tcs-footer-dim: color-mix(in oklch, var(--tcs-footer-muted) 80%, var(--tcs-footer-surface));
	--tcs-footer-line: var(--e-global-color-line);
	--tcs-footer-red: var(--e-global-color-primary);
	--tcs-footer-text-font: var(--e-global-typography-text-font-family, "Geist"), system-ui, sans-serif;
	--tcs-footer-display-font: var(--e-global-typography-primary-font-family, "Race Sport"), sans-serif;
	--tcs-footer-width: min(1320px, 100% - 48px);
	padding-top: 72px;
	border-top: 1px solid var(--tcs-footer-line);
	background: var(--tcs-footer-surface);
	color: var(--tcs-footer-muted);
	font-family: var(--tcs-footer-text-font);
}
.elementor-location-footer .tcs-footer .elementor-widget {
	margin: 0;
}
.elementor-location-footer .tcs-footer :is(p, ul) {
	margin: 0;
}

/* Four columns on the header's 1320 px width; the Contact column's card takes the height of the tallest. */
.elementor-location-footer .tcs-footer .tcs-footer__main {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr);
	gap: 48px;
	width: var(--tcs-footer-width);
	margin-inline: auto;
	padding-bottom: 56px;
}
.elementor-location-footer .tcs-footer .tcs-footer__main > .e-con {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	min-width: 0;
}

/* The brand: the wordmark (its look is the kit's, bin/brand-kit.css), one line, the social icons in the brand
   red. The line's measure is on its paragraph: Elementor holds every widget of a container at max-width 100%. */
.elementor-location-footer .tcs-footer .tcs-footer__wordmark .elementor-heading-title {
	font-size: 26px;
}
.elementor-location-footer .tcs-footer .tcs-footer__line {
	margin-top: 20px;
	color: var(--tcs-footer-muted);
	font-size: 15px;
	line-height: 1.6;
}
.elementor-location-footer .tcs-footer .tcs-footer__line p {
	max-width: 38ch;
	text-wrap: pretty;
}
/* The icons' 44 px targets carry their own padding: the row starts 12 px left so the first icon lines up. */
.elementor-location-footer .tcs-footer .tcs-footer__social {
	margin: 20px 0 0 -12px;
}
.elementor-location-footer .tcs-footer .tcs-footer__social .elementor-social-icons-wrapper {
	display: flex;
	gap: 0;
}
.elementor-location-footer .tcs-footer .tcs-footer__social .elementor-grid-item {
	margin: 0;
}
.elementor-location-footer .tcs-footer .tcs-footer__social .elementor-social-icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 999px;
	background: transparent;
	font-size: 20px;
	color: var(--tcs-footer-red);
	transition: color 200ms;
}
.elementor-location-footer .tcs-footer .tcs-footer__social .elementor-social-icon svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* The link columns: a heading in the wordmark's face, then the menu, muted, in ink on hover. */
.elementor-location-footer .tcs-footer :is(.tcs-footer__diensten-title, .tcs-footer__garage-title, .tcs-footer__contact-title) .elementor-heading-title {
	margin: 0 0 16px;
	font-family: var(--tcs-footer-display-font);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.elementor-location-footer .tcs-footer .elementor-nav-menu {
	display: flex;
	flex-direction: column;
	gap: 0;
}
/* Elementor's nav-menu colours its items, the current one and the focused one in the kit's globals at
   .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active; these rules
   reach one class further. */
.elementor-location-footer .tcs-footer .elementor-nav-menu--main .menu-item > .elementor-item {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 0;
	color: var(--tcs-footer-muted);
	font-family: var(--tcs-footer-text-font);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	transition: color 200ms;
}
/* The arrow sits on the menu item, not its link: Elementor's nav-menu keeps the link's ::after for its pointer. */
.elementor-location-footer .tcs-footer .tcs-footer__more::after,
.elementor-location-footer .tcs-footer .tcs-footer__arrow {
	color: var(--tcs-footer-red);
}
.elementor-location-footer .tcs-footer .tcs-footer__more::after {
	content: "\00a0→" / "";
}

/* The contact card: the garage photo with the neon sign whole at its top, and a dark gradient from the bottom
   under the lines. The sign's letters span 12.2 % to 84.8 % of the photo's width and 11.3 % to 24.7 % of its
   height. Where the card is wide for its height the photo covers it, hanging from its top edge 48.5 % across;
   a card narrower than its height needs (desktops from 1025 to 1279 px, phones, where the card grows with its
   lines) takes the photo at its own width, the card's surface showing where it ends, and the gradient then
   runs from under the sign's letters (13.9 % of the card's width down) to dark 20 px lower, where its lines
   start, so they read at 7:1 over any part of the photo. */
.elementor-location-footer .tcs-footer .tcs-footer__contact {
	align-self: stretch;
}
.elementor-location-footer .tcs-footer .tcs-footer__card {
	position: relative;
	isolation: isolate;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	overflow: hidden;
	padding: 64px 14px 12px;
	border: 1px solid var(--tcs-footer-line);
	border-radius: 14px;
	--tcs-footer-card-shade: linear-gradient(to top, color-mix(in oklch, var(--tcs-footer-surface) 94%, transparent) 0, color-mix(in oklch, var(--tcs-footer-surface) 90%, transparent) 62%, color-mix(in oklch, var(--tcs-footer-surface) 25%, transparent) 76%, transparent 86%);
	--tcs-footer-card-shade-fit: linear-gradient(to bottom, transparent var(--tcs-footer-sign-end), color-mix(in oklch, var(--tcs-footer-surface) 90%, transparent) calc(var(--tcs-footer-sign-end) + 20px), color-mix(in oklch, var(--tcs-footer-surface) 94%, transparent) 100%);
	background-color: var(--tcs-footer-surface);
	background-position: 48.5% 0;
	background-size: cover;
	background-repeat: no-repeat;
}
@media (min-width: 1025px) and (max-width: 1279px) {
	.elementor-location-footer .tcs-footer .tcs-footer__card {
		--tcs-footer-sign-end: 40px;
		--tcs-footer-card-shade: var(--tcs-footer-card-shade-fit);
		background-position: 50% 0;
		background-size: 100% auto;
	}
}
.elementor-location-footer .tcs-footer .tcs-footer__card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--tcs-footer-card-shade);
	pointer-events: none;
}
.elementor-location-footer .tcs-footer .tcs-footer__lines {
	font-style: normal;
}
.elementor-location-footer .tcs-footer .tcs-footer__lines ul {
	padding: 0;
	list-style: none;
}
/* A line is as tall as its link or text: an inline box opening with an icon, which has no baseline, would sit
   on the line's baseline with room for descenders under it. */
.elementor-location-footer .tcs-footer .tcs-footer__lines li {
	display: flex;
}
.elementor-location-footer .tcs-footer .tcs-footer__lines li > * {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	min-height: 26px;
	color: var(--tcs-footer-ink);
	font-size: 15px;
	line-height: 1.3;
	text-decoration: none;
	transition: color 200ms;
}
/* Each fact behind its icon in the red, as the header's menu shows them: the phone and e-mail, which a visitor
   acts on, in ink at 500, the hours and the address in the muted grey; Route in the facts' text column. The
   8 px gap and the card's 14 px sides keep the address on one line in the 1440 px card (measured: 265 px of
   text, 269 px of room). */
.elementor-location-footer .tcs-footer .tcs-footer__lines .tcs-footer__fact {
	gap: 8px;
}
.elementor-location-footer .tcs-footer .tcs-footer__icon {
	flex: none;
	width: 18px;
	height: 18px;
	color: var(--tcs-footer-red);
}
.elementor-location-footer .tcs-footer .tcs-footer__lines a.tcs-footer__fact {
	font-weight: 500;
}
.elementor-location-footer .tcs-footer .tcs-footer__lines span.tcs-footer__fact {
	color: var(--tcs-footer-muted);
}
.elementor-location-footer .tcs-footer .tcs-footer__route {
	margin-inline-start: 26px;
}

/* The bottom line from the left: the copyright and the two credits, then the legal links on the same line
   from 1200 px and under them below that. Its right end stays clear for the floating WhatsApp and
   configurator buttons, its left end for the cookie settings button (16 to 60 px from the left): below
   1440 px, where the line starts left of 60 px, 64 px under it (the button's 60 px), else 32 px. */
.elementor-location-footer .tcs-footer .tcs-footer__bottom {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: flex-start;
	width: var(--tcs-footer-width);
	margin-inline: auto;
	padding: 14px 0 32px;
	border-top: 1px solid var(--tcs-footer-line);
}
@media (max-width: 1439px) {
	.elementor-location-footer .tcs-footer .tcs-footer__bottom {
		padding-bottom: 64px;
	}
}
.elementor-location-footer .tcs-footer .tcs-footer__bottom > .elementor-widget {
	width: auto;
}
.elementor-location-footer .tcs-footer .tcs-footer__fineprint {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.elementor-location-footer .tcs-footer .tcs-footer__fineprint > *,
.elementor-location-footer .tcs-footer .tcs-footer__legal .menu-item > .elementor-item {
	display: inline-flex;
	align-items: center;
	padding: 0;
	color: var(--tcs-footer-dim);
	font-family: var(--tcs-footer-text-font);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	transition: color 200ms;
}
/* The links are 32 px tall, the copyright only as tall as its line. */
.elementor-location-footer .tcs-footer .tcs-footer__fineprint > a,
.elementor-location-footer .tcs-footer .tcs-footer__legal .menu-item > .elementor-item {
	min-height: 32px;
}
/* The separating dots stand outside the links, so neither a click nor the focus ring takes them; each sits
   in a 10 px gap, a space's width either side of it. Between the credits always, after the copyright from
   768 px, between the legal links where they share the line, from 1200 px. */
.elementor-location-footer .tcs-footer :is(.tcs-footer__fineprint, .tcs-footer__legal .elementor-nav-menu) > * {
	position: relative;
}
.elementor-location-footer .tcs-footer :is(.tcs-footer__fineprint, .tcs-footer__legal .elementor-nav-menu) > *::before {
	position: absolute;
	inset-inline-start: -10px;
	top: 50%;
	width: 10px;
	text-align: center;
	color: var(--tcs-footer-dim);
	font-size: 12px;
	line-height: 1;
	transform: translateY(-50%);
	pointer-events: none;
}
.elementor-location-footer .tcs-footer .tcs-footer__fineprint > a + a {
	margin-inline-start: 10px;
}
.elementor-location-footer .tcs-footer .tcs-footer__fineprint > a + a::before {
	content: "·" / "";
}
.elementor-location-footer .tcs-footer .tcs-footer__legal .elementor-nav-menu {
	flex-flow: row wrap;
}
.elementor-location-footer .tcs-footer .tcs-footer__legal .elementor-nav-menu > li:not(:last-child) {
	margin-inline-end: 0;
}
@media (min-width: 768px) {
	.elementor-location-footer .tcs-footer .tcs-footer__fineprint > .tcs-footer__copyright + * {
		margin-inline-start: 10px;
	}
	.elementor-location-footer .tcs-footer .tcs-footer__fineprint > .tcs-footer__copyright + *::before {
		content: "·" / "";
	}
}
@media (min-width: 1200px) {
	.elementor-location-footer .tcs-footer .tcs-footer__legal {
		margin-inline-start: 12px;
	}
	.elementor-location-footer .tcs-footer .tcs-footer__legal .menu-item + .menu-item {
		margin-inline-start: 10px;
	}
	.elementor-location-footer .tcs-footer .tcs-footer__legal .menu-item + .menu-item::before {
		content: "·" / "";
	}
}
@media (max-width: 1199px) {
	.elementor-location-footer .tcs-footer .tcs-footer__legal {
		flex-basis: 100%;
	}
	.elementor-location-footer .tcs-footer .tcs-footer__legal .elementor-nav-menu {
		max-width: 520px;
		column-gap: 20px;
	}
}

/* Hover, for a pointer that hovers: a finger's tap would leave it on. */
@media (hover: hover) and (pointer: fine) {
	.elementor-location-footer .tcs-footer :is(.elementor-nav-menu--main .menu-item > .elementor-item, .tcs-footer__lines a, .tcs-footer__fineprint a):hover {
		color: var(--tcs-footer-ink);
		text-decoration: underline;
		text-underline-offset: 4px;
	}
	.elementor-location-footer .tcs-footer .tcs-footer__social .elementor-social-icon:hover {
		color: var(--tcs-footer-ink);
	}
}

/* The columns come in the order phones and tablets show them, the brand and Contact first, so the phone and
   e-mail stay near the footer's top as on live; desktops place Contact last, so their Tab walk visits it second. */
@media (min-width: 1025px) {
	.elementor-location-footer .tcs-footer .tcs-footer__contact {
		order: 1;
	}
}

/* Tablets: two columns, the brand and the Contact card on the first row. */
@media (max-width: 1024px) {
	.elementor-location-footer .tcs-footer {
		padding-top: 56px;
	}
	.elementor-location-footer .tcs-footer .tcs-footer__main {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 44px 32px;
	}
}

/* Phones: one column; a finger gets 44 px links, the card's hours and address 27 px rows; the card is at least
   220 px tall (or 1.36:1 where narrower) and grows with its lines, its text starting under the sign at any
   size; the credits under the copyright; the legal links one per row, each short enough to stay clear of the
   floating buttons. */
@media (max-width: 767px) {
	.elementor-location-footer .tcs-footer {
		--tcs-footer-width: calc(100% - 40px);
		padding-top: 48px;
	}
	.elementor-location-footer .tcs-footer .tcs-footer__main {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
		padding-bottom: 40px;
	}
	.elementor-location-footer .tcs-footer :is(.tcs-footer__diensten-title, .tcs-footer__garage-title, .tcs-footer__contact-title) .elementor-heading-title {
		margin-bottom: 6px;
	}
	.elementor-location-footer .tcs-footer .tcs-footer__card {
		--tcs-footer-sign-end: calc((100vw - 40px) * 0.14);
		--tcs-footer-card-shade: var(--tcs-footer-card-shade-fit);
		flex: none;
		min-height: min(220px, (100vw - 40px) / 1.36);
		padding: calc(var(--tcs-footer-sign-end) + 12px) 14px 8px;
		background-position: 50% 0;
		background-size: 100% auto;
	}
	/* Every line of the card the same height, links and text alike: the owner's ruling of 2026-10-14, the
	   44 px target is for buttons, not for clickable text. */
	.elementor-location-footer .tcs-footer .tcs-footer__lines li > * {
		min-height: 27px;
		font-size: 14px;
	}
	.elementor-location-footer .tcs-footer .tcs-footer__legal .elementor-nav-menu {
		flex-direction: column;
	}
	.elementor-location-footer .tcs-footer .tcs-footer__fineprint > .tcs-footer__copyright {
		flex-basis: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.elementor-location-footer .tcs-footer :is(.elementor-item, a) {
		transition: none;
	}
}