/*
Theme Name: VetsWare Classic
Theme URI: https://www.vetsware.nl
Description: VetsWare marketing site theme — modern redesign 2026
Version: 2.0
Text Domain: vetsware
*/

/* ---- Base resets — Tailwind handles the rest ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Nunito Sans', sans-serif; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; }
:target { scroll-margin-top: 72px; }

/* ---- Sticky nav ---- */
#site-header {
  background-color: rgba(255,255,255,0);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
#site-header.scrolled {
  background-color: rgba(255,255,255,0.96);
  box-shadow: 0 1px 0 rgba(0,0,0,0.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ---- Pulsing badge ---- */
@keyframes vw-ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}
.animate-ping { animation: vw-ping 1.5s cubic-bezier(0,0,0.2,1) infinite; }

/* ---- Floating card ---- */
@keyframes vw-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.animate-float { animation: vw-float 5s ease-in-out infinite; }

/* ---- Scroll-reveal ---- */
.js-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.js-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Responsive: Waarom grid — 2 col on desktop, 1 on mobile ---- */
@media (max-width: 767px) {
  #waarom [style*="grid-template-columns: 1fr 1fr"],
  #waarom [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  #waarom article[style*="margin-top: 2rem"],
  #waarom article[style*="margin-top:2rem"] {
    margin-top: 0 !important;
  }
}

/* ---- Responsive: Mogelijkheden bento grid ---- */
@media (max-width: 1023px) {
  #mogelijkheden [style*="grid-template-columns: repeat(12"],
  #mogelijkheden [style*="grid-template-columns:repeat(12"] {
    grid-template-columns: 1fr !important;
  }
  #mogelijkheden article[style*="grid-column: span"],
  #mogelijkheden article[style*="grid-column:span"] {
    grid-column: span 1 !important;
  }
  #mogelijkheden [style*="grid-template-columns: repeat(3"],
  #mogelijkheden [style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 640px) {
  #mogelijkheden [style*="grid-template-columns: repeat(3"],
  #mogelijkheden [style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr !important;
  }
}

/* ---- Responsive: Contact card ---- */
@media (max-width: 1023px) {
  #contact .lg\:col-span-7,
  #contact .lg\:col-span-5 {
    grid-column: span 12 !important;
  }
  #contact [style*="grid-template-columns: 1fr 1fr"],
  #contact [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ---- Hero responsive ---- */
@media (max-width: 1023px) {
  #hero .lg\:grid-cols-2 > div:last-child {
    display: none;
  }
}

/* ---- Footer responsive ---- */
@media (max-width: 767px) {
  #site-footer [style*="display:grid"],
  #site-footer [style*="display: grid"] {
    display: block !important;
  }
  #site-footer [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}