/* Franka Verbruggen — statische portfolio-site
   Typografie en kleuren volgen het originele thema: Poppins, zwart op wit. */
:root {
  --bg: #fff;
  --text: #000;
  --accent: hsl(218, 37%, 23%);
  --muted: hsl(60, 7%, 87%);
  --site-gutter: 4vw;
  --header-h: 96px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h2, h4 { font-weight: 500; line-height: 1.4; margin: 0 0 1rem; }
h2 { font-size: calc(1.8 * 0.012 * min(100vh, 900px) + 1rem); }
h4 { font-size: calc(0.2 * 0.012 * min(100vh, 900px) + 1rem); }

.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: #000; color: #fff; padding: .6em 1em; }
.skip:focus { left: 1rem; top: 1rem; }

/* ---------- Header (vast, verdwijnt bij naar beneden scrollen) ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem;
  padding: 2vw var(--site-gutter);
  background: var(--bg);
  transition: transform .35s ease;
}
.site-header.is-hidden { transform: translateY(-100%); }
.site-title {
  justify-self: start;
  font-weight: 500; line-height: 1.4; text-decoration: none;
  font-size: calc(1 * 0.012 * min(100vh, 900px) + 1rem);
  white-space: nowrap;
}
.site-nav { display: flex; gap: 0 1.6vw; justify-content: center; }
.site-nav a { text-decoration: none; line-height: 1.8; padding: .1em .2em; }
.site-nav a[aria-current="page"], .mobile-menu a[aria-current="page"] {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat; background-size: 100% 1px; background-position: 0 100%;
}
.site-nav a:hover { opacity: .6; }
.header-social { justify-self: end; display: flex; gap: .4rem; }
.header-social a, .footer-social a, .mobile-social a { display: inline-flex; width: 30px; height: 30px; }
.header-social svg, .footer-social svg, .mobile-social svg { width: 100%; height: 100%; fill: currentColor; }
.header-social a:hover, .footer-social a:hover { opacity: .6; }

.burger { display: none; justify-self: end; width: 36px; height: 36px; border: 0; background: none; padding: 0; cursor: pointer; position: relative; }
.burger span { position: absolute; left: 6px; right: 6px; height: 1px; background: currentColor; transition: transform .25s ease, top .25s ease; }
.burger span:first-child { top: 14px; }
.burger span:last-child { top: 21px; }
.burger[aria-expanded="true"] span:first-child { top: 18px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { top: 18px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 15; background: var(--bg);
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2rem;
  padding: var(--header-h) 6vw 6vw;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu nav { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.mobile-menu nav a { font-size: 1.6rem; text-decoration: none; line-height: 1.6; }
.mobile-social { display: flex; gap: .6rem; }

@media (max-width: 767px) {
  :root { --site-gutter: 6vw; --header-h: 72px; }
  .site-header { grid-template-columns: 1fr auto; padding: 4vw var(--site-gutter); }
  .site-nav, .header-social { display: none; }
  .burger { display: block; }
  .site-title { font-size: 1.25rem; }
}

main { padding-top: var(--header-h); }

/* ---------- Galerij (justified rijen) ---------- */
.gallery {
  display: flex; flex-wrap: wrap; gap: var(--gutter);
  padding: var(--gutter);
}
.gallery--inset { max-width: calc(1500px + 2 * var(--site-gutter)); margin: 0 auto; padding: var(--gutter) var(--site-gutter); }
.gallery figure {
  margin: 0; position: relative; overflow: hidden; background: #f3f3f1;
  /* fallback zonder JS: rijen ongeveer op de doelhoogte */
  height: var(--row); flex: 1 1 calc(var(--ar) * var(--row));
}
.gallery figure a { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.gallery figure img { width: 100%; height: 100%; object-fit: cover; }
.gallery.is-laid-out figure { flex: 0 0 auto; }
.gallery.is-laid-out figure.row-end { flex: 1 1 auto; }

/* fade-up bij scrollen */
.js .gallery figure { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.js .gallery figure.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .gallery figure { opacity: 1; transform: none; transition: none; }
  .site-header { transition: none; }
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 50; background: rgba(255, 255, 255, .98);
  display: flex; align-items: center; justify-content: center;
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: calc(94vw - 40px); max-height: calc(94vh - 40px);
  width: auto; height: auto; object-fit: contain; user-select: none;
}
.lightbox button {
  position: absolute; border: 0; background: none; color: var(--text); cursor: pointer; padding: 0;
  width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
}
.lightbox button svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 1.2; }
.lightbox button:hover { opacity: .6; }
.lb-close { top: 2vw; right: 2vw; }
.lb-prev { left: 1.5vw; top: 50%; transform: translateY(-50%); }
.lb-next { right: 1.5vw; top: 50%; transform: translateY(-50%); }
@media (max-width: 575px) {
  .lightbox img { max-width: 88vw; max-height: 88vh; }
  .lb-prev, .lb-next { top: auto; bottom: 3vh; transform: none; }
  .lb-close { top: 3vw; right: 3vw; }
}

/* ---------- Footer-strook ---------- */
.site-footer {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  padding: 2rem var(--site-gutter) 3rem;
}
.site-footer h4 { margin: 0; }
.site-footer h4 a { text-decoration: none; }
.site-footer h4 a:hover { opacity: .6; }
.footer-social { display: flex; gap: .4rem; justify-content: center; }
.footer-social a { width: 24px; height: 24px; }
@media (max-width: 767px) {
  .site-footer { grid-template-columns: auto auto; justify-content: space-between; }
  .site-footer > span { display: none; }
}

/* ---------- Contact ---------- */
.contact {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 6vw; align-items: start;
  padding-left: var(--site-gutter);
}
.contact-text { padding-top: 3vw; max-width: 640px; }
.contact-text h2 { margin-bottom: 2.5rem; }
.contact-image { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); min-height: 520px; }
.contact-image img { width: 100%; height: 100%; object-fit: cover; }

.contact-form { margin-top: 2rem; display: flex; flex-direction: column; gap: 1.4rem; }
.contact-form fieldset { border: 0; margin: 0; padding: 0; }
.contact-form legend, .contact-form label > span { display: block; font-weight: 400; font-size: .9rem; margin-bottom: .3rem; }
.contact-form em { font-style: normal; opacity: .6; font-weight: 300; }
.contact-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.contact-form .row span { font-weight: 300; font-size: .8rem; opacity: .8; }
.contact-form input:not([type="checkbox"]), .contact-form textarea {
  width: 100%; font: inherit; color: inherit; background: transparent;
  border: 0; border-bottom: 1px solid var(--text); border-radius: 0; padding: .5rem 0;
}
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-bottom-width: 2px; }
.contact-form textarea { resize: vertical; border: 1px solid var(--text); padding: .6rem; }
.checks { display: flex; flex-wrap: wrap; gap: .5rem; }
.checks legend { width: 100%; }
.check { position: relative; }
.check input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.check span {
  display: inline-block; border: 1px solid var(--text); padding: .35rem .9rem; font-size: .9rem; cursor: pointer;
}
.check input:checked + span { background: var(--text); color: var(--bg); }
.check input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.contact-form button {
  align-self: stretch; font: inherit; font-weight: 400; cursor: pointer;
  background: var(--text); color: var(--bg); border: 1px solid var(--text); padding: 1rem;
}
.contact-form button:hover { background: var(--bg); color: var(--text); }
.form-error { color: #a40000; margin: 0; font-size: .9rem; }
.form-done { margin-top: 2rem; }

.address { padding: 10vmax var(--site-gutter) 4vmax; }
.address p { margin: 0 0 1rem; }
.address a { text-decoration: none; }

@media (max-width: 767px) {
  /* mobiel zoals het origineel: titel, foto, tekst, formulier */
  .contact { display: flex; flex-direction: column; padding: 6vw var(--site-gutter) 0; }
  .contact-text { display: contents; }
  .contact-text h2 { order: 1; margin-bottom: 1.5rem; }
  .contact-image { order: 2; position: static; height: auto; min-height: 0; }
  .contact-image img { height: auto; }
  .contact-text > p { order: 3; margin-top: 2rem; }
  .contact-form, .form-done { order: 4; }
}

.notfound { padding: 12vh var(--site-gutter); min-height: 50vh; }