/* =========================================================
   MENU MOBILNE (projekt z docs/design/mockups/home.html, wdrożony 2026-10-01)

   Jedno miejsce dla wszystkich stron, łącznie z home (home.css nie importuje base.css) --
   ładowane w shell.html.twig PO {% block stylesheet %}, żeby reguły @media wygrały z
   bazowym `.main-nav { display: flex }`. Wcześniej każdy plik strony osobno ukrywał
   .main-nav na mobile (przy 700 albo 800px) i niczego nie pokazywał w zamian.

   Breakpoint 900px: pełny nagłówek desktopowy (logo + 5 linków + Search/Contact us)
   potrzebuje ok. 850-930px. Poniżej -- przycisk "Menu"; "Contact us" przechodzi do
   nakładki (logo + Search + Contact us + Menu nie mieszczą się na telefonie).
========================================================= */

.menu-toggle {
  display: none;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 110px 24px 30px;
  background: var(--ivory);
  color: var(--dark);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 350ms ease, transform 350ms ease, visibility 350ms;
}

.mobile-menu.open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.mobile-nav {
  display: grid;
  gap: 18px;
}

.mobile-nav a {
  font-family: var(--serif);
  font-size: clamp(34px, 10vw, 46px);
  line-height: 1;
}

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

.mobile-menu-close {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}

@media (max-width: 1100px) {
  .main-nav {
    gap: 18px;
  }
}

@media (max-width: 900px) {
  .main-nav,
  .header-actions .header-contact {
    display: none;
  }

  .header-actions {
    margin-left: auto;
  }

  .menu-toggle {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu {
    transition: none;
  }
}