/* =========================================================
   Slimme Start · header en footer "licht"
   Wordt geladen na kop-navy.css. Gebruikt eigen klassen (sk- = kop, sv- = voet),
   dus de oude regels voor .pk-kop / .pk-voet raken deze header en footer niet.
   Zijmarge gelijk aan de homepage-hero: 120px / 48px (≤1100) / 22px (≤700).
   ========================================================= */

:root {
  /* footer: zelfde marge als de inhoud (max 1200px breed) */
  --sk-rand: max(120px, calc((100vw - 1200px) / 2));
  /* header: iets breder dan de inhoud (max 1320px) */
  --sk-rand-kop: max(72px, calc((100vw - 1320px) / 2));
  --sk-navy: #121A3F;
  --sk-inkt: #14213D;
  --sk-geel: #FFD54A;
  --sk-lijn: #E6E4DA;
  --sk-font: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
}
@media (max-width: 1100px) { :root { --sk-rand: 48px; --sk-rand-kop: 32px; } }
@media (max-width: 700px)  { :root { --sk-rand: 22px; --sk-rand-kop: 14px; } }

/* De oude schuine gele rand bestaat niet meer */
.pk-schuin, .pk-schuin-onder { display: none !important; }
/* Homepage: header staat in de flow, geen extra ruimte erboven nodig */
main#inhoud.pk-main-vol { margin-top: 0; padding-top: 0; }

/* ---------- Header: zwevende witte balk ---------- */
.sk-kop-wrap {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: 16px var(--sk-rand-kop) 0;
  pointer-events: none; /* de ruimte naast de balk blokkeert geen klikken */
}
.sk-kop {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 8px 8px 8px 20px;
  box-sizing: border-box;
  background: #FFFFFF;
  border: 1px solid var(--sk-lijn);
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(18, 26, 63, .05);
  font-family: var(--sk-font);
  transition: box-shadow .2s ease;
}
.sk-kop-wrap--klein .sk-kop { box-shadow: 0 10px 30px rgba(18, 26, 63, .14); }

.sk-kop a { text-decoration: none; color: var(--sk-inkt); }
.sk-kop a:focus-visible { outline: 3px solid #2F4BF5; outline-offset: 3px; border-radius: 999px; }

/* Logo: alleen het lampje + naam, draait 1x per bezoek en bij hover */
.sk-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.sk-lampje { width: auto; height: 36px; display: block; transform-origin: 50% 60%; }
.sk-logo--intro .sk-lampje { animation: sk-draai 1.1s cubic-bezier(.3, .7, .3, 1) .2s 1; }
.sk-logo:hover .sk-lampje { animation: sk-draai 1.1s cubic-bezier(.3, .7, .3, 1) 1; }
@keyframes sk-draai {
  from { transform: rotateY(0); }
  to   { transform: rotateY(360deg); }
}

.sk-nav { display: flex; gap: 4px; }
.sk-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  transition: background-color .15s ease;
}
.sk-nav a:hover { background: #F4F2EA; }

.sk-rechts { display: flex; align-items: center; gap: 6px; }
.sk-inloggen {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
}
.sk-inloggen:hover { background: #F4F2EA; }
.sk-knop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--sk-navy);
  color: #FFFFFF !important;
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  transition: background-color .15s ease;
}
.sk-knop:hover { background: #0B1230; }
.sk-icoon { display: inline-flex; color: var(--sk-geel); }

.sk-nav a, .sk-inloggen, .sk-logo span { white-space: nowrap; }
.sk-nav-inloggen { display: none !important; }
.sk-knop-kort { display: none; }

/* Menuknop (alleen op iPad en telefoon zichtbaar) */
.sk-menu-knop {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #F4F2EA;
  color: var(--sk-inkt);
  cursor: pointer;
}
.sk-menu-knop:focus-visible { outline: 3px solid #2F4BF5; outline-offset: 2px; }
.sk-menu-knop path { transition: transform .2s ease, opacity .2s ease; transform-origin: 12px 12px; }
.sk-menu-open .sk-streep-1 { transform: translateY(5px) rotate(45deg); }
.sk-menu-open .sk-streep-2 { opacity: 0; }
.sk-menu-open .sk-streep-3 { transform: translateY(-5px) rotate(-45deg); }

/* Kleiner dan 1280px: de links verhuizen naar een uitklapmenu onder de balk */
@media (max-width: 1279px) {
  .sk-kop { position: relative; }
  .sk-menu-knop { display: inline-flex; }
  .sk-nav {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(320px, 100%);
    box-sizing: border-box;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    background: #FFFFFF;
    border: 1px solid var(--sk-lijn);
    border-radius: 20px;
    box-shadow: 0 16px 40px rgba(18, 26, 63, .16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  }
  .sk-menu-open .sk-nav {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .18s ease, transform .18s ease;
  }
  .sk-nav a { min-height: 48px; padding: 0 16px; border-radius: 12px; font-size: 16px; }
}

/* Telefoon: Inloggen gaat het menu in, de knop wordt korter */
@media (max-width: 560px) {
  .sk-kop-wrap { padding-top: 10px; }
  .sk-kop { min-height: 58px; padding: 6px 6px 6px 14px; gap: 8px; }
  .sk-logo { font-size: 17px; gap: 8px; }
  .sk-lampje { height: 30px; }
  .sk-inloggen { display: none; }
  .sk-nav-inloggen { display: flex !important; }
  .sk-nav { width: 100%; }
  .sk-rechts { gap: 6px; }
  .sk-knop { min-height: 44px; padding: 0 14px; font-size: 14px; gap: 6px; }
  .sk-logo { min-width: 0; }
  .sk-logo span { overflow: hidden; text-overflow: ellipsis; }
  .sk-knop-lang { display: none; }
  .sk-knop-kort { display: inline; }
  .sk-menu-knop { width: 44px; height: 44px; }
}
/* Kleinere telefoons: geen camera-icoon in de knop */
@media (max-width: 420px) {
  .sk-logo { font-size: 16px; }
  .sk-lampje { height: 26px; }
  .sk-knop { padding: 0 14px; }
  .sk-knop .sk-icoon { display: none; }
}

/* ---------- Footer: navy, vier kolommen ---------- */
.sv-voet {
  padding: 72px var(--sk-rand) 32px;
  background: var(--sk-navy);
  color: #FFFFFF;
  font-family: var(--sk-font);
  font-size: 15px;
  line-height: 1.5;
}
.sv-voet a { color: #FFFFFF; text-decoration: none; }
.sv-voet a:hover { color: var(--sk-geel); }
.sv-voet a:focus-visible,
.sv-voet button:focus-visible { outline: 3px solid var(--sk-geel); outline-offset: 3px; }

.sv-kolommen {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 48px;
  align-items: start;
  padding-bottom: 56px;
}

/* Merk: logo-regel even hoog als de kolomtitels, zodat alles op één lijn begint */
.sv-merk { display: flex; flex-direction: column; gap: 14px; }
.sv-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.02em;
}
.sv-logo img { width: 32px; height: 32px; animation: sv-draai 7s ease-in-out infinite; }
/* Lampje draait rustig een rondje, pauzeert, en draait weer */
@keyframes sv-draai {
  0%, 72% { transform: rotate(0deg); }
  100%    { transform: rotate(360deg); }
}
/* Tekst begint precies onder het woord "Slimme Start" (icoon 32px + 10px ruimte) */
.sv-merk p { margin: 0; padding-left: 42px; max-width: 300px; font-size: 15px; line-height: 1.6; color: #B9BCD6; }

/* Kolommen: titel + links, overal dezelfde maat en afstand */
.sv-kolom { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.sv-titel {
  display: flex;
  align-items: center;
  min-height: 36px;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8E93B8;
}
.sv-kolom a { font-size: 15px; font-weight: 500; }

/* voet_links.php (.voet-links): altijd onder elkaar, net als de andere kolommen */
.sv-juridisch .voet-links,
.sv-juridisch > ul,
.sv-juridisch > nav,
.sv-juridisch > div {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: 14px !important;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sv-juridisch li { display: block; margin: 0; padding: 0; }
.sv-juridisch .voet-links a,
.sv-juridisch .voet-links .link-knop,
.sv-juridisch button {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #FFFFFF;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.sv-juridisch .voet-links a:hover,
.sv-juridisch .voet-links .link-knop:hover,
.sv-juridisch button:hover { color: var(--sk-geel); }
.sv-juridisch span:not([class]) { display: none; } /* losse scheidingstekens */

/* Onderste regel */
.sv-onder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid #2C3366;
  font-size: 14px;
  color: #B9BCD6;
}
.sv-onder .va-credit { display: inline-flex; align-items: center; gap: 8px; color: #B9BCD6; }
.sv-onder .va-credit:hover { color: #FFFFFF; }
.sv-onder .va-credit__logo { height: 20px; width: auto; }
.sv-onder .va-credit__naam { color: #FFFFFF; font-weight: 700; }

@media (max-width: 900px) {
  .sv-kolommen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
  .sv-merk { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .sv-voet { padding-top: 56px; }
  .sv-kolommen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; padding-bottom: 40px; }
  .sv-titel { min-height: 0; }
  .sv-onder { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .sv-logo img { animation: none; }
  .sk-logo--intro .sk-lampje, .sk-logo:hover .sk-lampje { animation: none; }
}

/* ---------- Losse pagina's (registreren, inloggen e.d.) ----------
   Brede pagina's (zoals registreren) staan op dezelfde 1200px-lijn als de rest van de site.
   Smalle pagina's (.los-smal, zoals inloggen) blijven gecentreerd. */
body.los .los-inhoud:not(.los-smal) {
  max-width: none;
  padding-left: var(--sk-rand);
  padding-right: var(--sk-rand);
}