/* =========================================================
   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;
  /* z listą kategorii nakładka bywa wyższa niż niski ekran telefonu */
  overflow-y: auto;
  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;
  }
}

/* Lista kategorii pod "Collections" (_main_nav.html.twig). Tu, a nie w base.css, bo ten plik ładuje się
   na wszystkich stronach (także home) po CSS strony -- wygrywa z per-stronowymi `.main-nav a`. */
.main-nav .nav-collections {
  position: relative;
  /* link w środku jako element flex -- jak sąsiednie linki .main-nav, bez przesunięcia w pionie */
  display: flex;
}

.main-nav .nav-dropdown {
  position: absolute;
  top: 100%;
  left: -20px;
  z-index: 100;
  display: none;
  gap: 12px;
  min-width: 190px;
  /* górny padding to "most" dla kursora między linkiem a listą */
  padding: 22px 20px 20px;
  background: var(--ivory);
  border: 1px solid var(--border);
  border-top: 0;
}

/* :hover tylko przy prawdziwym kursorze -- iPad (desktopowe menu od 901px) inaczej pierwszym
   stuknięciem tylko rozwija listę zamiast otworzyć /collections. */
@media (hover: hover) {
  .main-nav .nav-collections:hover .nav-dropdown {
    display: grid;
  }
}

.main-nav .nav-collections:focus-within .nav-dropdown {
  display: grid;
}

.main-nav .nav-dropdown a {
  color: var(--dark);
  white-space: nowrap;
}

.mobile-nav .nav-dropdown {
  display: grid;
  margin-top: 6px;
  padding-left: 20px;
}

.mobile-nav .nav-dropdown a {
  /* cel dotyku min. 44px (NORDISKA.md: touch targets na mobile) */
  display: flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

@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;
  }
}