/* ---- The drawer ---------------------------------------------------------

   The navigation drawer - the sidebar as it behaves on a phone, where it
   slides in over the page.

   What it does:

     - the drawer covers the whole screen, so nothing of it is cut off at
       the bottom of the window.
     - the title of the drawer is the logo alone. The wordmark is part of
       the logo image, so the name of the site is not repeated as text.
     - the title of a panel - the bar at the top of a sub menu - is one
       line: the arrow that goes back, and the name of the panel next to
       it. The theme makes it a tall block with the arrow in the corner,
       which leaves the arrow on a line of its own.
     - every list scrolls on its own, so a long menu can always be
       reached.

   The colours come from the theme; the drawer adds no colours of its
   own. */

.md-sidebar--primary {
  --epd-gutter: .8rem;
}

/* ---- The levels of the menu -----------------------------------------------

   The theme renders every level of the navigation at the same indent: the
   children of a section - "Επισκόπηση" and "ePay Paycenter για το
   WooCommerce" under "Plugins & Extensions" - sit exactly where the
   top level entries sit, so a sub-page looks like a top level page.

   On a wide screen the whole tree is in one column, so here every level is
   pushed one step to the right of its parent and the tree can be read as a
   tree. The indent compounds: a child of a child ends up two steps in.

   On a phone the theme opens a section in its own panel, whose title says
   which section you are in - the level is obvious there, and the extra
   indent would only push the text off the screen. So the rules below are
   for the wide layout only. */
@media screen and (min-width: 76.25em) {

  /* The theme pulls the nested list back to the left with a negative
     margin to undo the padding of the list above it. That is what makes
     the levels line up, so the margin has to go for the indent to show. */
  .md-sidebar--primary .md-nav__list > .md-nav__item > .md-nav:not(.md-nav--secondary) {
    margin-left: 0;
    margin-right: 0;
  }

  .md-sidebar--primary .md-nav__list > .md-nav__item > .md-nav:not(.md-nav--secondary) > .md-nav__list {
    padding-left: 1.1rem;
  }

  /* A thin rule marks where the children of a section start. It is drawn
     on each child separately, so it reads as a branch and not as one long
     line down the whole menu. */
  .md-sidebar--primary .md-nav__list > .md-nav__item > .md-nav:not(.md-nav--secondary) > .md-nav__list > .md-nav__item {
    border-left: 1px solid var(--md-default-fg-color--lighter);
    padding-left: .5rem;
  }
}

@media screen and (max-width: 76.234375em) {

  /* The drawer is full screen. The theme already does this, but the header
     stylesheet used to push the sidebar down by the height of the bar,
     which cut off the bottom of the drawer. */
  .md-header.ep-header ~ .md-container .md-sidebar--primary {
    top: 0;
    height: 100%;
  }

  /* The title of the drawer: the logo, and nothing else. */
  .md-sidebar--primary .md-nav__title[for="__drawer"] {
    align-items: center;
    display: flex;
    height: auto;
    line-height: 1.5;
    padding: .5rem var(--epd-gutter);
  }

  .md-sidebar--primary .md-nav__title[for="__drawer"] .md-logo {
    left: auto;
    margin: 0;
    padding: 0;
    position: static;
    right: auto;
    top: auto;
  }

  .md-sidebar--primary .md-nav__title .ep-nav__sitename {
    display: none;
  }

  /* The title of a panel: the back arrow and the name of the panel on one
     line. */
  .md-sidebar--primary .md-nav__item--nested > .md-nav > .md-nav__title {
    align-items: center;
    display: flex;
    gap: .35rem;
    height: auto;
    line-height: 1.5;
    padding: .5rem var(--epd-gutter);
  }

  .md-sidebar--primary .md-nav__item--nested > .md-nav > .md-nav__title .md-nav__icon {
    flex: 0 0 auto;
    margin: 0;
    position: static;
  }

  /* Every list in the drawer scrolls on its own, so a long menu - or a
     panel with a long list in it - can always be reached. */
  .md-sidebar--primary .md-nav__list {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}