/* ============================================================
   CCI — the WordPress admin bar
   ------------------------------------------------------------
   The design pins three things to the top of the viewport: the sticky header
   at `top:0`, the mobile drawer and the article's reading bar just under it at
   `top:var(--nav-h)`. None of them know about WordPress's admin bar, which is
   fixed over the top 32px for any logged-in visitor — so the header slides
   underneath it and the reading bar ends up inside the header rather than
   below it.

   Only logged-in users ever see this: WordPress puts .admin-bar on <body>
   exactly then, so every rule here is inert for real visitors. It loads
   globally because it is not one page's problem — the header is on all of them.

   The breakpoints are WordPress's own: the bar grows to 46px at 782px and
   stops being fixed at 600px, where it scrolls away with the page.
   ============================================================ */

.admin-bar .nav {
  top: 32px;
}
.admin-bar .reading {
  top: calc(var(--nav-h) + 32px);
}
.admin-bar .drawer {
  top: calc(var(--nav-h) + 32px);
}

@media screen and (max-width: 782px) {
  .admin-bar .nav {
    top: 46px;
  }
  .admin-bar .reading,
  .admin-bar .drawer {
    top: calc(var(--nav-h) + 46px);
  }
}

@media screen and (max-width: 600px) {
  /* WordPress stops pinning the admin bar here, so nothing needs offsetting. */
  .admin-bar .nav {
    top: 0;
  }
  .admin-bar .reading,
  .admin-bar .drawer {
    top: var(--nav-h);
  }
}