/* ============================================================
   04 — pasek nawigacji, logo, menu mobilne
   ============================================================ */

.ai-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--ai-bg) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ai-line);
}

/* Trzy kolumny zamiast rzędu: skrajne biorą po tyle samo miejsca, więc menu
   stoi w osi paska niezależnie od tego, czy przycisk po prawej jest szerszy
   od znaku po lewej. Po ukryciu menu środkowa kolumna znika do zera i logo
   z przyciskiem zostają przy krawędziach. */
.ai-topbar__in {
  min-height: var(--ai-pasek);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--ai-s4);
  padding-block: var(--ai-s2);
}

.ai-nav { justify-self: center; }

.ai-topbar__akcje {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--ai-s2);
}

/* --- logo --------------------------------------------------- */

.ai-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ai-heading);
  white-space: nowrap;
}
.ai-logo:hover { color: var(--ai-heading); }

.ai-logo__sygnet { display: inline-flex; color: var(--ai-magenta); }
.ai-logo__sygnet svg { width: 26px; height: 26px; display: block; }

.ai-logo__tekst { display: inline-flex; flex-direction: column; }

/* „Konferencja" nad nazwą, a nie obok: pasek ma 64px i dopisanie słowa w linii
   zjadłoby miejsce nawigacji na wąskich ekranach. Organizator może używać
   wyłącznie pełnego zwrotu „Konferencja AI4Buyers". */
.ai-logo__przed {
  font-family: var(--ai-font-body);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: var(--ai-ls-label);
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 3px;
  color: var(--ai-text-mute);
}

.ai-logo__nazwa {
  font-family: var(--ai-font-display);
  font-weight: 800;          /* krój jest zmienny — bez tego logo wyszłoby cienkie */
  font-size: 1.375rem;
  line-height: 1;
}
.ai-logo__nazwa em { font-style: normal; color: var(--ai-magenta); }

/* --- nawigacja ---------------------------------------------- */

.ai-nav .navigation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ai-s4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ai-nav .navigation li { margin: 0; }

.ai-nav .navigation a {
  display: block;
  padding: 6px 0;
  font-family: var(--ai-font-body);
  font-size: var(--ai-size-small);
  font-weight: 600;
  color: var(--ai-text);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--ai-fast) var(--ai-ease),
              border-color var(--ai-fast) var(--ai-ease);
}
.ai-nav .navigation a:hover,
.ai-nav .navigation a.active {
  color: var(--ai-heading);
  border-bottom-color: var(--ai-rose);
}

/* --- hamburger ---------------------------------------------- */

.ai-hamburger {
  display: none;
  width: 40px;
  height: 40px;
  padding: 9px 8px;
  background: none;
  /* Obramowanie niesie znaczenie (granica celu kliknięcia), więc min. 3:1 */
  border: 1px solid var(--ai-line-ui);
  border-radius: var(--ai-r-sm);
  cursor: pointer;
}
.ai-hamburger span {
  display: block;
  height: 2px;
  background: var(--ai-heading);
  border-radius: 1px;
  transition: transform var(--ai-fast) var(--ai-ease),
              opacity var(--ai-fast) var(--ai-ease);
}
.ai-hamburger span + span { margin-top: 5px; }
.ai-hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ai-hamburger.active span:nth-child(2) { opacity: 0; }
.ai-hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- menu mobilne ------------------------------------------- */

.ai-overlay {
  position: fixed;
  inset: var(--ai-pasek) 0 0;
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ai-s5);
  padding: var(--ai-s6) var(--ai-pad);
  background: var(--ai-bg);
  overflow-y: auto;
}
.ai-overlay[hidden] { display: none; }

.ai-overlay__menu { width: 100%; }
.ai-overlay .navigation {
  display: flex;
  flex-direction: column;
  gap: var(--ai-s2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ai-overlay .navigation li { margin: 0; }
.ai-overlay .navigation a {
  display: block;
  padding: var(--ai-s2) 0;
  font-family: var(--ai-font-display);
  font-weight: 700;
  font-size: 1.375rem;
  color: var(--ai-heading);
  text-decoration: none;
  border-bottom: 1px solid var(--ai-line);
}
.ai-overlay .navigation a:hover { color: var(--ai-rose); }

body.menu-otwarte { overflow: hidden; }

@media (max-width: 860px) {
  .ai-nav { display: none; }
  .ai-hamburger { display: block; }
  /* Bez menu zostają dwie kolumny — inaczej przyciski wpadłyby na środek,
     w miejsce zwolnione przez środkową kolumnę siatki. */
  .ai-topbar__in { grid-template-columns: 1fr auto; }
}

@media (max-width: 480px) {
  .ai-topbar__in { gap: var(--ai-s2); }
  .ai-logo__nazwa { font-size: 1.1875rem; }
  .ai-topbar__akcje .ai-btn { display: none; }  /* CTA żyje w menu mobilnym */
}


/* ============================================================
   Przełącznik motywu: jasny / ciemny / automatyczny

   Trzy przyciski zamiast jednego cyklującego. Przycisk cyklujący wymaga
   od użytkownika pamiętania, jaki jest następny stan, i nie daje czytnikowi
   ekranu sposobu na powiedzenie „wybrany jest ten". Tu każdy stan ma własny
   przycisk i własne `aria-pressed`.
   ============================================================ */

.ai-motyw {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--ai-card-alt);
  border: 1px solid var(--ai-line);
  border-radius: 999px;
}

.ai-motyw__opcja {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--ai-text-mute);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: color var(--ai-fast) var(--ai-ease),
              background-color var(--ai-fast) var(--ai-ease);
}

.ai-motyw__opcja svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ai-motyw__opcja:hover { color: var(--ai-heading); }

/* Stan wybrany niesie znaczenie, więc nie może opierać się na samym kolorze:
   niesie go też wypełniona powierzchnia pod ikoną. */
.ai-motyw__opcja[aria-pressed="true"] {
  color: var(--ai-on-accent);
  background: var(--ai-rose);
}

.ai-motyw__opcja:focus-visible {
  outline: 2px solid var(--ai-focus);
  outline-offset: 2px;
}

/* W pasku przełącznik znika razem z CTA — na wąskim ekranie żyje w menu. */
@media (max-width: 900px) {
  .ai-topbar__motyw { display: none; }
}

.ai-overlay__motyw { margin-top: var(--ai-s4); }
@media (min-width: 901px) {
  .ai-overlay__motyw { display: none; }
}