/**
* Wspólny layout topnava dla index.html i mapa.html (mode:'full' w
* shared-header.js). register.html/account.html (mode:'minimal') i admin.html
* (własny .topbar) go NIE ładują — mają inny, prostszy markup.
*
* Mechanika CSS Grid przejęta z mapa.html (kolumna "auto" na lewą grupę
* loga+przełącznika języka rezerwuje jej dokładnie tyle miejsca, ile
* potrzebuje — druga kolumna "1fr" z nawigacją nigdy nie może na nią
* "wjechać", nawet gdy zawija się do kilku linii). index.html używało
* zwykłego flexa z `order`, co realnie pozwalało przyciskom nawigacji
* nachodzić na logo na średnich szerokościach ekranu — ta wersja naprawia
* to też dla index.html, nie tylko zachowuje naprawę z mapa.html.
*
* Kolor akcentu NIE jest tu zaszyty na sztywno — każda strona ma swój
* własny token (--green w index.html, --mint w mapa.html) i mapuje go na
* --topnav-accent jednym dopiskiem w swoim :root. Nie ujednolica się tu
* kolorystyki dropdownu/awatara (.user-*) — ta celowo różni się między
* jasnym (index.html) a ciemnym (mapa.html) motywem stron i zostaje
* page-specific. .hdr-btn/.hdr-btn-outline (Zaloguj/Zarejestruj) SĄ tu
* ujednolicone — używają tego samego --topnav-accent, więc kolor i tak
* dopasowuje się do motywu strony bez osobnych reguł.
*/
.topnav {
/* Zakotwiczone na sztywno: index.html ma html{font-size:clamp(11px,1.15vw,15px)},
mapa.html nie ma żadnego resetu (domyślne 16px przeglądarki) — bez tego
zakotwiczenia każdy `em`/`rem` w tym pliku liczyłby się inaczej na obu
stronach, dając realnie różną wysokość paska. Reszta reguł niżej używa
`em` (nie `rem`), więc dziedziczy z tego jednego miejsca, nie z . */
font-size: 15px;
background: #000;
border-bottom: 2px solid var(--topnav-accent);
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
column-gap: 1.2em;
padding: 0.6em 1.5em;
min-height: 54px;
position: sticky;
top: 0;
z-index: 900;
}
.topnav-left {
grid-column: 1;
display: flex;
align-items: center;
gap: 1em;
min-width: 0;
}
.topnav-logo-wrap { min-width: 0; }
.topnav-logo-img { height: 26px; display: block; }
.topnav-logo-wrap a, .topnav-left > a.logo-link { display: block; line-height: 0; }
/* Dropdown zamiast rzędu przycisków — przy 2 językach (EN/PL) mieściły się
obok siebie, ale przy 4 (+FR/IT, Faza 10) rząd przycisków zacząłby się nie
mieścić / wyglądać niechlujnie na węższych szerokościach. LANG/setLang()
w shared-i18n.js są już języko-agnostyczne, więc tu zmienia się tylko
markup i to, co go renderuje (shared-header.js). */
.lang-select {
appearance: none;
-webkit-appearance: none;
background: transparent;
color: rgba(255,255,255,.85);
border: 1px solid rgba(255,255,255,.28);
border-radius: 6px;
padding: 0.32em 1.7em 0.32em 0.8em;
font-size: 0.78em;
font-weight: 700;
font-family: inherit;
cursor: pointer;
flex-shrink: 0;
transition: background .2s, border-color .2s;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23ffffff' fill-opacity='.6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.65em center;
}
.lang-select:hover { background-color: rgba(255,255,255,.14); }
.lang-select:focus { outline: none; border-color: rgba(255,255,255,.6); }
.lang-select option { color: #111; background: #fff; }
.topnav-right-group {
grid-column: 2;
justify-self: end;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: 0.5em 0.7em;
max-width: 100%;
}
.topnav-nav { display: flex; align-items: center; gap: 0.45em; flex-shrink: 0; }
.topnav-btn {
/* Rozmiar bazowy pomniejszony o 25% na wyraźne życzenie — WYŁĄCZNIE przez
font-size (1.16em -> 0.87em = ×0.75). padding zostaje w oryginalnych
jednostkach em (0.51em 1.41em): em w padding liczy się od WŁASNEGO
font-size elementu, więc automatycznie skaluje się razem z nim. Gdyby
dodatkowo pomniejszyć też mnożnik paddingu, efekt by się skumulował
(×0.75 × ×0.75 ≈ 44% mniej, nie 25%) — to jest realny błąd, który tu
był i został poprawiony, nie zostawiaj go z powrotem. */
background: transparent;
color: rgba(255,255,255,.7);
border: 1px solid rgba(255,255,255,.22);
border-radius: 7px;
padding: 0.51em 1.41em;
font-size: 0.87em;
font-weight: 600;
cursor: pointer;
text-decoration: none;
transition: background .18s, color .18s, border-color .18s;
white-space: nowrap;
display: inline-block;
font-family: inherit;
}
.topnav-btn:hover { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.4); }
.topnav-btn.active { background: var(--topnav-accent); color: #0d1f17; border-color: var(--topnav-accent); }
/* Zaloguj się / Zarejestruj się — dawniej osobne .hdr-btn/.hdr-btn-outline
w każdym pliku, z różnym paddingiem/font-size (jeden w rem, jeden już w
em, licząc się od różnego root font-size) — stąd realnie różny rozmiar
między stronami. Scalone tu, rozmiar też pomniejszony o 25% względem
oryginału z index.html — tak samo tylko przez font-size (1em -> 0.75em),
padding w oryginalnych jednostkach (patrz komentarz w .topnav-btn wyżej). */
.hdr-btn, .hdr-btn-outline {
padding: 0.7em 1.8em;
font-size: 0.75em;
font-weight: 700;
border-radius: 8px;
cursor: pointer;
letter-spacing: .1px;
text-decoration: none;
display: inline-block;
white-space: nowrap;
font-family: inherit;
transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.hdr-btn { background: var(--topnav-accent); color: #0d1f17; border: none; }
.hdr-btn:hover { transform: translateY(-1px); }
.hdr-btn-outline { background: transparent; color: var(--topnav-accent); border: 1.5px solid var(--topnav-accent); }
.hdr-btn-outline:hover { background: rgba(255,255,255,.08); color: #fff; }
.hdr-right { display: flex; align-items: center; gap: 0.55em; flex-shrink: 0; }
@media (max-width: 1200px) and (min-width: 901px) {
/* Padding w oryginalnych jednostkach — patrz komentarz przy .topnav-btn. */
.topnav-btn { padding: 0.45em 0.9em; font-size: 0.69em; }
}
@media (max-width: 900px) {
.topnav {
display: flex;
flex-wrap: wrap;
height: auto;
min-height: auto;
padding: 0.5em 0.7em;
gap: 0.3em;
row-gap: 0.5em;
}
.topnav-left { order: 1; flex: 1 1 auto; min-width: 0; }
.topnav-right-group {
order: 2;
flex-basis: 100%;
justify-self: auto;
flex-direction: column;
align-items: stretch;
gap: 0.35em;
max-width: none;
}
.topnav-nav { gap: 0.25em; }
.topnav-btn {
flex: 1;
min-width: 0;
text-align: center;
padding: 0.4em 0.3em;
font-size: 0.69em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hdr-right { justify-content: flex-end; }
}