/* menu.css — kolorystyka naglowka i menu wedlug ksiegi znaku STRAMA PANELS (2026-09-07).
   Plik ladowany OSTATNI w base.html, zaraz po telefon.css. Zmienia WYLACZNIE kolory,
   kontrast i drobna typografie chrome'u serwisu: pasek naglowka, menu desktop, mega-menu,
   szuflada mobilna, stany focus. Nie rusza ukladu ani logiki (te siedza w strama.css /
   premium-*.css / nowa.css / telefon.css i strama.js).

   Skad sie wziely odstepstwa: naglowek dziedziczy resztki trzech starszych palet —
   strama.css (--blue #1764C7), premium-global.css (--g-blue #0876BD, --g-line #DCD8CF,
   --g-navy #11375F) oraz material-precision.css (--mp-blue #157CA8 teal, --mp-navy #102B34,
   --mp-canvas #FBFAF7 ciepla kremowa biel). Ponizej sprowadzamy je do palety z ksiegi.

   Paleta ksiegi: --nieb #006EB6, --nieb-800 #013A6C, 50 #E6F1F8, 100 #CCE2F0, 200 #99C5E2,
   300 #66A8D3, --chlod #F3F5F7, --szary #6E7378, --tekst #2D2D2D, --granat #171B2B,
   --linia #DFE4E9. Naglowki i elementy interfejsu: Poppins 500/600. Bez zaokraglen. */

:root{
  --m-nieb:#006EB6; --m-nieb-800:#013A6C;
  --m-n50:#E6F1F8; --m-n100:#CCE2F0; --m-n200:#99C5E2; --m-n300:#66A8D3;
  --m-chlod:#F3F5F7; --m-szary:#6E7378; --m-tekst:#2D2D2D;
  --m-granat:#171B2B; --m-linia:#DFE4E9;
  --m-poppins:Poppins,Arial,sans-serif;
}

/* ---------------------------------------------------------------------------
   1. Pasek naglowka
   --------------------------------------------------------------------------- */

/* separator przed przyciskiem telefonu: bylo #DCD8CF (cieply bez z premium-global) */
@media (min-width:1181px){
  .header-actions:before{background:var(--m-linia)}
}

/* skip-link: bylo #157CA8 (teal z material-precision) */
.skip-link{background:var(--m-nieb);color:#fff;font-family:var(--m-poppins);font-weight:500;border-radius:0}

/* ---------------------------------------------------------------------------
   2. Menu desktop: pozycje, podkreslenia, stan aktywny
   --------------------------------------------------------------------------- */

/* podkreslenie (hover + strona aktywna): bylo #0876BD z premium-global */
.main-nav a:after,
.main-nav> .nav-entry> a:after,
.main-nav> .nav-entry> a[aria-current=page]:after{background:var(--m-nieb)}

/* kolor po najechaniu: bylo #11375F (granat starej palety, spoza ksiegi).
   UWAGA: tylko od 1101px w gore — ponizej te same selektory obsluguja pozycje
   szuflady na granatowym tle, gdzie tekst musi zostac bialy. */
@media (min-width:1101px){
  .main-nav> .nav-entry> a{color:var(--m-granat)}
  .main-nav> .nav-entry> a:hover,
  .main-nav> .nav-entry> a:focus-visible{color:var(--m-nieb)}
  .main-nav> .nav-entry> a[aria-current=page]{color:var(--m-granat)}
  .nav-entry.is-mega-open> a,
  .nav-entry:hover> .mega-trigger{color:var(--m-nieb)}
}

/* ---------------------------------------------------------------------------
   3. Mega-menu "Panele scienne" (desktop)
   --------------------------------------------------------------------------- */

/* krawedz gorna: bylo #157CA8 (teal); cien mial teal podklad rgba(16,43,52,.17) */
.mega-menu{
  border-top:2px solid var(--m-nieb);
  background:#fff;
  box-shadow:0 36px 90px -18px rgba(23,27,43,.28),0 10px 26px rgba(23,27,43,.10);
}

/* kolumna wprowadzenia: bylo tlo #102B34 (ciemny teal), teraz granat marki z ksiegi */
.mega-intro{background:var(--m-nieb-800);background-image:none;color:#fff}
.mega-menu .mega-intro .eyebrow,
.mega-intro .eyebrow{color:var(--m-n200);font-family:var(--m-poppins);font-weight:600;letter-spacing:.16em}
.mega-intro>strong{font-family:var(--m-poppins);font-weight:600;color:#fff;letter-spacing:-.015em;line-height:1.1}
.mega-intro>span{color:var(--m-n100)}
/* KRYTYCZNE: "Zobacz wszystkie" dziedziczylo .main-nav a{color:var(--granat)} z nowa.css,
   czyli #171B2B na tle #102B34 — kontrast 1,15:1, link byl praktycznie niewidoczny. */
.main-nav .mega-intro>a,
.mega-intro>a{color:#fff;font-family:var(--m-poppins);font-weight:500}
.mega-intro>a:hover{opacity:1;color:var(--m-n200)}

/* lista podstron: tlo bylo #FBFAF7 (ciepla kremowa biel), linie #DCDBCF, hover #F2EFE8 */
.mega-links{background:#fff}
.mega-links>a{border-bottom:1px solid var(--m-linia)}
.mega-links>a:before{background:var(--m-nieb)}
.mega-links>a:hover{background:var(--m-n50)}
.mega-links span{color:var(--m-nieb)}
.mega-links strong{font-family:var(--m-poppins);font-weight:600;color:var(--m-granat)}
.mega-links>a:hover strong{color:var(--m-nieb)}
.mega-links small{color:var(--m-szary)}
/* opis na tle hoveru: --szary na #E6F1F8 dawalby 4,16:1 (ponizej AA dla 11,5px),
   wiec przy najechaniu opis ciemnieje do --tekst (11,96:1). */
.mega-links>a:hover small,
.mega-links>a:focus-visible small{color:var(--m-tekst)}

/* ---------------------------------------------------------------------------
   4. Menu mobilne (szuflada <=1100 px) — same kolory i typografia, uklad bez zmian
   --------------------------------------------------------------------------- */
@media (max-width:1100px){
  /* napis MENU: Poppins 600 zamiast 700 (ksiega: elementy interfejsu 500/600) */
  .menu-toggle{color:var(--m-granat)}
  .menu-toggle span{font-family:var(--m-poppins);font-weight:600;color:var(--m-granat)}

  /* pozycje szuflady: na <=720px material-precision podmienialo krój na Noto Sans Display,
     przez co 390 i 768 mialy rozne fonty w tym samym menu */
  .main-nav> .nav-entry> a{font-family:var(--m-poppins);font-weight:500;color:#fff}
  .main-nav> .nav-entry> a[aria-current=page]{font-weight:600;color:#fff}
  .main-nav .mega-intro>a{color:#fff}

  /* akcenty w szuflady: bylo #7FC0EA (spoza ksiegi) -> niebieski 300 */
  .main-nav .mega-chevron{color:var(--m-n300)}
  .main-nav .mega-links span{color:var(--m-n300)}
  /* opisy: bylo #A9C3D7 -> niebieski 100; wersja aktywna #D6E8F5 -> niebieski 50 */
  .main-nav .mega-links small{color:var(--m-n100)}
  .main-nav .mega-links>a[aria-current=page] small{color:var(--m-n50)}
  .main-nav .mega-links strong,
  .main-nav .mega-all-mobile strong{font-family:var(--m-poppins);font-weight:500}
  .main-nav .mega-links>a[aria-current=page] strong{font-weight:600}
  .main-nav .mega-all-mobile small{color:var(--m-n100)}

  /* stopka szuflady: telefon, e-mail, przycisk */
  .main-nav .mobile-nav-meta p{color:var(--m-n200);font-family:var(--m-poppins);font-weight:600;font-size:11px;letter-spacing:.14em}
  .main-nav .mobile-nav-meta>a:not(.button){font-family:var(--m-poppins);font-weight:500;font-size:15px;color:#fff}
  .main-nav .mobile-nav-meta .button{
    background:var(--m-nieb);border-color:var(--m-nieb);color:#fff;
    font-family:var(--m-poppins);font-weight:500;font-size:14px;letter-spacing:0;border-radius:0}
  .main-nav .mobile-nav-meta .button:hover{background:var(--m-n300);border-color:var(--m-n300);color:var(--m-granat)}
}

/* ---------------------------------------------------------------------------
   5. Focus klawiatury w calym naglowku
   Bylo: #0876BD (linki i przyciski z premium-global) oraz #157CA8 (reszta,
   material-precision) plus border-radius:1px. Teraz jeden kolor marki, bez zaokraglen,
   a na ciemnych tlach (kolumna mega-menu, szuflada) jasny niebieski 200 dla widocznosci.
   --------------------------------------------------------------------------- */
.site-header a:focus-visible,
.site-header button:focus-visible,
.site-header summary:focus-visible,
.site-header [tabindex]:focus-visible,
.site-header .button:focus-visible,
.skip-link:focus-visible,
.skip-link:focus{
  outline:2px solid var(--m-nieb);
  outline-offset:3px;
  box-shadow:0 0 0 4px rgba(0,110,182,.16);
  border-radius:0;
}
.site-header .mega-intro a:focus-visible{
  outline-color:var(--m-n200);
  box-shadow:0 0 0 4px rgba(153,197,226,.20);
}
@media (max-width:1100px){
  .site-header .main-nav a:focus-visible,
  .site-header .main-nav .button:focus-visible{
    outline:2px solid var(--m-n200);
    outline-offset:2px;
    box-shadow:0 0 0 4px rgba(153,197,226,.20);
  }
}