/* ================================
   PRIMETIME – INFO PAGE STYLING
   Voor: Over ons / Contact / Legal
================================ */

/* Algemene basis (zelfde als merken.css) */
html, body {
  margin: 0;
  padding: 0;
  background-color: #000;
  color: #f2f2f2;
  font-family: 'Rubik', 'Inter', sans-serif;
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.8;
  letter-spacing: 0.01em;
  overflow-x: hidden;
}

/* Ruimte boven = header-offset + header-hoogte + extra gap (zoals merken) */
.info-page .pm-slide {
  padding-top: 7rem; /* vaste header offset zoals home/merken */
  padding-bottom: clamp(100px, 14vh, 180px);
  background-color: #0a0a0a;
  position: relative;
}

/* Eerste sectie en targets landen netjes onder de header */
.info-page .pm-slide:first-of-type,
.info-page .pm-slide:target,
.info-page [id] {
  scroll-margin-top: calc(var(--header-offset) + var(--header-h) + var(--first-gap));
}


/* Inhoudsblok */
/* Inhoudsblok (match creators-page) */
.info-page .pm-content{
  max-width: 860px;
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.60);
  backdrop-filter: blur(6px);
  padding: 2.25rem;
  border-radius: 16px;
  box-shadow: 0 0 24px rgba(0, 255, 255, 0.15);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Paragraafbreedte prettig houden */
.info-page .about-block p{
  max-width: 72ch;
  margin-left: auto;
  margin-right: auto;
}

.tint-cyan{ color:#00e4ff; }

.slide-fade-divider {
  height: 80px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 1));
}

/* Titels */
.info-page .slide-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: #00ffff;
  text-shadow: 0 0 12px rgba(0, 255, 255, 0.3);
  text-transform: uppercase;
}

/* Introparagraaf */
.info-page .slide-intro {
  font-size: 1.1rem;
  color: #ddd;
  line-height: 1.6;
}

/* Tekstlijsten */
.info-page .slide-text-content {
  list-style: none;
  padding: 0;
  margin-top: 1rem;
}

.info-page .slide-text-content li {
  color: #fff;
  font-size: 1rem;
  margin-bottom: 0.75rem;
  text-shadow: 0 0 6px rgba(0, 255, 255, 0.15);
}

/* Lead tekst */
.info-page .cta-lead {
  font-size: 1.3rem;
  font-weight: 800;
  background: linear-gradient(90deg, #00f0ff, #ff007a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 12px rgba(0, 240, 255, 0.35),
               0 0 18px rgba(255, 0, 122, 0.25);
  margin-bottom: 1.5rem;
}


/* Consistente header offsets voor info-pages (matcht merken/primo) */
.info-page {
  --header-offset: 2rem;  /* afstand van viewport-top naar header (fixed) */
  --header-h: 4.9rem;     /* min-height van .live-header-inner */
  --first-gap: 1rem;      /* ademruimte extra onder header */
}

@media (max-width: 768px) {
  .info-page {
    --header-offset: 2rem; /* blijft 2rem; je hanteert mobiel extra padding-top */
    --header-h: 4.9rem;
    --first-gap: 0.8rem;
  }
}


/* Responsiveness */
@media (max-width: 768px) {
  .info-page .pm-content {
    padding: 1.5rem 1rem;
  }


  .info-page .slide-title {
    font-size: 1.8rem;
    text-align: left;
  }

  .info-page .slide-intro {
    font-size: 1rem;
    text-align: left;
  }

  .info-page .slide-text-content {
    text-align: left;
  }
}


.slideflow-container {
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
}

.info-page #overons-intro {
  min-height: 100vh;
  padding-bottom: clamp(80px, 12vh, 160px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* =========================
   Contact Form – PRIMETIME stijl
========================= */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-top: 1.5rem;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  font-size: 1rem;
  font-family: 'Rubik', 'Inter', sans-serif;
  background: rgba(15, 15, 20, 0.9);
  color: #fff;
  border: 1px solid rgba(0, 255, 255, 0.25);
  border-radius: 10px;
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.12);
  transition: all 0.25s ease;
  resize: none;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #00ffff;
  box-shadow: 0 0 0 2px rgba(0, 255, 255, 0.45);
}

/* Knop met gradient */
.contact-form button {
  background: linear-gradient(90deg, #00f0ff, #ff007a);
  color: #000;
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.9rem 1.5rem;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.25),
              0 0 24px rgba(255, 0, 122, 0.2);
}

.contact-form button:hover {
  background: linear-gradient(90deg, #00cccc, #cc0066);
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.4),
              0 0 28px rgba(255, 0, 122, 0.35);
}

/* Feedback (info-pagina formulieren) */
.form-feedback {
  text-align: center;
  margin-top: 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: #00ffff; /* PRIMETIME cyaan */
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.4);
}

.form-feedback.error {
  color: #ff0050; /* TikTok rood */
  text-shadow: 0 0 8px rgba(255, 0, 80, 0.3);
}



/* 🔹 Accessible hidden labels */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

/* 🔹 Contact map styling */
.contact-map iframe {
  width: 100%;
  height: 340px;
  border: none;
  border-radius: 18px;
  box-shadow:
    0 0 10px rgba(0, 255, 255, 0.2),
    0 0 20px rgba(0, 255, 255, 0.15),
    0 0 28px rgba(255, 0, 122, 0.12);
}


#overons-intro {
  background:
    linear-gradient(rgba(10,10,20,.7), rgba(10,10,30,.7)),
    url('/wp-content/themes/primetime-mobile/assets/images/overons-intro.png') center center / cover no-repeat;
}


#overons-intro .slide-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900;
  background: linear-gradient(90deg, #00f0ff, #ff007a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;   /* fallback voor Firefox */
  color: transparent;      /* fallback */
  text-shadow: 0 0 20px rgba(0, 240, 255, 0.35),
               0 0 32px rgba(255, 0, 122, 0.25);
  letter-spacing: .5px;
  line-height: 1.15;
}


#overons-intro .slide-intro {
  font-size: 1.15rem;
  line-height: 1.7;
  color: #e0e0e0;
  max-width: 800px;
  margin: 0 auto;
}
#overons-intro .pm-content {
  background: rgba(0, 0, 0, 0.6);
  padding: 2.5rem;
  border-radius: 16px;
  backdrop-filter: blur(6px);
}

@media (max-width: 768px) {
  #overons-intro .pm-content {
    padding: 1.5rem;
  }
}

.info-page .highlight {
  font-size: 1.25rem;
  font-weight: 800;
  background: linear-gradient(90deg, #00f0ff, #ff007a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 16px rgba(0,240,255,.35),
               0 0 22px rgba(255,0,122,.25);
  margin-top: 1.5rem;
  line-height: 1.4;
}


#overons-tech,
#overons-mvo,
#overons-jeugd {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: normal;
}

#overons-tech {
  background-image: url('/wp-content/themes/primetime-mobile/assets/images/overons-tech.png');
}

#overons-jeugd {
  background-image: url('/wp-content/themes/primetime-mobile/assets/images/overons-jeugd.png');
}


#contact-intro {
  background:
    linear-gradient(rgba(10,10,20,.7), rgba(10,10,30,.7)),
    url('/wp-content/themes/primetime-mobile/assets/images/contact-intro.png') center bottom / cover no-repeat;
  /* geen parallax op info-pages; zelfde gedrag als Home/Merken */
  background-attachment: scroll;
}

#contact-intro .pm-content a{
  color:#00ffff;
  text-decoration: underline;
}
#contact-intro .pm-content a:hover{
  text-decoration: none;
  text-shadow: 0 0 8px rgba(0,255,255,.45);
}


#contact-intro .pm-content {
  padding-top: calc(var(--header-offset) + var(--header-h) + max(4vh, 32px));
  padding-bottom: 12vh;
}

/* Contact Intro – match Over ons stijl */
#contact-intro .slide-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900;
  background: linear-gradient(90deg, #00f0ff, #ff007a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 20px rgba(0, 240, 255, 0.35),
               0 0 32px rgba(255, 0, 122, 0.25);
  letter-spacing: .5px;
  line-height: 1.15;
  max-width: 20ch;
  margin-left: auto;
  margin-right: auto;
}

#contact-intro .cta-lead {
  font-size: 1.3rem;
  font-weight: 800;
  background: linear-gradient(90deg, #00f0ff, #ff007a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 12px rgba(0, 240, 255, 0.35),
               0 0 18px rgba(255, 0, 122, 0.25);
  margin-top: 1.5rem;
}



@media (max-width: 768px) {
  #contact-intro {
    background-size: contain;
    background-position: top center;
    background-color: #000;
    background-attachment: scroll;
  }
}

/* Slide 2: Nizzy Intro */
#overons-nizzy {
  background: linear-gradient(rgba(10,10,20,.8), rgba(10,10,30,.8));
}

#overons-nizzy .slide-title {
  font-size: clamp(2.2rem, 4.5vw, 3rem);
  font-weight: 900;
  background: linear-gradient(90deg, #00f0ff, #ff007a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 20px rgba(0, 240, 255, 0.35),
               0 0 32px rgba(255, 0, 122, 0.25);
  margin-bottom: 1.5rem;
  line-height: 1.15;
  letter-spacing: .5px;
  text-align: center;
}


#overons-nizzy .nizzy-intro {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

#overons-nizzy .nizzy-image img {
  max-width: 280px;
  border-radius: 16px;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
}

#overons-nizzy .nizzy-text {
  flex: 1;
  color: #e0e0e0;
  font-size: 1.1rem;
  line-height: 1.7;
}

#overons-nizzy .nizzy-text .cta-lead {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  color: #00ffff;
}

/* Mobile */
@media (max-width: 768px) {
  #overons-nizzy .nizzy-intro {
    flex-direction: column;
    text-align: center;
  }

  #overons-nizzy .nizzy-image img {
    max-width: 200px;
    margin-bottom: 1.5rem;
  }

  #overons-nizzy .nizzy-text {
    font-size: 1rem;
  }
}


#contact-form .pm-content {
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(6px);
  border-radius: 16px;
  padding: 2.5rem;
  box-shadow: 0 0 32px rgba(0, 255, 255, 0.08);
}


.contact-form input,
.contact-form textarea {
  background: #111;
  color: #fff;
  border: 1px solid rgba(0, 255, 255, 0.2);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  transition: border 0.2s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border: 1px solid #00ffff;
  outline: none;
}

#contact-locatie {
  background-image: url('/wp-content/themes/primetime-mobile/assets/images/contact-locatie-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  position: relative;
  z-index: 0;
}

#contact-locatie .pm-content {
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  border-radius: 16px;
  padding: 2.5rem;
  box-shadow: 0 0 32px rgba(0, 255, 255, 0.08);
  z-index: 1;
  position: relative;
}


/* Neon glow op slide-titel (alleen in locatieblok) */
#contact-locatie .slide-title {
  color: #00ffff;
  text-shadow:
    0 0 6px rgba(0, 255, 255, 0.5),
    0 0 12px rgba(0, 255, 255, 0.3),
    0 0 24px rgba(0, 255, 255, 0.2);
}

/* Neon glow rond iframe kaart */
#contact-locatie .contact-map iframe {
  border: none;
  border-radius: 12px;
  box-shadow:
    0 0 8px rgba(0, 255, 255, 0.3),
    0 0 16px rgba(0, 255, 255, 0.2),
    0 0 24px rgba(0, 255, 255, 0.15);
}

/* Overons blokken spacing + fade effect */
.about-block {
  margin-bottom: 3rem;
  opacity: 1;         /* standaard zichtbaar */
  transform: none;    /* geen off-screen translate */
}


/* Fade-in bij scroll of bij .visible class (JS-optioneel) */
.overons-page .about-block.visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}


/* Alternatief zonder JS: fade in alles na DOM load */
.overons-page .about-block {
  margin-bottom: 2.5rem;
  animation: fadeUp 0.8s ease forwards;
}
.overons-page .about-block:nth-of-type(1) { animation-delay: 0.2s; }
.overons-page .about-block:nth-of-type(2) { animation-delay: 0.4s; }
.overons-page .about-block:nth-of-type(3) { animation-delay: 0.6s; }


@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .overons-page .pm-content {
    padding: 2rem 1.25rem;
    text-align: left;
  }

  .about-block {
    margin-bottom: 2.25rem;
    font-size: 1rem;
    line-height: 1.6;
  }

  .slide-title {
    font-size: 1.5rem;
    text-align: center;
  }

  .cta-lead {
    font-size: 1.125rem;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 2rem;
  }
}

/* =========================
   Footer – structuur + stijl
========================= */
.site-footer {
  background:
    linear-gradient(180deg, rgba(0,0,0,.88), rgba(0,0,10,.96)),
    radial-gradient(70% 120% at 10% 0%, rgba(0,255,255,.08), transparent 60%),
    radial-gradient(60% 100% at 90% 20%, rgba(255,0,204,.08), transparent 60%);
  color: #d6e8ef;
  padding: 3rem 1.25rem 2rem;
  border-top: 1px solid rgba(255,255,255,.08);
  position: relative; /* separator */
  font-family: 'Orbitron', sans-serif;
}

.site-footer .footer-inner {
  max-width: 1220px;
  margin: 0 auto;
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(12, 1fr);
  align-items: start;
}

.footer-col { display: flex; flex-direction: column; gap: .75rem; }

.footer-brand { grid-column: span 3; align-items: center; text-align: center; }
.footer-nav   { grid-column: span 3; }
.footer-legal { grid-column: span 3; }
.footer-contact { grid-column: span 3; }

/* Logo */
#site-footer .footer-logo {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 260px !important;   /* desktop cap */
  max-height: 64px !important;
  margin: 0 auto 1rem;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(0,255,255,.25));
}

/* Slogan */
.footer-tagline {
  text-align: center;
  color: #dfeef5;
  font-size: 1.05rem;
  margin: 0 0 1rem;
  font-weight: 600;
}

/* TikTok follow */
.footer-social-single { text-align: center; }
.footer-social-single a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 800;
  color: #00ffff;
  font-size: 1.05rem;
  text-decoration: none;
}
.footer-social-single a:hover span { text-decoration: underline; }
.footer-social-icon {
  width: 24px; height: 24px; object-fit: contain;
}

/* Titels */
.footer-title {
  font-weight: 800;
  color: #fff;
  margin: 0 0 .5rem;
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* Linklijsten */
.footer-links {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: .45rem;
}
.footer-links a {
  color: #d6e8ef; text-decoration: none;
  transition: color .2s ease, text-shadow .2s ease;
}
.footer-links a:hover {
  color: #ffffff;
  text-shadow: 0 0 8px rgba(0,255,255,.35);
}

/* Contact */
.footer-address { font-style: normal; line-height: 1.5; }
.footer-address a { color: #eaf6ff; text-decoration: none; }
.footer-address a:hover { text-decoration: underline; }

/* KvK / BTW */
.footer-meta {
  list-style: none; padding: 0; margin: .5rem 0 0;
  color: #a8c7ce; display: flex; flex-direction: column; gap: .2rem;
}
.footer-meta .meta-label { font-weight: 600; margin-right: .25rem; }

/* CTA */
.footer-cta { margin-top: .8rem; }

/* Onderbalk */
.footer-bottom {
  max-width: 1220px;
  margin: 1.4rem auto 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.08);
  text-align: center;
  color: #a7c2c9;
  font-size: .9rem;
}

/* Separator lijn */
.site-footer:after {
  content: "";
  display: block;
  position: absolute;
  left: 0; right: 0; bottom: 3.25rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
}

/* Cookie knop */
.cookie-settings {
  appearance: none; background: transparent;
  border: 1px solid rgba(255,255,255,.25);
  color: #eaf6ff; border-radius: 6px;
  padding: .35rem .6rem; cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.cookie-settings:hover { background: rgba(255,255,255,.07); border-color: #fff; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); border: 0;
}

/* Responsive */
@media (max-width: 980px) {
  .site-footer .footer-inner { grid-template-columns: repeat(6, 1fr); }
  .footer-brand   { grid-column: span 6; }
  .footer-nav     { grid-column: span 3; }
  .footer-legal   { grid-column: span 3; }
  .footer-contact { grid-column: span 6; }
  #site-footer .footer-logo {
    max-width: 220px !important;
    max-height: 56px !important;
  }
}

@media (max-width: 640px) {
  .site-footer .footer-inner { grid-template-columns: 1fr; }
  .footer-col { grid-column: auto; }
  .footer-bottom { font-size: .85rem; }
  #site-footer .footer-logo {
    max-width: 180px !important;
    max-height: 52px !important;
  }
}

/* 1) Titels niet laten 'uitrekken' over het hele scherm */
.info-page .about-block .slide-title{
  max-width: 20ch;          /* cap op regelbreedte van de H1/H2 */
  margin-left: auto;
  margin-right: auto;
  line-height: 1.1;
  letter-spacing: .02em;    /* iets compacter dan uppercase default */
}

/* Mobiel: iets ruimer zodat het niet te snel breekt */
@media (max-width: 768px){
  .info-page .about-block .slide-title{ max-width: 24ch; }
}

/* 2) Intro-blok op Contact: meer contrast zodat de box zichtbaar is */
#contact-intro .pm-content{
  background: rgba(0,0,0,.72);  /* van .60 naar .72 */
  border-radius: 18px;
  box-shadow:
    0 10px 40px rgba(0,0,0,.45);
  /* subtiele inner-border voor scherpere rand op donkere hero */
  outline: 1px solid rgba(255,255,255,.06);
  outline-offset: -1px;
}

/* Zelfde look voor Form en Locatie (optioneel, consistentie) */
#contact-form .pm-content,
#contact-locatie .pm-content{
  outline: 1px solid rgba(255,255,255,.06);
  outline-offset: -1px;
}

/* (Optioneel) Als je geen caps op titels wilt op info-pages, haal hier de uppercase eraf */
.info-page .slide-title{
  text-transform: none;     /* weg met FORSE CAPS; laat inhoud spreken */
}

/* Hero style voor legal */
.hero-legal {
  background:
    linear-gradient(rgba(10,10,20,.7), rgba(10,10,30,.7)),
    url('/wp-content/themes/primetime-mobile/assets/images/legal-intro.png') center center / cover no-repeat;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero-legal .pm-content {
  background: rgba(0,0,0,.65);
  border-radius: 18px;
  padding: 3rem 2rem;
  backdrop-filter: blur(6px);
  box-shadow: 0 0 32px rgba(0,255,255,.15);
}

.hero-legal .legal-nav {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.hero-legal .legal-nav a {
  color: #00ffff;
  font-weight: 600;
  text-decoration: none;
  padding: 0.6rem 1rem;
  border: 1px solid rgba(0,255,255,.3);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.hero-legal .legal-nav a:hover {
  background: #00ffff;
  color: #000;
  box-shadow: 0 0 16px rgba(0,255,255,.4);
}