/* Compacte, conflictvrije hoofdnavigatie voor desktop, laptop en mobiel. */
.side .nav .nav-disclosure-panel,
.side .nav .nav-disclosure.is-open .nav-disclosure-panel{
  grid-template-columns:1fr!important;
}
.side .nav .nav-disclosure-item{
  display:block;
  width:100%;
  min-width:0;
  padding:8px 10px!important;
  overflow-wrap:anywhere;
  line-height:1.3;
}
.side .nav .nav-disclosure-item::before{display:none!important;content:none!important}

@media(min-width:1001px){
  .app{grid-template-columns:228px minmax(0,1fr)}
  .side{padding-inline:14px}
}

/* Bij een smal venster of flinke browserzoom blijft de inhoud breed bruikbaar. */
@media(min-width:701px) and (max-width:1000px){
  body.mobile-menu-open{overflow:hidden}
  .app{display:block!important;padding-left:0!important}
  .mobile-header{
    position:sticky;top:0;z-index:5000;
    display:grid!important;grid-template-columns:minmax(0,1fr) auto 48px!important;
    min-height:58px;padding:0 10px;
    align-items:center;background:rgba(255,255,255,.9);
    border-bottom:1px solid var(--line);box-shadow:0 6px 24px rgba(37,45,65,.07);
    backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);
  }
  body.environment-development .mobile-header{top:32px}
  .mobile-header strong{padding-left:8px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mobile-header button{min-width:44px;min-height:44px;border:0;border-radius:12px;background:transparent;color:var(--cs-blue,#356b97)}
  .mobile-header .mobile-menu-button{display:flex;align-items:center;justify-content:center;gap:6px;padding:0 10px;font-size:18px}
  .mobile-header .mobile-menu-button span{font-size:12px}
  .mobile-header .mobile-search-button{font-size:26px}
  .mobile-menu-backdrop{position:fixed;inset:58px 0 0;z-index:5090;display:block;border:0;background:rgba(14,30,43,.45)}
  body.environment-development .mobile-menu-backdrop{inset:90px 0 0}
  .mobile-menu-backdrop[hidden]{display:none}
  .side{
    display:block!important;position:fixed!important;z-index:5100;
    left:0;top:58px!important;bottom:0;width:min(86vw,340px);height:auto!important;
    padding:14px 15px 24px;border:0;border-right:1px solid var(--line);border-radius:0 24px 24px 0;
    overflow-x:hidden;overflow-y:auto;background:rgba(250,250,252,.97);
    transform:translateX(-105%);transition:transform .2s ease;box-shadow:8px 0 28px rgba(15,35,50,.2);
  }
  body.environment-development .side{top:90px!important}
  body.mobile-menu-open .side{transform:translateX(0)}
  .side .brand{display:none}
  .side .nav-label{display:block}
  .side .nav{display:block!important}
  .side .nav button{min-height:40px;font-size:14px}
  .side .meta{display:none}
  .main{width:100%;max-width:100vw;padding:18px 22px 50px;overflow-x:hidden}
}

/* Definitieve uniforme menu-opmaak; dit bestand wordt als laatste geladen. */
.side .nav button.nav-primary-red{
  min-height:31px!important;
  margin:4px 9px!important;
  padding:5px 0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#c5162e!important;
  font-size:12px!important;
  font-weight:850!important;
  line-height:1.2!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
  box-shadow:none!important;
}
.side .nav button.nav-primary-red:hover,
.side .nav button.nav-primary-red.active{
  border:0!important;
  background:transparent!important;
  color:#a20d22!important;
  box-shadow:none!important;
}
.side .nav button.nav-primary-red::before,
.side .nav button.nav-primary-red::after{display:none!important;content:none!important}

.side .nav .nav-practical-tree{
  display:grid!important;
  gap:1px!important;
  margin:1px 0 7px 12px!important;
  padding:1px 0 4px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.side .nav button.nav-practical-group-toggle,
.side .nav button.nav-practical-mode{
  min-height:31px!important;
  border:0!important;
  border-radius:8px!important;
  background:transparent!important;
  color:#637780!important;
  font-size:13px!important;
  line-height:1.25!important;
  letter-spacing:0!important;
  box-shadow:none!important;
}
.side .nav button.nav-practical-group-toggle{padding:6px 10px!important;font-weight:800!important}
.side .nav button.nav-practical-mode{display:block!important;padding:6px 10px 6px 14px!important;font-weight:600!important}
.side .nav button.nav-practical-mode>span{display:none!important}
.side .nav button.nav-practical-group-toggle:hover,
.side .nav button.nav-practical-mode:hover{background:rgba(255,255,255,.82)!important;color:var(--navy)!important;transform:translateX(1px)!important}
.side .nav button.nav-practical-mode.active{
  background:#fff!important;
  color:var(--navy)!important;
  font-weight:700!important;
  box-shadow:0 5px 15px rgba(36,44,40,.08)!important;
}
.side .nav button.nav-practical-mode.active::after{display:none!important;content:none!important}
@media(max-width:900px){
  .side .nav .nav-practical-tree{margin:1px 0 7px 12px!important;padding:1px 0 4px!important}
  .side .nav .nav-practical-modes:not([hidden]){display:block!important;padding:1px 0 4px 7px!important}
}

/* Eén typografisch systeem voor de volledige zijbalk. */
.side .nav,
.side .nav button,
.side .nav .nav-group-label{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,sans-serif!important;
}
.side .nav .nav-group-label,
.side .nav button.nav-disclosure-heading,
.side .nav button.nav-primary-red{
  min-height:31px!important;
  margin:14px 9px 4px!important;
  padding:5px 0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#c5162e!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:1.2!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
  box-shadow:none!important;
}
.side .nav .nav-group-label:first-child{margin-top:8px!important}
.side .nav .nav-group-label.nav-information-label{margin-top:24px!important;padding-top:15px!important;border-top:1px solid rgba(68,101,119,.2)!important}
.side .nav button.nav-primary-red{width:calc(100% - 18px)!important}
.side .nav button:not(.nav-disclosure-heading):not(.nav-primary-red),
.side .nav button.nav-disclosure-item,
.side .nav button.nav-practical-parent,
.side .nav button.nav-practical-group-toggle,
.side .nav button.nav-practical-mode{
  min-height:36px!important;
  margin:0!important;
  padding:8px 10px!important;
  border:0!important;
  border-radius:9px!important;
  color:#40515a!important;
  font-size:14px!important;
  font-weight:600!important;
  line-height:1.3!important;
  letter-spacing:0!important;
  text-transform:none!important;
}
.side .nav .nav-disclosure-panel{padding:2px 0 4px 12px!important}
.side .nav button.nav-practical-group-toggle{padding-left:14px!important;color:#566b76!important}
.side .nav .nav-practical-modes{padding:1px 0 4px 12px!important}
.side .nav button.nav-practical-mode{padding-left:18px!important;color:#607681!important}
.side .nav button:not(.nav-disclosure-heading):not(.nav-primary-red):hover{
  background:rgba(53,107,151,.06)!important;
  color:#294f69!important;
}
.side .nav button.active:not(.nav-primary-red),
.side .nav button.nav-practical-mode.active{
  background:rgba(53,107,151,.11)!important;
  color:#285f88!important;
  font-size:14px!important;
  font-weight:600!important;
  box-shadow:none!important;
}
.side .nav button.active:not(.nav-primary-red)::after,
.side .nav button.nav-practical-mode.active::after{display:none!important;content:none!important}
.side .nav button.nav-primary-red:hover,
.side .nav button.nav-primary-red.active{
  background:transparent!important;
  color:#a20d22!important;
  font-size:12px!important;
  font-weight:800!important;
}
@media(max-width:900px){
  .side .nav .nav-disclosure.is-open .nav-disclosure-panel{display:block!important;padding-left:12px!important}
  .side .nav .nav-practical-modes:not([hidden]){display:block!important;padding-left:12px!important}
}

/* Binnen een geopend submenu wijst rood de huidige route aan. */
.side .nav .nav-practical-group.is-open>button.nav-practical-group-toggle{
  color:#b51d38!important;
  font-weight:700!important;
}
.side .nav button.nav-practical-mode.active,
.side .nav .nav-disclosure-panel button.nav-disclosure-item.active{
  background:rgba(197,22,46,.075)!important;
  color:#b51d38!important;
  font-weight:700!important;
}

/* Iedere daadwerkelijk geselecteerde bestemming gebruikt dezelfde markering. */
.side .nav button[data-page].active,
.side .nav button.nav-practical-mode.active{
  border-radius:9px!important;
  background:rgba(197,22,46,.09)!important;
  color:#a9142d!important;
  font-weight:700!important;
  box-shadow:none!important;
}
.side .nav button[data-page].active::after,
.side .nav button.nav-practical-mode.active::after{display:none!important;content:none!important}
.side .nav button.nav-primary-red.active{
  padding-right:9px!important;
  padding-left:9px!important;
  background:rgba(197,22,46,.09)!important;
  color:#a20d22!important;
}

/* Heldere actieve menulaag: hoofdkeuze, beschikbare opties en huidige pagina. */
.side .nav .nav-disclosure{
  margin:3px 0 7px!important;
  border-radius:13px!important;
}
.side .nav button.nav-disclosure-heading{
  width:100%!important;
  min-height:40px!important;
  margin:0!important;
  padding:9px 11px!important;
  border-radius:11px!important;
}
.side .nav button.nav-disclosure-heading::after{
  content:'›'!important;
  display:block!important;
  flex:0 0 auto;
  color:#c5162e!important;
  font-size:19px!important;
  line-height:1!important;
  transform:rotate(0)!important;
}
.side .nav .nav-disclosure.is-open>button.nav-disclosure-heading{
  background:rgba(197,22,46,.095)!important;
  color:#9f1026!important;
}
.side .nav .nav-disclosure.is-open>button.nav-disclosure-heading::after{
  transform:rotate(90deg)!important;
}

/* Start, Vertalen en Bronnen zijn zelfstandige hoofdroutes, geen uitklapgroepen. */
.side .nav button.nav-group-label.nav-group-direct{
  display:flex!important;
  align-items:center!important;
  width:100%!important;
  min-height:40px!important;
  margin:3px 0 7px!important;
  padding:9px 11px!important;
  border:0!important;
  border-radius:11px!important;
  background:transparent!important;
  color:#c5162e!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:1.2!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
  box-shadow:none!important;
}
.side .nav button.nav-group-label.nav-group-direct:hover,
.side .nav button.nav-group-label.nav-group-direct.active{
  background:rgba(197,22,46,.095)!important;
  color:#9f1026!important;
  transform:none!important;
}
.side .nav button.nav-group-label.nav-group-direct.nav-information-label{
  margin-top:24px!important;
  padding-top:15px!important;
  border-top:1px solid rgba(68,101,119,.2)!important;
}
.side .nav .nav-disclosure-panel,
.side .nav .nav-disclosure.is-open .nav-disclosure-panel{
  position:relative;
  margin:4px 3px 0!important;
  padding:7px 6px 7px 14px!important;
  border:1px solid rgba(69,91,105,.11)!important;
  border-radius:11px!important;
  background:#f6f7f8!important;
  box-shadow:inset 3px 0 0 rgba(197,22,46,.18)!important;
}
.side .nav .nav-disclosure-panel{display:none!important}
.side .nav .nav-disclosure.is-open .nav-disclosure-panel{display:block!important}
.side .nav .nav-disclosure-panel button.nav-disclosure-item{
  position:relative;
  min-height:36px!important;
  margin:1px 0!important;
  padding:8px 10px 8px 13px!important;
  border-radius:8px!important;
  color:#56656e!important;
}
.side .nav .nav-disclosure-panel button.nav-disclosure-item:hover{
  background:#fff!important;
  color:#334b59!important;
}
.side .nav .nav-disclosure-panel button.nav-disclosure-item.active,
.side .nav .nav-disclosure-panel button.nav-disclosure-item[aria-current="page"]{
  background:#fff0f2!important;
  color:#a9142d!important;
  font-weight:800!important;
  box-shadow:inset 4px 0 0 #c5162e!important;
}

.navigation-context{
  display:flex;
  align-items:center;
  gap:8px;
  margin:3px 0 15px;
  padding:0 4px;
  color:#78838b;
  font-size:12px;
  line-height:1.3;
}
.navigation-context[hidden]{display:none!important}
.navigation-context span{color:#9f1026;font-weight:800}
.navigation-context i{color:#aeb6bb;font-style:normal}
.navigation-context strong{color:#43545e;font-weight:750}

@media(max-width:900px){
  .side .nav .nav-disclosure.is-open .nav-disclosure-panel{display:block!important}
  .navigation-context{margin-top:0;margin-bottom:12px;padding-inline:2px}
}