/* =========================================================================
   Atlas polityczny — nagłówek jak w portalu politologia.org (spec. UX, X 2026)
   Ładowany po atlas.css i dzial.css, więc nadpisuje ich reguły nagłówka.
   Kolory z fallbackiem — działa także, gdyby zmienne nie były zdefiniowane.
   ========================================================================= */

:root { --naglowek-wys: 72px; }
html { scroll-padding-top: calc(var(--naglowek-wys) + 16px); }

/* Fokus i „Przejdź do treści” */
.site-header :focus-visible, .dzialy :focus-visible, .skip-link:focus-visible { outline: 3px solid var(--navy, #18478E); outline-offset: 2px; }
.site-footer :focus-visible { outline-color: var(--lime, #AAD042); }
.site-main:focus { outline: none; }
.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 100;
  background: var(--navy-dark, #103061); color: #fff; font-weight: 700; font-size: 15px;
  padding: 12px 18px; border-radius: var(--radius-sm, 8px); text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* Logo: kropka ciemniejsza (kontrast) */
.site-header .site-logo .dot { color: #6E8F1F; }

/* Menu: aktywny dział = limonkowa linia, pola dotyku ≥ 44 px */
.site-nav a { min-height: 44px; display: flex; align-items: center; }
.site-nav a.active, .site-nav a[aria-current="page"] {
  background: transparent; color: var(--navy-dark, #103061); box-shadow: inset 0 -3px 0 var(--lime, #AAD042); border-radius: 0;
}

/* Wyszukiwarka */
.site-search { position: relative; padding: 0; border: none; background: transparent; width: 280px; display: block; }
.site-search-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.site-search-field {
  display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px;
  background: #fff; border: 1px solid #B9C5D8; border-radius: var(--radius-sm, 8px);
}
.site-search-field:focus-within { border-color: var(--navy, #18478E); box-shadow: 0 0 0 3px var(--navy-soft, #EAF0FA); }
.site-search-field input { border: none; outline: none; background: transparent; font: inherit; font-size: 16px; width: 100%; color: var(--text, #1D2733); }
.site-search-field .icon { color: #5B6675; flex: none; }

/* Przycisk menu (telefon): z etykietą tekstową */
.menu-toggle {
  align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; margin-left: auto;
  border: 2px solid #B9C5D8; border-radius: var(--radius-sm, 8px); background: #fff; cursor: pointer;
  font: inherit; font-weight: 700; font-size: 15px; color: var(--navy-dark, #103061);
}
.menu-toggle[aria-expanded="true"] { background: var(--navy-dark, #103061); border-color: var(--navy-dark, #103061); color: #fff; }
.menu-toggle-icon { display: inline-flex; }
.menu-toggle-icon[hidden] { display: none; }
.menu-toggle .icon { width: 16px; height: 16px; }

@media (max-width: 1100px) {
  .site-search { width: 220px; }
}

@media (max-width: 720px) {
  :root { --naglowek-wys: 0px; }

  /* logo + „Menu”, pod spodem zawsze widoczna wyszukiwarka; menu rozwija się w układzie strony */
  .site-header { position: relative; }
  .site-header-inner { flex-wrap: wrap; height: auto; padding-top: 8px; padding-bottom: 12px; row-gap: 10px; }
  .menu-toggle { display: inline-flex !important; }
  .site-search { display: block !important; order: 3; width: 100%; }

  .site-nav,
  .site-nav.open,
  .site-nav.is-open {
    position: static !important; inset: auto !important; padding: 0 !important; transform: none !important;
    opacity: 1 !important; pointer-events: auto !important; order: 4; width: 100%; background: transparent; overflow: visible;
  }
  .site-nav { display: none !important; }                         /* zamknięte: linki poza kolejnością Tab */
  .site-nav.open, .site-nav.is-open { display: block !important; visibility: visible !important; }
  .site-nav ul { display: flex; flex-direction: column; justify-content: flex-start; overflow: visible; }
  .site-nav a { min-height: 56px; padding: 0 14px; font-size: 18px; border-bottom: 1px solid var(--border, #E4E9F1); border-radius: 0; }
  .site-nav a.active, .site-nav a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--lime, #AAD042); background: var(--lime-soft, #F3F9E7); }
}

@media (prefers-reduced-motion: reduce) {
  .site-header *, .dzialy * { transition: none !important; }
}