/*
Theme Name: Krak in 't Vak
Theme URI: https://krakintvak.be
Author: Athes Agency
Description: WordPress theme voor de Krak in 't Vak React-website met WordPress contentbeheer.
Version: 1.0.0
Text Domain: krakintvak
*/

html {
  background: #fbfaf7;
}

body {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  background: #fbfaf7;
  color: #333333;
  overflow-x: hidden;
}

#root {
  min-height: 100vh;
  overflow-x: clip;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

body.menu-open,
body.overflow-hidden {
  overflow-x: hidden;
}

main,
section,
header,
footer,
div {
  box-sizing: border-box;
}

.admin-bar .sticky.top-0 {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .sticky.top-0 {
    top: 46px;
  }
}

/* Hero: remove photo carousel visuals, keep current dark-blue mood, add subtle motion */
#home {
  position: relative;
  isolation: isolate;
  background: linear-gradient(160deg, #0f172a 0%, #1f2937 55%, #111827 100%);
}

#home .absolute.inset-0.z-0 {
  background: linear-gradient(160deg, #111827 0%, #1f2937 65%, #0b1322 100%);
}

#home .absolute.inset-0.z-0 > img,
#home .absolute.inset-0.z-0 > div {
  display: none !important;
}

#home .mt-10.flex.items-center.gap-2 {
  display: none !important;
}

#home::before,
#home::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(56px);
}

#home::before {
  width: 46vw;
  height: 46vw;
  top: -8vw;
  left: 4vw;
  background: radial-gradient(circle, rgba(243, 11, 11, 0.3) 0%, rgba(243, 11, 11, 0) 70%);
  animation: kiv-hero-red-float 12s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

#home::after {
  width: 34vw;
  height: 34vw;
  right: 6vw;
  bottom: -4vw;
  background: radial-gradient(circle, rgba(243, 11, 11, 0.22) 0%, rgba(243, 11, 11, 0) 72%);
  animation: kiv-hero-red-pulse 10s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes kiv-hero-red-float {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(7vw, -3vw, 0) scale(1.08);
  }
  100% {
    transform: translate3d(11vw, 4vw, 0) scale(1.12);
  }
}

@keyframes kiv-hero-red-pulse {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.52;
  }
  50% {
    transform: translate3d(-6vw, -3vw, 0) scale(1.14);
    opacity: 0.78;
  }
  100% {
    transform: translate3d(4vw, 2.5vw, 0) scale(1.05);
    opacity: 0.58;
  }
}

@media (prefers-reduced-motion: reduce) {
  #home::before,
  #home::after {
    animation-duration: 30s;
  }
}

/* Decision aid (vergelijker): keep long service names inside cards */
#keuzehulp div[class*="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"] {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

#keuzehulp div[class*="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"] > button {
  align-items: center;
  min-height: 96px;
  overflow: visible;
}

#keuzehulp div[class*="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"] > button > div:first-child {
  flex-shrink: 0;
}

#keuzehulp div[class*="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"] > button > span {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.95rem;
  line-height: 1.25;
  white-space: normal;
  text-overflow: clip;
  overflow: visible;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
  text-align: left;
}

@media (max-width: 640px) {
  #home h1,
  #diensten h2,
  #partners h2,
  #contact h2 {
    overflow-wrap: anywhere;
  }

  #diensten .grid,
  #partners .grid,
  #contact .grid {
    min-width: 0;
  }

  #contact .lg\:col-span-7 > div > .relative.z-10 {
    padding: 2rem 1.25rem;
    border-left-width: 8px;
    border-top-right-radius: 2.5rem;
    border-bottom-left-radius: 2.5rem;
  }

  #contact form .grid {
    gap: 2rem;
  }

  #contact form .flex.flex-col.sm\:flex-row.items-center.gap-10.pt-4 {
    gap: 1.5rem;
    align-items: stretch;
  }

  #partners a,
  #diensten .group,
  #keuzehulp .group,
  #contact a,
  #contact form button {
    min-width: 0;
  }

  #keuzehulp div[class*="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"] > button > span {
    font-size: 0.9rem;
  }
}

/* Partner app page: align with the site's dark hero + red accent language */
.page-template-page-partner-programma-app,
.page-template-page-partner-programma-app body {
  background: #fbfaf7;
}

.kiv-partner-app-page {
  background:
    radial-gradient(circle at top left, rgba(243, 11, 11, 0.08), transparent 24%),
    linear-gradient(180deg, #fbfaf7 0%, #f6f3ee 100%);
}

.kiv-partner-app-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(243, 11, 11, 0.26), transparent 24%),
    radial-gradient(circle at 82% 24%, rgba(243, 11, 11, 0.12), transparent 20%),
    linear-gradient(155deg, #08111f 0%, #101c30 58%, #111827 100%);
}

.kiv-partner-app-hero::before,
.kiv-partner-app-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(64px);
}

.kiv-partner-app-hero::before {
  width: 32rem;
  height: 32rem;
  left: -10rem;
  top: -8rem;
  background: rgba(243, 11, 11, 0.18);
  animation: kiv-partner-glow-a 14s ease-in-out infinite alternate;
}

.kiv-partner-app-hero::after {
  width: 28rem;
  height: 28rem;
  right: -6rem;
  bottom: -10rem;
  background: rgba(243, 11, 11, 0.12);
  animation: kiv-partner-glow-b 11s ease-in-out infinite alternate;
}

@keyframes kiv-partner-glow-a {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(3rem, 2rem, 0) scale(1.08);
  }
}

@keyframes kiv-partner-glow-b {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.5;
  }
  100% {
    transform: translate3d(-2rem, -2rem, 0) scale(1.12);
    opacity: 0.78;
  }
}

.kiv-partner-app-frost-card {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.08));
  box-shadow: 0 18px 48px rgba(3, 7, 18, 0.24);
  backdrop-filter: blur(18px);
}

.kiv-partner-app-dark-card {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
    linear-gradient(155deg, #101827 0%, #172336 100%);
  box-shadow: 0 26px 70px rgba(15, 23, 42, 0.32);
}

.kiv-partner-app-light-card {
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.07);
}

.kiv-partner-app-accent-card {
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.14), transparent 28%),
    linear-gradient(160deg, #f30b0b 0%, #af0b22 52%, #7f1630 100%);
  box-shadow: 0 30px 80px rgba(243, 11, 11, 0.24);
}

.kiv-partner-app-whatsapp {
  border: 1px solid rgba(37, 211, 102, 0.22);
  background:
    linear-gradient(145deg, rgba(37, 211, 102, 0.18), rgba(255, 255, 255, 0.96)),
    #ffffff;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.12);
}

.kiv-whatsapp-hero-card {
  position: relative;
  z-index: 4;
}

.kiv-whatsapp-contact-card {
  position: relative;
  overflow: hidden;
}

.kiv-whatsapp-contact-card::before {
  content: "";
  position: absolute;
  inset: auto -2rem -3rem auto;
  width: 8rem;
  height: 8rem;
  border-radius: 999px;
  background: rgba(37, 211, 102, 0.12);
  filter: blur(20px);
  pointer-events: none;
}

@media (max-width: 767px) {
  .kiv-whatsapp-hero-card {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kiv-partner-app-hero::before,
  .kiv-partner-app-hero::after {
    animation-duration: 28s;
  }
}

@media (max-width: 767px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  #home::before,
  #home::after,
  .kiv-partner-app-hero::before,
  .kiv-partner-app-hero::after,
  .kiv-whatsapp-contact-card::before {
    display: none;
  }

  #diensten .group.relative.bg-\[\#FFFFFF\].rounded-\[3\.5rem\].p-12,
  #diensten .lg\:col-span-1.bg-\[linear-gradient\(160deg\2c \#111827_0\%\2c \#1F2937_100\%\)\].rounded-\[3\.5rem\].p-12,
  #partners a.flex.flex-col.bg-\[\#FFFFFF\].rounded-\[3rem\].p-10,
  #contact .relative.z-10.bg-\[\#FFFFFF\].rounded-tr-\[5rem\].rounded-bl-\[5rem\].rounded-tl-lg.rounded-br-lg.p-10 {
    padding: 1.5rem;
    border-radius: 1.75rem;
  }

  #contact .flex.gap-10.text-slate-400.text-sm.font-bold {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 1.5rem;
  }

  #keuzehulp .min-w-\[220px\] {
    min-width: 0;
    width: 100%;
  }

  #contact .text-\[10px\].text-\[\#6B7280\].font-bold.uppercase.tracking-widest.leading-relaxed.max-w-\[180px\] {
    max-width: none;
    text-align: center;
  }
}