/* project.jurisoffice.nl — huisstijl van jurisoffice.nl (marine als basis, koper voor lijnen, Source Serif 4 voor koppen,
   Public Sans voor tekst), in dezelfde opbouw als presentatie.jurisoffice.nl maar soberder: dit is een werkplek. Geen inline
   stijl en geen externe bron (CSP). */
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/public-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}

:root {
  --marine-950: #0B1C29;
  --marine-900: #0F2433;
  --marine-800: #1C3D5A;
  --marine-200: #C9D6E1;
  --marine-100: #E4ECF2;
  --koper-500: #B8860B;
  --koper-100: #F6EDD8;
  --werkt-700: #117562;
  --inkt: #1B2630;
  --inkt-zacht: #4A5864;
  --vlak: #F4F6F8;
  --paneel: #FFFFFF;
  --lijn: rgba(28, 61, 90, 0.14);
  --lijn-sterk: rgba(28, 61, 90, 0.32);
  --fout: #A4262C;
  --goed: #117562;
  --rond: 10px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--inkt);
  background: var(--vlak);
}

a { color: var(--werkt-700); text-underline-offset: 3px; }
a:hover { color: var(--marine-800); }
:focus-visible { outline: 3px solid var(--koper-500); outline-offset: 2px; }
h1, h2, h3 { font-family: "Source Serif 4", Georgia, serif; color: var(--marine-800); line-height: 1.2; margin: 0 0 0.5em; }
h1 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); font-weight: 650; }
h2 { font-size: clamp(1.25rem, 2vw, 1.55rem); font-weight: 650; }

.pj-schil { width: min(1100px, 100% - 32px); margin-inline: auto; }
.pj-hoofd { flex: 1; padding-block: 32px 64px; }
.pj-smal { max-width: 640px; }
.pj-tekst h2 { margin-top: 1.5rem; }
.pj-overslaan { position: absolute; inset-inline-start: -9999px; }
.pj-overslaan:focus { inset-inline-start: 16px; top: 8px; z-index: 20; background: var(--paneel); padding: 8px 14px; border-radius: var(--rond); }
.pj-verborgen-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pj-inline { display: inline; margin: 0; }

.pj-kop { background: var(--paneel); border-bottom: 1px solid var(--lijn); }
.pj-kop-binnen { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; flex-wrap: wrap; }
.pj-merk { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--marine-800); }
.pj-merk-sub { font-size: 0.85rem; color: var(--inkt-zacht); border-inline-start: 2px solid var(--koper-500); padding-inline-start: 10px; }
.pj-kop-acties { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pj-nav { background: var(--marine-800); }
.pj-nav-binnen { display: flex; gap: 6px; flex-wrap: wrap; padding-block: 8px; }
.pj-nav a { color: #fff; text-decoration: none; padding: 6px 14px; border-radius: 999px; }
.pj-nav a[aria-current="page"], .pj-nav a:hover { background: rgba(255, 255, 255, 0.16); }

.pj-kicker { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; color: var(--koper-500); font-weight: 700; margin: 0 0 6px; }
.pj-lead { font-size: 1.12rem; color: var(--inkt-zacht); max-width: 46rem; }
.pj-klein { font-size: 0.9rem; color: var(--inkt-zacht); }
.pj-sectie { margin-top: 32px; }

.pj-kaart { background: var(--paneel); border: 1px solid var(--lijn); border-radius: var(--rond); padding: 20px; margin-block: 12px; }
.pj-kaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.pj-kaart-link { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--inkt); }
.pj-kaart-link:hover { border-color: var(--koper-500); }
.pj-kaarttitel { font-weight: 700; color: var(--marine-800); }

.pj-voortgang { display: block; height: 8px; background: var(--marine-100); border-radius: 999px; overflow: hidden; }
.pj-voortgang-balk { display: block; height: 100%; background: var(--werkt-700); }
.pj-breedte-0 { width: 0; } .pj-breedte-10 { width: 10%; } .pj-breedte-20 { width: 20%; } .pj-breedte-30 { width: 30%; }
.pj-breedte-40 { width: 40%; } .pj-breedte-50 { width: 50%; } .pj-breedte-60 { width: 60%; } .pj-breedte-70 { width: 70%; }
.pj-breedte-80 { width: 80%; } .pj-breedte-90 { width: 90%; } .pj-breedte-100 { width: 100%; }

.pj-badge { display: inline-block; font-size: 0.8rem; padding: 2px 10px; border-radius: 999px; background: var(--marine-100); color: var(--marine-800); margin: 0 4px; }
.pj-badge-stil { background: var(--koper-100); color: #5a4206; }
.pj-lijst { padding-inline-start: 1.2rem; }
.pj-onderdelen { list-style: none; padding: 0; display: grid; gap: 10px; }
.pj-onderdeel { background: var(--paneel); border: 1px solid var(--lijn); border-radius: var(--rond); padding: 12px 16px; }
.pj-onderdeel .pj-klein { display: block; }
.pj-fasen { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.pj-fasen a { padding: 4px 12px; border: 1px solid var(--lijn-sterk); border-radius: 999px; text-decoration: none; }
.pj-fasen a[aria-current="page"] { background: var(--marine-800); color: #fff; border-color: var(--marine-800); }

.pj-melding { background: var(--marine-100); border-inline-start: 4px solid var(--marine-800); padding: 10px 14px; border-radius: 6px; }
.pj-melding-goed { background: #E3F2EE; border-color: var(--goed); }
.pj-melding-fout { background: #F8E5E6; border-color: var(--fout); }
.pj-veldfout { color: var(--fout); font-size: 0.9rem; margin: 4px 0 0; }

.pj-formulier { display: grid; gap: 14px; }
.pj-rij { grid-template-columns: auto minmax(160px, 320px) auto; align-items: center; }
.pj-veld { display: grid; gap: 6px; }
.pj-veld label, legend { font-weight: 600; }
fieldset { border: 1px solid var(--lijn); border-radius: var(--rond); padding: 10px 14px; margin: 0; }
input, select, textarea { font: inherit; padding: 9px 12px; border: 1px solid var(--lijn-sterk); border-radius: 8px; background: #fff; color: var(--inkt); max-width: 100%; }
input:disabled, select:disabled, textarea:disabled { background: var(--vlak); color: var(--inkt-zacht); }
.pj-keuze { display: flex; gap: 8px; align-items: center; font-weight: 400; margin-block: 4px; }
.pj-keuze input { width: auto; }
.pj-acties { display: flex; gap: 10px; flex-wrap: wrap; }

.pj-knop { display: inline-flex; align-items: center; justify-content: center; font: inherit; font-weight: 600; padding: 10px 18px; border-radius: 8px;
  border: 1px solid var(--marine-800); background: #fff; color: var(--marine-800); cursor: pointer; text-decoration: none; }
.pj-knop-primair { background: var(--marine-800); color: #fff; }
.pj-knop:hover { background: var(--marine-900); color: #fff; }
.pj-knop[disabled] { opacity: 0.6; cursor: progress; }
.pj-link-knop { font: inherit; background: none; border: none; color: var(--werkt-700); text-decoration: underline; cursor: pointer; padding: 0; }

.pj-tabel-schil { overflow-x: auto; }
.pj-tabel { border-collapse: collapse; width: 100%; background: var(--paneel); }
.pj-tabel th, .pj-tabel td { text-align: start; padding: 8px 10px; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.pj-tabel input { width: 100%; min-width: 9rem; }

.pj-voet { background: var(--marine-950); color: var(--marine-200); padding-block: 28px; }
.pj-voet a { color: #fff; }
.pj-voet .pj-klein { color: var(--marine-200); }

@media (max-width: 640px) {
  .pj-rij { grid-template-columns: 1fr; }
}