/* Bootstrap domyślnie ustawia body.nav-fixed{padding-top:64px},
   zakładając STANDARDOWĄ (nie powiększoną) wysokość paska nawigacji.
   Skoro powiększyliśmy pasek (większa czcionka, większy padding -
   patrz #quarto-header .navbar niżej), 64px przestało być dokładne.
   Nadpisujemy na wartość zmierzoną w JS (scroll-navbar.js) i
   zapisaną jako --header-height; 64px zostaje tylko jako fallback,
   zanim JS zdąży policzyć prawdziwą wartość. */
body.nav-fixed {
  padding-top: var(--header-height, 64px) !important;
}

/* Quarto domyślnie chowa nagłówek przy scrollu w dół (biblioteka
   Headroom.js dodaje klasę "headroom--unpinned" i przesuwa pasek
   poza ekran przez transform: translateY(-100%)). Nadpisujemy to
   na sztywno, żeby pasek ZAWSZE zostawał przyklejony u góry. */
#quarto-header.headroom,
#quarto-header.headroom--unpinned,
#quarto-header.headroom--pinned,
#quarto-header.headroom--top,
#quarto-header.headroom--not-top {
  transform: translateY(0) !important;
  position: fixed !important;
  top: 0 !important;
  z-index: 1020;
}

/* Pasek nawigacji: zawsze przyklejony u góry (wymuszone powyżej),
   domyślnie nieco większy i płynnie "kurczący się" przy scrollu
   w dół. Nigdy się nie chowa. */

#quarto-header .navbar {
  transition: padding 0.2s ease, font-size 0.2s ease;
  font-size: 1.05rem;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

#quarto-header .navbar-brand {
  transition: font-size 0.2s ease;
  font-size: 1.25rem;
  font-weight: 600;
}

/* klasa dodawana przez shared/scroll-navbar.js po przekroczeniu
   40px scrolla */
#quarto-header.navbar-slim .navbar {
  font-size: 0.85rem;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

#quarto-header.navbar-slim .navbar-brand {
  font-size: 1rem;
}

.hero {
  padding: 2rem 0 1rem 0;
}

/* Sekcja "O mnie": zdjęcie po prawej, bio po lewej (na desktopie) */
.profile-photo {
  width: 100%;
  max-width: 260px;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

@media (max-width: 767px) {
  /* Na telefonie: zdjęcie nad tekstem, wyśrodkowane */
  .profile-photo {
    display: block;
    margin: 0 auto 1.5rem auto;
    max-width: 200px;
  }
}

/* żeby nagłówki sekcji nie chowały się pod stałym paskiem nawigacji
   przy skoku do kotwicy (#o-mnie, #publikacje itd.) - selektor musi
   celować w <section id="..."> a nie w <h2>, bo Quarto umieszcza
   atrybut id na sekcji, a nagłówek ma tylko data-anchor-id (używane
   do ikonki kotwiczki obok tytułu). h2[id] nigdy nie pasuje -
   to była martwa reguła. */
section[id] {
  /* offset = rzeczywista wysokość paska (zmierzona w JS) + 1rem
     zapasu, żeby nagłówek sekcji nie dotykał krawędzi paska */
  scroll-margin-top: calc(var(--header-height, 5rem) + 1rem);
  padding-top: 2rem;
  /* --bs-border-color to zmienna Bootstrapa, którą Quarto podmienia
     automatycznie zależnie od aktywnego motywu (jasny/ciemny) */
  border-top: 1px solid var(--bs-border-color);
  margin-top: 2rem;
}

.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  margin-right: 0.5rem;
  margin-top: 0.5rem;
  border-radius: 6px;
  text-decoration: none;
}

/* --bs-primary / --bs-body-color to zmienne motywu Bootstrap/Quarto -
   dzięki temu przyciski same dopasowują kolor przy przełączeniu
   jasny <-> ciemny, bez sztywno wpisanych kolorów */
.btn-primary {
  background-color: var(--bs-primary);
  color: var(--bs-body-bg);
}

.btn-outline-secondary {
  border: 1px solid var(--bs-body-color);
  color: var(--bs-body-color);
}

/* Linki w treści strony: delikatne podkreślenie na stałe w kolorze
   marki, żółte tło przy najechaniu (nie dotyczy przycisków .btn ani
   linków w pasku nawigacji - te mają własny styl). */
.quarto-container a:not(.btn):not(.navbar a) {
  color: var(--bs-body-color);
  text-decoration: underline;
  text-decoration-color: var(--bs-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  border-radius: 3px;
  padding: 0 2px;
  transition: background-color 0.15s ease;
}

.quarto-container a:not(.btn):not(.navbar a):hover {
  background-color: #fde047;
  color: #1a1a1a;
  text-decoration: none;
}

/* Przełącznik trybu jasny/ciemny: zamiast domyślnej ikonki suwaka
   (bi-toggle-off / bi-toggle-on) używamy słońca / księżyca z tej
   samej czcionki Bootstrap Icons, którą Quarto już ładuje - stąd
   kolor sam dopasowuje się do motywu, bez dodatkowego CSS na kolor. */
.quarto-color-scheme-toggle:not(.alternate) .bi::before {
  content: "\f1d1"; /* bi-brightness-high-fill - tryb jasny, kliknięcie przełącza na ciemny */
}

.quarto-color-scheme-toggle.alternate .bi::before {
  content: "\f494"; /* bi-moon-fill - tryb ciemny, kliknięcie przełącza na jasny */
}

/* Domyślny "pierścień fokusu" Bootstrapa (niebieska poświata przy
   kliknięciu/najechaniu Tabem) jest dość duży i intensywny na małej
   ikonce przełącznika - robimy go subtelniejszym, ale nie usuwamy
   całkiem (ważne dla dostępności - obsługi klawiaturą). */
.quarto-color-scheme-toggle:focus-visible,
#quarto-search:focus-visible {
  box-shadow: 0 0 0 .15rem rgba(26, 95, 180, 0.35);
}

/* Nazwa strony w navbarze ("HOME") zamieniona wizualnie na ikonę
   domku. Tekst zostaje w kodzie (ukryty tylko wizualnie, standardowa
   technika "visually-hidden") - czytniki ekranu nadal go odczytają,
   więc link do strony głównej pozostaje w pełni dostępny. */
#quarto-header .navbar-brand {
  display: inline-flex;
  align-items: center;
}

#quarto-header .navbar-brand .navbar-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#quarto-header .navbar-brand::before {
  font-family: "bootstrap-icons" !important;
  content: "\f425"; /* bi-house */
  font-size: 1.3rem;
  line-height: 1;
}