/* ---- The site header ----------------------------------------------------

   Scoped to `.ep-header`, the class the header partial adds, so nothing
   here can reach the drawer, the footer, or the theme's own header rules.

   What it does:

     - the bar is one row: logo, top level menu, theme toggle, language
       switcher and search all sit on the same line. The theme puts the menu
       in a second row (`.md-tabs`), which is not rendered any more.
     - the logo is the official lockup, big enough to read, and it is never
       hidden - the theme hides the header logo below 1220px.
     - the sidebar starts under the bar, not under the bar plus the menu row
       the theme assumes.

   The wordmark is part of the logo image, so it is not repeated as text. */

.md-header.ep-header {
  --eph-bar-height: 64px;
  --eph-logo-height: 42px;
  --eph-menu-size: .68rem;
}

/* The bar --------------------------------------------------------------- */

.md-header.ep-header .md-header__inner {
  align-items: center;
  min-height: var(--eph-bar-height);
  padding: 0 .6rem;
}

/* The logo -------------------------------------------------------------- */

.md-header.ep-header .ep-header__logo {
  align-items: center;
  border-radius: .5rem;
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  margin: 0 .5rem 0 .1rem;
  padding: 0;
  transition: opacity .25s;
}

.md-header.ep-header .ep-header__logo img {
  display: block;
  height: var(--eph-logo-height);
  width: auto;
}

.md-header.ep-header .ep-header__logo:hover {
  opacity: .8;
}

/* The menu -------------------------------------------------------------- */

.md-header.ep-header .ep-header__menu {
  align-items: center;
  display: flex;
  /* The menu is never smaller than the items in it, and never scrolls: a
     scroll box here would cut the dropdowns off. */
  flex: 1 0 auto;
  list-style: none;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.md-header.ep-header .ep-header__item {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  position: relative;
}

.md-header.ep-header .ep-header__link {
  align-items: center;
  border-radius: .3rem;
  color: inherit;
  display: flex;
  font-size: var(--eph-menu-size);
  font-weight: 500;
  gap: .3rem;
  opacity: .78;
  padding: .28rem .4rem;
  transition: opacity .25s;
  white-space: nowrap;
}

.md-header.ep-header .ep-header__link:hover {
  opacity: 1;
}

.md-header.ep-header .ep-header__link svg {
  fill: currentcolor;
  flex: 0 0 auto;
  height: 1.15em;
  width: 1.15em;
}

.md-header.ep-header .ep-header__item--active .ep-header__link {
  font-weight: 700;
  opacity: 1;
}

/* The dropdown -----------------------------------------------------------

   A top level item that has pages under it opens a panel with them. The
   panel is built from the nav in `mkdocs.yml`, so it needs no configuration
   of its own. */

.md-header.ep-header .ep-header__caret {
  border-top: .25rem solid currentcolor;
  border-left: .22rem solid transparent;
  border-right: .22rem solid transparent;
  flex: 0 0 auto;
  margin-left: .1rem;
  opacity: .6;
  transition: transform .2s;
}

.md-header.ep-header .ep-header__submenu {
  background-color: var(--md-default-bg-color);
  border-radius: .3rem;
  box-shadow: var(--md-shadow-z3);
  color: var(--md-default-fg-color);
  column-gap: 1.4rem;
  columns: 2;
  display: none;
  left: 0;
  list-style: none;
  margin: 0;
  max-height: 70vh;
  max-width: 46rem;
  min-width: 15rem;
  overflow-y: auto;
  padding: .6rem .5rem .6rem .8rem;
  position: absolute;
  top: 100%;
  z-index: 5;
}

.md-header.ep-header .ep-header__item--has-children:hover .ep-header__submenu,
.md-header.ep-header .ep-header__item--has-children:focus-within .ep-header__submenu {
  display: block;
}

.md-header.ep-header .ep-header__item--has-children:hover .ep-header__caret {
  transform: rotate(180deg);
}

.md-header.ep-header .ep-header__submenu--nested {
  background-color: transparent;
  box-shadow: none;
  columns: 1;
  display: block;
  max-width: none;
  min-width: 0;
  padding: 0 0 0 .7rem;
  position: static;
}

.md-header.ep-header .ep-header__subitem {
  break-inside: avoid;
  margin: 0 0 .1rem;
}

.md-header.ep-header .ep-header__sublink {
  align-items: center;
  border-radius: .2rem;
  color: var(--md-default-fg-color);
  display: flex;
  font-size: .68rem;
  font-weight: 500;
  gap: .35rem;
  padding: .22rem .4rem;
  transition: background-color .2s, color .2s;
  white-space: nowrap;
}

/* The icon of the page the entry leads to, in the same spirit as the icons
   in the bar itself. */
.md-header.ep-header .ep-header__sublink svg {
  fill: currentcolor;
  flex: 0 0 auto;
  height: 1.1em;
  opacity: .65;
  width: 1.1em;
}

.md-header.ep-header .ep-header__sublink:hover {
  background-color: var(--md-accent-fg-color--transparent);
  color: var(--md-accent-fg-color);
}

.md-header.ep-header .ep-header__submenu--nested .ep-header__sublink {
  color: var(--md-default-fg-color--light);
  font-size: .64rem;
  font-weight: 400;
}

/* The controls on the right --------------------------------------------- */

.md-header.ep-header .ep-header__tools {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: .1rem;
  margin-left: auto;
}

.md-header.ep-header .md-header__option {
  flex: 0 0 auto;
}

/* The search -------------------------------------------------------------

   On a desktop the theme puts a search field in the bar, which takes up
   more room than it earns. Here the bar carries a search icon only, and
   clicking it opens the field over the page - the same thing a phone
   already does. */
.md-header.ep-header .md-header__button[for="__search"] {
  display: inline-block;
}

@media screen and (min-width: 60em) {
  .md-header.ep-header .md-search__inner {
    display: none;
  }

  [data-md-toggle="search"]:checked ~ .md-header.ep-header .md-search__inner {
    display: block;
    height: auto;
    padding: 0;
    position: fixed;
    right: .5rem;
    top: .5rem;
    width: 22rem;
    z-index: 5;
  }

  [data-md-toggle="search"]:checked ~ .md-header.ep-header .md-search__form {
    background-color: var(--md-default-bg-color);
    border-radius: .3rem;
    box-shadow: var(--md-shadow-z3);
    color: var(--md-default-fg-color);
    height: 2.4rem;
  }

  [data-md-toggle="search"]:checked ~ .md-header.ep-header .md-search__input {
    color: var(--md-default-fg-color);
    font-size: .9rem;
  }

  [data-md-toggle="search"]:checked ~ .md-header.ep-header .md-search__input::placeholder {
    color: var(--md-default-fg-color--light);
  }

  [data-md-toggle="search"]:checked ~ .md-header.ep-header .md-search__output {
    top: 2.4rem;
  }

  [data-md-toggle="search"]:checked ~ .md-header.ep-header .md-search__scrollwrap {
    width: 22rem;
  }

  /* The field opens with the arrow that closes it again - the magnifier is
     already in the bar. */
  .md-header.ep-header .md-search__icon[for="__search"] {
    pointer-events: auto;
  }

  .md-header.ep-header .md-search__icon[for="__search"] svg:first-child {
    display: none;
  }

  .md-header.ep-header .md-search__icon[for="__search"] svg:last-child {
    display: inline-block;
  }
}

/* The sidebar has to start under the bar, not under the bar plus the menu
   row the theme assumes. On a phone the sidebar is the drawer, which the
   theme makes full screen - the drawer is styled in `drawer.css`. */
@media screen and (min-width: 76.25em) {
  .md-header.ep-header ~ .md-container .md-sidebar {
    top: var(--eph-bar-height);
  }
}

/* Smaller screens -------------------------------------------------------- */

@media screen and (max-width: 76.234375em) {
  .md-header.ep-header {
    --eph-bar-height: 58px;
    --eph-logo-height: 40px;
  }

  /* Below this width there is no room for the menu in the bar - the drawer
     carries the navigation instead. */
  .md-header.ep-header .ep-header__menu {
    display: none;
  }

  /* The menu button comes first and the logo follows it - the theme's
     markup puts the logo ahead of the drawer toggle, which reads the wrong
     way round once the logo is actually visible. The negative orders keep
     both ahead of the icons, which sit at the default order of 0. */
  .md-header.ep-header .ep-header__logo {
    order: -1;
    margin-left: .3rem;
  }

  .md-header.ep-header label[for="__drawer"] {
    order: -2;
  }
}

@media screen and (max-width: 44.984375em) {
  .md-header.ep-header {
    --eph-bar-height: 54px;
    --eph-logo-height: 34px;
  }
}