/*
 * Portaalstijl (2026-10-05) — provisualonline.nl in de stijl van het Mijn
 * Provisual-portaal: zwevende afgeronde kaarten op een lichtgrijze ondergrond,
 * donkere navy panelen met zachte blauwe/groene gloed, strakke vette koppen.
 *
 * ALLEEN CSS, geen gedrag: menu's, dropdowns, marquee, zoek, mobiel menu,
 * sticky header en de widgets behouden hun eigen display/position/transform/
 * animation/overflow/z-index. Deze file staat los van style.css en wordt
 * erna geladen (zie functions.php, handle pv-portaalstijl): de hele restyle
 * gaat uit door die ene enqueue-regel weg te halen.
 *
 * Opbouw: 1 tokens + herpunten van bestaande variabelen, 2 typografie,
 * 3 knoppen, 4 header + panelen, 5 homepage-secties, 6 kaarten, 7 footer,
 * 8 formulieren/focus, 9 mobiel.
 */

/* ───────────────────────── 1. Tokens ───────────────────────── */
:root{
  --pv-page:#eef2f8;
  --pv-card:#ffffff;
  --pv-soft:#f2f5fa;
  --pv-navy:#0a1730;
  --pv-text:#0d1830;
  --pv-text-2:#4a5670;
  --pv-muted:#6b7891;
  --pv-blue:#1e88f5;
  --pv-blue-link:#1270e0;
  --pv-blue-soft:#e6f0fd;
  --pv-green:#22c08a;
  --pv-green-soft:#e3f7ee;
  --pv-green-text:#0f8a5b;
  --pv-on-navy:#c4cede;
  --pv-on-navy-muted:#a9b6cc;
  --pv-glass:rgba(255,255,255,.05);
  --pv-glass-border:rgba(255,255,255,.09);
  --pv-gradient-text:linear-gradient(90deg,#4fb2ff,#2fd0c0 55%,#4ade80);
  --pv-glow-blue:radial-gradient(circle,rgba(30,136,245,.55),transparent 65%);
  --pv-glow-green:radial-gradient(circle,rgba(34,192,138,.45),transparent 65%);
  --pv-r-panel:32px;
  --pv-r-card:24px;
  --pv-r-tile:18px;
  --pv-r-btn:14px;
  --pv-r-nav:20px;
  --pv-shadow-card:0 1px 2px rgba(13,24,48,.05),0 10px 30px rgba(13,24,48,.05);
  --pv-shadow-panel:0 20px 50px rgba(10,23,48,.25);
  --pv-panel-gap:16px;

  /* Bestaande thema-variabelen (style.css) en WordPress-presets (theme.json)
     wijzen nu naar de portaalkleuren, zodat alles wat ze gebruikt meekleurt. */
  --pv-blue-strong:var(--pv-blue-link);
  --pv-green-strong:var(--pv-green-text);
  --pv-ink:var(--pv-text);
  --pv-ink-soft:var(--pv-text-2);
  --pv-bg:var(--pv-page);
  --pv-surface:var(--pv-card);
  --pv-surface-2:var(--pv-soft);
  --pv-shadow:var(--pv-shadow-card);
  --wp--preset--color--background:var(--pv-page);
  --wp--preset--color--surface:var(--pv-card);
  --wp--preset--color--surface-2:var(--pv-soft);
  --wp--preset--color--ink:var(--pv-text);
  --wp--preset--color--ink-soft:var(--pv-text-2);
  --wp--preset--color--muted:var(--pv-muted);
  --wp--preset--color--blue:var(--pv-blue);
  --wp--preset--color--blue-strong:var(--pv-blue-link);
  --wp--preset--color--green:var(--pv-green);
  --wp--preset--color--green-strong:var(--pv-green-text);
}

body.wp-theme-provisual{
  background-color:var(--pv-page);
  line-height:1.6;
}

/* ───────────────────────── 2. Typografie ───────────────────────── */
body.wp-theme-provisual h1,
body.wp-theme-provisual h2,
body.wp-theme-provisual h3{
  font-weight:700;
  letter-spacing:-.045em;
  line-height:1.05;
}
body.wp-theme-provisual h1{ letter-spacing:-.055em; line-height:1; }

/* Kaarttitels */
.pv-card h3,
.pv-card h4,
.pv-case-title,
.pv-postcard-stretch,
.pv-mega-item-text strong,
.pv-mega-highlight strong{ letter-spacing:-.03em; }

.pv-eyebrow{
  font-size:12px;
  font-weight:600;
  letter-spacing:.1em;
  color:var(--pv-muted);
}

/* ───────────────────────── 3. Knoppen ───────────────────────── */
.wp-block-button .wp-block-button__link{ border-radius:var(--pv-r-btn) !important; }

.wp-block-button.pv-btn-primary .wp-block-button__link{
  background:var(--pv-blue) !important;
  color:#fff !important;
  box-shadow:0 6px 16px -6px rgba(30,136,245,.55);
}
.wp-block-button.pv-btn-primary .wp-block-button__link:hover{ background:#3a98f7 !important; }
.pv-btn-primary .wp-block-button__link:hover{ box-shadow:0 10px 24px -8px rgba(30,136,245,.55) !important; }

.wp-block-button.pv-btn-ghost .wp-block-button__link{
  background:var(--pv-soft) !important;
  color:var(--pv-text) !important;
  border-width:0 !important;
}
.wp-block-button.pv-btn-ghost .wp-block-button__link:hover{
  background:var(--pv-blue-soft) !important;
  color:var(--pv-blue-link) !important;
}

/* Mijn Provisual-knop in de header (eigen <button>, geen wp-block-button) */
.pv-login-trigger{
  background:var(--pv-soft);
  color:var(--pv-text);
  border-width:0;
  border-radius:var(--pv-r-btn);
}
.pv-login-trigger:hover{ background:var(--pv-blue-soft); color:var(--pv-blue-link); }
.pv-wpadmin-go{ border-radius:10px; }
.pv-mega-highlight-cta{ background:var(--pv-blue); border-radius:var(--pv-r-btn); }
.pv-mega-highlight-cta:hover{ background:#3a98f7; filter:none; }

/* Cookiebanner-knoppen (banner staat nu uit, maar dan wel in stijl) */
.pv-cookie-btn{ border-radius:var(--pv-r-btn); }
.pv-cookie-btn-primary{ background:var(--pv-blue); }
.pv-cookie-btn-ghost{ background:var(--pv-soft); border-width:0 !important; }

/* WhatsApp-knop: alleen radius + schaduw, kleur en positie blijven */
.wp-block-button.pv-whatsapp-btn .wp-block-button__link{
  border-radius:var(--pv-r-btn) !important;
  box-shadow:var(--pv-shadow-panel);
}
.wp-block-button.pv-whatsapp-btn .wp-block-button__link:hover{ box-shadow:var(--pv-shadow-panel); }

/* ───────────────────────── 4. Header + panelen ───────────────────────── */
/* De sticky/positie-regels van style.css blijven; alleen de band eromheen
   wordt de paginakleur en de binnenste rij wordt de witte kaart. */
header.wp-block-group{
  background-color:var(--pv-page);
  border-bottom-width:0 !important;
  padding-top:8px !important;
  padding-bottom:8px !important;
}
header.wp-block-group.is-layout-constrained{
  padding-left:var(--pv-panel-gap);
  padding-right:var(--pv-panel-gap);
}
.pv-header-row{
  background:var(--pv-card);
  border-radius:var(--pv-r-nav);
  box-shadow:var(--pv-shadow-card);
  padding:8px 12px 8px 20px;
  gap:20px;
}

/* Navigatielinks (alleen desktop: in het mobiele overlay blijft de lijst) */
@media (min-width:1121px){
  .pv-primary-nav .wp-block-navigation__container{ gap:2px; }
  .pv-primary-nav .wp-block-navigation-item > .wp-block-navigation-item__content,
  .pv-mega-btn{
    padding:7px 11px;
    border-radius:10px;
  }
  .pv-primary-nav .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
  .pv-mega-btn:hover{ background:var(--pv-soft); }
  .pv-primary-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
  .pv-primary-nav .wp-block-navigation-item__content[aria-current="page"]{
    background:var(--pv-blue-soft);
    color:var(--pv-blue-link) !important;
  }
}

/* Dropdown-panelen: alleen het paneel zelf (positie/animatie/open-logica
   blijven van style.css en header.js) */
.pv-mega-panel,
.pv-search-panel,
.pv-login-panel{
  background:var(--pv-card);
  border-width:0;
  border-radius:var(--pv-r-card);
  box-shadow:var(--pv-shadow-panel);
}
.wp-block-navigation__submenu-container{
  border-width:0 !important;
  border-radius:var(--pv-r-card) !important;
  box-shadow:var(--pv-shadow-panel) !important;
}
.pv-mega-item,
.pv-login-link,
.pv-search-result,
.wp-block-navigation__submenu-container .wp-block-navigation-item > a{ border-radius:12px; }
.pv-mega-item:hover,
.pv-login-link:hover,
.pv-search-result:hover,
.wp-block-navigation__submenu-container .wp-block-navigation-item > a:hover{ background:var(--pv-soft); }
.pv-mega-highlight{ background:var(--pv-soft); border-radius:var(--pv-r-tile); }
.pv-mega-icon{ border-radius:12px; }
.pv-search-trigger:hover,
.pv-search-item.pv-search-open .pv-search-trigger{ background:var(--pv-soft); }

/* ───────────────────────── 5. Homepage-secties ───────────────────────── */
/* 5a. Hero → navy paneel. De hero is de eerste (klasse-loze) groep in de
   inhoud van de voorpagina; de twee blur-blobs zijn kind-divs met inline
   stijl en behouden hun plek, alleen de kleur wordt de portaalgloed. */
.home .entry-content > .wp-block-group:first-child{
  background:var(--pv-navy);
  border-radius:var(--pv-r-panel);
  box-shadow:var(--pv-shadow-panel);
  width:auto;
  max-width:1160px;
  margin-top:8px;
  padding-top:72px !important;
  padding-bottom:76px !important;
  padding-left:clamp(20px,5vw,56px);
  padding-right:clamp(20px,5vw,56px);
  box-sizing:border-box;
}
.home .entry-content > .wp-block-group:first-child > div[style*="blur(60px)"][style*="#0B84FF"]{
  background:var(--pv-glow-blue) !important;
}
.home .entry-content > .wp-block-group:first-child > div[style*="blur(60px)"][style*="#22C55E"]{
  background:var(--pv-glow-green) !important;
}
.home .entry-content > .wp-block-group:first-child .pv-eyebrow{ color:var(--pv-on-navy-muted); }
.home .entry-content > .wp-block-group:first-child h1{ color:#fff; }
.home .entry-content > .wp-block-group:first-child .pv-gradient-text{
  background:var(--pv-gradient-text);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.home .entry-content > .wp-block-group:first-child p.has-ink-soft-color{ color:var(--pv-on-navy) !important; }
.home .entry-content > .wp-block-group:first-child .wp-block-column:first-child span[style*="color:#3E4757"]{ color:var(--pv-on-navy) !important; }
.home .entry-content > .wp-block-group:first-child .wp-block-column:first-child strong{ color:#fff !important; }
.home .entry-content > .wp-block-group:first-child .wp-block-column:first-child div[style*="color:#6B7385"]{ color:var(--pv-on-navy-muted) !important; }
.home .entry-content > .wp-block-group:first-child .pv-avatars span{ border-color:var(--pv-navy); }
.home .entry-content > .wp-block-group:first-child .wp-block-column:first-child span[style*="display:inline-flex"][style*="gap:7px"]{
  background:rgba(34,192,138,.16);
  color:#5fe0ad;
  padding:6px 12px;
  border-radius:999px;
}
.home .entry-content > .wp-block-group:first-child .wp-block-button.pv-btn-ghost .wp-block-button__link{
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  color:#fff !important;
}
.home .entry-content > .wp-block-group:first-child .wp-block-button.pv-btn-ghost .wp-block-button__link:hover{
  background:rgba(255,255,255,.14) !important;
  color:#fff !important;
}

/* Statuswidget in de hero: glas op navy */
.pv-console{ border-width:0; border-radius:var(--pv-r-card); box-shadow:var(--pv-shadow-card); }
.home .entry-content > .wp-block-group:first-child .pv-console{
  background:var(--pv-glass);
  border-width:1px;
  border-color:var(--pv-glass-border);
  box-shadow:none;
}
.home .entry-content > .wp-block-group:first-child .pv-console-bar{
  border-bottom-color:var(--pv-glass-border);
  color:var(--pv-on-navy-muted);
}
.home .entry-content > .wp-block-group:first-child .pv-console-bar i{ background:rgba(255,255,255,.22) !important; }
.home .entry-content > .wp-block-group:first-child .pv-console .pv-stat{
  background:var(--pv-glass);
  border-color:var(--pv-glass-border);
  border-radius:20px;
}
.home .entry-content > .wp-block-group:first-child .pv-console .pv-stat .pv-stat-n{
  background:none;
  color:#fff;
  font-weight:700;
  letter-spacing:-.04em;
}
.home .entry-content > .wp-block-group:first-child .pv-console .pv-stat .pv-stat-l{ color:var(--pv-on-navy-muted); }
.home .entry-content > .wp-block-group:first-child .pv-console-log{ color:var(--pv-on-navy); }
.home .entry-content > .wp-block-group:first-child .pv-console-log .pv-ok{ color:#5fe0ad; }
.home .entry-content > .wp-block-group:first-child .pv-console-log span[style*="color:#6B7385"]{ color:#7d8ba3 !important; }
.home .entry-content > .wp-block-group:first-child .pv-console > div[style*="border-top"]{ border-top-color:var(--pv-glass-border) !important; }
.home .entry-content > .wp-block-group:first-child .pv-console a{ color:#7cc3ff !important; }

/* 5b. Alignfull-secties op de voorpagina worden zwevende kaarten/panelen.
   De 100vw-full-bleed van style.css maakt plaats voor de content-breedte
   met paneelmarge; er verandert niets aan gedrag, alleen aan vorm. */
.home .entry-content > .wp-block-group.alignfull.pv-trust,
.home .entry-content > .wp-block-group.alignfull:has(> .pv-marquee),
.home .entry-content > .wp-block-group.alignfull#over-ons,
.home .entry-content > .wp-block-group.alignfull.has-surface-2-background-color{
  width:auto !important;
  max-width:1160px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  border-width:0 !important;
  box-sizing:border-box;
}
.home .entry-content > .wp-block-group.alignfull.pv-trust,
.home .entry-content > .wp-block-group.alignfull:has(> .pv-marquee){
  margin-top:var(--pv-panel-gap) !important;
}

/* Onder 1192px is de inhoud 24px (root-padding) smaller dan het scherm: de
   panelen schuiven met een negatieve marge uit tot de paneelmarge, gelijk
   aan de headerkaart. */
@media (max-width:1191px){
  .home .entry-content > .wp-block-group:first-child,
  .home .entry-content > .wp-block-group.alignfull.pv-trust,
  .home .entry-content > .wp-block-group.alignfull:has(> .pv-marquee),
  .home .entry-content > .wp-block-group.alignfull#over-ons,
  .home .entry-content > .wp-block-group.alignfull.has-surface-2-background-color{
    margin-left:calc(var(--pv-panel-gap) - 24px) !important;
    margin-right:calc(var(--pv-panel-gap) - 24px) !important;
  }
  .home .wp-block-group.pv-cta-band{ margin-inline:calc(var(--pv-panel-gap) - 48px) !important; }
}

/* Logo-marquee: alleen de wrapper wordt een witte kaart. Track, animatie
   en duplicaten blijven onaangeroerd. */
.home .entry-content > .wp-block-group.alignfull:has(> .pv-marquee){
  background:var(--pv-card);
  border-radius:var(--pv-r-card);
  box-shadow:var(--pv-shadow-card);
}
.pv-marquee-track span{ color:#98a3b6; font-weight:600; }

/* Stats-balk: navy paneel met gloed zoals de hero */
.pv-trust{
  background:
    radial-gradient(circle at 8% -20%,rgba(30,136,245,.55),transparent 45%),
    radial-gradient(circle at 96% 130%,rgba(34,192,138,.45),transparent 45%),
    var(--pv-navy);
  border-radius:var(--pv-r-panel);
  box-shadow:var(--pv-shadow-panel);
}
.pv-trust .pv-stat-n{ color:#fff; font-weight:700; letter-spacing:-.04em; }
.pv-trust .pv-stat-l{ color:var(--pv-on-navy-muted); }

/* Over Provisual: witte paneelkaart, portret zonder gradient-kader */
.home .entry-content > .wp-block-group.alignfull#over-ons{
  background:var(--pv-card) !important;
  border-radius:var(--pv-r-panel);
  box-shadow:var(--pv-shadow-card);
}
.pv-portrait{
  background:transparent;
  padding:0;
  border-radius:28px;
  box-shadow:var(--pv-shadow-card);
}
.pv-portrait .wp-block-image img{ border-radius:28px; }
.pv-card-flat{ background:var(--pv-soft); border-width:0; border-radius:var(--pv-r-tile); }

/* Werkwijze: de band blijft zacht, elke stap wordt een kaart met nummerchip */
.home .entry-content > .wp-block-group.alignfull.has-surface-2-background-color:not(#over-ons){
  background:transparent !important;
}
.wp-block-columns:has(> .wp-block-column > p.pv-gradient-text:first-child) > .wp-block-column{
  background:var(--pv-card);
  border-radius:var(--pv-r-card);
  box-shadow:var(--pv-shadow-card);
  padding:24px;
}
.wp-block-column > p.pv-gradient-text:first-child{
  background:var(--pv-blue-soft) !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  color:var(--pv-blue-link) !important;
  font-family:var(--wp--preset--font-family--mono);
  font-size:.8rem !important;
  font-weight:600 !important;
  border-radius:8px;
  padding:4px 10px;
  width:fit-content;
}

/* "Nu bezig": badge en voortgangsbalken (breedtes blijven inline) */
.pv-badge{ background:var(--pv-green-soft); color:var(--pv-green-text); }
.pv-card div[style*="height:8px"][style*="border-radius:999px"]{ background:var(--pv-soft) !important; }
.pv-card div[style*="height:8px"] > i[style*="#0B84FF"]{ background:var(--pv-blue) !important; }
.pv-card div[style*="height:8px"] > i[style*="#22C55E"]{ background:var(--pv-green) !important; }

/* CTA-blok: navy paneel met gloed */
.pv-cta-band{
  background:
    radial-gradient(circle at 100% -10%,rgba(34,192,138,.5),transparent 42%),
    radial-gradient(circle at 0% 120%,rgba(30,136,245,.55),transparent 45%),
    var(--pv-navy);
  border-radius:var(--pv-r-panel);
  box-shadow:var(--pv-shadow-panel);
}
/* Alleen voorpagina: zelfde breedte als de andere panelen (sectie heeft 24px zijpadding en WP zet de marges op auto !important). Op andere pagina's staat het blok in de artikelkolom en blijft het op zijn plek. */
@media (min-width:1192px){ .home .wp-block-group.pv-cta-band{ margin-inline:-24px !important; } }
.pv-cta-band .wp-block-button__link{ background:#fff !important; color:var(--pv-navy) !important; }

/* ───────────────────────── 6. Kaarten ───────────────────────── */
.pv-card,
.pv-postcard,
.pv-pricing-card{
  background:var(--pv-card);
  border-width:0;
  border-radius:var(--pv-r-card);
  box-shadow:var(--pv-shadow-card);
}
.pv-pricing-popular{ box-shadow:0 0 0 2px var(--pv-blue),var(--pv-shadow-card); }

/* Icoontegels */
.pv-icon{ border-radius:12px; }
.pv-icon.i-blue,
.pv-icon.i-mix{ background:var(--pv-blue-soft); }
.pv-icon.i-blue svg,
.pv-icon.i-mix svg{ stroke:var(--pv-blue-link); }
.pv-icon.i-green{ background:var(--pv-green-soft); }
.pv-icon.i-green svg{ stroke:var(--pv-green-text); }

/* Kaartlinks */
main .pv-card .pv-card-link a:not(.wp-element-button):not(.pv-eyebrow):not(.pv-tag):not(.pv-mega-item):not(.pv-mega-highlight-cta){
  color:var(--pv-blue-link);
  font-weight:600;
  text-decoration-line:none;
}
main .pv-card .pv-card-link a:not(.wp-element-button):not(.pv-eyebrow):not(.pv-tag):not(.pv-mega-item):not(.pv-mega-highlight-cta):hover{ text-decoration-line:underline; }

/* Reviews */
.pv-review-quote{ color:var(--pv-text-2); }

/* Cases: browserframe radius 16, categorie als chip */
.pv-case-tile > .pv-case-screen{
  margin:10px 10px 0;
  border-radius:16px;
}
.pv-post-meta a{
  background:var(--pv-blue-soft);
  color:var(--pv-blue-link);
  border-radius:999px;
  padding:3px 10px;
  text-decoration:none;
}
main .pv-post-meta a:not(.wp-element-button):not(.pv-eyebrow):not(.pv-tag):not(.pv-mega-item):not(.pv-mega-highlight-cta):not(.pv-case-title a){ text-decoration-line:none; color:var(--pv-blue-link); }
.pv-post-meta .wp-block-post-terms__separator{ color:transparent; }

/* Blogkaarten: afbeelding als inset met zachte waas eromheen */
.pv-postcard > a:first-child{
  display:block;
  padding:10px;
  border-radius:var(--pv-r-card) var(--pv-r-card) 0 0;
  background:
    radial-gradient(circle at 0 0,var(--pv-blue-soft),transparent 60%),
    radial-gradient(circle at 100% 100%,var(--pv-green-soft),transparent 60%);
}
.pv-postcard > a:first-child img{ border-radius:var(--pv-r-tile); }

/* Pagina-/berichtkop */
.pv-post-hero{ border-bottom-width:0; background:transparent; }

/* ───────────────────────── 7. Footer ───────────────────────── */
footer > .wp-block-group.alignfull{
  background:var(--pv-card) !important;
  border-radius:var(--pv-r-panel);
  box-shadow:var(--pv-shadow-card);
  width:auto !important;
  max-width:1160px !important;
  margin:0 auto var(--pv-panel-gap) !important;
  padding-top:48px !important;
  padding-bottom:28px !important;
  padding-left:clamp(20px,4vw,40px);
  padding-right:clamp(20px,4vw,40px);
  box-sizing:border-box;
}
@media (max-width:1191px){
  footer > .wp-block-group.alignfull{
    margin-left:calc(var(--pv-panel-gap) - 24px) !important;
    margin-right:calc(var(--pv-panel-gap) - 24px) !important;
  }
}
.pv-footer-stripe{ display:none !important; }
footer h4{
  font-size:12px !important;
  font-weight:600;
  letter-spacing:.1em !important;
  color:var(--pv-muted) !important;
}
footer a{ color:var(--pv-text) !important; }
footer a:hover{ color:var(--pv-blue-link) !important; }
footer p,
footer li[style*="color:#9AA3B5"]{ color:var(--pv-text-2) !important; }
footer div[style*="height:1px"]{ background:var(--pv-page) !important; }
.pv-footer-status{ color:var(--pv-text-2) !important; }

/* ───────────────────────── 8. Formulieren + focus ───────────────────────── */
main input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
main textarea,
main select,
.pv-search-input,
.pv-wpadmin-input{
  background:var(--pv-soft);
  border-width:0;
  border-radius:12px;
}
main input:focus,
main textarea:focus,
main select:focus,
.pv-search-input:focus,
.pv-wpadmin-input:focus{
  outline:none;
  box-shadow:0 0 0 2px var(--pv-blue);
}
:focus-visible{ outline:2px solid var(--pv-blue); outline-offset:2px; }

/* ───────────────────────── 9. Mobiel (< 768px) ───────────────────────── */
@media (max-width:767px){
  :root{
    --pv-r-panel:24px;
    --pv-r-card:24px;
    --pv-panel-gap:8px;
  }
  .pv-header-row{ padding:8px 10px 8px 14px; gap:8px; }
}