/* Publieke voorkant. Keuzes en bronnen: docs/ontwerp-publieke-site.md.
   Rustig en zakelijk: één marineblauwe hoofdkleur, veel witruimte,
   een serif voor koppen en Inter voor de lopende tekst. */
:root {
  --achter: #ffffff;
  --vlak: #f5f7fa;
  --inkt: #0f1b2d;
  --tekst: #1f2937;
  --zacht: #4b5563;
  --lijn: #e3e7ed;
  --marine: #15325a;
  --marine-donker: #0d2140;
  --marine-licht: #e8eef6;
  --breed: 1120px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--achter);
  color: var(--tekst);
  font: 400 17px/1.6 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { color: var(--inkt); margin: 0; }
h1, h2 { font-family: "Source Serif 4", Georgia, serif; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: clamp(26px, 3.2vw, 34px); line-height: 1.2; margin-bottom: 28px; }
h3 { font-size: 17px; line-height: 1.35; font-weight: 600; }
p { margin: 0; }
a { color: var(--marine); }
a:focus-visible, .knop:focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; border-radius: 6px; }
.binnen { max-width: var(--breed); margin: 0 auto; padding: 0 24px; }

.overslaan { position: absolute; left: -9999px; top: 8px; background: var(--marine); color: #fff; padding: 10px 14px; border-radius: 6px; z-index: 100; }
.overslaan:focus { left: 16px; }

/* Knoppen: één primaire stijl, de rest secundair. */
.knop {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px;
  padding: 0 20px; border-radius: 8px; border: 1px solid var(--lijn);
  background: #fff; color: var(--inkt); font-weight: 500; font-size: 16px; text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.knop:hover { border-color: var(--marine); }
.knop.hoofd { background: var(--marine); border-color: var(--marine); color: #fff; }
.knop.hoofd:hover { background: var(--marine-donker); }
.knop.klein { min-height: 38px; padding: 0 14px; font-size: 15px; }
.knoppen { display: flex; flex-wrap: wrap; gap: 12px; }

/* Bovenbalk */
.balk { position: sticky; top: 0; z-index: 10; background: rgba(255, 255, 255, .94); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--lijn); }
.balk .binnen { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 16px; }
.merk { font-family: "Source Serif 4", Georgia, serif; font-weight: 700; font-size: 19px; color: var(--inkt); text-decoration: none; }
.balk nav { display: flex; align-items: center; gap: 24px; }
.balk nav a:not(.knop) { color: var(--zacht); text-decoration: none; font-size: 15px; font-weight: 500; }
.balk nav a:not(.knop):hover { color: var(--inkt); }

/* Held: wie, wat en waarom in het eerste scherm */
.held { padding: 72px 0 64px; }
.held .binnen { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 64px; align-items: center; }
.bovenregel { font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--marine); margin-bottom: 14px; }
.held h1 { font-size: clamp(40px, 6vw, 60px); line-height: 1.05; margin-bottom: 22px; }
.positionering { font-size: clamp(20px, 2.3vw, 24px); line-height: 1.45; color: var(--inkt); max-width: 34em; margin-bottom: 14px; }
.toelichting { color: var(--zacht); max-width: 38em; margin-bottom: 30px; }
.portret { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: 16px; background: var(--vlak); box-shadow: 0 20px 40px -24px rgba(13, 33, 64, .45); }

/* Kerncijfers */
.cijfers { background: var(--marine); color: #fff; }
.cijfers ul { list-style: none; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding-top: 36px; padding-bottom: 36px; }
.cijfers li { padding: 4px 24px; border-left: 1px solid rgba(255, 255, 255, .2); display: grid; gap: 4px; }
.cijfers li:first-child { border-left: 0; padding-left: 0; }
.getal { font-family: "Source Serif 4", Georgia, serif; font-size: 38px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.uitleg { font-size: 15px; line-height: 1.45; color: #dbe5f2; }
.bron { font-size: 13px; color: #a9bdd8; }

/* Secties */
.sectie { padding: 88px 0; }
.sectie.grijs { background: var(--vlak); }
.tussenkop { margin-top: 56px; }

/* Impactkaarten */
.kaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
/* Vijf kaarten in drie kolommen: de eerste breed, zodat er geen gat valt. */
@media (min-width: 1000px) { .kaart:first-child:nth-last-child(3n+2) { grid-column: span 2; } }
.kaart { background: #fff; border: 1px solid var(--lijn); border-radius: 12px; padding: 26px; display: grid; gap: 10px; align-content: start; }
.kaart .context { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--marine); }
.kaart h3 { font-size: 19px; }
.kaart p:last-child { color: var(--zacht); font-size: 16px; }
.kaart strong { color: var(--inkt); }

/* Tijdlijn */
.tijdlijn { list-style: none; margin: 0; padding: 0; }
.rol { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 32px; padding: 28px 0; border-top: 1px solid var(--lijn); }
.rol:first-child { border-top: 0; padding-top: 0; }
.rol.kort { padding: 18px 0; }
.wanneer { font-size: 15px; color: var(--zacht); font-variant-numeric: tabular-nums; padding-top: 2px; }
.wat h3 { font-size: 19px; }
.rol.kort .wat h3 { font-size: 17px; }
.org { color: var(--marine); font-weight: 500; margin: 2px 0 10px; }
.rol.kort .org { margin-bottom: 0; }
.wat > p:not(.org) { color: var(--zacht); max-width: 46em; }
.wat ul { margin: 12px 0 0; padding-left: 20px; max-width: 46em; }
.wat li { margin-bottom: 6px; }
.wat li::marker { color: var(--marine); }

/* Opleiding, certificaten, talen */
.twee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
.lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.lijst .wanneer { font-size: 14px; margin-bottom: 2px; }
.lijst .org { margin-bottom: 0; }
.talen { color: var(--tekst); }
.talen span { color: var(--zacht); }

/* Vaardigheden */
.vaardigheden { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px 40px; }
.vaardigheden p { color: var(--zacht); font-size: 16px; margin-top: 4px; }

/* Contact */
.contact { background: var(--marine-donker); color: #fff; padding: 80px 0; }
.contact h2 { color: #fff; margin-bottom: 12px; }
.contact p { color: #dbe5f2; font-size: 19px; margin-bottom: 28px; max-width: 34em; }
.contact .knop { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .4); }
.contact .knop:hover { border-color: #fff; }
.contact .knop.hoofd { background: #fff; color: var(--marine-donker); border-color: #fff; }
.contact .knop.hoofd:hover { background: var(--marine-licht); }

.voet { padding: 28px 0; font-size: 14px; color: var(--zacht); }
.voet .binnen { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.voet a { color: var(--zacht); }

/* Tablet en telefoon */
@media (max-width: 900px) {
  .held { padding: 40px 0 48px; }
  .held .binnen { grid-template-columns: 1fr; gap: 32px; }
  .portret { order: -1; width: 160px; aspect-ratio: 1; border-radius: 50%; }
  .cijfers ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 0; }
  .cijfers li:nth-child(3) { border-left: 0; padding-left: 0; }
  .twee { grid-template-columns: 1fr; gap: 48px; }
  .sectie { padding: 64px 0; }
}
@media (max-width: 640px) {
  .binnen { padding: 0 16px; }
  .balk nav a:not(.knop) { display: none; }
  .rol { grid-template-columns: 1fr; gap: 4px; }
  /* Eén cijfer per regel: lange Nederlandse samenstellingen passen niet in een halve kolom. */
  .cijfers ul { grid-template-columns: 1fr; gap: 18px; padding-top: 28px; padding-bottom: 28px; }
  .cijfers li { border-left: 0; padding: 0; grid-template-columns: 104px minmax(0, 1fr); column-gap: 16px; row-gap: 2px; }
  .cijfers li:nth-child(3) { padding-left: 0; }
  .getal { font-size: 30px; grid-row: span 2; }
  .knoppen .knop { flex: 1 1 100%; }
}

/* Pdf-cv: dezelfde inhoud als een cv van twee pagina's. Zonder balk, knoppen,
   impactkaarten (de kerncijfers en de rollen dragen dat al) en kleurvlakken. */
@media print {
  @page { size: A4; margin: 13mm 15mm; }
  body { font-size: 9.5pt; line-height: 1.4; }
  .balk, .overslaan, .knoppen, #impact, .contact, .voet a { display: none !important; }
  .binnen { max-width: none; padding: 0; }
  .held { padding: 0 0 8pt; }
  .held .binnen { grid-template-columns: minmax(0, 1fr) 72pt; gap: 18pt; }
  .portret { width: 72pt; aspect-ratio: 1; border-radius: 50%; box-shadow: none; order: 0; }
  .bovenregel { font-size: 8.5pt; margin-bottom: 4pt; }
  .held h1 { font-size: 24pt; margin-bottom: 6pt; }
  .positionering { font-size: 11.5pt; margin-bottom: 4pt; }
  .toelichting { margin-bottom: 4pt; }
  .tekst::after { content: "info@robertjrcollignon.nl  ·  linkedin.com/in/robertjrcollignon  ·  carriere.robertjrcollignon.nl"; color: var(--marine); font-size: 9pt; font-weight: 500; }
  .cijfers { background: none; color: var(--inkt); border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); }
  /* Het papier is smaller dan 900px: de tabletindeling hieronder terugdraaien. */
  .cijfers ul { padding: 6pt 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .cijfers li, .cijfers li:nth-child(3) { border-left: 1px solid var(--lijn); padding: 0 10pt; }
  .cijfers li:first-child { border-left: 0; padding-left: 0; }
  .uitleg { font-size: 8.5pt; color: var(--zacht); }
  .bron { display: none; }
  .getal { font-size: 15pt; }
  .sectie { padding: 10pt 0 0; background: none !important; }
  h2 { font-size: 13pt; margin-bottom: 4pt; }
  .tussenkop { margin-top: 10pt; }
  .rol { grid-template-columns: 96pt minmax(0, 1fr); gap: 10pt; padding: 5pt 0; break-inside: avoid; }
  .rol.kort { padding: 3pt 0; }
  .rol:has(ul) .wat > p:not(.org) { display: none; }
  .wanneer, .lijst .wanneer { font-size: 8.5pt; }
  .wat h3, .lijst h3, .vaardigheden h3 { font-size: 10pt; }
  .rol.kort .wat h3 { font-size: 9.5pt; }
  .org { margin: 0 0 2pt; }
  .wat ul { margin-top: 2pt; }
  .wat li { margin-bottom: 1pt; }
  .twee { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20pt; }
  .lijst { gap: 5pt; }
  .vaardigheden { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5pt 14pt; }
  .vaardigheden p { font-size: 8.5pt; margin-top: 0; }
  .voet { padding: 8pt 0 0; font-size: 8pt; }
}