/* Ubunye Engine — docs theme overrides */

:root {
  /* The header grows to fit the logo; the drawer and the sticky table of
     contents both need to know how tall it ended up. */
  --ubunye-logo-size: 4em;
  --ubunye-header-height: 5.2rem;
  --ubunye-drawer-width: 14rem;
}

/* ---------------------------------------------------------------------------
   Logo
   Material's default header logo is 1.2rem — an unreadable speck.
   --------------------------------------------------------------------------- */

/* `em` inside the header resolves against Material's small button font-size, so
   a bare `4em` would land at ~40px — smaller than the default. Pin the font-size
   to 1rem first, so 4em means four root units (80px) and not four of whatever
   the theme happened to inherit. */
.md-header__button.md-logo {
  font-size: 1rem;
  padding: 0.3rem;
  margin-right: 0.2rem;
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: var(--ubunye-logo-size);
  width: auto;
}

/* Material hides the header logo on mobile and shows it in the drawer's title
   bar instead — size that one too, or the logo shrinks on the small screens. */
.md-nav__title .md-nav__button.md-logo {
  font-size: 1rem;
}

.md-nav__title .md-nav__button.md-logo img,
.md-nav__title .md-nav__button.md-logo svg {
  height: var(--ubunye-logo-size);
  width: auto;
}

/* A taller logo means a taller header. Everything Material anchors to the
   header (sticky sidebars, the ToC) has to move down with it. */
.md-header__inner {
  min-height: var(--ubunye-header-height);
}

/* ---------------------------------------------------------------------------
   Hamburger navigation on desktop
   Material only offers the drawer below 76.25em; above that it renders a
   permanent sidebar and hides the hamburger. The drawer markup (the __drawer
   checkbox, the overlay label, the sidebar) is present at every viewport
   though — it is only CSS that hides it. So the whole thing can be promoted to
   desktop by re-styling, with no template overrides and no JS.
   --------------------------------------------------------------------------- */

@media screen and (min-width: 76.25em) {
  /* 1. Bring the hamburger back. */
  .md-header__button.md-icon[for="__drawer"] {
    display: inline-block;
  }

  /* 2. Take the primary sidebar out of the layout flow and park it off-canvas. */
  .md-sidebar--primary {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--ubunye-drawer-width);
    height: 100%;
    margin-left: calc(-1 * var(--ubunye-drawer-width));
    padding: 0;
    z-index: 5;
    background-color: var(--md-default-bg-color);
    transform: translateX(0);
    transition:
      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      box-shadow 0.25s;
  }

  /* 3. Slide it in when the hamburger is checked. */
  [data-md-toggle="drawer"]:checked ~ .md-container .md-sidebar--primary {
    transform: translateX(var(--ubunye-drawer-width));
    box-shadow:
      0 8px 10px rgba(0, 0, 0, 0.2),
      0 6px 30px rgba(0, 0, 0, 0.12);
  }

  .md-sidebar--primary .md-sidebar__scrollwrap {
    margin: 0;
    overflow-y: auto;
    height: 100%;
  }

  .md-sidebar--primary .md-sidebar__inner {
    padding: 0.6rem 0.8rem;
  }

  /* 4. Content reclaims the space the permanent sidebar used to take. */
  [dir="ltr"] .md-sidebar--primary:not([hidden]) ~ .md-content > .md-content__inner {
    margin-left: 0;
  }

  /* 5. Dim the page behind the open drawer. The overlay label already exists;
        Material just never styles it at this width. */
  .md-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    z-index: 4;
    background-color: rgba(0, 0, 0, 0.54);
    opacity: 0;
    transition:
      width 0s 0.25s,
      height 0s 0.25s,
      opacity 0.25s;
  }

  [data-md-toggle="drawer"]:checked ~ .md-overlay {
    width: 100%;
    height: 100%;
    opacity: 1;
    transition:
      width 0s,
      height 0s,
      opacity 0.25s;
  }

  /* 6. The table of contents stays put, but must clear the taller header. */
  .md-sidebar--secondary {
    top: var(--ubunye-header-height);
  }
}

/* ---------------------------------------------------------------------------
   Collapsible sections
   navigation.tabs / .sections / .expand are off in mkdocs.yml, so Material's
   default collapsing applies. These only make the affordance legible.
   --------------------------------------------------------------------------- */

.md-nav__item--nested > .md-nav__link {
  font-weight: 600;
}

.md-nav__icon {
  opacity: 0.85;
}