/* Header: the original floating header (a frosted-glass pill over the page).
   It takes no space of its own, so --nav-h (used by service-categories.css to
   fit one service per screen) is 0. Loaded on every page. */
:root { --nav-h: 0px; }

/* Phone header: the frosted pill from the laptop / tablet header.
   On phones (620px and below) the bundled CSS turned the header bar off, so
   once the page scrolled the logo floated straight over photos and text and
   became hard to read. Now, as on tablets, the scrolled header sits on the
   same frosted-glass pill: a light frosted bar over dark sections, and the
   stronger white one over light sections (where the logo turns black). The
   round menu button sits at the pill's right end. */
@media (max-width: 620px) {
  /* the logo's inset from the pill edge applies before and after scrolling
     and over dark and light sections alike (as on tablets and laptops), so
     the logo never jumps sideways. Listed for every state because the
     bundled phone CSS zeroes the padding with these same selectors. */
  .nav,
  .nav.nav--scrolled,
  .nav.nav--scrolled.nav--on-light {
    padding-left: 14px;
  }
  .nav.nav--scrolled {
    border-radius: var(--r-pill);
    background: #ffffff1a;
    border-color: #ffffff29;
    box-shadow: inset 0 1px #ffffff1f, 0 10px 34px #0208282e;
    -webkit-backdrop-filter: blur(22px) saturate(165%);
    backdrop-filter: blur(22px) saturate(165%);
  }
  .nav.nav--scrolled.nav--on-light {
    background: #ffffff9e;
    border-color: #0b0b1214;
    box-shadow: inset 0 1px #fff9, 0 10px 34px #080c281a;
  }

  /* the round menu (+) button: smaller than the 48px pill so it sits inside
     it with a little room around it, rather than filling the whole bar.
     Only the button shrinks; --fab-size still sets the pill's height. */
  .nav .fab {
    width: 38px;
    height: 38px;
    margin-top: -19px;
    right: 5px;
  }
}

/* Phone menu order: Home, Work, Services, About, Contact (matching the
   laptop / tablet icon bar). --i is each button's slot in the fan; the
   bundled CSS had Services before Work. The list order in the HTML matches. */
.fab__item--home { --i: 0; }
.fab__item--briefcase { --i: 1; }
.fab__item--layers { --i: 2; }
.fab__item--person { --i: 3; }
.fab__item--mail { --i: 4; }