/* Hamburger navigatie – los bestand om app.css onaangetast te laten */

/* Header balk (transparant bovenop achtergrond) */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: .5rem .75rem;
  display: flex;
  align-items: center;
}

/* Hamburger knop */
.nav-toggle {
  appearance: none;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.55);
  color: #fff;
  border-radius: .5rem;
  padding: .35rem .55rem;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.nav-toggle:focus-visible {
  outline: 2px solid rgba(255,255,255,.5);
}

/* Drawer paneel (klapt omlaag onder de header) */
.nav-drawer {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;

  /* we animeren vanaf -100% naar 0 via transform */
  transform: translateY(-100%);
  transition: transform .2s ease;

  background: rgba(0,0,0,.85);
  backdrop-filter: saturate(1.1) blur(8px);
  padding: .75rem 1rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;

  border-bottom: 1px solid rgba(255,255,255,.15);
}

/* Open state */
.nav-drawer.is-open {
  transform: translateY(0);
}

/* Link stijl */
.nav-drawer a {
  color: #fff;
  text-decoration: none;
  padding: .5rem .6rem;
  border-radius: .5rem;
  display: block;
}

.nav-drawer a:hover,
.nav-drawer a:focus-visible {
  background: rgba(255,255,255,.1);
}

.nav-drawer a[aria-current="page"] {
  outline: 2px solid rgba(255,255,255,.35);
  outline-offset: 1px;
}

/* ----------------------------------------------------------- */
/* ADMIN SECTIE (inspringend submenu)                          */
/* ----------------------------------------------------------- */

#nav-admin-row {
  border-top: 1px solid rgba(255,255,255,.2);
  margin-top: .35rem;
  padding-top: .35rem;
}

/* Het Admin-item zelf duidelijker */
#admin-protected {
  font-weight: 600;
}

/* Container voor de admin-submenu-links */
#nav-admin-row .nav-admin-links {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

/* Submenu-links ingesprongen */
#nav-admin-row .nav-admin-links a {
  padding-left: 1.75rem;
  font-size: .95rem;
  position: relative;
}

/* Klein pijltje voor ingesprongen links */
#nav-admin-row .nav-admin-links a::before {
  content: '↳';
  position: absolute;
  left: .7rem;
  opacity: .75;
  font-size: .85em;
}