/* ==========================================================================
   Traject - een stappenplan in fasen op een landingspagina (bloktype "traject")

   Bewust een eigen, rustige opmaak los van de rest van landing.css: dit is een
   naslagstuk dat klanten bewaren en printen, geen verkooppagina. De opmaak is
   overgenomen van het stappenplan vrijstelling loonheffing en alles hangt onder
   .lp-traject, zodat er niets naar andere blokken lekt.
   ========================================================================== */

.lp-traject {
	--vlh-ink: #16243a; --vlh-muted: #5b6778; --vlh-line: #d5dbe3; --vlh-bg: #ffffff; --vlh-soft: #f4f6f9;
	--vlh-primary: #0f4c81; --vlh-primary-soft: #e6eef7;
	--vlh-warn: #b45309; --vlh-warn-soft: #fdf2e3;
	--vlh-ok: #1f7a4d; --vlh-ok-soft: #e5f4ec;
	--vlh-stop: #9f1d2b; --vlh-stop-soft: #fbe9eb;
	font: 16px/1.55 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: var(--vlh-ink); background: var(--vlh-bg);
	max-width: 860px; margin: 0 auto; padding: 32px 16px 48px;
}
.lp-traject * { box-sizing: border-box }
/* De koppen en alinea's van de site (blauw, dun, zwart) hier terug naar de eigen opmaak. */
.lp-traject h1, .lp-traject h2, .lp-traject h3 { color: var(--vlh-ink); font-family: inherit; font-weight: 700; letter-spacing: normal; text-transform: none }
.lp-traject p, .lp-traject li { color: inherit; font-size: inherit; line-height: inherit }
.lp-traject h1, .lp-traject .traject-titel { font-size: 1.75rem; line-height: 1.25; margin: 0 0 8px }
.lp-traject h2 { font-size: 1.15rem; margin: 0 }
.lp-traject p { margin: 0 0 12px }
.lp-traject .lead { color: var(--vlh-muted); font-size: 1.05rem; margin-bottom: 24px }

/* Tijdlijn */
.lp-traject .timeline { border: 1px solid var(--vlh-line); border-radius: 12px; padding: 18px; margin: 0 0 32px; background: var(--vlh-soft) }
.lp-traject .timeline-title { font-weight: 600; margin-bottom: 12px }
.lp-traject .months { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px }
.lp-traject .month { border-radius: 8px; padding: 10px 6px; text-align: center; font-size: .82rem; font-weight: 600 }
.lp-traject .month small { display: block; font-weight: 400; opacity: .85 }
.lp-traject .month.taxed { background: var(--vlh-warn-soft); color: var(--vlh-warn); border: 1px solid #f2d3a8 }
.lp-traject .month.net { background: var(--vlh-ok-soft); color: var(--vlh-ok); border: 1px solid #b9e0cb }
.lp-traject .timeline-note { font-size: .88rem; color: var(--vlh-muted); margin: 12px 0 0 }

/* Fases */
.lp-traject .phase { margin: 0 0 8px }
.lp-traject .phase-head { display: flex; align-items: center; gap: 12px; margin: 28px 0 14px }
.lp-traject .phase-num { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--vlh-primary); color: #fff; display: grid; place-items: center; font-weight: 700 }
.lp-traject .phase-when { color: var(--vlh-muted); font-size: .9rem }

/* Flow - een <ol>, dus de lijstopmaak van de browser eraf */
.lp-traject .flow { position: relative; list-style: none; padding: 0 0 0 17px; border-left: 2px solid var(--vlh-line); margin: 0 0 0 16px }
.lp-traject .step { position: relative; background: var(--vlh-bg); border: 1px solid var(--vlh-line); border-radius: 10px; padding: 14px 16px; margin: 0 0 14px 14px }
.lp-traject .step::before { content: ""; position: absolute; left: -23px; top: 20px; width: 10px; height: 10px; border-radius: 50%; background: var(--vlh-primary); border: 2px solid var(--vlh-bg) }
.lp-traject .step-who { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 99px; margin-bottom: 6px }
.lp-traject .who-klant { background: var(--vlh-primary-soft); color: var(--vlh-primary) }
.lp-traject .who-mw { background: #efe9fb; color: #5b3aa6 }
.lp-traject .who-bd { background: #eceff3; color: #3f4b5c }
.lp-traject .who-bank { background: #e8f3f3; color: #1d6a6a }
.lp-traject .step-title { font-size: 1rem; line-height: 1.55; font-weight: 600; margin: 0 0 4px }
.lp-traject .step p:last-child, .lp-traject .step ul:last-child { margin-bottom: 0 }
.lp-traject .step ul { margin: 6px 0 0; padding-left: 20px; list-style: disc }
.lp-traject .step li { margin: 2px 0 }

/* Beslissing */
.lp-traject .decision { border: 2px solid var(--vlh-primary); background: var(--vlh-primary-soft) }
.lp-traject .branches { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px }
.lp-traject .branch { border-radius: 8px; padding: 10px 12px; font-size: .92rem }
.lp-traject .branch b { display: block; margin-bottom: 2px }
.lp-traject .branch.yes { background: var(--vlh-ok-soft); border: 1px solid #b9e0cb }
.lp-traject .branch.no { background: var(--vlh-stop-soft); border: 1px solid #f0c3c9 }

.lp-traject .step.warn { border-color: #f2d3a8; background: var(--vlh-warn-soft) }
.lp-traject .step.warn::before { background: var(--vlh-warn) }
.lp-traject .step.done { border-color: #b9e0cb; background: var(--vlh-ok-soft) }
.lp-traject .step.done::before { background: var(--vlh-ok) }

/* Klapblokken */
.lp-traject details { border: 1px solid var(--vlh-line); border-radius: 10px; margin: 10px 0; background: var(--vlh-bg) }
.lp-traject summary { cursor: pointer; padding: 12px 16px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px }
.lp-traject summary::-webkit-details-marker { display: none }
.lp-traject summary::after { content: "+"; font-weight: 400; color: var(--vlh-muted) }
.lp-traject details[open] summary::after { content: "\2212" }
.lp-traject details > div { padding: 0 16px 14px }
.lp-traject .faq { margin-top: 36px }
.lp-traject .faq h2 { margin-bottom: 8px }
.lp-traject .actions { margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 10px }
.lp-traject .btn { display: inline-block; padding: 10px 16px; border-radius: 8px; border: 0; background: var(--vlh-primary); color: #fff; text-decoration: none; font: inherit; font-weight: 600; cursor: pointer }
.lp-traject .btn.ghost { background: transparent; color: var(--vlh-primary); border: 1px solid var(--vlh-primary) }
.lp-traject a.ext, .lp-traject .step a, .lp-traject .lead a, .lp-traject details a { color: var(--vlh-primary); text-decoration: underline; text-underline-offset: 2px }
.lp-traject .disclaimer { font-size: .82rem; color: var(--vlh-muted); margin-top: 28px; border-top: 1px solid var(--vlh-line); padding-top: 14px }

@media (max-width: 600px) {
	.lp-traject h1, .lp-traject .traject-titel { font-size: 1.45rem }
	.lp-traject .months { grid-template-columns: repeat(3, 1fr) }
	.lp-traject .branches { grid-template-columns: 1fr }
}

/* Printen (en "bewaren als PDF"): alleen het stappenplan, zonder menu, footer of andere blokken,
   en met alle vragen opengeklapt. */
@media print {
	body * { visibility: hidden }
	.lp-traject, .lp-traject * { visibility: visible }
	.lp-traject { position: absolute; left: 0; top: 0; width: 100%; max-width: none; padding: 0 }
	.lp-traject details { break-inside: avoid }
	.lp-traject details > div { display: block }
	.lp-traject .step, .lp-traject .timeline { break-inside: avoid }
	.lp-traject .actions { display: none }
}