/* ============================================================
   DenSevents — CSS variabelen & basistijlen
   ============================================================ */

:root {
  /* Accentkleur */
  --dens-accent:       #ff3da8;
  --dens-accent-ink:   #0a0a0a;
  --dens-accent-glow:  rgba(255, 61, 168, 0.35);

  /* Palette */
  --dens-bg:           #0a0a0a;
  --dens-bg-elev:      #141414;
  --dens-bg-elev-2:    #1c1c1c;
  --dens-line:         rgba(255, 255, 255, 0.08);
  --dens-line-strong:  rgba(255, 255, 255, 0.18);
  --dens-ink:          #f5f3ee;
  --dens-ink-dim:      #a8a5a0;
  --dens-ink-faint:    #6e6c68;

  /* Typografie */
  --dens-font-display: "Bricolage Grotesque", "Space Grotesk", sans-serif;
  --dens-font-body:    "Space Grotesk", "Inter", system-ui, sans-serif;
  --dens-font-mono:    "Bricolage Grotesque", "Space Grotesk", sans-serif;

  /* Layout */
  --dens-container:    1440px;
  --dens-gutter:       clamp(20px, 4vw, 56px);
  --dens-radius:       4px;

  /* Plugin-compatibiliteit (behoud van bestaande variabelen) */
  --color-primary:     #ff3da8;
  --color-primary-dark:#e02590;
}

/* ============================================================
   Reset & basis
   ============================================================ */

body { overflow-x: hidden; }
img  { max-width: 100%; }
.img-cover { height: 100%; width: 100%; object-fit: cover; }
iframe { display: block; }

.dens-body {
  background: var(--dens-bg);
  color: var(--dens-ink);
  font-family: var(--dens-font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.dens-body a           { color: var(--dens-ink); text-decoration: none; }
.dens-body a:hover     { color: var(--dens-accent); }
.dens-body ::selection { background: var(--dens-accent); color: var(--dens-accent-ink); }

/* ============================================================
   Container & layout
   ============================================================ */

.dens-container {
  width: 100%;
  max-width: var(--dens-container);
  margin-inline: auto;
  padding-inline: var(--dens-gutter);
  box-sizing: border-box;
}

/* ============================================================
   HEADER
   ============================================================ */

.dens-site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(10, 10, 10, 0.82);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--dens-line);
  transition: background 0.35s ease, border-color 0.35s ease;
}

/* Op de homepagina: fixed header die over de hero zweeft */
.dens-hero-page .dens-site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
/* Donkere header na scrollen */
.dens-hero-page .dens-site-header.dens-scrolled {
  background: rgba(10, 10, 10, 0.82);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom-color: var(--dens-line);
}

.dens-header-inner {
  height: 80px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 40px;
}

/* Logo afbeelding (als geüpload in CMS instellingen) */
.dens-brand__logo {
  height: 57px;
  width: auto;
  max-width: 270px;
  object-fit: contain;
  display: block;
}

/* Brand */
.dens-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--dens-font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.04em;
  color: var(--dens-ink);
  text-decoration: none;
  white-space: nowrap;
  justify-self: start;
}

.dens-brand__mark {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  background: var(--dens-accent);
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 0 2px var(--dens-bg), 0 0 24px var(--dens-accent-glow);
}
.dens-brand__mark::after {
  content: "";
  position: absolute;
  inset: 6px;
  background: var(--dens-bg);
  border-radius: 50%;
}

/* Desktop nav container */
.dens-nav-desktop {
  justify-self: center;
}

/* Nav list (desktop & footer) */
.dens-nav-list {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 2px;
}
.dens-nav-list--mobile {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

/* Nav items */
.dens-nav-item {
  position: relative;
  list-style: none;
}

.dens-nav-link,
.dens-nav-toggle {
  display: block;
  padding: 6px 12px;
  font-family: var(--dens-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--dens-ink);
  text-decoration: none;
  white-space: nowrap;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.15s ease;
  width: 100%;
  text-align: left;
  line-height: 1.5;
  position: relative;
}
.dens-nav-link:hover,
.dens-nav-toggle:hover  { color: var(--dens-accent); }

/* Active state */
.dens-nav-item.dens-nav-active > .dens-nav-link,
.dens-nav-item.dens-nav-active > .dens-nav-toggle { color: var(--dens-ink); }
.dens-nav-item.dens-nav-active > .dens-nav-link::after,
.dens-nav-item.dens-nav-active > .dens-nav-toggle::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: -1px;
  height: 2px;
  background: var(--dens-accent);
  border-radius: 2px 2px 0 0;
}

/* Dropdown toggle arrow */
.dens-nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dens-nav-toggle::before {
  content: "";
  order: 1;
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
}
.dens-nav-item:hover > .dens-nav-toggle::before,
.dens-nav-item:focus-within > .dens-nav-toggle::before { transform: rotate(225deg) translate(-2px, -2px); }

/* Dropdown */
.dens-nav-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 240px;
  background: rgba(18, 18, 18, 0.97);
  backdrop-filter: blur(16px);
  border: 1px solid var(--dens-line);
  border-radius: 6px;
  padding: 8px;
  list-style: none;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
  z-index: 9999;
}
.dens-nav-dropdown::before {
  content: "";
  position: absolute;
  top: -6px; left: 50%; transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid rgba(18, 18, 18, 0.97);
}
.dens-nav-item:hover > .dens-nav-dropdown,
.dens-nav-item:focus-within > .dens-nav-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Dropdown sublinks */
.dens-nav-subitem { list-style: none; }
.dens-nav-sublink {
  display: block;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--dens-ink);
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.15s ease, color 0.15s ease;
}
.dens-nav-sublink:hover { background: rgba(255, 255, 255, 0.04); color: var(--dens-accent); }

/* Onzichtbare brug: vult de ruimte tussen het nav-item en het dropdown-menu,
   zodat de hover niet verloren gaat als de cursor omlaag beweegt naar het menu. */
.dens-nav-desktop .dens-nav-item::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -20px;
  right: -20px;
  height: 14px;
  z-index: 9998;
}

/* Disabled nav item */
.dens-nav-disabled {
  color: rgba(255, 255, 255, 0.2) !important;
  cursor: default;
  pointer-events: none;
}

/* Header actions */
.dens-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-self: end;
}

/* Icon button (Instagram etc.) */
.dens-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--dens-line);
  display: grid;
  place-items: center;
  color: var(--dens-ink);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
  font-size: 16px;
}
.dens-icon-btn:hover { border-color: var(--dens-accent); background: rgba(200, 255, 61, 0.06); color: var(--dens-accent); }
.dens-icon-btn:focus { outline: 2px solid var(--dens-accent); outline-offset: 2px; }

/* Hamburger */
.dens-hamburger {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--dens-line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--dens-ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 15px;
  transition: border-color 0.15s ease;
}
.dens-hamburger:hover  { border-color: var(--dens-accent); }
.dens-hamburger:focus  { outline: 2px solid var(--dens-accent); outline-offset: 2px; }

/* Mobile menu panel */
.dens-mobile-menu {
  border-top: 1px solid var(--dens-line);
  background: rgba(10, 10, 10, 0.98);
  backdrop-filter: blur(24px);
}

/* Mobile nav list */
.dens-nav-list--mobile .dens-nav-link,
.dens-nav-list--mobile .dens-nav-toggle {
  font-size: 15px;
  padding: 13px 4px;
  border-radius: 6px;
  color: var(--dens-ink);
}
.dens-nav-list--mobile .dens-nav-item.dens-nav-active > .dens-nav-link,
.dens-nav-list--mobile .dens-nav-item.dens-nav-active > .dens-nav-toggle {
  color: var(--dens-ink);
  border-left: 2px solid var(--dens-accent);
  padding-left: 10px;
}
.dens-nav-list--mobile .dens-nav-item.dens-nav-active > .dens-nav-link::after,
.dens-nav-list--mobile .dens-nav-item.dens-nav-active > .dens-nav-toggle::after { display: none; }
.dens-nav-list--mobile .dens-nav-dropdown {
  position: static;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.02);
  border: none;
  border-radius: 0;
  padding: 4px 0 4px 12px;
  margin: 0 0 4px;
}
.dens-nav-list--mobile .dens-nav-dropdown::before { display: none; }

/* Responsive: show/hide hamburger & nav */
@media (max-width: 991.98px) {
  .dens-header-inner   { grid-template-columns: auto 1fr; gap: 12px; }
  .dens-nav-desktop    { display: none !important; }
  .dens-hamburger      { display: grid !important; }
}
@media (min-width: 992px) {
  .dens-hamburger      { display: none !important; }
}

/* ============================================================
   BUTTONS
   ============================================================ */

.dens-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-family: var(--dens-font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.dens-btn:focus { outline: 2px solid var(--dens-accent); outline-offset: 3px; }

.dens-btn--primary {
  background: var(--dens-accent);
  color: var(--dens-accent-ink);
  border: 2px solid transparent;
  box-shadow: 0 0 0 0 var(--dens-accent-glow);
}
.dens-btn--primary::after {
  content: "";
  width: 14px; height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12h14M13 5l7 7-7 7' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12h14M13 5l7 7-7 7' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  flex-shrink: 0;
}
.dens-btn--primary:hover {
  background: transparent;
  border-color: var(--dens-accent);
  color: var(--dens-accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px var(--dens-accent-glow);
}

.dens-btn--ghost {
  background: transparent;
  color: var(--dens-ink);
  border: 1px solid var(--dens-line-strong);
}
.dens-btn--ghost:hover { border-color: var(--dens-accent); color: var(--dens-accent); }

.dens-btn--lg { padding: 18px 28px; font-size: 16px; }

/* ============================================================
   HERO
   ============================================================ */

.dens-hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  background: #000;
}

.dens-hero__slides {
  position: absolute;
  inset: 0;
}

/* Slide divs (output door Foto_slider plugin override) */
.dens-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.dens-hero__slide.is-active { opacity: 1; }
.dens-hero__slide img,
.dens-hero__slide picture {
  width: 100%; height: 100%;
  display: block;
}
.dens-hero__slide img {
  object-fit: cover;
  filter: brightness(0.52) saturate(1.05);
}

/* YouTube achtergrondvideo */
.dens-hero__video {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
}
.dens-hero__video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Cover-techniek: één van de twee dimensies vult altijd de container */
  width: 177.78vh;
  height: 100vh;
  min-width: 100%;
  min-height: 56.25vw;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border: 0;
}

/* Vignette overlay */
.dens-hero__vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.5) 0%, rgba(10,10,10,0) 28%, rgba(10,10,10,0) 50%, rgba(10,10,10,0.96) 100%),
    radial-gradient(circle at 80% 30%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 80%);
  pointer-events: none;
}

/* Slide dots */
.dens-hero__dots {
  position: absolute;
  right: var(--dens-gutter);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 3;
}
.dens-hero__dots button {
  width: 6px;
  height: 22px;
  background: rgba(255, 255, 255, 0.22);
  border: none;
  border-radius: 3px;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease, height 0.2s ease;
}
.dens-hero__dots button.is-active {
  background: var(--dens-accent);
  height: 36px;
}
.dens-hero__dots button:focus { outline: 2px solid var(--dens-accent); outline-offset: 2px; }

/* Hero text content */
.dens-hero__content {
  position: relative;
  height: 100%;
  max-width: var(--dens-container);
  margin-inline: auto;
  padding: clamp(40px, 6vw, 80px) var(--dens-gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  z-index: 2;
}

/* Meta line */
.dens-hero__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--dens-font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dens-ink);
}

/* Pulserende dot */
.dens-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--dens-accent);
  box-shadow: 0 0 12px var(--dens-accent-glow);
  flex-shrink: 0;
  animation: dens-pulse 1.8s ease-in-out infinite;
}
@keyframes dens-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.8); }
}

/* Hero title */
.dens-hero__title {
  font-family: var(--dens-font-display);
  font-size: clamp(52px, 11vw, 168px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.92;
  text-transform: uppercase;
  margin: 0;
  color: var(--dens-ink);
}
.dens-hero__title em {
  font-style: normal;
  color: var(--dens-accent);
}

/* Bottom bar */
.dens-hero__bottom {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  padding-top: 28px;
  border-top: 1px solid var(--dens-line-strong);
}

.dens-hero__lockup {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.dens-hero__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--dens-ink);
}
.dens-hero__where { font-size: 15px; font-weight: 500; }
.dens-hero__when  { font-family: var(--dens-font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dens-ink-dim); }

/* Countdown wrapper (styled via Aftelklok plugin override) */
.dens-hero__countdown-wrapper { flex-shrink: 0; }

/* Subpagina hero — korter dan homepage hero */
.dens-hero--sub {
  height: auto;
  min-height: clamp(240px, 38vh, 460px);
}

.dens-hero__content--sub {
  justify-content: flex-end;
  gap: 0;
  height: auto;
  min-height: clamp(240px, 38vh, 460px);
  padding-bottom: clamp(28px, 4vw, 48px);
}

/* Content (bv. uitgelicht agenda-item) gecentreerd over de subpagina-hero */
.dens-hero__overlay-center {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--dens-gutter);
}

.dens-hero__sub-title {
  font-family: var(--dens-font-display);
  font-weight: 800;
  font-size: clamp(22px, 3vw, 48px);
  letter-spacing: -0.04em;
  line-height: 1.0;
  text-transform: uppercase;
  color: var(--dens-ink);
  text-shadow: 0 2px 24px rgba(0,0,0,0.5);
  margin: 0;
}

/* Statische paginahero zonder fotoslider (bv. contactpagina) */
.dens-hero--page {
  height: auto;
  min-height: 0;
  background: var(--dens-bg);
  overflow: visible;
  border-bottom: 1px solid var(--dens-line);
}
.dens-hero__page-inner {
  padding: clamp(88px, 13vw, 160px) var(--dens-gutter) clamp(48px, 7vw, 88px);
}
.dens-hero__page-title {
  font-family: var(--dens-font-display);
  font-weight: 800;
  font-size: clamp(44px, 7vw, 104px);
  letter-spacing: -0.04em;
  line-height: 0.92;
  text-transform: uppercase;
  color: var(--dens-ink);
  max-width: 14ch;
  margin: 20px 0 24px;
}
.dens-hero__page-tekst {
  color: var(--dens-ink-dim);
  font-size: 17px;
  line-height: 1.6;
  max-width: 52ch;
  margin: 0;
}

/* ============================================================
   AFTELTIMER (Aftelklok plugin output)
   ============================================================ */

.dens-countdown {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dens-countdown__cell {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 5px;
}
.dens-countdown__num {
  font-family: var(--dens-font-display);
  font-weight: 800;
  font-size: clamp(22px, 2.6vw, 34px);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--dens-ink);
  font-variant-numeric: tabular-nums;
}
.dens-countdown__lbl {
  font-family: var(--dens-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dens-ink-dim);
}
.dens-countdown__sep {
  font-family: var(--dens-font-display);
  font-weight: 700;
  font-size: clamp(16px, 1.8vw, 22px);
  color: var(--dens-accent);
  line-height: 1;
}

/* ============================================================
   SECTIES
   ============================================================ */

.dens-section {
  padding: clamp(80px, 10vw, 140px) 0;
}
.dens-section--tight { padding: clamp(56px, 7vw, 88px) 0; }

.dens-eyebrow {
  font-family: var(--dens-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dens-accent);
  display: block;
}

.dens-section__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: 32px;
  margin-bottom: 64px;
}
.dens-section__h2 {
  font-family: var(--dens-font-display);
  font-weight: 800;
  font-size: clamp(40px, 6vw, 88px);
  letter-spacing: -0.04em;
  line-height: 0.95;
  margin: 0;
  text-transform: uppercase;
  color: var(--dens-ink);
}
.dens-section__head .dens-eyebrow { align-self: start; }

.dens-link {
  font-family: var(--dens-font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dens-ink-dim);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--dens-line);
  padding-bottom: 6px;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.dens-link:hover { color: var(--dens-accent); border-color: var(--dens-accent); }
.dens-link:focus { outline: 2px solid var(--dens-accent); outline-offset: 2px; }

/* ============================================================
   FOTO-ALBUM STRIP
   ============================================================ */

.dens-album-strip {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  height: clamp(520px, 54vw, 760px);
}

.dens-album-tile {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  background: var(--dens-bg-elev);
  cursor: pointer;
}
.dens-album-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(.2,.7,.2,1), filter 0.4s ease;
  filter: saturate(1.05) brightness(0.9);
}
.dens-album-tile:hover img { transform: scale(1.04); filter: saturate(1.15) brightness(1); }
.dens-album-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.72));
  pointer-events: none;
}

.dens-album-placeholder {
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.12);
  font-family: var(--dens-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dens-album-tile__label {
  position: absolute;
  left: 16px; bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 1;
  font-family: var(--dens-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dens-ink);
}
.dens-album-tile--big { grid-row: 1 / 3; }
.dens-album-tile--big .dens-album-tile__label { font-size: 13px; }

/* ============================================================
   CTA BLOK
   ============================================================ */

.dens-cta {
  background: var(--dens-bg-elev);
  border: 1px solid var(--dens-line);
  border-radius: var(--dens-radius);
  padding: clamp(40px, 5vw, 72px);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.dens-cta::before {
  content: "";
  position: absolute;
  inset: auto -120px -120px auto;
  width: 360px; height: 360px;
  background: var(--dens-accent);
  filter: blur(120px);
  opacity: 0.15;
  pointer-events: none;
}

.dens-cta__titel {
  font-family: var(--dens-font-display);
  font-weight: 800;
  font-size: clamp(36px, 4.5vw, 64px);
  letter-spacing: -0.035em;
  line-height: 0.96;
  margin: 16px 0 0;
  text-transform: uppercase;
  color: var(--dens-ink);
}
.dens-cta__titel em { font-style: normal; color: var(--dens-accent); }

.dens-cta__tekst { color: var(--dens-ink-dim); margin: 16px 0 0; font-size: 16px; max-width: 48ch; }

.dens-cta__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; position: relative; z-index: 1; }

.dens-cta__small {
  color: var(--dens-ink-dim);
  font-family: var(--dens-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* CTA social links */
.dens-cta__socials { display: flex; flex-direction: column; gap: 10px; }
.dens-cta__socials-tekst { font-size: 13px; color: var(--dens-ink-dim); margin: 0; }
.dens-cta__socials-icons { display: flex; align-items: center; gap: 10px; }
.dens-social-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--dens-line-strong);
  display: grid;
  place-items: center;
  color: var(--dens-ink-dim);
  text-decoration: none;
  font-size: 17px;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.dens-social-icon:hover { border-color: var(--dens-accent); color: var(--dens-accent); background: rgba(255, 61, 168, 0.06); }
.dens-social-icon:focus { outline: 2px solid var(--dens-accent); outline-offset: 2px; }

/* ============================================================
   CONTACT SECTIE
   ============================================================ */

.dens-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 7vw, 120px);
  align-items: start;
}

.dens-contact-logo-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: sticky;
  top: 100px;
}

.dens-contact-logo {
  max-width: 240px;
  width: 100%;
  height: auto;
}

.dens-contact-brand {
  font-family: var(--dens-font-display);
  font-weight: 800;
  font-size: clamp(40px, 5vw, 72px);
  letter-spacing: -0.04em;
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--dens-ink);
}

.dens-contact__titel {
  font-family: var(--dens-font-display);
  font-weight: 800;
  font-size: clamp(32px, 4vw, 56px);
  letter-spacing: -0.04em;
  line-height: 0.95;
  margin: 12px 0 40px;
  text-transform: uppercase;
  color: var(--dens-ink);
}

/* Contactpagina: NAW-infokolom */
.dens-contact-info {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.dens-contact-info__label {
  display: block;
  font-family: var(--dens-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dens-ink-faint);
  margin-bottom: 8px;
}
.dens-contact-info__value {
  font-family: var(--dens-font-display);
  font-weight: 700;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.4;
  color: var(--dens-ink);
}
/* Social pillen (icoon + label) — enkel binnen deze wrapper, tast .dens-social-icon elders niet aan */
.dens-social-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.dens-social-pills .dens-social-icon {
  width: auto;
  height: auto;
  border-radius: 999px;
  padding: 10px 18px;
  gap: 8px;
  display: inline-flex;
  align-items: center;
  font-family: var(--dens-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dens-social-pills .dens-social-icon::after { content: attr(aria-label); }

/* Contactpagina: formulierkaart */
.dens-contact-card {
  background: var(--dens-bg-elev);
  border: 1px solid var(--dens-line);
  border-radius: 16px;
  padding: clamp(28px, 4vw, 48px);
}
.dens-contact-card__titel {
  font-family: var(--dens-font-display);
  font-weight: 800;
  font-size: clamp(30px, 3.2vw, 44px);
  letter-spacing: -0.03em;
  line-height: 1.0;
  text-transform: uppercase;
  color: var(--dens-ink);
  margin: 0;
}
.dens-contact-card__tekst {
  color: var(--dens-ink-dim);
  font-size: 15px;
  line-height: 1.6;
  max-width: 46ch;
  margin: 16px 0 32px;
}

/* Contactpagina: formuliervelden */
.dens-form-label {
  display: block;
  font-family: var(--dens-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dens-ink-dim);
  margin-bottom: 8px;
}
.dens-form .form-group { margin-bottom: 20px; }
.dens-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.dens-form-hint {
  display: block;
  margin-top: 8px;
  font-family: var(--dens-font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dens-ink-faint);
}
.dens-form-submit-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.btn.dens-form-submit {
  font-family: var(--dens-font-display);
  font-weight: 700;
  padding: 16px 28px;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.dens-form-submit-note {
  font-family: var(--dens-font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dens-ink-faint);
}

@media (max-width: 640px) {
  .dens-form-row { grid-template-columns: 1fr; }
}

/* hCaptcha: dark theme aansluiting */
.dens-captcha-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}
.dens-captcha-wrap .h-captcha {
  border-radius: 4px;
  overflow: hidden;
}

/* Module overzicht intro tekst */
.dens-module-intro {
  color: var(--dens-ink-dim);
  font-size: 16px;
  max-width: 60ch;
  margin-bottom: clamp(32px, 4vw, 56px);
}

/* ============================================================
   PAGINA-INHOUD (CMS content)
   ============================================================ */

.dens-page-content { padding: clamp(48px, 6vw, 80px) 0; color: var(--dens-ink-dim); }
.dens-page-content h1, .dens-page-content h2, .dens-page-content h3 { color: var(--dens-ink); font-family: var(--dens-font-display); }
.dens-page-content a { color: var(--dens-accent); }
.dens-page-content ul:not([class]), .dens-page-content ol:not([class]) { margin: 16px 0 16px 20px; padding: 0 0 0 10px; }
.dens-page-content ul:not([class]) li { list-style: disc; margin-bottom: 8px; }

/* ============================================================
   FOOTER
   ============================================================ */

.dens-footer {
  background: #050505;
  border-top: 1px solid var(--dens-line);
  padding: 72px 0 28px;
  margin-top: clamp(80px, 10vw, 140px);
}
.dens-footer--home { margin-top: clamp(16px, 3vw, 40px); }

.dens-footer__big {
  font-family: var(--dens-font-display);
  font-weight: 800;
  font-size: clamp(40px, 5vw, 72px);
  letter-spacing: -0.04em;
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0 0 56px;
  color: var(--dens-ink);
}
.dens-footer__big em { font-style: normal; color: var(--dens-accent); }

.dens-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 64px;
}

.dens-footer-col__label {
  font-family: var(--dens-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dens-ink-faint);
  margin: 0 0 18px;
  font-weight: 400;
}

/* Footer nav (uses menu template output) */
.dens-footer-nav {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dens-footer-nav li { list-style: none; }
.dens-footer-nav .dens-nav-link,
.dens-footer-nav .dens-nav-toggle {
  font-size: 14px;
  padding: 3px 0;
  color: var(--dens-ink-dim);
}
.dens-footer-nav .dens-nav-link:hover,
.dens-footer-nav .dens-nav-toggle:hover { color: var(--dens-accent); }
.dens-footer-nav .dens-nav-item.dens-nav-active > .dens-nav-link::after,
.dens-footer-nav .dens-nav-item.dens-nav-active > .dens-nav-toggle::after { display: none; }

.dens-footer-nav .dens-nav-sublink {
  padding: 0;
  font-size: 14px;
  border-radius: 0;
  color: var(--dens-ink-dim);
}
.dens-footer-nav .dens-nav-sublink:hover { background: none; color: var(--dens-accent); }

/* Hover bridge voor footer nav — zelfde principe als de desktop nav brug */
.dens-footer-nav .dens-nav-item::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -20px;
  right: -20px;
  height: 14px;
  z-index: 9998;
}

/* Footer links list */
.dens-footer-links {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  color: var(--dens-ink-dim);
}
.dens-footer-links a { color: var(--dens-ink-dim); text-decoration: none; transition: color 0.15s ease; }
.dens-footer-links a:hover { color: var(--dens-accent); }
.dens-footer-links a:focus { outline: 2px solid var(--dens-accent); outline-offset: 2px; }

/* Newsletter form in footer */
.dens-newsletter-input {
  flex: 1;
  padding: 13px 16px;
  background: var(--dens-bg-elev-2);
  border: 1px solid var(--dens-line);
  border-radius: 999px;
  color: var(--dens-ink);
  font-family: var(--dens-font-body);
  font-size: 14px;
  transition: border-color 0.15s ease;
  min-width: 0;
}
.dens-newsletter-input:focus { outline: none; border-color: var(--dens-accent); }
.dens-newsletter-input::placeholder { color: var(--dens-ink-faint); }

.dens-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--dens-line);
  font-family: var(--dens-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dens-ink-faint);
  flex-wrap: wrap;
  gap: 8px;
}

/* ============================================================
   EVENEMENTEN KAARTEN (DienstenBlok plugin override)
   ============================================================ */

.dens-events-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.dens-event-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--dens-radius);
  background: var(--dens-bg-elev);
  border: 1px solid var(--dens-line);
  text-decoration: none;
  color: var(--dens-ink);
  transition: border-color 0.2s ease, transform 0.3s cubic-bezier(.2,.7,.2,1);
}
.dens-event-card:hover {
  border-color: var(--dens-accent);
  transform: translateY(-5px);
  color: var(--dens-ink);
}

.dens-event-card__img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--dens-bg-elev-2);
}
.dens-event-card__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.82) saturate(1.05);
  transition: transform 0.6s cubic-bezier(.2,.7,.2,1), filter 0.4s ease;
  display: block;
}
.dens-event-card:hover .dens-event-card__img img {
  transform: scale(1.05);
  filter: brightness(0.7) saturate(1.1);
}
.dens-event-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.55));
  pointer-events: none;
}

.dens-event-card__body {
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.dens-event-card__title {
  font-family: var(--dens-font-display);
  font-weight: 800;
  font-size: clamp(20px, 2.4vw, 30px);
  letter-spacing: -0.03em;
  line-height: 1;
  text-transform: uppercase;
  margin: 0;
  color: var(--dens-ink);
}
.dens-event-card__text {
  font-size: 14px;
  color: var(--dens-ink-dim);
  line-height: 1.55;
  margin: 0;
  flex: 1;
}
.dens-event-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--dens-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dens-accent);
  margin-top: 6px;
  transition: gap 0.2s ease;
}
.dens-event-card:hover .dens-event-card__cta { gap: 13px; }

/* ============================================================
   DIENSTEN ARCHIEF SIDEBAR
   ============================================================ */

.dens-sidebar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dens-sidebar-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--dens-radius);
  background: var(--dens-bg-elev);
  border: 1px solid var(--dens-line);
  color: var(--dens-ink);
  text-decoration: none;
  font-family: var(--dens-font-body);
  font-size: 14px;
  font-weight: 500;
  transition: border-color 0.15s ease, background 0.15s ease;
  line-height: 1.4;
}
.dens-sidebar-link:hover {
  border-color: var(--dens-accent);
  background: var(--dens-bg-elev-2);
  color: var(--dens-ink);
}
.dens-sidebar-link__icon {
  color: var(--dens-accent);
  flex-shrink: 0;
  font-size: 11px;
  transition: transform 0.15s ease;
}
.dens-sidebar-link:hover .dens-sidebar-link__icon {
  transform: translateX(4px);
}

/* Dienst detail pagina */
.dens-dienst-detail {
  display: flex;
  gap: 56px;
  align-items: flex-start;
}
.dens-dienst-detail__main { flex: 1; min-width: 0; }
.dens-dienst-detail__sidebar {
  width: 220px;
  flex-shrink: 0;
  position: sticky;
  top: 96px;
}
.dens-dienst-detail__sidebar-label {
  font-family: var(--dens-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dens-accent);
  display: block;
  margin-bottom: 12px;
}

@media (max-width: 767px) {
  .dens-dienst-detail { flex-direction: column; }
  .dens-dienst-detail__sidebar { width: 100%; position: static; border-top: 1px solid var(--dens-line); padding-top: 24px; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 960px) {
  .dens-hero__bottom { grid-template-columns: 1fr; gap: 24px; }
  .dens-hero__dots   { display: none; }
  .dens-countdown    { gap: 6px; flex-wrap: wrap; }
  .dens-countdown__sep  { display: none; }
  .dens-cta          { grid-template-columns: 1fr; gap: 32px; }
  .dens-album-strip  { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; height: auto; }
  .dens-album-tile   { aspect-ratio: 4/3; }
  .dens-album-tile--big { grid-column: 1 / -1; aspect-ratio: 16/9; }
  .dens-footer-grid  { grid-template-columns: 1fr 1fr; gap: 32px; }
  .dens-section__head { grid-template-columns: 1fr; gap: 16px; }
  .dens-events-grid  { grid-template-columns: repeat(2, 1fr); }
  .dens-contact-grid { grid-template-columns: 1fr; }
  .dens-contact-logo-col { position: static; margin-bottom: 8px; }
}
@media (max-width: 640px) {
  .dens-hero { min-height: 450px; }
  .dens-hero__title { font-size: clamp(42px, 14vw, 80px); }
  .dens-hero__content { gap: 20px; }
  .dens-footer-grid  { grid-template-columns: 1fr; }
  .dens-footer-bottom { flex-direction: column; align-items: flex-start; }
  .dens-cta { padding: 28px; }
  .dens-album-strip { grid-template-columns: 1fr; }
  .dens-album-tile--big { aspect-ratio: 4/3; grid-column: 1; }
  .dens-events-grid  { grid-template-columns: 1fr; }
}

/* ============================================================
   Plugin-compatibiliteit
   Alleen de Bootstrap-klassen die door plugins worden gebruikt.
   ============================================================ */

.container { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; box-sizing: border-box; }
@media (min-width: 576px)  { .container { max-width: 540px;  } }
@media (min-width: 768px)  { .container { max-width: 720px;  } }
@media (min-width: 992px)  { .container { max-width: 960px;  } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }

/* Formulieren (ContactFormulier plugin) */
.form-group { margin-bottom: 1rem; }
.form-control {
  display: block; width: 100%; padding: .375rem .75rem;
  font-family: var(--dens-font-body);
  font-size: 1rem; line-height: 1.5; color: var(--dens-ink);
  background-color: var(--dens-bg-elev-2); border: 1px solid var(--dens-line);
  border-radius: 4px; transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.form-control:focus {
  border-color: var(--dens-accent); outline: 0;
  box-shadow: 0 0 0 .2rem rgba(200, 255, 61, .15);
}
.form-control::placeholder { color: var(--dens-ink-faint); opacity: 1; }
textarea.form-control { height: auto; resize: vertical; }
select.form-control   { height: calc(1.5em + .75rem + 2px); cursor: pointer; }
/* Een <select> heeft geen echte placeholder — de "Kies..."-optie is een gewone
   <option value=""> en zou anders in de volle --dens-ink kleur getoond worden.
   :invalid (leeg + required) laat 'm er als placeholder-tekst uitzien. */
select.form-control:required:invalid { color: var(--dens-ink-faint); }
select.form-control option { color: var(--dens-ink); background-color: var(--dens-bg-elev-2); }
select.form-control option[value=""] { color: var(--dens-ink-faint); }
input[type="date"].form-control { color-scheme: dark; }
/* De dd-mm-jjjj segmenten van een native datumveld zijn losse browser-onderdelen
   die niet via ::placeholder of gewone color-overerving te stylen zijn. */
input[type="date"].form-control::-webkit-datetime-edit-fields-wrapper,
input[type="date"].form-control::-webkit-datetime-edit-text,
input[type="date"].form-control::-webkit-datetime-edit-day-field,
input[type="date"].form-control::-webkit-datetime-edit-month-field,
input[type="date"].form-control::-webkit-datetime-edit-year-field {
  color: var(--dens-ink-faint);
  font-family: var(--dens-font-body);
}
.form-check           { position: relative; display: block; padding-left: 1.25rem; }
.form-check-input     { position: absolute; margin-top: .3rem; margin-left: -1.25rem; }
.form-check-label     { margin-bottom: 0; cursor: pointer; }
label                 { display: inline-block; margin-bottom: .5rem; color: var(--dens-ink-dim); }

/* Knoppen (plugins) */
.btn {
  display: inline-block; font-weight: 400; text-align: center;
  white-space: nowrap; vertical-align: middle; user-select: none;
  border: 1px solid transparent; padding: .375rem .75rem;
  font-size: 1rem; line-height: 1.5; border-radius: 999px;
  transition: color .15s, background-color .15s, border-color .15s;
  cursor: pointer; text-decoration: none;
}
.btn-primary { color: var(--dens-accent-ink); background-color: var(--dens-accent); border-color: var(--dens-accent); }
.btn-primary:hover { background-color: #e02590; border-color: #e02590; color: var(--dens-accent-ink); }
.btn-success { color: #fff; background-color: #28a745; border-color: #28a745; }

/* Accordion / collapse (FAQ) */
.collapse:not(.show) { display: none; }
.collapsing { position: relative; height: 0; overflow: hidden; transition: height .35s ease; }

/* Paginering */
.pagination { display: flex; padding-left: 0; list-style: none; border-radius: 999px; flex-wrap: wrap; gap: .25rem; }
.page-link {
  display: block; padding: .5rem .75rem; line-height: 1.25;
  color: var(--dens-accent); background-color: var(--dens-bg-elev);
  border: 1px solid var(--dens-line); text-decoration: none; border-radius: 4px;
}
.page-item.active   .page-link { color: var(--dens-accent-ink); background-color: var(--dens-accent); border-color: var(--dens-accent); }
.page-item.disabled .page-link { color: var(--dens-ink-faint); pointer-events: none; }

/* Meldingen (formulier-validatie) */
.alert { position: relative; padding: .75rem 1.25rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: 4px; }
.alert-success { color: var(--dens-accent-ink); background-color: rgba(200, 255, 61, 0.12); border-color: var(--dens-accent); }
.alert-danger   { color: #ff5a3c; background-color: rgba(255, 90, 60, 0.1); border-color: rgba(255, 90, 60, 0.3); }

/* Screen-reader hulp */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ============================================================
   Gloeiende lijn die over de rand van een kaart vliegt (bv. uitgelicht agenda-item)
   ============================================================ */
.dens-glow-card { position: relative; }
.dens-glow-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.dens-glow-line rect {
  fill: none;
  stroke: var(--dens-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 16 84;
  filter: drop-shadow(0 0 5px var(--dens-accent));
  animation: dens-glow-travel 3.5s linear infinite;
}
@keyframes dens-glow-travel { to { stroke-dashoffset: -100; } }

/* ============================================================
   CONTACTPAGINA — linkjes standaard wit, roze bij hover
   (overschrijft de generieke .dens-page-content a kleur, die
   de hele sectie omwikkelt en anders altijd accentkleur geeft)
   ============================================================ */
.dens-contact-grid--page a { color: var(--dens-ink); }
.dens-contact-grid--page a:hover { color: var(--dens-accent); }