/* ════════════════════════════════════════════════════════════════════════
 *  Testroute - Driving test e-book  ·  4.97.0
 *  Draagt de gedeelde trh-hero shell, letterlijk uit about.css (heroshell.py
 *  vergelijkt hem daarmee), en daarna de eigen treb- stijlen.
 *  !important overal = Cornerstone.
 * ════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

html{scroll-behavior:smooth !important}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto !important}}

/* ── shared root / tokens (identical to the other pillar pages) ── */
.trh-root{
	position:relative !important; left:50% !important; right:50% !important;
	margin-left:-50vw !important; margin-right:-50vw !important;
	width:100vw !important; max-width:100vw !important; overflow-x:clip !important;
	--c-navy:#0c1927 !important; --c-navy-2:#0f1d2c !important; --c-green:#03c988 !important; --c-green-d:#02a873 !important;
	/* The navy ladder for this page, one step per section. Same progression
	   the DTC pages use, so the whole site darkens and lightens in step. */
	--c-oefen:#122131 !important; --c-deep:#152536 !important; --c-close:#1b2e42 !important;
	--c-off:#f8f9fa !important; --r-lg:24px !important; --ease:cubic-bezier(.4,0,.2,1) !important;
	--line:rgba(255,255,255,.10) !important;
	font-family:'Inter', 'Inter Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif !important;
	-webkit-font-smoothing:antialiased !important; color:#fff !important; line-height:1.5 !important; background:#0d1b2a !important;
}
.trh-root *,.trh-root *::before,.trh-root *::after{box-sizing:border-box !important;margin:0 !important;padding:0 !important;text-transform:none !important}
.trh-root :focus-visible{outline:2px solid var(--c-green) !important;outline-offset:3px !important;border-radius:8px !important}

/* THE gutter: only .trh-w carries it. Single class (like road-signs), so the
   hero rule below (.trh-hero > .trh-w, 2 classes) OUTRANKS this and its top
   padding wins. The earlier .trh-root .trh-w.trh-w version was 3 classes and
   beat the hero rule, forcing padding:0 and killing the header clearance -
   that was the "no padding under the header" bug. */
.trh-w{max-width:1200px !important;margin:0 auto !important;padding:0 16px !important}
@media(min-width:700px){.trh-w{padding:0 32px !important}}

/* ── hero shell ── */
.trh-hero{background:var(--c-navy) !important;position:relative !important;overflow:hidden !important}
.trh-hero>.trh-w{max-width:1200px !important;margin:0 auto !important;padding:calc(var(--hdr-total-h,56px) + 20px) 16px clamp(44px, 6.5vh, 100px) !important}
@media(min-width:700px){.trh-hero>.trh-w{padding:calc(var(--hdr-total-h,56px) + 20px) 32px clamp(44px, 6.5vh, 100px) !important}}
@media(min-width:769px){.trh-hero>.trh-w{padding:calc(var(--hdr-total-h,72px) + 20px) 32px clamp(44px, 6.5vh, 100px) !important}}
@media(min-width:1100px){.trh-hero>.trh-w{padding:calc(var(--hdr-total-h,72px) + 24px) 32px clamp(44px, 6.5vh, 100px) !important}}

.trh-hero-grid{display:block !important;position:relative !important;z-index:2 !important}
@media(min-width:900px){.trh-hero-grid{display:grid !important;grid-template-columns:1.1fr .9fr !important;column-gap:56px !important;align-items:stretch !important}}
/* Top-aligned: the hero's calc(--hdr-total-h) top padding sits ABOVE the
   breadcrumb, then breadcrumb → H1 → intro → trust flow down from there. No
   min-height and no vertical centring - that pushed the breadcrumb into the
   middle and drove the row taller than the viewport, clipping the map. */
.trh-hero-left{position:relative !important;z-index:3 !important;display:flex !important;flex-direction:column !important;justify-content:flex-start !important;padding:0 0 8px !important}

.trh-hero-bread{display:none !important;font-size:12px !important;color:rgba(255,255,255,.55) !important;margin-bottom:clamp(1.5rem,1.2rem + 1.05vw,2rem) !important;align-items:center !important;gap:6px !important}
@media(min-width:700px){.trh-hero-bread{display:flex !important}}
.trh-hero-bread a{color:rgba(255,255,255,.55) !important;text-decoration:none !important}
.trh-hero-bread a:hover{color:#fff !important}
.trh-hero-bread-sep{color:rgba(255,255,255,.3) !important;flex:none !important}
.trh-hero-bread-cur{color:rgba(255,255,255,.8) !important;font-weight:500 !important}
.trh-hero-bread-back{display:inline-flex !important;align-items:center !important;gap:6px !important;margin:0 auto 2px -4px !important;padding:2px 4px 14px !important;font-size:13px !important;font-weight:500 !important;color:rgba(255,255,255,.55) !important;text-decoration:none !important}
@media(min-width:700px){.trh-hero-bread-back{display:none !important}}
.trh-hero-bread-back:hover{color:rgba(255,255,255,.82) !important}

/* H1 - v3.23 uniform one-line clamp, identical to the other pages */
.trh-hero-h1{max-width:600px !important;margin:0 0 clamp(.875rem,.65rem + .8vw,1.25rem) !important;letter-spacing:-.03em !important;line-height:1.08 !important;text-wrap:balance !important}
.trh-hero-lead{display:inline !important;font-size:clamp(1.75rem,calc((100vw - 32px) * 0.1142),2.875rem) !important;font-weight:700 !important;color:var(--c-off) !important;letter-spacing:-.03em !important;line-height:1.08 !important}
.trh-hero-intro{font-size:16.5px !important;color:rgba(255,255,255,.62) !important;line-height:1.65 !important;margin:0 0 clamp(1.75rem,.8rem + 1.55vw,2rem) !important;max-width:540px !important}
.trh-hero-vis{position:relative !important;display:none !important}
@media(min-width:900px){.trh-hero-vis{display:block !important}}

/* ── hub-kop: twee spans, één regel, zoals Manoeuvres en Test routes na
   v3.23. Daar staat de groene twee-delige kop nog bovenin de css, maar de
   uniforme regel lager in hetzelfde bestand wint: wat de bezoeker ziet is
   één witte regel. Groen is voor wat klikbaar is. ── */
.trh-hero-city{display:inline !important;font-size:clamp(1.75rem,calc((100vw - 32px) * 0.1142),2.875rem) !important;font-weight:700 !important;color:var(--c-off) !important;letter-spacing:-.03em !important;line-height:1.08 !important}

/* ════════════════════════════════════════════════════════════════════
 *  E-BOOK  ·  treb-
 *  Alles hieronder hangt aan .tr-ebook (0,2,0), één stap boven de
 *  root-reset .trh-root * (0,1,0): zie trap 1 in WORKSPACE.md.
 * ════════════════════════════════════════════════════════════════════ */
.tr-ebook .treb-kicker{display:block !important;font-size:var(--t-1,11px) !important;line-height:1.4 !important;font-weight:700 !important;letter-spacing:.12em !important;text-transform:uppercase !important;color:rgba(255,255,255,.34) !important;margin-bottom:16px !important}
.tr-ebook .treb-h2{font-size:30px !important;line-height:1.16 !important;font-weight:800 !important;color:#fff !important;letter-spacing:-.03em !important;margin-bottom:12px !important;text-wrap:balance !important}
@media(min-width:700px){.tr-ebook .treb-h2{font-size:36px !important}}
.tr-ebook .treb-sub{font-size:var(--t-5,15px) !important;line-height:1.65 !important;color:rgba(255,255,255,.62) !important;max-width:560px !important;margin-bottom:32px !important}
.tr-ebook .treb-sr{position:absolute !important;width:1px !important;height:1px !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;white-space:nowrap !important}

/* hero: knoppen en de regel eronder */
.tr-ebook .treb-ctas{display:flex !important;flex-wrap:wrap !important;align-items:center !important;gap:16px 24px !important}
.tr-ebook .treb-meta{display:flex !important;flex-wrap:wrap !important;align-items:center !important;gap:6px 12px !important;margin-top:28px !important;padding-top:18px !important;border-top:1px solid var(--line) !important;font-size:var(--t-3,13px) !important;color:rgba(255,255,255,.62) !important}
.tr-ebook .treb-meta-plans{display:inline-flex !important;align-items:center !important;gap:7px !important;color:rgba(255,255,255,.8) !important}
.tr-ebook .treb-meta-plans svg{color:var(--c-green) !important;flex:none !important}
.tr-ebook .treb-meta-sep{color:rgba(255,255,255,.3) !important}

/* hero: de omslag. De binnenlaag ligt absoluut, zodat het boek de rij
   niet hoger maakt dan de tekst links (zelfde opzet als de kaart op About). */
.tr-ebook .treb-vis-inner{position:absolute !important;inset:0 !important;display:flex !important;align-items:center !important;justify-content:center !important}
.tr-ebook .treb-vis-inner::before{content:"" !important;position:absolute !important;left:50% !important;top:50% !important;width:520px !important;height:420px !important;max-width:120% !important;transform:translate(-50%,-50%) !important;background:radial-gradient(ellipse at center,rgba(3,201,136,.11) 0%,rgba(3,201,136,0) 70%) !important;pointer-events:none !important}
.tr-ebook .treb-cover{position:relative !important;height:100% !important;max-height:430px !important;aspect-ratio:148/210 !important}
.tr-ebook .treb-cover-sheet{position:absolute !important;inset:0 !important;background:#e9ecef !important;border-radius:2px !important;transform:translate(14px,10px) rotate(3deg) !important;box-shadow:0 24px 48px rgba(0,0,0,.35) !important}
.tr-ebook .treb-cover .treb-pg{border-radius:2px !important;box-shadow:0 30px 60px rgba(0,0,0,.45) !important}

/* secties */
.tr-ebook .treb-sec{padding:72px 0 80px !important;background:var(--c-navy) !important}
.tr-ebook .treb-read{background:var(--c-navy-2) !important;scroll-margin-top:calc(var(--hdr-total-h,72px) + 16px) !important}
.tr-ebook .treb-why{background:var(--c-navy-2) !important}
.tr-ebook .treb-close{background:linear-gradient(180deg,var(--c-close) 0%,var(--c-navy) 100%) !important}

/* ════ de lezer ════
   Breedte beslist de lezer zelf (@container, trap 5): vanaf 760px twee
   pagina's naast elkaar, daaronder één, en daaronder gaan de pijlen van de
   zijkanten naar de voetbalk. De paginabreedte rekent ebook.js uit en zet
   hij als --treb-pw; de waarde hier is wat er staat tot dat gebeurd is. */
.tr-ebook .treb-reader{container-type:inline-size !important;position:relative !important;border:1px solid rgba(255,255,255,.08) !important;border-radius:12px !important;background:var(--c-deep) !important;overflow:hidden !important;outline:none !important}
.tr-ebook .treb-bar{display:flex !important;align-items:center !important;justify-content:space-between !important;gap:12px !important;padding:8px 10px 8px 12px !important;border-bottom:1px solid rgba(255,255,255,.08) !important}
.tr-ebook .treb-ch{position:relative !important;min-width:0 !important;flex:0 1 auto !important;display:block !important}
.tr-ebook .treb-ch::after{content:"" !important;position:absolute !important;right:12px !important;top:50% !important;width:7px !important;height:7px !important;border-right:2px solid rgba(255,255,255,.6) !important;border-bottom:2px solid rgba(255,255,255,.6) !important;transform:translateY(-70%) rotate(45deg) !important;pointer-events:none !important}
/* 16px: iOS zoomt in op elk veld kleiner dan dat (WORKSPACE, "iOS zoomt in op elk veld onder de 16px") */
.tr-ebook .treb-ch-select{-webkit-appearance:none !important;appearance:none !important;display:block !important;max-width:100% !important;height:40px !important;padding:0 36px 0 12px !important;border:1px solid rgba(255,255,255,.12) !important;border-radius:8px !important;background:rgba(255,255,255,.04) !important;color:rgba(255,255,255,.9) !important;font-family:inherit !important;font-size:16px !important;font-weight:600 !important;cursor:pointer !important;text-overflow:ellipsis !important}
.tr-ebook .treb-ch-select option{color:#0c1927 !important;background:#fff !important}
.tr-ebook .treb-tools{display:flex !important;align-items:center !important;gap:6px !important;flex:none !important}
.tr-ebook .treb-stage{display:flex !important;align-items:center !important;gap:16px !important;padding:28px 16px !important}
.tr-ebook .treb-view{flex:1 1 auto !important;min-width:0 !important;overflow:auto !important;display:flex !important;justify-content:center !important;align-items:flex-start !important}
.tr-ebook .treb-spread{display:flex !important;flex-direction:column !important;align-items:center !important;gap:24px !important;margin:0 auto !important}
.tr-ebook .treb-spread .treb-pg{width:min(100%,520px) !important;flex:none !important;box-shadow:0 18px 44px rgba(0,0,0,.4) !important}
.tr-ebook .treb-side{flex:none !important}
.tr-ebook .treb-foot{padding:0 16px 14px !important}
.tr-ebook .treb-progress{height:3px !important;border-radius:2px !important;background:rgba(255,255,255,.08) !important;overflow:hidden !important}
.tr-ebook .treb-progress-fill{display:block !important;height:100% !important;width:0 !important;background:rgba(255,255,255,.5) !important;transition:width .2s cubic-bezier(.22,1,.36,1) !important}
.tr-ebook .treb-foot-row{display:flex !important;align-items:center !important;justify-content:center !important;gap:16px !important;margin-top:10px !important}
.tr-ebook .treb-count{font-size:var(--t-3,13px) !important;color:rgba(255,255,255,.55) !important;font-variant-numeric:tabular-nums !important;min-width:0 !important;text-align:center !important}
.tr-ebook .treb-low{display:none !important}
.tr-ebook .treb-print{display:none !important}

/* Met JavaScript: één spread tegelijk, de rest blijft in de DOM maar uit beeld */
.tr-ebook .treb-reader.is-js .treb-spread{flex-direction:row !important;align-items:flex-start !important;gap:0 !important}
.tr-ebook .treb-reader.is-js .treb-spread .treb-pg{display:none !important;width:var(--treb-pw,420px) !important;max-width:none !important}
.tr-ebook .treb-reader.is-js .treb-spread .treb-pg.is-on{display:block !important}
.tr-ebook .treb-reader.is-js .treb-spread .treb-pg.is-on + .treb-pg.is-on{box-shadow:inset 1px 0 0 #e3e7eb,0 18px 44px rgba(0,0,0,.4) !important}
.tr-ebook .treb-reader.is-busy .treb-view{opacity:.5 !important}
@container (max-width:699px){
	.tr-ebook .treb-side{display:none !important}
	.tr-ebook .treb-low{display:grid !important}
	.tr-ebook .treb-stage{padding:16px 12px !important}
	.tr-ebook .treb-foot-row{justify-content:space-between !important}
}
.tr-ebook .treb-reader:fullscreen{border-radius:0 !important;border:0 !important;display:flex !important;flex-direction:column !important}
.tr-ebook .treb-reader:fullscreen .treb-stage{flex:1 1 auto !important;min-height:0 !important}

/* het einde van het inkijkexemplaar: een pagina in de maat van het boek */
.tr-ebook .treb-end{background:#fff !important;color:#0c1927 !important}
.tr-ebook .treb-end-in{position:absolute !important;inset:0 !important;display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;gap:14px !important;padding:12% !important;text-align:center !important}
.tr-ebook .treb-end-ico{display:grid !important;place-items:center !important;width:48px !important;height:48px !important;border-radius:50% !important;background:#eef1f4 !important;color:#0c1927 !important}
.tr-ebook .treb-end-title{font-size:20px !important;font-weight:800 !important;letter-spacing:-.02em !important;line-height:1.2 !important;color:#0c1927 !important;text-wrap:balance !important}
.tr-ebook .treb-end-text{font-size:var(--t-5,15px) !important;line-height:1.6 !important;color:#2b3846 !important;max-width:300px !important}
.tr-ebook .treb-end-signin{font-size:var(--t-3,13px) !important;font-weight:600 !important;color:#0c1927 !important;text-decoration:none !important;border-bottom:1px solid rgba(12,25,39,.3) !important}

/* ════ hoofdstukken ════ */
.tr-ebook .treb-toc{list-style:none !important;display:grid !important;grid-template-columns:repeat(auto-fill,minmax(300px,1fr)) !important;column-gap:40px !important;margin-top:24px !important}
.tr-ebook .treb-toc-row{display:grid !important;grid-template-columns:36px minmax(0,1fr) auto !important;align-items:baseline !important;column-gap:12px !important;padding:18px 0 !important;border-top:1px solid rgba(255,255,255,.08) !important;text-decoration:none !important;color:rgba(255,255,255,.92) !important}
.tr-ebook .treb-toc-n{font-size:var(--t-3,13px) !important;font-weight:700 !important;color:rgba(255,255,255,.34) !important;font-variant-numeric:tabular-nums !important}
.tr-ebook .treb-toc-body{display:flex !important;flex-direction:column !important;gap:4px !important;min-width:0 !important}
.tr-ebook .treb-toc-t{font-size:var(--t-6,17px) !important;font-weight:600 !important;line-height:1.35 !important;color:rgba(255,255,255,.92) !important}
.tr-ebook .treb-toc-d{font-size:var(--t-4,14px) !important;line-height:1.55 !important;color:rgba(255,255,255,.55) !important}
.tr-ebook .treb-toc-p{font-size:var(--t-3,13px) !important;color:rgba(255,255,255,.5) !important;font-variant-numeric:tabular-nums !important}
.tr-ebook .treb-toc.is-links .treb-toc-t{font-size:var(--t-5,15px) !important;font-weight:500 !important}
.tr-ebook a.treb-toc-row:hover .treb-toc-t{color:#fff !important}
.tr-ebook a.treb-toc-row:focus-visible{outline-offset:-2px !important}

/* ════ drie claims ════ */
.tr-ebook .treb-why-grid{display:grid !important;grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) !important;gap:40px !important}
.tr-ebook .treb-why-t{margin-top:16px !important;margin-bottom:8px !important;font-size:var(--t-6,17px) !important;font-weight:700 !important;color:rgba(255,255,255,.94) !important}
.tr-ebook .treb-why-p{font-size:var(--t-5,15px) !important;line-height:1.6 !important;color:rgba(255,255,255,.62) !important}

/* ════ slot ════ */
.tr-ebook .treb-close-row{display:flex !important;flex-wrap:wrap !important;align-items:center !important;justify-content:space-between !important;gap:28px 48px !important}
.tr-ebook .treb-close-copy{flex:1 1 520px !important;min-width:0 !important}
.tr-ebook .treb-close .treb-sub{margin-bottom:0 !important;max-width:600px !important}

/* ════ printen ════
   Het boek gaat niet op papier: de pagina's verdwijnen, er staat één regel.
   Dit ontmoedigt; een schermafbeelding houdt het niet tegen. */
@media print{
	.tr-ebook .treb-spread,.tr-ebook .treb-cover,.tr-ebook .treb-bar,.tr-ebook .treb-foot{display:none !important}
	.tr-ebook .treb-print{display:block !important;padding:24px !important;color:#000 !important}
}

@media (prefers-reduced-motion:reduce){.tr-ebook .treb-progress-fill{transition:none !important}}