/*
 * header-fix.css — compact site header on phones and tablets (≤860px), on
 * every page: 56px instead of main.css's 80px (≤860px) / 74px (≤560px).
 *
 * Loaded after main.css on every front-end page. This is the single source of
 * the compact header (it previously lived in column-fix.css and pages-fix.css
 * for those pages only). --header-height also drives the opened menu's `top`
 * (main.css) and the column TOC heading scroll-margin (column-fix.css).
 * `body` is part of each selector so the rules outrank main.css's
 * single-class header selectors.
 */

@media (max-width: 860px) {
  body {
    --header-height: 56px;
  }

  body .site-header {
    height: var(--header-height);
    min-height: var(--header-height);
  }

  body .site-header__inner {
    height: 100%;
    min-height: 0;
  }

  body .site-header__logo {
    display: flex;
    align-items: center;
    justify-self: start;
    width: max-content;
  }

  body .site-header__logo img {
    width: auto;
    height: 24px;
  }

  /* 40×40 tap target with the three bars centred. */
  body .site-header__menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    justify-self: end;
    width: 40px;
    height: 40px;
    padding: 0 9px;
  }

  body .site-header__menu span {
    width: 100%;
    margin: 0;
  }
}