/*
Theme Name: Renske Welie
Theme URI: https://renskewelie.nl
Description: Maatwerkthema voor het portfolio van Renske Welie. Zwart-wit en minimalistisch, met een eigen onderdeel Werk waarin schilderijen per reeks worden beheerd. Vaste banner met uitklapmenu, een eigen pagina per reeks en een vergrote weergave per werk.
Version: 1.4.1
Requires at least: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: renske-welie
*/

/* ---------- Lettertypen, lokaal gehost (geen verbinding met Google) ---------- */

@font-face {
  font-family: "Archivo";
  src: url(assets/fonts/archivo-variable.woff2) format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archivo Narrow";
  src: url(assets/fonts/archivo-narrow-variable.woff2) format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bebas Neue";
  src: url(assets/fonts/bebas-neue.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

:root {
  --wit: #ffffff;
  --tekst: #262626;
  --zwart: #000000;
  --grijs: #7c7c7c;
  --lijn: #eaeaea;
  --accent: #808080;
  --banner: 74px;
}

* { box-sizing: border-box; margin: 0; padding: 0 }

html {
  -webkit-font-smoothing: antialiased;
  /* Het vloeiend scrollen wordt in het script geregeld, zodat het overal
     hetzelfde werkt. Staat het hier ook aan, dan gaan de twee elkaar tegen. */
}

body {
  background: var(--wit);
  color: var(--tekst);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: .01em;
}

a { color: inherit; text-decoration: none }
img { display: block; width: 100%; height: auto }

h1, h2, h3 {
  font-family: "Archivo Narrow", "Archivo", sans-serif;
  color: var(--zwart);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: .01em;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--zwart);
  outline-offset: 3px;
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 40px }
@media (max-width: 520px) { .wrap { padding: 0 22px } }

.verborgen {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}

.overslaan {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--zwart);
  color: var(--wit);
  padding: 10px 18px;
  z-index: 1200;
}
.overslaan:focus { left: 12px; top: 12px }

/* ---------- Vaste banner ---------- */

body { padding-top: var(--banner) }

.banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--accent);
  color: var(--wit);
}

.banner-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-top: 12px;
  padding-bottom: 12px;
  position: relative;
}

.banner .naam {
  font-family: "Bebas Neue", "Archivo Narrow", sans-serif;
  font-weight: 400;
  font-size: 26px;
  color: var(--wit);
  letter-spacing: .06em;
  line-height: 1.05;
}
.banner .naam a { color: inherit }

.banner .subnaam {
  font-family: "Archivo", sans-serif;
  font-size: 14px;
  color: var(--wit);
  letter-spacing: .04em;
  margin-top: 2px;
  line-height: 1.3;
}

.menu-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  color: var(--wit);
  background: transparent;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.menu-knop:focus-visible { outline: 2px solid var(--wit); outline-offset: 2px }

.strepen { position: relative; display: block; width: 24px; height: 16px }

.strepen span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1), opacity .18s ease;
}
.strepen span:nth-child(1) { top: 0 }
.strepen span:nth-child(2) { top: 7px }
.strepen span:nth-child(3) { top: 14px }

.menu-knop[aria-expanded="true"] .strepen span:nth-child(1) { transform: translateY(7px) rotate(45deg) }
.menu-knop[aria-expanded="true"] .strepen span:nth-child(2) { opacity: 0 }
.menu-knop[aria-expanded="true"] .strepen span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) }

.menu-paneel {
  position: absolute;
  top: 100%;
  right: 40px;
  min-width: 190px;
  display: flex;
  flex-direction: column;
  background: var(--accent);
  padding: 6px 0 10px;
}

/* Zonder script blijft het menu gewoon staan, zodat de site bruikbaar blijft. */
.js .menu-paneel {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  clip-path: inset(0 0 100% 0);
  transition:
    opacity .2s ease,
    transform .34s cubic-bezier(.22, .61, .36, 1),
    clip-path .34s cubic-bezier(.22, .61, .36, 1),
    visibility 0s linear .34s;
}

.js .menu-paneel.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  clip-path: inset(0 0 0 0);
  transition:
    opacity .16s ease,
    transform .34s cubic-bezier(.22, .61, .36, 1),
    clip-path .34s cubic-bezier(.22, .61, .36, 1),
    visibility 0s;
}

/* De regels komen kort na elkaar tevoorschijn. */
.js .menu-paneel a {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .2s ease, transform .26s ease, background-color .2s ease;
}
.js .menu-paneel.open a { opacity: 1; transform: none }
.js .menu-paneel.open a:nth-child(1) { transition-delay: .06s }
.js .menu-paneel.open a:nth-child(2) { transition-delay: .11s }
.js .menu-paneel.open a:nth-child(3) { transition-delay: .16s }

@media (max-width: 520px) { .menu-paneel { right: 22px } }

.menu-paneel a {
  color: var(--wit);
  font-size: 16px;
  letter-spacing: .02em;
  /* Ruim genoeg om met een vinger te raken. */
  padding: 12px 22px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s ease;
}
.menu-paneel a:hover { background: rgba(0, 0, 0, .18) }
.menu-paneel a:focus-visible { outline: 2px solid var(--wit); outline-offset: -2px }

/* ---------- Submenu bij Werken ---------- */

/* Er is geen apart desktopmenu: het hoofdmenu is op elke breedte hetzelfde
   uitklappaneel. De reeksen staan daarom altijd ingesprongen onder Werken,
   zodra het hoofdmenu open is. */
.menu-item-sub { display: flex; flex-direction: column }

.submenu { list-style: none }

.submenu a {
  display: block;
  color: var(--wit);
  font-size: 14px;
  letter-spacing: .02em;
  opacity: .85;
  padding: 10px 22px 10px 38px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s ease, opacity .2s ease;
}
.submenu a:hover { background: rgba(0, 0, 0, .18); opacity: 1 }
.submenu a:focus-visible { outline: 2px solid var(--wit); outline-offset: -2px }

/* Een reeks openen is een nieuwe pagina. De inhoud komt rustig in beeld in
   plaats van in één keer, zodat de overgang minder hard aanvoelt. Alleen de
   doorzichtigheid beweegt, want een verschuiving zou de plakkende reeksbalk
   in de war brengen. */
.js main { animation: rw-binnen .34s ease both }

@keyframes rw-binnen {
  from { opacity: 0 }
  to { opacity: 1 }
}

/* ---------- Inleiding ---------- */

.intro { max-width: 560px; margin: 56px 0 64px }
.intro p { margin: 0 0 18px }
.intro p:last-child { margin-bottom: 0 }

/* ---------- Reeksnavigatie ---------- */

.cats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 17px;
  margin: 40px 0 40px;
  border-bottom: 1px solid var(--lijn);
  padding: 10px 0 14px;
  position: sticky;
  top: var(--banner);
  background: var(--wit);
  z-index: 20;
  scroll-margin-top: var(--banner);
}

/* Op de startpagina sluit de balk aan op de inleiding. */
.intro + .cats { margin-top: 0 }

.cats a {
  color: var(--grijs);
  padding: 6px 12px;
  border-radius: 2px;
  transition: background-color .3s ease, color .3s ease;
}
.cats a:hover { background: var(--accent); color: var(--wit) }
.cats a.actief { color: var(--zwart) }
.cats a.actief:hover { color: var(--wit) }

/* ---------- Galerij ---------- */

.reeks { scroll-margin-top: calc(var(--banner) + 56px) }
.reeks + .reeks { margin-top: 72px }
.reeks[hidden] { display: none }
.reeks.eerst { margin-top: 0 }

.reeks-titel {
  font-size: 20px;
  margin: 0 0 26px;
  letter-spacing: .04em;
}
.reeks-titel a:hover { color: var(--accent) }

/* ---------- Pagina van één reeks ---------- */

.reeks-los { margin-top: 8px }
.reeks-los .reeks-titel { font-size: 26px; margin: 0 0 20px }

.reeks-omschrijving { max-width: 46ch; margin: 0 0 40px }
.reeks-omschrijving p { margin: 0 0 14px }
.reeks-omschrijving p:last-child { margin-bottom: 0 }

/* Alleen zichtbaar voor wie is ingelogd en mag bewerken. */
.reeks-omschrijving-leeg {
  max-width: 46ch;
  margin: 0 0 40px;
  padding: 18px 20px;
  border: 1px dashed var(--grijs);
  background: #fafafa;
  color: var(--grijs);
  font-size: 13px;
  line-height: 1.7;
}
.reeks-omschrijving-leeg a { text-decoration: underline; text-underline-offset: 3px }

.terug { margin: 56px 0 0; font-size: 14px; color: var(--grijs) }
.terug a:hover { color: var(--zwart) }

.gallerij { column-count: 3; column-gap: 34px }
@media (max-width: 820px) { .gallerij { column-count: 2 } }
@media (max-width: 520px) { .gallerij { column-count: 1 } }

.werk { break-inside: avoid; margin: 0 0 40px }
.doek { line-height: 0 }

.zoombaar {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  line-height: 0;
  cursor: zoom-in;
}

.bijschrift { padding: 12px 2px 0 }
.bijschrift .t {
  font-family: "Archivo Narrow", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: var(--zwart);
}
.bijschrift .m { font-size: 13px; color: var(--grijs); line-height: 1.6 }
.bijschrift .p {
  font-family: "Archivo Narrow", sans-serif;
  font-size: 14px;
  color: var(--zwart);
  margin-top: 2px;
}
.bijschrift .prijs { color: var(--zwart) }

.leeg { color: var(--grijs); font-size: 14px; margin: 0 0 40px }

/* ---------- Over ---------- */

.over {
  margin: 104px 0 0;
  padding-top: 64px;
  border-top: 1px solid var(--lijn);
  max-width: 640px;
  scroll-margin-top: calc(var(--banner) + 20px);
}
.over h2 { font-size: 26px; margin: 0 0 24px }
.over p { margin: 0 0 18px }
.over p:last-child { margin-bottom: 0 }

.over-foto { margin: 0 0 28px }
.over-foto figcaption { font-size: 13px; color: var(--grijs); margin-top: 8px; line-height: 1.6 }

/* Alleen zichtbaar voor wie is ingelogd en mag bewerken. */
.over-foto-leeg {
  margin: 0 0 28px;
  border: 1px dashed var(--grijs);
  background: #fafafa;
  color: var(--grijs);
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
  padding: 46px 24px;
}
.over-foto-leeg a { text-decoration: underline; text-underline-offset: 3px }

/* ---------- Contact ---------- */

.contact {
  margin: 104px 0 60px;
  padding-top: 36px;
  border-top: 1px solid var(--lijn);
  scroll-margin-top: calc(var(--banner) + 20px);
}
.contact h2 { font-size: 26px; margin: 0 0 26px }
.contact-intro { max-width: 560px; margin: 0 0 26px }
.contact-intro p { margin: 0 0 12px }

.contact-form { display: flex; flex-direction: column; gap: 18px; max-width: 560px }
.contact-form .veld { display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: var(--grijs) }
.contact-form input,
.contact-form textarea {
  font-family: inherit;
  font-size: 15px;
  color: var(--tekst);
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: 2px;
  padding: 11px 12px;
  line-height: 1.5;
  transition: border-color .25s ease;
}
.contact-form input:focus,
.contact-form textarea:focus { outline: none; border-color: var(--zwart) }
.contact-form textarea { resize: vertical; min-height: 120px }

.contact-form .verzend {
  -webkit-appearance: none;
  appearance: none;
  align-self: flex-start;
  margin: 0;
  font-family: "Archivo Narrow", sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .06em;
  line-height: 1.2;
  color: var(--wit);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 2px;
  padding: 12px 28px;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}
.contact-form .verzend:hover { background: var(--wit); color: var(--accent) }

.honeypot { position: absolute; left: -9999px }

.form-status { font-size: 13px; color: var(--zwart); min-height: 1em }
.form-status.fout { border-left: 2px solid var(--zwart); padding-left: 12px }
.form-uitleg { font-size: 12px; color: var(--grijs); line-height: 1.6 }

/* ---------- Voet ---------- */

.site-footer { background: #333333; width: 100%; margin-top: 0 }

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 28px;
  padding-bottom: 28px;
  font-size: 14px;
  color: #c9c9c9;
}
.site-footer a { color: #c9c9c9 }
.site-footer a:hover { color: #ffffff }
.site-footer a:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px }

.footer-tekst { margin: 0; font-size: 14px; color: #c9c9c9; max-width: 60ch }
.footer-tekst p { margin: 0 }
.footer-tekst p + p { margin-top: 6px }

.footer-rechten { display: block; margin-top: 8px; font-size: 12px; color: #9a9a9a }
.footer-rechten a { color: #9a9a9a }

.footer-iconen { display: flex; gap: 18px; align-items: center }
.footer-iconen a { color: #c9c9c9; display: inline-flex; align-items: center }
.footer-iconen a:hover { color: #ffffff }
.footer-iconen svg { display: block; width: 22px; height: 22px }

/* ---------- Losse pagina ---------- */

.pagina { margin: 40px 0 80px; max-width: 640px }
.pagina h1 { font-size: 30px; margin: 0 0 26px }
.pagina h2 { font-size: 22px; margin: 34px 0 14px }
.pagina h3 { font-size: 18px; margin: 28px 0 12px }
.pagina p { margin: 0 0 18px }
.pagina ul, .pagina ol { margin: 0 0 18px 20px }
.pagina li { margin: 0 0 6px }
.pagina a { text-decoration: underline; text-underline-offset: 3px }
.pagina img { margin: 26px 0 }
.pagina table { border-collapse: collapse; width: 100%; margin: 0 0 18px }
.pagina th, .pagina td { border-bottom: 1px solid var(--lijn); padding: 9px 0; text-align: left; font-size: 14px }

/* ---------- Vergrote weergave ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
  overflow: hidden;
}
.lightbox.open { display: flex }

.lb-stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
}

.lb-img {
  max-width: 92vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  transform: translate(0px, 0px) scale(1);
  transform-origin: center center;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}
.lb-img.kanslepen { cursor: grab }
.lb-img.sleept { cursor: grabbing }

.lb-bijschrift {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 40px 24px 20px;
  text-align: center;
  color: var(--wit);
  font-size: 13px;
  line-height: 1.7;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .8));
  pointer-events: none;
}
.lb-bijschrift .t {
  font-family: "Archivo Narrow", sans-serif;
  font-size: 16px;
  font-weight: 500;
  display: block;
}
.lb-bijschrift .m { color: #b9b9b9 }
.lb-bijschrift .o { display: block; margin-top: 4px }
.lb-bijschrift .p { display: block; margin-top: 4px; font-family: "Archivo Narrow", sans-serif }

.lb-close {
  position: fixed;
  top: 18px;
  right: 22px;
  width: 44px;
  height: 44px;
  font-size: 30px;
  line-height: 1;
  color: var(--wit);
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1001;
}
.lb-close:focus-visible { outline: 2px solid var(--wit); outline-offset: 3px }

/* ---------- Rustige overgang bij het openen van een pagina ---------- */

@keyframes rw-verschijnen {
  from { opacity: 0 }
  to   { opacity: 1 }
}

main { animation: rw-verschijnen .34s ease both }

.reeks-titel a { transition: color .25s ease }
.terug a,
.footer-iconen a,
.site-footer a { transition: color .25s ease }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  .js main { animation: none }
  .js .menu-paneel a { opacity: 1; transform: none; transition-delay: 0s !important }
  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (max-width: 767px) {
  .cats {
    display: none;
  }
}