/* ====== GLASS NAV dla #topmenu (Elementor) ====== */

/* 1) Podstawowa warstwa – przezroczysty kolor, blur + desaturacja */
#topmenu {
  position: sticky; /* jeżeli chcesz „przyklejone” menu – opcjonalnie */
  top: 0;           /* jw. */
  background-color: rgba(0, 0, 0, 0.45); /* #110d0d @ 50% */
  -webkit-backdrop-filter: blur(5px) saturate(0.5);
  backdrop-filter: blur(5px) saturate(0.5);
  isolation: isolate;            /* własny kontekst – bez „przebijania” z-index */
  overflow: clip;                /* bez wycieków pseudo-elementów */
  will-change: backdrop-filter;  /* płynniejsze przewijanie */
  z-index: 999;                  /* nad treścią strony */
}

/* 2) Jeżeli używasz Background Overlay w Elementorze – filtr idzie na overlay,
      bo jest renderowany między tłem a treścią (często stabilniejsze) */
#topmenu > .elementor-background-overlay {
  background-color: rgba(17, 13, 13, 0.5);
  -webkit-backdrop-filter: blur(5px) saturate(0.5);
  backdrop-filter: blur(5px) saturate(0.5);
  pointer-events: none; /* nie blokuje klików w menu */
}

/* 3) Ziarno – bardzo subtelne, nie psuje responsywności
      (działa zarówno na kontenerze, jak i na overlayu) */
#topmenu::after,
#topmenu > .elementor-background-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* SVG noise – lekki, powtarzalny, zero dodatkowych plików */
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/></filter>\
<rect width='100%%' height='100%%' filter='url(%%23n)' opacity='0.12'/></svg>");
  background-repeat: repeat;
  mix-blend-mode: overlay; /* wtopienie w tło, nie „zjada” kontrastu */
  z-index: 0;
}

/* 4) Upewniamy się, że treść menu siedzi ponad ziarnem */
#topmenu > *:not(.elementor-background-overlay) {
  position: relative;
  z-index: 1;
}

/* 5) Kontrast linków (dopasuj pod swój motyw, żeby było czytelnie) */
#topmenu,
#topmenu a {
  color: #f5f5f5;
}
#topmenu a:hover,
#topmenu .elementor-item:hover {
  color: #ffffff;
}

/* 6) Fallback, gdy przeglądarka nie wspiera backdrop-filter:
      dajemy ciemniejszy kolor, by „udawać” blur i desaturację */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #topmenu,
  #topmenu > .elementor-background-overlay {
    background-color: rgba(17, 13, 13, 0.82);
  }
}

/* 7) Drobne wygładzenia (opcjonalnie) */
#topmenu {
  -webkit-transform: translateZ(0); /* Safari/iOS glitche */
  transform: translateZ(0);
  backdrop-filter: blur(5px) saturate(0.5);
  -webkit-backdrop-filter: blur(5px) saturate(0.5);
}