/*
 # -----------------------------------------------------------------------------
 #  ~/assets/themes/j1/modules/mmenu_light/css/theme/uno/mmenu.css
 #  Provides theme styles (Uno) for Mobile Menu light (v3.0.5)
 #
 #  Product/Info:
 #  https://jekyll.one
 #
 #  Copyright (C) 2023, 2024 Juergen Adams
 #
 #  J1 Template is licensed under the MIT License.
 #  See: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE.md
 # -----------------------------------------------------------------------------
*/

/*
  jadams, 2020-06-20: CSS/Offset to the NAV bar should be calculated
  at runtime as a dyn style
*/

/* CSS overwrites
   ----------------------------------------------------------------------------- */

/* Drawer */

.mm-ocd--left .mm-ocd__content {
  background-color: #212121;
}

.mm-ocd--right .mm-ocd__content {
  background-color: #212121;
}

/* Additional CSS styles for BS Theme Switcher
   ----------------------------------------------------------------------------- */
.mmenu-item.active, .mmenu-item:active {
    /* color: #fff; */
    text-decoration: none;
    background-color: #607d8b;
}

/* Navigator
   ----------------------------------------------------------------------------- */

.mm-spn li:after {
   border-top: 0 !important;
}

.mm-spn a:not(:last-child):after {
   border-right: 0 !important;
}

.mm-spn li:hover {
    background-color: #424242;
}

.mm-spn.mm-spn--navbar:after {
  text-align: left;  /* jadams, 2020-06-20: set menu title to the left */
  font-size: x-large; /* jadams, 2020-06-20: increase size of the menu title */
}

/* Themes */
/* jadams, 2020-06-20: set J1 Theme colors (dark theme) */
.mm-spn.mm-spn--dark {
  color: #e3e3e3;
  background: #000 !important;
}

.mm-spn ul {
  background: #000 !important;
}

/* Sidebar (Drawer)
   ----------------------------------------------------------------------------- */
.mm-side {
    margin: 1.5rem;
}

.mm-side .widget {
    position: relative;
    z-index: 1;
    margin-bottom: 25px
}

.mm-side .widget .title {
    color: #fff;
    margin-bottom: 15px;
    border-left: 3px solid #204a87;
    padding-left: 5px
}

.menu-title {
    margin-bottom: 1.5rem;
    font-size: 28px;
    color: #EEEEEE;
    border-bottom: 1px solid #757575;
}

.mm-side .widget .heading {
    text-align: left;
    color: #EEEEEE;
    font-size: 20px;
    text-transform: uppercase;
    position: relative;
    margin-bottom: 10px;
    padding-bottom: 10px
}

.mm-side .widget ul.link {
    font-family: Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;
    font-size: 14px;
    padding: 0;
    margin: 0;
    list-style: none;
    line-height: 1.5rem;
}

.mm-side .widget ul.link li a {
    color: #aaa
}

.mm-side .widget ul.link li a:focus,.mm-side .widget ul.link li a:hover {
    color: #fafafa;
    text-decoration: none;
    font-weight: 500;
}

/* Navigation (Menu)
   ----------------------------------------------------------------------------- */

.mm-spn a {
  color: #9e9e9e !important;
}

/* jadams, 2022-08-13: muted the anchor on hover, because (currently)
   NO action on click
*/
.mm-spn a:hover {
    color: #9e9e9e !important;
}

/* jadams, 2020-07-03: added hover to global style */
a.toc-link:hover {
    color: #fafafa;
    text-decoration: none;
    font-weight: 500;
}

/* Media breakpoints
   ----------------------------------------------------------------------------- */

/* BS@5
// -----------------------------------------------------------------------------
// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
// ----------------------------------------------
// @media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
// --------------------------------------
// @media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
// --------------------------------------
// @media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
// -----------------------------------------------
// @media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
// -------------------------------------------------
// @media (min-width: 1400px) { ... }
*/

/* jadams, 2020-07-02: media query for MMenu
--------------------------------------------------------------------------------
NOTE: For unknown reason, style "mm-ocd--left" is NOT applied correctly
      like "mm-ocd--right" what cause the wrong background-color
      As a workaround, the background-color is added to the media
      queries as well (but MUST be removed if fixed!!!)
-------------------------------------------------------------------------------- */

/* Desktop
   Large devices (desktops, 992px and up)
*/
@media only screen and (min-width: 992px) {
  /* .mm-ocd {
    top: 100px; /* drawer top offset to NAV bar */
  } */
  .mm-ocd__content {
      background-color: #000; /* black */
  }
}

/* Mobile
   Small devices (992px and below)
*/
@media only screen and (max-width: 992px) {
  .mm-ocd {
    top: 48px; /* drawer top offset to NAV bar */
  }
  .mm-ocd__content {
      background-color: #000; /* black */
  }
}