/* p-menus.css                                              10 February 2020  */
/*        section 5 of useful.css

/* Required global custom properties (variables):
    --spacing           - default margin / padding
    --menu-offset-v     - sub-menu vertical offset  
    --menu-offset-h     - sub-menu horizontal offset  
    --fa-chevron-lt     - fontawesome icon
    --fa-chevron-rt     - fontawesome icon
    --fa-chevron-up     - fontawesome icon
    --fa-chevron-dn     - fontawesome icon

/* -------------------------------------------------------------------------- */
/* Styles common to both vertical and horizontal menus                        */

.menu-v ul,
.menu-h ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu-v a,
.menu-h a {
  display: block;
  text-decoration: none;
  cursor: pointer;                    /* so that a.drop-btn doesn't need href */
}
.menu-v a::after,
.menu-h a::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  --pointer-dn: var(--fa-chevron-dn);                     /* default pointers */
  --pointer-up: var(--fa-chevron-up);
}

/* -------------------------------------------------------------------------- */
/* .menu-v  -  vertical accordion-style menu                                  */
/*             a.drop-btn req'd to pre-set drops (jscript) when page loads    */

.menu-v li ul { display: none; }
.menu-v a.drop-btn::after {
  float: right;                       /* assumes fixed width & no wrapping !! */
  padding-left: var(--spacing);
  content: var(--pointer-dn);
}
.menu-v a.dropped::after { 
  content: var(--pointer-up);
}
.menu-v a.dropped ~ ul {
  display: block;
}

/* -------------------------------------------------------------------------- */
/* .menu-h  -  horizontal menu  -  uses flexboxes for top level               */

.menu-h { display: table; }                              /* to allow centring */
.menu-h ul {                               /* first level only uses flex mode */
  display: flex;
  flex-wrap: wrap-reverse;
}  
.menu-h a { white-space: nowrap; }
/* allow for multi-level  dropdowns                                           */
.menu-h ul ul {
  display: none;                               /* hide submenus until hovered */
  position: absolute;
  top: 100%;                               /* first level submenu drops below */
  z-index: 20;                                       /* ensure it sits on top */
}
.menu-h ul ul li { margin: 0; }                    /* no margins on sub-menus */
.menu-h ul ul ul { z-index: 30; }
.menu-h ul ul ul ul { z-index: 40; }
.menu-h li { position: relative; }
.menu-h li:hover > ul {display: block;}
.menu-h a:not(:only-child)::after {               /* set up drop-down pointer */
  padding-left: var(--spacing);
  content: var(--pointer-dn);
}
.menu-h ul ul ul {                  /* offset 2nd level drops for readability */
  margin-left: var(--menu-offset-h);
  top: var(--menu-offset-v);
}
/* If dropdowns are near RH side of window, extend to the left                */
.menu-h li.flyleft ul {                                 /* 1st level dropdown */
  left: auto;
  right: 0;
}
.menu-h li.flyleft ul ul {                        /* offset subsequent levels */
  margin-left: 0;
  margin-right: var(--menu-offset-h);
}