/* ============================================================
   bconnect-dk.css — gedeelde basis van de dk-*-widgetfamilie
   (/digitale-klantenservice/).
   ------------------------------------------------------------
   1-op-1 uit de Claude Design-export van 01-09-2026
   (upgrade-klantenservice.css, kop + "sectie-ritme" t/m
   "icon-tile, marks"). Alleen deze gedeelde laag staat hier; het
   zone-specifieke deel staat per widget in widgets/dk-*/dk-*.css.

   WAAROM DIT EEN GEDEELD BESTAND IS
   ---------------------------------
   Negen dk-widgets gebruiken deze 56 regels. Kopiëren zou negen
   keer 4,6 KB kosten en negen plekken om aan te passen. De regel
   in dit thema is dat een widget nooit leunt op de stylesheet van
   een ándere widget (die laadt alleen als dat widget op de pagina
   staat — zie de kop van lg-outsource). Dat gevaar heeft dit
   bestand niet: het is van niemand, en elke dk-widget declareert
   het expliciet in get_style_depends(). Zelfde constructie als
   bconnect-shared en bconnect-site-cta, maar níét sitewide
   geënqueued: het laadt alleen als er een dk-widget op de pagina
   staat.

   Geregistreerd in functions.php als handle `bconnect-dk`.

   REVEAL — LET OP DE au-sec-AFHANKELIJKHEID
   -----------------------------------------
   De reveal-regels hieronder zijn gescoped op `.au-sec`, niet op
   `.dk-sec`. Dat is geen slordigheid en geen restant: in de bron
   levert useReveal() (automotive.jsx, niet shell.jsx zoals de kop
   van klantenservice.jsx beweert) een class-string die `au-sec`
   áltijd meegeeft, dus elke dk-sectie draagt `dk-sec` én `au-sec`.
   De widgets hier doen hetzelfde: `class="dk-sec dk-bg-* au-sec"`.
   Haal je `au-sec` van een sectie af, dan verdwijnt de reveal
   zonder foutmelding en staat alles meteen zichtbaar — hinderlijk
   maar niet kapot. Haal je de regels hier weg en scope je op
   `.dk-sec`, dan werkt de reveal wél maar loopt hij uit de pas met
   `.au-rise` elders op dezelfde pagina.

   De machine erachter is Bconnect.reveal(el, 1100) uit
   bconnect-shared.js; die zet is-inview en is-settled. Elke
   dk-widget roept dat aan vanuit zijn eigen dk-*.js.
   ============================================================ */

/* Tokenalias: het merkverloop heet in colors_and_type.css
   --gradient-brand. Deze alias houdt de dk-regels werkend, ook los
   van de rest van de site. */
:root { --brand-gradient: var(--gradient-brand, linear-gradient(90deg, #2301fb 0%, #a80290 100%)); }

/* ---- sectie-ritme + achtergrondwassen ---------------------- */
.dk-sec {
	display: block;
	position: relative;
	width: 100%;
	box-sizing: border-box;
	padding: clamp(40px, 5vw, 64px) 0;
	overflow: hidden;
}
.dk-bg-light { background: #fff; }
.dk-bg-lav { background: #EEF1F8; }
.dk-bg-light::before,
.dk-bg-lav::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(620px 340px at 88% 8%, rgba(35, 1, 251, .045), transparent 60%),
		radial-gradient(520px 300px at 2% 92%, rgba(168, 2, 144, .035), transparent 58%);
}
.dk-sec > .container { position: relative; z-index: 1; }

/* ---- reveal (zie de kop: gescoped op .au-sec) --------------- */
@media (prefers-reduced-motion: no-preference) {
	.au-sec .dk-rise { transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
	.au-sec:not(.is-inview) .dk-rise { opacity: 0; transform: translateY(16px); }
	.au-sec.is-settled .dk-rise { transition: none; opacity: 1; transform: none; }
	.dk-in { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
	.dk-in.is-in { opacity: 1; transform: none; }
}

/* ---- koppen ------------------------------------------------ */
.dk-eyebrow {
	display: inline-block;
	font-family: var(--font-head);
	font-weight: var(--fw-bold);
	font-size: var(--fs-eyebrow);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	background: var(--brand-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	margin-bottom: 16px;
}
.dk-h1 { font-family: var(--font-head); font-weight: var(--fw-semibold); font-size: clamp(36px, 4.6vw, 58px); line-height: 1.06; letter-spacing: -.025em; color: var(--c-navy); margin: 0; text-wrap: balance; }
.dk-h2 { font-family: var(--font-head); font-weight: var(--fw-semibold); font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; letter-spacing: -.02em; color: var(--c-navy); margin: 0; text-wrap: balance; }
.dk-intro { font-size: var(--fs-lead); line-height: 1.6; color: var(--c-text-muted); margin: 18px 0 0; max-width: 56ch; text-wrap: pretty; }
.dk-head { display: block; max-width: 720px; }
.dk-head.is-center { margin: 0 auto; text-align: center; }
.dk-head.is-center .dk-intro { margin-left: auto; margin-right: auto; }
.dk-bridge { text-align: center; margin: clamp(34px, 4vw, 46px) auto 0; max-width: 640px; font-family: var(--font-head); font-weight: var(--fw-medium); font-size: clamp(18px, 2vw, 22px); line-height: 1.4; color: var(--c-navy); text-wrap: pretty; }
.dk-note { font-size: 15px; line-height: 1.6; color: var(--c-text-muted); margin: 22px 0 0; max-width: 56ch; }
.dk-note a { color: var(--c-navy); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(20, 20, 100, .28); text-underline-offset: 3px; }
.dk-note a:hover { color: var(--c-magenta); text-decoration-color: var(--c-magenta); }

/* ---- tekstlink met pijl ------------------------------------ */
.dk-textlink { font-family: var(--font-head); font-size: 15px; font-weight: var(--fw-bold); color: var(--c-navy); display: inline-flex; align-items: center; gap: 7px; transition: color .18s var(--ease), gap .18s var(--ease); }
.dk-textlink:hover { color: var(--c-magenta); gap: 11px; }
.dk-textlink .arr { transition: transform .18s var(--ease); }
.dk-textlink:hover .arr { transform: translateX(3px); }

/* ---- icon-tile, marks -------------------------------------- */
.dk-tile { width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto; background: var(--brand-gradient); display: grid; place-items: center; color: #fff; box-shadow: 0 6px 16px rgba(168, 2, 142, .24); }
.dk-tile svg { width: 22px; height: 22px; }
.dk-mark { width: 22px; height: 22px; border-radius: 999px; flex: 0 0 auto; display: grid; place-items: center; margin-top: 2px; background: var(--c-bg-tint, #F1F3F9); color: var(--c-text-soft); }
.dk-mark svg { width: 13px; height: 13px; }
.dk-check { width: 22px; height: 22px; border-radius: 999px; flex: 0 0 auto; display: grid; place-items: center; margin-top: 2px; background: var(--brand-gradient); color: #fff; }
.dk-check svg { width: 13px; height: 13px; }
.dk-check-list { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.dk-check-list li { display: flex; gap: 13px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; color: var(--c-navy); }

/* Een eigen beeld in een icoontegel: de gradient eraf, anders staat
   het beeld op een gekleurd vlak. Zie icon_tile() in de trait. */
.dk-tile.bc-ic-img { background: none; box-shadow: none; }
.dk-tile.bc-ic-img img { width: 100%; height: 100%; object-fit: contain; display: block; }