/* ===== SSG hoofdnavigatie = mockup ===== */
#site-navigation .primary-menu-container>ul.menu{gap:24px;align-items:center}
#site-navigation .primary-menu-container>ul>li>a{
  font-size:15px;font-weight:400;color:#1F2A37;padding:12px 0;line-height:1.5}
#site-navigation .primary-menu-container>ul>li>a:hover,
#site-navigation .primary-menu-container>ul>li:hover>a,
#site-navigation .primary-menu-container>ul>li>a:focus-visible{color:#C8441B}
/* "Over ons" grijs, zoals in de mockup */
#site-navigation .primary-menu-container>ul>li.menu-item-655>a{color:#767676}
/* geen chevrons in de mockup */
#site-navigation .dropdown-nav-toggle{display:none}

/* dropdownpaneel */
#site-navigation ul ul.sub-menu{
  min-width:300px;width:auto;left:-12px;right:auto;top:100%;
  background:#fff;border:1px solid #DADCE0;border-top:4px solid #767676;
  border-radius:0 0 8px 8px;box-shadow:0 14px 32px rgba(30,40,60,.16);
  padding:8px;box-sizing:border-box;z-index:40}
#site-navigation ul ul.sub-menu li{border:0}
#site-navigation ul ul.sub-menu li>a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 12px;border-radius:6px;font-size:15px;font-weight:400;
  color:#1F2A37;white-space:nowrap;background:transparent}
#site-navigation ul ul.sub-menu li>a:hover,
#site-navigation ul ul.sub-menu li>a:focus-visible{background:#F6F6F4;color:#C8441B}
/* openen ook met toetsenbord */
#site-navigation li.menu-item-has-children:focus-within>ul.sub-menu{
  display:block;opacity:1;visibility:visible;clip:auto;height:auto;overflow:visible}

/* bovenrand per pijler */
#site-navigation li.menu-item-650>ul.sub-menu{border-top-color:#637126} /* Mijn kind */
#site-navigation li.menu-item-654>ul.sub-menu{border-top-color:#767676} /* Mijn tiener */
#site-navigation li.menu-item-664>ul.sub-menu{border-top-color:#29518F} /* Voor mezelf */
#site-navigation li.menu-item-645>ul.sub-menu{border-top-color:#EC6438} /* Inspiratie */
#site-navigation li.menu-item-655>ul.sub-menu{border-top-color:#767676;left:auto;right:-12px} /* Over ons */

/* Contact-knop */
.site-header .header-button{padding:12px 24px;font-size:15px;font-weight:700;
  border:2px solid #29518F;color:#29518F;background:#fff;border-radius:6px}
.site-header .header-button:hover{filter:brightness(.92);background:#fff;color:#29518F}
/* paneel groeit mee met de langste tekst, wrapt vanaf 380px */
.header-navigation .header-menu-container ul ul.sub-menu,
#site-navigation ul ul.sub-menu{
  width:max-content !important;
  min-width:300px;
  max-width:380px;
}
#site-navigation ul ul.sub-menu li{width:100% !important;box-sizing:border-box}
#site-navigation ul ul.sub-menu li>a{
  width:100%;box-sizing:border-box;
  white-space:normal;          /* wrap als de tekst te lang is */
  line-height:1.4;
}