/* ==========================================================================
   STC Floating Contact CTA
   A persistent, brand-styled contact panel. Desktop (> 992px, matching the
   theme's existing breakpoint): a slim vertical tab fixed to the right
   edge that expands into a small panel. Tablet/mobile (<= 992px): a
   compact sticky bar at the bottom instead of the tab.
   ========================================================================== */

.stc-cta {
	--stc-cta-teal: #00B7BE;
	--stc-cta-navy: #00394D;
}

/* ---------- Desktop vertical tab + panel ---------- */

.stc-cta__desktop {
	position: fixed;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	z-index: 60;
}

.stc-cta__trigger {
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 56px;
	padding: 20px 0;
	background: #ffffff;
	color: var(--stc-cta-navy);
	border-radius: 16px 0 0 16px;
	box-shadow: -2px 4px 18px rgba(0, 57, 77, 0.16);
	transition: background 0.25s, color 0.25s;
	font-family: inherit;
}

.stc-cta__trigger:hover,
.stc-cta__trigger:focus-visible {
	background: var(--stc-cta-teal);
	color: #ffffff;
}

.stc-cta__trigger-icon {
	flex-shrink: 0;
}

.stc-cta__trigger-text {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.stc-cta__panel {
	position: absolute;
	right: 56px;
	top: 50%;
	width: 300px;
	max-width: calc(100vw - 90px);
	background: #ffffff;
	border-radius: 20px;
	box-shadow: 0 10px 40px rgba(0, 57, 77, 0.2);
	padding: var(--small);
	box-sizing: border-box;
	opacity: 0;
	transform: translateY(-50%) translateX(8px);
	transition: opacity 0.22s ease, transform 0.22s ease;
}

.stc-cta__panel.is-open {
	opacity: 1;
	transform: translateY(-50%) translateX(0);
}

.stc-cta__close {
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	background: transparent;
	position: absolute;
	top: var(--extrasmall);
	right: var(--extrasmall);
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--stc-cta-navy);
	cursor: pointer;
	border-radius: 50%;
	transition: background 0.2s;
}

.stc-cta__close:hover,
.stc-cta__close:focus-visible {
	background: #EBEFF1;
}

.stc-cta__eyebrow {
	margin: 0 0 4px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--stc-cta-navy);
	padding-right: var(--large);
}

.stc-cta__machine {
	margin: 0 0 var(--extrasmall);
	font-size: 17px;
	font-weight: 700;
	color: var(--stc-cta-teal);
}

.stc-cta__primary {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	box-sizing: border-box;
	margin-top: 2px;
}

.stc-cta__quick {
	display: flex;
	gap: var(--extrasmall);
	margin-top: var(--extrasmall);
}

.stc-cta__quick-btn {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 8px;
	border-radius: 30px;
	box-shadow: 0 0 0 1px #EBEFF1 inset;
	color: var(--stc-cta-navy);
	text-decoration: none;
	font-size: 13px;
	font-weight: 500;
	transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.stc-cta__quick-btn:hover,
.stc-cta__quick-btn:focus-visible {
	background: var(--stc-cta-navy);
	color: #ffffff;
	box-shadow: 0 0 0 1px var(--stc-cta-navy) inset;
}

/* Secondary path to the Service page, under the quick contact buttons. */

.stc-cta__service {
	margin: var(--extrasmall) 0 0;
	padding-top: var(--extrasmall);
	border-top: 1px solid #EBEFF1;
	font-size: 12px;
	line-height: 1.5;
	color: #5A6B73;
}

.stc-cta__service > span {
	display: block;
}

.stc-cta__service a {
	white-space: nowrap;
	color: var(--stc-cta-navy);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	transition: color 0.2s;
}

.stc-cta__service a:hover,
.stc-cta__service a:focus-visible {
	color: var(--stc-cta-teal);
}

/* ---------- Tablet / mobile sticky bar ---------- */

.stc-cta__mobile {
	display: none;
}

@media (max-width: 992px) {
	.stc-cta__desktop {
		display: none;
	}

	.stc-cta__mobile {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 60;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--extrasmall);
		background: #ffffff;
		padding: var(--extrasmall) var(--small);
		padding-bottom: max(var(--extrasmall), env(safe-area-inset-bottom));
		box-shadow: 0 -2px 16px rgba(0, 57, 77, 0.14);
	}

	.stc-cta__mobile-copy {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}

	.stc-cta__mobile-eyebrow {
		font-size: 12px;
		font-weight: 600;
		color: var(--stc-cta-navy);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.stc-cta__mobile-machine {
		font-size: 13px;
		font-weight: 700;
		color: var(--stc-cta-teal);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.stc-cta__mobile-btn {
		flex-shrink: 0;
		padding: 12px 22px;
	}

	/* WhatsApp-first actions: brand-teal pill + small contact icon. */
	.stc-cta__mobile-actions {
		display: flex;
		align-items: center;
		gap: 10px;
		flex-shrink: 0;
	}

	.stc-cta__mobile-wa {
		flex-shrink: 0;
		gap: 10px;
		padding: 12px 22px;
		justify-content: center;
	}

	.stc-cta__mobile-wa svg {
		flex-shrink: 0;
	}

	/* Het pijltje van .btn zegt "pagina" en kost breedte; het WhatsApp-icoon
	   vertelt het verhaal al. Hover krijgt daarom een eigen navy vulling. */
	.stc-cta__mobile-wa::after {
		display: none;
	}

	.stc-cta__mobile-wa:hover,
	.stc-cta__mobile-wa:focus-visible {
		background: var(--stc-cta-navy);
	}

	.stc-cta__mobile-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 46px;
		height: 46px;
		flex-shrink: 0;
		border-radius: 999px;
		border: 1.5px solid var(--stc-cta-navy);
		background: #ffffff;
		color: var(--stc-cta-navy);
		transition: background-color 0.2s, color 0.2s;
	}

	.stc-cta__mobile-icon:hover,
	.stc-cta__mobile-icon:focus-visible {
		background: var(--stc-cta-navy);
		color: #ffffff;
	}

	/* Telefoons: de tekst links wordt daar toch afgekapt, dus krijgen de twee
	   knoppen de volle breedte. Vanaf tablet past de tekst er wel naast. */
	@media (max-width: 430px) {
		.stc-cta__mobile-copy {
			display: none;
		}

		.stc-cta__mobile-actions {
			flex: 1;
		}

		.stc-cta__mobile-wa {
			flex: 1;
		}
	}

	body {
		padding-bottom: 72px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.stc-cta__trigger,
	.stc-cta__panel,
	.stc-cta__quick-btn,
	.stc-cta__close {
		transition: none;
	}
}

/* 8 sep 2026: het uitklapmenu eindigt op de knop "Verkoop uw machine"; de vaste
   CTA-balk onderaan (.stc-cta__mobile) stond daaroverheen, zodat de knop niet te
   raken was. Extra ruimte onderin het menu, zodat de knop boven de balk uit
   gescrold kan worden. */
@media (max-width: 992px) {
	body:has(.stc-cta__mobile) header nav.navigation .navigation-menu {
		padding-bottom: 100px;
	}

	/* Aanvulling 8 sep 2026 (avond): extra ruimte alleen was niet genoeg, want op een
	   machinepagina ligt voor een ingelogde medewerker ook nog de interne balk over
	   het menu heen. Zolang het menu openstaat verdwijnt de CTA-balk daarom; de
	   interne balk doet hetzelfde vanuit stc-intern.php. */
	body:has(.navigation-menu.open) .stc-cta__mobile {
		display: none;
	}
}

/* ==========================================================================
   Compacte mobiele contactbalk: zo min mogelijk schermruimte, zodat er meer
   van de pagina zichtbaar blijft. De knop zakt daarmee dichter naar de
   onderrand. Aanraakvlak blijft ruim 40 px hoog.
   ========================================================================== */

@media (max-width: 992px) {

	.stc-cta__mobile {
		padding-top: 5px;
		padding-bottom: max(0px, calc(env(safe-area-inset-bottom) - 20px));
		padding-left: 12px;
		padding-right: 12px;
	}

	.stc-cta__mobile-wa,
	.stc-cta__mobile-btn {
		padding: 8px 18px;
	}

	.stc-cta__mobile-actions {
		gap: 8px;
	}
}