/* ============================================================
   Krachtpraat — theme override on top of Audicast template
   ============================================================ */

/* --- Self-hosted fonts ---------------------------------------- */
@font-face {
  font-family: 'Lexend';
  src: url('/assets/fonts/lexend-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --- CSS variable overrides ----------------------------------- */
:root {
  --theme-color:        #008985;
  --secondary-color:    #008985;
  --title-color:        #f4faf9;
  --body-color:         #9fbfbd;
  --body-bg:            #091211;
  --smoke-color:        #0f1e1d;
  --light-color:        #0c1c1b;
  --border-color:       #1e3533;
  --white-color:        #f4faf9;
  --title-font:         'Lexend', 'Barlow Condensed', sans-serif;
  --body-font:          'Inter', 'Barlow', sans-serif;
  --section-space:      80px;
  --section-space-mobile: 50px;
}

/* --- Body & base -------------------------------------------- */
body {
  background-color: var(--body-bg);
  background-image: url('/img/textures/Grunge Background 9.png');
  background-repeat: repeat;
  background-blend-mode: soft-light;
  color: var(--body-color);
}

/* --- Typography --------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--title-color);
}

a { color: var(--theme-color); }
a:hover { color: var(--theme-color); filter: brightness(1.2); }

/* --- Header ------------------------------------------------- */
/* No fill on the outer <header> — it spans 100vw and would create an edge-to-edge bar */
.vs-header { background-color: transparent; }
/* Dark fill only on .header-inner, which at ≥1500px has max-width+margin:auto → stops at container edges */
/* Rounded bottom corners so the right/left edges look intentional rather than a hard cut */
.header-layout3 .header-inner { background-color: var(--body-bg); border-radius: 0 0 12px 12px; }
/* menu-area and menu-bottom are transparent so .header-inner's background shows through */
.header-layout3 .menu-area { background-color: transparent !important; border-bottom: none; }
.header-layout3 .menu-bottom { background-color: transparent !important; }
/* Hide the info-bar row (pill + sub-links) — it adds height and duplicates hero content */
.header-layout3 .header-inner > .container-xxl:first-child { display: none; }
/* Single-row header: logo left, nav+buttons right — never wraps */
.kp-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: nowrap;
}
.kp-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
/* Tighter nav item padding so 5 items + buttons fit on one row */
.header-layout3 .main-menu > ul > li > a { padding-left: 12px !important; padding-right: 12px !important; font-size: 0.82rem; }
.header-layout3 .main-menu > ul > li { margin-left: 0 !important; margin-right: 0 !important; }

.header-info ul li,
.header-info ul li a { color: var(--body-color); }
.header-info ul li i { color: var(--theme-color); }
.header-links ul li a { color: var(--body-color); }
.header-links ul li a:hover { color: var(--theme-color); }
.header-social ul li a { color: var(--body-color); }
.header-social ul li a:hover { color: var(--theme-color); }

.vs-header.sticky-active,
.menu-area.sticky-active { background-color: var(--body-bg) !important; border-bottom: 1px solid var(--border-color) !important; }
.main-menu > ul > li > a { color: var(--title-color); }
.main-menu > ul > li > a:hover,
.main-menu > ul > li.active > a { color: var(--theme-color); }
.main-menu ul .sub-menu { background-color: #0c1c1b; border: 1px solid var(--border-color); }
.main-menu ul .sub-menu li a { color: var(--body-color); }
.main-menu ul .sub-menu li a:hover { color: var(--theme-color); }

/* --- Mobile menu ------------------------------------------- */
.vs-menu-wrapper { background-color: #0c1c1b; }
.vs-mobile-menu ul li a { color: var(--title-color); }
.vs-mobile-menu ul li a:hover { color: var(--theme-color); }
.vs-menu-toggle,
.vs-menu-toggle i { color: var(--title-color); }

/* --- Breadcrumb -------------------------------------------- */
.breadcumb-wrapper {
  background-color: #0c1c1b;
  background-image: linear-gradient(135deg, #0c2422 0%, #091211 60%);
}
/* Template ::before uses var(--title-color) — white in our theme — as overlay; replace with dark */
.breadcumb-wrapper::before { background-color: rgba(9,18,17,0.55); }
/* Template sets 130px top+bottom padding — reduce to something compact */
.breadcumb-content { padding: 18px 0 22px !important; }
/* At >1500px the header is position:absolute and overlays content — push breadcrumb below it */
@media (min-width: 1501px) {
  .breadcumb-wrapper { padding-top: 150px; }
}
/* Template title is 90px with text-transform:capitalize — override both */
.breadcumb-title {
  color: var(--title-color);
  font-size: 44px !important;
  line-height: 1.15 !important;
  text-transform: none !important;
}
.breadcumb-menu li a { color: var(--body-color); }
.breadcumb-menu li::after { color: var(--body-color); }
.breadcumb-menu li:last-child { color: var(--theme-color); }

/* --- Section titles --------------------------------------- */
.sec-title { color: var(--title-color); }
.sec-title2 { color: var(--title-color); }
.sec-title3 { color: var(--title-color); text-transform: none !important; }
.sec-subtitle { color: var(--theme-color); }
.sec-subtitle2 { color: var(--theme-color); }
.sec-text { color: var(--body-color); }

/* --- Dutch sentence-case: remove text-transform:capitalize from content --- */
.hero-layout2 .hero-title,
.hero-layout2 .hero-subtitle,
.podcast-style3 .podcast-title,
.podcast-style6 .podcast-title,
.vs-btn,
.link-btn {
  text-transform: none !important;
}

/* --- Buttons ----------------------------------------------- */
.vs-btn { background-color: var(--theme-color); color: #fff; border-color: var(--theme-color); }
.vs-btn:hover { background-color: #006663; border-color: #006663; color: #fff; }
.vs-btn.style2 { background-color: var(--theme-color); border-color: var(--theme-color); color: #fff; }
.vs-btn.style2:hover { background-color: #006663; border-color: #006663; }
.vs-btn.style4 { background-color: rgba(0,137,133,0.15); border: 1px solid var(--theme-color); color: var(--title-color); }
.vs-btn.style4:hover { --bg-hover: #006663; color: #fff; }
.vs-btn.style5 { background-color: transparent; border: 2px solid var(--theme-color); color: var(--theme-color); }
.vs-btn.style5:hover { background-color: var(--theme-color); color: #fff; }
.vs-btn.style6 { background-color: var(--theme-color); color: #fff; }
.vs-btn.style6:hover { background-color: #006663; }
.vs-btn.style7 { background-color: var(--theme-color); color: #fff; }

.icon-btn { color: var(--title-color); background: transparent; }
.icon-btn:hover { color: var(--theme-color); }

/* --- Arrow buttons (carousel) ------------------------------ */
.arrow-btn { background-color: rgba(0,137,133,0.15); border: 1px solid var(--theme-color); }
.arrow-btn:hover { background-color: var(--theme-color); }
.arrow-btn::before,
.arrow-btn::after { border-color: var(--title-color); }

/* --- Podcast cards (podcast-style6) ----------------------- */
.podcast-style6 { background-color: #0c1c1b; border: 1px solid var(--border-color); }
/* Rewrite layout2 as a vertical thumbnail-first card for the archive grid */
.podcast-style6.layout2 {
  flex-direction: column !important;
  align-items: stretch !important;
  margin-bottom: 0 !important;
  height: 100%;
}
/* Equal-height card rows: col divs become flex containers, gap handled by row-gap */
#episode-list { row-gap: 24px; }
#episode-list > [data-episode-row] { display: flex; flex-direction: column; }
.podcast-style6.layout2 .podcast-img {
  max-width: 100% !important;
  width: 100%;
  border-radius: 20px 20px 0 0 !important;
  overflow: hidden;
  flex-shrink: 0;
}
.podcast-style6.layout2 .podcast-img img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.podcast-style6.layout2 .podcast-content {
  padding: 20px 22px 22px !important;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.podcast-style6.layout2 .podcast-title {
  font-size: 1rem !important;
  margin-bottom: 8px;
}
.podcast-style6.layout2 .vs-btn {
  margin-top: auto;
  padding-top: 8px;
  align-self: flex-start;
}
.podcast-title a { color: var(--title-color); }
.podcast-title a:hover { color: var(--theme-color); }
.podcast-meta a { color: var(--body-color); }
.podcast-meta a.category { color: var(--theme-color); }

/* --- Play button ------------------------------------------ */
.play-btn { background-color: var(--theme-color); color: #fff; }
.play-btn:hover { background-color: #006663; }
.podcast-icon.play-btn { background-color: var(--theme-color); }
.podcast-icon.play-btn:hover { background-color: #006663; }

/* --- Equalizer bar divider -------------------------------- */
.kp-eq-strip {
  background: var(--body-bg);
  padding: 14px 0 0;
  overflow: hidden;
}

/* --- Scrolling text ticker (about page) ------------------- */
.kp-ticker-strip {
  background: var(--body-bg);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  overflow: hidden;
  padding: 16px 0;
}
/* flex track: no whitespace gaps between the two copies, -50% = exactly one copy width */
.kp-ticker-inner {
  display: flex;
  width: max-content;
  animation: kp-ticker-scroll 50s linear infinite;
  will-change: transform;
}
.kp-ticker-text {
  display: block;
  flex-shrink: 0;
  white-space: nowrap;
  font-family: var(--title-font);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--title-color);
}
.kp-ticker-sep { color: var(--theme-color); margin: 0 14px; }
@keyframes kp-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) { .kp-ticker-inner { animation: none; } }
.kp-eq-inner {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 60px;
}
.kp-eq-inner span {
  flex: 1;
  min-width: 3px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(to top, var(--theme-color), rgba(0,137,133,0.55));
  animation-fill-mode: both;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: calc(var(--i) * -0.055s);
}
/* 6 animation variants cycling across bars */
.kp-eq-inner span:nth-child(6n+1) { animation-name: kp-eq-a; animation-duration: 0.85s; }
.kp-eq-inner span:nth-child(6n+2) { animation-name: kp-eq-b; animation-duration: 1.10s; }
.kp-eq-inner span:nth-child(6n+3) { animation-name: kp-eq-c; animation-duration: 0.70s; }
.kp-eq-inner span:nth-child(6n+4) { animation-name: kp-eq-d; animation-duration: 1.30s; }
.kp-eq-inner span:nth-child(6n+5) { animation-name: kp-eq-e; animation-duration: 0.95s; }
.kp-eq-inner span:nth-child(6n)   { animation-name: kp-eq-f; animation-duration: 0.75s; }

@keyframes kp-eq-a { from { height:  6px; } to { height: 50px; } }
@keyframes kp-eq-b { from { height: 30px; } to { height: 12px; } }
@keyframes kp-eq-c { from { height: 46px; } to { height: 14px; } }
@keyframes kp-eq-d { from { height:  8px; } to { height: 42px; } }
@keyframes kp-eq-e { from { height: 26px; } to { height: 54px; } }
@keyframes kp-eq-f { from { height: 40px; } to { height:  8px; } }

/* --- Team cards ------------------------------------------- */
.team-style1 .team-body { background-color: #0c1c1b; border: 1px solid var(--border-color); }
.team-style1 .team-img { overflow: hidden; }
.team-style1 .team-img img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.4s ease;
}
.team-style1 .team-img:hover img {
  transform: scale(1.05);
}
.kp-team-nicolas {
  object-position: 50% 8%;
  transform: scale(1.4) !important;
  transform-origin: top center;
}
.team-style1 .team-img:hover .kp-team-nicolas {
  transform: scale(1.45) !important;
}
.team-style1 { height: 100%; }
.team-style1 .team-body { height: 100%; }
.team-style1 .team-name { font-size: 1.35rem !important; }
/* Template sets text-transform:uppercase on both name and role — override */
.team-style1 .team-name { text-transform: none !important; }
.team-style1 .team-degi { text-transform: none !important; }
.team-name a { color: var(--title-color); }
.team-name a:hover { color: var(--theme-color); }
.team-degi { color: var(--theme-color); }
.team-social .social { color: var(--body-color); }
.team-social .social:hover { color: var(--theme-color); }
.team-share { color: var(--body-color); }

/* --- Footer ----------------------------------------------- */
.footer-wrapper { background-color: #040e0d; }
.footer-text { color: var(--body-color); }
.footer-logo img { max-height: 48px; width: auto; }
.footer-social a { color: var(--body-color); background-color: rgba(0,137,133,0.1); border: 1px solid var(--border-color); }
.footer-social a:hover { background-color: var(--theme-color); color: #fff; border-color: var(--theme-color); }
.widget_title { color: var(--title-color); }
.footer-widget ul li a { color: var(--body-color); }
.footer-widget ul li a:hover { color: var(--theme-color); }
.footer-menu .menu li a { color: var(--body-color); }
.footer-menu .menu li a:hover { color: var(--theme-color); }
.wp-widget-contact p { color: var(--body-color); }
.footer-address { color: var(--body-color); }
.footer-info { color: var(--body-color); }
.footer-info a { color: var(--body-color); }
.footer-info a:hover { color: var(--theme-color); }
.footer-info i { color: var(--theme-color); }
.copyright-wrap { border-top: 1px solid var(--border-color); }
.copyright-text { color: var(--body-color); }
.copyright-text a { color: var(--theme-color); }

/* --- Scroll to top button --------------------------------- */
.scrollToTop { background-color: var(--theme-color); color: #fff; }
.scrollToTop:hover { background-color: #006663; }

/* --- Section backgrounds ---------------------------------- */
.bg-theme { background-color: var(--theme-color) !important; }

/* --- Section spacing overrides for dark theme ------------- */
section, .space-top, .space-extra-bottom, .space, .space-bottom { background-color: transparent; }
.space-extra { background-color: var(--theme-color); }

/* --- Form styles ------------------------------------------ */
.form-control, input[type="text"], input[type="email"], input[type="tel"], textarea, select.form-control {
  background-color: #0c1c1b;
  border-color: var(--border-color);
  color: #ffffff !important;
}
select.form-control option { background-color: #0c1c1b; color: #ffffff; }
.form-control::placeholder { color: var(--body-color); }

/* --- Audio player ----------------------------------------- */
.audio-title { color: var(--title-color); }

/* --- About / img-box --------------------------------------- */
.img-box2 { position: relative; }
.about-wrap1 .list-style2 ul li::before { background-color: var(--theme-color); }
.list-style2 ul li { color: var(--body-color); }

/* --- Bar button (hamburger in nav) ----------------------- */
.bar-btn .bar { background-color: var(--title-color); }
.vs-menu-toggle i { color: var(--title-color); }

/* --- Link colors in content ------------------------------- */
.text-inherit { color: inherit; }
.text-inherit:hover { color: var(--theme-color); }

/* --- Hero + carousel shared background wrapper --------- */
/* Both hero and carousel sit inside .hero-carousel-wrapper which carries
   pod-bg.jpg as one continuous background — no seam between the sections */
.hero-carousel-wrapper {
  background: url('/img/bg/pod-bg.jpg') center center / cover no-repeat;
  position: relative;
  /* Fade the background image into the body color at the bottom — no hard seam */
  box-shadow: inset 0 -100px 80px -10px #091211;
}
.hero-carousel-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Dark on the left (text legibility), nearly transparent on the right
     so the studio microphone photo reads clearly — matching the Audicast style */
  background: linear-gradient(
    to right,
    rgba(9,18,17,0.88) 0%,
    rgba(9,18,17,0.70) 30%,
    rgba(9,18,17,0.35) 60%,
    rgba(9,18,17,0.20) 100%
  );
  pointer-events: none;
  z-index: 0;
}
.hero-carousel-wrapper > * { position: relative; z-index: 1; }

/* --- Hero ----------------------------------------------- */
.vs-hero-wrapper { min-height: 560px; }
.hero-layout2 { padding: 70px 0 80px !important; }
/* At ≥1501px the header is position:absolute and overlays the hero —
   push content down enough to clear the header bar */
@media (min-width: 1501px) {
  .hero-layout2 { padding-top: 150px !important; }
}

/* Reduce enormous template font-size and remove circular-artwork rotation */
.hero-layout2 .hero-title {
  font-size: clamp(40px, 5vw, 72px) !important;
  line-height: 1.1 !important;
}
.hero-layout2 .hero-img {
  aspect-ratio: 3 / 4;
  max-height: 520px;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,137,133,0.3);
}
.hero-layout2 .hero-img img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover;
  object-position: center center;
  border-radius: 0 !important;
  transform: none !important;
  display: block;
}
.hero-layout2 .img-shape { display: none; }
.hero-title { color: var(--title-color); }
.hero-subtitle { color: var(--theme-color); }
.hero-text { color: var(--body-color); }

/* --- Krachtpraat logo sizing ----------------------------- */
.header-logo img { height: 48px; width: auto; }

/* --- Episode search (keep from app.js) ------------------- */
.archive-search { margin-bottom: 40px; }
.archive-search__bar { display: flex; gap: 12px; align-items: stretch; max-width: 860px; }
.archive-search__input {
  flex: 1;
  min-width: 0;
  padding: 14px 20px;
  background: #0c1c1b;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--title-color);
  font-family: var(--body-font);
  font-size: 1rem;
  outline: none;
}
.archive-search__input:focus { border-color: var(--theme-color); }
.archive-search__input::placeholder { color: var(--body-color); }
.archive-search__select {
  flex: 0 0 175px;
  padding: 14px 40px 14px 16px;
  background: #0c1c1b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23008985' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--title-color);
  font-family: var(--body-font);
  font-size: 1rem;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.archive-search__select:focus { border-color: var(--theme-color); }
.archive-search__select option { background: #0c1c1b; color: var(--title-color); }
.archive-search__count { color: var(--body-color); margin-top: 10px; font-size: 0.9em; }
@media (max-width: 600px) {
  .archive-search__bar { flex-direction: column; max-width: 100%; }
  .archive-search__select { flex: none; width: 100%; }
}

/* --- Podcast-style6 search hide ----------------------- */
.podcast-style6[hidden] { display: none !important; }

/* --- Episode detail page ------------------------------- */
.episode-player { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 12px; }
.episode-player iframe,
.episode-player .yt-facade { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.yt-facade { cursor: pointer; background: #000; }
.yt-facade img { width: 100%; height: 100%; object-fit: cover; }
.yt-facade__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--theme-color);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.6rem;
  transition: background 0.2s;
}
.yt-facade:hover .yt-facade__play { background: #006663; }

/* --- Episode meta tags --------------------------------- */
.episode-tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.episode-tag {
  background: rgba(0,137,133,0.15);
  border: 1px solid var(--theme-color);
  color: var(--theme-color);
  padding: 4px 14px; border-radius: 20px; font-size: 0.82em; font-weight: 600;
}

/* --- Guests list --------------------------------------- */
.episode-guests { color: var(--body-color); }
.episode-guests strong { color: var(--title-color); }

/* --- Episode description ------------------------------- */
.episode-description { color: var(--body-color); line-height: 1.8; max-width: 72ch; }
.episode-description p { margin-bottom: 1em; }

/* --- Visually hidden (a11y) ---------------------------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* --- Podcast style3 (carousel cards) ------------------- */
.podcast-style3 { background-color: #0c1c1b; border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; }
.podcast-style3 .podcast-img { position: relative; overflow: hidden; }
.podcast-style3 .podcast-img img { width: 100%; display: block; }
.podcast-style3 .podcast-content { padding: 24px 20px 20px; }
.podcast-style3 .podcast-title a { color: var(--title-color); }
.podcast-style3 .podcast-title a:hover { color: var(--theme-color); }
.podcast-style3 .author { position: absolute; bottom: 12px; left: 12px; }
.podcast-style3 .author img { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--theme-color); }

/* --- Utility ------------------------------------------ */
.mb-30 { margin-bottom: 30px; }
.gx-100 > * { padding-left: 50px; padding-right: 50px; }

/* ============================================================
   Motion
   ============================================================ */

/* --- Hero entrance: staggered fade-up on page load --------- */
@keyframes kp-fade-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes kp-fade-right {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}
.hero-layout2 .hero-subtitle  { animation: kp-fade-up   0.65s ease both; animation-delay: 0.10s; }
.hero-layout2 .hero-title     { animation: kp-fade-up   0.65s ease both; animation-delay: 0.25s; }
.hero-layout2 .hero-text      { animation: kp-fade-up   0.60s ease both; animation-delay: 0.40s; }
.hero-layout2 .hero-btn-group { animation: kp-fade-up   0.60s ease both; animation-delay: 0.55s; }
.hero-layout2 .hero-img       { animation: kp-fade-right 0.75s ease both; animation-delay: 0.20s; }

/* --- Scroll reveal (driven by app.js IntersectionObserver) - */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Episode card hover lift ------------------------------- */
.podcast-style3,
.podcast-style6 {
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.podcast-style3:hover,
.podcast-style6:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 137, 133, 0.22);
}

/* --- Respect prefers-reduced-motion ------------------------ */
@media (prefers-reduced-motion: reduce) {
  .hero-layout2 .hero-subtitle,
  .hero-layout2 .hero-title,
  .hero-layout2 .hero-text,
  .hero-layout2 .hero-btn-group,
  .hero-layout2 .hero-img { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .podcast-style3,
  .podcast-style6 { transition: none; }
}

/* ============================================================
   Carousel section
   ============================================================ */

/* Tighter vertical padding */
.kp-section-carousel { padding-top: 72px !important; padding-bottom: 64px !important; }

/* Slick dots — themed for mobile */
#epcarousel ~ .slick-dots,
.slick-dots { list-style: none; display: flex !important; justify-content: center; gap: 8px; padding: 16px 0 0; margin: 0; }
.slick-dots li button { width: 8px; height: 8px; border-radius: 50%; background: var(--border-color); border: none; padding: 0; font-size: 0; cursor: pointer; transition: background 0.2s, transform 0.2s; }
.slick-dots li.slick-active button { background: var(--theme-color); transform: scale(1.25); }
.slick-dots li button:hover { background: var(--theme-color); }

/* Flex container: [btn] [carousel] [btn] — buttons sit outside the slide area */
.kp-carousel-outer {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 36px;
}
.kp-carousel-inner {
  flex: 1;
  min-width: 0;
  overflow: hidden; /* clips slide transitions */
}
/* Bootstrap .row has -12px negative margins that overflow the parent.
   Zeroing them here prevents the outer cards from being clipped by overflow:hidden above. */
#epcarousel { margin-left: 0 !important; margin-right: 0 !important; }

/* Side nav buttons */
.kp-side-btn {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(9,18,17,0.82);
  border: 1.5px solid rgba(0,137,133,0.65);
  color: var(--title-color);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.kp-side-btn:hover {
  background: var(--theme-color);
  border-color: var(--theme-color);
  color: #fff;
  transform: scale(1.08);
}
@media (max-width: 767px) {
  .kp-side-btn { display: none; }
  .kp-carousel-outer { display: block; }
}

/* Equal-height cards via flexbox on the slick track */
#epcarousel .slick-track { display: flex !important; }
#epcarousel .slick-slide { height: auto !important; display: flex !important; flex-direction: column; }
#epcarousel .slick-slide > div { flex: 1; display: flex; flex-direction: column; }
#epcarousel .col-xl-4 { display: flex !important; flex-direction: column; }
#epcarousel .podcast-style3 {
  flex: 1;
  display: flex !important;
  flex-direction: column;
  padding: 0 !important;
  margin-bottom: 0 !important;
}
#epcarousel .podcast-style3::before { display: none !important; } /* remove template's animated border */
#epcarousel .podcast-style3 .podcast-img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
#epcarousel .podcast-style3 .podcast-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border: none !important;
  transition: none !important;
}
#epcarousel .podcast-style3 .podcast-content {
  flex: 1;
  display: flex !important;
  flex-direction: column;
  padding: 20px 18px 20px !important;
  margin-top: 0 !important; /* remove template's negative overlap margin */
}
#epcarousel .podcast-style3 .podcast-title {
  flex: 1;
  font-size: 0.95rem !important;
  line-height: 1.45 !important;
  margin-bottom: 16px !important;
  font-weight: 600 !important;
}
#epcarousel .podcast-style3 .vs-btn { align-self: flex-start; margin-top: auto; }

/* Hover: teal border only — no transform, no box-shadow (both clip inside slick-list) */
#epcarousel .podcast-style3 { transition: border-color 0.22s ease !important; }
#epcarousel .podcast-style3:hover {
  transform: none !important;
  border-color: var(--theme-color) !important;
  box-shadow: none !important;
}

/* ============================================================
   Afleveringen in de kijker — horizontal list
   ============================================================ */
.kp-spotlight-list {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.kp-spotlight-row {
  display: flex;
  background: #0c1c1b;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.22s ease;
}
.kp-spotlight-row:hover {
  border-color: var(--theme-color);
}
.kp-spotlight-thumb {
  flex: 0 0 300px;
  overflow: hidden;
  display: block;
  align-self: stretch;
  margin: 14px 0 14px 14px;
  border-radius: 8px;
}
.kp-spotlight-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.kp-spotlight-row:hover .kp-spotlight-thumb img {
  transform: scale(1.04);
}
.kp-spotlight-info {
  flex: 1;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.kp-spotlight-ep {
  display: inline-block;
  background: var(--theme-color);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
  font-family: var(--title-font);
  width: fit-content;
}
.kp-spotlight-title {
  font-size: 1.1rem;
  line-height: 1.4;
  margin-bottom: 8px;
  font-weight: 700;
  color: var(--title-color);
  font-family: var(--title-font);
}
.kp-spotlight-title a {
  color: inherit;
  text-decoration: none;
}
.kp-spotlight-title a:hover {
  color: var(--theme-color);
}
.kp-spotlight-blurb {
  font-size: 0.875rem;
  color: var(--body-color);
  line-height: 1.65;
  margin-bottom: 18px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kp-spotlight-info .vs-btn {
  align-self: flex-start;
  padding: 10px 22px;
  font-size: 0.83rem;
  letter-spacing: 0.04em;
}
@media (max-width: 767px) {
  .kp-spotlight-row { flex-direction: column; }
  .kp-spotlight-thumb { flex: none; width: 100%; aspect-ratio: 16 / 9; }
  .kp-spotlight-info { padding: 18px 20px 22px; }
  .kp-spotlight-info .vs-btn { align-self: stretch; text-align: center; }
}

/* ============================================================
   Guest form page
   ============================================================ */
.kp-guest-checklist { display: flex; flex-direction: column; gap: 12px; }
.kp-guest-check {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--body-color);
  font-size: 0.95rem;
}
.kp-guest-check i { color: var(--theme-color); font-size: 0.85rem; flex-shrink: 0; }

.kp-guest-form { display: flex; flex-direction: column; gap: 20px; }
.kp-form-row { display: flex; flex-direction: column; gap: 6px; }
.kp-form-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--title-color);
  font-family: var(--title-font);
  letter-spacing: 0.02em;
}
.kp-form-required { color: var(--theme-color); }
.kp-form-optional { color: var(--body-color); font-weight: 400; font-size: 0.82em; }
.kp-form-input {
  width: 100%;
  padding: 13px 18px;
  background: #0c1c1b;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--title-color);
  font-family: var(--body-font);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s;
}
.kp-form-input:focus { border-color: var(--theme-color); }
.kp-form-input::placeholder { color: var(--body-color); opacity: 0.7; }
.kp-form-input--error { border-color: #e05c5c; }
.kp-form-textarea { resize: vertical; min-height: 110px; }
.kp-form-error { font-size: 0.82rem; color: #e05c5c; }

.kp-form-success {
  background: #0c1c1b;
  border: 1px solid var(--theme-color);
  border-radius: 12px;
  padding: 48px 36px;
  text-align: center;
}
/* CTA buttons */
.kp-cta-btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* --- Samenwerking cards ----------------------------------- */
.kp-sw-card {
  background: #0c1c1b;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 32px 28px;
  height: 100%;
  transition: border-color 0.22s ease, transform 0.22s ease;
}
.kp-sw-card:hover {
  border-color: var(--theme-color);
  transform: translateY(-4px);
}
.kp-sw-card--highlight {
  border-color: var(--theme-color);
  background: rgba(0,137,133,0.08);
}
.kp-sw-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0,137,133,0.15);
  border: 1px solid var(--theme-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--theme-color);
  font-size: 1.1rem;
  margin-bottom: 18px;
}
.kp-sw-card__title {
  color: var(--title-color);
  font-family: var(--title-font);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 10px;
}
.kp-sw-card__text {
  color: var(--body-color);
  font-size: 0.9rem;
  line-height: 1.7;
  margin: 0;
}
.kp-form-select {
  cursor: pointer;
}
.kp-form-select option { background: #0c1c1b; color: var(--title-color); }

/* --- Sponsors bar (above footer, all pages) --------------- */
.kp-sponsors-bar {
  background-color: #0c1c1b;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  padding: 24px 0;
}
/* --- Sponsors row ----------------------------------------- */
.kp-sponsors-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.kp-sponsors-label {
  color: var(--body-color);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--title-font);
}
.kp-sponsors-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 36px;
}
.kp-sponsor-logo {
  height: 57px;
  max-height: 57px;
  max-width: 234px;
  width: auto;
  object-fit: contain;
  transition: opacity 0.2s;
}
.kp-sponsor-logo:hover { opacity: 0.75; }
@media (max-width: 767px) {
  .kp-sponsor-logo { height: 42px; max-height: 42px; }
}

.kp-form-success__icon { font-size: 3rem; color: var(--theme-color); margin-bottom: 16px; }
.kp-form-success h3 { color: var(--title-color); margin-bottom: 12px; }
.kp-form-success p { color: var(--body-color); line-height: 1.7; }

/* ============================================================
   Responsive — tablet (≤991px)
   ============================================================ */
@media (max-width: 991px) {
  /* Spotlight thumb slightly narrower on tablet */
  .kp-spotlight-thumb { flex: 0 0 220px; }

  /* Team card image height on tablet */
  .team-style1 .team-img img { height: 420px; }

  /* Stats numbers slightly smaller */
  .bg-theme [style*="font-size:2.4rem"] { font-size: 2rem !important; }
}

/* ============================================================
   Responsive — mobile (≤767px)
   ============================================================ */
@media (max-width: 767px) {
  /* Breadcrumb title */
  .breadcumb-title { font-size: 32px !important; }

  /* Hero padding */
  .hero-layout2 { padding: 40px 0 48px !important; }
  .hero-layout2 .hero-title { font-size: clamp(30px, 8vw, 48px) !important; }

  /* Hero buttons: allow wrapping and full-width on xs */
  .hero-btn-group { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
  .hero-btn-group .vs-btn { flex: 1 1 140px; text-align: center; justify-content: center; }

  /* Latest episode strip: stack vertically */
  .audio-style2 { flex-direction: column; gap: 14px !important; }

  /* Stats strip: tighten gutters */
  .bg-theme .gx-40 { --bs-gutter-x: 1.5rem; }
  .bg-theme [style*="font-size:2.4rem"] { font-size: 1.8rem !important; }

  /* CTA home page: remove large horizontal gutters */
  .gx-100 { --bs-gutter-x: 1.5rem !important; }

  /* Team card image: use aspect-ratio on mobile so portrait photos aren't cut */
  .team-style1 .team-img img { height: auto; aspect-ratio: 3 / 4; }

  /* Guest form success: tighter padding */
  .kp-form-success { padding: 32px 20px; }

  /* Section spacing tighter on mobile */
  .space-top { padding-top: var(--section-space-mobile) !important; }
  .space-extra-bottom { padding-bottom: var(--section-space-mobile) !important; }
  .space { padding-top: var(--section-space-mobile) !important; padding-bottom: var(--section-space-mobile) !important; }

  /* Carousel section */
  .kp-section-carousel { padding-top: 40px !important; padding-bottom: 40px !important; }

  /* Ticker font size */
  .kp-ticker-text { font-size: 0.85rem; }
}

/* ============================================================
   Privacy page
   ============================================================ */
.kp-privacy-content { color: var(--body-color); line-height: 1.8; }
.kp-privacy-intro { font-size: 1.05rem; color: var(--title-color); margin-bottom: 32px; line-height: 1.75; }
.kp-privacy-h2 { color: var(--title-color); font-size: 1.25rem; font-weight: 700; margin: 36px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border-color); }
.kp-privacy-content p { margin-bottom: 14px; }
.kp-privacy-content a { color: var(--theme-color); }
.kp-privacy-content a:hover { filter: brightness(1.2); }
.kp-privacy-list { padding-left: 20px; margin-bottom: 14px; }
.kp-privacy-list li { margin-bottom: 8px; }

/* Consent checkbox — override template's global display:none on checkboxes */
.kp-form-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  color: var(--body-color);
  font-size: 0.88rem;
  line-height: 1.5;
}
.kp-form-consent input[type="checkbox"] {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--theme-color);
  cursor: pointer;
}
.kp-form-consent a { color: var(--theme-color); }

/* Cookie banner */
.kp-cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #0c1c1b;
  border-top: 1px solid var(--border-color);
  z-index: 9999;
  padding: 16px 0;
}
.kp-cookie-banner__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.kp-cookie-banner__text {
  color: var(--body-color);
  font-size: 0.88rem;
  margin: 0;
  flex: 1;
  min-width: 200px;
}
.kp-cookie-banner__text a { color: var(--theme-color); }
.kp-cookie-banner__btns { display: flex; gap: 10px; flex-shrink: 0; }
.kp-cookie-btn {
  padding: 9px 22px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--theme-color);
  font-family: var(--title-font);
  transition: background 0.2s, color 0.2s;
}
.kp-cookie-btn--accept { background: var(--theme-color); color: #fff; }
.kp-cookie-btn--accept:hover { background: #006663; border-color: #006663; }
.kp-cookie-btn--decline { background: transparent; color: var(--body-color); border-color: var(--border-color); }
.kp-cookie-btn--decline:hover { border-color: var(--theme-color); color: var(--title-color); }
@media (max-width: 600px) {
  .kp-cookie-banner__inner { flex-direction: column; align-items: flex-start; }
  .kp-cookie-banner__btns { width: 100%; }
  .kp-cookie-btn { flex: 1; text-align: center; }
}

/* ============================================================
   Samenwerking page — new components
   ============================================================ */

/* Hero stats row */
.kp-sw-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.kp-sw-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kp-sw-stat__num {
  font-family: var(--title-font);
  font-size: 2rem;
  font-weight: 800;
  color: var(--theme-color);
  line-height: 1;
}
.kp-sw-stat__label {
  font-size: 0.78rem;
  color: var(--body-color);
  font-weight: 500;
  letter-spacing: 0.03em;
}

/* Info card (right column of hero) */
.kp-sw-info-card {
  background: #0c1c1b;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.kp-sw-info-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.kp-sw-info-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--theme-color);
  font-family: var(--title-font);
}
.kp-sw-info-label i { margin-right: 5px; }
.kp-sw-info-val {
  font-size: 0.9rem;
  color: var(--title-color);
  font-weight: 500;
}

/* Gender bars */
.kp-sw-gender-bar {
  position: relative;
  height: 22px;
  background: rgba(0,137,133,0.12);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 4px;
  width: 100%;
}
.kp-sw-gender-bar span {
  position: absolute;
  top: 0; left: 0; height: 100%;
  background: var(--theme-color);
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  padding-left: 8px;
  white-space: nowrap;
}
.kp-sw-gender-bar--f span { background: rgba(0,137,133,0.55); }

/* "Hoe pakken we dit aan?" steps */
.kp-sw-steps { display: flex; flex-direction: column; gap: 24px; }
.kp-sw-step {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.kp-sw-step__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0,137,133,0.15);
  border: 1px solid var(--theme-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--theme-color);
  font-size: 1rem;
}
.kp-sw-step__title {
  font-family: var(--title-font);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--title-color);
  margin-bottom: 5px;
}
.kp-sw-step__text {
  font-size: 0.875rem;
  color: var(--body-color);
  line-height: 1.7;
  margin: 0;
}

/* Pricing tables */
.kp-sw-table-wrap {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--border-color);
}
.kp-sw-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
  background: #0c1c1b;
}
.kp-sw-table thead tr {
  background: rgba(0,137,133,0.18);
}
.kp-sw-table th {
  padding: 14px 20px;
  font-family: var(--title-font);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--title-color);
  text-align: left;
  white-space: nowrap;
}
.kp-sw-table td {
  padding: 16px 20px;
  font-size: 0.9rem;
  color: var(--body-color);
  border-top: 1px solid var(--border-color);
  vertical-align: middle;
}
.kp-sw-table tbody tr:hover td { background: rgba(0,137,133,0.06); }
.kp-sw-table td:first-child { color: var(--title-color); }
.kp-sw-na {
  display: inline-block;
  color: var(--border-color);
  font-size: 1.1rem;
}

/* Table notes */
.kp-sw-table-notes {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kp-sw-table-notes p {
  font-size: 0.83rem;
  color: var(--body-color);
  margin: 0;
}

/* Meer info toggle button */
.kp-sw-meer-info-wrap {
  display: flex;
  justify-content: center;
  padding: 40px 0 48px;
  background: linear-gradient(135deg, #0c2422 0%, #091211 100%);
}
.kp-sw-meer-info-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(0,137,133,0.12);
  border: 1.5px solid var(--theme-color);
  color: var(--title-color);
  font-family: var(--title-font);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 14px 36px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease;
}
.kp-sw-meer-info-btn:hover {
  background: var(--theme-color);
  color: #fff;
  transform: translateY(-2px);
}
.kp-sw-meer-info-btn__icon {
  display: flex;
  align-items: center;
  transition: transform 0.35s ease;
}
.kp-sw-meer-info-btn[aria-expanded="true"] .kp-sw-meer-info-btn__icon {
  transform: rotate(180deg);
}

/* Collapsible content wrapper */
.kp-sw-collapsible {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.6s ease;
}

/* ============================================================
   Responsive — tablet (≤991px) — samenwerking additions
   ============================================================ */
@media (max-width: 991px) {
  /* Info card gains top margin when it stacks below the text column */
  .kp-sw-info-card { margin-top: 36px; }

  /* Slightly reduce meer-info button section padding */
  .kp-sw-meer-info-wrap { padding: 28px 0 36px; }
}

/* ============================================================
   Responsive — mobile (≤767px) — samenwerking additions
   ============================================================ */
@media (max-width: 767px) {
  /* Stat numbers slightly smaller */
  .kp-sw-stat__num { font-size: 1.6rem; }

  /* Meer-info wrap tighter */
  .kp-sw-meer-info-wrap { padding: 24px 16px 28px; }

  /* Meer-info button smaller */
  .kp-sw-meer-info-btn { padding: 12px 28px; font-size: 0.9rem; }

  /* Info card tighter padding */
  .kp-sw-info-card { padding: 20px; }

  /* Steps: reduce icon so text has more room */
  .kp-sw-step__icon { width: 38px; height: 38px; font-size: 0.9rem; flex-shrink: 0; }
}

/* ============================================================
   Responsive — small mobile (≤480px)
   ============================================================ */
@media (max-width: 480px) {
  /* Breadcrumb */
  .breadcumb-title { font-size: 26px !important; }

  /* Spotlight: already column layout from 767px, tighten info padding */
  .kp-spotlight-thumb { margin: 0; border-radius: 12px 12px 0 0; }

  /* Archive search already stacks at 600px */

  /* Stats: single column on very small screens */
  .bg-theme .row { flex-direction: column; align-items: center; gap: 20px; }

  /* Guest form input font-size prevents iOS auto-zoom */
  .kp-form-input { font-size: 1rem; }

  /* Nav logo smaller */
  .header-logo img { height: 38px; }

  /* Samenwerking stats wrap into 2-column grid on very small screens */
  .kp-sw-stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

  /* Table notes: allow text to wrap tightly */
  .kp-sw-table-notes p { font-size: 0.78rem; }
}