/* ==========================================================================
   van Hoek Personenvervoer
   Kleuren en vormtaal komen uit het bestaande logo:
   houtskool #394242 (woordmerk), blauw #004480 (de schuine streep).
   Geen externe fonts of scripts -> snel, en geen AVG-gedoe met Google Fonts.
   ========================================================================== */

:root{
  --inkt:        #404545;
  --inkt-zacht:  #5d6666;
  --blauw:       #004480;
  --blauw-diep:  #002d55;
  --zand:        #e4e0d7;
  --zand-licht:  #eeebe4;
  --wit:         #fbfaf7;
  --lijn:        #c9c4b8;

  --font: ui-sans-serif, "Avenir Next", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --maat-xs:  .8125rem;
  --maat-s:   .9375rem;
  --maat-m:   1.0625rem;
  --maat-l:   1.25rem;
  --maat-xl:  clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem);
  --maat-xxl: clamp(2rem, 1.2rem + 3.4vw, 3.5rem);

  --breed: 68rem;
  --rand: clamp(1.25rem, 5vw, 4rem);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--font);
  font-size:var(--maat-m);
  line-height:1.65;
  color:var(--inkt);
  background:var(--wit);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{ line-height:1.12; margin:0; font-weight:600; letter-spacing:-.015em; }
h1{ font-size:var(--maat-xxl); }
h2{ font-size:var(--maat-xl); }
h3{ font-size:var(--maat-l); font-weight:600; letter-spacing:0; }
p{ margin:0 0 1em; max-width:62ch; }
a{ color:var(--blauw); }

:focus-visible{
  outline:3px solid var(--blauw);
  outline-offset:3px;
  border-radius:2px;
}

.omhulsel{
  max-width:var(--breed);
  margin-inline:auto;
  padding-inline:var(--rand);
}

.overslaan{
  position:absolute; left:-9999px;
  background:var(--blauw); color:#fff; padding:.75rem 1rem; z-index:100;
}
.overslaan:focus{ left:1rem; top:1rem; }

/* ---------- kop ---------- */

.kop{
  background:var(--zand);
  border-bottom:1px solid var(--lijn);
}
.kop__binnen{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; padding-block:1.125rem;
}
.kop__logo{ display:block; line-height:0; }
.kop__logo img{
  width:clamp(11rem, 26vw, 15.5rem);
  height:auto; display:block;
}
.kop__bel{
  font-size:var(--maat-l);
  font-weight:600;
  text-decoration:none;
  color:var(--blauw-diep);
  white-space:nowrap;
}
.kop__bel:hover{ text-decoration:underline; }
.kop__bel span{ display:block; font-size:var(--maat-xs); font-weight:400; color:var(--inkt-zacht); letter-spacing:0; }
@media (max-width:32rem){ .kop__bel{ display:none; } }

/* ---------- intro ---------- */

.intro{ background:var(--zand); }
.intro__binnen{
  display:grid; gap:clamp(1.75rem,4vw,3.5rem);
  grid-template-columns:1fr;
  padding-block:clamp(2.5rem,6vw,4.5rem);
  align-items:center;
}
@media (min-width:52rem){
  .intro__binnen{ grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); }
}
.intro h1{ margin-bottom:1rem; max-width:17ch; }
.intro__tekst p{ font-size:var(--maat-l); color:var(--inkt-zacht); }
.intro__tekst p:last-child{ margin-bottom:0; }
.intro__foto{
  margin:0;
  border:1px solid var(--lijn);
  background:var(--wit);
}
.intro__foto img{ display:block; width:100%; height:auto; }
.intro__foto figcaption{
  font-size:var(--maat-xs); color:var(--inkt-zacht);
  padding-top:.6rem;
}

/* ---------- belblok: de schuine streep uit het logo, één keer, groot ---------- */

.bellen{
  background:var(--blauw);
  color:#fff;
  clip-path:polygon(0 2.2rem, 100% 0, 100% 100%, 0 100%);
  margin-top:-1px;
  padding-block:clamp(3rem,7vw,4.5rem) clamp(2.5rem,6vw,4rem);
}
@media (max-width:40rem){ .bellen{ clip-path:polygon(0 1.1rem,100% 0,100% 100%,0 100%); } }

.bellen__label{
  font-size:var(--maat-s);
  color:#b7d2ea;
  margin-bottom:.35rem;
}
.bellen__nummers{
  display:flex; flex-wrap:wrap; gap:.5rem clamp(1.5rem,5vw,3.5rem);
  align-items:baseline;
}
.nummer{
  color:#fff; text-decoration:none;
  font-size:var(--maat-xxl);
  font-weight:600;
  letter-spacing:-.02em;
  border-bottom:2px solid transparent;
}
.nummer--tweede{ font-size:var(--maat-xl); font-weight:500; color:#d6e6f4; }
.nummer:hover,.nummer:focus-visible{ border-bottom-color:currentColor; }
.bellen__wa{ margin:1.5rem 0 0; }
.waknop{
  display:inline-block;
  color:#fff; text-decoration:none;
  font-size:var(--maat-m); font-weight:600;
  border:2px solid rgba(255,255,255,.55);
  border-radius:3px;
  padding:.65rem 1.4rem;
}
.waknop:hover,.waknop:focus-visible{ background:#fff; color:var(--blauw); border-color:#fff; }

.bellen__mail{
  margin-top:1.1rem; margin-bottom:0;
  color:#d6e6f4; font-size:var(--maat-m);
}
.bellen__mail a{ color:#fff; }

/* ---------- lijstsecties ---------- */

.sectie{ padding-block:clamp(2.75rem,6vw,4.5rem); }
.sectie--rustig{ background:var(--zand-licht); }
.sectie h2{ margin-bottom:1.5rem; }

.ritten{
  list-style:none; margin:0; padding:0;
  border-top:1px solid var(--lijn);
  max-width:46rem;
}
.ritten li{
  border-bottom:1px solid var(--lijn);
  padding:1rem 0;
  display:grid; gap:.15rem;
}
.ritten b{ font-weight:600; }
.ritten span{ color:var(--inkt-zacht); font-size:var(--maat-s); }

.overons{
  display:grid; gap:clamp(1.5rem,4vw,3rem);
  grid-template-columns:1fr;
}
@media (min-width:52rem){ .overons{ grid-template-columns:1fr 16rem; } }
.overons__jaren{
  border-left:4px solid var(--blauw);
  padding-left:1.25rem;
  align-self:start;
}
.overons__jaren b{
  display:block; font-size:var(--maat-xxl); font-weight:600; line-height:1;
  letter-spacing:-.03em;
}
.overons__jaren span{ color:var(--inkt-zacht); font-size:var(--maat-s); }

/* ---------- voet ---------- */

.voet{
  background:var(--inkt);
  color:#cfd4d4;
  padding-block:clamp(2.25rem,5vw,3.25rem);
  font-size:var(--maat-s);
}
.voet a{ color:#fff; }
.voet__rijen{
  display:grid; gap:1.75rem;
  grid-template-columns:1fr;
}
@media (min-width:44rem){ .voet__rijen{ grid-template-columns:repeat(3,1fr); } }
.voet h3{ font-size:var(--maat-s); font-weight:600; color:#fff; margin-bottom:.4rem; }
.voet p{ margin:0 0 .2rem; }
.voet__klein{
  max-width:none;
  margin-top:2rem; padding-top:1.25rem;
  border-top:1px solid #4d5757;
  color:#9aa3a3; font-size:var(--maat-xs);
}

/* ---------- vaste belbalk op telefoon ---------- */

.belbalk{ display:none; }
@media (max-width:32rem){
  .belbalk{
    display:block; position:fixed; inset:auto 0 0 0; z-index:50;
    background:var(--blauw); color:#fff;
    text-align:center; text-decoration:none;
    font-size:var(--maat-l); font-weight:600;
    padding:.9rem 1rem calc(.9rem + env(safe-area-inset-bottom));
    box-shadow:0 -2px 12px rgba(0,0,0,.18);
  }
  body{ padding-bottom:4.5rem; }
}

/* ---------- losse pagina's (WordPress) ---------- */

.pagina{ padding-block:clamp(2.5rem,6vw,4rem); }
.pagina h1{ margin-bottom:1.25rem; }
.pagina img{ max-width:100%; height:auto; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}