/* chrome.css: nieuwe kop, voet en huisstijl voor de bestaande subpagina's (functies, support, security,
   changelog, privacy, landingspagina's). Alles met pv- voorvoegsel, zodat de eigen CSS van die pagina's blijft werken.
   reskin.py zet html[data-pv] op paper (licht) of night (donker). */
html[data-pv] body { font-family:"Archivo",system-ui,sans-serif; font-stretch:100%; padding-top:68px; -webkit-font-smoothing:antialiased; }
html[data-pv] body::before { display:none; }
html[data-pv] h1, html[data-pv] h2, html[data-pv] .section-label, html[data-pv] .hero h1 { font-family:"Archivo",sans-serif; letter-spacing:-.01em; }
html[data-pv] h1 { font-weight:800; font-stretch:112%; text-transform:uppercase; line-height:.95; }
html[data-pv] h2 { font-weight:800; font-stretch:108%; }
html[data-pv] a[class*="btn"], html[data-pv] button, html[data-pv] .nav-cta { border-radius:3px !important; }

/* licht papier: functies, security, privacy, landingspagina's */
html[data-pv="paper"] {
  --red:#c3302a; --red2:#a52620; --brand:#c3302a;
  --dark:#f4f3f0; --dark2:#eae8e3; --dark3:#e1ded7; --bg:#f4f3f0; --bg2:#eae8e3; --kaart:#ffffff;
  --g1:#ffffff; --g2:#eae8e3; --g3:#e1ded7; --g4:#d6d3cd;
  --text:#16181a; --text2:#4f555c; --muted:#6b7177; --border:#d6d3cd; --rand:#d6d3cd; --radius:3px;
}
html[data-pv="paper"] body { background:#f4f3f0; color:#16181a; }
/* donker als de film: support en release notes */
html[data-pv="night"] {
  --bg:#0e0f11; --bg2:#16181b; --bg3:#1e2124; --border:rgba(230,235,240,.11);
  --text:#eceeef; --muted:rgba(236,238,239,.66); --brand:#e05246;
}
html[data-pv="night"] body { background:#0e0f11; }
html[data-pv="night"] .top h1 { font-size:clamp(34px,5vw,56px); margin:24px 0 8px; }

/* kop */
.pv-nav { position:fixed; inset:0 0 auto; z-index:90; height:68px; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:0 clamp(20px,4vw,48px); background:rgba(14,15,17,.92); backdrop-filter:blur(14px) saturate(1.2); border-bottom:1px solid rgba(230,235,240,.11);
  font-family:"Archivo",system-ui,sans-serif; font-stretch:100%; }
.pv-nav a { color:#eceeef; text-decoration:none; }
.pv-brand { display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:18px; letter-spacing:-.01em; }
.pv-brand img { width:34px; height:34px; display:block; }
.pv-links { display:flex; gap:28px; font:500 13px/1 "Archivo",sans-serif; letter-spacing:.04em; }
.pv-links a { color:rgba(236,238,239,.7); }
.pv-links a:hover, .pv-links a[aria-current] { color:#fff; }
.pv-right { display:flex; align-items:center; gap:20px; }
.pv-login { font:500 13px/1 "Archivo",sans-serif; color:rgba(236,238,239,.7) !important; }
.pv-cta { display:inline-flex; align-items:center; height:40px; padding:0 18px; border-radius:3px; background:#c3302a; color:#fff !important;
  font:700 11px/1 "Archivo",sans-serif; letter-spacing:.18em; text-transform:uppercase; white-space:nowrap; }
.pv-cta:hover { background:#d63a33; }
@media (max-width:900px) { .pv-links { display:none; } }
@media (max-width:520px) { .pv-login { display:none; } .pv-cta { height:34px; padding:0 12px; font-size:10px; letter-spacing:.12em; } }

/* voet */
.pv-foot { background:#0a0b0c; color:rgba(236,238,239,.66); padding:56px clamp(20px,4vw,48px) 32px; font:400 14px/1.6 "Archivo",system-ui,sans-serif; font-stretch:100%; margin-top:0; }
.pv-foot__in { max-width:1240px; margin:0 auto; }
.pv-foot__grid { display:grid; grid-template-columns:2fr repeat(3,1fr); gap:32px; }
.pv-foot h2 { font:600 11px/1 "Archivo",sans-serif; letter-spacing:.24em; text-transform:uppercase; color:#eceeef; margin:0 0 16px; }
.pv-foot a { display:block; padding:4px 0; color:inherit; text-decoration:none; }
.pv-foot a:hover { color:#fff; }
.pv-foot__tag { font:italic 22px/1.2 "Instrument Serif",serif; color:#eceeef; margin:14px 0 8px; }
.pv-foot p { margin:0; }
.pv-foot__legal { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:48px; padding-top:20px; border-top:1px solid rgba(230,235,240,.11); font-size:12px; }
.pv-foot__legal a { display:inline; }
@media (max-width:760px) { .pv-foot__grid { grid-template-columns:1fr 1fr; } .pv-foot__grid > :first-child { grid-column:1 / -1; } }

/* de oude pagina's stylen kale nav/header/footer-elementen; die regels mogen de nieuwe kop en voet niet raken */
html[data-pv] .pv-nav nav.pv-links { position:static; inset:auto; height:auto; padding:0; margin:0; background:none; backdrop-filter:none; border:0; box-shadow:none; width:auto; z-index:auto; display:flex; }
html[data-pv] header.pv-nav { position:fixed; }
html[data-pv] footer.pv-foot { display:block; text-align:left; }
@media (max-width:900px) { html[data-pv] .pv-nav nav.pv-links { display:none; } }

/* mobiel: oude rasters vielen buiten het scherm (ook op de vorige site) */
html[data-pv] main, html[data-pv] section { overflow-wrap:break-word; }
html[data-pv] section * { min-width:0; }
@media (max-width:700px) {
  html[data-pv] section [style*="grid-template-columns"], html[data-pv] .about-grid, html[data-pv] .contact-grid { grid-template-columns:1fr !important; }
  html[data-pv="paper"] h1 { font-size:clamp(30px,9vw,44px) !important; }
}

/* landingspagina's (personeelsplanning, werkbonnen-app): de hero had nooit opmaak; nu donker zoals de film */
html[data-pv] .hero:has(.hero-content) { position:relative; background:#0e0f11; color:#eceeef; padding:clamp(72px,10vw,128px) clamp(20px,4vw,48px) clamp(64px,8vw,104px); overflow:hidden; }
html[data-pv] .hero-bg { position:absolute; inset:0; background:radial-gradient(60% 70% at 85% 30%, rgba(195,48,42,.28), transparent 70%); pointer-events:none; }
html[data-pv] .hero-grid { position:relative; max-width:1100px; margin:0 auto; }
html[data-pv] .hero-content { max-width:820px; }
html[data-pv] .hero-badge { font:600 12px/1.4 "Archivo",sans-serif; letter-spacing:.16em; text-transform:uppercase; color:#f0705f; margin-bottom:22px; }
html[data-pv] .hero-content h1 { font-size:clamp(34px,5.4vw,72px); color:#eceeef; margin:0; }
html[data-pv] .hero-sub { font-size:clamp(17px,1.4vw,20px); line-height:1.55; color:rgba(236,238,239,.72); max-width:640px; margin:26px 0 0; }
html[data-pv] .hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:36px; }
html[data-pv] .btn-primary, html[data-pv] .btn-secondary { display:inline-flex !important; align-items:center; justify-content:center; min-height:48px; padding:0 22px; border-radius:3px; font:700 12px/1 "Archivo",sans-serif; letter-spacing:.16em; text-transform:uppercase; text-decoration:none; }
html[data-pv] .btn-primary { background:#c3302a; color:#fff; border:0; }
html[data-pv] .btn-primary:hover { background:#d63a33; }
html[data-pv] .btn-secondary { border:1px solid rgba(236,238,239,.4); color:#eceeef; background:none; }
html[data-pv="paper"] section:not(.hero) .btn-secondary { border-color:#16181a; color:#16181a; }
html[data-pv] .pv-nav .pv-links a { font:500 13px/1 "Archivo",sans-serif !important; letter-spacing:.04em !important; text-transform:none !important; }
html[data-pv] .pv-nav .pv-brand { font:700 18px/1 "Archivo",sans-serif !important; letter-spacing:-.01em !important; text-transform:none !important; }
html[data-pv] h1 { overflow-wrap:normal; hyphens:manual; }
html[data-pv] .hero-content h1 { font-size:clamp(30px,4.4vw,60px); }
@media (max-width:700px) { html[data-pv] h1 { overflow-wrap:anywhere; font-size:clamp(26px,7.4vw,40px) !important; } }