/* Bootplein — gedeelde kop (menubalk) en voet (footer) voor de losse publieke pagina's:
   bootpagina (/boot/...), huurbootpagina (/huurboot/...) en merkpagina (/dealer/...).
   De HTML staat in server/views/site-kop.html en site-voet.html; server.js zet die op de plek van
   <!-- SITE-KOP --> en <!-- SITE-VOET -->. Kleuren en maten zijn overgenomen van de voorpagina
   (index.html, :root en .nav), zodat de site als één geheel oogt (klikronde 6 okt, blok B).
   De voorpagina zelf heeft nog zijn eigen kopie; de portalen doen hier (nog) niet aan mee.

   Alles hangt onder .bp-kop / .bp-voet, met resets erbij: de pagina's hebben eigen algemene regels
   (boot.html zet bijvoorbeeld élke button op volle breedte met 16px marge erboven) en die mogen
   hier niet doorlekken. */

.bp-kop, .bp-voet {
  --bk-navy:#16508c; --bk-blauw:#1a7fd4; --bk-accent:#2196e3; --bk-tekst:#15293e;
  --bk-zacht:#6a829c; --bk-rand:#e8eef6; --bk-grijs:#f5f8fc;
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  letter-spacing:-0.011em; box-sizing:border-box;
}
.bp-kop *, .bp-voet * { box-sizing:border-box; }
.bp-kop a, .bp-voet a { text-decoration:none; }
.bp-kop button { width:auto; margin:0; font-family:inherit; }
.bp-kop [hidden] { display:none !important; }   /* anders wint display:flex hieronder van 'hidden' */

/* ── KOP ─────────────────────────────────────────────────────────────── */
.bp-kop {
  background:rgba(255,255,255,0.86); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--bk-rand); padding:0 48px; display:flex; align-items:center; justify-content:space-between;
  height:88px; position:sticky; top:0; z-index:100; color:var(--bk-tekst);
}
.bp-kop .bk-logo img { height:68px; width:auto; display:block; }
.bp-kop .bk-midden { display:flex; align-items:center; gap:8px; }
.bp-kop .bk-link {
  display:inline-block; background:none; border:none; padding:11px 16px; font-size:15px; color:var(--bk-tekst);
  cursor:pointer; border-radius:10px; font-weight:600; letter-spacing:-0.01em; line-height:1; list-style:none;
  white-space:nowrap;   /* "Diensten ▾" en "💛 KiKa" niet over twee regels */
}
.bp-kop .bk-link::-webkit-details-marker { display:none; }
.bp-kop .bk-link:hover { background:linear-gradient(180deg,#f8fbff,#e9f4ff); color:var(--bk-navy); box-shadow:0 2px 8px rgba(22,80,140,0.14); }
/* Diensten-menu: precies zoals op de voorpagina (index.html .nav-dd / .mega): onder het woord
   "Diensten", vier kolommen, Financieel op de tweede rij. "Binnenkort" is grijze tekst, niet klikbaar. */
.bp-kop .bk-dd { position:relative; }
.bp-kop .bk-mega {
  position:absolute; top:calc(100% + 18px); left:0; background:#fff; border:1px solid var(--bk-rand); border-radius:14px;
  box-shadow:0 12px 40px rgba(10,37,64,0.16); padding:22px 26px; display:grid;
  grid-template-columns:repeat(4,minmax(150px,1fr)); gap:24px; z-index:110;
}
.bp-kop .bk-mega-titel { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--bk-zacht); margin-bottom:10px; }
.bp-kop .bk-mega a, .bp-kop .bk-mega .bk-soon { display:block; padding:7px 8px; border-radius:8px; font-size:14px; font-weight:600; color:var(--bk-navy); transition:background 0.15s,color 0.15s; }
.bp-kop .bk-mega a:hover { background:var(--bk-grijs); color:var(--bk-blauw); }
.bp-kop .bk-mega .bk-soon { color:var(--bk-zacht); font-weight:500; cursor:default; }
.bp-kop .bk-rechts { display:flex; align-items:center; gap:10px; }
/* KiKa-logo en de keuzeknoppen (taal, account) — gelijk aan .nav-kika / .nav-keuze op de voorpagina. */
.bp-kop .bk-kika { display:flex; padding:2px; margin-right:30px; background:none; border:none; cursor:pointer; border-radius:50%; transition:transform 0.18s; }
.bp-kop .bk-kika img { width:72px; height:72px; display:block; }
.bp-kop .bk-kika:hover { transform:scale(1.07); }
.bp-kop .bk-keuze { position:relative; }
.bp-kop .bk-keuze-knop {
  display:inline-flex; align-items:center; gap:7px; min-height:36px; list-style:none; background:#fff; border:1px solid var(--bk-rand);
  border-radius:10px; padding:8px 12px; font-size:13px; font-weight:600; color:var(--bk-tekst); cursor:pointer; white-space:nowrap;
}
.bp-kop .bk-keuze-knop::-webkit-details-marker { display:none; }
.bp-kop .bk-keuze-knop:hover, .bp-kop .bk-keuze[open] .bk-keuze-knop { border-color:var(--bk-blauw); color:var(--bk-navy); }
.bp-kop .bk-pijl { font-size:11px; color:var(--bk-zacht); transition:transform 0.18s; }
.bp-kop .bk-keuze[open] .bk-pijl { transform:rotate(180deg); }
.bp-kop .bk-keuze-menu {
  position:absolute; right:0; top:calc(100% + 8px); min-width:210px; background:#fff; border:1px solid var(--bk-rand);
  border-radius:14px; box-shadow:0 12px 32px rgba(16,40,80,0.16); padding:6px; display:flex; flex-direction:column; z-index:120;
}
.bp-kop .bk-keuze-menu a, .bp-kop .bk-keuze-menu button {
  display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none; border:none; border-radius:9px;
  padding:9px 12px; font-size:14px; font-weight:500; color:var(--bk-tekst); cursor:pointer;
}
.bp-kop .bk-keuze-menu a:hover, .bp-kop .bk-keuze-menu button:hover { background:#e9f4ff; color:var(--bk-navy); }
.bp-kop .bk-keuze-menu hr { border:0; border-top:1px solid var(--bk-rand); margin:6px 4px; }
.bp-kop .bk-keuze-kop { display:flex; flex-direction:column; gap:1px; padding:8px 12px 10px; margin-bottom:4px; border-bottom:1px solid var(--bk-rand); font-size:12.5px; color:var(--bk-zacht); }
.bp-kop .bk-keuze-kop strong { color:var(--bk-tekst); font-size:14px; }
.bp-kop .bk-taalkeuze .bk-keuze-menu { min-width:170px; }
.bp-kop .taal-code { width:22px; font-size:12px; font-weight:700; color:var(--bk-zacht); }
.bp-kop .bk-ingelogd { display:flex; align-items:center; gap:10px; }
/* Accountknop: alleen initialen + pijltje (13 okt 2026). De naam stond ernaast, maar een lange naam
   duwde de menubalk uit elkaar; de volledige naam staat bovenin het uitklapmenu.
   Hoek van de avatar = hoek van de knop min rand min binnenruimte: 10 - 1 - 3 = 6px. Met dezelfde
   hoek binnen en buiten lijkt de ruimte in de hoeken groter dan aan de zijkanten (concentrische hoeken). */
.bp-kop .bk-account-knop { padding:3px 10px 3px 3px; gap:6px; }
.bp-kop .bk-avatar { width:28px; height:28px; border-radius:6px; background:var(--bk-navy); color:#fff; font-size:12px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.bp-kop .bk-keuze-menu .taal-knop.actief { background:#e9f4ff; color:var(--bk-navy); font-weight:700; }
/* Knoppen in de kop (Inloggen, Adverteer nu): zie /assets/knoppen.css */
.bp-kop .bk-hamburger { display:none; background:none; border:none; font-size:26px; color:var(--bk-navy); cursor:pointer; line-height:1; padding:6px 12px; border-radius:12px; }

/* Kleine laptop (tot 1180 px): iets minder lucht, zodat alles op één regel blijft. */
@media (min-width:1101px) and (max-width:1180px) {
  .bp-kop { padding:0 24px; }
  .bp-kop .bk-link { padding:11px 12px; }
  .bp-kop .bk-kika { margin-right:12px; }
}
/* Tablet en telefoon: ☰-menu vanaf 1100 px, gelijk aan de voorpagina (sinds 13 okt 2026). */
@media (max-width:1100px) {
  .bp-kop { flex-wrap:wrap; height:auto; min-height:74px; padding:8px 18px; }
  .bp-kop .bk-logo img { height:58px; }
  .bp-kop .bk-hamburger { display:inline-flex; align-items:center; }
  .bp-kop .bk-midden, .bp-kop .bk-rechts { display:none; width:100%; flex-direction:column; align-items:stretch; gap:8px; padding:8px 0 16px; }
  .bp-kop.open .bk-midden, .bp-kop.open .bk-rechts { display:flex; }
  .bp-kop .bk-link { width:100%; text-align:left; }
  .bp-kop .bk-mega { position:static; grid-template-columns:1fr; box-shadow:none; margin-top:4px; padding:14px 16px; gap:14px; }
  .bp-kop .bk-kika { align-self:flex-start; margin-right:0; }
  .bp-kop .bk-kika img { width:44px; height:44px; }
  .bp-kop .bk-keuze-knop { display:none; }   /* taal en account staan open in het menu (zie site-kop.html) */
  .bp-kop .bk-keuze-menu { position:static; box-shadow:none; border:none; padding:0; min-width:0; }
  .bp-kop .bk-taalkeuze .bk-keuze-menu { flex-direction:row; gap:6px; }
  .bp-kop .bk-taalkeuze .taal-knop { width:auto; border:1px solid var(--bk-rand); }
  .bp-kop .bk-ingelogd { flex-direction:column; align-items:stretch; }
  .bp-kop .bk-gast, .bp-kop .bk-ingelogd { display:flex; flex-direction:column; gap:8px; }
  .bp-kop .knop { width:100%; }
}

/* ── VOET ────────────────────────────────────────────────────────────── */
.bp-voet { background:var(--bk-navy); color:rgba(255,255,255,0.7); padding:56px 48px 28px; margin-top:48px; }
.bp-voet .footer-inner { max-width:1100px; margin:0 auto; }
.bp-voet .footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px; }
.bp-voet .footer-merk { font-family:'Fraunces',serif; font-size:22px; font-weight:700; color:#fff; margin-bottom:12px; }
.bp-voet .footer-merk span { color:var(--bk-accent); }
.bp-voet .footer-beschrijving { font-size:14px; line-height:1.7; color:rgba(255,255,255,0.7); margin-bottom:14px; max-width:380px; }
.bp-voet .footer-actief { font-size:13px; color:rgba(255,255,255,0.7); }
.bp-voet .footer-titel { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:rgba(255,255,255,0.55); margin-bottom:16px; }
.bp-voet .footer-links { display:flex; flex-direction:column; gap:10px; }
.bp-voet .footer-link { font-size:14px; color:rgba(255,255,255,0.75); }
.bp-voet a.footer-link:hover { color:#fff; text-decoration:underline; }
.bp-voet .footer-bottom { border-top:1px solid rgba(255,255,255,0.1); padding-top:24px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px 24px; }
.bp-voet .footer-bottom-links { display:flex; flex-wrap:wrap; gap:10px 20px; }
.bp-voet .footer-copy { font-size:13px; color:rgba(255,255,255,0.55); }

@media (max-width:880px) { .bp-voet .footer-grid { grid-template-columns:repeat(3,1fr); gap:28px; } .bp-voet .footer-grid > :first-child { grid-column:1 / -1; } }
@media (max-width:520px) {
  .bp-voet .footer-grid { grid-template-columns:1fr 1fr; gap:28px 20px; }
  .bp-voet { padding:44px 22px 84px; }   /* onderaan ruimte voor eventuele vaste knoppen */
  .bp-voet .footer-bottom { flex-direction:column; align-items:flex-start; }
}