/* Sabi — sabitaxi.nl
   ---------------------------------------------------------------
   Geel en zwart komen uit het merk. Het derde element, het blauw van
   een Nederlandse taxiplaat, is het enige accent: dat bestaat alleen
   in deze wereld en maakt de site meteen herkenbaar als taxi en als
   Nederlands.

   De blikvanger is het kaartje dat een chauffeur aan zijn klant geeft.
   Alles daaromheen blijft rustig. */

:root {
  --geel:      #FFCC00;
  --geel-diep: #E5B700;
  --zwart:     #000000;
  --wit:       #FFFFFF;
  --plaat:     #2B3FA0;   /* blauw van een taxikenteken */
  --grijs:     #6E6E6E;
  --grijs-licht: #F1F1EF;
  --lijn:      #E3E3E0;
}

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

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

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

body {
  margin: 0;
  background: var(--wit);
  color: var(--zwart);
  font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .merk, .code-groot, .cijfer {
  font-family: 'Bricolage Grotesque', 'Instrument Sans', Helvetica, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0;
}

a { color: inherit; }

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

.omhulsel { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* --- Daklicht: de gele balk bovenaan ------------------------------- */

.daklicht { background: var(--geel); }

.daklicht-binnen {
  max-width: 1080px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Het merk is het logo zelf: de S in Phosphate Inline met de streep
   eronder, de rest massief. currentColor zorgt dat hetzelfde bestand
   zwart op geel en wit op zwart werkt. */
.merk {
  display: inline-flex;
  color: var(--zwart);
  text-decoration: none;
  line-height: 0;
}

.merk-logo {
  height: 34px;
  width: auto;
  display: block;
}

@media (max-width: 520px) {
  .merk-logo { height: 28px; }
}

.daklicht-links {
  display: flex;
  gap: 24px;
  font-size: 15px;
  font-weight: 600;
}

.daklicht-links a {
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}

.daklicht-links a:hover { border-bottom-color: var(--zwart); }

/* --- Hero ---------------------------------------------------------- */

.hero {
  background: var(--zwart);
  color: var(--wit);
  padding: 84px 0 96px;
  overflow: hidden;
}

.hero-raster {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 64px;
  align-items: center;
}

.hero h1 {
  font-size: clamp(40px, 6.4vw, 76px);
  max-width: 12ch;
}

.hero p {
  margin: 26px 0 0;
  font-size: 19px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
  max-width: 46ch;
}

.hero-acties { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }

.knop {
  display: inline-block;
  background: var(--geel);
  color: var(--zwart);
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  padding: 15px 26px;
  border-radius: 4px;
}

.knop:hover { background: var(--geel-diep); }

.knop-rand {
  background: transparent;
  color: var(--wit);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35);
}

.knop-rand:hover { background: rgba(255, 255, 255, 0.08); }

/* --- Het kaartje dat een chauffeur weggeeft ------------------------- */

.kaartje {
  background: var(--wit);
  color: var(--zwart);
  border-radius: 14px;
  padding: 30px 30px 26px;
  max-width: 340px;
  transform: rotate(-2.2deg);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
  animation: leggen 700ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

@keyframes leggen {
  from { opacity: 0; transform: rotate(-9deg) translateY(26px); }
  to   { opacity: 1; transform: rotate(-2.2deg) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .kaartje { opacity: 1; animation: none; }
}

.kaartje-kop {
  font-size: 13px;
  font-weight: 700;
  color: var(--grijs);
  margin: 0 0 6px;
}

.code-groot {
  font-size: 46px;
  letter-spacing: 0.02em;
  margin-bottom: 18px;
}

.kaartje-naam { font-size: 17px; font-weight: 700; }
.kaartje-auto { font-size: 15px; color: var(--grijs); margin-bottom: 20px; }

/* Nederlandse taxiplaat: blauw met witte letters, met het EU-strookje. */
.plaat {
  display: inline-flex;
  align-items: stretch;
  border-radius: 5px;
  overflow: hidden;
  background: var(--plaat);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

.plaat-eu {
  background: #1B2C7A;
  color: var(--wit);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 4px 6px 5px;
}

.plaat-nummer {
  color: var(--wit);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 7px 14px 8px;
}

.kaartje-voet {
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--lijn);
  font-size: 14px;
  color: var(--grijs);
  line-height: 1.45;
}

/* --- Secties -------------------------------------------------------- */

.sectie { padding: 88px 0; }
.sectie-licht { background: var(--grijs-licht); }

.sectie h2 {
  font-size: clamp(28px, 3.6vw, 40px);
  max-width: 20ch;
  margin-bottom: 18px;
}

.sectie .leidend {
  font-size: 18px;
  color: #444;
  max-width: 58ch;
  margin: 0 0 44px;
}

/* Twee manieren om te rijden. Geen stappen: een keuze. */
.keuze { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.keuze-vak {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: 12px;
  padding: 30px;
}

.keuze-vak h3 { font-size: 21px; margin-bottom: 10px; }
.keuze-vak p { margin: 0; color: #4A4A4A; max-width: none; }

.keuze-vak-nadruk { border-color: var(--zwart); border-width: 2px; }

.streep-geel {
  width: 40px;
  height: 5px;
  background: var(--geel);
  border-radius: 3px;
  margin-bottom: 20px;
}

/* --- Voor chauffeurs ------------------------------------------------ */

.chauffeurs {
  background: var(--plaat);
  color: var(--wit);
  padding: 88px 0;
}

.chauffeurs h2 { max-width: 18ch; }
.chauffeurs .leidend { color: rgba(255, 255, 255, 0.78); }

.tarief {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 8px;
}

.tarief-vak {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 26px;
}

.tarief-vak-pro { background: var(--geel); color: var(--zwart); border-color: var(--geel); }

.tarief-naam { font-size: 15px; font-weight: 700; opacity: 0.75; }
.tarief-vak-pro .tarief-naam { opacity: 1; font-style: italic; }

.cijfer { font-size: 42px; margin: 10px 0 4px; }
.tarief-onder { font-size: 15px; opacity: 0.8; line-height: 1.45; }
.tarief-vak-pro .tarief-onder { opacity: 1; color: #4A3D00; }

.voetnoot {
  margin: 22px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
  max-width: 62ch;
}

.eisen { margin: 40px 0 0; padding: 0; list-style: none; max-width: 60ch; }

.eisen li {
  padding: 14px 0 14px 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
}

.eisen li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  width: 10px;
  height: 10px;
  background: var(--geel);
}

/* --- Gegevens en voet ----------------------------------------------- */

.gegevens {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: 12px;
  padding: 24px 26px;
  margin: 28px 0;
  font-size: 16px;
  max-width: 560px;
}

.gegevens dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 24px; }
.gegevens dt { color: var(--grijs); }
.gegevens dd { margin: 0; }

.nogdoen {
  background: #FFF8E1;
  border: 1px solid #FFE082;
  border-radius: 10px;
  padding: 16px 20px;
  font-size: 15px;
  color: #7A5D00;
  margin: 24px 0;
  max-width: 620px;
}

footer {
  background: var(--zwart);
  color: rgba(255, 255, 255, 0.6);
  padding: 40px 0;
  font-size: 15px;
}

.voet-binnen {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.voet-binnen a { color: rgba(255, 255, 255, 0.6); }
.voet-binnen a:hover { color: var(--geel); }

/* --- Juridische pagina's -------------------------------------------- */

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 60px 24px 96px;
}

main h1 { font-size: clamp(30px, 5vw, 44px); margin-bottom: 18px; max-width: 16ch; }
main h2 { font-size: 22px; margin: 44px 0 12px; }
main h3 { font-size: 17px; font-weight: 700; margin: 26px 0 8px; letter-spacing: 0; }

main p, main li { max-width: 68ch; }
main p { margin: 0 0 16px; }
main ul { padding-left: 20px; margin: 0 0 16px; }
main li { margin-bottom: 8px; }

main a { text-decoration: underline; text-underline-offset: 3px; }

.inleiding { font-size: 19px; line-height: 1.55; color: #333; max-width: 58ch; }
.meta { font-size: 15px; color: var(--grijs); margin-bottom: 36px; }

.knoppen { display: flex; gap: 12px; flex-wrap: wrap; margin: 32px 0 8px; }

.knop-licht {
  background: var(--wit);
  color: var(--zwart);
  box-shadow: inset 0 0 0 1px var(--lijn);
}

.knop-licht:hover { background: var(--grijs-licht); }

/* --- Smal scherm ----------------------------------------------------- */

@media (max-width: 820px) {
  .hero { padding: 56px 0 64px; }
  .hero-raster { grid-template-columns: 1fr; gap: 44px; }
  .kaartje { transform: rotate(-1.5deg); max-width: 320px; }
  .keuze, .tarief { grid-template-columns: 1fr; }
  .sectie, .chauffeurs { padding: 64px 0; }
}

@media (max-width: 520px) {
  body { font-size: 16px; }
  .daklicht-binnen { flex-wrap: wrap; gap: 12px; }
  .daklicht-links { gap: 18px; }
  .gegevens dl { grid-template-columns: 1fr; gap: 2px; }
  .gegevens dt { margin-top: 12px; }
  .kaartje { padding: 26px 24px 22px; }
  .code-groot { font-size: 40px; }
}