/* ==========================================================================
   JPT redesign "B2 Boutique" — gedeelde huisstijl voor alle pagina's
   Beige basis, donkerblauwe tekst, aqua accent, afgeronde kaders.
   Selectors beginnen met "html body" zodat ze de Tailwind-utilities
   overschrijven zonder !important.
   ========================================================================== */
:root{
  --b2-bg:#F1EAE2;      /* beige hoofdachtergrond (over-ons) */
  --b2-bg2:#E9E0D5;     /* iets donkerder beige voor afwisseling */
  --b2-paper:#FBF8F4;   /* kaarten */
  --b2-blue:#123E6A;
  --b2-aqua:#1DB7AF;
  --b2-line:rgba(18,62,106,.12);
}

html body{background-color:var(--b2-bg);color:var(--b2-blue)}
html body ::selection{background:var(--b2-aqua);color:#fff}

/* ---------- Typografie: schuine Montserrat-koppen zoals over-ons ---------- */
html body h1.font-display,
html body h2.font-display{font-style:italic;text-transform:uppercase;letter-spacing:-.015em;line-height:1.02}
html body .text-jpt-charcoal{color:#1d3350}

/* ---------- Achtergronden ---------- */
html body section.bg-white,
html body article.bg-white,
html body main.bg-white{background-color:var(--b2-bg)}
html body section.bg-jpt-offwhite,
html body article.bg-jpt-offwhite{background-color:var(--b2-bg2)}
html body div.bg-white,
html body div.bg-jpt-offwhite,
html body form.bg-white{background-color:var(--b2-paper)}
html body div.bg-white,
html body div.bg-jpt-offwhite,
html body .quote-card{border-radius:22px}
html body [class*="border-jpt-charcoal"]{border-color:var(--b2-line)}

/* ---------- Header: licht en transparant op beige ---------- */
html body #site-header{background-color:rgba(241,234,226,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-color:var(--b2-line)}
html body #site-header.is-scrolled{box-shadow:0 1px 0 var(--b2-line),0 18px 40px -30px rgba(18,62,106,.35)}
html body #site-header [class*="text-white"]{color:rgba(18,62,106,.78)}
html body #site-header nav > a:hover,
html body #site-header nav button{color:var(--b2-blue)}
html body #site-header [class*="border-white"]{border-color:var(--b2-line)}
html body #site-header .cta-aqua{color:#fff}
html body #mobile-menu{background-color:var(--b2-bg)}
html body #site-header .group .bg-white{border-radius:22px;background:var(--b2-paper)}

/* ---------- Knoppen en formulieren ---------- */
html body .cta-aqua,
html body .cta-blue,
html body .cta-ghost,
html body button[type="submit"]{border-radius:999px}
html body .cta-blue:hover{background-color:#0d2f52}
html body .intake-input,
html body input[type="text"],html body input[type="email"],html body input[type="tel"],
html body select,html body textarea{border-radius:14px}

/* ---------- Hero: afgerond kader, net als de homepage ---------- */
html body .b2-hero{margin:5.75rem 14px 0;border-radius:28px;background:linear-gradient(135deg,#123E6A 0%,#0f355c 60%,#0c2c4d 100%)}
html body .b2-hero .min-h-screen{min-height:calc(100vh - 7rem);padding-top:0}
html body .b2-hero img{border-radius:0}
@media (max-width:1023px){
  html body .b2-hero{margin:5.25rem 8px 0;border-radius:22px}
}

/* Overige donkere en aqua blokken: zelfde afgeronde kader */
html body section.bg-jpt-blue:not(.b2-hero),
html body section.bg-jpt-aqua{margin-left:14px;margin-right:14px;border-radius:28px}
@media (max-width:1023px){
  html body section.bg-jpt-blue:not(.b2-hero),
  html body section.bg-jpt-aqua{margin-left:8px;margin-right:8px;border-radius:22px}
}

/* ---------- Beeld ---------- */
html body section img.object-cover,
html body article img.object-cover{border-radius:22px}
html body .b2-hero img.object-cover{border-radius:0}

/* ---------- Footer: beige in plaats van donkerblauw ---------- */
html body footer.bg-jpt-blue{background-color:var(--b2-bg2);color:var(--b2-blue);border-color:var(--b2-line);margin-top:14px}
html body footer [class*="text-white"]{color:rgba(18,62,106,.72)}
html body footer [class*="text-white/4"],
html body footer [class*="text-white/3"]{color:rgba(18,62,106,.5)}
html body footer [class*="border-white"]{border-color:var(--b2-line)}
html body footer a:hover{color:var(--b2-aqua)}

/* Losse knoppen (zonder cta-klasse) ook als pil */
html body a.inline-flex[class*="py-4"],
html body a.inline-flex[class*="py-3"]{border-radius:999px}

/* ---------- Oude stijlelementen omzetten naar B2 ---------- */
/* Fotokaders met witte rand: weg, foto zelf afgerond */
html body figure[class*="border"][class*="p-3"]{border:0;padding:0;background:transparent}
html body figure img{border-radius:22px}
html body figure figcaption{color:rgba(18,62,106,.7);padding-top:10px}
/* Statistiekgrids met 1px-lijnen: losse kaarten */
html body [class*="gap-px"][class*="bg-jpt-charcoal"]{background:transparent;border:0;gap:16px}
/* Keuzeknoppen en losse knoppen in content: pil-vorm */
html body main button[class*="border"],html body section button[class*="border"],
html body section button[class*="bg-jpt-aqua"],html body section button[class*="bg-jpt-blue"],
html body .klacht-pill{border-radius:999px}
html body section a[class*="bg-jpt-blue"][class*="px-"],html body section a[class*="bg-jpt-aqua"][class*="px-"]{border-radius:999px}
/* Leesbaarheid: lichte grijstinten donkerder */
html body [class*="text-jpt-charcoal/4"],html body [class*="text-jpt-charcoal/5"],html body [class*="text-jpt-charcoal/6"]{color:rgba(18,62,106,.72)}
html body [class*="text-jpt-charcoal/7"],html body [class*="text-jpt-charcoal/8"]{color:rgba(18,62,106,.84)}
html body [class*="text-jpt-blue/5"],html body [class*="text-jpt-blue/6"],html body [class*="text-jpt-blue/7"]{color:rgba(18,62,106,.8)}
/* Body met bg-white-klasse ook beige */
html body[class]{background-color:var(--b2-bg)}
html body .b2-hero figure img{border-radius:22px}