/* =========================================================
   Metius – custom.css
   ========================================================= */

/* Sterrenicoon (menu en tekst), één keer gedefinieerd */
:root {
  --sterren-icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5Q10.4 11.6 17 13Q10.4 14.4 9 21Q7.6 14.4 1 13Q7.6 11.6 9 5Z M18 2Q18.7 5.3 22 6Q18.7 6.7 18 10Q17.3 6.7 14 6Q17.3 5.3 18 2Z M20 15.5Q20.45 17.55 22.5 18Q20.45 18.45 20 20.5Q19.55 18.45 17.5 18Q19.55 17.55 20 15.5Z'/%3E%3C/svg%3E");
}

/* ===== Header ===== */
.t4-header {
  border-bottom: 0px solid #000;
}

/* Sticky header (de hemel wordt er door sterrenhemel.js in getekend) */
#t4-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #000 !important;
}

/* ===== Logo ===== */
.navbar-brand.logo-control img.logo-img {
  max-height: 140px;
  padding: 10px 0;
}

/* ===== Hamburgermenu ===== */
.navbar-toggler {
  color: #fff;
}

/* ===== Typografie ===== */
.page-header h1 {
  font-weight: var(--heading-font-weight);
  text-transform: none;
  font-size: 1.75rem;
}

/* =========================================================
   Sterrenhemel en lay-out
   ========================================================= */

/* Zwarte basis, ook als het script (nog) niet geladen is */
html { background: #000; }

/* Alle wrappers en secties transparant, zodat de hemel zichtbaar is */
body,
.t4-wrapper,
.t4-content,
.t4-content-inner,
#t4-main-body,
#t4-breadcrumbs {
  background: transparent !important;
}

/* Ruimte onderaan zodat het einde van een artikel boven de skyline uit kan scrollen.
   De hoogte van de skyline zet sterrenhemel.js zelf in deze variabele. */
.t4-content-inner {
  padding-bottom: var(--sterrenhemel-skyline, 0px);
}

/* Terug-naar-boven-knop boven de skyline houden */
#back-to-top {
  z-index: 1001;
}

/* Hoofdsectie: geen extra ruimte boven, wel onder */
#t4-main-body {
  padding-top: 0 !important;
}
.t4-main-body {
  padding-bottom: 3rem;
}

/* Container transparant; 15px onder de header, net als tussen de kolommen */
#t4-main-body > .t4-section-inner.container {
  background: transparent;
  margin-top: 15px;
}

/* 15px ruimte tussen hoofdinhoud en rechterkolom (en eronder op mobiel) */
#t4-main-body .t4-row {
  column-gap: 15px;
  row-gap: 15px;
}

/* Hoofdinhoud als los wit blok */
#t4-main-body .t4-row > .t4-col {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 40px rgba(0, 0, 0, .5);
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

/* Zijkolommen zelf transparant ... */
#t4-main-body .t4-row > .t4-col.sidebar-r,
#t4-main-body .t4-row > .t4-col.sidebar-l {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

/* ... en elke module daarin een eigen wit blok */
#t4-main-body .sidebar-r .t4-module,
#t4-main-body .sidebar-l .t4-module {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 40px rgba(0, 0, 0, .5);
  padding: 1.25rem 1.5rem;
  margin: 0 0 15px;
}
#t4-main-body .sidebar-r .t4-module:last-child,
#t4-main-body .sidebar-l .t4-module:last-child {
  margin-bottom: 0;
}

/* Kruimelpad als eigen balk eronder */
#t4-breadcrumbs > .t4-section-inner.container {
  background: #f4f4f6;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
  margin-top: 15px;
  margin-bottom: 3rem;
}

/* Pagina met alleen de sterrenhemel */
body.item-579 #t4-main-body,
body.item-579 #t4-breadcrumbs {
  display: none;
}

/* =========================================================
   Menu
   ========================================================= */

/* Ruimte rond hoofdmenu-items */
#t4-megamenu-mainmenu .navbar-nav > li > .nav-link {
  padding: .5rem .7rem;
}

/* Hoofdmenu: witte tekst, blauw bij actief/hover (desktop) */
@media (min-width: 992px) {

  #t4-megamenu-mainmenu .navbar-nav > li > .nav-link {
    color: #fff;
    background: transparent;
    border-radius: 4px;
    transition: background-color .2s ease, color .2s ease;
  }

  #t4-megamenu-mainmenu .navbar-nav > li > .nav-link:hover,
  #t4-megamenu-mainmenu .navbar-nav > li > .nav-link:focus-visible,
  #t4-megamenu-mainmenu .navbar-nav > li:hover > .nav-link,
  #t4-megamenu-mainmenu .navbar-nav > li.show > .nav-link,
  #t4-megamenu-mainmenu .navbar-nav > li.active > .nav-link {
    color: #fff;
    background: #036398;
  }

  #t4-megamenu-mainmenu .navbar-nav > li > .nav-link .item-caret {
    color: inherit;
  }
}

/* Submenu's: blauw bij hover en actief */
#t4-megamenu-mainmenu .dropdown-menu .dropdown-item {
  border-radius: 4px;
  transition: background-color .2s ease, color .2s ease;
}

#t4-megamenu-mainmenu .dropdown-menu .dropdown-item:hover,
#t4-megamenu-mainmenu .dropdown-menu .dropdown-item:focus-visible,
#t4-megamenu-mainmenu .dropdown-menu .dropdown-item:active,
#t4-megamenu-mainmenu .dropdown-menu .dropdown-item.active,
#t4-megamenu-mainmenu .dropdown-menu li:hover > .dropdown-item,
#t4-megamenu-mainmenu .dropdown-menu li.show > .dropdown-item,
#t4-megamenu-mainmenu .dropdown-menu li.active > .dropdown-item {
  color: #fff;
  background: #036398;
}

#t4-megamenu-mainmenu .dropdown-menu .dropdown-item .item-caret {
  color: inherit;
}

/* Hoofdmenu (desktop): gelijke ruimte en alles op één regel */
@media (min-width: 992px) {

  #t4-megamenu-mainmenu .navbar-nav {
    flex-wrap: nowrap;            /* nooit naar een tweede regel */
    align-items: center;
    gap: 4px;
  }
  #t4-megamenu-mainmenu .navbar-nav > li {
    margin: 0 !important;
    flex: 0 0 auto;
  }

  /* Elk item dezelfde binnenruimte, met of zonder submenu */
  #t4-megamenu-mainmenu .navbar-nav > li > .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
    padding: .5rem .75rem !important;
  }

  /* Pijltje: het pijltje van T4 verbergen (dat neemt onzichtbaar extra ruimte in) en een eigen,
     klein driehoekje tekenen dat direct achter de tekst staat, bij alle items even groot en wit */
  #t4-megamenu-mainmenu .navbar-nav > li > .nav-link .item-caret {
    display: none !important;
  }
  #t4-megamenu-mainmenu .navbar-nav > li > .nav-link.dropdown-toggle::after {
    content: "" !important;
    display: inline-block !important;
    position: static !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-top: 5px solid currentColor !important;
    border-left: 4.5px solid transparent !important;
    border-right: 4.5px solid transparent !important;
    vertical-align: middle;
  }

}

/* Menu-items links naast het logo, schakelaar en oogje helemaal rechts (desktop) */
@media (min-width: 992px) {
  /* de menubalk vult alle ruimte tussen logo en rechterkant */
  #t4-header .header-wrap > .t4-navbar {
    flex: 1 1 auto !important;
    min-width: 0;
    margin-left: 12px !important;
    margin-right: 0 !important;
  }
  #t4-header .t4-navbar > .navbar,
  #t4-header #t4-megamenu-mainmenu {
    flex: 1 1 auto !important;
    width: 100% !important;
  }
  #t4-megamenu-mainmenu .navbar-nav {
    width: 100%;
    justify-content: flex-start !important;
  }
  /* alle vrije ruimte vóór de schakelaar: die schuift daardoor naar rechts */
  #t4-megamenu-mainmenu .navbar-nav > .sterrenhemel-schakelaar {
    margin-left: auto !important;
  }
}

/* Kopbalk (desktop) precies even breed als de inhoud: logo lijnt links uit met de witte blokken,
   schakelaar en oogje rechts met de rechterkolom */
@media (min-width: 992px) {
  #t4-header .container-xxl {
    padding-left: 0;
    padding-right: 0;
  }
  /* houder van de hamburgerknop: op desktop leeg, maar neemt anders ruimte in rechts */
  #t4-header .t4-header-r {
    display: none !important;
  }
  #t4-header .t4-navbar {
    margin-right: 0 !important;
  }
}

/* Submenu's (desktop): ruimte, randje en duidelijke hover */
@media (min-width: 992px) {

  /* Het uitgeklapte submenu: afgerond, wit randje, schaduw */
  #t4-megamenu-mainmenu .dropdown-menu {
    padding: 0;
    border: 2px solid #fff;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  }

  /* Ruimte tussen de rand van het submenu en de items */
  #t4-megamenu-mainmenu .dropdown-menu-inner {
    padding: 8px;
  }
  #t4-megamenu-mainmenu .dropdown-menu-inner > ul {
    margin: 0;
    padding: 0;
  }
  #t4-megamenu-mainmenu .dropdown-menu-inner > ul > li + li {
    margin-top: 2px;
  }

  /* Ruimte binnen elk item */
  #t4-megamenu-mainmenu .dropdown-menu .dropdown-item {
    padding: .55rem 1rem;
  }

  /* Wit randje binnen het item waar de muis op staat (en bij toetsenbordfocus) */
  #t4-megamenu-mainmenu .dropdown-menu .dropdown-item:hover,
  #t4-megamenu-mainmenu .dropdown-menu .dropdown-item:focus-visible,
  #t4-megamenu-mainmenu .dropdown-menu li:hover > .dropdown-item {
    box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px #036398;
  }
}
/* Home: geen blauwe achtergrond als het actief is (wel bij aanwijzen) */
@media (min-width: 992px) {
  #t4-megamenu-mainmenu .navbar-nav > li.default.active:not(:hover) > .nav-link:not(:focus-visible) {
    background: transparent;
  }
}
/* Menu-item sterrenhemel: icoon in plaats van tekst (alleen nodig zolang menu-item 579 zichtbaar is) */
#t4-megamenu-mainmenu .nav-item[data-id="579"] > .nav-link .menu-item-title {
  display: inline-block;
  width: 26px;
  height: 26px;
  vertical-align: middle;
  overflow: hidden;
  text-indent: -9999px;           /* tekst blijft bestaan voor schermlezers */
  background-color: currentColor; /* icoon neemt de tekstkleur over */
  -webkit-mask: var(--sterren-icoon) center / contain no-repeat;
          mask: var(--sterren-icoon) center / contain no-repeat;
}
/* Mobiel menu: altijd volledig bereikbaar */
@media (max-width: 991.98px) {
  #t4-megamenu-mainmenu.show,
  #t4-megamenu-mainmenu.collapsing {
    max-height: calc(100vh - 90px);
    max-height: calc(100dvh - 90px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}
/* =========================================================
   Inhoud
   ========================================================= */

/* Sterrenhemel-icoon in tekst (module rechterkolom) */
a.sterrenhemel-knop {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 30px;
  height: 24px;
  background: #036398;
  border-radius: 4px;
  overflow: hidden;
  text-indent: -9999px;           /* linktekst blijft voor schermlezers */
}
a.sterrenhemel-knop::after {
  content: "";
  position: absolute;
  inset: 3px 6px;
  background: #fff;
  -webkit-mask: var(--sterren-icoon) center / contain no-repeat;
          mask: var(--sterren-icoon) center / contain no-repeat;
}
a.sterrenhemel-knop:hover {
  background: #024a72;
}

/* Tabellen: gestreepte rijen en hover */
.table-striped > tbody > tr:nth-of-type(2n+1) > * {
  --t4-table-bg-type: #ccc;
}
.table-hover > tbody > tr:hover > * {
  --t4-table-bg-state: #cccc;
}

/* JEM-filter */
div#jem #jem_filter.jem-events-filter label {
  color: #fff !important;
}

/* =========================================================
   Hoofdkolom: content-top, inhoud en content-bottom als losse witte blokken
   ========================================================= */

/* Hoofdkolom zelf transparant, 15px tussen de blokken */
#t4-main-body .t4-row > .t4-col:not(.sidebar-r):not(.sidebar-l) {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
/* Elk blok in de hoofdkolom wit */
#t4-main-body .t4-row > .t4-col:not(.sidebar-r):not(.sidebar-l) > * {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 40px rgba(0, 0, 0, .5);
  padding: 1.5rem;
  margin: 0;
  min-width: 0;          /* brede tabellen en afbeeldingen blijven binnen het blok */
}

/* Lege meldingenbalk van Joomla niet als leeg wit blok tonen */
#t4-main-body .t4-col > #system-message-container:empty {
  display: none;
}

/* Geen extra witruimte boven de eerste en onder de laatste regel in een module */
#t4-main-body .t4-col .moduletable .custom > :first-child { margin-top: 0; }
#t4-main-body .t4-col .moduletable .custom > :last-child  { margin-bottom: 0; }