/*
Theme Name: Pergevo One
Theme URI: https://www.pergevo.com
Author: Pergevo
Author URI: https://www.pergevo.com
Description: One-pager thema voor Pergevo. Richt zichzelf bij activering volledig in: standaardwaarden, juridische pagina's, permalinks en een inrichtingschecklist. Geen demo-inhoud, geen externe fonts, geen tracking. De pagina is opgebouwd als een swimlane: elke sectie is een baan met een gedraaid baanlabel aan de linkerzijde.
Version: 1.14.0
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pergevo-one
Tags: one-page, business, accessibility-ready, translation-ready
*/

/* =========================================================
   1. Tokens
   ========================================================= */

:root {
  /* Kleur. Navy is het merk. Groen is de enige accentkleur en
     betekent altijd hetzelfde: afgetekend. Niets is decoratief. */
  --ink:      #0C1A28;
  --navy:     #003366;
  --navy-2:   #00254A;
  --paper:    #FFFFFF;
  --mist:     #EDF2F7;
  --mist-2:   #F7FAFC;
  --rule:     #C6D4E1;
  --muted:    #56697C;
  --sign:     #1B7F5A;
  --sign-bg:  #E6F2ED;

  /* Type */
  --font-display: "Archivo", "Archivo Fallback", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Archivo", "Archivo Fallback", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono",
                  Menlo, Consolas, "Liberation Mono", monospace;

  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
  --step-3:  clamp(2rem, 1.6rem + 2vw, 3.4rem);
  --step-4:  clamp(2.6rem, 1.9rem + 3.4vw, 5rem);

  /* Ruimte */
  --lane-label: 5.5rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --max: 1180px;
  --pad-y: clamp(3.5rem, 8vw, 7rem);

  --radius: 3px;
  --speed: 480ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* Hoogte van het logo in de kop. Wordt overschreven door de
     schuifbalk onder Aanpassen → Site-identiteit. */
  --logo-h: 34px;
}

/* Zelf gehoste fonts. Geen Google CDN: dat zou bij een Europees
   publiek een AVG-probleem opleveren. Zie assets/fonts/README.txt.
   Ontbreken de bestanden, dan valt alles terug op de systeemstack. */
/* De @font-face-regels staan hier bewust niet meer. Ze worden door
   functions.php geprint, en alleen voor bestanden die werkelijk in
   assets/fonts/ staan. Anders vraagt de browser een lettertype op dat
   er niet is en levert dat een 404 op in de console. Zie de functie
   pergevo_font_face_css() en assets/fonts/README.txt. */

/* =========================================================
   2. Basis
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

:where(h1, h2, h3) {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

:where(p) { margin: 0 0 1em; max-width: 62ch; }
:where(p:last-child) { margin-bottom: 0; }

:where(a) { color: var(--navy); text-underline-offset: 0.18em; }
:where(a:hover) { color: var(--navy-2); }

/* Nul-specificiteit: een ingebedde applicatie die zijn eigen
   afbeeldings- of SVG-regels meebrengt, wint hier altijd van. */
:where(img, svg) { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 3px solid var(--sign);
  outline-offset: 3px;
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--navy);
  color: #fff;
  padding: 0.75rem 1.25rem;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
  color: #fff;
}

/* =========================================================
   3. Baanraster — het structurele idee van de pagina
   Elke sectie is een baan met een gedraaid label links,
   precies zoals een pool-label in een swimlane-diagram.
   ========================================================= */

.lane {
  border-bottom: 1px solid var(--rule);
}
.lane:last-of-type { border-bottom: 0; }

.lane__inner {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: var(--lane-label) minmax(0, 1fr);
  align-items: stretch;
}

.lane__label {
  border-right: 1px solid var(--rule);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-block: var(--pad-y);
  padding-right: 1rem;
}

.lane__label span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: var(--muted);
  white-space: nowrap;
}

.lane__body {
  padding-block: var(--pad-y);
  padding-left: clamp(1.25rem, 3vw, 2.75rem);
  min-width: 0;
}

.lane--tint { background: var(--mist-2); }

.lane--dark {
  background: var(--navy);
  color: #fff;
  border-bottom-color: var(--navy-2);
}
.lane--dark .lane__label { border-right-color: rgba(255,255,255,0.22); }
.lane--dark .lane__label span { color: rgba(255,255,255,0.62); }
.lane--dark h2 { color: #fff; }
.lane--dark a { color: #fff; }

@media (max-width: 800px) {
  .lane__inner { grid-template-columns: minmax(0, 1fr); }
  .lane__label {
    border-right: 0;
    border-bottom: 1px solid var(--rule);
    padding-block: 1.25rem 0;
    padding-right: 0;
    justify-content: flex-start;
  }
  .lane__label span {
    writing-mode: horizontal-tb;
    transform: none;
    padding-bottom: 1.25rem;
  }
  .lane--dark .lane__label { border-bottom-color: rgba(255,255,255,0.22); }
  .lane__body { padding-left: 0; padding-block: 2.5rem; }
}

/* =========================================================
   4. Kop
   ========================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--navy);
  border-bottom: 1px solid var(--navy-2);
}

.site-header__inner {
  max-width: var(--max);
  margin-inline: auto;
  padding: 0.85rem var(--gutter);
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--navy);
  margin-right: auto;
}
/* Op de donkere balk: de merknaam en de omlijnde knop moeten wit worden,
   anders staat er donkerblauw op donkerblauw. Het logobestand zelf is al
   licht en heeft niets nodig. */
.site-header .brand { color: #fff; }
.site-header .btn--ghost { border-color: #fff; color: #fff; }
.site-header .btn--ghost:hover { background: rgba(255,255,255,0.14); border-color: #fff; }

.brand img { height: var(--logo-h, 34px); width: auto; max-width: 100%; object-fit: contain; }
.brand__text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}
.brand__tm { font-size: 0.6em; vertical-align: super; font-weight: 600; }

/* =========================================================
   5. Hero
   ========================================================= */

.hero h1 {
  font-size: var(--step-4);
  margin-bottom: 0.45em;
}
.hero__lead {
  font-size: var(--step-1);
  color: var(--muted);
  max-width: 46ch;
  margin-bottom: 2rem;
}
.hero__status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1.5rem;
  color: var(--muted);
}
.hero__status::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sign);
  flex: none;
}

/* =========================================================
   6. Het diagram — de kern van de pagina
   Geen screenshot maar een levend diagram, opgebouwd in CSS.
   Vervang het door een echte productafbeelding zodra die er is.
   ========================================================= */

.flow {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
  margin-top: 2.5rem;
  box-shadow: 0 1px 2px rgba(12,26,40,0.05), 0 12px 32px -18px rgba(12,26,40,0.35);
}

.flow__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.4rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--rule);
  background: var(--mist);
  color: var(--muted);
}

.flow__grid {
  display: grid;
  grid-template-columns: 7.5rem repeat(4, minmax(0, 1fr));
  gap: 0;
}

.flow__name,
.flow__cell {
  border-bottom: 1px solid var(--rule);
  min-height: 5.75rem;
  padding: 0.8rem;
}
.flow__row--last { border-bottom: 0 !important; }

.flow__name {
  border-right: 1px solid var(--rule);
  background: var(--mist-2);
  color: var(--muted);
  display: flex;
  align-items: center;
}

.flow__cell {
  position: relative;
  display: flex;
  align-items: center;
}

/* Knooppunt */
.node {
  position: relative;
  z-index: 2;
  width: 100%;
  border: 1.5px solid var(--navy);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 0.6rem 0.7rem;
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.3;
  color: var(--navy);
}
.node--start { border-radius: 999px; }
.node--decision { transform: none; }

.node--signed {
  border-color: var(--sign);
  background: var(--sign-bg);
  color: #12563E;
}
/* Meetwaarden.
   Bewust anders dan een knooppunt: gestippelde rand, geen vulling, kleinere
   letter. Het is een aflezing bij het proces, geen stap in het proces. */
.flow__cell--gauge { grid-column: span 2; }

.gauge {
  width: 100%;
  display: grid;
  gap: 0.5rem;
  border: 1.5px dashed var(--rule);
  border-radius: var(--radius);
  padding: 0.6rem 0.7rem;
  color: var(--muted);
}

.gauge__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.gauge__icon {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  color: var(--navy);
}

.gauge__label {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}

/* Naar rechts, zodat de twee waarden onder elkaar uitlijnen en het
   als een aflezing leest in plaats van als een zin. */
.gauge__value {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--navy);
  white-space: nowrap;
}

.node__stamp {
  display: inline-block;
  margin-top: 0.4rem;
  border: 1.5px solid var(--sign);
  border-radius: 2px;
  padding: 0.1rem 0.35rem;
  color: var(--sign);
  transform: rotate(-4deg);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  font-weight: 500;
}

/* Verbindingen. Elk stukje leeft in zijn eigen cel, zodat het
   raster responsive blijft zonder absolute pixelposities. */
.link { position: absolute; inset: 0; z-index: 1; }
.link::before,
.link::after {
  content: "";
  position: absolute;
  background: var(--navy);
  opacity: 0.55;
}
/* van links binnen, naar beneden weg */
.link--elbow::before {
  left: 0; top: 50%;
  width: 50%; height: 1.5px;
}
.link--elbow::after {
  left: 50%; top: 50%;
  width: 1.5px; height: 50%;
}
.link__tip {
  position: absolute;
  left: 50%; bottom: -5px;
  width: 0; height: 0;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--navy);
  opacity: 0.55;
  z-index: 1;
}
/* recht naar rechts: loopt door de celmarge tot aan de rand van het knooppunt */
.link--straight::before {
  left: 0; top: 50%;
  width: 0.8rem; height: 1.5px;
}
.link--straight::after { display: none; }
.link--straight .link__tip {
  left: 0.8rem; bottom: auto; top: 50%;
  transform: translate(-100%, -50%);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 6px solid var(--navy);
  border-right: 0;
}

@media (max-width: 720px) {
  .flow__grid { grid-template-columns: minmax(0, 1fr); }
  .flow__name {
    border-right: 0;
    min-height: 0;
    padding-bottom: 0;
    border-bottom: 0;
  }
  .flow__cell { min-height: 0; }
  .flow__cell:not(:has(.node)):not(.flow__cell--gauge) { display: none; }
  .flow__cell--gauge { grid-column: auto; }
  .link, .link__tip { display: none; }
}

/* =========================================================
   7. Kolommen
   ========================================================= */

.cols {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin-top: 2.5rem;
}
.col h3 {
  font-size: var(--step-1);
  margin-bottom: 0.5rem;
}
.col .mono {
  display: block;
  color: var(--muted);
  margin-bottom: 0.85rem;
}
.col p { color: var(--muted); font-size: 0.97rem; }
.lane--dark .col p { color: rgba(255,255,255,0.78); }
.lane--dark .col .mono { color: rgba(255,255,255,0.55); }

.lane h2 { font-size: var(--step-2); }
.lane__intro { color: var(--muted); max-width: 54ch; }
.lane--dark .lane__intro { color: rgba(255,255,255,0.78); }

/* =========================================================
   8. Formulier
   ========================================================= */

.signup { margin-top: 2rem; max-width: 34rem; }

.field { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.field input[type="email"] {
  flex: 1 1 15rem;
  min-width: 0;
  font: inherit;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
}
.field input[type="email"]:focus-visible { border-color: var(--sign); }

.btn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.85rem 1.5rem;
  border: 1.5px solid var(--sign);
  border-radius: var(--radius);
  background: var(--sign);
  color: #fff;
  cursor: pointer;
  transition: background var(--speed) var(--ease), transform 120ms var(--ease);
}
.btn:hover { background: #16694B; border-color: #16694B; }
.btn:active { transform: translateY(1px); }

/* Zelfde maat en plaatsing als .btn: alleen kleur verschilt, zodat de twee
   knoppen naast elkaar exact even hoog en even zwaar zijn. */
.btn--ghost {
  background: transparent;
  border-color: #000;
  color: #000;
}
.btn--ghost:hover { background: rgba(0,0,0,0.06); border-color: #000; }

.consent {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin-top: 0.9rem;
  font-size: 0.86rem;
  color: var(--muted);
  max-width: 46ch;
}
.lane--dark .consent { color: rgba(255,255,255,0.7); }
.consent input { margin-top: 0.25rem; flex: none; }

.hp { position: absolute; left: -9999px; }

.notice {
  border-left: 3px solid var(--sign);
  background: var(--sign-bg);
  color: #12563E;
  padding: 0.85rem 1rem;
  margin-bottom: 1.25rem;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.notice--error {
  border-left-color: #9B2C2C;
  background: #FBEAEA;
  color: #7A2222;
}

/* =========================================================
   9. Inhoudspagina's (privacy, voorwaarden, contact)
   ========================================================= */

.page-wrap {
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(3rem, 7vw, 5.5rem) var(--gutter);
}
.page-wrap h1 { font-size: var(--step-3); }
.page-wrap h2 { font-size: var(--step-2); margin-top: 2em; }
.page-wrap h3 { font-size: var(--step-1); margin-top: 1.75em; }
.page-wrap ul, .page-wrap ol { max-width: 62ch; padding-left: 1.25rem; }
.page-wrap li { margin-bottom: 0.4em; }
.page-wrap table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.page-wrap th, .page-wrap td {
  border: 1px solid var(--rule);
  padding: 0.6rem 0.75rem;
  text-align: left;
  vertical-align: top;
}
.page-wrap th { background: var(--mist-2); }

/* =========================================================
   10. Voet
   ========================================================= */

.site-footer {
  background: var(--ink);
  color: rgba(255,255,255,0.72);
  padding-block: clamp(2.5rem, 6vw, 4rem);
  font-size: 0.92rem;
}
.site-footer__inner {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.site-footer h2 {
  font-size: 0.8rem;
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 0.9rem;
}
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: #fff; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.45rem; }
.site-footer__legal {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(255,255,255,0.14);
  padding-top: 1.5rem;
  color: rgba(255,255,255,0.5);
}
.site-footer__legal p { max-width: none; }

/* =========================================================
   11. Beweging — één geordend moment bij het laden
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(14px);
  }
  .js .is-in .reveal,
  .js .reveal.is-in {
    opacity: 1;
    transform: none;
    transition:
      opacity var(--speed) var(--ease) calc(var(--i, 0) * 90ms),
      transform var(--speed) var(--ease) calc(var(--i, 0) * 90ms);
  }
}

/* =========================================================
   12. Opties per pagina
   Voor pagina's waarin de applicatie wordt ingebed. De editor
   heeft de hele viewport nodig, niet de leeskolom van het thema.
   ========================================================= */

.page-wrap--full {
  max-width: none;
  padding-inline: var(--gutter);
}

.page-wrap--app {
  max-width: none;
  padding: 0;
  margin: 0;
}

/* Volledig scherm: geen marges, geen dubbele scrollbalk. */
body.pergevo-app {
  margin: 0;
  overflow: hidden;
}
body.pergevo-app #main {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}
body.pergevo-app .page-wrap--app {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* De ingebedde applicatie vult wat er over is.
   Bewust GEEN display, kleur of positionering: die bepaalt de
   applicatie zelf. In 1.2 forceerde deze regel display:block,
   waardoor een flex- of grid-indeling in de editor uit elkaar viel
   en de schuifbalken en doorlopende achtergronden verdwenen. */
body.pergevo-app .page-wrap--app > * {
  flex: 1 1 auto;
  min-height: 0;
  max-width: none;
  margin: 0;
}

/* Alleen een iframe krijgt wel opmaak: die heeft standaard een
   rand en een inline-uitlijning die je vrijwel nooit wilt. */
body.pergevo-app .page-wrap--app > iframe,
body.pergevo-app .page-wrap--app > p > iframe {
  display: block;
  width: 100%;
  border: 0;
}

/* Volledige hoogte doorgeven, zodat height:100% in de applicatie werkt. */
html:has(body.pergevo-app) { height: 100%; }
body.pergevo-app { height: 100%; }

/* Het thema trekt zich terug binnen de applicatie. Alles wat hier
   staat is bedoeld om theme-opmaak ongedaan te maken, niet om
   opmaak toe te voegen. */
body.pergevo-app .page-wrap--app :where(p) { max-width: none; margin: 0; }
body.pergevo-app .page-wrap--app :where(img, svg) {
  max-width: none;
  height: auto;
  display: revert;
}
body.pergevo-app .page-wrap--app :where(table) { width: auto; border-collapse: revert; }
body.pergevo-app .page-wrap--app :where(th, td) { border: 0; padding: revert; }
body.pergevo-app .page-wrap--app :where(ul, ol) { padding-left: revert; }

/* De beheerbalk. WordPress zet die marge op HTML, niet op body.
   In 1.4 stond deze regel op het verkeerde element, wat de witte
   strook van 32 pixels boven en onder de applicatie gaf. */
html:has(body.pergevo-app),
html:has(body.pergevo-flush) {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
body.pergevo-app #wpadminbar { display: none; }

/* Kop uit betekent ook: geen ruimte meer reserveren waar hij stond.
   In 1.2 vergrootte deze regel de bovenmarge juist, wat de witte
   balk boven de ingebedde editor veroorzaakte. */
body.pergevo-no-header .page-wrap { padding-top: 0; }

/* Rand tot rand: alle witruimte weg, ook links en rechts. */
body.pergevo-flush { margin: 0; }
body.pergevo-flush .page-wrap,
body.pergevo-flush .page-wrap--full {
  max-width: none;
  padding: 0;
  margin: 0;
}
body.pergevo-flush #main { padding: 0; margin: 0; }
body.pergevo-flush #wpadminbar { display: none; }