/*
 * Additions on top of the original Typedream stylesheet (site.css).
 * Kept separate so site.css stays a byte-faithful copy of what the old host served.
 *
 * Scope: the mobile navigation panel. The original stylesheet hides the link row
 * below 1024px and expects JavaScript to present it; js/site.js adds .bt-nav-open
 * and these rules give that state its appearance.
 */

@media only screen and (max-width: 1023px) {
  /* the link row, when the hamburger has opened it, drops below the bar */
  #td-navbar .bt-nav-links.bt-nav-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 8px 16px 16px;
    gap: 4px;
    background-color: var(--background);
    border-top: 1px solid var(--border-modal, rgba(0, 0, 0, 0.08));
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
    max-height: calc(100vh - 60px);
    overflow-y: auto;
  }

  #td-navbar .bt-nav-links.bt-nav-open > div {
    width: 100%;
  }

  #td-navbar .bt-nav-links.bt-nav-open a {
    display: block;
    width: 100%;
    padding: 10px 4px;
    font-size: 18px;
  }

  /* animate the hamburger into a close icon while the panel is open */
  #td-navbar [aria-expanded="true"] ._1fk5aj5b:first-child {
    top: 50%;
    transform: rotate(45deg);
  }

  #td-navbar [aria-expanded="true"] ._1fk5aj5b:nth-child(2) {
    opacity: 0;
  }

  #td-navbar [aria-expanded="true"] ._1fk5aj5b:nth-child(3) {
    top: 50%;
    transform: rotate(-45deg);
  }

  #td-navbar ._1fk5aj5b {
    transition: transform 0.18s ease, opacity 0.18s ease, top 0.18s ease;
  }

  /* stop the page behind the open panel from scrolling */
  body.bt-nav-locked {
    overflow: hidden;
  }
}