/* =========================================================
   Cassiopeia user.css – Nuborgh (topmenu + submenu + fonts)
   ========================================================= */

:root{
  --nb-purple:#302769;
  --nb-grey:#ede8d5;

  --cassiopeia-font-family-body:"Museo", Arial, sans-serif;
  --cassiopeia-font-family-headings:"Museo Slab", Georgia, serif;
}

/* Fonts (OTF lokaal)
   Pad: /media/templates/site/cassiopeia/fonts/ */
@font-face{
  font-family:"Museo";
  src:url("../fonts/Museo300-Regular.otf") format("opentype");
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Museo Slab";
  src:url("../fonts/Museo_Slab_1000.otf") format("opentype");
  font-weight:900;
  font-style:normal;
  font-display:swap;
}

/* Fonts sitebreed */
html, body{
  font-family: var(--cassiopeia-font-family-body) !important;
  font-weight: 300;
}
h1, h2, h3, h4, h5, h6,
.heading, .page-header, .page-title{
  font-family: var(--cassiopeia-font-family-headings) !important;
  font-weight: 900 !important;
}
h1, h2,
.page-title,
.page-header h1{
  color: var(--nb-purple) !important;
}

/* Topmenu */
.container-header .mod-menu > li > a,
.container-header .mod-menu .nav-link{
  font-family: var(--cassiopeia-font-family-headings) !important;
  font-weight: 900 !important;
  letter-spacing: 0.1em;
}

/* Submenu */
.container-header .dropdown-menu,
.container-header ul.mod-menu__sub{
  background-color: var(--nb-purple) !important;
  padding: 12px 16px !important;
}
.container-header .dropdown-menu a,
.container-header ul.mod-menu__sub a{
  color: var(--nb-grey) !important;
  font-weight: 300;
  padding: 6px 12px !important;
}
.container-header .dropdown-menu a:hover,
.container-header ul.mod-menu__sub a:hover{
  color: var(--nb-grey) !important;
  font-weight: 900 !important;
  background: rgba(255,255,255,.12) !important;
}
.container-header ul.mod-menu__sub .mod-menu__separator{
  color: var(--nb-grey) !important;
  font-weight: 900;
}

/* Mobiel menu knop */
.container-header .navbar-toggler{
  color: #fff;
  cursor: pointer;
  border: 1px solid #fff;
}

/* Content uitlijnen met topmenu */
.container-component{
  padding-left: 7px;
  padding-right: 7px;
}