/* The site header: logo, the main links in the middle, sign in and create account on the right (from 768px).
   Below 768px the links fold behind a Menu button (a stand-in until the phone and tablet designs are done).
   site.js opens and closes the menu and the Shop list by toggling aria-expanded on their buttons. */

/* The header stays at the top of the screen while the page scrolls under it. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 2; /* above the page, the hero, the open menu and Shop list included */
  background-color: var(--c-page);
  border-bottom: var(--border-1) solid var(--c-line);
}

/* Links to a section (/#about) stop below the header instead of behind it. */
html {
  scroll-padding-top: var(--header-h);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  min-height: var(--header-h);
}

.site-header__home {
  display: block;
  color: var(--c-text);
  border-radius: var(--radius-1);
}

.logo {
  display: block;
  height: var(--logo-h);
  width: auto;
}

/* Phones: a hamburger icon only (its name, Menu, is read out by screen readers); signed in, the name chip sits before it.
   The hamburger and a cross sit on top of each other; when the menu opens the hamburger turns and fades
   out while the cross turns and fades in, and back again when it closes. */
.site-header__toggle {
  display: inline-grid;
  margin-left: auto;
  padding: var(--sp-2);
  font-size: var(--fs-h4);
  line-height: 1;
  border-radius: var(--radius-1);
}

/* Signed in, the name chip already pushes itself and the Menu button to the right. */
.account-menu + .site-header__toggle {
  margin-left: 0;
}

.site-header__toggle .bi {
  grid-area: 1 / 1;
  transition: opacity var(--duration-slow) var(--ease), rotate var(--duration-slow) var(--ease);
}

.site-header__toggle .bi-x-lg {
  opacity: 0;
  rotate: 90deg;
}

.site-header__toggle[aria-expanded="true"] .bi-list {
  opacity: 0;
  rotate: -90deg;
}

.site-header__toggle[aria-expanded="true"] .bi-x-lg {
  opacity: 1;
  rotate: 0deg;
}

@media (prefers-reduced-motion: reduce) {
  .site-header__toggle .bi {
    transition: none;
  }
}

.site-nav__links,
.site-nav__sub {
  display: grid;
  gap: var(--sp-1);
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding-block: var(--sp-2);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--c-text);
  text-decoration: none;
  border-radius: var(--radius-1);
  transition: color var(--duration-fast) var(--ease); /* the same fade as the buttons */
}

.site-nav__link:hover {
  color: var(--c-menu-link-hover);
}

.site-nav__link .bi {
  font-size: var(--fs-small);
  transition: transform var(--duration-fast) var(--ease);
}

.site-nav__link[aria-expanded="true"] .bi {
  transform: rotate(180deg);
}

.site-nav__sub {
  padding-left: var(--sp-4);
}

[aria-expanded="false"] + .site-nav__sub {
  display: none;
}

.site-nav__account {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
}

/* Phones: the menu slides down from under the header and fills the rest of the screen.
   It is hidden with visibility (not display), so the slide can run both ways and closed links can't be tabbed to. */
@media (max-width: 767.98px) {
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    display: grid;
    align-content: start;
    gap: var(--sp-6);
    padding: var(--sp-4) var(--sp-6) var(--sp-6);
    background-color: var(--c-page);
    clip-path: inset(0 0 100% 0); /* shows nothing; opening reveals it from the top down */
    visibility: hidden;
    transition: clip-path var(--duration-slow) var(--ease), visibility 0s var(--duration-slow);
  }

  .site-header__toggle[aria-expanded="true"] + .site-nav {
    clip-path: inset(0);
    visibility: visible;
    transition: clip-path var(--duration-slow) var(--ease);
  }
}

/* Phones, signed in: one menu. The name chip hides and its links sit at the bottom of the main menu,
   under a line (views/partials/account-links.php). From 768px the chip is back and these links hide. */
.site-nav__member {
  display: grid;
  gap: var(--sp-1);
  padding-top: var(--sp-4);
  border-top: var(--border-1) solid var(--c-line);
}

/* The button: the initials circle, full name with the email under it, the chevron on the right. */
.site-nav__who {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--sp-3);
  width: 100%;
  text-align: left;
}

/* Stretched to the height of the name and email together, and as wide as it is tall, so the row sits balanced. */
.site-nav__who .site-nav__avatar {
  flex-shrink: 0;
  align-self: stretch;
  justify-self: start;
  width: auto;
  height: auto;
  aspect-ratio: 1;
}


.site-nav__who .account-menu__who {
  min-width: 0; /* lets a long name or email stop with "…" */
  padding: 0;
  margin: 0;
  font-size: var(--fs-body);
  border: 0;
}

.site-nav__who .account-menu__who span {
  font-weight: 400;
}

/* The account pages, lined up on the left with the main links above and drawn like them. */
.site-nav__member .site-nav__sub {
  padding-left: 0;
}

.site-nav__member .account-menu__link {
  padding-inline: 0;
  font-weight: 500;
}

.site-nav__member .account-menu__link:hover,
.site-nav__member .account-menu__link[aria-current="page"] {
  background-color: transparent;
}

@media (max-width: 767.98px) {
  .site-header:not(.site-header--account) .account-menu {
    display: none;
  }

  .site-header:not(.site-header--account) .site-header__toggle {
    margin-left: auto;
  }
}

@media (min-width: 768px) {
  .site-nav__member {
    display: none;
  }
}

/* Phones on the member's account pages: the logo and the name chip only (its menu has Back to the website). */
@media (max-width: 767.98px) {
  .site-header--account .site-header__toggle,
  .site-header--account .site-nav {
    display: none;
  }
}

@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  .site-nav,
  .site-header__toggle[aria-expanded="true"] + .site-nav {
    transition: none;
  }
}

/* From 768px: everything on one line. */
@media (min-width: 768px) {
  .site-header__toggle {
    display: none;
  }

  .site-nav {
    display: flex;
    flex: 1;
    align-items: center;
    gap: var(--sp-8);
  }

  .site-nav__links {
    display: flex;
    gap: var(--sp-8);
    margin-inline: auto;
  }

  .site-nav__shop {
    position: relative;
  }

  .site-nav__sub {
    position: absolute;
    top: calc(100% + var(--sp-2));
    left: 0;
    min-width: var(--menu-w);
    padding: var(--sp-2) var(--sp-4);
    background-color: var(--c-page);
    border: var(--border-1) solid var(--c-line);
    border-radius: var(--radius-1);
    box-shadow: var(--shadow-1);
  }
}

/* Up to 991px the header uses the full screen width. */
@media (max-width: 991.98px) {
  .site-header__inner {
    max-width: none;
    padding-inline: var(--sp-6);
  }
}

/* 768 to 991px: closer gaps, and Create account as a plain link like Sign in, so the whole menu fits. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .site-nav,
  .site-nav__links {
    gap: var(--sp-5);
  }

  .site-nav__signup.button {
    min-height: 0;
    padding: var(--sp-2) 0;
    font-weight: 500;
    color: var(--c-text);
    background: none;
    border: 0;
    border-radius: var(--radius-1);
    box-shadow: none;
    transition: color var(--duration-fast) var(--ease);
  }

  .site-nav__signup.button:hover {
    color: var(--c-menu-link-hover);
  }

  /* A short line between Sign in and Create account, halfway across the gap. */
  .site-nav__signup.button {
    position: relative;
  }

  .site-nav__signup.button::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--sp-2) - var(--border-1) / 2);
    top: 50%;
    height: var(--fs-body);
    border-left: var(--border-1) solid var(--c-line);
    translate: 0 -50%;
  }
}