/* ═══════════════════════════════════════════════════════════════
   ORJ Header — volledig zelfvoorzienend. Het X/Pro-thema blijft
   actief als omhulsel (projectbesluit 1); gerichte resets met
   !important voorkomen dat thema-CSS doorlekt. Tokens komen uit
   orj-cta-system.css (:root).
   ═══════════════════════════════════════════════════════════════ */

/* Let op: deze reset heeft gelijke specificiteit als losse klassen uit
   orj-cta-system.css en laadt daarna — kritieke regels dáár (zoals
   knop-padding) staan daarom op !important. Nooit stilzwijgend
   uitbreiden met properties die het knopsysteem nodig heeft. */
.orj-hdr, .orj-hdr * { margin: 0; padding: 0; box-sizing: border-box; }

/* Eén lettertype in de hele header, afgedwongen op élk element.
   Alleen font-family op .orj-hdr zetten is niet genoeg: dat werkt
   via overerving, en overerving verliest van ELKE themaregel die
   een kind rechtstreeks aanspreekt (Pro doet dat voor span, a, p en
   button). Zonder deze regel rendert de topbar in drie fonten. */
.orj-hdr, .orj-hdr *,
.orj-mobbar, .orj-mobbar * {
	font-family: var(--orj-font) !important;
	font-style: normal !important;
	letter-spacing: normal;
	text-transform: none !important;
}
.orj-hdr a { text-decoration: none !important; }
.orj-hdr button { background: none; border: 0; font: inherit; cursor: pointer; color: inherit; }
.orj-hdr svg { display: block; flex-shrink: 0; }

/* position: fixed, niet sticky. In de Pro/Cornerstone-omgeving
   breekt sticky op een voorouder met overflow of transform; dit is
   dezelfde aanpak als testroute-core. header.js publiceert
   --hdr-total-h en corrigeert de bodyruimte. */
.orj-hdr {
	position: fixed !important;
	top: 0; left: 0; right: 0;
	z-index: 9990 !important;
	background: #fff;
	font-family: var(--orj-font);
	transition: box-shadow .3s ease;
}
html.orj-gescrold .orj-hdr { box-shadow: 0 4px 16px rgba(17, 24, 39, .06); }

/* Leeslijn (B-129, gezet door modules/artikel): een lijn van 2 px op de onderrand van de header die
   toont hoe ver de lezer in het artikel is. De artikelmodule zet html.orj-leeslijn-klein (alleen onder
   960: daar is de scrollbalk onzichtbaar en de inhoudsopgave ingeklapt) of html.orj-leeslijn-altijd en
   publiceert --orj-leesvoortgang (0 tot 1); de header tekent, zodat de lijn de echte onderrand volgt
   (73 in rust, 56 gescrold, adminbalk meegerekend). Merkgroen: grafisch (§2b), nooit oranje (actie).
   Geen spoor (een grijze baan over de volle breedte is een tweede haarlijn), geen transition (de waarde
   is scrollgekoppeld, een overgang loopt achter), weg zolang het mobiele menu open is. */
.orj-hdr::after { content: none; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--orj-green); transform-origin: left center; transform: scaleX(var(--orj-leesvoortgang, 0)); pointer-events: none; will-change: transform; }
html.orj-leeslijn-altijd .orj-hdr::after { content: ""; }
@media (max-width: 959px) { html.orj-leeslijn-klein .orj-hdr::after { content: ""; } }
.orj-hdr.is-menu-open::after, html.orj-calc-focus .orj-hdr::after { content: none; }

/* Ruimte onder de vaste header. De waarde is de VOLLEDIGE hoogte
   (topbar open) en verandert niet bij scrollen — anders zou de
   pagina-inhoud verspringen zodra de topbar inklapt. */
body { padding-top: var(--hdr-total-h, 104px) !important; }

/* WordPress-adminbalk: 32 px, onder 783 px 46 px (testroute-les). */
body.admin-bar .orj-hdr { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .orj-hdr { top: 46px; }
}

.orj-hdr :focus-visible {
	outline: 2px solid var(--orj-green) !important;
	outline-offset: 2px;
}

/* ── Topbar ────────────────────────────────────────────────── */
.orj-topbar {
	background: var(--orj-mint);
	max-height: 44px;   /* rustig: 37px incl. haarlijn, zie hieronder */
	overflow: hidden;
	transition: max-height .3s ease, opacity .3s ease;
}
html.orj-gescrold .orj-topbar { max-height: 0; opacity: 0; }

.orj-topbar-in {
	max-width: var(--orj-container, 1200px);   /* gelijk aan de secties (§10): één linkerlijn voor de hele pagina */
	margin: 0 auto;
	height: 40px;
	padding: 0 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	/* Eén maat én één gewicht voor alles in de balk. Niets staat hier
	   vet: de topbar is nutsinformatie en mag niet concurreren met de
	   hero en de CTA. Aanklikbaarheid blijkt uit de onderstreping bij
	   hover en focus, de staat uit de kleur. */
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1;
}
.orj-topbar-links { display: flex; align-items: center; gap: 18px; min-width: 0; }
.orj-topbar-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--orj-ink) !important;   /* §2b: tekst is ink */
	white-space: nowrap;
}
.orj-topbar-item:hover { text-decoration: underline !important; text-underline-offset: 3px; }
.orj-topbar-notitie { font-weight: 400; color: var(--orj-muted); }

/* ── Bereikbaarheid ────────────────────────────────────────── */
.orj-ber {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--orj-ink);
	white-space: nowrap;
}
.orj-ber-ico { display: inline-flex; color: var(--orj-ink); }
.orj-ber-stip {
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--orj-green);
	flex-shrink: 0;
}
.orj-ber.is-dicht .orj-ber-stip { background: #9ca3af; }
.orj-ber.is-dicht,
.orj-ber.is-dicht .orj-ber-ico { color: var(--orj-muted); }  /* kleur draagt de staat, niet het gewicht */
.orj-ber--chip {
	height: 28px;
	padding: 0 11px;
	border-radius: 8px;                 /* geen pill: radius-ladder */
	background: #fff;
	border: 1px solid rgba(17, 24, 39, .08);
	font-size: 13px;
}

/* ── Taalwissel ────────────────────────────────────────────── */
.orj-taal-wissel {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 3px;
	border-radius: 8px;
	border: 1px solid rgba(17, 24, 39, .10);
	background: #fff;
}
.orj-taal-wissel--compact { height: 28px; }
.orj-taal-optie {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 100%;
	padding: 0 9px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--orj-muted) !important;
	white-space: nowrap;
}
.orj-taal-wissel--compact .orj-taal-optie { font-size: 12.5px; }
.orj-taal-optie:hover { color: var(--orj-ink) !important; }
.orj-taal-optie.is-aan {
	background: var(--orj-mint);
	color: var(--orj-ink) !important;
	font-weight: 600;
	cursor: default;
}
.orj-taal-vlag { display: block; height: 12px; width: auto; border-radius: 2px; box-shadow: 0 0 0 1px rgba(17,24,39,.12); }

.orj-taal { position: relative; display: inline-flex; }
.orj-taal-knop {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	padding: 0 10px;
	border-radius: 8px;
	border: 1px solid rgba(17, 24, 39, .10);
	background: #fff;
	color: var(--orj-ink);
	font-size: 13.5px;
	font-weight: 500;
}
.orj-taal-chev { display: inline-flex; color: var(--orj-muted); transition: transform .2s ease; }
.orj-taal.is-open .orj-taal-chev { transform: rotate(180deg); }
.orj-taal-menu {
	position: absolute; top: 100%; right: 0; margin-top: 6px;
	min-width: 170px; padding: 6px;
	background: #fff; border-radius: 12px;
	box-shadow: 0 8px 24px rgba(17, 24, 39, .08), 0 0 0 1px rgba(17, 24, 39, .07);
	opacity: 0; visibility: hidden; transform: translateY(4px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
	z-index: 9992;
}
.orj-taal.is-open .orj-taal-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.orj-taal-item {
	display: flex; align-items: center; gap: 10px;
	padding: 9px 10px; border-radius: 8px;
	font-size: 14px; font-weight: 600;
	color: var(--orj-ink) !important;
}
.orj-taal-item:hover { background: var(--orj-mint); }
.orj-taal-item.is-aan { background: var(--orj-mint); }
.orj-taal-item span { flex: 1; }
.orj-taal-vink { display: inline-flex; color: var(--orj-green); flex: 0 0 auto !important; }
.orj-topbar-div { width: 1px; height: 14px; background: #c9dfd6; flex-shrink: 0; }

/* Grijs haarlijntje: verbindt onderdelen van één boodschap.
   Daarom stiller dan de oude scheiding tussen losse blokken. */
.orj-pijp {
	width: 1px;
	height: 13px;
	flex-shrink: 0;
	background: rgba(17, 24, 39, .18);
}

/* Claims. Bij minder ruimte valt de hoogste prio als eerste weg —
   dat is de langste tekst. "Gratis" blijft het langst staan: kort
   én het sterkste bezwaar-wegnemende woord (§6 copy-regels). */
.orj-claim {
	display: inline-flex;
	align-items: center;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--orj-ink);
	white-space: nowrap;
}
/* Het haarlijntje hoort bij de claim zelf. Verdwijnt de claim op een
   smal scherm, dan verdwijnt zijn scheiding vanzelf mee — geen
   losse elementen die achterblijven, en geen :has() nodig. */
.orj-claim::before {
	content: '';
	width: 1px;
	height: 13px;
	margin: 0 16px 0 0;
	flex-shrink: 0;
	background: rgba(17, 24, 39, .18);
}

/* WhatsApp als boodschap: de hele regel is de link. Het officiële
   glyph houdt zijn merkgroen — dat is de enige kleur in de balk en
   precies daar waar een derde partij zijn kleur voorschrijft. */
.orj-wa-zin {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--orj-ink) !important;
	white-space: nowrap;
}
.orj-wa-zin:hover .orj-wa-tekst { text-decoration: underline; text-underline-offset: 3px; }

/* ── Rustige balk: één wit vlak met de navigatie ───────────
   Geen mintvulling meer: twee gestapelde kleurbanden lezen als
   sjabloon, één samenhangend wit vlak als één object. De haarlijn
   en de gedempte tekst (#4b5563, 7,6:1) nemen de afbakening over.
   Mint verhuist naar waar het werk doet: de vlakken in de content. */
.orj-topbar--rustig {
	background: #fff;
	border-bottom: 1px solid #eef0f2;
}
.orj-topbar--rustig .orj-topbar-in {
	justify-content: space-between;
	height: 36px;
	font-size: 13px;
	color: #4b5563;
}
.orj-topbar--rustig .orj-rustig,
.orj-topbar--rustig .orj-taal-link { color: #4b5563 !important; font-size: 13px; }
.orj-topbar--rustig.orj-topbar--melding { border-bottom: 0; }
.orj-rustig {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--orj-ink) !important;
	white-space: nowrap;
	min-width: 0;
}
.orj-rustig-tekst { overflow: hidden; text-overflow: ellipsis; }
.orj-rustig:hover .orj-rustig-tekst { text-decoration: underline; text-underline-offset: 3px; }

/* Topbar uit, melding aan: de strook bestaat alleen voor de melding.
   Wordt de melding weggeklikt, dan verdwijnt de strook helemaal in
   plaats van een lege balk achter te laten. */
.orj-topbar--alleen-melding:not(.orj-topbar--melding) { display: none; }

/* ── Meldingsmodus: dezelfde strook, tijdelijk overgenomen ──
   Nooit een tweede balk erboven; dat kost 80 px chroom vóór het
   logo. De normale inhoud blijft in de HTML staan en komt terug
   zodra de melding is weggeklikt. */
.orj-melding { display: none; }
.orj-topbar--melding { background: var(--orj-green-dark) !important; }
.orj-topbar--melding .orj-topbar-in { display: none; }
.orj-topbar--melding .orj-melding {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	max-width: var(--orj-container, 1200px);   /* gelijk aan de secties (§10): één linkerlijn voor de hele pagina */
	margin: 0 auto;
	height: 40px;
	padding: 0 24px;
}
.orj-topbar--melding.orj-topbar--actie { background: var(--orj-cta) !important; }
.orj-melding-link {
	font-size: 13.5px;
	font-weight: 500;
	color: #fff !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
a.orj-melding-link:hover { text-decoration: underline !important; text-underline-offset: 3px; }
.orj-melding-weg {
	display: inline-flex;
	padding: 4px;
	border-radius: 6px;
	color: rgba(255, 255, 255, .85);
	flex-shrink: 0;
}
.orj-melding-weg:hover { color: #fff; background: rgba(255, 255, 255, .12); }

/* ── Claims naast de CTA (hero) ────────────────────────────── */
.orj-claims {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	font-family: var(--orj-font);
}
.orj-claims span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	color: var(--orj-ink);
}
.orj-claims svg { color: var(--orj-green); flex-shrink: 0; }

/* ── Topbar-stijlen ────────────────────────────────────────── */
.orj-topbar--vlak { background: var(--orj-green-dark); }
.orj-topbar--vlak .orj-topbar-item,
.orj-topbar--vlak .orj-claim,
.orj-topbar--vlak .orj-ber,
.orj-topbar--vlak .orj-ber-ico,
.orj-topbar--vlak .orj-taal-link { color: #ffffff !important; }
.orj-topbar--vlak .orj-pijp,
.orj-topbar--vlak .orj-claim::before { background: rgba(255, 255, 255, .28); }
.orj-topbar--vlak .orj-ber.is-dicht,
.orj-topbar--vlak .orj-ber.is-dicht .orj-ber-ico { color: rgba(255, 255, 255, .78) !important; }

/* Kale taalwissel: alleen de taal waar je naartoe kunt. */
.orj-taal-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--orj-ink) !important;
	white-space: nowrap;
}
.orj-taal-link:hover { text-decoration: underline !important; text-underline-offset: 3px; }
/* In de navigatie: dezelfde padding en maat als een menu-item, zodat
   "English" op gelijke afstand van "Contact" staat als de items onderling. */
.orj-nav .orj-taal-link { padding: 8px 14px; font-size: 14px; font-weight: 600 !important; letter-spacing: -.005em; color: var(--orj-ink) !important; }   /* B-038: als menu-item */
.orj-topbar-rechts { display: flex; align-items: center; gap: 12px; }

/* Trustpilot: het lockup staat in orj-cta-system.css (B-032, één
   maatstaf --tp-h). Hier alleen de schaal voor deze plek. */
.orj-topbar .orj-tp { --tp-h: 13px; }

/* ── Hoofdbalk ─────────────────────────────────────────────── */
/* B-038 (v2.7.0): balk 73 px hoog met een zachte schaduw in plaats van een
   haarlijn (referentie, gemeten: 5 px verloop). Padding 14,5 + merkteken 44 + 14,5. */
.orj-bar { background: #fff; border-bottom: 0; box-shadow: 0 1px 6px rgba(17, 24, 39, .10); position: relative; }
.orj-bar-in {
	max-width: var(--orj-container, 1200px);   /* gelijk aan de secties (§10): één linkerlijn voor de hele pagina */
	margin: 0 auto;
	padding: 14.5px 24px;   /* B-038: 73 px totaal (was 18 → 81 incl. haarlijn) */
	display: flex;
	align-items: center;
	justify-content: flex-start;   /* logo links; nav + CTA als groep rechts (referentiepatroon) */
	gap: 16px;
	transition: padding .3s ease;
}
html.orj-gescrold .orj-bar-in { padding-top: 10px; padding-bottom: 10px; }
/* Gescrold krimpt het merkteken mee (44 → 36) en bepaalt de hoogte:
   36 + 2×10 = 56 px; de sm-CTA (40) past daarin. De inline hoogte uit de
   instelling wordt hier overschreven. */
html.orj-gescrold .orj-merk { height: 36px !important; }
.orj-merk { transition: height .3s ease; }
/* Ritme in de balk (B-038): menu-items op gelijke afstand (20 gap + 2×14
   padding = 48 px tussen de teksten, referentie gemeten 46–50), en 48 px
   van de laatste tekst tot de CTA (14 padding + 34 marge). Eén maat, geen
   uitzonderingen. Bovenaan komt daar de gereserveerde breedte van het
   lange label bij (B-027). */
.orj-bar-in .orj-nav { margin-left: auto; gap: 20px; }
.orj-bar-in .orj-bar-cta { margin-left: 34px; }

/* Logo */
.orj-logo { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.orj-logo img { display: block; width: auto; }
.orj-logo-dot {
	border-radius: 50%;
	background: var(--orj-green); color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 11px; font-weight: 700; letter-spacing: .02em;
	flex-shrink: 0;
}
.orj-merk { display: block; flex-shrink: 0; width: auto; }
/* Inline merkteken: erft zijn kleur via currentColor, dus hetzelfde
   bestand werkt op wit, op mint en op een donkere balk. */
/* Tot 48 px kost het merkteken geen extra balkhoogte: de CTA-knop
   (48 px) bepaalt die toch al. Daarboven groeit de balk mee. */
.orj-merk--svg { display: inline-flex; color: var(--orj-green); }
.orj-merk--svg svg { display: block; height: 100%; width: auto; }

/* Woordmerk als levende tekst: loopt mee met de sitetypografie en
   blijft scherp op elk scherm. Twee zettingen, één maat per zetting
   zodat het merk het anker blijft en de tekst er net onder valt. */
.orj-logo-woord { color: #4b5563; white-space: nowrap; }        /* gemeten op de referentie: #585858 → dichtstbijzijnde paletgrijs, 7,6:1 */
.orj-logo-woord span { color: #8b93a1; }                        /* .NL: gemeten #828282; logotype, dus vrijgesteld van de tekstnorm */
/* Subtiel woordmerk (team, v2.4.2): gewicht 400 i.p.v. 500 (streek/kapitaal
   0,12 gemeten op de referentie), spatiëring .08em i.p.v. .06, 16 px. */
.orj-logo-woord--caps {
	font-size: 16px;
	font-weight: 400 !important;
	letter-spacing: .08em !important;
}
.orj-logo-woord--zin {
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -.01em !important;
	color: var(--orj-ink);
}
.orj-logo-woord--zin span { font-weight: 400; }

/* Navigatie */
.orj-nav { display: flex; align-items: center; gap: 4px; }
.orj-nav-item { position: relative; }
/* Scope .orj-hdr erbij: de button-reset (.orj-hdr button{font:inherit},
   specificiteit 0-1-1) won anders van .orj-nav-knop (0-1-0) en maakte
   dropdown-knoppen lichter dan gewone links (bug t/m v1.0.3). */
.orj-hdr .orj-nav-knop {
	display: inline-flex; align-items: center; gap: 4px;
	padding: 8px 14px; border-radius: 8px;
	font-size: 14px; font-weight: 600; letter-spacing: -.005em;   /* B-038: 14/600 (was 15/500, B-020) — referentie gemeten */
	color: var(--orj-ink) !important;
	transition: color .15s ease;
}
/* Ook de CTA valt onder één lettertype; het systeembestand zet de
   maat, hier alleen bevestigen dat het thema er niet tussen komt. */
.orj-hdr .orj-cta { font-family: var(--orj-font) !important; }
.orj-nav-knop:hover { color: var(--orj-green-dark) !important; }
/* Actieve pagina: de ORJ-streep onder het item — dezelfde signatuur als
   onder "gratis" in de hero en onder de sectiekoppen. */
.orj-nav-item { position: relative; }
.orj-nav-item.is-actief::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 3px; border-radius: 2px; background: var(--orj-green); }
.orj-nav-item.is-actief > .orj-nav-knop { color: var(--orj-ink) !important; }
.orj-chev { transition: transform .2s ease; color: var(--orj-ink); }  /* B-038: ink en dikker (was muted, B-020) */
.orj-chev svg { stroke-width: 3.5; }   /* 3,5/24 × 15 px = 2,2 px lijn, referentie gemeten */
.orj-heeft-dd.is-open .orj-chev { transform: rotate(180deg); }

.orj-taal {
	display: inline-flex; align-items: center; gap: 4px;
	margin-left: 4px; padding: 6px 10px; border-radius: 999px;
	font-size: 14px; font-weight: 600; color: var(--orj-ink) !important;
}
.orj-taal:hover { color: var(--orj-green-dark) !important; }

/* Dropdown */
.orj-dd {
	position: absolute; left: 0; top: 100%;
	margin-top: 8px; width: 400px;
	background: #fff; border-radius: 16px; padding: 12px;
	/* Haarlijn + lichte schaduw in plaats van een wolk van 40px:
	   scherper en redactioneler. */
	box-shadow: 0 8px 24px rgba(17, 24, 39, .08), 0 0 0 1px rgba(17, 24, 39, .07);
	opacity: 0; visibility: hidden; transform: translateY(4px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	z-index: 9991;
}
/* Onzichtbare hover-brug over de 8px-marge: het aanwijsgebied is
   aaneengesloten, dus de muisweg knop → paneel kent geen "gat". */
.orj-dd::before {
	content: '';
	position: absolute;
	top: -10px; left: 0; right: 0;
	height: 10px;
}
/* B-101: het smalle submenu-paneel (288, tekstlijst) bestaat niet meer; beide dropdowns zijn hetzelfde paneel van 400. */
.orj-heeft-dd.is-open .orj-dd { opacity: 1; visibility: visible; transform: translateY(0); }

.orj-dd-groep { padding: 6px 12px 4px; font-size: 12px; font-weight: 600; color: var(--orj-muted); }
.orj-dd-lijn { height: 1px; background: #f3f4f6; margin: 8px 12px; }
.orj-dd-item {
	display: flex; align-items: flex-start; gap: 12px;
	padding: 12px; border-radius: 12px;
	transition: background .15s ease;
}
.orj-dd-item:hover { background: var(--orj-mint); }
/* Dienst-icoon: de homepage-spot in het klein (B-100). Geen tegel meer —
   de mint zit in de tekening zelf (30 px in een vak van 40). Vóór B-100
   stond hier een lijnicoon van 19 px in een minttegel van 38: de inkt
   was ±9 px breed, groen op mint 3,1:1, en rekenmachine en VSO lazen als
   hetzelfde icoon. Titel + omschrijving zijn 20 + 2 + 20 = 42 hoog, het
   vak 40: flex-start + 1 px zet de tekening optisch in het midden. */
.orj-dd-spot {
	width: 40px; height: 40px; flex: none;
	display: inline-flex; align-items: center; justify-content: center;
	margin-top: 1px;
}
.orj-dd-spot svg { display: block; }
.orj-dd-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.orj-dd-titel { font-size: 15px; font-weight: 600; color: var(--orj-ink); line-height: 1.35; }
/* Omschrijving: 400 − 2×12 (paneel) − 2×12 (rij) − 40 (spot) − 12 (gap) = 300 px
   tekst = ±41 tekens op 14 px Inter — de backend noemt die grens. */
.orj-dd-omschrijving { font-size: 14px; color: var(--orj-muted); line-height: 1.4; text-wrap: pretty; }
/* §2b: muted staat alleen op wit (op mint 4,3:1). Op de mint-hover
   verdonkert de omschrijving naar #4b5563 (6,8:1). */
.orj-dd-item:hover .orj-dd-omschrijving { color: #4b5563; }
/* Op de mint-rij wordt de mint ín de tekening wit, anders valt de vulling
   weg tegen de rij (gemeten: het VSO-document verloor zijn vlak). Zelfde
   wissel als de oude tegel (mint → wit), nu op het vlak van de spot. */
.orj-dd-item:hover .orj-dd-spot [fill="var(--orj-mint)"] { fill: #fff; }

/* Header-CTA 'stil' (standaard): bovenaan een tekstlink met pijl in
   ink, geen kader — tien centimeter lager staat immers al de oranje
   hero-knop en twee oranje elementen vechten om aandacht. Zodra de
   hero-CTA uit beeld scrolt, wordt dit de solid knop. Hij is dus
   nooit de énige CTA in beeld (ORJ-CTA-SYSTEM.md §3.2). */
.orj-hdr--cta-stil .orj-hdr-cta {
	background: transparent;
	border-color: transparent;
	/* §2b: green-dark is de kleur van tekstlinks — en dit is een tekstlink.
	   In ink las hij zonder topbar als vierde menu-item. */
	color: var(--orj-green-dark) !important;
	padding: 0 4px !important;
	transition: background .2s ease, border-color .2s ease, color .2s ease, padding .2s ease;
}
.orj-hdr--cta-stil .orj-hdr-cta:hover,
.orj-hdr--cta-stil .orj-hdr-cta:focus { background: transparent; border-color: transparent; color: var(--orj-green-dark) !important; text-decoration: underline !important; text-underline-offset: 4px; }
html.orj-gescrold .orj-hdr--cta-stil .orj-hdr-cta {
	background: var(--orj-cta);
	border-color: var(--orj-cta);
	color: #fff !important;
	padding: 0 18px !important;
}
html.orj-gescrold .orj-hdr--cta-stil .orj-hdr-cta:hover,
html.orj-gescrold .orj-hdr--cta-stil .orj-hdr-cta:focus {
	background: var(--orj-cta-hover);
	border-color: var(--orj-cta-hover);
}

/* Header-CTA 'swap' (standaard, B-027 · B-038): bovenaan een sm-knop (40) met
   2 px oranje kader en het label in de knopkleur zelf (referentie, gemeten;
   3,1:1 — bewust geaccepteerd in B-038, was #c4520a 4,6:1) — zelfde tint als
   de hero-knop = zelfde actie — en solid oranje zodra de hero-CTA uit beeld is.
   Het v2.4.1-besluit "zwarte tekst" werd nooit gerenderd en is ingetrokken.
   Breedte: het vak is altijd zo breed als het lange label (onzichtbare
   meetkopie in hetzelfde rastervak), de knop staat rechts — bij de
   labelwissel groeit hij naar links en verschuift de nav niet. */
.orj-bar-cta { display: grid; grid-template-columns: 1fr; justify-items: end; }
.orj-bar-cta > * { grid-area: 1 / 1; }
.orj-hdr-cta-meet { visibility: hidden; pointer-events: none; }
.orj-cta-lbl--lang { display: none; }
html.orj-gescrold .orj-hdr-cta--dyn .orj-cta-lbl--kort { display: none; }
html.orj-gescrold .orj-hdr-cta--dyn .orj-cta-lbl--lang { display: inline; }

/* Header-CTA: swap-gedrag via klassen (ORJ-CTA-SYSTEM.md §3.2) */
.orj-hdr--cta-swap .orj-hdr-cta,
.orj-hdr--cta-outline .orj-hdr-cta {
	background: #fff;
	color: var(--orj-cta) !important;
	border-color: var(--orj-cta);
}
.orj-hdr--cta-swap .orj-hdr-cta:hover,
.orj-hdr--cta-outline .orj-hdr-cta:hover { background: #fff4ec; }
html.orj-gescrold .orj-hdr--cta-swap .orj-hdr-cta {
	background: var(--orj-cta);
	color: #fff !important;
	border-color: var(--orj-cta);
}
html.orj-gescrold .orj-hdr--cta-swap .orj-hdr-cta:hover {
	background: var(--orj-cta-hover);
	border-color: var(--orj-cta-hover);
}

/* B-065 (v2.15.0): een andere solid primair in beeld (hero, VSO-balk) →
   header-CTA terug in de ruststand, ook na het scrollen. De klasse
   orj-cta-rust zet header.js; de specificiteit (0-4-1 / 0-5-1) ligt één
   klasse boven de gescrolde regels, zodat alleen de knop terugschakelt en
   topbar, schaduw en balkhoogte in de scrollstand blijven. Het korte label
   hoort erbij: "gratis" staat dan elders in beeld (B-027). */
html.orj-gescrold.orj-cta-rust .orj-hdr--cta-swap .orj-hdr-cta {
	background: #fff;
	color: var(--orj-cta) !important;
	border-color: var(--orj-cta);
}
html.orj-gescrold.orj-cta-rust .orj-hdr--cta-swap .orj-hdr-cta:hover { background: #fff4ec; border-color: var(--orj-cta); }
html.orj-gescrold.orj-cta-rust .orj-hdr--cta-stil .orj-hdr-cta {
	background: transparent;
	border-color: transparent;
	color: var(--orj-green-dark) !important;
	padding: 0 4px !important;
}
html.orj-gescrold.orj-cta-rust .orj-hdr--cta-stil .orj-hdr-cta:hover,
html.orj-gescrold.orj-cta-rust .orj-hdr--cta-stil .orj-hdr-cta:focus { background: transparent; border-color: transparent; }
html.orj-gescrold.orj-cta-rust .orj-hdr-cta--dyn .orj-cta-lbl--kort { display: inline; }
html.orj-gescrold.orj-cta-rust .orj-hdr-cta--dyn .orj-cta-lbl--lang { display: none; }

/* ── Mobiel ────────────────────────────────────────────────── */
.orj-mobiel-acties { display: none; align-items: center; gap: 8px; }
.orj-hamburger { padding: 8px; border-radius: 8px; color: var(--orj-ink); }
.orj-ham-dicht { display: none; }
.orj-hdr.is-menu-open .orj-ham-open { display: none; }
.orj-hdr.is-menu-open .orj-ham-dicht { display: block; }

/* B-102 (v2.27.0): het menu is een kolom — scrollvak + vaste knoprij.
   Maximale hoogte op --hdr-total-h (was een vaste 120: 47 px verspild nu
   de topbar uit staat); dvh waar de browser dat kent (iOS-balken).
   overscroll-behavior: scrollen in het menu lekt niet door naar de pagina. */
.orj-mobielmenu {
	display: none;
	position: absolute; left: 0; right: 0; top: 100%;
	background: #fff; border-top: 1px solid #f3f4f6;
	box-shadow: 0 12px 28px rgba(17, 24, 39, .10);
	padding: 0;
	max-height: calc(100vh - var(--hdr-total-h, 73px));
	max-height: calc(100dvh - var(--hdr-total-h, 73px));
	flex-direction: column;
	overscroll-behavior: contain;
	z-index: 9991;
}
.orj-hdr.is-menu-open .orj-mobielmenu { display: flex; }
.orj-mob-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 8px 12px 4px; }
/* In het mobiele menu staat alleen de titel naast de spot: centreren, geen 1 px.
   Rij 56 (was 64): padding 8 + spot 40 + 8, tikvlak ruim boven de 48. */
.orj-mobielmenu .orj-dd-item { align-items: center; padding: 8px 12px; }
.orj-mobielmenu .orj-dd-spot { margin-top: 0; }
.orj-mobielmenu .orj-dd-groep { padding: 4px 12px 2px; }   /* 25 → 22 */
/* Sectiekop "Onze diensten" en de uitklaprij "Hoe werkt het?": zelfde maat
   als een menu-item (15/600), zodat de drie niveaus — kop, groep, rij — lezen
   als kop (15/600 ink), groep (12/600 muted), rij (15/600 met spot). */
.orj-mob-kop { margin: 0; padding: 12px 12px 4px; font-size: 15px; font-weight: 600; color: var(--orj-ink); }
.orj-hdr .orj-mob-uitklap {
	display: flex; align-items: center; justify-content: space-between; width: 100%;
	padding: 12px; border-radius: 12px; border: 0; background: none; text-align: left;
	font-family: var(--orj-font); font-size: 15px; font-weight: 600; color: var(--orj-ink);
	cursor: pointer;
}
.orj-hdr .orj-mob-uitklap:hover { background: var(--orj-mint); }
.orj-mob-uitklap .orj-chev { transition: transform .2s ease; }
.orj-mob-uitklap[aria-expanded="true"] .orj-chev { transform: rotate(180deg); }
.orj-mob-uitklap-inhoud { padding-bottom: 4px; }
.orj-mob-uitklap-inhoud[hidden] { display: none; }
/* Huidige pagina (Baymard: 95% van de sites laat de locatie weg): mintrij,
   en de mint ín de spot wordt wit — dezelfde wissel als de hover. */
.orj-dd-item.is-huidig, .orj-mob-link.is-huidig { background: var(--orj-mint); }
.orj-dd-item.is-huidig .orj-dd-spot [fill="var(--orj-mint)"] { fill: #fff; }
.orj-dd-item.is-huidig .orj-dd-omschrijving { color: #4b5563; }

.orj-mob-link {
	display: block; padding: 12px; border-radius: 12px;
	font-size: 15px; font-weight: 600; color: var(--orj-ink) !important;
}
.orj-mob-link:hover { background: var(--orj-mint); }
.orj-mob-contact { padding: 4px 12px; }
.orj-mob-contact a {
	display: flex; align-items: center; gap: 8px;
	padding: 8px 0; font-size: 14px; font-weight: 600;
	color: var(--orj-green-dark) !important;
}
.orj-mob-taal { color: var(--orj-ink) !important; }
.orj-mob-ctarij { padding: 8px 12px 6px; }
/* B-102: de knoprij staat vast onder het scrollvak (duimzone, altijd in beeld). */
.orj-mob-ctarij--vast { flex: 0 0 auto; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid #f3f4f6; }

/* ── Wegvalvolgorde in de topbar ───────────────────────────
   Gemeten: telefoon 130 + volledige zin 340 + claim 230 +
   claim 85 + taal 55 + pijpen/ruimte 120 ≈ 960 px. Dat past in
   de container van 1104 px, maar niet daaronder.            */
@media (max-width: 1200px) {
	.orj-claim--p2 { display: none; }
}
@media (max-width: 1020px) {
	.orj-claim--p1 { display: none; }
}

/* ── Mobiele onderbalk (vaste actiebalk) ───────────────────── */
.orj-mobbar {
	display: none;
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 9989;
	gap: 8px;
	padding: 12px;
	background: rgba(255, 255, 255, .95);
	border-top: 1px solid var(--orj-mint);
	backdrop-filter: blur(6px);
	box-shadow: 0 -6px 20px rgba(17, 24, 39, .06);
}
.orj-mobbar-bel { flex: 0 0 auto; }
.orj-mobbar-cta { flex: 1; display: flex; }

/* ── Mobiel contactblok in het menu ────────────────────────── */
.orj-mob-blok {
	margin: 8px 0 0;
	padding: 10px 12px 12px;
	border-radius: 16px;   /* kaart (radius-ladder) */
	background: var(--orj-mint);
}
/* B-102: compact = één bereikbaarheidsregel boven de knoppen (de volzin is een instelling). */
.orj-mob-blok > .orj-ber { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; font-weight: 500; color: var(--orj-ink); }
.orj-mob-tijden {
	margin: 6px 0 10px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--orj-ink);   /* op mint nooit muted: haalt 4,3:1 niet */
}
.orj-mob-knoppen { display: flex; gap: 8px; }
.orj-mob-knoppen a {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 44px;
	border-radius: var(--orj-radius);
	background: #fff;
	color: var(--orj-ink) !important;
	font-size: 14px;
	font-weight: 600;
}
.orj-mob-taalrij { padding: 12px 8px 4px; }

@media (max-width: 959px) {   /* mobiel vanaf 960 — gelijk aan de secties (§12) */
	.orj-mobbar { display: flex; }
	body { padding-bottom: var(--orj-mobbar-h, 0px); }
	.orj-ber { font-size: 12px; }
	.orj-ber--chip { height: 22px; padding: 0 9px; font-size: 12px; }
	.orj-nav, .orj-bar-cta { display: none; }
	.orj-mobiel-acties { display: flex; }
	/* B-045 · B-049 · B-050: balk 73 (14,5 + merkteken 44 + 14,5 — het
	   merkteken is het inline-SVG met zijn ingestelde hoogte, geen .orj-logo-dot).
	   Lockup vult de balk zoals bij de referentie: woordmerk vloeiend,
	   (100vw − 130) / 16,4 — 16,4 px breedte per font-px, gemeten mét ".NL"
	   (v2.8.2 rekende met 14,25 zónder ".NL" en duwde de hamburger van het
	   scherm) — 16 px op 393, 14 op 360, 11,6 op 320; rechts blijft 16 px tot
	   het icoon. Vangnet: het logo mag krimpen en het woordmerk knipt af,
	   het menu-icoon krimpt nooit en valt nooit buiten beeld. Hamburger
	   flush rechts (margin-left: auto), icoon 24 met lijn 2,25, 12 van de rand. */
	.orj-bar-in { padding: 14.5px 12px; }
	.orj-logo { flex: 1 1 auto; min-width: 0; }
	.orj-logo-woord { overflow: hidden; text-overflow: clip; }
	.orj-logo-woord--caps { font-size: clamp(11px, 6.1vw - 7.9px, 16px); }
	.orj-mobiel-acties { margin-left: auto; margin-right: -8px; flex-shrink: 0; }
	.orj-hamburger svg { width: 24px; height: 24px; stroke-width: 2.25; }
	.orj-topbar-in { padding: 0 16px; height: 34px; }
	.orj-topbar { max-height: 36px; }
	.orj-topbar-item { font-size: 12px; }
	.orj-topbar-notitie { display: none; }
	.orj-topbar-links { gap: 12px; }
	.orj-topbar-div { display: none; }
	/* Alleen de topbar-variant compact; tot v2.5.1 raakte dit óók de
	   Trustpilot-regel in de hero (label en woordmerk weg onder 960). */
	.orj-topbar .orj-tp-label, .orj-topbar .orj-tp-naam, .orj-topbar .orj-tp-logo { display: none; }
	.orj-topbar .orj-tp { --tp-h: 16px; }
	.orj-topbar-rechts .orj-taal-wissel,
	.orj-topbar-rechts .orj-taal,
	.orj-topbar-link--taal,
	.orj-topbar-div--taal { display: none; }
	.orj-rustig { font-size: 12px; }
	.orj-melding-link { font-size: 12px; }
	.orj-topbar--melding .orj-melding { height: 34px; padding: 0 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.orj-hdr, .orj-topbar, .orj-bar-in, .orj-dd, .orj-chev { transition: none !important; }
}

/* ═══ B-079 · Calculatorpagina: focusstand en geen onderbalk ═══
   html.orj-calc-pagina staat op elke pagina met [orj_calculator]
   (modules/calculator, wp_head prio 1). html.orj-calc-focus komt van
   calculator.js na de eerste interactie: alleen het logo blijft, alle
   uitgangen gaan uit het zicht (topbar, navigatie, CTA, hamburger).
   Het logo blijft klikbaar (NN/g-conventie); de antwoorden blijven in de
   sessie bewaard, dus wegklikken kost niets. header.js meet de hoogte
   opnieuw via het resize-event dat calculator.js stuurt. */
html.orj-calc-pagina .orj-mobbar { display: none !important; }
html.orj-calc-pagina body { padding-bottom: 0 !important; }
html.orj-calc-focus .orj-topbar { display: none !important; }
html.orj-calc-focus .orj-nav, html.orj-calc-focus .orj-bar-cta, html.orj-calc-focus .orj-hamburger, html.orj-calc-focus .orj-mobiel-acties, html.orj-calc-focus .orj-taal-wissel { display: none !important; }
html.orj-calc-focus .orj-hdr { box-shadow: none; }