/* ============================================================
   oranjekans.nl — Base: reset, typography, layout primitives,
   utilities. Component styling lives in components.css.
   ============================================================ */

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 24px)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--font-body);
  font-size:var(--fs-base);
  line-height:var(--lh-base);
  color:var(--c-text);
  background:var(--c-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg,video{display:block;max-width:100%;height:auto}
/* default inline-icon size (overridden by context-specific .x .icon rules) */
.icon{width:1.15em;height:1.15em;flex-shrink:0;vertical-align:-0.15em;display:inline-block}
img{height:auto}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px;border-radius:2px}

/* ── Typography scale ── */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:var(--lh-tight);letter-spacing:var(--tracking-tight)}
h1{font-size:var(--fs-4xl)}
h2{font-size:var(--fs-3xl)}
h3{font-size:var(--fs-2xl)}
h4{font-size:var(--fs-xl)}
p{max-width:70ch}
strong{font-weight:700;color:var(--c-text)}
small{font-size:var(--fs-sm)}

a:not([class]){color:var(--c-accent-600);text-decoration:underline;text-underline-offset:2px;transition:color var(--dur-ui) var(--ease)}
a:not([class]):hover{color:var(--c-accent)}

/* ── Layout primitives ── */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--sp-5)}
.container--narrow{max-width:var(--container-narrow)}
.site-main{min-height:60vh}

.section{padding-block:var(--sp-9)}
.section--tight{padding-block:var(--sp-7)}
.section--alt{background:var(--c-surface-1)}

.eyebrow{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  font-family:var(--font-display);font-size:var(--fs-sm);font-weight:600;
  letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--c-trust);
}
.section__head{max-width:62ch;margin-bottom:var(--sp-7)}
.section__head--center{margin-inline:auto;text-align:center}
.section__title{font-size:var(--fs-3xl);margin-top:var(--sp-3)}
.section__lead{color:var(--c-text-2);font-size:var(--fs-lg);margin-top:var(--sp-3)}

.lead{font-size:var(--fs-lg);color:var(--c-text-2)}
.text-muted{color:var(--c-text-muted)}
.text-accent{color:var(--c-accent-600)}

/* ── Grid helpers ── */
.grid{display:grid;gap:var(--sp-5)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--auto{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}

/* ── Accessibility utilities ── */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:var(--sp-4);top:-60px;z-index:var(--z-modal);background:var(--c-accent);color:var(--c-on-accent);padding:var(--sp-2) var(--sp-4);border-radius:var(--r-sm);font-weight:600;transition:top var(--dur-ui) var(--ease)}
.skip-link:focus{top:var(--sp-4)}
[hidden]{display:none!important}

/* ── Scroll-reveal base state (JS adds .is-visible) ── */
.reveal{opacity:0;transform:translateY(24px);transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out)}
.reveal.is-visible{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none}}

/* ── Selection ── */
::selection{background:var(--c-accent);color:var(--c-on-accent)}

/* ── Focus-visible (keyboard) refinements ── */
.btn:focus-visible,.chip:focus-visible,.tab:focus-visible,.provider-chip:focus-visible{outline:2px solid var(--c-text);outline-offset:3px}
a:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px;border-radius:3px}

/* ── Performance: skip rendering work for long off-screen sections ── */
@supports (content-visibility:auto){
  .section{content-visibility:auto;contain-intrinsic-size:auto 600px}
  .hero,.page-hero{content-visibility:visible}
}

/* ── Global reduced-motion safety net ── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ── Print: clean legal/info documents ── */
@media print{
  .trustbar,.site-header,.drawer,.cookie,.backtotop,.site-footer,.breadcrumbs,.legal__toc,.modal,.hero__bg{display:none!important}
  body{background:#fff;color:#000}
  .page-hero{background:#fff;border:none;padding-block:0 16px}
  .page-hero::before{display:none}
  a{color:#000;text-decoration:underline}
  .legal{grid-template-columns:1fr}
  .prose p,.prose li,.section__lead,.lead{color:#000}
  h1,h2,h3{color:#000}
  .notice{border:1px solid #999}
  .section{padding-block:8px;content-visibility:visible}
}

/* ── Responsive grid collapse ── */
@media (max-width:992px){
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .container{padding-inline:var(--sp-4)}
  .section{padding-block:var(--sp-8)}
  h1{font-size:var(--fs-3xl)}
  h2{font-size:var(--fs-2xl)}
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
}