/* ===================================================================
   NVRT83 — "What the Hek" restyle
   =================================================================== */

:root {
  --rood: #d81f26;
  --goud: #c79a4b;
  --goud-licht: #ffe9a8;
  --inkt: #12100f;
  --wit: #fffdf9;
}

@font-face {
  font-family: "Carnivalee Freakshow";
  src: url("../fonts/CarnivaleeFreakshow.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: #fff;
  font-family: "Poppins", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--inkt);
}

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

/* -------------------------------------------------------------
   Roterende rood/witte achtergrond — over de hele site
   ------------------------------------------------------------- */
.rays-stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #fff;
  /* geen z-index hier: dit element staat als eerste in de HTML, dus het
     tekent vanzelf onder al het overige content zolang niets negatief
     staat. z-index:-1 op een fixed element is berucht onbetrouwbaar. */
}

.rays-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300vmax;
  height: 300vmax;
  margin-top: -150vmax;
  margin-left: -150vmax;
  background-image: repeating-conic-gradient(
    from 0deg,
    var(--rood) 0deg 15deg,
    #ffffff 15deg 30deg
  );
  animation: spin 70s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .rays-bg { animation: none; }
}

/* -------------------------------------------------------------
   Header / navigatie
   ------------------------------------------------------------- */
.site-header {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 24px 5vw 0;
}

.logo {
  justify-self: center;
  display: block;
}
.logo img {
  height: 64px;
  width: auto;
  display: block;
}

.main-nav {
  display: flex;
  gap: 40px;
}
.main-nav-left  { justify-self: start; }

.main-nav a {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.main-nav a.active,
.main-nav a:hover {
  border-bottom-color: var(--rood);
}

.header-right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 32px;
}

.book-btn {
  background: var(--rood);
  color: #fff;
  border: 1px solid black;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 12px 26px;
  border-radius: 999px;
  transition: opacity .15s ease;
}
.book-btn:hover { opacity: .85; }

.hamburger-btn {
  display: none;
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
}
.hamburger-btn img { width: 26px; height: 26px; }

@media (max-width: 860px) {
  .site-header { grid-template-columns: 1fr; justify-items: center; }
  .main-nav-left, .main-nav-right { display: none; }
  .header-right {
    position: absolute;
    right: 5vw;
    top: 22px;
    justify-self: auto;
    gap: 12px;
  }
  .header-right .book-btn { display: none; }
  .hamburger-btn { display: block; }
  .logo img { height: 52px; }
}

/* herbruikbare knop-class: enkel zichtbaar op mobiel (≤860px) - te
   gebruiken in het uitklapmenu of ergens los op een pagina, bv. boven
   "thank you for your trust" op praktisch.php */
.book-btn-mobile-only {
  display: none;
  margin-bottom: 25px;
  margin-top: -10px;
}
@media (max-width: 860px) {
  .book-btn-mobile-only { display: inline-block; }
}

/* mobiel uitklapmenu */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--inkt);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  transform: translateY(-100%);
  transition: transform .35s ease;
}
.mobile-menu.open { transform: translateY(0); }

.mobile-menu .close-btn {
  position: absolute;
  top: 26px;
  right: 5vw;
  background: none;
  border: none;
  cursor: pointer;
}
.mobile-menu .close-btn img { width: 22px; height: 22px; }

.mobile-menu nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.mobile-menu nav a {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.mobile-menu .socials {
  display: flex;
  gap: 18px;
}
.mobile-menu .socials img { width: 26px; height: 26px; }

/* -------------------------------------------------------------
   Hero / main gedeelte gemeenschappelijk
   ------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: calc(100vh - 190px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 5vw 40px;
}

.hero-stage {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 3vw;
  width: 100%;
}

.side-label {
  flex: 1 1 0;
  min-width: 0;
  font-family: "Carnivalee Freakshow", "Poppins", sans-serif;
  font-weight: 400;
  font-size: clamp(10px, 2vw, 40px);
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.side-label.left  { text-align: left; }
.side-label.right { text-align: right; }

/* onder deze breedte is er te weinig ruimte naast de spiegel om de
   tekst leesbaar op één lijn te houden zonder afknippen - dan stapelen
   we in plaats van te knippen: links boven, spiegel in het midden,
   rechts eronder (gewoon de DOM-volgorde, in kolom) */
@media (max-width: 1200px) {
  .hero-stage {
    flex-direction: column;
    gap: 18px;
  }
  .side-label {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    text-align: center;
    max-width: 90vw;
    font-size: clamp(18px, 5vw, 30px);
  }
}

/* -------------------------------------------------------------
   Video-arch (homepage) — gecropte reel met knipperende lichtjes
   ------------------------------------------------------------- */
.arch-video-wrap {
  position: relative;
  flex: none;
  width: min(78vw, 360px);
  aspect-ratio: 336 / 594;
  clip-path: polygon(0% 100%,0% 28.91%,0.31% 25.74%,1.25% 22.61%,2.81% 19.55%,4.95% 16.62%,7.66% 13.84%,10.91% 11.25%,14.64% 8.88%,18.83% 6.77%,23.4% 4.93%,28.31% 3.39%,33.49% 2.18%,38.87% 1.3%,44.4% 0.77%,50% 0.59%,55.6% 0.77%,61.13% 1.3%,66.51% 2.18%,71.69% 3.39%,76.6% 4.93%,81.17% 6.77%,85.36% 8.88%,89.09% 11.25%,92.34% 13.84%,95.05% 16.62%,97.19% 19.55%,98.75% 22.61%,99.69% 25.74%,100% 28.91%,100% 100%);
  box-shadow: none;
}
.arch-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.arch-text-overlay {
  position: absolute;
  left: 7%;
  top: 21%;
  width: 87%;
  object-fit: fill;
  pointer-events: none;
}

/* -------------------------------------------------------------
   CSS marquee-kaart (andere pagina's) — zelfde look, geen video
   ------------------------------------------------------------- */
.marquee-card {
  position: relative;
  flex: none;
  width: min(78vw, 360px);
  aspect-ratio: 320 / 560;
}
.marquee-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.marquee-frame .bulb {
  fill: var(--goud-licht);
  filter: drop-shadow(0 0 2px #ffb800);
  animation: blink 2.6s infinite ease-in-out;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .25; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-frame .bulb { animation: none; }
}

.marquee-content {
  position: absolute;
  inset: 30% 15% 10%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}
.marquee-content .brand-mark { width: 34px; margin-bottom: -4px; }
.marquee-content .brand-name { font-weight: 800; font-size: 15px; letter-spacing: .05em; }
.marquee-content .brand-sub  { font-size: 10px; letter-spacing: .2em; color: var(--rood); text-transform: uppercase; margin-bottom: 4px;}

.marquee-content .field-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rood);
}
.marquee-content .field-value {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.marquee-content hr {
  width: 100%;
  border: none;
  border-top: 1px solid #ddd;
  margin: 2px 0;
}

/* -------------------------------------------------------------
   Onderschrift onder de kaart + footer
   ------------------------------------------------------------- */
.hero-caption {
  position: relative;
  text-align: center;
  padding: 0 5vw 30px;
}
.hero-caption h1 {
  font-weight: 800;
  font-size: clamp(18px, 2.4vw, 26px);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 6px;
}
.hero-caption p {
  margin: 0;
  font-size: 13px;
  color: #555;
}

.site-footer {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
  gap: 18px;
  padding: 0 0 34px;
}
.site-footer img { width: 30px; height: 30px; }

/* praktisch-page footer variant met tekst */
.thanks-footer {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 0 5vw 20px;
}
.thanks-footer h2 {
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.thanks-footer p { margin: 0 0 18px; font-size: 12px; color: #555; }

/* -------------------------------------------------------------
   "Gewone" content-pagina's (Over ons / Goede doelen / Media, ...)
   Grote rechthoekige kaart met lampjes-rand die vrij meegroeit in
   breedte ÉN hoogte — via border-image + round-repeat i.p.v. een
   vast opgebouwde SVG-omtrek. Zie img/frame-border.svg: dat is een
   klein herhaalbaar tegeltje (afgeronde hoek + 1 recht stuk met
   lampjes) dat de browser zelf naadloos herhaalt tot de rand past,
   zonder ooit een lampje half af te snijden.
   ------------------------------------------------------------- */
.content-page {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding: 130px 5vw 60px;
}

.content-card {
  --frame-corner: clamp(40px, 6vw, 80px);
  /* exact dezelfde verhouding als in de uitgeknipte bronafbeeldingen
     (band 24px op een hoek-slice van 80px = 0.3) - zo blijft de
     dikte van de rechte randjes altijd 1-op-1 aansluiten op de
     dikte van de gouden band binnenin de hoek-afbeelding, op elke
     schermgrootte. Nooit --frame-border los hiervan wijzigen. */
  --frame-border: calc(var(--frame-corner) * 0.3);
  position: relative;
  width: min(92vw, 1000px);
  box-sizing: border-box;
  background: var(--wit);
  padding:
    calc(var(--frame-border) + clamp(28px, 5vw, 64px))
    calc(var(--frame-border) + clamp(20px, 5vw, 56px));
}

/* de 8 losse randstukken - elk een eigen afbeelding, de rechte
   stukken herhalen met background-repeat:round zodat ze zich
   aanpassen aan breedte/hoogte zonder ooit een lampje af te snijden */
.card-frame,
.card-frame span {
  position: absolute;
}
.card-frame {
  inset: 0;
  pointer-events: none;
}
.card-frame .corner {
  width: var(--frame-corner);
  height: var(--frame-corner);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.card-frame .corner-tl { top: 0;    left: 0;   background-image: url('../img/frame/corner-tl.png'); }
.card-frame .corner-tr { top: 0;    right: 0;  background-image: url('../img/frame/corner-tr.png'); }
.card-frame .corner-bl { bottom: 0; left: 0;   background-image: url('../img/frame/corner-bl.png'); }
.card-frame .corner-br { bottom: 0; right: 0;  background-image: url('../img/frame/corner-br.png'); }

.card-frame .edge-top,
.card-frame .edge-bottom {
  left: var(--frame-corner);
  right: var(--frame-corner);
  height: var(--frame-border);
  background-size: auto 100%;
}
.card-frame .edge-top    { top: 0;    background-image: url('../img/frame/top.png');    background-repeat: round no-repeat; }
.card-frame .edge-bottom { bottom: 0; background-image: url('../img/frame/bottom.png'); background-repeat: round no-repeat; }

.card-frame .edge-left,
.card-frame .edge-right {
  top: var(--frame-corner);
  bottom: var(--frame-corner);
  width: var(--frame-border);
  background-size: 100% auto;
}
.card-frame .edge-left  { left: 0;  background-image: url('../img/frame/left.png');  background-repeat: no-repeat round; }
.card-frame .edge-right { right: 0; background-image: url('../img/frame/right.png'); background-repeat: no-repeat round; }

.content-card h1 {
  font-family: "Carnivalee Freakshow", "Poppins", sans-serif;
  font-weight: 400;
  color: var(--rood);
  text-align: center;
  font-size: clamp(28px, 4.2vw, 46px);
  margin: 0 0 8px;
}

.content-card .content-subtitle {
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 13px;
  color: var(--inkt);
  margin: 0 0 30px;
}
.content-card .content-subtitle p { margin: 2px 0; }

.content-card .content-lead {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 36px;
  line-height: 1.6;
  color: #333;
}

.content-card h2 {
  font-family: "Carnivalee Freakshow", "Poppins", sans-serif;
  font-weight: 400;
  color: var(--rood);
  font-size: clamp(20px, 2.8vw, 28px);
  margin: 40px 0 14px;
}
.content-card h2:first-child { margin-top: 0; }

.content-card p {
  line-height: 1.65;
  color: #333;
  margin: 0 0 14px;
}

/* uitgelicht blokje, bv. "SERVICE IS THE TRUE PRIVILEGE!" naast tekst */
.content-callout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 24px;
  align-items: start;
  margin: 34px 0;
}
.content-callout h2 { margin: 0; }
.content-callout p { margin: 0; }
@media (max-width: 640px) {
  .content-callout { grid-template-columns: 1fr; gap: 10px; }
}

/* naam/sponsorlijsten in kolommen, zoals "LEDEN" / "MET DANK AAN" */
.content-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 4px 28px;
  font-size: 14px;
  color: #333;
}
.content-columns p { margin: 3px 0; }

/* label + grijs blok, zoals de media-pagina (aftermovie/pictures/...) */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
  margin: 20px 0 40px;
}
.media-grid figure {
  margin: 0;
}
.media-grid figcaption {
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 12px;
  margin-bottom: 10px;
}
.media-grid .placeholder {
  /*aspect-ratio: 4 / 3;
  background: #cfcfcf;
  border-radius: 4px;*/
}
.media-grid .placeholder img {
	margin:auto;
}
.site-credits {
  position: relative;
  z-index: 10;
  text-align: center;
  font-size: 10px;
  letter-spacing: .04em;
  color: #666;
  text-transform: uppercase;
  padding: 0 5vw 24px;
}

/* rij met een icoon+label-kolom naast inhoud, zoals "RT83" / "LEDEN"
   op de Over-ons-pagina */
.content-labeled-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 32px;
  align-items: flex-start;
  margin: 34px 0;
}
.content-label-figure {
  flex: 0 0 120px;
  text-align: center;
}
.content-label-figure img {
  width: 44px;
  margin: 0 auto 8px;
}
.content-label-figure span {
  display: block;
  font-weight: 800;
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.content-label-body { flex: 1 1 320px; min-width: 0; }
.content-label-body p:last-child { margin-bottom: 0; }

.content-hr {
  border: none;
  border-top: 1px solid #e7ddc9;
  margin: 34px 0;
}

.galleria { 
	width: 100%; 
	height: 600px; 
	background: #000;
}