/* EM Group – site-wide styles. File: kallyas-child/em-site.css (loaded by functions.php, version = file date, so no stale cache) */

/* 1. Text links in body text always coral.
   NOT: headings (team names), sidebar/widgets (e.g. Categories on News & Insights), menu, header, footer, buttons, event list. */
#content :is(p, td, blockquote) a:not([class*="btn"]):not([class*="button"]):not(.widget a):not(aside a),
#content li:not(.menu-item):not(.widget li):not(aside li):not(.em-ev-list li) > a:not([class]),
#content li:not(.menu-item):not(.widget li):not(aside li):not(.em-ev-list li) > :is(strong, b, em) > a:not([class]) {
	color: #EE6649;
	text-decoration: underline;
	text-underline-offset: 2px;
}
#content :is(p, td, blockquote) a:not([class*="btn"]):not([class*="button"]):not(.widget a):not(aside a):hover,
#content li:not(.menu-item):not(.widget li):not(aside li):not(.em-ev-list li) > a:not([class]):hover {
	color: #376E64;
}
#content .em-ev .em-ev-list li > a, #content .em-ev .em-ev-list li > a * { text-decoration: none !important; }

/* 2. No blue outline after clicking a button or link (keyboard users still get a coral focus ring). */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible) {
	outline: none !important;
	box-shadow: none !important;
}
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
	outline: 2px solid #EE6649 !important;
	outline-offset: 3px;
	box-shadow: none !important;
}

/* 3. Team grid: job title under the name in Dosis – NOG NIET LIVE (wacht op akkoord Projit, samen met de eventpagina's).
   Zet de regels hieronder terug zodra Projit akkoord geeft (staan in de staging-versie van em-site.css). */

/* 4. Mobile/tablet: text boxes with fixed side margins (e.g. intro on /events/: 270px left + right) use the full width. */
@media (max-width: 991px) {
	.zn_text_box { margin-left: 0 !important; margin-right: 0 !important; }
}

/* 5. /events/ (page-id-920): tiles always square, coral banner text stays in the banner at every width. */
.page-id-920 .znFlipboxElm {
	container-type: inline-size;
	height: auto !important;
	aspect-ratio: 1 / 1;
}
.page-id-920 .znFlipbox-contentFront .zn_text_box {
	margin-top: 150px;           /* fallback for old browsers */
	margin-top: 50cqw !important; /* = half the tile, as on desktop (150 of 300px) */
}
@media (max-width: 767px) {
	/* on a phone the tile is larger but the text is not, so lift it a little to sit in the middle of the coral banner */
	.page-id-920 .znFlipbox-contentFront .zn_text_box { margin-top: calc(50cqw - 14px) !important; }
}

/* 6. Event pages (/team_category/…): less white space between menu and hero. */
/* (spacing under the menu is set by functions-em-events.php so the hero touches the black menu bar) */

/* 7. Full-width building blocks – the same on every page (glossary, News & Insights, event pages).
   .em-fullbleed = edge to edge of the browser; .em-cta = green "call to action" band as on /glossary/. */
#page_wrapper { overflow-x: clip; }
.em-fullbleed { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; }
.em-cta, .em-cta * { box-sizing: border-box; }
.em-cta { position: relative; overflow: hidden; color: #fff; background: linear-gradient(115deg, #376e64 35%, #43ac8c 130%);
	width: 100vw; margin: var(--em-section) calc(50% - 50vw) var(--em-section); padding: clamp(36px, 5vw, 64px) max(24px, calc(50vw - 600px)); font-family: 'Open Sans', sans-serif; }
.em-cta::before { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 460' preserveAspectRatio='xMidYMid slice'%3E%3Cpath d='M-37 -35L112 -48M-37 -35L-71 76M-37 -35L90 68M112 -48L211 14M112 -48L90 68M211 14L90 68M211 14L354 -8M211 14L275 111M211 14L348 89M354 -8L556 -47M354 -8L348 89M556 -47L348 89M556 -47L686 -27M556 -47L487 78M556 -47L659 114M686 -27L766 -43M686 -27L659 114M766 -43L659 114M766 -43L957 -1M766 -43L780 76M766 -43L975 100M957 -1L1050 -24M957 -1L975 100M1050 -24L975 100M1050 -24L1193 0M1050 -24L1113 84M1050 -24L1195 85M1193 0L1195 85M-71 76L90 68M-71 76L-31 188M90 68L-31 188M90 68L275 111M90 68L132 184M90 68L274 183M275 111L348 89M275 111L274 183M348 89L274 183M348 89L487 78M348 89L368 239M348 89L550 230M487 78L659 114M487 78L550 230M659 114L550 230M659 114L780 76M659 114L662 235M659 114L836 234M780 76L975 100M780 76L836 234M975 100L836 234M975 100L1113 84M975 100L948 214M975 100L1073 199M1113 84L1195 85M1113 84L1073 199M1195 85L1073 199M1195 85L1213 186M-31 188L132 184M-31 188L-5 329M-31 188L129 354M132 184L274 183M132 184L129 354M274 183L129 354M274 183L368 239M274 183L245 348M274 183L378 300M368 239L550 230M368 239L378 300M550 230L378 300M550 230L662 235M550 230L497 356M550 230L675 312M662 235L836 234M662 235L675 312M836 234L675 312M836 234L948 214M836 234L805 310M836 234L964 344M948 214L1073 199M948 214L964 344M1073 199L964 344M1073 199L1213 186M1073 199L1047 300M1073 199L1253 331M1213 186L1253 331M-5 329L129 354M-5 329L-35 450M129 354L-35 450M129 354L245 348M129 354L138 469M129 354L276 464M245 348L378 300M245 348L276 464M378 300L276 464M378 300L497 356M378 300L350 417M378 300L516 466M497 356L675 312M497 356L516 466M675 312L516 466M675 312L805 310M675 312L630 413M675 312L801 463M805 310L964 344M805 310L801 463M964 344L801 463M964 344L1047 300M964 344L938 455M964 344L1086 408M1047 300L1253 331M1047 300L1086 408M1253 331L1086 408M1253 331L1241 451M-35 450L138 469M138 469L276 464M276 464L350 417M350 417L516 466M516 466L630 413M630 413L801 463M801 463L938 455M938 455L1086 408M1086 408L1241 451' fill='none' stroke='%23bce3c9' stroke-width='1' opacity='.09'%3E%3C/path%3E%3Cg fill='%23bce3c9' opacity='.14'%3E%3Ccircle cx='-37' cy='-35' r='3'/%3E%3Ccircle cx='112' cy='-48' r='3'/%3E%3Ccircle cx='211' cy='14' r='3'/%3E%3Ccircle cx='354' cy='-8' r='3'/%3E%3Ccircle cx='556' cy='-47' r='3'/%3E%3Ccircle cx='686' cy='-27' r='3'/%3E%3Ccircle cx='766' cy='-43' r='3'/%3E%3Ccircle cx='957' cy='-1' r='3'/%3E%3Ccircle cx='1050' cy='-24' r='3'/%3E%3Ccircle cx='1193' cy='0' r='3'/%3E%3Ccircle cx='-71' cy='76' r='3'/%3E%3Ccircle cx='90' cy='68' r='3'/%3E%3Ccircle cx='275' cy='111' r='3'/%3E%3Ccircle cx='348' cy='89' r='3'/%3E%3Ccircle cx='487' cy='78' r='3'/%3E%3Ccircle cx='659' cy='114' r='3'/%3E%3Ccircle cx='780' cy='76' r='3'/%3E%3Ccircle cx='975' cy='100' r='3'/%3E%3Ccircle cx='1113' cy='84' r='3'/%3E%3Ccircle cx='1195' cy='85' r='3'/%3E%3Ccircle cx='-31' cy='188' r='3'/%3E%3Ccircle cx='132' cy='184' r='3'/%3E%3Ccircle cx='274' cy='183' r='3'/%3E%3Ccircle cx='368' cy='239' r='3'/%3E%3Ccircle cx='550' cy='230' r='3'/%3E%3Ccircle cx='662' cy='235' r='3'/%3E%3Ccircle cx='836' cy='234' r='3'/%3E%3Ccircle cx='948' cy='214' r='3'/%3E%3Ccircle cx='1073' cy='199' r='3'/%3E%3Ccircle cx='1213' cy='186' r='3'/%3E%3Ccircle cx='-5' cy='329' r='3'/%3E%3Ccircle cx='129' cy='354' r='3'/%3E%3Ccircle cx='245' cy='348' r='3'/%3E%3Ccircle cx='378' cy='300' r='3'/%3E%3Ccircle cx='497' cy='356' r='3'/%3E%3Ccircle cx='675' cy='312' r='3'/%3E%3Ccircle cx='805' cy='310' r='3'/%3E%3Ccircle cx='964' cy='344' r='3'/%3E%3Ccircle cx='1047' cy='300' r='3'/%3E%3Ccircle cx='1253' cy='331' r='3'/%3E%3Ccircle cx='-35' cy='450' r='3'/%3E%3Ccircle cx='138' cy='469' r='3'/%3E%3Ccircle cx='276' cy='464' r='3'/%3E%3Ccircle cx='350' cy='417' r='3'/%3E%3Ccircle cx='516' cy='466' r='3'/%3E%3Ccircle cx='630' cy='413' r='3'/%3E%3Ccircle cx='801' cy='463' r='3'/%3E%3Ccircle cx='938' cy='455' r='3'/%3E%3Ccircle cx='1086' cy='408' r='3'/%3E%3Ccircle cx='1241' cy='451' r='3'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat;
	-webkit-mask-image: linear-gradient(90deg, transparent 15%, #000 85%); mask-image: linear-gradient(90deg, transparent 15%, #000 85%); pointer-events: none; }
.em-cta::after { content: ""; position: absolute; z-index: 2; right: 40px; top: -30px; width: 70px; height: 70px; border-radius: 50%; background: #ee6649; }
.em-cta-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; }
.em-cta-marker { display: block; font-family: 'Permanent Marker', cursive; font-size: 20px; line-height: 1.3; color: #bce3c9; margin-bottom: 8px; }
.em-cta h2 { display: inline-block; font-family: Dosis, sans-serif; font-weight: 500; font-size: clamp(28px, 3vw, 38px); line-height: 1.15; letter-spacing: .02em;
	text-transform: uppercase; color: #fff !important; margin: 0 0 14px !important; padding-bottom: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 410 14' preserveAspectRatio='none'%3E%3Cpath d='M2 10 C 123.0 5, 278.8 4.5, 408 7.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 100% 14px no-repeat; }
.em-cta p { font-family: Dosis, sans-serif; font-size: 19px; line-height: 1.5; letter-spacing: .01em; opacity: .92; max-width: 640px; margin: 0; color: #fff; }
.em-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.em-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 13px 20px; border: 2px solid transparent; border-radius: 5px;
	font-family: Dosis, sans-serif; font-weight: 700; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; white-space: nowrap;
	text-decoration: none !important; transition: background .15s, color .15s, border-color .15s; }
.em-btn-coral { background: #ee6649; border-color: #ee6649; color: #fff !important; }
.em-btn-coral:hover { background: transparent; border-color: #ee6649; color: #ee6649 !important; }
.em-cta .em-btn-coral:hover { background: #fff; border-color: #fff; color: #ee6649 !important; }
.em-btn-ghost { background: transparent; border-color: #fff; color: #fff !important; }
.em-btn-ghost:hover { background: #fff; color: #376e64 !important; }
@media (max-width: 1000px) { .em-cta-inner { grid-template-columns: 1fr; } .em-cta-actions { justify-content: flex-start; } }

/* 8. Breadcrumb in a hero/banner – same as /glossary/: Home / Section / Page (white, current page in mint). */
.em-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-family: 'Open Sans', sans-serif; font-size: 12px; letter-spacing: .02em; color: rgba(255,255,255,.6); margin: -24px 0 48px; }
.em-crumbs a { color: rgba(255,255,255,.75) !important; font-size: 12px; text-decoration: none !important; }
.em-crumbs a:hover { opacity: 1; text-decoration: underline !important; }
.em-crumbs .sep { opacity: .6; }
.em-crumbs [aria-current] { color: rgba(255,255,255,.6); }

/* 9. CTA heading line draws itself (left to right) when the band scrolls into view – as on /glossary/.
   The class em-anim is set by functions-em-site.php; without JavaScript the line is simply visible. */
.em-anim .em-cta h2 { background-size: 0% 14px; transition: background-size 1.4s cubic-bezier(.6,.05,.3,1) .2s; }
.em-anim .em-cta h2.is-drawn { background-size: 100% 14px; }
@media (prefers-reduced-motion: reduce) { .em-anim .em-cta h2 { background-size: 100% 14px; transition: none; } }

/* 10. Line break per sentence in short texts on wide screens; on small screens the text just flows. */
@media (max-width: 760px) { br.em-br { display: none; } }

/* 11. FAQ – [em_faq] shortcode (em-faq.php). Same look on service pages, event pages and articles. */
.emfaq{--c:#ee6649;--g:#43ac8c;--d:#376e64;--line:#e3dfdb;margin:var(--em-section) 0;font-family:'Open Sans',sans-serif;color:#333}
.emfaq *{box-sizing:border-box}
.emfaq-head{margin:0 0 26px}
.emfaq .emfaq-kicker{display:flex;align-items:center;gap:12px;font-family:Dosis,sans-serif;font-weight:700;font-size:13px;letter-spacing:.2em;color:var(--c);margin:0 0 10px}
.emfaq .emfaq-kicker::before{content:"";width:32px;height:4px;border-radius:4px;background:var(--c)}  /* rounded like the line in the EM logo */
.emfaq .emfaq-title{font-family:Dosis,sans-serif;font-weight:500;text-transform:uppercase;font-size:clamp(26px,3vw,34px);line-height:1.15;letter-spacing:.02em;color:var(--d);margin:0 0 10px}
.emfaq .emfaq-intro{font-size:16px;line-height:1.7;color:#555;margin:0;max-width:680px}
.emfaq-list{border-top:1px solid var(--line)}
.emfaq-item{border-bottom:1px solid var(--line)}
.emfaq-item[open]{box-shadow:inset 3px 0 0 var(--c)}
.emfaq .emfaq-q{list-style:none;cursor:pointer;display:flex;align-items:center;gap:20px;padding:20px 16px 20px 20px;margin:0}
.emfaq .emfaq-q::-webkit-details-marker{display:none}
.emfaq .emfaq-q::marker{content:""}
.emfaq .emfaq-q:focus-visible{outline:2px solid var(--c);outline-offset:-2px}
.emfaq .emfaq-num{flex:none;min-width:44px;font-family:Dosis,sans-serif;font-weight:500;font-size:34px;line-height:1;color:var(--g)}
.emfaq .emfaq-qt{flex:1;margin:0;font-family:Dosis,sans-serif;font-weight:600;font-size:19px;line-height:1.3;letter-spacing:.03em;text-transform:uppercase;color:#1d1d1d}
.emfaq .emfaq-icon{flex:none;position:relative;width:16px;height:16px}
.emfaq .emfaq-icon::before,.emfaq .emfaq-icon::after{content:"";position:absolute;left:0;top:7px;width:16px;height:2px;background:var(--c);transition:transform .2s}
.emfaq .emfaq-icon::after{transform:rotate(90deg)}
.emfaq-item[open] .emfaq-icon::after{transform:rotate(0)}
.emfaq .emfaq-a{padding:0 20px 22px 84px;max-width:960px;font-size:15.5px;line-height:1.75}
.emfaq .emfaq-a p{margin:0 0 12px}
.emfaq .emfaq-a ul,.emfaq .emfaq-a ol{margin:0 0 12px 20px}
.emfaq-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:28px}
.emfaq-cta p{margin:0;font-family:Dosis,sans-serif;font-size:22px;text-transform:uppercase;color:var(--d)}
@media(max-width:640px){.emfaq .emfaq-q{gap:12px;padding:16px 8px 16px 12px}.emfaq .emfaq-num{min-width:34px;font-size:26px}.emfaq .emfaq-qt{font-size:16px}.emfaq .emfaq-a{padding:0 12px 18px 12px}}
@media(prefers-reduced-motion:reduce){.emfaq .emfaq-icon::before,.emfaq .emfaq-icon::after{transition:none}}

/* 12. WHITE SPACE BETWEEN SECTIONS – one rule for the whole site (30-10-2026).
   Every block (FAQ, CTA band, team, intro …) gets the same space above and below: --em-section.
   Change the number here, never per block. */
:root{--em-section:120px}
@media(max-width:800px){:root{--em-section:72px}}

/* ==========================================================================
   13 · ARTIKELEN (News & Insights) – alles binnen <div class="em-article">
   EM Group, versie 12 · 03-11-2026. Volgorde bovenaan: breadcrumb, H1, headerbeeld, byline met datum. Vervangt de hele oude sectie 13.
   Standaard: intro = .em-intro--answer, quote = .em-quote--marker (zonder lijnen),
   vergelijkingstabel = .em-table--compare, gewone tabel = .em-table--word.
   ========================================================================== */
body .em-article{--em-teal:#43AC8C;--em-coral:#EE6649;--em-mint:#BCE3C9;--em-dark:#376E64;--em-creme:#F7F5F4;--em-line:#E2E2E2;--em-ink:#1D1D1B}

/* tekst: uitgevuld op desktop, links op mobiel (uitvullen geeft daar gaten) */
body .em-article p,body .em-article li{color:#444;text-align:justify;-webkit-hyphens:manual;hyphens:manual}
@media (max-width:767px){body .em-article p,body .em-article li{text-align:left;-webkit-hyphens:manual;hyphens:manual}}

/* koppen: H2 groen hoofdletters, H3 donkergroen kleiner – ruim wit eronder (FAQ houdt eigen stijl) */
body .em-article h2:not(.emfaq-title){text-wrap:balance;font-family:'Dosis',sans-serif;font-weight:400;font-size:30px;line-height:1.25;letter-spacing:0;text-transform:uppercase;color:var(--em-teal);margin:64px 0 24px}
body .em-article h3:not(.emfaq-qt){font-family:'Dosis',sans-serif;font-weight:500;font-size:21px;line-height:1.3;letter-spacing:0;text-transform:uppercase;color:var(--em-dark);margin:40px 0 16px}
body .em-article [id]{scroll-margin-top:120px}
@media (max-width:767px){body .em-article h2:not(.emfaq-title){font-size:24px;margin-top:48px}body .em-article h3:not(.emfaq-qt){font-size:18px}}

/* gedeelde label/kicker met EM-streepje – altijd ruim wit eronder */
body .em-article .em-label,body .em-article .emfaq-kicker{display:flex;align-items:center;gap:10px;margin:0 0 22px;font-family:'Dosis',sans-serif;font-weight:600;font-size:16px!important;line-height:1;letter-spacing:.08em;text-transform:uppercase;color:var(--em-dark);text-align:left}
body .em-article .em-label::before{content:"";width:28px;height:4px;border-radius:4px;background:currentColor;flex:none}
/* streepje heeft altijd de kleur van de tekst ernaast; labels donkergroen, alleen FAQ coral */
body .em-article .emfaq-kicker{color:var(--em-coral)!important}

/* byline bovenaan (namen donkergroen, coral bij hover) */
body .em-article .em-byline{font-family:'Dosis',sans-serif;font-size:16px;color:#888;text-align:left!important;margin:0 0 72px}
body .em-article .em-byline a{color:var(--em-dark)!important;text-decoration:none!important;font-weight:600}
body .em-article .em-byline a:hover{color:var(--em-coral)!important}
body .em-article .em-byline .em-date{color:#888}

/* inhoudsopgave: geen coral links, label donkergroen, ruimte boven en onder de titel */
body .em-article .em-toc{background:var(--em-creme);border-radius:5px;padding:36px 36px 28px;margin:0 0 48px}
body .em-article .em-toc .em-label{color:var(--em-dark);margin-bottom:24px}
body .em-article .em-toc ol{columns:2;column-gap:44px;margin:0;padding:0;list-style:none;counter-reset:emtoc}
body .em-article .em-toc li{break-inside:avoid;text-align:left;margin:0 0 10px;font-size:inherit;line-height:1.5;display:flex;gap:12px;counter-increment:emtoc}
body .em-article .em-toc li::before{content:counter(emtoc,decimal-leading-zero);flex:none;min-width:22px;font-family:'Dosis',sans-serif;font-weight:600;font-size:15px;line-height:inherit;color:var(--em-teal)}
body .em-article .em-toc a{color:#444!important;text-decoration:none!important}
body .em-article .em-toc a:hover{color:var(--em-coral)!important}
@media (max-width:767px){body .em-article .em-toc ol{columns:1}body .em-article .em-toc{padding:28px 22px 20px}}

/* INTRO – "The short answer": schuin handschrift, zwarte tekst, coral bol */
body .em-article .em-intro{margin:0 0 40px}
body .em-article .em-intro p{margin:0;font-size:inherit;line-height:inherit;color:var(--em-ink)}
/* "The short answer": rustig, zonder vlak en zonder bol – alleen een staand EM-streepje links (headerbeeld erboven draagt al de kleur) */
body .em-article .em-intro--answer{position:relative;padding:4px 0 4px 30px;background:none}
body .em-article .em-intro--answer::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:4px;border-radius:4px;background:var(--em-teal)}
/* oude versie met vlak + coral bol (voor artikelen zonder headerbeeld): class em-intro--filled erbij */
body .em-article .em-intro--answer.em-intro--filled{overflow:hidden;background:#EEF7F2;border-radius:5px;padding:38px 40px 36px}
body .em-article .em-intro--answer.em-intro--filled::before{content:none}
body .em-article .em-intro--answer.em-intro--filled::after{content:"";position:absolute;right:-22px;top:-22px;width:70px;height:70px;border-radius:50%;background:var(--em-coral)}
body .em-article .em-intro--creme{background:var(--em-creme)}

body .em-article .em-intro .em-intro-hand{display:block;width:max-content;max-width:100%;font-family:'Permanent Marker',cursive;font-size:21px;line-height:1.1;color:var(--em-teal)!important;margin:0 0 20px!important;transform:rotate(-5deg);transform-origin:left bottom;text-align:left!important}
/* (oude varianten, mag blijven) */
body .em-article .em-intro--line{position:relative;padding-left:26px}
body .em-article .em-intro--line::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:4px;border-radius:4px;background:var(--em-teal)}
body .em-article .em-intro--box{background:var(--em-creme);border-radius:5px;padding:30px 34px}
@media (max-width:767px){body .em-article .em-intro--answer.em-intro--filled,body .em-article .em-intro--box{padding:30px 22px 26px}body .em-article .em-intro--answer{padding-left:22px}}

/* PULLQUOTE – reset thema-blockquote */
body .em-article blockquote.em-quote{border:0;margin:48px 0;padding:0;background:none;quotes:none;font-style:normal}
body .em-article blockquote.em-quote::before{content:none}
body .em-article .em-quote p{margin:0;text-align:left;font-family:'Dosis',sans-serif;letter-spacing:0}
/* B (standaard): handgeschreven aanhalingsteken, gecentreerd tussen mint lijnen */
body .em-article blockquote.em-quote--marker{border:0;padding:8px 10%;text-align:center}
body .em-article blockquote.em-quote--marker::before{content:"\201C";display:block;font-family:'Permanent Marker',cursive;font-size:44px;line-height:.8;color:var(--em-mint);height:26px}
body .em-article .em-quote--marker p{text-align:center;font-weight:400;font-size:22px;line-height:1.45;text-transform:uppercase;color:var(--em-dark)}
/* Permanent Marker oogt kleiner dan Dosis-kapitalen: 1.3× zodat het even groot lijkt */
body .em-article .em-quote .em-hl{font-family:'Permanent Marker',cursive;font-weight:400;font-size:1.3em;line-height:1;text-transform:none;color:var(--em-coral)}
/* A: coral lijntje · C: donkergroene kaart (reserve) */
body .em-article blockquote.em-quote--line{position:relative;padding-left:26px}
body .em-article blockquote.em-quote--line::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:4px;border-radius:4px;background:var(--em-coral)}
body .em-article .em-quote--line p{font-weight:300;font-size:25px;line-height:1.4;color:var(--em-dark)}
body .em-article .em-quote--line .em-hl{font-family:inherit;font-size:1em;color:inherit}
body .em-article blockquote.em-quote--card{position:relative;border-radius:5px;padding:44px 48px 42px;background:radial-gradient(circle at 100% 0,rgba(67,172,140,.55),transparent 55%),var(--em-dark)}
body .em-article .em-quote--card p{font-weight:300;font-size:26px;line-height:1.4;color:#fff}
body .em-article .em-quote--card .em-hl{color:var(--em-mint)}
@media (max-width:767px){body .em-article .em-quote p{font-size:21px!important}body .em-article blockquote.em-quote--marker{padding:8px 4%}}

/* TABELLEN – grijze lijnen */
body .em-article .em-table-wrap{overflow-x:auto;margin:36px 0;-webkit-overflow-scrolling:touch}
body .em-article table.em-table{width:100%;min-width:520px;border-collapse:collapse;border-spacing:0;margin:0;font-size:15px;line-height:1.5;background:#fff}
body .em-article table.em-table th,body .em-article table.em-table td{text-align:left;vertical-align:top;padding:14px 16px}
body .em-article table.em-table th{font-family:'Dosis',sans-serif;font-weight:600;font-size:15px;letter-spacing:.04em;text-transform:uppercase}
/* gewone tabel: donkergroene kopbalk, grijze omlijning, crème zebra */
body .em-article .em-table--word{border:1px solid var(--em-line)}
body .em-article .em-table--word th{background:var(--em-dark);color:#fff;border:1px solid var(--em-dark)}
body .em-article .em-table--word td{border:1px solid var(--em-line)}
body .em-article .em-table--word tbody tr:nth-child(even) td{background:var(--em-creme)}
/* vergelijkingstabel: twee kolomkoppen (crème / groen), coral lijn, grijze lijnen */
body .em-article .em-table-wrap--compare{border:1px solid var(--em-line);border-radius:5px}
body .em-article .em-table--compare th{background:var(--em-creme);color:var(--em-dark);border-bottom:3px solid var(--em-coral)}
body .em-article .em-table--compare th+th{background:var(--em-teal);color:#fff}
body .em-article .em-table--compare td{border-bottom:1px solid var(--em-line);color:#666}
body .em-article .em-table--compare td+td{border-left:1px solid var(--em-line);color:var(--em-dark);font-weight:600}
body .em-article .em-table--compare tbody tr:last-child td{border-bottom:0}
body .em-article .em-table--compare tbody tr:hover td{background:#FBFAF9}

/* AFBEELDING in tekst (lege src = niets zichtbaar) */
body .em-article .em-figure{margin:36px 0}
body .em-article .em-figure:has(img[src=""]){display:none}
body .em-article .em-figure img{display:block;width:100%;height:auto;border-radius:5px}
body .em-article .em-figure figcaption{font-size:13px;color:#999;margin-top:10px;text-align:left}

/* AUTEURSKAART */
body .em-article .em-author{display:flex;gap:30px;align-items:flex-start;border-top:1px solid var(--em-line);border-bottom:1px solid var(--em-line);padding:40px 0;margin:64px 0 0}
body .em-article .em-author img{width:112px;height:112px;flex:none;border-radius:50%;object-fit:cover;object-position:top;background:var(--em-creme)}
body .em-article .em-author img[src=""]{display:none}
body .em-article .em-author p{margin:0;text-align:left}
body .em-article .em-author .em-label{margin-bottom:20px}
body .em-article .em-author-name{font-family:'Dosis',sans-serif;font-size:21px;font-weight:500;line-height:1.2;text-transform:uppercase}
body .em-article .em-author-name a{color:var(--em-dark)!important;text-decoration:none!important}
body .em-article .em-author-name a:hover{color:var(--em-coral)!important}
body .em-article .em-author-role{font-size:inherit;color:#777;margin-top:8px!important}
body .em-article .em-author-review{font-size:14px;color:#999;margin-top:16px!important}
body .em-article .em-author-bio{font-size:inherit;line-height:1.7;color:#555;margin-top:16px!important;text-align:justify!important}
body .em-article .em-author-links{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:14px!important;font-family:'Dosis',sans-serif;font-weight:600;font-size:15px;letter-spacing:.08em;text-transform:uppercase}
body .em-article .em-author-links a{color:var(--em-dark)!important;text-decoration:none!important}
body .em-article .em-author-links a:hover{color:var(--em-coral)!important}
@media (max-width:767px){body .em-article .em-author{flex-direction:column;align-items:flex-start;gap:20px}body .em-article .em-author-bio{text-align:left!important}}

/* HIGHLIGHT-BLOKKEN elders in de tekst: .em-intro--line of .em-intro--box mogen ook midden in het artikel
   (bv. een kernpunt). Label in een box: <p class="em-label">…</p> – ruimte eronder zit in .em-label. */
body .em-article .em-intro--box .em-label{margin-bottom:20px}
body .em-article * + .em-intro{margin-top:40px}

/* CTA-BAND onder het artikel – zelfde look als /glossary/ ("NEED EXPERT GUIDANCE?"), binnen de tekstkolom */
body .em-article .em-acta{position:relative;overflow:hidden;border-radius:5px;margin:64px 0 0;padding:52px 48px;color:#fff;background:linear-gradient(115deg,#376e64 35%,#43ac8c 130%)}
body .em-article .em-acta-net{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 15%,#000 85%);mask-image:linear-gradient(90deg,transparent 15%,#000 85%)}
body .em-article .em-acta-inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:32px;align-items:center}
body .em-article .em-acta p{margin:0;text-align:left;color:#fff}
body .em-article .em-acta-marker{font-family:'Permanent Marker',cursive;font-size:20px;line-height:1.3;color:var(--em-mint)!important;margin-bottom:8px!important}
body .em-article .em-acta-title{display:inline-block;position:relative;padding-bottom:16px;margin-bottom:18px!important;font-family:'Dosis',sans-serif;font-weight:500;font-size:30px;line-height:1.2;letter-spacing:.02em;text-transform:uppercase}
body .em-article .em-acta-doodle{position:absolute;left:-2px;bottom:0;width:calc(100% + 8px);height:14px;overflow:visible}
body .em-article .em-acta-doodle path{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
/* lijntje tekent zich van links naar rechts zodra de band in beeld komt: hetzelfde script als de groene CTA-banden
   (functions.php 3b zet html.em-anim en .is-drawn op .em-acta-title). Zonder script staat het lijntje er gewoon. */
html.em-anim body .em-article .em-acta-title .em-acta-doodle path{stroke-dashoffset:1}
html.em-anim body .em-article .em-acta-title.is-drawn .em-acta-doodle path{transition:stroke-dashoffset 1.4s cubic-bezier(.6,.05,.3,1) .2s;stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){body .em-article .em-acta-doodle path{stroke-dashoffset:0!important;transition:none!important}}
body .em-article .em-acta-text{font-family:'Dosis',sans-serif;font-size:19px;line-height:1.5;opacity:.92;max-width:460px}
body .em-article .em-acta-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}
body .em-article .em-acta-actions a{text-decoration:none!important}
@media (max-width:1000px){body .em-article .em-acta-inner{grid-template-columns:1fr}body .em-article .em-acta-actions{justify-content:flex-start}}
@media (max-width:767px){body .em-article .em-acta{padding:44px 22px 36px}}

/* BRONNEN – helemaal onderaan */
body .em-article .em-sources{margin:40px 0 0;font-size:14px;color:#888}
body .em-article .em-sources .em-label{color:var(--em-dark);margin-bottom:20px}
body .em-article .em-sources ul{margin:0;padding-left:18px}
body .em-article .em-sources li{text-align:left;margin:0 0 6px}

/* geen bol in de CTA-band van artikelen */
body .em-article .em-acta::after{content:none!important;display:none!important}

/* ÉÉN LETTERSCHAAL – alles in het artikel volgt deze maten
   koppen H2 30 · H3/quote/auteur 21–22 · labels met EM-streepje 16 · lopende tekst = thema · klein 14 (bronnen, bijschrift, reviewed by) */
body .em-article .emfaq-kicker::before{content:"";width:28px;height:4px;border-radius:4px;background:currentColor;flex:none}
body .em-article .em-sources{font-size:14px}

/* SUBTITEL MET STREEPJE ERONDER (voor andere pagina's/posts, zoals "WHY OUR CLIENTS CHOOSE US")
   gebruik: <h2 class="em-sub">…</h2> · kleur streepje = groen; .em-sub--coral of .em-sub--dark voor een andere kleur */
body .em-sub::after{content:"";display:block;width:64px;height:4px;border-radius:4px;background:var(--em-teal,#43AC8C);margin-top:20px}
body .em-sub--coral::after{background:#EE6649}
body .em-sub--dark::after{background:#376E64}
body .em-sub[style*="center"]::after,body .em-sub--center::after{margin-left:auto;margin-right:auto}

/* HEADERBEELD bovenaan het artikel (het brede beeld, niet de vierkante thumbnail)
   De uitgelichte afbeelding (vierkant) is alleen voor News & Insights en wordt in het artikel zelf verborgen. */
body:has(.em-article) img.wp-post-image{display:none}
body .em-article .em-hero{margin:16px 0 22px}
body .em-article .em-hero img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;border-radius:5px}
body .em-article .em-hero:has(img[src=""]){display:none}

/* tabellen op mobiel: gewone tabel met kopbalk, iets kleiner zodat twee kolommen op het scherm passen */
@media (max-width:767px){
  body .em-article .em-table-wrap{overflow-x:auto}
  body .em-article table.em-table{min-width:0;font-size:13px;line-height:1.45}
  body .em-article table.em-table th,body .em-article table.em-table td{padding:10px 10px;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere}
  body .em-article table.em-table th{font-size:12px;letter-spacing:.03em}
}

/* ==========================================================================
   14 · RONDOM ARTIKELEN – breadcrumb, delen + "Keep reading" (gemaakt door em-article-extras.php)
   EM Group, 03-11-2026. Plakken onder sectie 13 in em-site.css.
   ========================================================================== */
body .em-after{--em-teal:#43AC8C;--em-coral:#EE6649;--em-dark:#376E64;--em-creme:#F7F5F4;--em-line:#E2E2E2;margin:64px 0 0}
body .em-after .em-label{display:flex;align-items:center;gap:10px;margin:0 0 22px;font-family:'Dosis',sans-serif;font-weight:600;font-size:16px;line-height:1;letter-spacing:.08em;text-transform:uppercase;color:var(--em-dark);text-align:left}
body .em-after .em-label::before{content:"";width:28px;height:4px;border-radius:4px;background:currentColor;flex:none}
body .em-after a{text-decoration:none!important}

/* delen */
body .em-after .em-share{display:flex;align-items:center;flex-wrap:wrap;gap:16px 28px;padding:28px 0;border-top:1px solid var(--em-line);border-bottom:1px solid var(--em-line)}
body .em-after .em-share .em-label{margin:0}
body .em-after .em-share-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
body .em-after .em-share-btn{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid var(--em-line);background:#fff;color:var(--em-dark)!important;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
body .em-after .em-share-btn svg{width:18px;height:18px;fill:currentColor}
body .em-after .em-share-btn:hover,body .em-after .em-share-btn:focus-visible{background:var(--em-coral);border-color:var(--em-coral);color:#fff!important}
body .em-after .em-share-btn.is-copied{background:var(--em-teal);border-color:var(--em-teal);color:#fff!important}
body .em-after .em-share-msg{font-family:'Dosis',sans-serif;font-size:14px;color:var(--em-teal);margin-left:6px}

/* keep reading – kaarten in N&I-stijl (crème, coral lijn bij hover, Read more met pijl) */
body .em-after .em-rel{margin:64px 0 0}
body .em-after .em-rel-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 24px;flex-wrap:wrap;margin:0 0 28px}
body .em-after .em-rel-title{margin:0;font-family:'Dosis',sans-serif;font-weight:400;font-size:30px;line-height:1.25;letter-spacing:0;text-transform:uppercase;color:var(--em-teal)}
body .em-after .em-rel-all{display:inline-flex;align-items:center;gap:8px;font-family:'Dosis',sans-serif;font-weight:600;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--em-dark)!important}
body .em-after .em-rel-all:hover{color:var(--em-coral)!important}
body .em-after .em-rel-all svg,body .em-after .em-rel-more svg{width:16px;height:16px;fill:currentColor;transition:transform .3s ease}
body .em-after .em-rel-all:hover svg,body .em-after .em-rel-link:hover .em-rel-more svg{transform:translateX(4px)}
body .em-after .em-rel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:28px}
body .em-after .em-rel-card{background:var(--em-creme);margin:0}
body .em-after .em-rel-link{display:flex;flex-direction:column;height:100%;border-top:3px solid transparent;color:inherit!important;transition:border-color .15s}
body .em-after .em-rel-link:hover{border-top-color:var(--em-coral)}
body .em-after .em-rel-img{display:block;aspect-ratio:1/1;overflow:hidden;background:var(--em-creme)}
body .em-after .em-rel-img img,body .em-after .em-rel-img img.wp-post-image{display:block!important;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
body .em-after .em-rel-link:hover .em-rel-img img{transform:scale(1.03)}
body .em-after .em-rel-body{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px}
body .em-after .em-rel-meta{font-size:13px;line-height:1.4;color:#6b6b6b;margin:0 0 10px}
body .em-after .em-rel-h{margin:0 0 18px;font-family:'Dosis',sans-serif;font-weight:600;font-size:20px;line-height:1.3;letter-spacing:0;text-transform:none;color:#333;transition:color .15s}
body .em-after .em-rel-link:hover .em-rel-h{color:var(--em-dark)}
body .em-after .em-rel-more{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-family:'Dosis',sans-serif;font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--em-coral)}
@media (max-width:767px){body .em-after .em-rel-title{font-size:24px}body .em-after .em-rel-grid{grid-template-columns:1fr}}

/* breadcrumb boven de artikeltitel (Yoast) – zelfde opbouw als /glossary/, op wit */
body.single-post .em-crumbs{display:block;margin:0 0 40px;font-family:'Open Sans',sans-serif;font-size:13px;line-height:1.5;letter-spacing:.02em;color:#6b6b6b}
body.single-post .em-crumbs span{display:inline}
body.single-post .em-crumbs,body.single-post .em-crumbs *{font-size:13px!important;font-weight:400!important}
body.single-post .em-crumbs a{color:#6b6b6b!important;text-decoration:none!important}
body.single-post .em-crumbs a:hover{color:var(--em-coral,#EE6649)!important}
body.single-post .em-crumbs .sep{margin:0 8px;color:#BCE3C9}
body.single-post .em-crumbs .breadcrumb_last,body.single-post .em-crumbs [aria-current]{color:#376E64}

/* artikeltitel (H1) in hoofdletters, zoals de oudere artikelen en de tekst in het headerbeeld */
body.single-post:has(.em-article) h1{text-transform:uppercase;letter-spacing:0;text-wrap:balance}

/* zijbalk bij nieuwe artikelen: geen categorielijst, wel de expertkaart [em_expert_card] */
body:has(.em-article) .widget_categories{display:none}
body .em-expert{background:#F7F5F4;border-radius:5px;padding:32px 28px;text-align:left}
body .em-expert img{display:block;width:88px;height:88px;border-radius:50%;object-fit:cover;object-position:top;margin:0 0 20px}
body .em-expert p{margin:0}
body .em-expert-kicker{display:flex;align-items:center;gap:10px;font-family:'Dosis',sans-serif;font-weight:600;font-size:16px;line-height:1;letter-spacing:.08em;text-transform:uppercase;color:#376E64;margin-bottom:16px!important}
body .em-expert-kicker::before{content:"";width:28px;height:4px;border-radius:4px;background:currentColor;flex:none}
body .em-expert-name{font-family:'Dosis',sans-serif;font-weight:500;font-size:21px;line-height:1.2;text-transform:uppercase}
body .em-expert-name a{color:#376E64!important;text-decoration:none!important}
body .em-expert-name a:hover{color:#EE6649!important}
body .em-expert-role{font-size:14px;color:#777;margin-top:6px!important}
body .em-expert-text{font-size:15px;line-height:1.6;color:#555;margin:18px 0 22px!important}
body .em-expert .em-btn{display:flex;width:100%;text-decoration:none!important}

/* zijbalk van het thema bij nieuwe artikelen: geen witte rand en geen schaduw rond de expertkaart */
body:has(.em-article) [class*="sidebar"]:has(> .widget .em-expert){background:none!important;box-shadow:none!important;border:0!important;padding:0!important}
body:has(.em-article) .widget:has(.em-expert){margin:0!important;padding:0!important;background:none!important;box-shadow:none!important;border:0!important}
body:has(.em-article) [class*="sidebar"]:has(> .widget .em-expert)::before,body:has(.em-article) [class*="sidebar"]:has(> .widget .em-expert)::after{display:none!important}
/* meescrollen: gebeurt met een klein script (em-article-extras.php), werkt ook met de kolommen van Kallyas */

/* inhoudsopgave in de zijbalk (desktop), onder de expertkaart */
body .em-toc.is-side{background:#F7F5F4;border-radius:5px;padding:28px 26px 20px;margin:20px 0 0}
body .em-toc.is-side .em-label{display:flex;align-items:center;gap:10px;margin:0 0 18px;font-family:'Dosis',sans-serif;font-weight:600;font-size:16px;line-height:1;letter-spacing:.08em;text-transform:uppercase;color:#376E64}
body .em-toc.is-side .em-label::before{content:"";width:28px;height:4px;border-radius:4px;background:currentColor;flex:none}
body .em-toc.is-side ol{columns:1;margin:0;padding:0;list-style:none;counter-reset:emtoc}
body .em-toc.is-side li{display:flex;gap:10px;margin:0 0 10px;font-size:14px;line-height:1.45;text-align:left;counter-increment:emtoc}
body .em-toc.is-side li::before{content:counter(emtoc,decimal-leading-zero);flex:none;min-width:20px;font-family:'Dosis',sans-serif;font-weight:600;font-size:14px;color:#43AC8C}
body .em-toc.is-side a{color:#555!important;text-decoration:none!important}
body .em-toc.is-side a:hover{color:#EE6649!important}
body .em-toc a.is-active{color:#376E64!important}
body .em-toc.is-side li:has(a.is-active)::before{color:#EE6649}

/* zijbalk: de expertkaart scrolt gewoon mee weg, de inhoudsopgave blijft staan (altijd helemaal zichtbaar).
   Het script zet html.em-sticky-css alleen als het thema sticky niet blokkeert. */
@media (min-width:1000px){
html.em-sticky-css .em-side-row{display:flex;align-items:stretch}
html.em-sticky-css .em-side-row::before,html.em-sticky-css .em-side-row::after{display:none}
html.em-sticky-css .em-side-col{float:none;align-self:stretch;display:flex;flex-direction:column}
html.em-sticky-css .em-side{flex:1 0 auto;display:block}
html.em-sticky-css .em-side .em-toc.is-side{position:sticky;top:120px;display:flex;flex-direction:column;max-height:calc(100vh - 140px)}
html.em-sticky-css .em-side .em-toc.is-side ol{overflow-y:auto;min-height:0;padding-right:6px;scrollbar-width:thin;scrollbar-color:#BCE3C9 transparent}
}
/* zijbalk begint gelijk met de breadcrumb */
@media (min-width:1000px){body:has(.em-article) .em-side-col{padding-top:var(--em-side-offset,0px)}}

/* MOBIEL */
@media (max-width:999px){
  body:has(.em-article) .widget:has(.em-expert){display:none}          /* expertkaart staat al als auteurskaart in het artikel */
  body.single-post .em-crumbs{margin-bottom:24px}
}
@media (max-width:767px){
  body.single-post .em-crumbs .breadcrumb_last,body.single-post .em-crumbs .sep:has(+ .breadcrumb_last){display:none}   /* huidige titel niet herhalen: staat er direct onder als H1 */
}