/* ==========================================================================
   DHB Social

   Overgenomen uit het ontwerp dhb-social-media-marquee-licht. Een rij tegels
   die doorlopend langsschuift, met zoekerhoeken en een onderschrift zodra je
   een tegel aanwijst.

   De lettertypes van het ontwerp (Elms Sans, Satoshi) zijn onze eigen DHB Elms
   en DHB Satoshi geworden; die laadt de plugin zelf.
   ========================================================================== */

.dhb-social {
	--s-bg: #F4F1EE;
	--s-ink: #161616;
	--s-muted: #6B6360;
	--s-line: #16161614;
	--s-line-2: #16161629;
	--s-oranje: #FF4500;
	--s-amber: #D63A00;
	--s-tegel: #E9E4DF;
	--s-h: 360px;
	--s-duur: 64s;
	--s-gat: 18px;
	--s-kop: 'DHB Elms', 'DHB Satoshi', system-ui, sans-serif;
	--s-tekst: 'DHB Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--s-ease: cubic-bezier(.2, .7, .2, 1);

	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(72px, 8vw, 110px) 0 clamp(76px, 8vw, 116px);
	background: var(--s-bg);
	color: var(--s-ink);
	font: 500 16px/1.6 var(--s-tekst);
	border-block: 1px solid var(--s-line);
	-webkit-font-smoothing: antialiased;
}

.dhb-social::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 50%;
	bottom: -40%;
	width: 90%;
	height: 80%;
	transform: translateX(-50%);
	pointer-events: none;
	background: radial-gradient(closest-side, #ff45001a, transparent);
}

.dhb-social *, .dhb-social *::before, .dhb-social *::after { box-sizing: border-box; }
.dhb-social h2, .dhb-social p { margin: 0; }
.dhb-social a, .dhb-social a:hover, .dhb-social a:focus { color: inherit; text-decoration: none; }
.dhb-social img { display: block; max-width: none; border: 0; border-radius: 0; box-shadow: none; }

/* ---------- Kop ---------- */
.dhb-social-head { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 0 24px; margin-bottom: 44px; text-align: center; }
.dhb-social-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--s-amber); }
.dhb-social-eyebrow i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--s-oranje); }
.dhb-social-eyebrow i::after {
	content: "";
	position: absolute;
	inset: -5px;
	border-radius: 50%;
	border: 1.5px solid var(--s-oranje);
	animation: dhb-social-ping 2.4s var(--s-ease) infinite;
}
@keyframes dhb-social-ping { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }

.dhb-social.dhb-social h2 {
	font-family: var(--s-kop);
	font-size: clamp(34px, 4.2vw, 58px);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -.035em;
	text-wrap: balance;
	color: var(--s-ink);
}
.dhb-social.dhb-social h2 em {
	font-style: normal;
	background: linear-gradient(100deg, #E83E00, var(--s-oranje) 60%, #FF7A3D);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.dhb-social-lead { max-width: 48ch; font-size: 16px; color: var(--s-muted); }

.dhb-social-handle {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 4px;
	padding: 7px 18px 7px 7px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--s-line-2);
	font-size: 15px;
	font-weight: 700;
	box-shadow: 0 12px 30px -18px #16161666;
	transition: border-color .3s, color .3s, transform .3s var(--s-ease);
}
.dhb-social-handle .ig { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--s-oranje); flex: none; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.dhb-social-handle .ig svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dhb-social-handle .go { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--s-ease); }
.dhb-social-handle::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 7px;
	top: 50%;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--s-ink);
	transform: translateY(-50%) scale(0);
	transition: transform .55s var(--s-ease);
}
.dhb-social-handle:hover { color: #fff; border-color: var(--s-ink); transform: translateY(-2px); }
.dhb-social-handle:hover::before { transform: translateY(-50%) scale(14); }
.dhb-social-handle:hover .ig { transform: rotate(-12deg); }
.dhb-social-handle:hover .go { transform: translate(2px, -2px); }
.dhb-social-handle:focus-visible { outline: 2px solid var(--s-oranje); outline-offset: 3px; }

/* ---------- De lopende rij ---------- */
.dhb-social-rail {
	position: relative;
	overflow: hidden;
	padding: 14px 0 46px;
	margin-bottom: -34px;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.dhb-social-track { display: flex; align-items: center; gap: var(--s-gat); width: max-content; animation: dhb-social-move var(--s-duur) linear infinite; }
.dhb-social-rail:hover .dhb-social-track,
.dhb-social-rail:focus-within .dhb-social-track { animation-play-state: paused; }

/* De rij staat er twee keer; bij de helft min een halve tussenruimte staat de
   kopie precies waar het origineel begon, waardoor de lus niet te zien is. */
@keyframes dhb-social-move { to { transform: translate3d(calc(-50% - var(--s-gat) / 2), 0, 0); } }

.dhb-social-tile {
	position: relative;
	flex: none;
	display: block;
	overflow: hidden;
	isolation: isolate;
	border-radius: 22px;
	background: var(--s-tegel);
	border: 1px solid var(--s-line);
	box-shadow: 0 18px 40px -28px #16161659;
	transition: transform .5s var(--s-ease), border-color .4s, box-shadow .5s;
}
.dhb-social-tile.is-port { width: calc(var(--s-h) * .8); height: var(--s-h); }
.dhb-social-tile.is-land { width: calc(var(--s-h) * .95); height: calc(var(--s-h) * .76); }
.dhb-social-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.95); transition: transform 1.2s var(--s-ease), filter .6s; }
.dhb-social-tile::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, transparent 45%, #161616cc); opacity: 0; transition: opacity .45s; }

/* De vervanger zolang er geen foto is ingesteld. */
.dhb-social-ph {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 20px;
	text-align: center;
	font-size: 13.5px;
	font-weight: 700;
	color: #16161673;
	background: radial-gradient(60% 60% at 50% 40%, #ff450014, transparent 70%), repeating-linear-gradient(135deg, #16161608 0 10px, transparent 10px 20px), var(--s-tegel);
}
.dhb-social-ph svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dhb-social-tile img + .dhb-social-ph { display: none; }

/* ---------- Zoekerhoeken en onderschrift ---------- */
.dhb-social-vf { position: absolute; z-index: 2; inset: 12px; pointer-events: none; }
.dhb-social-vf i { position: absolute; width: 20px; height: 20px; border: 0 solid var(--s-oranje); opacity: 0; transition: opacity .35s, transform .55s var(--s-ease); }
.dhb-social-vf i:nth-child(1) { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: 12px; transform: translate(-8px, -8px); }
.dhb-social-vf i:nth-child(2) { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 12px; transform: translate(8px, -8px); }
.dhb-social-vf i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: 12px; transform: translate(-8px, 8px); }
.dhb-social-vf i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 12px; transform: translate(8px, 8px); }

.dhb-social-cap {
	position: absolute;
	z-index: 3;
	left: 26px;
	right: 26px;
	bottom: 26px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .4s, transform .5s var(--s-ease);
}
.dhb-social-cap span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dhb-social-cap svg { width: 34px; height: 34px; flex: none; padding: 9px; border-radius: 50%; background: #fff; fill: none; stroke: var(--s-oranje); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.dhb-social-tile:hover,
.dhb-social-tile:focus-visible { border-color: #ff450080; transform: translateY(-6px); box-shadow: 0 30px 60px -30px #16161680; }
.dhb-social-tile:hover img,
.dhb-social-tile:focus-visible img { transform: scale(1.07); filter: saturate(1); }
.dhb-social-tile:hover::before,
.dhb-social-tile:focus-visible::before { opacity: 1; }
.dhb-social-tile:hover .dhb-social-vf i,
.dhb-social-tile:focus-visible .dhb-social-vf i { opacity: 1; transform: none; }
.dhb-social-tile:hover .dhb-social-cap,
.dhb-social-tile:focus-visible .dhb-social-cap { opacity: 1; transform: none; }
.dhb-social-tile:focus-visible { outline: 2px solid var(--s-oranje); outline-offset: 3px; }

/* ---------- Mobiel ----------
   Daar kun je niet aanwijzen, dus staan het onderschrift en de donkere voet
   meteen aan. */
@media (max-width: 760px) {
	.dhb-social { --s-h: 260px; --s-gat: 12px; --s-duur: 48s; }
	.dhb-social-head { margin-bottom: 32px; }
	.dhb-social-tile { border-radius: 18px; }
	.dhb-social-cap { opacity: 1; transform: none; }
	.dhb-social-tile::before { opacity: .8; }
}

/* ---------- Minder beweging ----------
   De rij staat stil en wordt met de hand te verschuiven. */
@media (prefers-reduced-motion: reduce) {
	.dhb-social-track { animation: none; }
	.dhb-social-rail { overflow-x: auto; -webkit-mask-image: none; mask-image: none; padding-inline: 24px; }
	.dhb-social *, .dhb-social *::before, .dhb-social *::after { transition: none !important; }
	.dhb-social-eyebrow i::after { animation: none; }
}

/* ---------- Kopkleur vastzetten ----------
   De eigen kleuren hierboven hebben de wrapper dubbel gekregen en wegen dus
   zwaarder dan een Elementor-kit. Deze regel vangt de rest op. */
.dhb-social.dhb-social h1,
.dhb-social.dhb-social h3,
.dhb-social.dhb-social h4,
.dhb-social.dhb-social h5,
.dhb-social.dhb-social h6 {
	color: inherit;
}
.dhb-social.dhb-social .dhb-social-lead { color: var(--s-muted); }
.dhb-social.dhb-social .dhb-social-eyebrow { color: var(--s-amber); }
.dhb-social.dhb-social .dhb-social-handle { color: var(--s-ink); background: #fff; }
.dhb-social.dhb-social .dhb-social-handle:hover { color: #fff; }
.dhb-social.dhb-social .dhb-social-cap { color: #fff; }
.dhb-social.dhb-social .dhb-social-ph { color: #16161673; }

/* Ook hier staan teksten in spans; die erven van hun omhulsel in plaats van
   van het thema. */
.dhb-social.dhb-social .dhb-social-cap span { color: inherit; }
.dhb-social.dhb-social .dhb-social-eyebrow i { background: var(--s-oranje); }
.dhb-social.dhb-social .dhb-social-handle .ig { background: var(--s-oranje); }