/* ===========================
   BASIS & TYPOGRAFIE
=========================== */
html {
  font-family: 'Hiragino Mincho ProN','Yu Mincho','Noto Serif JP','Source Han Serif',
               'Sawarabi Mincho','Hiragino Kaku Gothic ProN','Yu Gothic','Noto Sans JP',
               'Meiryo','MS PGothic',serif;
  font-size: 16px;         /* basisgrootte */
  line-height: 1.5;        /* globale regelafstand */
  -webkit-text-size-adjust: 100%;
}
body {
  background: #000 !important;
  color: #fff;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font: inherit;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea {
  font: inherit;
  line-height: inherit;
  box-sizing: border-box;
}
a { text-decoration: none; }

/* Globale body copy (matcht index) */
p, li {
  font-size: 1rem;
  line-height: 1.7;
  letter-spacing: .02em;
  margin: 0 0 10px;
}
ul, ol { margin: 0 0 16px 1.2em; }

/* Titels overal goud */
:root {
  --gold: #bfa46f;
  --gold-hover: #9e8759;
}
h1, h2, h3, h4, h5, h6 {
  color: var(--gold);
  font-weight: normal;
  letter-spacing: .03em;
  margin: 0 0 .5em;
}

/* ===========================
   HEADER & NAV
=========================== */
.site-header { position: relative; z-index: 10; background: transparent; }

.hz-header-bg {
  position: relative;
  background: transparent !important;
  min-height: 200px;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 2px solid #222; padding: 0 20px;
}

.hz-logo { height: 150px; width: auto; max-width: 150vw; }

/* Taal switch */
.lang-switch {
  position: absolute; top: 10px; right: 20px;
  display: flex; align-items: center; gap: 10px; font-size: 10px;
}
.lang-switch a { color: #000 !important; font-weight: bold; }
.lang-switch a:hover { text-decoration: underline; }
.lang-switch .sep { opacity: .5; }

/* Menu */
.hz-menu {
  width: 100%; background: #121b22; border-bottom: 2px solid #27303a; margin-bottom: 25px;
}
.hz-menu ul { display: flex; justify-content: center; margin: 0; padding: 0 2vw; list-style: none; }
.hz-menu li { flex: 1 1 0; text-align: center; border-right: 1px solid #27303a; }
.hz-menu li:last-child { border-right: none; }
.hz-menu a {
  display: block; color: #cbe6fa; font-size: 1.07em;
  padding: 15px 0 12px; letter-spacing: .01em;
  transition: color .2s, border-bottom .2s, background .2s;
}
.hz-menu li.active a,
.hz-menu a:hover {
  color: #fff; border-bottom: 3px solid var(--gold);
  background: rgba(44,56,65,.16);
}

/* ===========================
   LOGIN / SHOP – 2 transparante knoppen
=========================== */
.pw-row {
  display: flex !important; gap: 10px; margin-top: 10px; flex-wrap: wrap; align-items: center;
}
.pw-row .pw-btn {
  flex: 1; display: flex; align-items: center; justify-content: center;
  height: 42px; padding: 0 14px; border: none !important; border-radius: 7px;
  background: transparent !important; color: #fff !important;
  font-size: 1em; line-height: 1; cursor: pointer;
}
.pw-row .pw-btn:hover { background: rgba(255,255,255,.15) !important; }

/* ===========================
   FOOTER
=========================== */
.hz-footer-bg {
  background: linear-gradient(to bottom, #101418 0%, #fff 95%);
  padding: 44px 0 16px; border-top: 2px solid #232323; margin-top: 60px; position: relative;
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
.hz-footer-content {
  max-width: 600px; margin: 0 auto; text-align: center; color: #232b33; font-size: 1.05em; padding: 0 16px;
}
.hz-footer-info { margin-bottom: 16px; line-height: 1.7; }
.hz-footer-info a { color: #1a4460; text-decoration: underline; transition: color .15s; }
.hz-footer-info a:hover { color: var(--gold); }
.hz-footer-copyright { color: #525d69; font-size: .97em; margin-bottom: 8px; }

/* Cookie melding */
.hz-footer-cookies { display: block; text-align: center; color: #000; font-size: .9em; margin-top: 20px; width: 100%; }
.hz-cookie-btn { background: #fff; color: #1a4460; border: 1px solid #1a4460; border-radius: 4px; padding: 5px 14px; font-size: .85em; cursor: pointer; }
.hz-cookie-btn:hover { background: var(--gold); color: #fff; border-color: var(--gold); }

/* ===========================
   HOMEPAGE – IMAGE GRID (3×5)
=========================== */
.image-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px;
  max-width: 1100px; margin: 0 auto; padding: 0 16px;
}
.image-grid .grid-item { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 8px; background: #0d0d0d; }
.image-grid .grid-item img { width: 100%; height: 100%; display: block; object-fit: cover; }
@media (max-width: 900px) { .image-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .image-grid { grid-template-columns: 1fr; } }

/* ===========================
   ABOUT PAGE
=========================== */
.about-page { max-width: 1100px; margin: 0 auto; padding: 12px 16px 40px; }
.about-title { text-align: center; margin: 22px 0 10px; font-size: clamp(24px, 3vw, 34px); }
.about-intro { max-width: 820px; margin: 8px auto 28px; text-align: center; }
.about-intro p { margin: 0 0 10px; }
.about-h2 { text-align: center; margin: 14px 0; font-size: clamp(18px, 2.1vw, 24px); }

/* Certificaten – altijd 2×2 */
.cert-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px;
  max-width: 980px; margin: 6px auto 24px;
}
.cert-item { background: #fff; border-radius: 10px; padding: 10px; display: flex; flex-direction: column; align-items: center; }
.cert-item img { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; display: block; }
.cert-item figcaption { color: #111; font-size: .9em; margin-top: 6px; text-align: center; }

/* ===========================
   VIDEO (Collection)
=========================== */
.hz-video-bg { display: flex; justify-content: center; align-items: center; width: 100%; margin: 0 auto; }
.hz-video { max-width: 100%; height: auto; display: block; }

/* ===========================
   EXPERIENCES PAGE
=========================== */
.exp-content { max-width: 800px; margin: 0 auto; padding: 20px; text-align: center; }
.exp-block { margin-bottom: 40px; }
.exp-block h4 { margin-top: 25px; font-size: 1.2em; color: var(--gold); }
.exp-block ul {
  list-style: none; padding: 0; margin: 0 auto; display: inline-block; text-align: left;
}
.exp-block li { margin-bottom: 15px; }

/* Formulieren (zwart/wit behouden) */
.exp-form-block { margin-top: 32px; }
.exp-form-block h3 { margin-bottom: 20px; }
.exp-form label { display: block; margin-bottom: 15px; text-align: left; }
.exp-form input, .exp-form select, .exp-form textarea {
  width: 100%; margin-top: 3px; padding: 10px;
  border-radius: 7px; border: 1px solid #cbe6fa; background: #191b1c; color: #fff;
}
.exp-form input, .exp-form select { height: 42px; appearance: none; }
.exp-form textarea { min-height: 120px; resize: vertical; }
.exp-form button {
  margin-top: 13px; background: var(--gold); color: #fff; border: none; border-radius: 7px;
  padding: 14px 0; font-size: 1.08em; width: 100%; cursor: pointer;
}
.exp-form button:hover { background: var(--gold-hover); }
.exp-consent-note { font-size: .9em; line-height: 1.4; margin: 15px 0; }
.exp-consent-note a { color: var(--gold); text-decoration: underline; }

/* Captcha centreren */
.captcha-gradient { display: flex; justify-content: center; margin: 20px 0; }

/* ===========================
   RESPONSIVE TWEAKS
=========================== */
@media (max-width: 700px) {
  .hz-header-bg { min-height: 110px; }
  .hz-logo { height: 80px; margin: 16px 0; }
  .hz-menu a { padding: 10px 0 8px; font-size: 1em; }
}