/*
 * tailwind-supplement.css
 * ------------------------------------------------------------------
 * Vangnet voor Tailwind-utility-classes die WEL in de templates worden
 * gebruikt, maar ONTBREKEN in de meegeleverde (statische) build
 * assets/css/tailwind.min.css. Die build wordt niet bij elke deploy
 * opnieuw gegenereerd (er is geen Tailwind-build-stap in de pipeline),
 * dus nieuw toegevoegde classes in PHP-templates kregen geen CSS en
 * deden live niets -> verkeerde padding, niet-begrensde containers,
 * kolommen die niet de juiste breedte kregen, enz.
 *
 * Alle waarden hieronder volgen exact de standaard Tailwind v3-schaal
 * (1 = 0.25rem) en de breakpoints van deze build (md = 768px, lg = 1024px).
 * Wordt direct NA tailwind.min.css ingeladen, zodat het zich gedraagt
 * als onderdeel van Tailwind.
 *
 * LET OP: dit is een pleister. De nette oplossing is een echte
 * Tailwind-rebuild in de deploy-pipeline (zie UI-UX-audit-rapport).
 */

/* ── Sizing ─────────────────────────────────────────────────────── */
.w-1\/2 { width: 50%; }
.w-1\/4 { width: 25%; }
.w-1\/6 { width: 16.666667%; }
.w-11   { width: 2.75rem; }
.h-11   { height: 2.75rem; }
.w-\[400px\] { width: 400px; }
.w-\[600px\] { width: 600px; }
.h-\[600px\] { height: 600px; }
.max-w-7xl   { max-width: 80rem; }

/* ── Grid ───────────────────────────────────────────────────────── */
.col-span-2 { grid-column: span 2 / span 2; }

/* ── Spacing: gaps ──────────────────────────────────────────────── */
.gap-16  { gap: 4rem; }
.gap-y-3 { row-gap: 0.75rem; }

/* ── Spacing: padding ───────────────────────────────────────────── */
.p-16  { padding: 4rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.pt-4  { padding-top: 1rem; }
.pb-4  { padding-bottom: 1rem; }

/* ── Spacing: margin ────────────────────────────────────────────── */
.ml-1 { margin-left: 0.25rem; }
.mt-5 { margin-top: 1.25rem; }

/* ── Positie ────────────────────────────────────────────────────── */
.top-8     { top: 2rem; }
.top-10    { top: 2.5rem; }
.left-8    { left: 2rem; }
.-bottom-4 { bottom: -1rem; }

/* ── Flex / overflow / tekst ────────────────────────────────────── */
.justify-start    { justify-content: flex-start; }
.overflow-visible { overflow: visible; }
.tracking-normal  { letter-spacing: 0em; }
.text-gray-900    { --tw-text-opacity: 1; color: rgb(17 24 39 / var(--tw-text-opacity, 1)); }

/* ── Kleuren met opacity (custom thema-kleur bgPrimary = #4bb3ff) ── */
.bg-bgPrimary\/30 { background-color: rgb(75 179 255 / 0.3); }
.border-white\/60 { border-color: rgb(255 255 255 / 0.6); }

/* ── Transform (decoratieve glow-cirkels). Volledige composite-string
      zodat ze samenwerken met rotate/scale-utilities, net als Tailwind. */
.translate-x-1\/3,
.-translate-x-1\/3,
.translate-y-1\/3,
.-translate-y-1\/3 {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-1\/3  { --tw-translate-x: 33.333333%; }
.-translate-x-1\/3 { --tw-translate-x: -33.333333%; }
.translate-y-1\/3  { --tw-translate-y: 33.333333%; }
.-translate-y-1\/3 { --tw-translate-y: -33.333333%; }

/* ── Hover ──────────────────────────────────────────────────────── */
.hover\:shadow-sm:hover { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }

/* ── Responsive: md (>= 768px) ──────────────────────────────────── */
@media (min-width: 768px) {
  .md\:px-6  { padding-left: 1.5rem; padding-right: 1.5rem; }
  .md\:p-14  { padding: 3.5rem; }
  .md\:pt-8  { padding-top: 2rem; }
  .md\:pb-4  { padding-bottom: 1rem; }
  .md\:pb-28 { padding-bottom: 7rem; }
  .md\:py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .md\:py-24 { padding-top: 6rem; padding-bottom: 6rem; }
  .md\:py-36 { padding-top: 9rem; padding-bottom: 9rem; }
}

/* ── Responsive: lg (>= 1024px) ─────────────────────────────────── */
@media (min-width: 1024px) {
  .lg\:flex { display: flex; }
  .lg\:p-24 { padding: 6rem; }
}