/* Zwevende sticker rechtsonder (design.sticker_* in het siteprofiel / CMS: Website-instellingen > Sticker).
   Wordt ALLEEN geladen als de sticker op de pagina staat. Maat en kleuren zet de layout:
   --st-size (px), --st-bg (achtergrond) en --st-ink (tekst, automatisch leesbaar).
   Geen JavaScript: position: fixed houdt hem in beeld tijdens het scrollen.
   z-index 900: onder het mobiele menu (1001), de zwevende kop (1000), de cookiemelding
   en de fotoviewer, zodat hij daar nooit overheen valt. */

a.site-sticker {
	--st-s: var(--st-size, 130px);
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 900;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: var(--st-s);
	height: var(--st-s);
	padding: calc(var(--st-s) * .13);
	box-sizing: border-box;
	border-radius: 50%;
	background: var(--st-bg, #378ac4);
	color: var(--st-ink, #fff);
	box-shadow: 0 10px 26px rgba(0, 0, 0, .22), 0 2px 6px rgba(0, 0, 0, .14);
	text-align: center;
	text-decoration: none;
	line-height: 1.1;
	font-family: var(--st-ff, inherit);
	transition: transform .2s ease, box-shadow .2s ease;
}

/* Verschijnen (design.sticker_delay / sticker_effect). De layout zet --st-anim, --st-dur
   en --st-delay alleen als dat in het CMS is ingesteld; anders geen animatie.
   Tot het verschijnen is de sticker onzichtbaar (visibility: hidden: niet klikbaar en niet
   met Tab bereikbaar). De effecten gebruiken translate/scale (losse eigenschappen), zodat
   het schuin staan (transform) en het vergroten bij aanwijzen gewoon blijven werken. */
a.site-sticker {
	animation: var(--st-anim, none) var(--st-dur, 0s) ease-out var(--st-delay, 0s) both;
}

@keyframes st-appear {
	from { opacity: 0; visibility: hidden; }
	to { opacity: 1; visibility: visible; }
}

@keyframes st-fade {
	from { opacity: 0; visibility: hidden; }
	to { opacity: 1; visibility: visible; }
}

/* Inschuiven van rechts */
@keyframes st-slide {
	from { translate: 180% 0; opacity: 0; visibility: hidden; }
	to { translate: 0 0; opacity: 1; visibility: visible; }
}

/* Van onder omhoog, met een veerkrachtige stuit */
@keyframes st-bounce {
	0% { translate: 0 160%; opacity: 0; visibility: hidden; }
	55% { translate: 0 -14%; opacity: 1; visibility: visible; }
	75% { translate: 0 6%; }
	90% { translate: 0 -3%; }
	100% { translate: 0 0; opacity: 1; visibility: visible; }
}

/* Opploppen: inzoomen met een kleine overshoot */
@keyframes st-pop {
	0% { scale: 0; opacity: 0; visibility: hidden; }
	70% { scale: 1.12; opacity: 1; visibility: visible; }
	100% { scale: 1; opacity: 1; visibility: visible; }
}

/* Gestippelde rand binnenin: het "sticker"-effect */
a.site-sticker:before {
	content: '';
	position: absolute;
	top: 6px;
	right: 6px;
	bottom: 6px;
	left: 6px;
	border: 2px dashed currentColor;
	border-radius: 50%;
	opacity: .45;
	pointer-events: none;
}

a.site-sticker--vierkant { border-radius: 14px; }
a.site-sticker--vierkant:before { border-radius: 9px; }

a.site-sticker--tilt { transform: rotate(-8deg); }

a.site-sticker:hover,
a.site-sticker:focus {
	color: var(--st-ink, #fff);
	text-decoration: none;
	transform: scale(1.06);
	box-shadow: 0 14px 32px rgba(0, 0, 0, .26), 0 3px 8px rgba(0, 0, 0, .16);
}

a.site-sticker:focus-visible {
	outline: 3px solid var(--st-bg, #378ac4);
	outline-offset: 4px;
}

/* Typografie: --st-fs (grootte als factor), --st-fw (dikte), --st-tt (hoofdletters) en
   --st-ff (lettertype) zet de layout alleen als ze in het CMS zijn ingesteld. */
.site-sticker-text {
	font-size: calc(var(--st-s) * .135 * var(--st-fs, 1));
	font-weight: var(--st-fw, 700);
	letter-spacing: .02em;
	text-transform: var(--st-tt, uppercase);
	overflow-wrap: anywhere;
	hyphens: auto;
}

.site-sticker-sub {
	font-size: calc(var(--st-s) * .095 * var(--st-fs, 1));
	font-weight: var(--st-fw-sub, 500);
	opacity: .9;
	overflow-wrap: anywhere;
}

/* "Naar boven"-knop van het thema (rechtsonder) boven de sticker zetten */
#toTop { bottom: calc(var(--st-size, 130px) + 52px); }

/* Mobiel: 80% van de maat, dichter bij de rand; of helemaal niet (sticker_mobile = nee) */
@media only screen and (max-width: 767px) {
	a.site-sticker {
		--st-s: calc(var(--st-size, 130px) * .8);
		right: 14px;
		bottom: 14px;
	}

	a.site-sticker--no-mobile { display: none; }

	#toTop { bottom: calc(var(--st-size, 130px) * .8 + 40px); }
}

/* Minder beweging (instelling van het systeem): wel de vertraging, geen beweging */
@media (prefers-reduced-motion: reduce) {
	a.site-sticker {
		transition: none;
		animation-name: var(--st-anim-rm, none);
		animation-duration: .01s;
	}
}

@media print {
	a.site-sticker { display: none; }
}