/* ========== Mobile menu — overlay ========== */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #094141;
  display: flex;
  flex-direction: column;
  padding: 13.5px 20px 20px;

  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0s;
}

/* ===== Header (close button) ===== */
.mobile-menu__header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 25px;
  margin-bottom: 56.5px;
}

.mobile-menu__close {
  width: 60px;
  height: 25px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 4px 8px rgba(3, 26, 26, 0.10));
  backdrop-filter: blur(7.5px);
}

.mobile-menu__close svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ===== Nav ===== */
.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.mobile-menu__nav-item {
  color: #ffffff;
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 120%;
  text-decoration: none;
  transition: color 0.15s ease;
}

.mobile-menu__nav-item:hover,
.mobile-menu__nav-item:active {
  color: #E2F397;
}

/* ===== Socials ===== */
.mobile-menu__socials {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}

.mobile-menu__social {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.mobile-menu__social:hover {
  transform: translateY(-2px);
}

.mobile-menu__social svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ===== Hide on desktop / tablet ===== */
@media (min-width: 1200px) {
  .mobile-menu { display: none; }
}