/* =====================================================================
   Nagłówek_Publiczny — wspólny wygląd nawigacji powierzchni publicznych.

   DLACZEGO TO JEST OSOBNY ARKUSZ. Reguły `.korki-public-header` mieszkały w
   `homepage.css`, więc nagłówek wyglądał poprawnie tylko tam, gdzie wczytywano
   CAŁY arkusz strony głównej: na `/`, `/matura`, `/8klasista` i `/payments`.
   Szybki test (`/cwiczenia/szybki-test/:type`) korzysta z tego samego partiala
   `views/partials/header/navbar.hbs`, ale nie wczytywał `homepage.css`, więc
   dostawał surowy Bootstrap: logo 220 px zamiast 112 px i domyślny rozmiar
   fontu linków. Wciągnięcie tam całego `homepage.css` naprawiłoby nagłówek i
   przy okazji narzuciło stronie zbudowanej na Bootstrapie cały system wizualny
   strony głównej — dlatego wygląd nagłówka jest wydzielony tutaj i wczytywany
   przez każdą powierzchnię publiczną osobno.

   Logo ma w partialu `width="220"` na sztywno (literał pinowany testami), a
   docelowy rozmiar nadaje ten arkusz. Bez niego przeglądarka użyje 220 px.

   ZAKRES. Wyłącznie selektory `.korki-public-header`. Tokeny `kh-*` i
   komponenty strony głównej zostają w `homepage.css`; ten plik nie definiuje
   żadnego tokenu i nie dotyka treści strony.

   Wczytywany PO `kds.css`, jak każdy arkusz powierzchni.
   ===================================================================== */

.korki-public-header {
  background: #fff;
  border-bottom: 1px solid #eeeef6;
  box-shadow: none;
}

.korki-public-header .container {
  max-width: 1180px;
}

.korki-public-header .navbar-brand img {
  width: 112px;
  height: auto;
}

.korki-public-header .nav-link {
  color: #242944;
  font-size: 0.88rem;
  font-weight: 500;
}

.korki-public-header .nav-link:hover {
  color: var(--kh-primary, #5b35f2);
}

.korki-public-header .kh-header-login,
.korki-public-header .kh-header-start,
.korki-public-header .kh-header-app {
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-weight: 600;
}

.korki-public-header .kh-header-login {
  color: #4522d6;
}

.korki-public-header .kh-header-start,
.korki-public-header .kh-header-app {
  color: #fff;
  background: #5b35f2;
  border-color: #5b35f2;
  border-radius: 8px;
  box-shadow: 0 7px 16px rgba(91, 53, 242, 0.22);
}

.korki-public-header .kh-header-start:hover,
.korki-public-header .kh-header-app:hover {
  color: #fff;
  background: #4522d6;
  border-color: #4522d6;
}

.korki-public-header .kh-header-login:focus-visible,
.korki-public-header .kh-header-start:focus-visible,
.korki-public-header .kh-header-app:focus-visible {
  outline: 3px solid rgba(91, 53, 242, 0.3);
  outline-offset: 2px;
}

@media (max-width: 991.98px) {
  .korki-public-header .navbar-brand img { width: 100px; }
}

/* Accessibility and narrow reflow safeguards (REQ-PH-15, REQ-PH-16). */
.korki-public-header,
.korki-public-header * {
  box-sizing: border-box;
}

.korki-public-header .navbar-brand,
.korki-public-header .nav-link,
.korki-public-header .navbar-toggler,
.korki-public-header [data-public-mobile-close] {
  min-height: 44px;
}

.korki-public-header .navbar-brand,
.korki-public-header .nav-link {
  display: flex;
  align-items: center;
}

.korki-public-header .nav-link {
  padding-inline: 0.75rem;
  overflow-wrap: anywhere;
}

.korki-public-header .navbar-toggler,
.korki-public-header [data-public-mobile-close] {
  min-width: 44px;
}

.korki-public-header [data-public-mobile-menu] {
  --bs-offcanvas-width: min(100vw, 400px);
  max-width: 100vw;
  overflow-wrap: anywhere;
}

.korki-public-header .navbar-brand:focus-visible,
.korki-public-header .nav-link:focus-visible,
.korki-public-header .navbar-toggler:focus-visible,
.korki-public-header [data-public-mobile-close]:focus-visible,
.korki-public-header .kh-header-login:focus-visible {
  outline: 3px solid #5b35f2;
  outline-offset: 2px;
  box-shadow: none;
}

.korki-public-header .kh-header-start:focus-visible,
.korki-public-header .kh-header-app:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px #10152f;
}

@media (prefers-reduced-motion: reduce) {
  .korki-public-header,
  .korki-public-header *,
  .korki-public-header *::before,
  .korki-public-header *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}