/* voorwaarden.css
 *
 * Vervangt de Tailwind-CDN op voorwaarden.html. Die CDN is een compiler die in de
 * browser van de bezoeker draait: hij leest je HTML, bedenkt ter plekke welke
 * stijlregels nodig zijn en zet ze in de pagina. Handig om mee te spelen, niet
 * bedoeld voor productie. Het kost een extra bestand van ruim honderd kilobyte,
 * de pagina springt kort op voordat de stijlen er zijn, en valt de CDN uit dan
 * staat je juridische pagina er kaal bij.
 *
 * Hieronder staat precies wat deze ene pagina gebruikt, met de hand uitgeschreven.
 * De klassenamen zijn ongewijzigd, dus de HTML hoefde niet aangepast te worden.
 * Voeg je nieuwe Tailwind-klassen toe aan de pagina, dan moet je ze hier ook
 * neerzetten; ze verschijnen niet meer vanzelf.
 */

/* Basis. Tailwind zet standaard alle marges van koppen, alinea's en lijsten uit
   en dat is waar de opmaak van deze pagina op leunt. Zonder dit stukje krijgt de
   pagina de standaardmarges van de browser terug en gaat alles schuiven. */
*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; }
strong { font-weight: 600; }
a { color: inherit; text-decoration: inherit; }

/* Opmaak */
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-\[760px\] { max-width: 760px; }

/* Tussenruimte. Een eenheid is 0.25rem, net als in Tailwind. */
.gap-0\.5 { gap: 0.125rem; }
.gap-2\.5 { gap: 0.625rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }

.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-6 { padding-top: 1.5rem; }
.pb-10 { padding-bottom: 2.5rem; }

.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-9 { margin-bottom: 2.25rem; }
.mb-10 { margin-bottom: 2.5rem; }

.w-7 { width: 1.75rem; }
.h-7 { height: 1.75rem; }
.rounded-full { border-radius: 9999px; }

/* Kleuren, dezelfde waarden als in de oude tailwind.config */
.bg-olive { background-color: #3F4A2E; }
.text-paper { color: #FBF9F4; }
.text-ink { color: #1A1B1A; }
.text-ink\/90 { color: rgba(26, 27, 26, 0.9); }
.text-mute { color: #6F6E68; }
.text-soft { color: #A09E94; }
.text-olive { color: #3F4A2E; }

.border-t { border-top-width: 1px; border-top-style: solid; border-top-color: currentColor; }
.border-line { border-color: #E6E1D2; }

/* Tekstgroottes */
.text-\[11\.5px\] { font-size: 11.5px; }
.text-\[12px\] { font-size: 12px; }
.text-\[12\.5px\] { font-size: 12.5px; }
.text-\[16px\] { font-size: 16px; }
.text-\[22px\] { font-size: 22px; }
.text-\[26px\] { font-size: 26px; }
.text-\[clamp\(36px\2c 6vw\2c 56px\)\] { font-size: clamp(36px, 6vw, 56px); }

.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }
.leading-relaxed { line-height: 1.625; }

.underline-offset-2 { text-underline-offset: 2px; }
.hover\:text-ink:hover { color: #1A1B1A; }
.hover\:underline:hover { text-decoration: underline; }

/* De voettekst van de landingspagina, ook op deze tekstpagina's.
 *
 * Die voet stond hier anders: een smalle regel binnen dezelfde 760px als de tekst, met
 * andere links erin. Twee voetteksten op een site is een van die verschillen die je pas
 * ziet als je de pagina's naast elkaar legt, en dan zie je hem ook nooit meer niet.
 *
 * De voet zelf werkt vrijwel geheel op inline stijlen; alleen deze vijf klassen komen
 * uit styles.css. Ze staan hier met dezelfde breekpunten, zodat hij op beide soorten
 * pagina's precies hetzelfde meebuigt. */
.mg-hv-7:hover { color:#3F4A2E; }

@media (max-width: 1024px) {
  .mg-wrap { padding-left: 24px !important; padding-right: 24px !important; }
}

@media (max-width: 760px) {
  .mg-wrap { padding-left: 20px !important; padding-right: 20px !important; }
  .mg-grid--foot { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .mg-pd-24 { padding: 40px 0 32px !important; }
  .mg-gp-4 { gap: 22px !important; }
}

@media (max-width: 460px) {
  .mg-grid--foot { grid-template-columns: minmax(0, 1fr) !important; }
}