/* Freeze whichever element is the scroll container. overflow: hidden keeps the
   current scroll position and, unlike overflow: scroll, never rubber-bands on
   macOS trackpads. Applied to both because overflow-x: hidden on the globals
   turns html AND body into scrollers. overscroll-behavior stops the browser's
   native bounce gesture, which would otherwise drag the fixed drawer along
   with it and briefly reveal whatever is behind it. */
html.menu-open,
body.menu-open {
  overflow: hidden;
  overscroll-behavior: none;
}

.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 20px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
}

.hamburger span {
  width: 100%;
  height: 3px;
  background-color: #1a1a1a;
  transition: all 0.3s ease;
  position: absolute;
  border-radius: 2px;
}

.hamburger span:nth-child(1) {
  top: 0;
}

.hamburger span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}

.hamburger span:nth-child(3) {
  bottom: 0;
}

.hamburger.open span:nth-child(1) {
  transform: rotate(45deg);
  top: 50%;
}

.hamburger.open span:nth-child(2) {
  opacity: 0;
}

.hamburger.open span:nth-child(3) {
  transform: rotate(-45deg);
  top: 50%;
}

.mobile-menu {
  position: fixed;
  /* --header-height is measured in mobile-menu.js, re-synced every time the
     drawer opens. Below the 600px breakpoint .header-links wraps onto
     several lines with no fixed height, so this can't be a hardcoded CSS
     value — it has to be measured. The header is sticky (header.css), so
     the measurement stays valid even if the page was scrolled before the
     drawer opened. */
  top: var(--header-height, 118px);
  bottom: 0;
  /* Pinned to the true screen edge, not the header's centered-container
     margin. The closed state works by translateX(100%) — 100% of the
     drawer's own width — which only clears the screen if the drawer starts
     flush with the real edge. Insetting "right" to match the header's
     margin (for alignment on wide/zoomed-out viewports) broke that once the
     margin grew larger than the drawer's width: the "closed" drawer ended
     up back inside the viewport instead of off-screen. Functioning hide/show
     takes priority over pixel-perfect alignment with the header at extreme
     zoom levels. */
  right: 0;
  width: 75vw;
  max-width: 360px;
  background: #f5f4ef;
  padding: 50px 1.5rem 2rem;
  box-sizing: border-box;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  border-left: 1px solid #1a1a1a;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Kept on the base rule (not just .open) so the stacking order doesn't
     drop mid-transition when .open is removed to close it. */
  z-index: 101;
}

.mobile-menu.open {
  transform: translateX(0);
}

.mobile-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.mobile-menu li {
  display: flex;
  justify-content: flex-end;
}

.mobile-menu a {
  text-decoration: none;
  color: #1a1a1a;
  font-weight: bold;
  font-size: 15px;
  display: inline-block;
  text-align: right;
}

.mobile-menu a:hover {
  color: #45698c;
}

.menu-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 1.25rem 0 0;
  padding: 1.25rem 0;
  border-top: 1px solid rgba(26, 26, 26, 0.15);
}

.menu-social a {
  width: 25%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.menu-social a:hover {
  text-decoration: none;
}

.menu-social img {
  width: 26px;
  height: 26px;
  /* See footer.css's .footer-social img for why this is explicit. */
  box-sizing: content-box;
  object-fit: contain;
  padding: 6px;
  border: 2px solid transparent;
  border-radius: 5px;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.menu-social img:hover {
  background-color: rgba(26, 26, 26, 0.08);
  border-color: #1a1a1a;
}

.menu-about {
  padding: 1.25rem 0;
  border-top: 1px solid rgba(26, 26, 26, 0.15);
}

.menu-about-logo {
  width: 125px;
  height: auto;
  object-fit: contain;
}

.menu-about-blurb {
  color: #444;
  font-size: 11px;
  line-height: 1.65;
  margin: 1rem 0;
}

.menu-about-contact {
  display: block;
  color: #1a1a1a;
  text-decoration: none;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.05em;
}

.menu-about-contact:hover {
  text-decoration: underline;
}