/* ============================================
   FONTS
   ============================================ */
@font-face {
  font-family: 'Atelia';
  src: url('../fonts/Atelia.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GT America';
  src: url('../fonts/GT-America-Standard-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GT America';
  src: url('../fonts/GT-America-Standard-Regular-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'GT America';
  src: url('../fonts/GT-America-Standard-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Fraunces (Google Fonts) — secundaire serif voor accenten en getallen.
   Display=swap zodat Atelia tekst blijft tonen tot Fraunces geladen is. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,700;1,9..144,400;1,9..144,500&display=swap');

/* ============================================
   TOKENS
   ============================================ */
:root {
  /* Donker */
  --color-bg:        #010101;
  --color-bg-alt:    #111111;
  --color-surface:   #1a1a1a;
  --color-border:    #2a2a2a;

  /* Licht */
  --color-bg-light:         #ddd7c8;
  --color-bg-light-alt:     #cbc4b5;
  --color-border-light:     #b5aea3;
  --color-text-on-light:    #010101;
  --color-muted-on-light:   #4a4a4a;

  /* Rood */
  --color-bg-red:           #db4645;
  --color-bg-red-alt:       #c93c3b;
  --color-border-red:       #c03534;
  --color-text-on-red:      #ddd7c8;
  --color-muted-on-red:     rgba(221,215,200,0.65);

  /* Tekst */
  --color-text:      #ddd7c8;
  --color-text-muted:#6a6a6a;

  /* Accent */
  --color-accent:       #db4645;
  --color-accent-hover: #c93c3b;

  --color-site-fh:   #db4645;
  --color-site-ev:   #db4645;

  --font-main:     'GT America', 'Helvetica Neue', Arial, sans-serif;
  --font-body:     'GT America', 'Helvetica Neue', Arial, sans-serif;
  --font-display:  'Atelia', 'Helvetica Neue', Arial, sans-serif;
  --font-accent:   'Fraunces', 'Times New Roman', Georgia, serif;

  --nav-height: 68px;

  --radius-sm: 4px;
  --radius-md: 8px;

  --transition: 200ms ease;

  /* Diagonale sectie-overgangen — tan(7.5°) × breedte */
  --diag: calc(tan(7.5deg) * 100vw);

  /* Extra overloop boven en onder op de transitie-overlay. De clip-path staat
     exact ingeschreven, dus afronding van de --diag-berekening kan een haarlijn
     geven op de rand. Los van --diag gehouden: die stuurt óók alle diagonale
     sectie-overgangen, en daar mag niets aan verschuiven. */
  --pt-bleed: 2px;

  /* iOS Safari tekent zijn toolbar ÓVER de pagina heen, maar een
     position:fixed element stopt bij de bovenkant van die balk. Schermvullende
     overlays laten daardoor een strook echte pagina zien onder de dock.
     Deze waarde is precies de hoogte van de intrekbare browserbalken; op
     desktop is lvh gelijk aan svh en komt er dus 0px uit. */
  --vh-overshoot: 0px;
}

@supports (height: 100svh) {
  :root {
    --vh-overshoot: calc(100lvh - 100svh + env(safe-area-inset-bottom, 0px));
  }
}

/* ============================================
   ROTTERDAM THEMA — accent groen #009f70
   ============================================ */
html.theme-rotterdam {
  /* Warme donkere tinten i.p.v. neutraal zwart */
  --color-bg:        #473f3f;
  --color-bg-alt:    #504848;
  --color-surface:   #5c5454;
  --color-border:    #6a6161;

  /* Lichtere muted-tint nodig op de warmere donkere surface */
  --color-text-muted: #a8a097;

  /* Rood → groen */
  --color-bg-red:     #009f70;
  --color-bg-red-alt: #008863;
  --color-border-red: #00785a;

  --color-accent:       #009f70;
  --color-accent-hover: #008863;
  --color-site-fh:      #009f70;
  --color-site-ev:      #009f70;
}

/* ============================================
   PAGINA-TRANSITIE OVERLAY
   ============================================ */

/* Directe deklaag vóór JS de overlay positioneert. Kleur volgt het thema. */
html.pt-active::before {
  content: '';
  position: fixed;
  inset: 0 0 calc(-1 * var(--vh-overshoot)) 0;
  z-index: 800;
  background: var(--color-bg-red);
  pointer-events: all;
}

/* Geanimeerde overlay — parallelogram met "\" aan boven- én onderkant */
.page-transition {
  position: fixed;
  /* Boven én onder met dezelfde waarde opgerekt, zodat het verticale verschil
     tussen de linker- en rechterhoek exact --diag blijft: de hoek van 7,5°
     verandert dus niet, de vorm wordt alleen aan beide kanten verlengd. */
  top: calc(-1 * (var(--diag) + var(--pt-bleed)));
  left: 0;
  right: 0;
  /* --vh-overshoot alleen onderaan: de clip-path zet beide schuine randen af
     met een absolute --diag over 100% breedte, dus de hoek van 7,5° verandert
     niet als het vlak onderlangs verder doorloopt. */
  bottom: calc(-1 * (var(--diag) + var(--pt-bleed) + var(--vh-overshoot)));
  z-index: 850;
  background: var(--color-bg-red);
  clip-path: polygon(0 0, 100% var(--diag), 100% 100%, 0 calc(100% - var(--diag)));
  /* Standaard: bovenaan buiten beeld.
     Overlay is 100vh + 2×diag hoog; op brede schermen kan --diag > 20vh worden,
     dus we gebruiken 150vh om altijd volledig uit beeld te zijn. */
  transform: translateY(-150vh);
  transition: transform 700ms cubic-bezier(0.87, 0, 0.13, 1);
  pointer-events: none;
  will-change: transform;
}

/* Dekking: volledig scherm */
.page-transition.is-covering {
  transform: translateY(0);
  pointer-events: all;
}

/* Uitgang: onderaan buiten beeld */
.page-transition.is-gone {
  transform: translateY(150vh);
}

/* ============================================
   GEDEELDE KNOP-STIJLEN
   (eerder per pagina-CSS gedupliceerd, nu centraal hier)
   ============================================ */
.btn-primary {
  display: inline-block;
  padding: 14px 32px;
  background: var(--color-accent);
  color: #dcdcdc;
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}

.btn-primary:hover {
  background: var(--color-accent-hover);
}

.btn-secondary {
  display: inline-block;
  padding: 14px 32px;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  transition: border-color var(--transition), color var(--transition);
}

.btn-secondary:hover {
  border-color: var(--color-text-muted);
}

/* ============================================
   TYPOGRAFIE
   ============================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: normal;
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: 0.02em;
}

/* ============================================
   BASE
   ============================================ */
body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-main);
  font-weight: 700;
  letter-spacing: -0.05em;
  font-size: 1rem;
  min-height: 100vh;
}

/* ============================================
   NAVIGATION
   ============================================ */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-height);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  padding: 0 2rem;
  gap: 2rem;
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  position: relative;
}

.nav-logo-img {
  height: 44px;
  width: auto;
  display: block;
}

/* Main nav links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
}

.nav-links a {
  padding: 6px 12px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
  white-space: nowrap;
}

.nav-links a:hover {
  color: var(--color-text);
  background: var(--color-surface);
}

.nav-links a.active {
  color: var(--color-text);
}

/* Dropdown */
.has-dropdown {
  position: relative;
}

.nav-dropdown {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  min-width: 160px;
  list-style: none;
  padding: 0.35rem 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 100;
}

/* Onzichtbare brug: houdt hover actief terwijl muis over de gap beweegt */
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -0.75rem;
  left: 0;
  right: 0;
  height: 0.75rem;
}

.has-dropdown:hover .nav-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown a {
  display: block;
  padding: 0.6rem 1.25rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: color var(--transition);
}

.nav-dropdown a:hover {
  color: var(--color-text);
}

/* Mobile sub-item — groter, onder de Events-dropdown */
.nav-mobile-sub {
  font-size: clamp(2rem, 7vw, 4rem) !important;
  padding-left: 0.7em;
  opacity: 0.7;
}

/* Right side */
.nav-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
  flex-shrink: 0;
}

/* Language dropdown */
.lang-dropdown {
  position: relative;
  display: inline-block;
}

.lang-dropdown__current {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 9px;
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background var(--transition);
}

.lang-dropdown__current:hover {
  background: var(--color-border);
}

.lang-dropdown__flag {
  font-size: 1rem;
  line-height: 1;
  display: inline-block;
}

.lang-dropdown__code {
  font-weight: 500;
}

.lang-dropdown__chevron {
  font-size: 0.65rem;
  margin-left: 1px;
  opacity: 0.7;
  transition: transform 200ms ease;
}

.lang-dropdown.open .lang-dropdown__chevron {
  transform: rotate(180deg);
}

.lang-dropdown__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 100%;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 1100;
}

.lang-dropdown.open .lang-dropdown__menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.lang-dropdown__menu li {
  margin: 0;
}

.lang-dropdown__option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 12px 6px 8px;
  background: transparent;
  border: none;
  border-radius: calc(var(--radius-sm) - 2px);
  color: var(--color-text-muted);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.lang-dropdown__option:hover {
  background: var(--color-border);
  color: var(--color-text);
}

.lang-dropdown__option.active {
  color: var(--color-text);
  font-weight: 500;
}

/* Events — opvallende rode pill aan het einde van de nav */
.nav-links .nav-events {
  padding: 6px 16px;
  background: var(--color-accent);
  color: var(--color-bg) !important;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  transition: background var(--transition), color var(--transition);
}

.nav-links .nav-events:hover {
  background: var(--color-accent-hover);
  color: var(--color-bg) !important;
}

/* CTA button in nav */
.nav-cta {
  display: inline-block;
  padding: 8px 18px;
  background: var(--color-accent);
  color: var(--color-bg);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}

.nav-cta:hover {
  background: var(--color-accent-hover);
}

/* Mobile hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
  margin-left: auto;
}

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

/* Mobile menu */
.nav-mobile {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--color-accent);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--nav-height) 2.5rem 3rem;
  overflow: hidden;

  /* Dichtgeklapt: clip van boven naar beneden */
  clip-path: inset(0 0 100% 0);
  transition: clip-path 700ms cubic-bezier(0.76, 0, 0.24, 1);
  pointer-events: none;
}

.nav-mobile.open {
  clip-path: inset(0 0 0% 0);
  pointer-events: all;
}

/* Instant-close bij pagina-navigatie: geen animatie (page-transitie dekt alles) */
.nav-mobile.no-transition,
.nav-mobile.no-transition *,
.nav-hamburger.no-transition span {
  transition: none !important;
}

/* Decoratief achtergrond-logo */
.nav-mobile-bg-logo {
  position: absolute;
  right: -8%;
  bottom: -5%;
  width: 85vw;
  max-width: 520px;
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
}

/* Grote menu links */
.nav-mobile-links {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  justify-content: center;
}

.nav-mobile-item {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 10vw, 5.5rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: var(--color-text);
  transition: color 200ms ease;
}

.nav-mobile-item:hover {
  color: rgba(220, 220, 220, 0.5);
}

/* Entrance state — alleen directe children van nav-mobile-links */
.nav-mobile-links > .nav-mobile-item,
.nav-mobile-links > .nav-mobile-dropdown {
  opacity: 0;
  transform: translateY(60px);
  transition:
    opacity    500ms cubic-bezier(0.16, 1, 0.3, 1),
    transform  700ms cubic-bezier(0.16, 1, 0.3, 1),
    color      200ms ease;
}

/* Staggered reveal — werkt voor elk direct child (link of dropdown-wrapper) */
.nav-mobile.open .nav-mobile-links > *:nth-child(1) { opacity:1; transform:none; transition-delay: 120ms; }
.nav-mobile.open .nav-mobile-links > *:nth-child(2) { opacity:1; transform:none; transition-delay: 175ms; }
.nav-mobile.open .nav-mobile-links > *:nth-child(3) { opacity:1; transform:none; transition-delay: 230ms; }
.nav-mobile.open .nav-mobile-links > *:nth-child(4) { opacity:1; transform:none; transition-delay: 285ms; }
.nav-mobile.open .nav-mobile-links > *:nth-child(5) { opacity:1; transform:none; transition-delay: 340ms; }
.nav-mobile.open .nav-mobile-links > *:nth-child(6) { opacity:1; transform:none; transition-delay: 395ms; }

/* Events dropdown */
.nav-mobile-dropdown-trigger {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.4em;
  text-transform: uppercase;
}

.nav-mobile-dropdown-trigger > span {
  text-transform: uppercase;
}

.nav-mobile-dropdown-icon {
  font-size: 0.5em;
  line-height: 1;
  opacity: 0.5;
  transition: transform 500ms cubic-bezier(0.76, 0, 0.24, 1);
}

.nav-mobile-dropdown-trigger[aria-expanded="true"] .nav-mobile-dropdown-icon {
  transform: rotate(45deg);
}

.nav-mobile-dropdown-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 500ms cubic-bezier(0.76, 0, 0.24, 1);
}

.nav-mobile-dropdown-trigger[aria-expanded="true"] + .nav-mobile-dropdown-body {
  grid-template-rows: 1fr;
}

.nav-mobile-dropdown-inner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Footer: events link + taal */
.nav-mobile-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(220,220,220,0.2);
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity  500ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-mobile.open .nav-mobile-footer {
  opacity: 1;
  transform: none;
  transition-delay: 500ms;
}

.nav-mobile-switch {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(220,220,220,0.7);
  transition: color 200ms ease;
}

.nav-mobile-switch:hover {
  color: var(--color-text);
}

/* Lang dropdown in mobiel menu — opent naar boven */
.nav-mobile-footer .lang-dropdown__current {
  background: rgba(220,220,220,0.15);
  color: rgba(220,220,220,0.9);
}

.nav-mobile-footer .lang-dropdown__current:hover {
  background: rgba(220,220,220,0.25);
}

.nav-mobile-footer .lang-dropdown__menu {
  top: auto;
  bottom: calc(100% + 6px);
  background: rgba(40,40,40,0.98);
  border-color: rgba(220,220,220,0.2);
  transform: translateY(4px);
}

.nav-mobile-footer .lang-dropdown.open .lang-dropdown__menu {
  transform: translateY(0);
}

.nav-mobile-footer .lang-dropdown__option {
  color: rgba(220,220,220,0.7);
}

.nav-mobile-footer .lang-dropdown__option:hover,
.nav-mobile-footer .lang-dropdown__option.active {
  background: rgba(220,220,220,0.18);
  color: var(--color-text);
}

/* Hamburger → X animatie */
.nav-hamburger span {
  transition: transform 400ms cubic-bezier(0.76, 0, 0.24, 1),
              opacity   300ms ease;
}

.nav-hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-hamburger.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ============================================
   MAIN CONTENT
   ============================================ */
.page-content {
  padding-top: var(--nav-height);
  min-height: 100vh;
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  padding: 3rem 2rem 2rem;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2rem;
}

.footer-col h4 {
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
}

.footer-col a {
  display: block;
  font-size: 0.875rem;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  padding: 3px 0;
  transition: color var(--transition);
}

.footer-col a:hover {
  color: var(--color-text);
}

.footer-bottom {
  max-width: 1200px;
  margin: 2rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.footer-bottom-links {
  display: flex;
  gap: 1.5rem;
}

.footer-bottom-links a:hover {
  color: var(--color-text);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 900px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .site-nav {
    padding: 0 1.25rem;
  }

  .nav-links,
  .nav-right {
    display: none;
  }

  .nav-hamburger {
    display: flex;
    margin-left: auto;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }
}

/* ============================================
   LEAD — korte intro/summary-paragrafen in Atelia
   ============================================ */
.inner-hero-lead,
.venue-hero-lead,
.venue-intro-lead,
.about-lead,
.careers-lead,
.apply-form-card__lead,
.events-hero-text .hero-sub,
.ev-venue-hero-inner .hero-sub,
.jm-subtitle {
  font-family: var(--font-display);
  letter-spacing: normal;
  /* Atelia is overal een kapitalenletter — koppen, knoppen, nav en labels
     stonden al op uppercase; deze leads waren de laatste uitzondering. */
  text-transform: uppercase;
}

/* ============================================
   EASTER-EGG FAQ — desktop vs mobile variant
   ============================================ */
.faq-item--desktop-only { display: block; }
.faq-item--mobile-only  { display: none; }

@media (max-width: 768px) {
  .faq-item--desktop-only { display: none; }
  .faq-item--mobile-only  { display: block; }
}

.hamburger-trigger {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  line-height: 1;
  display: inline-block;
  transform-origin: center;
  transition: transform 180ms ease;
}

.hamburger-trigger:hover,
.hamburger-trigger:focus-visible {
  transform: scale(1.25) rotate(-8deg);
  outline: none;
}