/*
  Global menu overlay.
  Keep overlay layout, menu typography, and CMS-driven menu states isolated here.
*/

@font-face {
  font-family: "Menu Gotham XLight";
  src:
    url("../fonts/Gotham-XLight.woff2") format("woff2"),
    url("../fonts/Gotham-XLight.woff") format("woff");
  font-display: swap;
  font-style: normal;
  font-weight: 200;
}

:root {
  --menu-overlay-bg: #151515;
  --menu-overlay-text: #cbcbcb;
  --menu-overlay-icon: #fff;
  --menu-overlay-hover: #c9a875;
  --menu-overlay-z: 10000;
  --menu-overlay-button-z: 10020;
  --menu-overlay-fade-duration: 0.3s;
  --menu-overlay-desktop-top-gap: 138px;
  --menu-overlay-desktop-bottom-gap: 118px;
  --menu-overlay-mobile-top-gap: 130px;
  --menu-overlay-mobile-bottom-gap: 100px;
}

.menu-overlay {
  position: fixed;
  z-index: var(--menu-overlay-z);
  inset: 0;
  display: block;
  min-width: var(--page-min, 0);
  background: var(--menu-overlay-bg);
  color: var(--menu-overlay-text);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--menu-overlay-fade-duration) ease-out,
    visibility 0s linear var(--menu-overlay-fade-duration);
}

.menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity var(--menu-overlay-fade-duration) ease-out,
    visibility 0s;
}

.menu-overlay__scroller {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.menu-overlay.is-scrollable .menu-overlay__scroller {
  overflow-y: auto;
}

.menu-overlay__logo {
  position: fixed;
  z-index: 1;
  top: 54px;
  left: 50%;
  display: block;
  width: var(--site-logo-width);
  height: var(--site-logo-height);
  transform: translateX(-50%);
}

.menu-overlay__logo img {
  width: 100%;
  height: 100%;
}

.menu-overlay__content {
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-height: 100%;
  padding: var(--menu-overlay-desktop-top-gap) 54px var(--menu-overlay-desktop-bottom-gap);
}

.menu-overlay__nav {
  width: 100%;
  max-width: 1400px;
  margin: auto 0;
  font-family: "Menu Gotham XLight", var(--site-font-body);
  font-size: 18px;
  font-style: normal;
  font-weight: 200;
  line-height: 32px;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
}

.menu-overlay__group + .menu-overlay__group {
  margin-top: 33px;
}

.menu-overlay__row {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.menu-overlay__link {
  display: inline-block;
  padding: 0;
  border: 0;
  color: var(--menu-overlay-text);
  text-decoration: none;
  transition: color 0.2s ease-out;
}

.menu-overlay__logo::before,
.menu-overlay__logo::after,
.menu-overlay__link::before,
.menu-overlay__link::after,
.menu-overlay__social-link::before,
.menu-overlay__social-link::after {
  display: none !important;
  content: none !important;
}

.menu-overlay__link:hover,
.menu-overlay__link:focus-visible {
  color: var(--menu-overlay-hover);
}

.menu-overlay__link:focus-visible,
.menu-overlay__social-link:focus-visible {
  outline: 1px solid var(--menu-overlay-hover);
  outline-offset: 8px;
}

.menu-overlay__separator {
  flex: 0 0 auto;
  width: auto;
  height: 16px;
  margin: 0 10px;
}

.menu-overlay__social-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 42px;
}

.menu-overlay__social-link {
  position: relative;
  display: block;
  width: 22px;
  height: 22px;
  color: var(--menu-overlay-icon);
  text-decoration: none;
}

.menu-overlay__social-icon {
  display: block;
  width: 100%;
  height: 100%;
  transition: opacity 0.2s ease-out;
}

.menu-overlay__social-icon--hover {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.menu-overlay__social-link:hover .menu-overlay__social-icon--default,
.menu-overlay__social-link:focus-visible .menu-overlay__social-icon--default {
  opacity: 0;
}

.menu-overlay__social-link:hover .menu-overlay__social-icon--hover,
.menu-overlay__social-link:focus-visible .menu-overlay__social-icon--hover {
  opacity: 1;
}

.site-menu-button.is-menu-overlay-active {
  position: fixed !important;
  z-index: var(--menu-overlay-button-z) !important;
  color: var(--menu-overlay-icon);
}

.site-menu-button.is-menu-overlay-active.site-menu-button--desktop-primary {
  top: var(--site-desktop-edge-gap) !important;
  right: var(--site-desktop-edge-gap) !important;
  bottom: auto !important;
  left: auto !important;
}

.site-menu-button.is-menu-overlay-active.site-menu-button--desktop-fixed {
  top: 28px !important;
  right: var(--site-desktop-edge-gap) !important;
  bottom: auto !important;
  left: auto !important;
}

.site-menu-button.is-menu-overlay-active.site-menu-button--mobile-primary {
  top: calc(var(--site-mobile-safe-top) + 37px) !important;
  right: 38px !important;
  bottom: auto !important;
  left: auto !important;
}

.site-menu-button.is-menu-overlay-active.site-menu-button--mobile-bottom {
  top: auto !important;
  right: 38px !important;
  bottom: calc(15px + env(safe-area-inset-bottom, 0px)) !important;
  left: auto !important;
}

body.is-menu-overlay-locked {
  overflow: hidden;
}

html.is-menu-overlay-locked {
  overflow: hidden;
}

body[data-menu-overlay-version="mobile"] .menu-overlay {
  min-width: 0;
}

body[data-menu-overlay-version="mobile"] .menu-overlay__logo {
  top: calc(env(safe-area-inset-top, 0px) + 38px);
}

body[data-menu-overlay-version="mobile"] .menu-overlay__content {
  padding: var(--menu-overlay-mobile-top-gap) 30px var(--menu-overlay-mobile-bottom-gap);
}

body[data-menu-overlay-version="mobile"] .menu-overlay__nav {
  line-height: 50px;
}

body[data-menu-overlay-version="mobile"] .menu-overlay__group + .menu-overlay__group {
  margin-top: 62px;
}

body[data-menu-overlay-version="mobile"] .menu-overlay__separator {
  margin: 0 13px;
}

body[data-menu-overlay-version="mobile"] .menu-overlay__social-row {
  gap: 70px;
}

@media (prefers-reduced-motion: reduce) {
  .menu-overlay,
  .menu-overlay__link,
  .menu-overlay__social-icon {
    transition: none;
  }
}