/* CV-pagina (tankhesoft.com/cv) – aanvulling op style.css */
.hero { min-height: clamp(220px, 26vw, 380px); }
.hero h1 { font-size: clamp(2.2rem, 7vw, 5rem); }
.nav ul { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 560px) { .nav a.item { padding: 6px 6px; font-size: 15px; } }

.dim { color: var(--line-number); }
.panel h3 {
  margin: 1.4rem 0 .6rem;
  font-size: 16px;
  font-weight: 700;
  color: var(--subtitle);
}
.panel h3 .prompt { color: var(--line-number); }

/* whoami + personalia */
.whoami-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 40px;
  align-items: start;
}
.whoami-grid .lines { max-width: none; }
.yaml.card { font-size: 15px; }
@media (max-width: 860px) {
  .whoami-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* stack.yaml in kolommen */
.yaml.cols { max-width: none; columns: 2; column-gap: 56px; }
.yaml.cols .ln { break-inside: avoid; }
@media (max-width: 760px) { .yaml.cols { columns: 1; } }

/* git log --career */
.hint { margin: -.8rem 0 1.4rem; font-size: 14px; color: var(--line-number); }
.timeline {
  border-left: 2px solid rgb(84 255 112 / .5);
  margin-left: 8px;
}
.job { position: relative; padding-left: 24px; }
.job::before {
  content: "";
  box-sizing: border-box;  /* rand binnen de breedte, zodat het bolletje op de lijn centreert */
  position: absolute;
  left: -7px;
  top: 19px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--panel);
  border: 2px solid var(--accent);
  box-shadow: 0 0 8px rgb(84 255 112 / .5);
}
.job[open]::before { background: var(--accent); }
.job summary {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) auto;
  gap: 4px 20px;
  align-items: baseline;
  padding: 12px 12px;
  border-radius: 3px;
  cursor: pointer;
  list-style: none;
}
.job summary::-webkit-details-marker { display: none; }
.job summary:hover { background: rgb(84 255 112 / .06); }
.job summary:focus-visible { outline: 1px solid var(--accent); }
.job .when { color: var(--accent); font-size: 15px; }
.job .what b { color: var(--title); font-weight: 700; }
.job .org { display: block; color: var(--text); }
.job .via { color: var(--line-number); }
.job .branche { color: var(--line-number); font-size: 14px; text-align: right; }
.job .body { padding: 4px 12px 28px; max-width: 820px; }
.job .body p { margin: 0 0 .8rem; }
@media (max-width: 760px) {
  .job summary { grid-template-columns: 1fr; }
  .job .branche { text-align: left; }
}

.taken { margin: 0; padding: 0; list-style: none; }
.taken li { position: relative; padding-left: 2ch; margin-bottom: .25rem; }
.taken li::before {
  content: "+";
  position: absolute;
  left: 0;
  font-family: "Courier Prime", "Courier New", monospace;
  color: var(--accent);
}

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tags li {
  padding: 1px 8px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: rgb(84 255 112 / .05);
  color: var(--subtitle);
  font-size: 14px;
}
.inline-tags { color: var(--subtitle); font-size: 15px; }

/* opleiding */
.edu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 56px;
}
.edu-grid h3:first-child { margin-top: 0; }
@media (max-width: 760px) { .edu-grid { grid-template-columns: 1fr; } }
.rows { margin: 0; padding: 0; list-style: none; }
.rows li {
  display: grid;
  grid-template-columns: 5ch minmax(0, 1fr) auto;
  gap: 14px;
  align-items: baseline;
  padding: 5px 0;
  border-bottom: 1px dashed var(--rule);
}
.rows .year { color: var(--line-number); font-size: 14px; }
.rows .name { color: var(--title); }
.rows .status { font-size: 13px; color: var(--line-number); }
.rows .s-behaald, .rows .s-afgerond { color: var(--accent); }
.rows .s-ongoing { color: #e8f26b; }

/* PDF-downloadlinks in de hero */
.hero .downloads {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 1.4em;
}
.hero .download {
  padding: 6px 14px;
  border: 1px solid rgb(84 255 112 / .5);
  border-radius: 3px;
  color: var(--accent);
  text-decoration: none;
  font-size: 16px;
}
.hero .download:hover { background: rgb(84 255 112 / .08); text-shadow: 0 0 .4em rgb(84 255 112 / .5); }

/* Verwijzing naar de volledige werkervaring (korte PDF) */
.timeline .more { margin: 8px 0 0 24px; font-size: 14px; color: var(--line-number); }
.timeline .more a { color: var(--subtitle); text-decoration: none; }

/* Print: donkere stijl behouden, navigatie weglaten, compacte A4-lay-out */
@page { size: A4; margin: 10mm 0; background: #040805; }
@media print {
  html, body { background: var(--black); }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { font-size: 12.5px; line-height: 1.5; }
  .nav, .hint, .divider, .blink, .hero .downloads { display: none; }
  .hero { min-height: 0; padding: 14px 32px 24px; }
  .hero h1 { font-size: 44px; }
  .hero p { font-size: 17px; }
  .panel { padding: 20px 32px; border: 0; }
  .panel h2, .contact-title { font-size: 20px; margin-bottom: 12px; }
  .panel h3 { font-size: 13px; margin: 10px 0 4px; break-after: avoid; }
  .lines { --gutter: 32px; --number-offset: 16px; padding-left: 14px; max-width: none; }
  .lines p:first-child { font-size: 14px; }
  .lines .n, .yaml .ln::before { font-size: 11px; }

  /* desktop-indeling forceren (A4 is smaller dan de breakpoints) */
  .whoami-grid { grid-template-columns: minmax(0, 1fr) 250px; gap: 28px; }
  .yaml { font-size: 12.5px; line-height: 1.6; }
  .yaml.card { font-size: 12.5px; }
  .yaml.cols { columns: 2; column-gap: 40px; }
  .edu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
  .rows li { padding: 3px 0; }

  .job summary { grid-template-columns: 150px minmax(0, 1fr) auto; padding: 8px 8px 4px; break-after: avoid; }
  .job::before { top: 13px; width: 10px; height: 10px; left: -6px; }
  .job .when { font-size: 12.5px; }
  .job .branche { text-align: right; font-size: 11.5px; }
  .job .body { padding: 2px 8px 14px; max-width: none; }
  .job .body p { margin-bottom: .5rem; }
  .taken li { margin-bottom: 1px; break-inside: avoid; }
  .tags { gap: 4px; break-inside: avoid; }
  .tags li { font-size: 11px; padding: 0 6px; }
  .inline-tags { font-size: 12.5px; }

  #side, #opleiding, .contact { break-inside: avoid; }
  .contact { padding: 24px 32px; }
  .contact ul { grid-template-columns: repeat(3, 1fr); }
  .contact .icon { height: 40px; }
  .contact svg.icon { width: 40px; }
  .contact .kvk { font-size: 28px; line-height: 40px; }
}