/* Nav */
.navlinks{
  display:flex;
  align-items:center;
  gap:18px;
  color:var(--muted);
  font-weight:600;
  font-size:14px;
}

.navlinks a{
  padding:10px 10px;
  border-radius:12px;
}

.navlinks a:hover{
  background:rgba(11,107,179,.08);
  color:var(--ink);
}

.actions{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:11px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:white;
  font-weight:700;
  font-size:14px;
  gap:10px;
  transition:transform .08s ease, box-shadow .2s ease, background .2s ease;
  cursor:pointer;
  user-select:none;
}

.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 18px rgba(11,27,43,.10);
}

.btn.primary{
  border:none;
  color:white;
  background:linear-gradient(135deg, #0b6bb3 0%, #083f6b 100%);
  box-shadow:0 10px 24px rgba(11,107,179,.45), inset 0 1px 0 rgba(255,255,255,.25);
}

.btn.primary:hover{
  background:linear-gradient(135deg, #1282d6 0%, #0a4f86 100%);
  box-shadow:0 14px 30px rgba(11,107,179,.55);
}

.btn.ghost{
  background:rgba(11,107,179,.12);
  border:1px solid rgba(11,107,179,.35);
  color:#083f6b;
}

.btn.ghost:hover{ background:rgba(11,107,179,.22); }

.btn.accent{
  border:none;
  color:white;
  background:linear-gradient(135deg, #c91d1d 0%, #8f1414 100%);
  box-shadow:0 10px 24px rgba(201,29,29,.45), inset 0 1px 0 rgba(255,255,255,.25);
}

.btn.accent:hover{
  background:linear-gradient(135deg, #e02b2b 0%, #a01818 100%);
}

.btn.accentgreen{
  border:none;
  color:white;
  background:linear-gradient(135deg, #26b321 0%, #3a900d 100%);
  box-shadow:0 10px 24px rgb(44 201 29 / 45%), inset 0 1px 0 rgba(255,255,255,.25);
}

.btn.accentgreen:hover{
  background:linear-gradient(135deg, #2be05a 0%, #2abb18 100%);
}

/* Cards, grids */
.card{
  background:rgba(255,255,255,.86);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:0 10px 22px rgba(11,27,43,.08);
}

.card h3{ margin:8px 0 6px; font-size:16px; }
.card p{ margin:0; color:var(--muted); font-size:14px; }

.grid3{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
}

.grid3br{ margin-bottom:15px; }

/* Icons */
.icon{
  width:40px;
  height:40px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:rgba(11,107,179,.10);
  border:1px solid rgba(11,107,179,.18);
  font-weight:900;
  color:var(--blue2);
}

.icon.red{
  background:rgba(201,29,29,.09);
  border-color:rgba(201,29,29,.18);
  color:var(--red);
}

.icon.green{
  background:rgba(31,122,74,.09);
  border-color:rgba(31,122,74,.18);
  color:var(--green);
}

/* =========================
   CATCARD – CLICK & ZOOM
========================= */

.catLink{
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

/* lichte lift + schaduw */
.catLink:hover{
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 18px 36px rgba(11,27,43,.18);
}

/* image zoom */
.catLink .catMedia img{
  transition: transform .4s ease;
}

.catLink:hover .catMedia img{
  transform: scale(1.08);
}

/* subtiele overlay op image */
.catLink .catMedia::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(11,27,43,.05),
    rgba(11,27,43,.25)
  );
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 1;
}

.catLink:hover .catMedia::before{
  opacity: 1;
}

/* CTA label bij hover */
.catLink::after{
  content: "Bekijk categorie →";
  position: absolute;
  right: 16px;
  bottom: 14px;
  font-size: 13px;
  font-weight: 800;
  color: white;
  background: rgba(11,27,43,.55);
  padding: 6px 10px;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}

.catLink:hover::after{
  opacity: 1;
  transform: translateY(0);
}

/* Zorg dat overlay correct werkt */
.catCard{
  position: relative;
  overflow: hidden;
}