/* Bimora - basis + hover-klassen.
   De pagina's dragen hun opmaak in style-attributen (uit het ontwerp).
   Inline stijl wint van een class, dus de hover-regels hieronder gebruiken
   !important om er bovenuit te komen. */

* { box-sizing: border-box; }

body {
  margin: 0;
  color: #0E1F33;
  font: 400 17px/1.6 "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: #B9501C; text-decoration: none; }
a:hover { color: #8F3C13; }
h1, h2, h3 { font-family: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif; letter-spacing: -0.02em; }
img { max-width: 100%; }
input, textarea, button, select { font-family: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif; }
input:focus-visible, textarea:focus-visible, select:focus-visible,
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid #E4703C;
  outline-offset: 2px;
}
::placeholder { color: #5A6B80; }
summary::-webkit-details-marker { display: none; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 12px 18px; background: #16314F; color: #FAF6F1;
  font: 600 15px/1 "Hanken Grotesk", sans-serif; border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; color: #FAF6F1; }

/* -------------------------------------------------------- hover-varianten */

.h-btn:hover      { background: #8F3C13 !important; color: #FFFFFF !important; }
.h-nav:hover      { color: #0E1F33 !important; }
.h-outline:hover  { background: #B9501C !important; color: #FFFFFF !important; }
.h-chip:hover     { background: #C9DAEA !important; }
.h-chipwit:hover  { background: #DCE7F1 !important; }
.h-card:hover     { border-color: #E4703C !important; }
.h-navy:hover     { background: #1D3D5E !important; color: #FAF6F1 !important; }
.h-ghost:hover    { background: #16314F !important; color: #FAF6F1 !important; }
.h-link:hover     { color: #8F3C13 !important; }

/* ------------------------------------------------------------- beheerbalk */

.adminbar {
  background: #16314F; color: #FAF6F1;
  font: 500 14px/1.5 "Hanken Grotesk", sans-serif;
  padding: 10px 24px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
}
.adminbar strong { color: #FFD9A8; }
.adminbar a { margin-left: auto; color: #FAF6F1; text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------- mobiele navigatie */

.navtoggle {
  display: none; margin-left: auto;
  width: 44px; height: 44px; align-items: center; justify-content: center;
  border: 1.5px solid #C9D6E4; border-radius: 10px;
  background: #FFFFFF; color: #16314F; cursor: pointer;
}

@media (max-width: 900px) {
  .navtoggle { display: inline-flex; }
  #hoofdmenu {
    display: none !important;
    margin-left: 0 !important;
    width: 100%;
    flex-direction: column;
    align-items: stretch !important;
    gap: 2px !important;
    padding: 8px 0 4px;
    border-top: 1px solid #E7DCCE;
  }
  #hoofdmenu.open { display: flex !important; }
  #hoofdmenu > a { justify-content: flex-start; }
  .fslogan { padding-left: 0 !important; border-left: 0 !important; }
}

/* ------------------------------------------------------------ mockup-schaal */

[data-mockup] { position: relative; width: 100%; overflow: hidden; }
[data-mockup] > [data-w] { transform-origin: top left; }

/* --------------------------------------------------------------- weekscan */

@keyframes bimPuls { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes bimIn   { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.ws-skelet {
  display: inline-block; border-radius: 6px; background: #E7DCCE;
  animation: bimPuls 1.1s ease-in-out infinite;
}
.ws-verborgen { display: none !important; }

.badge {
  padding: 5px 11px; border-radius: 999px;
  font: 700 11px/1 "Hanken Grotesk", sans-serif; text-transform: uppercase;
}
.badge-wacht { background: #F1E7DA; color: #5A6B80; }
.badge-bezig { background: #DCE7F1; color: #16314F; }
.badge-klaar { background: #E6F1EC; color: #2F6F5E; }

.ws-fout {
  margin: 18px 0 0; padding: 14px 16px;
  background: #FBE4D4; border: 1px solid #E4703C; border-radius: 10px;
  font: 500 15.5px/1.5 "Hanken Grotesk", sans-serif; color: #8F3C13;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}