/*
 * OC2 stijlgids: De Blauwdruk
 * Dit bestand is de bron voor de vormgeving van de site. Het gaat straks
 * ongewijzigd mee als stylesheet van het Sydney child theme.
 * Afspraken staan in stijlgids-definitief.md; wijzig ze daar en hier samen.
 */

/* ---------------------------------------------------------------
   Lettertypen. Van Google Fonts, maar op onze eigen server: er gaat geen
   verzoek naar googleapis.com, en dat is wat de privacyverklaring belooft.
   De bestanden zijn WOFF2 met alleen de tekens die een Nederlandse site
   nodig heeft. Dat scheelt 809 kB per bezoek ten opzichte van de TTF's
   waarmee begonnen is. De TTF's blijven in assets/fonts/ staan als bron;
   omzetten gaat met maak-woff2.sh.
   --------------------------------------------------------------- */

/* Alleen de gewichten die echt gebruikt worden: koppen en knoppen staan
   halfvet (600), lopende tekst normaal (400). Elk extra gewicht is gewicht
   dat de bezoeker moet downloaden. */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plexmono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* ---------------------------------------------------------------
   Ontwerpwaarden
   --------------------------------------------------------------- */

:root {
  /* Kleuren uit de stijlgids. Jaco ronde 2: het diepe navy is vervallen,
     inktblauw doet nu zowel de lopende tekst als de donkere vlakken. */
  --oc2-inkt: #1b2a38;          /* lopende tekst en elk donker vlak */
  --oc2-blauw: #3563a9;         /* logoblauw, ook links en pictogrammen */
  --oc2-blauw-licht: #51a5dd;   /* lichte boog uit het logo, op donkere vlakken */
  --oc2-grijs-logo: #9c9f9f;
  --oc2-oranje: #c05621;        /* het ene accent: primaire knop */
  --oc2-oranje-hover: #9c4419;
  --oc2-tekst: var(--oc2-inkt);
  --oc2-tekst-zacht: #4a5c6b;
  --oc2-achtergrond: #f5f7f9;
  --oc2-wit: #ffffff;
  --oc2-lijn: #c7d2db;          /* dunne tekeninglijnen op lichte vlakken */
  --oc2-rand-veld: #7c8b9b;     /* randen van formuliervelden, 3,49:1 op wit */
  --oc2-succes: #186a3b;
  --oc2-fout: #b3261e;

  /* Raster in de opening. Jaco: het raster mocht duidelijker. De tinten zijn
     mee verschoven met de nieuwe, iets donkerdere ondergrond, zodat het raster
     er even sterk op staat als eerst. */
  --oc2-raster-fijn: #2f4559;
  --oc2-raster-grof: #3f5a77;

  /* Maatvoering: basiseenheid 8 px */
  --oc2-ruimte-1: 8px;
  --oc2-ruimte-2: 16px;
  --oc2-ruimte-3: 24px;
  --oc2-ruimte-4: 32px;
  --oc2-ruimte-5: 40px;
  --oc2-ruimte-6: 48px;
  --oc2-ruimte-9: 72px;
  --oc2-kolom: 1120px;
  --oc2-radius: 4px;

  /* Lettertypen */
  --oc2-font-kop: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --oc2-font-tekst: "Inter", "Helvetica Neue", Arial, sans-serif;
  --oc2-font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

/* ---------------------------------------------------------------
   Basis
   --------------------------------------------------------------- */

body.oc2 {
  margin: 0;
  background: var(--oc2-achtergrond);
  color: var(--oc2-tekst);
  font-family: var(--oc2-font-tekst);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.oc2-kolom {
  max-width: var(--oc2-kolom);
  margin: 0 auto;
  padding: 0 var(--oc2-ruimte-3);
  /* border-box, zodat 1120 px inclusief de zijmarges is en de kolom echt
     nooit breder wordt dan de afgesproken maat. */
  box-sizing: border-box;
}

.oc2-sectie {
  padding: var(--oc2-ruimte-9) 0;
}

@media (max-width: 782px) {
  .oc2-sectie {
    padding: var(--oc2-ruimte-6) 0;
  }
}

/* ---------------------------------------------------------------
   Typografie
   --------------------------------------------------------------- */

/* De klassen naast de elementen, zodat een kop-uiterlijk ook op een ander
   element kan (bijvoorbeeld in de letterproef van de stijlgids of in een
   blok van de editor) zonder dat de maten ergens een tweede keer staan. */
.oc2 h1,
.oc2 h2,
.oc2 h3,
.oc2 .oc2-h1,
.oc2 .oc2-h2,
.oc2 .oc2-h3 {
  font-family: var(--oc2-font-kop);
  font-weight: 600;
  margin: 0 0 var(--oc2-ruimte-2);
  color: inherit;
}

/* Een lange projecttitel zonder spatie ("Houten steigers/loopbruggen") past op
   320 px niet op één regel. Liever afbreken dan de pagina laten uitsteken. */
.oc2 h1, .oc2 h2, .oc2 h3 { overflow-wrap: break-word; }

.oc2 h1, .oc2 .oc2-h1 { font-size: 40px; line-height: 1.15; }
.oc2 h2, .oc2 .oc2-h2 { font-size: 30px; line-height: 1.2; }
.oc2 h3, .oc2 .oc2-h3 { font-size: 20px; line-height: 1.3; }

@media (max-width: 782px) {
  .oc2 h1, .oc2 .oc2-h1 { font-size: 30px; }
  .oc2 h2, .oc2 .oc2-h2 { font-size: 24px; }
}

.oc2 p {
  margin: 0 0 var(--oc2-ruimte-2);
  max-width: 68ch; /* lopende tekst nooit breder dan ongeveer 70 tekens */
}

.oc2-intro {
  font-size: 18px;
  line-height: 1.6;
}

.oc2-bijschrift {
  font-size: 14px;
  line-height: 1.5;
  color: var(--oc2-tekst-zacht);
}

/* Kerngegevens en annotaties: de monospace-laag die deze richting typeert */
.oc2-gegevens {
  font-family: var(--oc2-font-mono);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--oc2-blauw);
  text-transform: uppercase;
}

.oc2-label {
  font-family: var(--oc2-font-mono);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oc2-blauw);
}

.oc2-donker .oc2-label,
.oc2-donker .oc2-gegevens {
  color: var(--oc2-blauw-licht);
}

/* ---------------------------------------------------------------
   Links
   --------------------------------------------------------------- */

.oc2 a {
  color: var(--oc2-blauw);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.oc2 a:hover {
  color: var(--oc2-oranje-hover);
}

.oc2-donker a {
  color: var(--oc2-wit);
}

/* Focus is overal zichtbaar: 2 px rand, 2 px van het element af */
.oc2 a:focus-visible,
.oc2 button:focus-visible,
.oc2 input:focus-visible,
.oc2 textarea:focus-visible,
.oc2 select:focus-visible,
.oc2 .oc2-knop:focus-visible {
  outline: 2px solid var(--oc2-blauw);
  outline-offset: 2px;
  /* Sydney zet transition:all op links. De focusrand vervaagt dan de eerste
     drie tienden van een seconde naar zijn plek toe, precies het moment waarop
     je hem nodig hebt. Hij hoort er meteen te staan. */
  transition-property: background-color, color;
}

.oc2-donker a:focus-visible,
.oc2-donker .oc2-knop:focus-visible {
  outline-color: var(--oc2-wit);
}

/* ---------------------------------------------------------------
   Knoppen. Maximaal één primaire knop per schermvlak.
   --------------------------------------------------------------- */

.oc2 .oc2-knop {
  display: inline-flex;
  align-items: center;
  font-family: var(--oc2-font-kop);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  padding: var(--oc2-ruimte-2) var(--oc2-ruimte-3);
  min-height: 48px;
  box-sizing: border-box;
  border-radius: var(--oc2-radius);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.oc2 .oc2-knop--primair {
  background: var(--oc2-oranje);
  color: var(--oc2-wit);
}

.oc2 .oc2-knop--primair:hover {
  background: var(--oc2-oranje-hover);
  color: var(--oc2-wit);
}

.oc2 .oc2-knop--secundair {
  background: transparent;
  color: var(--oc2-tekst);
  border-color: var(--oc2-tekst);
}

.oc2 .oc2-knop--secundair:hover {
  background: var(--oc2-tekst);
  color: var(--oc2-wit);
}

.oc2 .oc2-donker .oc2-knop--secundair {
  color: var(--oc2-wit);
  border-color: var(--oc2-wit);
}

.oc2 .oc2-donker .oc2-knop--secundair:hover {
  background: var(--oc2-wit);
  color: var(--oc2-inkt);
}

/* ---------------------------------------------------------------
   Opening met millimeterraster
   --------------------------------------------------------------- */

.oc2-opening {
  background-color: var(--oc2-inkt);
  color: var(--oc2-wit);
  position: relative;
  padding: var(--oc2-ruimte-9) 0;
  /* Millimeterpapier: fijne lijnen elke 8 px, elke vijfde lijn zwaarder.
     De bovenste laag is een verloop in dezelfde inktkleur dat het raster
     wegdempt aan de kant waar de tekst staat, zodat de kop leesbaar blijft en
     het raster toch duidelijk aanwezig is. Bovenste laag staat vooraan. */
  background-image:
    linear-gradient(90deg,
      rgba(27, 42, 56, 0.97) 0%,
      rgba(27, 42, 56, 0.92) 30%,
      rgba(27, 42, 56, 0.45) 65%,
      rgba(27, 42, 56, 0.15) 100%),
    linear-gradient(var(--oc2-raster-grof) 1px, transparent 1px),
    linear-gradient(90deg, var(--oc2-raster-grof) 1px, transparent 1px),
    linear-gradient(var(--oc2-raster-fijn) 1px, transparent 1px),
    linear-gradient(90deg, var(--oc2-raster-fijn) 1px, transparent 1px);
  background-size: cover, 40px 40px, 40px 40px, 8px 8px, 8px 8px;
}

/* Op een telefoon dezelfde 48 px als elke andere sectie. Deze regel moet ná de
   padding hierboven staan, anders wint die: allebei even zwaar, en dan telt de
   volgorde in het bestand. */
@media (max-width: 782px) {
  .oc2-opening {
    padding: var(--oc2-ruimte-6) 0;
  }
}

.oc2-opening h1 {
  max-width: 20ch;
}

.oc2-opening .oc2-intro {
  max-width: 56ch;
}

.oc2-knoppenrij {
  display: flex;
  flex-wrap: wrap;
  gap: var(--oc2-ruimte-2);
  margin-top: var(--oc2-ruimte-4);
}

/* ---------------------------------------------------------------
   Feitenbalk: de troeven direct onder de opening
   --------------------------------------------------------------- */

.oc2-feitenbalk {
  background: var(--oc2-wit);
  border-top: 1px solid var(--oc2-lijn);
  border-bottom: 1px solid var(--oc2-lijn);
}

/* Vier punten naast elkaar passen niet: samen zijn ze 1008 px breed en met
   drie tussenruimtes van 32 px kom je op 1104 px, in een kolom van 1072 px.
   Met flex-wrap viel de vierde daardoor altijd alleen op een tweede regel,
   bij elke zoomstand. Een raster verdeelt ze wel gelijk: vier kolommen als
   het kan, anders twee, anders één. Nooit meer een losse regel onderaan. */
.oc2-feitenbalk ul {
  list-style: none;
  margin: 0;
  padding: var(--oc2-ruimte-3) 0;
  display: grid;
  /* De kolommen voegen zich naar de tekst in plaats van vier gelijke delen te
     nemen: bij gelijke delen is de kolom 250 px en het langste punt 277 px, dus
     dan breken er twee af. minmax(0, auto) laat een kolom desnoods krimpen, dus
     bij een breder uitvallend lettertype ontstaat er een afbreking en nooit een
     horizontale schuifbalk. */
  grid-template-columns: repeat(4, minmax(0, auto));
  justify-content: space-between;
  /* De horizontale waarde is de minimumafstand, niet de werkelijke: met
     space-between wordt de overgebleven ruimte alsnog gelijk verdeeld en komen
     de kolommen op ongeveer 21 px uit elkaar. Op 24 px minimum kwam de rij
     precies 8 px tekort en brak "uitvoeringsontwerp" af. */
  gap: var(--oc2-ruimte-2);
}

/* Onder 1120 px is de kolom smaller dan 1072 px en passen vier punten sowieso
   niet meer naast elkaar. Twee bij twee dus, en dat blijft gelijk verdeeld. */
@media (max-width: 1119px) {
  .oc2-feitenbalk ul {
    grid-template-columns: repeat(2, 1fr);
    justify-content: stretch;
  }
}

@media (max-width: 560px) {
  .oc2-feitenbalk ul {
    grid-template-columns: 1fr;
  }
}

.oc2-feitenbalk li {
  font-family: var(--oc2-font-mono);
  font-size: 14px;
  color: var(--oc2-tekst-zacht);
}

.oc2-feitenbalk strong {
  color: var(--oc2-blauw);
  font-weight: 400;
}

/* ---------------------------------------------------------------
   Kaarten
   --------------------------------------------------------------- */

.oc2-kaartenrij {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--oc2-ruimte-3);
}

@media (max-width: 960px) {
  .oc2-kaartenrij { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .oc2-kaartenrij { grid-template-columns: 1fr; }
}

/* Drie kolommen: voor het projectenoverzicht, waar de foto's ruimte nodig
   hebben en zes projecten twee volle rijen vullen. */
.oc2-kaartenrij--drie {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 960px) {
  .oc2-kaartenrij--drie { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .oc2-kaartenrij--drie { grid-template-columns: 1fr; }
}

.oc2-kaart {
  background: var(--oc2-wit);
  border: 1px solid var(--oc2-lijn);
  border-top: 3px solid var(--oc2-blauw);
  border-radius: var(--oc2-radius);
  padding: var(--oc2-ruimte-3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.oc2-kaart h3 {
  margin-top: var(--oc2-ruimte-1);
}

.oc2-kaart p {
  margin-bottom: 0;
  font-size: 16px;
  color: var(--oc2-tekst-zacht);
}

/* Dienstcode als annotatie op een tekening */
.oc2-kaart__code {
  display: inline-block;
  font-family: var(--oc2-font-mono);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--oc2-blauw);
  border: 1px solid var(--oc2-lijn);
  border-radius: 2px;
  padding: 2px var(--oc2-ruimte-1);
}

/* Projectkaart: foto boven, dan kop, dan kerngegevens. Geen jaartal. */
.oc2-project {
  background: var(--oc2-wit);
  border: 1px solid var(--oc2-lijn);
  border-radius: var(--oc2-radius);
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  /* Kolom, zodat de kerngegevens van alle kaarten op één lijn eindigen,
     ook als de ene projectnaam over twee regels loopt. */
  display: flex;
  flex-direction: column;
}

.oc2-project:hover,
.oc2-kaart:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(27, 42, 56, 0.12);
}

.oc2-project__foto {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--oc2-achtergrond);
  border-bottom: 1px solid var(--oc2-lijn);
}

/* Gearceerd vlak zolang er nog geen projectfoto is. Zo is meteen te zien
   dat er een foto hoort, in plaats van dat de kaart leeg lijkt. */
.oc2-project__foto--leeg {
  background-image: repeating-linear-gradient(
    45deg,
    #e1e8ee 0 6px,
    var(--oc2-achtergrond) 6px 14px
  );
}

.oc2-project__inhoud {
  padding: var(--oc2-ruimte-2) var(--oc2-ruimte-3) var(--oc2-ruimte-3);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.oc2-project h3 {
  font-size: 20px;
  margin-bottom: 4px;
}

.oc2-project h3 a {
  text-decoration: none;
  color: var(--oc2-tekst);
}

.oc2-project h3 a:hover {
  text-decoration: underline;
  color: var(--oc2-blauw);
}

.oc2 .oc2-project__plaats {
  font-size: 14px;
  color: var(--oc2-tekst-zacht);
  margin: 0 0 var(--oc2-ruimte-1);
}

.oc2 .oc2-project__gegevens {
  font-family: var(--oc2-font-mono);
  font-size: 14px;
  color: var(--oc2-blauw);
  text-transform: uppercase;
  border-top: 1px solid var(--oc2-lijn);
  padding-top: var(--oc2-ruimte-1);
  margin: auto 0 0; /* altijd onderaan de kaart */
}

/* ---------------------------------------------------------------
   Kerngegevens als specificatielijst, de annotatie op de tekening.
   Het uitgelichte project is op verzoek van Jaco vervallen (elk project
   hetzelfde gewicht); deze lijst blijft, want hij hoort straks op de
   projectpagina zelf.
   --------------------------------------------------------------- */

.oc2-specificatie {
  margin: var(--oc2-ruimte-3) 0 0;
  border-top: 1px solid var(--oc2-lijn);
}

.oc2-specificatie div {
  display: flex;
  gap: var(--oc2-ruimte-2);
  padding: var(--oc2-ruimte-1) 0;
  border-bottom: 1px solid var(--oc2-lijn);
  font-family: var(--oc2-font-mono);
  font-size: 14px;
}

.oc2-specificatie dt {
  flex: 0 0 40%;
  color: var(--oc2-tekst-zacht);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

.oc2-specificatie dd {
  margin: 0;
  color: var(--oc2-blauw);
}

/* ---------------------------------------------------------------
   Werkwijzestrip: tender, VO, DO, UO
   --------------------------------------------------------------- */

.oc2-werkwijze {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--oc2-ruimte-3);
  counter-reset: fase;
}

@media (max-width: 780px) {
  .oc2-werkwijze { grid-template-columns: repeat(2, 1fr); }
}

/* Onder 480 px past "Uitvoeringsontwerp" niet meer naast een tweede kolom:
   een rastercel kan niet smaller worden dan haar langste woord, en dan duwt
   de strook de hele pagina over de rand. Eén kolom dus. */
@media (max-width: 480px) {
  .oc2-werkwijze { grid-template-columns: 1fr; }
}

.oc2-fase {
  border-top: 1px solid var(--oc2-lijn);
  padding-top: var(--oc2-ruimte-2);
  position: relative;
}

.oc2-fase::before {
  counter-increment: fase;
  content: "0" counter(fase);
  font-family: var(--oc2-font-mono);
  font-size: 14px;
  /* De donkere oranje, niet de gewone: op het paginavlak haalt #C05621 maar
     4,26:1 en dat is te weinig voor tekst van 14 px. Deze haalt 6,01:1. Het is
     een kleur die al in het palet zit, er komt er dus geen bij. */
  color: var(--oc2-oranje-hover);
  display: block;
  margin-bottom: 4px;
}

.oc2-fase h3 {
  font-size: 20px;
  margin-bottom: 4px;
}

.oc2-fase p {
  font-size: 14px;
  color: var(--oc2-tekst-zacht);
  margin: 0;
}

/* ---------------------------------------------------------------
   Formulier
   --------------------------------------------------------------- */

.oc2-veld {
  margin-bottom: var(--oc2-ruimte-3);
  max-width: 560px;
}

.oc2-veld label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--oc2-ruimte-1);
}

.oc2-veld input,
.oc2-veld textarea,
.oc2-veld select {
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  padding: var(--oc2-ruimte-1) var(--oc2-ruimte-2);
  font-family: var(--oc2-font-tekst);
  font-size: 16px;
  color: var(--oc2-tekst);
  background: var(--oc2-wit);
  border: 1px solid var(--oc2-rand-veld);
  border-radius: var(--oc2-radius);
}

.oc2-veld textarea {
  min-height: 120px;
  line-height: 1.6;
}

.oc2-veld--fout input,
.oc2-veld--fout textarea {
  border-color: var(--oc2-fout);
  border-width: 2px;
}

.oc2 .oc2-veldfout {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--oc2-ruimte-1);
  font-size: 14px;
  color: var(--oc2-fout);
}

.oc2 .oc2-hint {
  font-size: 14px;
  color: var(--oc2-tekst-zacht);
  margin-top: var(--oc2-ruimte-1);
}

/* ---------------------------------------------------------------
   Meldingen. Nooit kleur alleen: er staat altijd een pictogram bij.
   --------------------------------------------------------------- */

.oc2-melding {
  display: flex;
  align-items: flex-start;
  gap: var(--oc2-ruimte-2);
  padding: var(--oc2-ruimte-2);
  border-radius: var(--oc2-radius);
  border-left: 4px solid;
  background: var(--oc2-wit);
  max-width: 560px;
  margin-bottom: var(--oc2-ruimte-2);
}

.oc2-melding p { margin: 0; }

.oc2-melding--succes {
  border-color: var(--oc2-succes);
  color: var(--oc2-succes);
}

.oc2-melding--fout {
  border-color: var(--oc2-fout);
  color: var(--oc2-fout);
}

.oc2-melding svg {
  flex: 0 0 auto;
  margin-top: 2px;
}

/* ---------------------------------------------------------------
   Pictogrammen in lijnstijl
   --------------------------------------------------------------- */

.oc2-pictogram {
  width: 24px;
  height: 24px;
  stroke: var(--oc2-blauw);
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.oc2-donker .oc2-pictogram {
  stroke: var(--oc2-blauw-licht);
}

/* ---------------------------------------------------------------
   Voettekst. Jaco ronde 3 (F-019): het logo staat altijd in kleur op wit,
   dus de voettekst is licht. De opening is daarmee het enige donkere vlak
   op de site.
   --------------------------------------------------------------- */

.oc2-voettekst {
  background: var(--oc2-wit);
  /* Een zwaardere lijn dan de gewone scheidingslijn: de voettekst moet als
     apart deel van de pagina lezen, ook zonder kleurverschil. */
  border-top: 3px solid var(--oc2-inkt);
  padding: var(--oc2-ruimte-6) 0;
}

.oc2-voettekst .oc2-logo {
  margin-bottom: var(--oc2-ruimte-4);
}

/* Het beeldmerk van het Constructeursregister. Klein gehouden: het is een
   verwijzing naar de inschrijving, geen tweede logo van OC2. */
.oc2-keurmerk {
  display: block;
  height: 48px; /* drie regels tekst in het merk, kleiner wordt onleesbaar */
  width: auto;
  margin: var(--oc2-ruimte-2) 0 var(--oc2-ruimte-1);
}

/* De lopende tekst in de voettekst staat een maat kleiner. Deze selector won
   ook van .oc2-label en .oc2-gegevens, waardoor de monospace-labels daar op
   15 px stonden en overal elders op 14. Die uitzondering hoort niet. */
.oc2-voettekst p {
  font-size: 15px;
}

.oc2-voettekst .oc2-label,
.oc2-voettekst .oc2-gegevens,
.oc2-voettekst .oc2-bijschrift {
  font-size: 14px;
}

/* De slotregel onder de kolommen: kleiner, met een lijn erboven. De lijn moet
   over de volle breedte lopen, dus hier vervalt de leesbreedte van 68 tekens
   die op gewone alinea's staat. */
.oc2 .oc2-voettekst__slot {
  max-width: none;
  margin-top: var(--oc2-ruimte-5);
  padding-top: var(--oc2-ruimte-2);
  border-top: 1px solid var(--oc2-lijn);
}

/* ---------------------------------------------------------------
   Donkere vlakken (nu alleen nog de opening)
   --------------------------------------------------------------- */

/* background-color, niet de background-shorthand: die zou het raster van
   .oc2-opening wissen wanneer beide klassen op hetzelfde element staan. */
.oc2-donker {
  background-color: var(--oc2-inkt);
  color: var(--oc2-wit);
}

.oc2-donker h1,
.oc2-donker h2,
.oc2-donker h3 {
  color: var(--oc2-wit);
}

.oc2-donker .oc2-bijschrift {
  color: #c4d2dd;
}

/* ---------------------------------------------------------------
   Logo
   --------------------------------------------------------------- */

.oc2-logo {
  display: block;
  height: 36px;
  width: auto;
}

.oc2-logo--klein {
  height: 28px; /* absolute ondergrens uit de stijlgids */
}

/* ---------------------------------------------------------------
   Toegankelijkheid
   --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .oc2 * {
    transition: none !important;
    animation: none !important;
  }
  .oc2-project:hover,
  .oc2-kaart:hover {
    transform: none;
  }
}

/* De link die als eerste focus krijgt en het menu overslaat. Buiten beeld tot
   hij focus heeft, dan schuift hij linksboven het scherm in. Omhoog geparkeerd
   en niet 9999 px naar links: dat laatste laat hem bij focus zichtbaar over de
   pagina glijden, en op een pagina die rechts-naar-links leest komt hij er
   bovendien buiten te staan. */
.oc2-overslaan {
  position: absolute;
  left: 0;
  top: -100px;
  z-index: 100;
  background: var(--oc2-wit);
  color: var(--oc2-tekst);
  padding: var(--oc2-ruimte-2) var(--oc2-ruimte-3);
  border: 2px solid var(--oc2-blauw);
  border-radius: 0 0 var(--oc2-radius) 0;
}

.oc2-overslaan:focus {
  top: 0;
}

/* Niet laten schuiven: Sydney zet transition op alle links, en dan komt de
   link pas na drie tienden van een seconde in beeld. Precies het moment dat
   je hem nodig hebt. */
.oc2 .oc2-overslaan {
  transition: none;
}

/* Alleen voor een schermlezer, niet in beeld. Contact Form 7 heeft hiervoor
   een eigen stylesheet die wij uitzetten (die botst met oc2.css), dus deze
   regels moeten hier staan. Zonder dit staat de foutsamenvatting van het
   formulier gewoon zichtbaar boven het formulier, met drie identieke links. */
.oc2 .screen-reader-response {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ===============================================================
   Onderdelen die pas bij het bouwen van de site nodig bleken.
   Ze staan niet in versie 4 van de gids die Jaco kreeg: zie
   stijlgids-definitief.md, hoofdstuk "Toegevoegd tijdens het bouwen".
   =============================================================== */

/* ---------------------------------------------------------------
   Menubalk. Wit, met een dunne lijn eronder, zodat de donkere opening
   van de homepage er meteen onder begint zonder tussenkleur.
   --------------------------------------------------------------- */

.oc2-menubalk {
  background: var(--oc2-wit);
  border-bottom: 1px solid var(--oc2-lijn);
  /* Blijft in beeld tijdens het scrollen, zoals de gids voorschrijft. Op een
     lage telefoon in liggende stand niet: dan houdt een plakkende balk te
     weinig ruimte over voor de inhoud zelf. */
  position: sticky;
  top: 0;
  z-index: 30;
}

@media (max-height: 480px) {
  .oc2-menubalk { position: static; }
}

.oc2-menubalk__binnen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--oc2-ruimte-3);
  min-height: 72px;
}

.oc2 .oc2-menubalk__logo {
  display: block;
  text-decoration: none;
  /* Vrije ruimte rondom het logo ter hoogte van de letter O, zoals de
     stijlgids voorschrijft. */
  padding: var(--oc2-ruimte-2) 0;
}

.oc2-menu {
  display: flex;
  align-items: center;
  gap: var(--oc2-ruimte-4);
}

.oc2-menu__lijst {
  display: flex;
  align-items: center;
  gap: var(--oc2-ruimte-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.oc2 .oc2-menu__lijst a {
  display: flex;
  align-items: center;
  min-height: 48px;
  color: var(--oc2-tekst);
  text-decoration: none;
  font-weight: 600;
}

.oc2 .oc2-menu__lijst a:hover {
  color: var(--oc2-blauw);
  text-decoration: underline;
}

/* De pagina waar je bent: een lijn eronder in logoblauw, niet alleen een
   kleurverschil, zodat het ook zonder kleur te zien is. */
.oc2 .oc2-menu__lijst .current-menu-item > a,
.oc2 .oc2-menu__lijst .current_page_item > a {
  color: var(--oc2-blauw);
  box-shadow: inset 0 -2px 0 var(--oc2-blauw);
}

.oc2-menuknop {
  display: none;
  align-items: center;
  gap: var(--oc2-ruimte-1);
  min-height: 48px;
  padding: 0 var(--oc2-ruimte-2);
  background: transparent;
  border: 1px solid var(--oc2-lijn);
  border-radius: var(--oc2-radius);
  font-family: var(--oc2-font-kop);
  font-size: 16px;
  font-weight: 600;
  /* Sydney zet alle knoppen in kapitalen; onze knoppen staan in zinsvorm. */
  text-transform: none;
  color: var(--oc2-tekst);
  cursor: pointer;
}

/* Sydney kleurt elke knop bij hover en focus in zijn eigen rood (#d65050).
   Dat is een achtste kleur en hij dook op zodra je de menuknop aanraakte.
   Onze knop houdt zijn eigen kleur en laat de aanraking zien met een vlak. */
.oc2 .oc2-menuknop:hover,
.oc2 .oc2-menuknop:focus {
  color: var(--oc2-tekst);
  background: var(--oc2-achtergrond);
  border-color: var(--oc2-tekst);
}

.oc2 .oc2-menuknop:hover .oc2-menuknop__streep,
.oc2 .oc2-menuknop:hover .oc2-menuknop__streep::before,
.oc2 .oc2-menuknop:hover .oc2-menuknop__streep::after,
.oc2 .oc2-menuknop:focus .oc2-menuknop__streep,
.oc2 .oc2-menuknop:focus .oc2-menuknop__streep::before,
.oc2 .oc2-menuknop:focus .oc2-menuknop__streep::after {
  background: var(--oc2-tekst);
}

/* Drie streepjes, getekend met randen in plaats van met drie elementen. */
.oc2-menuknop__streep,
.oc2-menuknop__streep::before,
.oc2-menuknop__streep::after {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--oc2-tekst);
}

.oc2-menuknop__streep {
  position: relative;
}

.oc2-menuknop__streep::before,
.oc2-menuknop__streep::after {
  content: "";
  position: absolute;
  left: 0;
}

.oc2-menuknop__streep::before { top: -6px; }
.oc2-menuknop__streep::after  { top: 6px; }

@media (max-width: 860px) {
  .oc2-menuknop {
    display: inline-flex;
  }

  .oc2-menu {
    display: none;
    position: absolute;
    /* top hoort erbij. Zonder top blijft het paneel op zijn statische plek in
       een flexregel die verticaal centreert, en dan klapt het menu boven het
       scherm uit: het eerste item staat dan op -74 px en is onbereikbaar. */
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--oc2-wit);
    border-bottom: 1px solid var(--oc2-lijn);
    padding: var(--oc2-ruimte-2) var(--oc2-ruimte-3) var(--oc2-ruimte-3);
  }

  .oc2-menu.is-open {
    display: flex;
  }

  .oc2-menubalk__binnen {
    position: relative;
    flex-wrap: wrap;
  }

  .oc2-menu__lijst {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .oc2 .oc2-menu__lijst a {
    padding: var(--oc2-ruimte-1) 0;
    border-bottom: 1px solid var(--oc2-lijn);
  }

  .oc2 .oc2-menu__actie {
    margin-top: var(--oc2-ruimte-2);
    justify-content: center;
  }
}

/* ---------------------------------------------------------------
   Secties op een gebouwde pagina
   --------------------------------------------------------------- */

/* Om en om: de pagina-achtergrond en wit. Zo krijgt elke sectie een eigen
   vlak zonder dat er een kleur bij komt. */
.oc2-sectie--wit {
  background: var(--oc2-wit);
  border-top: 1px solid var(--oc2-lijn);
  border-bottom: 1px solid var(--oc2-lijn);
}

/* De knoppenrij onder een raster met kaarten. */
.oc2 .oc2-sectie .oc2-kaartenrij + .oc2-knoppenrij,
.oc2 .oc2-sectie .oc2-werkwijze + .oc2-knoppenrij {
  margin-top: var(--oc2-ruimte-5);
}

/* Een kop met een label erboven staat los van de tekst eronder. */
.oc2 .oc2-sectie .oc2-label + h2 {
  margin-top: 4px;
}

.oc2 .oc2-sectie h2 + p {
  margin-bottom: var(--oc2-ruimte-5);
}

/* De projectkaart is één blok waarin twee links naar hetzelfde adres wijzen:
   de foto en de kop. De foto zit voor een toetsenbord en een schermlezer in
   de weg, dus die is daar weggehaald; de kop blijft de link. */
.oc2 .oc2-project__link {
  display: block;
  text-decoration: none;
}

/* De lopende tekst van een gewone pagina, zoals de privacyverklaring.
   Tussenkoppen lopen rustig mee met de tekst in plaats van eruit te springen. */
.oc2-paginatekst {
  margin-top: var(--oc2-ruimte-4);
}

.oc2-paginatekst h2 {
  font-size: 20px;
  margin-top: var(--oc2-ruimte-5);
}

.oc2-paginatekst h2:first-child {
  margin-top: 0;
}

.oc2-paginatekst ul {
  max-width: 68ch;
  padding-left: var(--oc2-ruimte-3);
}

/* ---------------------------------------------------------------
   Projectpagina
   --------------------------------------------------------------- */

.oc2-projectkop {
  padding-top: var(--oc2-ruimte-6);
}

.oc2-projectkop .oc2-project__plaats {
  font-size: 16px;
}

/* Terug naar het overzicht, boven de kop. */
.oc2 .oc2-kruimel {
  display: inline-flex;
  align-items: center;
  gap: var(--oc2-ruimte-1);
  font-family: var(--oc2-font-mono);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--oc2-ruimte-3);
}

/* De lopende tekst van een project, met de afbeeldingen die erin staan. */
.oc2-projecttekst {
  margin-top: var(--oc2-ruimte-5);
}

.oc2-projecttekst img,
.oc2-projecttekst figure {
  max-width: 100%;
  height: auto;
}

.oc2-projecttekst figure {
  margin: var(--oc2-ruimte-4) 0;
}

.oc2-projecttekst figcaption {
  font-size: 14px;
  color: var(--oc2-tekst-zacht);
  margin-top: var(--oc2-ruimte-1);
}

.oc2-projecttekst ul {
  max-width: 68ch;
  padding-left: var(--oc2-ruimte-3);
}

.oc2-projecttekst li {
  margin-bottom: 4px;
}

/* Bij de foto's van deze site staat de uitlijning in de klasse van de
   afbeelding zelf. Op een smal scherm moet dat vervallen, anders steekt een
   brede tekening over de rand. */
.oc2-projecttekst .alignleft,
.oc2-projecttekst .aligncenter,
.oc2-projecttekst .alignright {
  display: block;
  float: none;
  margin-left: 0;
  margin-right: auto;
}

/* De specificatielijst naast de foto op een breed scherm. */
.oc2-projectraster {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--oc2-ruimte-6);
  align-items: start;
  margin-top: var(--oc2-ruimte-4);
}

/* Een rastercel wordt vanzelf nooit smaller dan haar breedste inhoud. In de
   berichttekst van sommige projecten staat nog een figure met een vaste
   breedte uit de oude site (bijvoorbeeld 400 px), en die duwde de hele pagina
   op een telefoon over de rand. min-width nul geeft de cel toestemming om
   kleiner te worden; max-width op de afbeelding doet de rest. */
.oc2-projectraster > * {
  min-width: 0;
}

.oc2-projecttekst figure,
.oc2-projecttekst img {
  max-width: 100% !important;
  width: auto !important;
  height: auto;
}

@media (max-width: 860px) {
  .oc2-projectraster {
    grid-template-columns: 1fr;
    gap: var(--oc2-ruimte-3);
  }
}

.oc2-projectraster__foto {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--oc2-lijn);
  border-radius: var(--oc2-radius);
}

.oc2-specificatie:first-child {
  margin-top: 0;
}

/* ---------------------------------------------------------------
   Contactpagina: het formulier met de gegevens ernaast
   --------------------------------------------------------------- */

.oc2-contactraster {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--oc2-ruimte-6);
  align-items: start;
}

@media (max-width: 860px) {
  .oc2-contactraster {
    grid-template-columns: 1fr;
    gap: var(--oc2-ruimte-6);
  }
}

/* Op een smal scherm staan de gegevens onder het formulier; een lijn erboven
   maakt duidelijk dat het een apart blok is. */
@media (max-width: 860px) {
  .oc2-contactraster > aside {
    border-top: 1px solid var(--oc2-lijn);
    padding-top: var(--oc2-ruimte-3);
  }
}

/* ---------------------------------------------------------------
   Voettekst: de vier kolommen
   --------------------------------------------------------------- */

.oc2-voettekst__kolommen {
  gap: var(--oc2-ruimte-4);
}

/* Kerngegevens die geen afkorting zijn, zoals een KvK-nummer, staan niet in
   hoofdletters: dat leest een schermlezer anders voor. */
.oc2 .oc2-gegevens--gewoon {
  text-transform: none;
}

/* ---------------------------------------------------------------
   Formulier van Contact Form 7
   --------------------------------------------------------------- */

/* CF7 zet zijn eigen p-tags om de velden heen. Die mogen geen extra ruimte
   toevoegen, anders klopt het ritme van 8 px niet meer. */
.oc2 .wpcf7 p {
  margin: 0;
  max-width: none;
}

.oc2 .wpcf7-form-control-wrap {
  display: block;
}

/* De foutmelding van CF7 onder het veld, in dezelfde vorm als in de gids. */
.oc2 .wpcf7-not-valid-tip {
  display: block;
  margin-top: var(--oc2-ruimte-1);
  font-size: 14px;
  color: var(--oc2-fout);
}

.oc2 .wpcf7-not-valid {
  border-color: var(--oc2-fout);
  border-width: 2px;
}

/* De melding onder het formulier. CF7 zet er een eigen klasse op per
   uitkomst; wij hangen daar de vormgeving van oc2-melding aan. */
.oc2 .wpcf7-response-output {
  /* CF7 zet dit blok altijd in de HTML, ook als er niets te melden is. Leeg
     hoort het niet zichtbaar te zijn, anders staat er een streepje onder het
     formulier waar niemand iets aan heeft. */
  display: none;
  align-items: flex-start;
  gap: var(--oc2-ruimte-2);
  max-width: 560px;
  margin: var(--oc2-ruimte-3) 0 0;
  padding: var(--oc2-ruimte-2);
  background: var(--oc2-wit);
  border: 0;
  border-left: 4px solid var(--oc2-tekst-zacht);
  border-radius: var(--oc2-radius);
  font-size: 16px;
}

.oc2 .wpcf7 form.sent .wpcf7-response-output,
.oc2 .wpcf7 form.invalid .wpcf7-response-output,
.oc2 .wpcf7 form.failed .wpcf7-response-output,
.oc2 .wpcf7 form.spam .wpcf7-response-output,
.oc2 .wpcf7 form.unaccepted .wpcf7-response-output,
.oc2 .wpcf7 form.aborted .wpcf7-response-output,
.oc2 .wpcf7 form.payment-required .wpcf7-response-output {
  display: flex;
}

.oc2 .wpcf7 form.sent .wpcf7-response-output {
  border-left-color: var(--oc2-succes);
  color: var(--oc2-succes);
}

.oc2 .wpcf7 form.invalid .wpcf7-response-output,
.oc2 .wpcf7 form.failed .wpcf7-response-output,
.oc2 .wpcf7 form.spam .wpcf7-response-output {
  border-left-color: var(--oc2-fout);
  color: var(--oc2-fout);
}

/* Nooit kleur alleen: een teken vooraan zegt hetzelfde als de kleur. */
.oc2 .wpcf7 form.sent .wpcf7-response-output::before,
.oc2 .wpcf7 form.invalid .wpcf7-response-output::before,
.oc2 .wpcf7 form.failed .wpcf7-response-output::before,
.oc2 .wpcf7 form.spam .wpcf7-response-output::before {
  flex: 0 0 auto;
  font-family: var(--oc2-font-mono);
  font-weight: 700;
}

.oc2 .wpcf7 form.sent .wpcf7-response-output::before {
  content: "\2713"; /* vinkje */
}

.oc2 .wpcf7 form.invalid .wpcf7-response-output::before,
.oc2 .wpcf7 form.failed .wpcf7-response-output::before,
.oc2 .wpcf7 form.spam .wpcf7-response-output::before {
  content: "\0021"; /* uitroepteken */
}

/* Het honeypot-veld. Voor een mens onbereikbaar, voor een robot gewoon een
   veld. Niet display:none, want dat slaan sommige robots juist over. */
.oc2-vangnet {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* De verzendknop van CF7 is een input, geen a: dezelfde vorm als oc2-knop. */
.oc2 .wpcf7 input[type="submit"] {
  display: inline-flex;
  align-items: center;
  font-family: var(--oc2-font-kop);
  font-size: 16px;
  font-weight: 600;
  /* Sydney zet alle knoppen in kapitalen. Onze knoppen staan in zinsvorm, en
     een schermlezer spelt kapitalen soms letter voor letter. */
  text-transform: none;
  letter-spacing: 0;
  line-height: 1;
  padding: var(--oc2-ruimte-2) var(--oc2-ruimte-3);
  min-height: 48px;
  box-sizing: border-box;
  border-radius: var(--oc2-radius);
  border: 2px solid transparent;
  background: var(--oc2-oranje);
  color: var(--oc2-wit);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

/* De kleur staat er expliciet bij, ook bij focus: zonder dat kleurt Sydney de
   tekst van een knop bij aanraking in zijn eigen rood. */
.oc2 .wpcf7 input[type="submit"]:hover,
.oc2 .wpcf7 input[type="submit"]:focus {
  background: var(--oc2-oranje-hover);
  color: var(--oc2-wit);
}

/* De draaiende stip die CF7 tijdens het versturen toont. */
.oc2 .wpcf7-spinner {
  margin-left: var(--oc2-ruimte-2);
}

/* ---------------------------------------------------------------
   Sydney terugdringen
   --------------------------------------------------------------- */

/* Het child theme vervangt de sjablonen van Sydney, maar de stylesheet van
   Sydney blijft geladen: hij verzorgt nog de opmaak in wp-admin en de
   blokken van de editor. Deze regels halen weg wat hij op de voorkant
   doorzet en wat botst met de maatvoering uit de stijlgids. */
.oc2 #page,
.oc2 .page-wrap,
.oc2 .content-wrapper {
  padding: 0;
  margin: 0;
  max-width: none;
}

.oc2 .oc2-inhoud > * {
  /* Secties lopen van rand tot rand; de kolom erbinnen begrenst de breedte. */
  width: 100%;
}

/* Afbeeldingen uit de mediabibliotheek blijven binnen hun kolom. Alleen de
   afbeeldingen die uit de inhoud komen: het logo en het beeldmerk hebben een
   eigen, vaste hoogte en mogen hier niet door geraakt worden. */
.oc2-paginatekst img,
.oc2-projecttekst img,
.oc2-project__foto {
  max-width: 100%;
}