/*
 * De Hoeskamer theme: navigation base + responsive menu (replaces public/assets/css/nav.css for this site).
 * Copy of the engine file with the legacy breakpoint (the slicknav mobile menu of dehoeskamer.nl showed up to 720px =
 * 45em) and its look: a fixed olive bar (#86754d, black shadow) with the dark red "MENU" button on the right, the menu
 * items in bold white Open Sans on the olive bar, the current page in red. From 721px the blackboard buttons of
 * css/style.css are used. The markup contract of js/site.js stays: .nav > .menu-icon toggles ul.dropdown,
 * li.sub > a > div > span toggles ul.current.
 */
.nav { z-index: 999; }
.nav ul, .nav ol, .nav dl, .nav li { list-style: none; }
.menu-icon { display: none; }

ul.dropdown, ul.dropdown li, ul.dropdown ul { margin: 0; padding: 0; }
ul.dropdown { float: right; position: relative; }
ul.dropdown > li { margin-left: 5px; }
ul.dropdown li { float: left; vertical-align: middle; font-size: 16px; }
ul.dropdown a, ul.dropdown a:visited, ul.dropdown a:hover, ul.dropdown a:active { text-decoration: none; }
ul.dropdown a, ul.dropdown span { display: inline-block; outline: none; cursor: pointer; padding: 0 10px; }
ul.dropdown ul a, ul.dropdown ul span { padding: 10px; }
ul.dropdown li:hover, ul.dropdown li.hover { position: relative; cursor: pointer; }

/* level 1+ */
ul.dropdown ul { display: none; position: absolute; z-index: 598; width: 300px; top: 101%; left: 0; }
ul.dropdown li:hover > ul { display: block; box-shadow: 0 0 5px 0 rgba(0, 0, 0, .6); }
ul.dropdown ul li { font-size: 14px; float: none; width: 100%; font-weight: normal; text-transform: none; position: relative; }
ul.dropdown ul li a { font-size: 14px; }
ul.dropdown ul ul { top: 0; left: 100%; }
ul.dropdown li.divider { padding: 0 !important; margin: 0 !important; border: 0 !important; display: block; height: 49px; float: left; width: 1px; }
ul.dropdown li.rtl ul { position: absolute; top: 100%; right: 0; z-index: 598; left: auto; }
ul.dropdown li.rtl ul ul { top: 0; right: 100%; left: auto; }
ul.dropdown li.ltr ul, ul.dropdown li.ltr ul ul { top: 0; left: 100% !important; right: auto !important; }

/* theme colours (desktop sub menus are restyled in css/style.css) */
.blue-black, .blue-black ul.dropdown { background: transparent; }
.blue-black ul.dropdown ul { background: #fff; }
.blue-black ul.dropdown li { color: #fff; }
.blue-black ul.dropdown li:hover, .blue-black ul.dropdown li.hover { color: #fff; }
.blue-black ul.dropdown ul li a:hover { color: #fff; background: #7f0000; }
.blue-black ul.dropdown li.divider { background: #86754d; }

/* ---------- responsive menu: the legacy slicknav bar (<= 720px) ---------- */
@media screen and (max-width: 720px) {
  .nav.blue-black {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    max-height: 100vh;
    overflow-y: auto;
    padding: 5px;
    background: #86754d;
    box-shadow: 0 0 5px 0 #000;
    text-align: left;
  }
  .nav, ul.dropdown, .menu-icon, ul.dropdown * { box-sizing: border-box; }
  /* the "MENU" button (slicknav_btn): dark red, 4px radius, bold white label + three bars */
  .menu-icon {
    display: flex;
    align-items: center;
    float: right;
    margin: 5px 5px 6px;
    padding: 7px 10px;
    border-radius: 4px;
    background: #7f0000;
    color: #fff;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 19px;
    text-transform: uppercase;
    text-shadow: 0 1px 3px #000;
    cursor: pointer;
    user-select: none;
  }
  .menu-icon .hk-menu-text { font-family: inherit; }
  .menu-icon .hk-menu-bars { display: block; width: 18px; margin-left: 7px; }
  .menu-icon .hk-menu-bars i { display: block; height: 2px; border-radius: 1px; background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
  .menu-icon .hk-menu-bars i + i { margin-top: 3px; }
  .nav.blue-black::after { content: ""; display: table; clear: both; }
  ul.dropdown { display: none; clear: both; float: none; position: static; width: 100%; padding: 0; background: transparent !important; }
  ul.dropdown li { position: relative; float: none; display: block; margin: 0 0 10px; }
  ul.dropdown li a, ul.dropdown li a:visited {
    display: block;
    margin: 2px 5px;
    padding: 5px 10px;
    color: #fff;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
    text-shadow: none;
  }
  ul.dropdown li a > div { font-family: inherit; }
  ul.dropdown li a.active { color: #b30000 !important; text-shadow: 1px 1px 0 rgba(0, 0, 0, .5); }
  ul.dropdown li a:hover { background: rgba(255, 255, 255, .5); border-radius: 6px; color: #fff; }
  ul.dropdown ul a { padding-left: 25px; }
  ul.dropdown ul ul a { padding-left: 45px; }
  ul.dropdown *.sub { padding: 0 !important; background-image: none !important; }
  ul.dropdown ul { overflow: hidden; max-height: 0; width: auto; display: block; position: static; background: transparent !important; box-shadow: none !important; }
  ul.dropdown ul.current { display: block; max-height: 100em; }
  ul.dropdown li.sub > a { padding-right: 25px; }
  ul.dropdown li.sub > a > span, ul.dropdown li.sub > a.current > span { position: absolute; top: 0; right: 0; display: block; font-size: 1.5em; padding: 0 20px; }
  ul.dropdown li.rtl ul, ul.dropdown li.ltr ul, ul.dropdown li.ltr ul ul, ul.dropdown li.rtl ul ul { position: static; }
  ul.dropdown li.divider { display: none !important; }
  .nav ul, .nav ol, .nav dl, .nav li { list-style: none; }
  nav > div.usernav > ul.dropdown li a { font-weight: 400; }
}

/* hide the mobile toggle from 721px */
@media screen and (min-width: 721px) {
  ul.dropdown { display: flex !important; flex-wrap: wrap; justify-content: center; }
  ul.dropdown li.sub > a > span, ul.dropdown li.sub > a.current > span { display: none !important; }
}