/*
  Kop van Erasmushogeschool Brussel voor Stay On Trails: witte balk, rode lijn
  bovenaan en het EhB-logo links. Losse stylesheet zodat ook de navigatie-apps
  (die hun eigen donkere interface houden) dezelfde kop krijgen.
*/

.topbar .menu a:focus-visible,
.topbar button:focus-visible{
  outline:3px solid #0a7c78;
  outline-offset:3px;
}

/* Boven de Leaflet-kaarten (z-index tot 1000), zodat het uitklapmenu niet achter de kaart valt. */
.topbar{
  z-index:1100;
  background:#ffffff;
  border-top:4px solid #e30713;
  border-bottom:1px solid #e6e6e6;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  backdrop-filter:none;
}

.topbar-inner{
  padding-top:12px;
  padding-bottom:12px;
}

.topbar nav{
  flex:1 1 auto;
}

.topbar .menu a{
  color:#303030;
  font-weight:600;
  border-radius:4px;
}

.topbar .menu a:hover{
  background:transparent;
  color:#e30713;
}

/* Actieve pagina: rood met onderlijn, zoals op ehb.be */
.topbar .menu .cta,
.topbar .menu a[aria-current="page"]{
  background:transparent;
  color:#e30713;
  box-shadow:inset 0 -3px 0 #e30713;
  border-radius:0;
}

.menu .brand-item{
  margin-right:14px;
}

.menu .brand-link{
  display:flex;
  align-items:center;
  gap:14px;
  padding:0;
  box-shadow:none;
}

.menu .brand-link:hover{
  color:inherit;
}

.brand-ehb{
  display:block;
  height:44px;
  width:auto;
}

.brand-divider{
  width:1px;
  height:34px;
  background:#e6e6e6;
}

.brand-sot{
  display:block;
  height:34px;
  width:auto;
}

.topbar .fs-controls .fs-label{
  color:#5f5f5f;
}

.topbar .fs-controls button{
  background:#ffffff;
  color:#303030;
  border:1px solid #e6e6e6;
  border-radius:4px;
}

.topbar .fs-controls button:hover{
  background:#f6f6f6;
}

.topbar .fs-controls button[aria-pressed="true"]{
  background:#e30713;
  border-color:#e30713;
  color:#ffffff;
}

@media (max-width: 600px){
  .brand-ehb{height:36px}
  .brand-sot{height:28px}
}

.topbar{
  font-family:"Poppins",Arial,Helvetica,sans-serif;
}

/* Uitklapmenu met de pagina's voor aangemelde gebruikers */
.menu-dropdown{
  position:relative;
}

.menu-dropdown summary{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 10px;
  color:#303030;
  font-weight:600;
  cursor:pointer;
  list-style:none;
  user-select:none;
}

.menu-dropdown summary::-webkit-details-marker{
  display:none;
}

.menu-dropdown summary::after{
  content:"";
  width:7px;
  height:7px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .15s ease;
}

.menu-dropdown details[open] summary::after{
  transform:translateY(2px) rotate(-135deg);
}

.menu-dropdown summary:hover,
.menu-dropdown details[open] summary,
.menu-dropdown summary.is-current{
  color:#e30713;
}

.menu-dropdown summary.is-current{
  box-shadow:inset 0 -3px 0 #e30713;
}

.menu-dropdown summary:focus-visible{
  outline:3px solid #0a7c78;
  outline-offset:3px;
}

.menu-dropdown .dropdown-list{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  z-index:1000;
  min-width:240px;
  max-height:70vh;
  overflow:auto;
  margin:0;
  padding:6px 0;
  list-style:none;
  background:#ffffff;
  border:1px solid #e6e6e6;
  border-top:3px solid #e30713;
  border-radius:0 0 6px 6px;
  box-shadow:0 12px 30px rgba(0,0,0,.14);
}

.topbar .menu-dropdown .dropdown-list a{
  display:block;
  padding:9px 16px;
  border-radius:0;
  white-space:nowrap;
}

.topbar .menu-dropdown .dropdown-list a:hover{
  background:#f6f6f6;
}

.topbar .menu-dropdown .dropdown-list a[aria-current="page"]{
  box-shadow:inset 3px 0 0 #e30713;
  background:#fdf2f2;
}

/* Taalkeuze NL / EN / FR: eigen smalle rij rechtsboven, zoals op ehb.be */
.topbar-inner{
  flex-wrap:wrap;
  row-gap:0;
}

.topbar .lang-switch{
  order:-1;
  flex:1 0 100%;
  display:flex;
  justify-content:flex-end;
  margin:-6px 0 2px;
}

.topbar .lang-switch ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:2px;
}

.topbar .lang-switch a{
  display:inline-block;
  padding:2px 8px;
  font-size:13px;
  font-weight:700;
  color:#5f5f5f;
  text-decoration:none;
}

.topbar .lang-switch a:hover{
  color:#e30713;
}

.topbar .lang-switch a[aria-current="true"]{
  color:#e30713;
  box-shadow:inset 0 -2px 0 #e30713;
}

.topbar nav > .menu{
  flex:1 1 auto;
  align-items:center;
}

/* Compacter, zodat menu, taalkeuze en tekstgrootte op één regel passen */
.topbar .menu{
  gap:2px;
}

.topbar .fs-controls .fs-label{
  white-space:nowrap;
}

/* Het label is aria-hidden; de groep heeft zelf een aria-label. */
@media (max-width: 1400px){
  .topbar .fs-controls .fs-label{
    display:none;
  }
}