/**
 * Styl głównego menu (Kolekcje / Realizacje / O nas / Kontakt) - domyślnie
 * Astra używała tu swojej fabrycznej niebieskiej "Global Color 1"
 * (#045cb4), która nigdy nie została dostosowana do marki - stąd niebieski
 * aktywny link i "płaski", nic nie wyróżniający się wygląd menu.
 *
 * Kolor akcentu (#D3C6BE - ciepły beż/taupe) to NIE przypadkowy wybór -
 * to dokładnie ten sam odcień, którego marka już używa na starej stronie
 * (ness-lighting.com) w numeracji stron/strzałkach nawigacji - więc nowe
 * menu jest z nią spójne kolorystycznie, zamiast wymyślać nowy akcent.
 *
 * Zamiast zmieniać globalny kolor Astry (mógłby wpłynąć na inne, jeszcze
 * niesprawdzone miejsca na stronie), stylujemy menu bezpośrednio.
 */
.main-header-menu.ast-nav-menu > .menu-item > a {
    color: var(--ast-global-color-6, #111111) !important;
    font-size: 1.05rem;
    font-weight: 500;
    /* Wszystkie litery jako wielkie, w tym samym, jednolitym rozmiarze
       (bez efektu "pierwsza litera większa" jak przy kapitalikach/
       font-variant: small-caps, którego tu celowo NIE używamy). */
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding-bottom: 6px !important;
    border-bottom: 2px solid transparent;
    transition: border-color 0.25s ease, opacity 0.2s ease;
}

.main-header-menu.ast-nav-menu > .menu-item > a:hover,
.main-header-menu.ast-nav-menu > .menu-item > a:focus {
    color: var(--ast-global-color-6, #111111) !important;
    border-bottom-color: color-mix(in srgb, #D3C6BE 60%, transparent);
}

.main-header-menu.ast-nav-menu > .current-menu-item > a,
.main-header-menu.ast-nav-menu > .current_page_item > a,
.main-header-menu.ast-nav-menu > .current-menu-ancestor > a {
    color: var(--ast-global-color-6, #111111) !important;
    font-weight: 600;
    border-bottom-color: #D3C6BE;
}

/* ------------------------------------------------------------------
   Logo na bardzo wąskich ekranach (poniżej ~400px) - w Personalizacji
   (Nagłówek -> Tytuł witryny i logo -> Design -> Szerokość logo) logo ma
   ustawioną szerokość 281px, która nie ma osobnej, mniejszej wartości dla
   telefonu. Na ekranach węższych niż ta szerokość rozpycha to nagłówek i
   rozjeżdża całą stronę w poziomie (widoczny poziomy scroll). Wymuszamy
   tu bezpieczny, proporcjonalny górny limit - logo skaluje się w dół
   zamiast rozpychać layout, niezależnie od tego, co jest ustawione
   w Personalizacji.
   ------------------------------------------------------------------ */
@media (max-width: 480px) {
    /* Logo skaluje się do miejsca, które zostaje obok przełącznika PL | ENG
       i hamburgera (rezerwa 160px na te dwa elementy, odstępy i marginesy) -
       dzięki temu na żadnym wąskim telefonie hamburger nie ucieka za ekran.
       211px to górny limit (dotychczasowa szerokość na typowym telefonie). */
    .site-header .custom-logo,
    .site-header .site-logo-img img {
        width: auto !important;
        max-width: min(211px, calc(100vw - 160px)) !important;
        height: auto !important;
    }

    /* Mniejsze boczne marginesy paska nagłówka (domyślnie 20px po obu stronach). */
    #ast-mobile-header .ast-primary-header-bar {
        padding-left: 14px !important;
        padding-right: 8px !important;
    }

    /* Siatka nagłówka: lewa kolumna (logo) może się zwężać (minmax(0, 1fr)),
       prawa (PL | ENG + hamburger) zajmuje tyle, ile potrzebuje. Domyślnie obie
       kolumny miały szerokość "auto", przez co ich suma przekraczała szerokość
       ekranu i rozpychała stronę w poziomie. */
    #ast-mobile-header .ast-builder-grid-row {
        grid-template-columns: minmax(0, 1fr) auto !important;
        column-gap: 8px !important;
    }

    /* Nieco mniejszy przycisk hamburgera. */
    #ast-mobile-header .menu-toggle {
        padding: 8px !important;
    }
}

/* ------------------------------------------------------------------
   Sticky header - nagłówek ma zawsze zostawać widoczny podczas
   przewijania strony (a nie przewijać się razem z resztą treści, jak
   robił do tej pory - w darmowej wersji Astry nie ma wbudowanej opcji
   "Sticky Header" w Personalizacji, jest ona dostępna wyłącznie w
   płatnym dodatku "Astra Pro / Business Toolkit", dlatego robimy to
   własnym, prostym CSS-em zamiast przez ustawienia motywu).

   "position: sticky" (a nie "fixed") celowo - nagłówek nadal zajmuje
   swoje miejsce w normalnym układzie strony, więc nie trzeba ręcznie
   doklejać żadnego dodatkowego odstępu u góry treści, żeby nic nie
   "skakało"/nie chowało się pod nim po przewinięciu.
   ------------------------------------------------------------------ */
#masthead.site-header {
    position: sticky;
    top: 0;
    z-index: 999;
    transition: box-shadow 0.25s ease;
}

/* Delikatny cień pojawiający się dopiero po przewinięciu strony (klasa
   "nl-header-scrolled" dodawana/usuwana przez custom-header-menu.js) -
   sam nagłówek ma już nieprzezroczyste, białe tło, ale bez cienia na
   samej górze strony (przed przewinięciem) wyglądałoby to zbyt "płasko"
   względem hero-obrazka tuż pod nim. */
#masthead.site-header.nl-header-scrolled {
    box-shadow: 0 2px 12px color-mix(in srgb, var(--ast-global-color-6, #111111) 10%, transparent);
}

/* Gdy zalogowany administrator widzi też górny pasek WordPressa
   (#wpadminbar) - on sam też jest "fixed" u samej góry, więc nasz sticky
   nagłówek musi zaczynać się dopiero pod nim, a nie pod nim się chować.
   Wysokości 32px / 46px to standardowe, natywne wysokości paska admina
   WordPressa (desktop / telefon <= 782px). */
body.admin-bar #masthead.site-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar #masthead.site-header {
        top: 46px;
    }
}

/* ------------------------------------------------------------------
   Pasek nagłówka na całą szerokość ekranu - bez ograniczenia.

   To NIE jest nasz kod ani Elementor - to Astra sama, globalnie, nadaje
   każdemu elementowi z klasą ".ast-container" (więc też wierszowi
   nagłówka) "max-width: 1240px; margin: 0 auto" na podstawie ustawienia
   w Personalizacji: Wygląd -> Dostosuj -> Układ -> Szerokość kontenera
   (Layout -> Container Width). Nie zmieniamy tego ustawienia globalnie
   (może być używane też gdzie indziej), tylko nadpisujemy je punktowo
   dla samego paska nagłówka - ta sama specyficzność media query
   (min-width: 922px), jakiej używa oryginalna reguła Astry, więc
   wystarczy, że nasz plik ładuje się PO głównym CSS motywu (a tak jest -
   patrz kolejność w custom-header-menu.php).
   ------------------------------------------------------------------ */
@media (min-width: 922px) {
    .site-header .ast-container {
        max-width: 100%;
    }
}

/* Ukrycie pozycji "Języki" (przełącznik Polylang, dodany ręcznie do
   baner-menu/baner-menu-en) WSZĘDZIE - i na desktopie, i na mobile.
   Od teraz mamy osobny, animowany przycisk PL/ENG w nagłówku (patrz
   custom-language-switcher.php) widoczny na każdej szerokości ekranu
   (obok wyszukiwarki na desktopie, obok hamburgera na tablecie/mobile),
   więc wpis w menu głównym byłby zbędnym duplikatem. Sam wpis "Języki"
   nadal fizycznie siedzi w menu (nic nie trzeba tam usuwać) - po prostu
   go tu chowamy. */
li.pll-parent-menu-item {
    display: none !important;
}