/* ==========================================================
   Roomcility juridisch
   Lange teksten met een inhoudsopgave die meeloopt en
   genummerde artikelen. Voor voorwaarden, privacy en SLA.
   ========================================================== */

.rc-jr { --rc-jr-bg: var(--rc-bg); --rc-jr-text: #3B4660; --rc-jr-mark: #FFF1C2; background: var(--rc-jr-bg); color: var(--rc-ink); }
.rc-jr__wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; }

/* ── Kop ── */
.rc-jr__intro { padding: 110px 0 46px; }
.rc-jr__hand { margin: 0 0 8px; font-size: 30px; color: var(--rc-ink-2); transform: rotate(-4deg); transform-origin: 0 50%; }
.rc-jr__h1 { margin: 0; font-size: clamp(38px, 4.2vw, 58px); line-height: 1.05; font-weight: 800; letter-spacing: -.035em; color: var(--rc-ink); }
.rc-jr__lead { max-width: 60ch; margin: 18px 0 0; font-size: 17.5px; line-height: 1.65; color: var(--rc-ink-2); }
.rc-jr__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.rc-jr__meta span { padding: 6px 14px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(28, 36, 64, .05); font-size: 13px; font-weight: 600; color: var(--rc-ink-2); }

/* ── Inhoud ── */
.rc-jr__body { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 56px; align-items: start; padding-bottom: 110px; }
.rc-jr.no-toc .rc-jr__body { grid-template-columns: minmax(0, 1fr); }
.rc-jr__toc { position: sticky; top: 110px; padding: 18px 10px; border-radius: 20px; background: #fff; box-shadow: var(--rc-shadow); }
.rc-jr__toc b { display: block; margin: 0 12px 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9AA6BD; }
.rc-jr__toc ol { max-height: calc(100vh - 220px); margin: 0; padding: 0; list-style: none; overflow: auto; counter-reset: rcjrt; }
.rc-jr__toc li { counter-increment: rcjrt; }
.rc-jr__toc a { display: flex; gap: 10px; padding: 7px 12px; border-radius: 10px; font-size: 14px; line-height: 1.35; text-decoration: none; color: var(--rc-ink-2); transition: background .2s, color .2s; }
.rc-jr.is-numbered .rc-jr__toc a::before { content: counter(rcjrt); flex-shrink: 0; width: 18px; font-weight: 700; color: #B9C6DC; }
.rc-jr__toc a:hover { color: var(--rc-ink); }
.rc-jr__toc a.is-on { background: var(--rc-accent-soft); color: var(--rc-accent); font-weight: 600; }
.rc-jr__toc a.is-on::before { color: var(--rc-accent); }

.rc-jr__doc { max-width: 760px; padding: 44px 52px; border-radius: 28px; background: #fff; box-shadow: var(--rc-shadow); counter-reset: rcjra; }
.rc-jr__doc section { padding: 30px 0; border-bottom: 1px solid #EEF2F8; scroll-margin-top: 110px; counter-increment: rcjra; }
.rc-jr__doc section:first-child { padding-top: 0; }
.rc-jr__doc section:last-child { padding-bottom: 0; border-bottom: 0; }
.rc-jr__doc h2 { display: flex; align-items: baseline; gap: 14px; margin: 0 0 12px; font-size: 21px; line-height: 1.3; letter-spacing: -.015em; color: var(--rc-ink); }
.rc-jr.is-numbered .rc-jr__doc h2::before { content: counter(rcjra); min-width: 22px; font-family: var(--rc-hand); font-size: 28px; font-weight: 600; color: var(--rc-pen); }
.rc-jr.is-numbered .rc-jr__text { margin-left: 36px; }
.rc-jr__text p { margin: 0 0 12px; font-size: 16px; line-height: 1.75; color: var(--rc-jr-text); }
.rc-jr__text > :last-child { margin-bottom: 0; }
.rc-jr__text ul { margin: 4px 0 14px; padding: 0; list-style: none; }
.rc-jr__text li { position: relative; margin: 0 0 8px; padding-left: 22px; font-size: 16px; line-height: 1.7; color: var(--rc-jr-text); }
.rc-jr__text li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 8px; height: 8px; border-radius: 50%; background: var(--rc-accent-soft); box-shadow: inset 0 0 0 2px var(--rc-accent); }
.rc-jr__text b,
.rc-jr__text strong { color: var(--rc-ink); }
.rc-jr__text a,
.rc-jr__rel a { color: var(--rc-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.rc-jr__text a:hover,
.rc-jr__rel a:hover { color: var(--rc-ink); }
.rc-jr__text mark { padding: 1px 6px; border-radius: 5px; background: var(--rc-jr-mark); font-weight: 600; color: #7A5A00; }
.rc-jr__text table { width: 100%; margin: 6px 0 16px; border-collapse: separate; border-spacing: 0; border-radius: 14px; box-shadow: inset 0 0 0 1px #E6ECF5; font-size: 14.5px; overflow: hidden; }
.rc-jr__text th,
.rc-jr__text td { padding: 11px 14px; border-bottom: 1px solid #EEF2F8; text-align: left; }
.rc-jr__text th { background: #F6F8FC; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #7C8AA5; }
.rc-jr__text tr:last-child td { border-bottom: 0; }
.rc-jr__text td:first-child { font-weight: 700; color: var(--rc-ink); }
.rc-jr__rel { margin: 22px 0 0; font-size: 13.5px; color: var(--rc-ink-2); }

/* ── Tablet ── */
@media (max-width: 1100px) {
	.rc-jr__wrap { padding: 0 20px; }
	.rc-jr__intro { padding: 84px 0 30px; }
	.rc-jr__h1 { font-size: 36px; }
	.rc-jr__lead { font-size: 16px; }
	.rc-jr__body { grid-template-columns: 1fr; gap: 18px; padding-bottom: 80px; }
	.rc-jr__toc { position: static; padding: 14px 8px; }
	.rc-jr__toc ol { display: grid; grid-template-columns: 1fr 1fr; max-height: none; }
	.rc-jr__doc { padding: 28px 22px; border-radius: 22px; }
}

/* ── Mobiel ── */
@media (max-width: 600px) {
	.rc-jr__toc ol { grid-template-columns: 1fr; }
	.rc-jr__doc { padding: 24px 16px; }
	.rc-jr.is-numbered .rc-jr__text { margin-left: 0; }
	.rc-jr__doc h2 { font-size: 19px; }
	.rc-jr__text table { font-size: 12px; table-layout: fixed; }
	.rc-jr__text th,
	.rc-jr__text td { padding: 8px 6px; word-break: break-word; }
	.rc-jr__text th { font-size: 10px; letter-spacing: 0; }
}