/* =========================================================
   Droomkerk – statische versie
   ========================================================= */

/* Open Sans, lokaal (kopieer de .woff2-bestanden naar /fonts) */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0C4iY1M2xLER.woff2") format("woff2"),
       url("../fonts/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0C4iY1M2xLER.woff2") format("woff2");
}

:root {
  --header-h: 64px;
  --bg: #f9f9f9;
  --text: #333;
  --muted: #666;
  --line: #ccc;
  --accent: #7e8344;
  --overlay: rgba(10, 10, 10, 0.8);
  --header-bg: #111;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Open Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}

img { max-width: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  background: var(--header-bg);
  color: #fff;
}

.header-inner {
  max-width: 1300px;
  height: 100%;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.brand-icon { width: 18px; height: 24px; }

.main-nav {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scrollbar-width: none;
}
.main-nav::-webkit-scrollbar { display: none; }

.main-nav a {
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.95rem;
}
.main-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Mozaïek ---------- */
.hero {
  position: relative;
  margin-top: var(--header-h);
  height: calc(100vh - var(--header-h));
  height: calc(100svh - var(--header-h));
  overflow: hidden;
  background: #000;
}

.mosaic {
  column-count: 6;
  column-gap: 2px;
}

.mosaic img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 2px;
  break-inside: avoid;
}

@media (max-width: 1400px) { .mosaic { column-count: 5; } }
@media (max-width: 1100px) { .mosaic { column-count: 4; } }
@media (max-width: 800px)  { .mosaic { column-count: 3; } }
@media (max-width: 500px)  { .mosaic { column-count: 2; } }

/* Met JavaScript: echte kolommen, gevuld in rij-volgorde */
.mosaic.js { display: flex; gap: 2px; column-count: auto; }
.mosaic.js .mosaic-col { flex: 1; min-width: 0; }

/* ---------- Titelbalk over de mozaïek ---------- */
.hero-title {
  position: absolute;
  top: 20vh;
  left: 0;
  max-width: min(1000px, 92vw);
  padding: 10px 16px;
  background: var(--overlay);
  color: #fff;
}

.hero-title h1 {
  margin: 0;
  font-weight: 300;
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  text-transform: uppercase;
  line-height: 1.25;
}

.hero-title .subtitle {
  margin: 0 0 12px;
  color: var(--accent);
  font-style: italic;
  font-weight: 300;
}

.hero-title .tagline { margin: 0; }

/* ---------- Secties ---------- */
.section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 72px 16px 48px;
  scroll-margin-top: var(--header-h);
}

.section h2 {
  margin: 0;
  text-align: center;
  text-transform: uppercase;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
}

/* dubbele lijn onder de kop, zoals op de oude site */
.divider {
  max-width: 620px;
  height: 4px;
  margin: 4px auto 32px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section p { color: var(--muted); }

.center { text-align: center; }

.todo { text-align: center; font-style: italic; color: #aaa; }

.button {
  display: inline-block;
  padding: 12px 24px;
  background: #333;
  color: #fff;
  text-decoration: none;
}
.button:hover { background: #000; }

.section h3 {
  margin: 0 0 12px;
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--text);
}

.intro p { text-align: center; }

.rule {
  border: 0;
  border-top: 1px solid #ddd;
  margin: 32px 0;
}

/* Lijst in twee kolommen met het bloemetje van de oude site */
.column-2 { columns: 2; column-gap: 32px; }
@media (max-width: 600px) { .column-2 { columns: 1; } }

ul.fleuron-bullet { margin: 0; padding-left: 20px; color: var(--muted); }
ul.fleuron-bullet li {
  padding-inline-start: 1ch;
  break-inside: avoid;
  list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' version='1.1' viewBox='0 0 551.03 577.59'%3E%3Cg transform='translate(-31.179 -14.729)'%3E%3Cpath d='m306.47 591.76c-0.0929-0.308-1.3468-3.0788-2.7864-6.1574-7.0355-15.045-14.478-33.653-20.225-50.563-1.4055-4.136-3.338-9.8224-4.2945-12.636-2.2707-6.6809-3.0011-10.322-2.9958-14.934 6e-3 -4.8099 0.68049-7.9156 3.5053-16.13 1.2672-3.6848 3.0219-8.7877 3.8994-11.34 2.5735-7.4842 4.1914-14.965 5.0525-23.36 0.42427-4.1367 0.96865-16.071 0.97434-21.36l4e-3 -3.92h-16.546l-0.3758 3.76c-2.2408 22.42-7.6936 41.838-16.064 57.205-7.3148 13.429-17.478 25.379-28.294 33.268-10.276 7.4949-21.721 10.872-32 9.4429-15.666-2.1785-25.164-12.002-27.992-28.952-0.5419-3.2478-0.46262-10.68 0.14853-13.924 2.6875-14.264 13.514-26.988 25.592-30.077 4.5868-1.1731 8.9218-0.75056 13.159 1.2826 6.8453 3.285 10.718 9.6915 14.697 24.314 0.50292 1.848 0.96116 3.4215 1.0183 3.4967 0.16619 0.21856 1.9001-1.5338 4.2514-4.2967 6.9773-8.1985 12.992-20.708 15.835-32.935 1.4832-6.3784 2.4106-13.866 2.4106-19.463v-3.2099l-3.12 0.22739c-8.4483 0.61575-12.949 2.0872-25.153 8.2236-4.198 2.1108-7.6802 3.7904-7.7383 3.7323-0.2461-0.2461 0.56499-5.4582 1.302-8.3669 2.6404-10.42 9.3313-17.528 20.162-21.417 3.014-1.0825 9.0923-2.4241 12.155-2.683l2.4827-0.20986-0.18292-3.2292c-0.70538-12.452-6.3129-23.802-16.635-33.67-10.649-10.18-23.996-16.625-39.129-18.892-5.2541-0.78721-18.765-0.77861-25.584 0.0163-19.987 2.33-34.915 8.6784-46.356 19.713-12.068 11.64-19.225 27.563-21.973 48.887-0.64637 5.0162-1.4535 20.004-1.1074 20.564 0.40864 0.66119-0.44651 0.24609-3.3163-1.6098-6.5965-4.2659-12.019-8.7993-18.609-15.557-10.443-10.71-19.329-23.695-26.907-39.32-7.2994-15.05-11.596-29.427-13.791-46.145-0.94771-7.2186-1.0265-20.954-0.15378-26.792 2.7288-18.252 9.2717-33.316 20.58-47.383 13.038-16.219 29.204-26.102 48.918-29.906 18.744-3.6172 48.117-0.94111 69.594 6.3404 26.654 9.0366 47.383 25.204 69.044 53.851 10.571 13.979 17.545 26.61 22.948 41.555 7.0963 19.63 11.505 41.213 13.133 64.297 0.25357 3.5953 0.61587 6.6913 0.80511 6.88 0.33664 0.3356 12.36 0.40005 12.692 0.068 0.2521-0.2521-0.53557-12.199-1.2055-18.285-3.0391-27.607-10.552-52.673-25.079-83.68-1.5255-3.256-6.1023-12.472-10.171-20.48-14.39-28.326-16.787-33.18-19.194-38.88-8.6751-20.543-11.439-34.775-9.6935-49.922 2.3818-20.674 10.877-42.847 28.812-75.198 18.355-33.108 40.496-78.091 51.541-104.71 1.0385-2.503 1.9705-4.555 2.0711-4.56 0.10058-5e-3 1.6741 3.483 3.4967 7.751 12.05 28.218 25.559 55.521 48.401 97.825 19.864 36.788 28.174 57.958 30.476 77.634 0.56198 4.8042 0.63636 14.775 0.14379 19.274-0.90751 8.2889-3.7059 18.131-8.1735 28.746-1.1764 2.795-8.0819 16.89-15.346 31.322-13.098 26.023-17.386 34.931-21.566 44.8-11.982 28.289-18.313 53.976-20.205 81.982-0.20449 3.0262-0.29396 5.705-0.19881 5.9529 0.25282 0.65885 3.6423 0.91869 8.6837 0.66568l4.3048-0.21604 0.17626-1.9523c1.3368-14.806 2.2558-22.559 3.7407-31.552 6.4337-38.967 19.196-65.558 45.654-95.118 21.244-23.735 46.659-38.099 76.55-43.265 12.115-2.0936 20.797-2.8893 31.52-2.8884 9.4107 8.1e-4 12.093 0.23249 18.743 1.6186 19.391 4.0421 37.176 15.626 50.124 32.649 6.6102 8.6898 12.378 20.075 15.284 30.173 2.8773 9.9965 3.8107 16.886 3.8189 28.19 9e-3 11.638-1.0348 19.84-3.9588 31.121-7.281 28.09-25.063 57.583-45.131 74.855-3.3686 2.899-12.411 9.6127-13.521 10.039-0.5981 0.22951-0.8786-1.6588-0.8786-5.9148 0-6.6475-1.1504-16.837-2.7646-24.487-2.8536-13.524-8.4579-25.747-15.852-34.572-12.447-14.858-29.834-22.502-55.666-24.472-26.426-2.0159-47.826 5.4803-63.175 22.129-7.4919 8.1266-12.63 19.853-13.459 30.716l-0.21167 2.7728 1.2439 0.34536c0.68413 0.18996 1.981 0.34618 2.882 0.34716 2.3396 3e-3 6.6136 0.80276 9.5763 1.793 12.737 4.257 20.654 13.976 22.507 27.628 0.17757 1.3088 0.25045 2.4968 0.16194 2.64-0.33017 0.53422-1.3092 0.20961-3.6432-1.208-1.32-0.80172-4.8432-2.676-7.8292-4.165-8.0473-4.0128-14.148-5.7831-22.011-6.3872l-2.8-0.21513v2.9998c0 5.6437 1.1757 13.737 3.0384 20.916 2.8596 11.021 7.7279 21.708 13.236 29.056 1.9873 2.6512 6.0453 7.2644 6.3886 7.2626 0.1196-6.6e-4 0.6356-1.6927 1.1467-3.76 4.0452-16.364 9.4846-23.904 18.644-25.844 2.7721-0.58735 4.8715-0.59301 7.8601-0.0212 14.731 2.8185 26.634 18.218 27.353 35.387 0.50486 12.054-3.0176 22.277-10.076 29.243-4.9045 4.8399-10.803 7.5684-18.44 8.5297-13.712 1.726-28.068-4.4753-42.228-18.241-18.268-17.76-31.268-48.751-33.847-80.688l-0.38478-4.7642h-16.85l6e-3 3.44c0.0138 7.725 0.85951 19.269 1.9516 26.64 1.2802 8.6402 2.3327 12.432 7.6387 27.52 4.437 12.617 5.028 18.876 2.6957 28.544-0.8861 3.6733-5.5661 17.804-8.5074 25.686-2.582 6.9199-6.224 15.826-12.5 30.57-2.8846 6.776-5.8117 13.724-6.5046 15.44-0.69293 1.7159-1.3511 3.1199-1.4626 3.12-0.11147 1.1e-4 -0.27871-0.25181-0.37164-0.55981z' fill='%23666'/%3E%3C/g%3E%3C/svg%3E");
}

/* Lijst over 3 / 2 / 1 kolommen, zoals .column-spread op de oude site */
.column-spread { columns: 3; column-gap: 24px; }
@media (max-width: 1023px) { .column-spread { columns: 2; column-gap: 32px; } }
@media (max-width: 767px)  { .column-spread { columns: 1; } }

/* Sierlijn (img/fleuron.svg van de oude site) */
.fleuron { margin: 48px auto 56px; max-width: 620px; text-align: center; }
.fleuron img { display: block; width: 100%; max-height: 50px; }

.section h2:not(:first-child) { margin-top: 0; }

.cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
@media (max-width: 800px) { .cols-2 { grid-template-columns: 1fr; } }

.statement { margin-top: 32px; font-style: italic; }

/* Tabel bij De omgeving */
.info-table {
  width: 100%;
  max-width: 900px;
  margin: 24px auto 0;
  border-collapse: collapse;
  color: var(--muted);
}
.info-table th,
.info-table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid #e4e4e4; }
.info-table th { width: 34%; font-weight: 600; color: var(--text); }
@media (max-width: 600px) {
  .info-table th,
  .info-table td { display: block; width: auto; }
  .info-table th { border-bottom: 0; padding-bottom: 0; }
}

/* Wetenswaardigheden */
.facts { max-width: 900px; margin: 0 auto; text-align: center; }
.facts h3 { margin-top: 0; }

.narrow { max-width: 760px; margin: 0 auto; }

.stripes { width: 100%; border-collapse: collapse; margin: 16px 0 24px; color: var(--muted); }
.stripes td { padding: 8px 12px; }
.stripes td:last-child { text-align: right; white-space: nowrap; }
.stripes tr:nth-child(odd) { background: #efefef; }

.source { font-size: 0.9rem; }

.links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 32px;
  max-width: 900px;
  margin: 0 auto 32px;
}
.links ul { list-style: none; margin: 0; padding: 0; }
.links li { margin-bottom: 6px; }
.links ul:first-child { text-align: right; }
@media (max-width: 700px) {
  .links { grid-template-columns: 1fr; }
  .links ul:first-child { text-align: left; }
}

a { color: #555; text-underline-offset: 3px; }
a:hover { color: #000; }
.button, .button:hover { color: #fff; }

/* Fotosliders (buitenzijde / binnenzijde) */
.slider-section {
  scroll-margin-top: var(--header-h);
  background: #000;
  padding: 32px 0 0;
}
.slider-title {
  margin: 0 0 20px;
  text-align: center;
  text-transform: uppercase;
  font-weight: 300;
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  color: #fff;
}
.slider-wrap { position: relative; }
.slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  outline: none;
}
.slider::-webkit-scrollbar { display: none; }
.slider img {
  flex: 0 0 100%;
  width: 100%;
  height: min(80vh, 760px);
  height: min(80svh, 760px);
  object-fit: contain;
  background: #000;
  scroll-snap-align: start;
}
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 64px;
  border: 0;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 2.4rem;
  line-height: 1;
  cursor: pointer;
}
.slider-btn:hover,
.slider-btn:focus-visible { background: rgba(0, 0, 0, 0.75); }
.slider-btn.prev { left: 0; }
.slider-btn.next { right: 0; }
.slider-count {
  position: absolute;
  right: 12px;
  bottom: 10px;
  padding: 2px 8px;
  background: rgba(0, 0, 0, 0.5);
  color: #ddd;
  font-size: 0.85rem;
}

/* Contactformulier */
.contact-form { max-width: 620px; margin: 0 auto; }
.contact-form label { display: block; margin: 16px 0 6px; font-weight: 600; color: #555; }
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #c8c8c8;
  background: #fff;
  font: inherit;
  color: var(--text);
}
.contact-form input:focus,
.contact-form textarea:focus { outline: 2px solid #999; outline-offset: 1px; }
.contact-form .button { margin-top: 20px; border: 0; font: inherit; cursor: pointer; }
.form-note { margin: 0; font-size: 0.9rem; }
.req { color: #c00; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-message { max-width: 620px; margin: 0 auto 16px; padding: 14px 16px; text-align: center; }
.form-message.ok { background: #e8f3e6; color: #2d5a27; }
.form-message.fout { background: #fbe9e9; color: #8a1f1f; }

/* ---------- Kaart ---------- */
.map {
  height: 450px;
  scroll-margin-top: var(--header-h);
}

/* ---------- Footer ---------- */
.site-footer {
  padding: 24px 16px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
}

/* ---------- Kleine schermen ---------- */
@media (max-width: 700px) {
  .brand span { display: none; }
  .main-nav { gap: 16px; }
  .hero-title { top: 12vh; }
}