/* =========================================
   MOBILE MENU — BRISTLE SYSTEM
========================================= */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  pointer-events: none;
}

.mobile-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--glass-dark);
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-smooth);
}

.mobile-menu.is-open {
  pointer-events: auto;
}

.mobile-menu.is-open::before {
  opacity: 1;
}

.mobile-menu__panel {
  position: absolute;
  inset: 0 auto 0 0;
  width: min(100%, var(--mobile-panel-width));
  background: var(--glass-dark);
  backdrop-filter: var(--backdrop-blur-lg);
  -webkit-backdrop-filter: var(--backdrop-blur-lg);
  color: var(--color-text-inverse);
  transform: translateX(-100%);
  transition: transform var(--duration-slow) var(--ease-smooth);
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}

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

/* ================= HEADER ================= */

.mobile-menu__chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-height-mobile);
  padding: var(--space-5) var(--space-4) var(--space-0);
}

.mobile-panel-nav,
.mobile-panel-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--mobile-menu-icon-button-size);
  height: var(--mobile-menu-icon-button-size);
  border: var(--border-0);
  background: transparent;
  color: var(--color-text-inverse);
  cursor: pointer;
  opacity: var(--opacity-soft);
  padding: var(--space-0);
  transition: opacity var(--duration-normal) var(--ease-smooth);
}

.mobile-panel-nav:hover,
.mobile-panel-close:hover {
  opacity: var(--opacity-disabled);
}

.mobile-panel-nav svg {
  width: var(--mobile-menu-arrow-size);
  height: var(--mobile-menu-arrow-size);
}

.mobile-panel-close svg {
  width: var(--mobile-menu-close-size);
  height: var(--mobile-menu-close-size);
  color: var(--color-text-inverse);
}

/* ================= BACK BUTTON ================= */

.mobile-panel-nav--back {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateX(calc(var(--space-2) * -1));
}

.mobile-menu.is-submenu .mobile-panel-nav--back {
  visibility: visible;
  opacity: var(--opacity-soft);
  pointer-events: auto;
}

/* ================= VIEWPORT ================= */

.mobile-menu__viewport {
  position: relative;
  overflow: hidden;
  min-height: var(--space-0);
}

.mobile-menu__track {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ================= SCREEN ================= */

.mobile-menu__screen {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: var(--space-3) var(--space-4) var(--space-6);
  opacity: 0;
  transform: translateX(100%);
  pointer-events: none;
  transition:
    transform var(--duration-slow) var(--ease-smooth),
    opacity var(--duration-normal) var(--ease-smooth);
}

.mobile-menu__screen.is-active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.mobile-menu__screen.is-leaving-left {
  opacity: 0;
  transform: translateX(-20%);
}

.mobile-menu__screen.is-leaving-right {
  opacity: 0;
  transform: translateX(100%);
}

/* ================= MAIN NAV ================= */

.mobile-menu__main {
  display: grid;
  align-content: start;
}

.mobile-menu__nav-item,
.mobile-menu__sub-link,
.mobile-menu__footer-link,
.mobile-menu__footer-label {
  font-size: var(--text-fluid-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.mobile-menu__nav-item,
.mobile-menu__sub-link {
  min-height: var(--mobile-menu-row-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  border: var(--border-0);
  border-bottom: var(--border-1) solid var(--color-white-hover);
  background: transparent;
  color: var(--color-text-inverse);
  padding: var(--space-0);
  padding-top: var(--mobile-menu-row-padding-y);
  padding-bottom: var(--mobile-menu-row-padding-y);
  cursor: pointer;
  opacity: var(--opacity-header-link);
  text-align: left;
  transition: opacity var(--duration-normal) var(--ease-smooth);
}

.mobile-menu__nav-item:hover,
.mobile-menu__sub-link:hover,
.mobile-menu__footer-link:hover {
  opacity: var(--opacity-disabled);
}

.mobile-menu__nav-item svg,
.mobile-menu__footer-link--button svg {
  width: var(--mobile-menu-arrow-size);
  height: var(--mobile-menu-arrow-size);
  flex: 0 0 auto;
}

.mobile-menu__sub-link {
  justify-content: flex-start;
}

/* ================= BRAND / SOCIAL ICON ================= */

.mobile-menu__brand-icon,
.mobile-menu__sub-link--social img {
  width: var(--mobile-menu-media-icon-size);
  height: var(--mobile-menu-media-icon-size);
  flex: 0 0 var(--mobile-menu-media-icon-size);
}

.mobile-menu__brand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white-hover);
}

.mobile-menu__brand-icon img {
  max-width: var(--mobile-menu-brand-logo-max);
  max-height: var(--mobile-menu-brand-logo-max);
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: var(--opacity-soft);
}

.mobile-menu__sub-link--social {
  gap: var(--space-4);
}

.mobile-menu__sub-link--social img {
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: var(--opacity-soft);
}

/* ================= FOOTER ================= */

.mobile-menu__footer {
  display: grid;
  gap: var(--space-4);
  padding-top: var(--space-6);
  margin-top: var(--space-6);
}

.mobile-menu__footer-group {
  display: grid;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: var(--border-1) solid var(--color-white-hover);
}

.mobile-menu__footer-link {
  color: var(--color-text-inverse);
  opacity: var(--opacity-header-link);
  transition: opacity var(--duration-normal) var(--ease-smooth);
}

/* ================= LANGUAGE ================= */

.mobile-menu__language {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.mobile-menu__language-options {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
}

.mobile-menu__language-sep {
  color: var(--color-text-inverse);
  opacity: var(--opacity-subtle);
  font-size: var(--text-fluid-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wider);
}

.mobile-menu__footer-label {
  display: block;
  color: var(--color-text-inverse);
}

.mobile-menu__footer-link.is-active {
  color: var(--color-accent-soft);
  opacity: 1;
  font-weight: var(--font-weight-semi-bold);
}

.mobile-menu__footer-link:not(.is-active):hover {
  opacity: var(--opacity-disabled);
}

/* ================= FOOTER BUTTON ================= */

.mobile-menu__footer-link--button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: var(--border-0);
  background: transparent;
  padding: var(--space-0);
  text-align: left;
  cursor: pointer;
}

/* =========================================
   RESPONSIVE
========================================= */

@media (min-width: 769px) {
  .mobile-menu {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .mobile-menu__panel {
    width: 100%;
  }
}