/* ==========================================================================
   Foundryline — the phone header
   --------------------------------------------------------------------------
   THE BUG THIS FIXES

   The header had a hamburger button in the markup on every page, wired to
   JavaScript that opens and closes the navigation, and no CSS that ever
   showed it. `.nav-toggle` was `display: none` at every width with no media
   query to reveal it, and `.nav` was a horizontal flex row at every width with
   no media query to collapse it.

   So on a phone the header tried to fit the wordmark, six navigation links, the
   language button and a call to action into 390 pixels. The call to action was
   pushed off the right edge, which is what the screenshot showed: "Start a
   project" cut in half at the edge of the screen.

   The button existed, the script existed, and nobody had written the stylesheet
   that connects them.

   WHAT THIS DOES

   Below 860px the header becomes the two-element bar it was designed to be:
   the wordmark on the left, the button on the right. The navigation moves into
   a panel that drops below the header when the button is pressed.

   The call to action travels with the navigation, because it lives inside the
   <nav> element in the markup. That is why it vanishes from the bar on a phone
   and appears at the foot of the panel - which is where a thumb expects it
   anyway.
   ========================================================================== */

@media (max-width: 860px) {

  /* the bar itself */
  .site-head .wrap {
    height: auto;
    min-height: 60px;
    gap: 12px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .brand { font-size: 1.12rem; }

  /* the button that was never shown */
  .nav-toggle {
    display: flex;
    margin-left: auto;
    align-items: center;
    gap: 9px;
    padding: 0 15px;
    height: 42px;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--paper-3);
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.16s ease;
  }

  .nav-toggle:hover { background: var(--paper-2); }

  .nav-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  /* the two bars of the hamburger */
  .nav-toggle i {
    display: block;
    width: 15px;
    height: 11px;
    position: relative;
  }

  .nav-toggle i::before,
  .nav-toggle i::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.6px;
    background: var(--ink);
    transition: top 0.2s ease, transform 0.2s ease;
  }

  .nav-toggle i::before { top: 2px; }
  .nav-toggle i::after { top: 8px; }

  .nav-toggle[aria-expanded="true"] i::before {
    top: 5px;
    transform: rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"] i::after {
    top: 5px;
    transform: rotate(-45deg);
  }

  /* ------------------------------------------------------------------
     The panel
     ------------------------------------------------------------------
     Fixed rather than absolute so it does not add height to the header and
     shove the page down when it opens. It starts below the header and runs to
     the bottom of the screen, scrolling inside itself if the list is long.
     ------------------------------------------------------------------ */
  .nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    z-index: 59;
    display: block;
    margin: 0;
    padding: 12px 20px calc(28px + env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--paper);
    border-bottom: 1px solid var(--line);

    /* closed: invisible, out of the tab order, and not clickable */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.22s ease, transform 0.26s cubic-bezier(0.16, 0.84, 0.28, 1),
                visibility 0s linear 0.26s;
  }

  .nav.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.22s ease, transform 0.26s cubic-bezier(0.16, 0.84, 0.28, 1),
                visibility 0s;
  }

  /* a line under each link, because a thumb needs a row to aim at and a
     column of bare text gives it nothing */
  .nav .navlink {
    display: block;
    padding: 15px 2px;
    font-size: 1.02rem;
    border-bottom: 1px solid var(--line);
  }

  /* the last link keeps its rule only if nothing follows it */
  .nav .navlink:last-of-type { border-bottom: 0; }

  /* the language switcher becomes a full-width row rather than a floating
     dropdown, because a dropdown inside a dropdown is a bad time on a phone */
  .nav .lang {
    display: block;
    margin: 14px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--line);
  }

  .nav .lang-btn {
    width: 100%;
    justify-content: flex-start;
    min-height: 46px;
  }

  .nav .lang-menu {
    position: static;
    display: block;
    box-shadow: none;
    border: 0;
    padding: 4px 0 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }

  .nav .lang-menu a,
  .nav .lang-menu .lang-current {
    min-height: 46px;
    padding: 13px 10px;
  }

  /* the note about currency belongs where the prices are, not in a menu */
  .nav .lang-note { display: none; }

  /* the call to action, which travels with the navigation */
  .nav > .btn {
    display: flex;
    width: 100%;
    margin-top: 18px;
    min-height: 50px;
    justify-content: center;
  }

  /* ------------------------------------------------------------------
     The dimmed page behind the panel
     ------------------------------------------------------------------ */
  .nav-backdrop {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 58;
    background: rgba(14, 14, 17, 0.34);
    opacity: 0;
    transition: opacity 0.22s ease;
  }

  .nav-backdrop.on { opacity: 1; }
}

/* above the breakpoint none of this applies */
@media (min-width: 861px) {
  .nav-backdrop { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav,
  .nav-backdrop,
  .nav-toggle i::before,
  .nav-toggle i::after {
    transition: none !important;
  }
  .nav { transform: none; }
}