/* === Fixed page nav (rechtsonder, altijd zichtbaar) === */

.fixed-page-nav{
  position: fixed;
  right: 24px;
  bottom: 24px;
  display: flex;
  gap: 4px;
  z-index: 9999; /* boven overlays */
}

.fixed-page-nav .nav-box{
  width: 40px;
  height: 40px;
  background: var(--nav-color);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 100px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);;
  border: 0;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
  outline: none;
}

/* Witte, 'dikkere' pijlen via grotere font-size + text-stroke-achtig effect */
.fixed-page-nav .nav-box i{
  font-size: 2rem;   /* ~32px, lekker aanwezig */
  line-height: 1;
  display: inline-block;
  /* optioneel: iets ‘zwaarder’ laten ogen */
  filter: drop-shadow(0 0 0.5px rgba(255,255,255,0.7));
}

.fixed-page-nav .nav-box:hover,
.fixed-page-nav .nav-box:focus{
  background: var(--nav-hover-color);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
}

/* Toetsenbord focus ring voor toegankelijkheid */
.fixed-page-nav .nav-box:focus-visible{
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* Kleine screens: iets dichter bij de rand */
@media (max-width: 480px){
  .fixed-page-nav{
    right: 16px;
    bottom: 16px;
    gap: 10px;
  }
}

.hero {
  padding: 20px 0 30px 0;

  .hero-badge {
    width: fit-content;
    align-self: flex-start;
  }
}

.vignet-wit {
  fill: #fff;
}


.kader {

  margin-top: 2rem;

	h4 {color: var(--nav-color);}
  strong { color: var(--nav-color);}
}

.agenda {

  .inverted {
   background-color: var(--nav-color);
   color: #ffffff;
	  border-radius: 20px;
	  padding: 1rem;
	  margin-bottom: 2rem;
	  a { color: inherit;  font-weight: 700;}
	  a:hover { text-decoration: underline; }
	  h4 { color: #FFFFFF;
	}
	
}