/* ------------------------------------------------------------------------------------------------------- podstawowe */
.schowaj{
  display: none !important;
}
/* -------------------------------------------------------------------------------------------------------- dark mode */

.dark p{
  color: #e9ffe9;
}
.dark h1, .dark h2, .dark h3, .dark h4{
  color: #e9ffe9;
}

/*-------------------------------------------------------------------------------------------------------------- font */
.font-16{
  font-size: 16px !important;
}
/* ---------------------------------------------------------------------------------------------------------------- a */
.a-rce{
  color: #6bb155;
  font-weight: 550;
  border-bottom: 1px solid transparent;
}
  .a-rce:hover{
    border-bottom: 1px solid #6bb155;
  }

/* -------------------------------------------------------------------------------------------------------------- img */
.img-border1{
  border-radius: 8px !important;
  border: 2px solid #c0dbb7;
}

/* ---- wysokości i szerokości */
.max-width-140px{
  max-width: 140px;
}.max-width-200px{
  max-width: 200px;
}
.h-140px{
  height: 140px;
}
.h-200px{
  height: 200px;
}
.h-250px{
  height: 250px;
}

/* --------------------------------------------------------------------------------------------------------- animacje */
/* Trzy kropki - paywall / ukryta treść */
.paywall-ellipsis{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 24px 0 8px;
  padding: 14px 0;
  position: relative;
  opacity: 0.95;
}

/* delikatne "zanikanie" treści ku dołowi (opcjonalnie, ale robi efekt) */
.paywall-ellipsis::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -28px;
  height: 28px;
  pointer-events: none;
  /*background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));*/
}

/* kropki */
.paywall-ellipsis .dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #78eb54;
  box-shadow: 0 6px 18px rgba(0,115,255,0.25);
  transform: translateY(0);
  animation: paywallDots 1.15s ease-in-out infinite;
}

/* opóźnienia, żeby "płynęły" */
.paywall-ellipsis .dot:nth-child(2){ animation-delay: 0.15s; opacity: 0.85; }
.paywall-ellipsis .dot:nth-child(3){ animation-delay: 0.30s; opacity: 0.70; }

@keyframes paywallDots{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* dostępność: jeśli ktoś ma wyłączone animacje */
@media (prefers-reduced-motion: reduce){
  .paywall-ellipsis .dot{ animation: none; }
}

/* -------------------------------------------------------------------------------------------------- paginacja stron */
/* PAGINATION AREA */
.pagination-area{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 0;
}

/* "Page:" */
.pagination-area h6{
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #111;
}

/* UL */
.pagination-area .paginations{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* LI */
.pagination-area .page-item{
  margin: 0;
  padding: 0;
}

/* LINKS - bazowy wygląd "kółek" */
.pagination-area .page-item a{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 34px;
  min-width: 34px;
  padding: 0 12px;            /* pozwala na "pop." / "nast." bez psucia wyglądu */
  border-radius: 999px;

  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;

  color: #111;
  background: #fff;
  border: 1px solid #e6e6e6;

  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* HOVER - zielony */
.pagination-area .page-item a:hover{
  background: #2ecc71;
  border-color: #2ecc71;
  color: #fff;
}

/* ACTIVE - zielony (jak na screenie) */
.pagination-area .page-item.active a{
  background: #2ecc71;
  border-color: #2ecc71;
  color: #fff;
}

/* Opcjonalnie: trochę ciaśniej dla pop./nast. */
.pagination-area .page-item.prev a,
.pagination-area .page-item.next a{
  min-width: auto;
  padding: 0 12px;
  font-weight: 800;
}

/* Opcjonalnie: focus (klawiatura) */
.pagination-area .page-item a:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(46, 204, 113, .25);
}

/* ------------------------------------------------------------------------------------------------ Teksty i artykuły */

.art-wstep{
  font-weight: bold !important;
  font-size: 120% !important;
}
.art-wstep::first-letter {
  float: left;
  font-size: 4.2em;
  line-height: 0.9;
  padding: 0.08em 0.12em 0 0;
  font-weight: 700;
  font-family: "Georgia", "Times New Roman", serif;
  color: #2b2b2b;
}
.dark .art-wstep::first-letter {
  color: #78eb54;
}

.art{

}

/* Szerokość wiersza (mega wpływa na czytelność) */
.art > *{
  /*max-width: 72ch;*/
}
.art > *:where(.full, .wide){
  max-width: none; /* jeżeli masz elementy full/wide */
}

/* Akapity */
.art p{
  margin: 0 0 1.1em !important;
  font-size: 120% !important;
}

/* Linki – bez narzucania koloru, ale z czytelnym podkreśleniem */
.art a{
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 0.08em;
  color: #3eb419 !important;
  font-weight: 600;
}
.art a:hover{
  text-decoration-thickness: 0.12em;
}
.art a:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 4px;
}
.dark .art a{
  color: #78eb54 !important;
}
  .dark .art a:hover{
    color: #3dff00 !important;
  }

/* Nagłówki */
.art h1,
.art h2,
.art h3,
.art h4,
.art h5,
.art h6{
  margin: 1.3em 0 0.55em !important;
  line-height: 1.25;
  font-weight: 700;     /* nie zmienia fontu, tylko wagę */
}

.art h1{ font-size: 200%; }
.art h2{ font-size: 180% !important; }
.art h3{ font-size: 170% !important; }
.art h4{ font-size: 1.35rem; }
.art h5{ font-size: 1.05rem; }
.art h6{ font-size: 1rem;   }

/* Pierwszy nagłówek bez dużej „dziury” */
.art :is(h1,h2,h3,h4,h5,h6):first-child{
  margin-top: 0;
}

/* ========== FORCE LIST STYLES INSIDE .art ========== */

/* ul/ol: przywróć wcięcia i markery (nawet gdy motyw je kasuje !important) */
.art ul,
.art ol,
.art .art ul,
.art .art ol {
  list-style: initial !important;
  list-style-position: outside !important;

  /* wcięcie */
  padding-left: 1.6em !important;
  margin-left: 0 !important;

  /* odstępy */
  margin-top: 0.6em !important;
  margin-bottom: 1.1em !important;

  /* bez pomniejszania */
  font-size: inherit !important;
  line-height: inherit !important;
}

/* wymuś typ markerów */
.art ul { list-style-type: disc !important; }
.art ol { list-style-type: decimal !important; }

/* li: musi być list-item, bo jeśli motyw daje display:flex, markery znikają */
.art ul > li,
.art ol > li,
.art ul li,
.art ul li li,
.art ul li li li,
.art ol li {
  display: list-item !important;
  line-height: 1.75 !important;
  margin: 0.35em 0 !important;
  padding-left: 0 !important;
  font-size: 18px !important;
}

/* markery: normalny rozmiar (czasem są zmniejszane) */
.art li::marker {
  font-size: 1em !important;
}

/* listy zagnieżdżone */
.art ul ul,
.art ol ol,
.art ul ol,
.art ol ul {
  padding-left: 1.3em !important;
  margin-top: 0.4em !important;
  margin-bottom: 0.8em !important;
}


/* Kursywa w akapicie i w li — tylko kolor, bez zmiany fontu/rozmiaru */
.art p > i,
.art li > i{
  color: #0073ff;
}

/* Cytaty */
.art blockquote{
  margin: 1.25em 0;
  padding: 1em 1.2em;
  border-left: 4px solid #e08a2e; /* ciepły bursztyn */
  background: rgba(224, 138, 46, 0.08);
  border-radius: 10px;
  overflow: hidden;
  color: #4a3b2a;
}

.art blockquote p{
  line-height: 1.7;
}

.art blockquote p:last-child{
  margin-bottom: 0;
}

.art blockquote cite{
  display: block;
  margin-top: 0.7em;
  font-style: normal;
  font-size: 0.95em;
  color: #7a5a2e;
  opacity: 0.9;
}

/* Krótki cytat w tekście */
.art q{
  quotes: "„" "”" "‚" "’";
}
.art q::before{ content: open-quote; }
.art q::after{ content: close-quote; }

/* Obrazki */
.art img{
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.15em 0;
  border-radius: 12px;
}

/* Jeśli obrazek jest linkiem, zachowaj spójność */
.art a img{
  text-decoration: none;
}

/* Podpis pod obrazkiem */
.art figure{
  margin: 1.25em 0;
}
.art figcaption{
  margin-top: 0.5em;
  font-size: 0.95em;
  opacity: 0.85;
}

/* Linie poziome */
.art hr{
  border: 0;
  border-top: 1px solid rgba(0,0,0,0.12);
  margin: 1.6em 0;
}

/* Kod i preformatowany tekst */
.art code{
  padding: 0.15em 0.35em;
  border-radius: 6px;
  background: rgba(0,0,0,0.06);
}
.art pre{
  overflow: auto;
  padding: 1em;
  border-radius: 12px;
  background: rgba(0,0,0,0.06);
  line-height: 1.55;
}
.art pre code{
  padding: 0;
  background: transparent;
}

/* Tabele – czytelne i responsywne */
.art table{
  width: 100%;
  border-collapse: collapse;
  margin: 1.2em 0;
  display: block;
  overflow-x: auto;
}
.art th,
.art td{
  padding: 0.7em 0.8em;
  border-bottom: 1px solid rgba(0,0,0,0.12);
  text-align: left;
}
.art th{
  font-weight: 700;
}

/* Elementy semantyczne – delikatne, czytelne */
.art strong{ font-weight: 700; }
.art em{ font-style: italic; }

/* Zmniejszenie „krzyku” bardzo długich słów/URL */
.art{
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Responsywne nagłówki na małych ekranach */
@media (max-width: 576px){
  .art{
    line-height: 1.7;
  }
  .art h1{ font-size: 1.7rem; }
  .art h2{ font-size: 1.45rem; }
  .art h3{ font-size: 1.25rem; }
}
.img-do-srodka{
  margin: 0 auto;
  width: 100%;
  text-align: center;
}
  .img-do-srodka img{
    max-width: 100%;
  }
.img-do-lewej {
  float: left;
  clear: left;
  max-width: 340px;
  margin: 0 14px 14px 0;
  background: #F5F5F5;
  border-radius: 10px;
  padding: 6px;
}

/* SMARTFONY */
@media (max-width: 768px) {
  .img-do-lewej {
    float: none;
    clear: none;
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 0 15px 0;
  }

  .img-do-lewej img {
    width: 100%;
    height: auto;
    display: block;
  }
}
  .dark .img-do-lewej{
    background: #222222;
  }
  .img-do-lewej img{
    max-width: 100%;
  }
.img-opis {
  margin-top: 8px;
  padding-left: 14px;
  font-size: 0.9rem;
  line-height: 1.45 !important;
  font-style: italic;
  border-left: 3px solid #2ecc71;
  overflow: hidden;
  clear: both;
  border-radius: 10px;
}


.art-zakrycie{
  position: relative;
  overflow: hidden;
}

/* zasłona gradientowa */
.art-zakrycie::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 60%; /* ile tekstu zakrywa od dołu */
  pointer-events: none;

  background: linear-gradient(
          to bottom,
          rgba(255,255,255,0) 0%,
          rgba(255,255,255,0.2) 20%,
          rgba(255,255,255,0.6) 50%,
          rgba(255,255,255,0.85) 75%,
          rgba(255,255,255,1) 100%
  );
}
.dark .art-zakrycie::after{
  background: linear-gradient(
          to bottom,
          rgba(22,22,22,0) 0%,
          rgba(22,22,22,0.2) 20%,
          rgba(22,22,22,0.6) 50%,
          rgba(22,22,22,0.85) 75%,
          rgba(22,22,22,1) 100%
  );
}
/* specjalne listy */
.lista-check{
  list-style: none !important;
  padding-left: 0 !important;
  margin: 15px 0 20px 0 !important;
}

.lista-check li{
  position: relative !important;
  padding-left: 32px !important;
  margin-bottom: 10px !important;

  font-size: 15px !important;
  line-height: 1.6 !important;
  color: #222 !important;
}
  .dark .lista-check li{
    color: #eee !important;
  }

/* ptaszek */
/* ptaszek */
.lista-check li::before{
  content: "✓" !important;
  position: absolute !important;
  left: 0 !important;
  top: 2px !important;

  width: 20px !important;
  height: 20px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 12px !important;
  font-weight: 700 !important;

  color: #2ecc71 !important;
  background: #eafaf1 !important;
  border-radius: 50% !important;
}

/* === WYJĄTEK: lista-check w .art ma swoje zasady (przebij globalne !important) === */
.art ul.lista-check,
.art .lista-check {
  list-style: none !important;
  list-style-type: none !important;
  padding-left: 0 !important;
  margin: 15px 0 20px 0 !important;
}

/* przebij globalne .art ul li { display:list-item; font-size:120%... } */
.art ul.lista-check > li,
.art .lista-check > li,
.art ul.lista-check li,
.art .lista-check li {
  display: block !important;          /* ważne: ukrywa markery */
  line-height: 1.6 !important;        /* cofamy 1.75 */
  margin: 0 0 10px 0 !important;      /* własne odstępy */
  padding-left: 32px !important;      /* miejsce na ptaszka */
  position: relative !important;
}

/* markery niech nie istnieją w ogóle */
.art ul.lista-check li::marker,
.art .lista-check li::marker {
  content: "" !important;
}
/* ----- ikona liczby komentarzy --- */
.comment-indicator {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: #2b2b2b;
}

.comment-icon {
  display: block;
  color: #2b2b2b;
}

.comment-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #2ecc71; /* zielone tło */
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  border-radius: 999px;
  text-align: center;
  box-shadow: 0 0 0 2px #fff;
}
/* ---------------------------------------------------------------------------------------------------- Galerie zdjęć */
.zdjecie-w-galerii {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  /*background: #f2f2f2;*/
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
}

.zdjecie-w-galerii img {
  width: 100%;
  height: 100%;
  display: block;
  margin: 20px auto;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.zdjecie-w-galerii:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}

.zdjecie-w-galerii:hover img {
  transform: scale(1.05);
}

/* -------------------------------------------------------------------------------------------------------- Pozostałe */
.social-area {
  display: flex;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.social-area li {
  display: flex;
}

.social-area a {
  width: 46px !important;
  height: 46px !important;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: end;
  background: #f2f2f2;
  color: #1a1a1a;
  text-decoration: none;
  font-size: 22px;
  transition: all 0.25s ease;
}

.social-area a:hover {
  background: #2ecc71;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

/* Ikony */
.social-area em {
  line-height: 1;
}

/* Dopasowanie do dark header (jeśli masz) */
.nav-right .social-area a {
  background: rgba(255,255,255,0.85);
}

/* komunikat plików cookies */
.cookie-banner,
.cookie-settings {
   position: fixed;
   left: 20px;
   right: 20px;
   bottom: 20px;
   z-index: 9999;
 }

.cookie-banner-box,
.cookie-settings-box {
  max-width: 760px;
  margin: 0 auto;
  background: #f8eefc;
  border: 1px solid #e2d2e8;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  padding: 20px;
  border-radius: 12px;
  color: #191919;
}

.cookie-banner p,
.cookie-settings p {
  margin: 0 0 15px 0;
  line-height: 1.6;
}

.cookie-banner p a{
  color: #5dd239;
  font-weight: bold;
}

.cookie-banner-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cookie-banner-buttons button {
  border: 0;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
}

#cookie-accept-all,
#cookie-save-settings {
  background: #111111;
  color: #ffffff;
}

#cookie-accept-necessary,
#cookie-settings-open,
#cookie-cancel-settings {
  background: #efefef;
  color: #111111;
}

.cookie-settings label {
  display: block;
  margin: 10px 0;
}