/* Reset podstawowych styli */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Ogólne ustawienia strony */
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  background-color: #e2ebd8; /* Stonowana zielonkawa szarość w stylu witryn przyrodniczych */
  color: #222222;
  padding: 20px 0;
}

/* Główny pojemnik ograniczający szerokość */
#container {
  width: 100%;          /* Na małych ekranach zajmie 100% szerokości */
  max-width: 960px;    /* Na dużych ekranach nie przekroczy 960px */
  margin: 0 auto;
  background-color: #ffffff;
  border: 1px solid #a3b899;
}

/* Nagłówek */
#header {
  background-color: #385e38; /* Ciemna, naturalna zieleń */
  color: #ffffff;
  padding: 25px 20px;
}

#header h1 {
  font-size: 28px;
  font-weight: normal;
  letter-spacing: 1px;
}

#header .subtitle {
  font-size: 13px;
  color: #cce3c4;
  margin-top: 5px;
}

/* Nawigacja górna */
#top-nav {
  background-color: #2c4a2c;
  border-top: 1px solid #487348;
  border-bottom: 1px solid #1e331e;
}

#top-nav ul {
  list-style: none;
  display: flex;
}

#top-nav li a {
  display: block;
  padding: 10px 18px;
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
  font-size: 13px;
}

#top-nav li a:hover {
  background-color: #487348;
}

/* Układ dwukolumnowy */
#main-content {
  display: flex;
  padding: 20px;
  gap: 20px;
}

/* Sidebar / Kolumna lewa */
#sidebar {
  width: 240px;
  flex-shrink: 0;
}

#sidebar h3 {
  font-size: 15px;
  background-color: #eef4eb;
  color: #2c4a2c;
  padding: 8px 10px;
  border-left: 4px solid #385e38;
  margin-bottom: 10px;
}

.side-menu {
  list-style: none;
  margin-bottom: 20px;
}

.side-menu li {
  border-bottom: 1px dashed #d0ddd0;
}

.side-menu li a {
  display: block;
  padding: 6px 8px;
  color: #333333;
  text-decoration: none;
  font-size: 13px;
}

.side-menu li a:hover {
  background-color: #f2f7f0;
  color: #1e331e;
  font-weight: bold;
}

.sidebar-box {
  background-color: #f7faf5;
  border: 1px solid #d0ddd0;
  padding: 12px;
  font-size: 12px;
  border-radius: 4px;
}

.sidebar-box h4 {
  color: #385e38;
  margin-bottom: 5px;
}

/* Główna treść / Kolumna prawa */
#content {
  flex-grow: 1;
}

#content h2 {
  color: #2c4a2c;
  font-size: 20px;
  margin-bottom: 8px;
}

#content h3 {
  color: #385e38;
  font-size: 16px;
  margin: 18px 0 8px 0;
}

#content hr {
  border: 0;
  height: 1px;
  background-color: #c2d4bc;
  margin-bottom: 15px;
}

#content p {
  margin-bottom: 12px;
  text-align: justify;
}

#content ul {
  margin-left: 20px;
  margin-bottom: 15px;
}

#content li {
  margin-bottom: 5px;
}

/* Zdjęcie i podpis */
.image-box {
  margin: 15px 0;
  text-align: center;
  background-color: #fafafa;
  padding: 8px;
  border: 1px solid #e0e0e0;
}

.image-box img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.caption {
  font-size: 12px;
  color: #666666;
  margin-top: 5px;
  font-style: italic;
}

/* Stopka */
#footer {
  background-color: #eef4eb;
  border-top: 1px solid #d0ddd0;
  padding: 15px;
  text-align: center;
  font-size: 12px;
  color: #555555;
}
/* Wymusza ustawienie kolumn obok siebie */
#main-content {
  display: flex;
  padding: 20px;
  gap: 20px;
}

/* Sztywna szerokość lewego menu */
#sidebar {
  width: 240px;
  flex-shrink: 0;
}

/* Prawa kolumna zajmuje całą pozostałą szerokość i automatycznie zawija tekst */
#content {
  flex: 1;
  min-width: 0; /* Ważne: zapobiega rozpychaniu kolumny przez długi tekst */
}
/* Sztywna siatka 2 kolumnowa */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Wymusza dokładnie 2 kolumny obok siebie */
  gap: 15px;
  margin-top: 20px;
}

.gallery-item {
  background-color: #f7faf5;
  border: 1px solid #d0ddd0;
  border-radius: 4px;
  overflow: hidden;
}

/* KADROWANIE DO KWADRATU */
.gallery-item img {
  width: 100%;
  aspect-ratio: 1 / 1;  /* Wymusza proporcje idealnego kwadratu */
  object-fit: cover;     /* Wytnie środek zdjęcia bez rozciągania */
  display: block;
}

/* DWULINIJKOWY PODPIS */
.gallery-caption {
  font-size: 12px;
  color: #222222;
  padding: 8px 10px;
  text-align: center;
  line-height: 1.4;
}

.gallery-caption strong {
  color: #2c4a2c;
  font-style: italic; /* Nazwy łacińskie tradycyjnie piszemy kursywą */
}

.gallery-caption span {
  color: #666666;
  font-size: 11px;
}

/* Responsywność dla telefonów - przełączenie na 1 kolumnę */
@media (max-width: 600px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }
}
/* Styl dla listy systematycznej */
.taxonomic-list ul {
  list-style-type: none; /* Usuwa domyślne kropki przy listach */
  margin-left: 18px;     /* Tworzy estetyczne wcięcie dla każdego poziomu */
  padding-left: 0;
}

.taxonomic-list > ul {
  margin-left: 0; /* Pierwszy poziom (Podrząd) zaczyna się od krawędzi */
}

.taxonomic-list li {
  margin-bottom: 4px;
  font-size: 13px;
  color: #333333;
}

/* Pogrubienie wyższych rang taksonomicznych */
.taxonomic-list strong {
  color: #2c4a2c;
}

/* Objaśnienia pod listą */
.taxonomy-footnotes {
  margin-top: 25px;
  padding-top: 10px;
  border-top: 1px dashed #c2d4bc;
  font-size: 11px;
  color: #555555;
}
/* Zwykły link (nieodwiedzony) */
a {
  color: #2c4a2c;           /* Ciemna, naturalna zieleń */
  text-decoration: none;     /* Usuwa domyślne podkreślenie */
  transition: color 0.2s;    /* Płynne przejście koloru po najechaniu */
}

/* Link po najechaniu kursorem myszy */
a:hover {
  color: #487348;           /* Jaśniejszy, żywszy odcień zieleni */
  text-decoration: underline; /* Pojawia się subtelne podkreślenie */
}

/* Link już odwiedzony */
a:visited {
  color: #385e38;           /* Stonowana, głębsza zieleń */
}
/* Styli tylko dla telefonów i tabletów */
img {
  max-width: 100%;
  height: auto;
}
@media (max-width: 768px) {
  
  /* Zmiana układu z dwóch kolumn na jedną (pionową) */
  #main-content {
    flex-direction: column;
    padding: 10px;
  }

  /* Szerokość menu na 100% */
  #sidebar {
    width: 100%;
  }

  /* Górne menu układa się w pionie */
  #top-nav ul {
    flex-direction: column;
  }

  #top-nav li a {
    text-align: center;
    border-bottom: 1px solid #385e38;
  }
}
/* Efekt płynnego przewijania strony do kotwicy */
html {
  scroll-behavior: smooth;
}

/* Podświetlenie źródła, do którego przeszliśmy po kliknięciu [1] */
.references-list li:target {
  background-color: #fff8c5; /* Delikatny żółty/złoty kolor wyróżnienia */
  border-left: 4px solid #385e38;
  padding-left: 8px;
  transition: background-color 0.5s ease;
}

/* Stylizacja indeksu górnego cytowania w tekście */
.citation {
  font-size: 0.8em;
  vertical-align: super;
  text-decoration: none;
  font-weight: bold;
  padding: 0 2px;
}
/* Nagłówek z logo i tekstem obok siebie */
#header {
  background-color: #385e38; /* Ciemna, naturalna zieleń */
  color: #ffffff;
  padding: 20px;
  
  /* Układ Flexbox stawia logo i tekst w jednym rzędzie */
  display: flex;
  align-items: center; /* Wyśrodkowanie w pionie */
  gap: 18px;           /* Odstęp między logo a tekstem */
}

/* Stylizacja obrazka logo w nagłówku */
.header-logo {
  width: 55px;        /* Dopasuj szerokość (np. 50-70px) */
  height: auto;       /* Zachowanie proporcji */
  flex-shrink: 0;     /* Zapobiega zmniejszaniu logo na małych ekranach */
}

/* Style nagłówka i podtytułu */
#header h1 {
  font-size: 28px;
  font-weight: normal;
  letter-spacing: 1px;
}

#header .subtitle {
  font-size: 13px;
  color: #cce3c4;
  margin-top: 3px;
}