/*

Theme Name: NL4
Theme URI: http://nolim.pl
Description: Odświeżony szablon NL3 przy pomocy AI (Gemini). Wygląda bardzo podobnie, ale kod został zaktualizowany. UWAGA - raz na rok warto poprosić AI o jego przejrzenie pod kątem aktualności. Wersja 4.1- usunięto linki z tytułów postów w widoku posta, w widoku recenzji zmieniono wyświetlany tekst z "Tytuł płyty" na "Tytuł"
Version: 4.1
Author:  de-mo + Gemini (na podstawie: Anna (Blank-1-Right) + Zen (Delighted Black))
Author URI: 


*/

/* - BASIC STUFF - */

/* --- BASE STYLES AND RESET --- */

/*--uzywaj tak: var(--nazwa); --*/
:root {
    --ciemnofioletowy: #8e2c8e;
    --rozowy: #B82294;
    --jasnorozowy: #d584bf;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-size: 0.8125rem; /* Zmienne jednostki dla dostępności, 13px = 0.8125rem przy domyślnym 16px */
  font-family: 'Lato', Calibri, "Lucida Grande", Arial, Helvetica, sans-serif;
  line-height: 1.6;
  background-color:#f1f1f1;
  background-image: url(images/tlo_strony.png);
  background-repeat:repeat;
}

a {
    color: var(--rozowy);
    text-decoration: none;
  }

a:hover {
    /* Upewniamy się, że hover też nie ma podkreślenia */
    text-decoration: none; 
    color: var(--jasnorozowy);
}
  
  /* -- HEADINGS -- */

/* 1. Reset i podstawowe marginesy (dotyczy tylko standardowych h1-h6) */
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5em; /* Lepsza praktyka niż zerowanie obu marginesów */
    padding: 0;
}

/*TYTUŁ POSTA NA GŁÓWNEJ STRONIE*/
h2 {
    font-size: 1.2em;
    margin-bottom: 0; /* Ustawiamy 0, bo odstęp będzie definiowany przez h2 a */
}

h2.post-title-content, /*TYTUŁ POSTA WEWNĄTRZ POSTA*/
h2 a,
h2 a:link,
h2 a:visited {
    /* Właściwości przeniesione z .titlepost_a */
    font-size: 21pt;           /* Zmieniono na stałą wartość px, tak jak w oryginale */
    color: #000000;
    width: 100%;
    font-family: Calibri, 'Times New Roman', Times, serif; /* Dodano fallbacki */
    letter-spacing: 1px;
    font-weight: 500;
    display: block;            /* KLUCZOWE: Umożliwia ustawienie width i margin */
}



/* 2. Stylizacja głównego tytułu posta (wewnątrz wpisu) */
h2.post_title {
    font-size: 1.8em; /* Zmieniono na em, aby zachować skalowalność */
    margin-bottom: 15px; /* Dodano odstęp po tytule */
}

/* Nowy styl dla linku tytułowego */
h2.post-title-content a {
    display: block; /* Przywracamy, żeby zajmował całą szerokość .title-container */
    padding: 0; /* Zapewniamy, że nie ma paddingu */
    margin: 0; /* Zapewniamy, że nie ma marginesu */
}

h2.post-title-content a:hover {
    color: var(--ciemnofioletowy); 
}


/* 3. Stylizacja tytułu sekcji komentarzy */
h2#comments {
    margin: 20px auto 10px;
    font-size: 1.4em;
    /* UWAGA: 'auto' dla margin w tym kontekście ma sens tylko, 
       jeśli 'h2' ma zdefiniowaną szerokość, inaczej marginesy boczne będą ignorowane.
       Jeśli h2 ma być wyśrodkowane, potrzebuje 'text-align: center' lub 'display: block' z szerokością.
    */
}

/* 4. Hierarchia nagłówków wewnątrz treści posta */
.entry-content h3 {
    font-size: 1.4em;
}
.entry-content h4 {
    font-size: 1.2em;
}
.entry-content h5 {
    font-size: 1em;
}
.entry-content h6 {
    font-size: 0.9em;
}



.container {
    max-width: 1240px; /* Maximum content width*/
    margin: 0 auto;
    padding: 0 15px; /* Side padding */
}

/* --- SITE HEADER --- */

#site-header {
    color: white;
    /* Usunięcie dolnego paddingu dla styku z NAV */
    padding: 20px 0 0 0; 
    text-align: center;
}

#logo {
    margin-bottom: 0;
}

#logo img {
    display: block; 
    max-width: 100%;
    height: auto;
}




/* --- MAIN STRUCTURE (DEFAULT LARGE SCREEN LAYOUT) --- */

.content-wrapper {
  /* Właściwości Flexbox dla układu kolumnowego */
  display: flex; 
  flex-direction: row; 
  /*gap: 30px; */

  /* Właściwości kontenera (przeniesione z poprzedniego #main-content) */
  max-width: 1240px; /* Maksymalna szerokość treści */
  margin: 0 auto;
  padding: 0px 15px 20px 15px;
  background-color: #333333;
}

/* --- LEWA KOLUMNA (POSTS CONTAINER) --- */
#posts-container {
  background-color: white;
  padding: 20px;
  flex-basis: 75%; /* 70% width */
    /* DODANIE CIENIA WEWNĘTRZNEGO (INSET) */
  box-shadow: 
    /* Górny cień */
    inset 0 20px 10px -17px rgba(51, 51, 51, 0.8),
    /* Dolny cień */
    inset 0 -20px 10px -17px rgba(51, 51, 51, 0.8),
    /* Lewy cień */
    inset 20px 0 10px -17px rgba(51, 51, 51, 0.8),
    /* Prawy cień */
    inset -20px 0 10px -17px rgba(51, 51, 51, 0.8);
}

/* --- RIGHT COLUMN (SIDEBAR - STICKY) --- */

#sidebar {
    background-color: #333;
    color: white;
    flex-basis: 25%; /* 30% width */
    min-width: 250px; 
        /* STICKY SIDEBAR IMPLEMENTATION */
    position: sticky; 
    top: 20px;       /* Odsunięcie od góry po przyklejeniu */
    height: fit-content; /* Zapobiega rozciąganiu do pełnej wysokości kontenera */
}

/* --- PASEK KATEGORII NAD POSTEM --- */
.post-category-bar {
    /* Ustawienia Flexbox dla wyrównania treści (kategorii) */
    display: flex;
    justify-content: flex-end; /* Wyrównanie do prawej */
    align-items: center;
    color: white;
    font-size: 9pt;
        /* Wymiary i marginesy */
    width: 100%;
    min-height: 15px; /* Minimalna wysokość paska */
    padding: 2px 5px; /* Dodatkowy padding po bokach */

    /* Właściwości dotyczące ukrycia przepełnienia, aby gradient działał poprawnie */
    overflow: hidden; 
    position: relative; /* Potrzebne, by tło działało poprawnie na warstwach */
    z-index: 10;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: bold;

    /* TŁO WARSTWOWE Z ZANIKAJĄCYM GRADIENTEM (pozostaje bez zmian) */
    background: 
        /* 1. Górna warstwa: Gradient przezroczystości (zanikanie) */
        linear-gradient(
            to left, 
            rgba(255, 255, 255, 0) 0%,   
            rgba(255, 255, 255, 0.5) 40%, 
            rgba(238, 236, 237, 1) 100%  
        ),
        
        /* 2. Dolna warstwa: Pochylone pasy */
        repeating-linear-gradient(
            45deg,
            #5a5959,
            #5a5959 15px,
            #4d4d4d 15px,
            #4d4d4d 40px
        );
}

/* Opcjonalnie: Stylizacja linków kategorii, aby były bardziej czytelne */
.post-category-bar a {
    color: white;
    text-decoration: none;
    padding: 0 5px; /* Odstęp między nazwami kategorii */
}

.post-category-bar a:hover {
    color: #9a3998; /* Zgodnie z kolorem hover dla tytułów postów */
}


/*-----TYTUŁ POSTA i KROPKI -------------------*/

/* 1. WRAPPER GŁÓWNY: Ustawia kropki i tytuł obok siebie */
.title-with-dots-wrapper {
    display: flex;
    /* Kluczowe: wyśrodkowanie w pionie */
    align-items: center; 

    /* Utrzymujemy padding i marginesy, które były na starym h2 a */
    padding: 0px 10px 0px 2px; /* Zamiast paddingu na h2 a */
    /*padding-left: 20px; /* Wyrównanie do lewego brzegu */
    margin-bottom: 10px; 

    /* Ustawienia tła i ramki przeniesione ze starego h2 a */
    background-color: #eeeced;
}

/* 2. KONTENER KROPEK */
.dots-container {
    display: flex;
    height: 40px; 
    /* Daj mu stałą szerokość, np. 70px, aby pasował do kolumn */
    width: 42px; 
    flex-grow: 0;
    flex-shrink: 0;
    
    /* Mały margines separujący od tytułu */
    margin-right: 0px; 
    
    /* Domyślne style dla .dots-container z twojego kodu */
    /*gap: 1px; /* Odstęp 2px między kolumnami */
    padding-top: 1px; 
    padding-bottom: 0; 
    border: none;
}

/* 3. KONTENER TYTUŁU */
.title-container {
    flex-grow: 1; /* Pozwala tytułowi zająć całą resztę miejsca */
}

/* 4. Podstawowy styl kolumny */
.column {
    width: 5.2px; 
    display: flex;
    flex-direction: column; 
    align-items: center; 
    padding: 0; 
}

/* 5. Podstawowy styl kropki */
.dot {
    width: 5px; 
    height: 5px;
    background-color: var(--ciemnofioletowy); 
    border-radius: 50%;
    margin: 3px 0; 
    flex-shrink: 0; 
    /* DODANIE: Cień bez przesunięcia i rozproszenia, z rozmyciem */
    box-shadow: 0 0 2.5px 0 var(--ciemnofioletowy); /* Przesunięcie 0, Rozmycie 1px, Rozproszenie 0, Kolor #9b3a9b */
}

/* 6. Wersja większej kropki */
.dot.large {
    width: 6px;
    height: 6px;
    background-color: var(--ciemnofioletowy); 
    /* ZMIANA: Zwiększony promień rozmycia na 4px */
    box-shadow: 0 0 4px 0 var(--ciemnofioletowy);
}

/* 7. Indywidualne style kolumn */
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6 {
    justify-content: center;
}

.col-7 {
    justify-content: space-between;
    margin: 3px 0; 
}


/* --- POSTS LIST STYLES (Thumbnail Layout) --- */

article.post-item {
    margin-bottom: 30px;
    border: 1px  rgb(185, 185, 185);
     /*---CIEŃ - wersja 4 */
    /* ZMIANA: Zmniejszony zasięg cienia (mniejsze przesunięcie i rozmycie) */
    box-shadow: 
    /* Przesunięcie pionowe 5px, rozmycie 12px, czarny kolor z 20% kryciem */
    0 5px 12px rgba(0, 0, 0, 0.20);

    /* Dodanie tła, ponieważ ramka zniknęła */
    background-color: #f3f3f3; /*tło na którym są wszystkie składowe posta - jak dodasz gdzieś margines, np. do post-footer, to wtedy w pasku marginesu pojawi się to tło - dla sprawdzenia możesz wstawić tutaj yellow */
    /*padding: 20px; /* Dodaj padding, który był częściowo w ramce */

    /* KLUCZOWE: Ustawienie pozycji dla elementów absolutnych wewnątrz */
    position: relative;
    }


.post-flex-wrapper {
    display: flex; 
    /*gap: 20px; */    
    align-items: flex-start; 
    margin-bottom: 15px;
}

/** DATA BADGE - PRZENIESIONE I DOSTOSOWANE **/

.date-badge { 
    /* Domyślny styl: z pozycji absolutnej przechodzimy na Flex, aby mieć lepszą kontrolę */
    display: flex;
    flex-direction: column;
    
    /* Pozycjonowanie absolutne zostawiamy, aby zachować układ z lewej */
    position: absolute; 
    top: 0px; /* Odsunięcie od góry (np. 20px) */
    left: -70px; /* Zmienna stała dla odsunięcia na lewo, dostosowana do pikseli */
    
    width: 50px; /* Stała szerokość w px jest łatwiejsza do zarządzania */
    border: 1px solid #999; 
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1.1; 
    z-index: 20; 
    overflow: hidden; /* Zapobiega ewentualnemu przepełnieniu */
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); /* Delikatny cień na tekście */
}

.date-badge span { 
    display: block; 
    text-align: center; 
    padding: 3px 0; /* Ujednolicone paddingi */
}

.postDay { 
    font-size: 1.7rem; /* Większy rozmiar dnia */
    background-color: #f6f5f6;
    color: #333;
    /*font-weight: bold;*/
}
    
.postMonth { 
    text-transform: uppercase; 
    font-size: 0.8rem; /* Mniejszy, dyskretniejszy miesiąc */
    background-color: #eeeced;
    color: #555;
}

.postYear { 
    background-color: var(--ciemnofioletowy); /* Fioletowy akcent */
    color: #ffffff; 
    font-size: 0.9rem; 
    font-weight: 500;
}

/** KONIEC DATA BADGE **/

.post-thumbnail {
    flex: 0 0 200px; /* Fixed width of 200px */
    max-width: 200px;
    padding:4px;
    margin-left: 20px;
    /*background-color:#e5e5e5;*/
    
}

.post-thumbnail img {
    width: 100%;
    /*height: auto;*/
    height: 200px; /**zamiana height:auto na konkretną wartość, żeby thumbnaile były zawsze kwadratem o określonej wielkości - jeśli tego nie zrobię, to jeśli użyję wysokiego obrazka to to głupio wygląda */
    object-fit: cover; /*sprawia, że przy ustawieniu określonej wielkości obrazka zachowuje on proporcje */
    display: block;
    border:5px solid #dddddd;  
    transition: transform 0.3s ease-in-out;

}

.post-thumbnail img:hover {
    transform: scale(1.03);
}

.post-content-area {
    flex-grow: 1; 
    /* DODANE STYLE DLA POZYCJONOWANIA PRZYCISKU */
    display: flex;             /* Aktywuje Flexbox */
    flex-direction: column;    /* Ustawia elementy w kolumnie (jeden pod drugim) */
    /* WAŻNE: Wymuś na post-content-area, by rozciągnął się na całą dostępną wysokość */
    height: 100%;
    padding-left: 20px;
    padding-right: 20px;
    text-align: justify;
    /*background-color: rgb(180, 116, 240); /*TEST*/
}

.entry-content {
    /* Pozwól treści zajmować tyle miejsca, ile potrzebuje, nie kurcząc jej */
    flex-grow: 1;
}

/*------------------INFORMACJE - data i kategoria pod tytułem posta na stronie głównej ---------------------*/

.post-meta-line {
    font-size: 0.7rem; /* Mniejsza czcionka niż tytuł */
    color: #666; /* Szary kolor */
    margin-bottom: 15px; /* Odstęp od treści posta */
    display: block;
    line-height: 1.5;
    padding-left: 5px;
    padding-top: 5px; 
    padding-bottom: 5px; 
    position: relative; /* Umożliwia pozycjonowanie pseudoelementów */
}

.post-meta-line::before {
    content: '';
    position: absolute;
    top: 0; /* Lokalizacja: Góra elementu */
    left: 0;
    width: 100%;
    height: 2px; /* Grubość paska */
    
    /* Tworzenie gradientu: Kolor (#d584bf) przechodzi w przezroczystość */
    background-image: linear-gradient(to right, var(--jasnorozowy) 0%, rgba(213, 132, 191, 0) 100%);
}

/* 2. Dolny pasek zanikający */
.post-meta-line::after {
    content: '';
    position: absolute;
    bottom: 0; /* Lokalizacja: Dół elementu */
    left: 0;
    width: 100%;
    height: 2px; /* Grubość paska */
    
    /* Tworzenie gradientu: Kolor (#d584bf) przechodzi w przezroczystość */
    background-image: linear-gradient(to right, var(--jasnorozowy) 0%, rgba(213, 132, 191, 0) 100%);
}

.post-meta-line .separator {
    margin: 0 5px; /* Odstęp wokół ukośników */
    font-weight: normal;
}
   

/*-----------------KONIEC INFORMACJI - data i kategoria pod postem------------*/


.post-gallery-info {
    padding: 0px 20px 10px 0px;
    font-size: 0.8rem;
    font-style: italic;
}

/* ==================================== */
/* STYLIZACJA STOPKI POSTA (AUTOR I PRZYCISK) */
/* ==================================== */
.post-footer {
    /* Ustawienie Flexboxa */
    display: flex;
    
    /* Wyrównuje elementy do lewej i prawej krawędzi kontenera */
    justify-content: space-between; 
    /* Wyrównuje elementy w pionie */
    align-items: center; 
    /* Dodatkowy odstęp, jeśli potrzebny */
    padding: 5px 0 5px 5px;
    /*padding: 0 5px 0px 5px;*/
    background-color: #eeeced;
}

/* Stylizacja informacji o autorze (opcjonalnie) */
.post-author-info {
    font-size: 11px;
    color: #333;
    margin-left: 20px;
   
}



/*--------------przycisk CZYTAJ DALEJ---------------*/
.read-more,
.read-more:link, 
.read-more:visited {
    display: inline-block; 
    text-decoration: none;
    opacity: 0.8;
    flex-shrink: 0;
    /* Ustawienie marginesów i wyrównania Flexbox */
    /*margin-top: 10px; /* Odstęp między tekstem a przyciskiem */
    align-self: flex-end;
    width: fit-content; 
    /* Style wizualne przycisku */
    padding: 3px 18px; 
    color: white;
    font-size: 0.9em;
    letter-spacing: 0.7px;
    word-spacing: 5px;
    border: 2px solid #A9A9A9; /* Ramka dopasowana do koloru pasów */
    border-radius: 4px;
    
    /* ZMIANA: TŁO NA POCHYLONE PASY */
    background: repeating-linear-gradient(
        45deg,
        #525252,
        #525252 10px, /* Mniejszy rozmiar pasów dla małego elementu */
        #424242 10px,
        #424242 20px
    );

    /* ZMIANA: Przejście dla tła, jeśli tło jest gradientem */
    transition: opacity 0.2s; 
}

/* Opcjonalny efekt hover */
.read-more:hover {
    opacity: 1; /* Przyciemnienie wzoru przy najechaniu */
    
}

/*--------------koniec przycisku CZYTAJ DALEJ---------------*/

/* --- SITE FOOTER --- */

#site-footer {
    background-color: #424242;
    color: #bbb;
    padding: 20px 0;
    text-align: center;
    /* KLUCZOWE: Ustawienie pozycji dla elementów absolutnych wewnątrz */
    position: relative;
}

/* ==================================== */
/* --- PRZYCISK POWROTU NA GÓRĘ (BACK TO TOP) --- */
/* ==================================== */

#back-to-top {
    /* Pozycjonowanie absolutne w stosunku do #site-footer */
    position: absolute;
    /* Umieszczenie w prawym dolnym rogu stopki */
    bottom: 10px; 
    right: 30px; 
    
    /* Wygląd przycisku */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    color: white; 
    border-radius: 4px; /* Delikatne zaokrąglenie */
     
    /* Zapewnienie, że znajduje się na wierzchu */
    z-index: 100;
    transition: background-color 0.3s, color 0.3s;
}

#back-to-top i {
    font-size: 1.2rem;
}

/* Efekt najechania myszą */
#back-to-top:hover {
    background-color: var(--ciemnofioletowy); /* Użycie fioletowego akcentu */
    color: white;
    box-shadow: 0 4px 8px rgba(142, 44, 142, 0.6);
}





/* ==================================== */
/* --- RESPONSIVENESS (MEDIA QUERIES) --- */
/* ==================================== */

/* Layout for SMALL screens (screens narrower than 768px) */
@media (max-width: 768px) {
    
    #main-content {
        /* Elements stacked vertically (column) */
        flex-direction: column; 
    }

    #posts-container, #sidebar {
        /* Take full width */
        flex-basis: auto; 
        width: 100%;
        /* Wyłączenie sticky na małych ekranach */
        position: static; 
        top: auto; 
    }
    
    .post-flex-wrapper {
        /* Miniatury nad treścią na małych ekranach */
        flex-direction: column; 
    }
    
    .post-thumbnail {
        /* Miniatura na całą szerokość kolumny wpisów */
        flex: 0 0 auto;
        max-width: 100%;
    }
}





/* ----PAGINATION (Nawigacja) -------------------------------------- */
/* --- PAGINATION WRAPPER (Nowy kontener dla paska) --- */
.pagination-wrapper {
    /* Ustawienie szerokości paska na szerokość kontenera postów */
    width: 100%; 
    /*min-height: 30px; /*odkomentuj jeśli chcesz żeby w kategoriach, gdzie jest niewystarczająca liczba postów, wyświetlał się pusty pasek paginacji*/
    
    /* Wymiary paska */
    padding: 2px 0; /* Górny/dolny padding, zero po bokach */
    
    /* Stylizacja paska */
    background-color: #eeeced; /* Tło paska */
    border-top: 1px solid #bfbfbf; /* Górna ramka paska */
    
    /* Przywrócenie marginesów wewnętrznych, aby pasek się nie lepił */
    margin-top: 20px; 
    margin-bottom: 20px;
}

/* --- PAGINATION (Kontener Flexbox wewnątrz paska) --- */
.navigation.pagination {
    display: flex; 
    justify-content: flex-start; 
    align-items: center;
    font-size: 9px;
    line-height: 1; 
    
    /* Wyrównanie do lewej i przesunięcie o ten sam padding co #posts-container */
    padding-left: 20px; 
    
    /* Usunięcie domyślnej ramki, która mogłaby kolidować z paskiem */
    border: none;
    background-color: transparent;
    margin: 0; /* Zerowanie marginesów, by pasek był gładki */
} 

/* Wymuszamy, aby główny kontener numerów stron też był inline/flex (jeśli to konieczne) */
.nav-links {
    display: flex; /* Wyrównuje linki stron, Poprzednia/Dalej wewnątrz listy */
    align-items: center;
    /* Usuń domyślne style, które mogłyby złamać linię */
    list-style: none;
    margin: 0;
    padding: 0;
}

/* --- STYLIZACJA PRZYCISKÓW NUMERÓW STRON (Normalny stan) --- */
.nav-links a.page-numbers,
.nav-links .page-numbers {
    display: inline-block;
    vertical-align: middle;
    
    /* Cieniusieńka ramka i tło dla przycisków */
    border: 1px solid #bfbfbf; /* Cieniusieńka ramka */
    background-color: #eeeeee; /* Tło */
    color: #333;
    text-decoration: none;

    /* Ujednolicenie wysokości */
    height: 30px; 
    line-height: 30px; 
    padding: 0 8px; /* Odstępy wewnątrz */
    margin: 0 2px;
}

/* --- PRZYCISK AKTYWNEJ STRONY --- */
.nav-links .current {
    border: none;
    border-bottom: 2px solid var(--ciemnofioletowy); /* Dolna ramka - nowy kolor */
    background: #ffffff; /* Tło aktywnej strony */
    color: black;
    font-weight: bold;
}

/* --- EFEKT HOVER DLA ZWYKŁYCH PRZYCISKÓW --- */
.nav-links a.page-numbers:hover,
.nav-links .prev:hover,
.nav-links .next:hover {
    border: none;
    border-top: 2px solid var(--ciemnofioletowy); /* Górna ramka przy najechaniu */
    border-right: 1px solid #bfbfbf;
    border-bottom: 1px solid #bfbfbf;
    border-left: 1px solid #bfbfbf;
    background-color: #ffffff; /* Tło na białe */
    color: #333;
    padding-top: 0; /* Zresetowanie paddingu, żeby ramka się zmieściła */
}

/* --- NOWE WRAPPery dla przycisków Start/Koniec --- */
.custom-start-button-wrapper,
.custom-end-button-wrapper {
    display: flex;
    align-items: center;
    margin: 0; /* Reset */
    padding: 0; /* Reset */
}

/* Dodajemy odstępy, aby odsunąć przyciski od numeracji */
.custom-start-button-wrapper {
    /* Odstęp po przycisku START (przed resztą) */
    margin-right: 5px;
}

.custom-end-button-wrapper {
    /* Odstęp przed przyciskiem KONIEC (po reszcie) */
   margin-left: 5px;
}


/* --- KOREKTA PRZYCISKÓW START/KONIEC --- */
.custom-end-start-button {
    /* Upewniamy się, że ten kontener jest elementem inline lub flex */
    display: flex;
    align-items: center;
    margin-left: 10px; /* Dodajemy mały odstęp od listy numerów */
}

/* --- STYLIZACJA PRZYCISKÓW START/KONIEC (łączymy reguły w jedną) --- */
.custom-start-button-wrapper a,
.custom-end-button-wrapper a {
    /* Utrzymujemy wyrazistość Start/Koniec */
    background-color: #333333;
    color: white;
    border: 1px solid #333333;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
}

/* ----KONIEC PAGINATION (Nawigacja) -------------------------------------- */


/*---------------------------------------------
/*---------S I D E B A R -- P A S E K ----------
/*----------------------------------------------*/


.widget-area
{
 padding-left:20px;   
 padding-right: 5px;
 /*font-size: 8pt;*/  
}

.widget {
    margin-bottom: 10px; /*odstęp między widżetami*/
}

.widget-title {
    background-color: var(--ciemnofioletowy);
    text-transform: uppercase;
    letter-spacing: 0.3vh;
    padding: 4px 10px;
    font-size: 9pt;
}

.widget ul {
    margin-left:14px;
    list-style:none;
}

.widget ul li {
    border-bottom:1px solid #dbdbdb;
    padding:4px;
}

.widget ul li:last-of-type {
    border-bottom: none; 
}

.widget ul li a,
.widget ul li a:link,
.widget ul li a:visited {
    color: #999999;
} 

.widget ul li a:hover {
    color: var(--ciemnofioletowy);
}


/*----ABOUT US ----*/
.aboutustitle {
    font-size:13px;
    font-family:calibri,tahoma;
    text-align:center;
    text-transform:uppercase;
    margin-bottom:8px;
    padding-bottom:5px;
    border-bottom:1px solid #cccccc;
    }

.aboutus {
    margin-bottom:20px;
    font-size:11px;
    line-height:20px;
    text-align: justify;
    }

    .sign {
	text-align: right;
	padding-bottom:5px;
    border-bottom:1px solid #cccccc;
}
    

/**--------SEARCH-WYSZUKIWARKA---------------*/

/* ==================================== */
/* 1. KONTENER GŁÓWNY WYSZUKIWARKI (div.search-form) */
/* ==================================== */
.search-form {
    width: 100%;
    background-color: #5a5959;
    padding: 3px;
    margin-bottom:20px;
    }

/* Upewniamy się, że etykieta nie dodaje marginesów */
.search-form-custom label {
    /* W Flexboxie to ustawienie sprawia, że elementy wewnątrz label */
    /* stają się bezpośrednimi dziećmi rodzica (form.search-form-custom), */
    /* ale ponieważ label zawiera input, lepiej użyć display: block */
    display: block; 
    
    /* Upewniamy się, że label zajmuje przestrzeń inputa i pozwala mu się rozciągać */
    flex-grow: 1; 
    flex-basis: 0;
    
    /* Zero marginesów */
    margin: 0; 
}

/* ==================================== */
/* 2. KONTENER FORMULARZA (form.search-form-custom) */
/* Flexbox, który rozciągnie elementy wewnętrzne */
/* ==================================== */
.search-form-custom {
    display: flex; /* Aktywuje Flexbox */
    align-items: stretch; /* Upewnia się, że pole i przycisk mają tę samą wysokość */
    width: 100%;
}

/* ==================================== */
/* 3. STYLIZACJA POLA TEKSTOWEGO (Input) */
/* Polu dajemy flex-grow, aby zajęło całą wolną przestrzeń */
/* ==================================== */
.search-field-custom {
    /* Wypełnij całą pozostałą przestrzeń */
    flex-grow: 1; 
    flex-basis: 0; 
    width: 100%;
    font-size: 13px;
    padding: 5px; /* Dodano padding dla lepszego wyglądu */
    border: none;
    line-height: 1.5; /* Utrzymanie tekstu w środku */
    margin-right: 2px;
    box-shadow: 
 /* Górny cień */
 inset 0 15px 10px -15px rgba(51, 51, 51, 0.8),
 /* Dolny cień */
 inset 0 -15px 10px -15px rgba(51, 51, 51, 0.8),
 /* Lewy cień */
 inset 15px 0 10px -15px rgba(51, 51, 51, 0.8),
 /* Prawy cień */
 inset -15px 0 10px -15px rgba(51, 51, 51, 0.8);

}

/*----ramka w polu wyszukiwania po kliknięciu ----*/
.search-field-custom:focus {
    /* Ustawia kolor konturu na #5a5959 */
    outline: 2px solid #333333; 

}

/* ==================================== */
/* 4. STYLIZACJA PRZYCISKU (Button) */
/* Przycisk ma stałą szerokość i centralne wyrównanie ikony */
/* ==================================== */
.search-submit-custom {
    /* Ustaw stałą szerokość i wysokość */
     width: 30px; /* Stała, mała szerokość na ikonę */
    
    /* Zapobiega rozciąganiu przycisku */
    flex-grow: 0; 
    flex-shrink: 0;
    
    /* Stylizacja wizualna */
    background-color: #5a5959; 
    border: none;
    cursor: pointer;
    
    /* Użycie Flexbox do WYŚRODKOWANIA IKONY */
    display: flex;
    justify-content: center; /* Wyrównanie w poziomie */
    align-items: center; /* Wyrównanie w pionie */
    padding-left: 2px;
}

/* ==================================== */
/* 5. STYLIZACJA IKONY (i.fa-search) */
/* Ustawienie koloru i rozmiaru ikony */
/* ==================================== */
.search-submit-custom .fa-search {
    color: #d4d5d6; /* Kolor ikony */
    font-size: 22px; /* Optymalny rozmiar */
}

.search-submit-custom .fa-search:hover {
    color: white;
} 

/* ZMIANA KOLORU PRZYCISKU KASOWANIA W POLU SEARCH */
.search-field-custom::-webkit-search-cancel-button {
    /* 1. Resetuje domyślny wygląd (usuwa wszelkie niebieskie kolory i cienie) */
    -webkit-appearance: none; 
    
    /* 2. Resetuje filtry (jeśli jakieś zostały) */
    filter: none;
    
    /* 3. Ustawia własną ikonę "X" w kolorze #5a5a5a (ciemnoszary) */
    /* UWAGA: Kod SVG jest zakodowany jako URL, dlatego jest długi. */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%235a5a5a" viewBox="0 0 16 16"><path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/></svg>');
    
    /* 4. Upewniamy się, że tło jest poprawnie wyświetlone */
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    background-color: transparent;
    
    /* Opcjonalnie: zmień wymiary (jeśli chcesz, aby przycisk był większy/mniejszy) */
    width: 20px; 
    height: 20px;
    
    /* Ważne: Zresetuj kursor, aby wyglądał jak klikalny element */
    cursor: pointer;
}



/*--------DO POPRACOWANIA---------------aRCHIWUM*/
.archive-category {
    /* Ustawienie szerokości paska na szerokość kontenera postów */
    width: 100%; 
    
    /* Wymiary paska */
    padding: 8px; /* Górny/dolny padding, zero po bokach */
    
    /* Stylizacja paska */
    background-color: #eeeced; /* Tło paska */
    border: 0.6px solid #cccccc; 
    
    /* Przywrócenie marginesów wewnętrznych, aby pasek się nie lepił */
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-size: 9pt;
    font-weight: bold;

}

.arch {
    display: flex;
    justify-content: space-between;
    align-items: center; 
}


/*--------POJEDYNCZY POST-------------------------*/

.post-flex-wrapper-singlepost {
    background-color: #f3f3f3;
    padding: 20px;
}

/*--musiałam utworzyć nową klasę tylko po to, żeby usunąć dolny margines --*/
.title-with-dots-wrapper-singlepost {
    display: flex;
    /* Kluczowe: wyśrodkowanie w pionie */
    align-items: center; 
    /* Utrzymujemy padding i marginesy, które były na starym h2 a */
    padding: 0px 10px 0px 2px; /* Zamiast paddingu na h2 a */
    /*padding-left: 20px; /* Wyrównanie do lewego brzegu */
    /*margin-bottom: 10px; */

    /* Ustawienia tła i ramki przeniesione ze starego h2 a */
    background-color: #f3f3f3;
    box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.4); 
    margin-bottom: 2px;

}

.post-meta-line-details {
    display: flex;
    flex-wrap: wrap; /* Pozwala kolumnom "załamać się" na mniejszych ekranach */
    /*gap: 30px; /* Odstęp między kolumnami */
    padding: 0px 10px;
    margin: 4px 20px 20px 20px;
    border-top: 1px dotted #cccccc;
    border-bottom: 1px dotted #cccccc;
    background-color: #eeeced;
    font-size: small;
    align-items: center;
    justify-content: space-between;
    min-height: 50px;
    
}

.meta-left {
        /* Ustawienie elastyczności: 1 część zajmowanej przestrzeni, minimalna szerokość 150px */
      /*  flex: 1 1 150px;*/
      font-size: 0.666rem;
}

.meta-right {
    /* Ustawienie elastyczności: 2 części zajmowanej przestrzeni, minimalna szerokość 250px */
    /*flex: 2 1 250px;*/
    text-align: right;
    
}

/* Stylizacja pojedynczych elementów <p> */
.metadata-item .metadata-item-small {
    margin: 0; /* Usuwamy domyślny margines z akapitów */
    padding: 2px 0;
    
}

.metadata-item-small {
    font-size: 0.60rem;
}

/* Etykiety (np. Wykonawca:, Data publikacji:) */
.metadata-label {
    font-weight: bold;
    color: #333;
    margin-right: 5px;
}

/* RESPONSYWNOŚĆ: Dla małych ekranów (np. telefony) */
@media (max-width: 600px) {
    .post-metadata-columns {
        flex-direction: column; /* Ustawiamy kolumny pionowo jedna pod drugą */
        gap: 15px; /* Mniejszy odstęp pionowy */
        padding: 15px;
    }
    
    /* Na małych ekranach obie kolumny zajmują całą dostępną szerokość */
    .post-column-left,
    .post-column-right {
        flex: 1 1 100%;
        min-width: unset;
    }
}


.post-content-area-singlepost {
   background-color: #f3f3f3;
}

.entry-content-singlepost {
    padding-left: 20px;
    padding-right: 20px;
    text-align: justify; 
}


/*--------------------------------------*/
/*TAKSONOMIE w widoku pojedynczego wpisu będącego częścią Serii wpisów */
/*-------------------------------------*/
.post-taxonomies {
    display: block;
    /*flex-wrap: wrap; /* Pozwala kolumnom "załamać się" na mniejszych ekranach */
    /*gap: 30px; /* Odstęp między kolumnami */
    padding: 0px 10px;
    margin: 4px 20px 0px 20px;
    border-top: 1px dotted #cccccc;
    border-bottom: 1px dotted #cccccc;
    font-size: 0.8rem;;
    min-height: 30px;
    
}

.post-taxonomies .metadata-item {
    font-style: italic;
}



/* ----------------------------------- */
/* NOWY STYL: Pasek Detali Autora (Pod treścią posta) */
/* ----------------------------------- */
.post-author-details-bar {
    display: flex;
    align-items: center; /* Wyśrodkowanie pionowe wszystkich elementów */
    flex-wrap: wrap; /* Zawijanie elementów na mniejszych ekranach */
    gap: 15px; /* Domyślny odstęp między elementami */
    padding: 15px 20px;
    /*margin-top: 20px; /* Oddzielenie od treści posta */
    margin: 20px 20px 0px 20px;
    /*margin-bottom: 20px; /* Oddzielenie od stopki posta */

    background-color: #eeeced;
    border-top: 1px dotted #cccccc;
    border-bottom: 1px dotted #cccccc;
    /*border: 1px solid #eeeeee; /* Cienka, jasna ramka */
    font-size: 0.75rem; /* Cała sekcja jest nieco mniejsza */
    line-height: 1.4;
    
}

.author-details-avatar {
    /* Styl dla awatara */
    width: 45px;
    height: 45px;
    overflow: hidden;
    flex-shrink: 0; /* Zapobiega zmniejszaniu awatara */
    /*box-shadow: 0 0 0 2px var(--ciemnofioletowy); /* Ramka akcentująca */
}

.author-details-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.details-separator {
    color: #999999;
    padding: 0 5px;
}

.details-meta-item {
    display: inline-flex;
    align-items: center;
    white-space: nowrap; /* Zapobiega łamaniu się daty/autora */
}

.details-meta-item .label {
    font-weight: bold;
    color: var(--ciemnofioletowy);
    margin-right: 3px;
}

.details-meta-item a {
    color: #333;
    text-decoration: none;
    transition: color 0.2s;
}

.details-meta-item a:hover {
    color: var(--rozowy);
}

.test {
    margin: 20px 0;
    border-top: 15px dotted white;
    border-bottom: 15px dotted white;
    height: 150px;
}




/*------SEPARATOR W FORMIE 2 LINII - DO WIELOKROTNEGO WYKORZYSTANIA-----*/
.separator-line {
    padding: 1px 20px; /* Zwiększony padding, aby cień był lepiej widoczny */
    background-color: #eeeced; /* Tło paska (jasnoszare) */
    /*----WERSJA 1----*/
    /*border-top: 1px solid #bfbfbf; /* Górna ramka paska */
    /*border-bottom: 1px double #cccccc; /* Dolna ramka paska (podwójna linia) */
    /*----koniec WERSJA 1----*/
    
    /*----WERSJA 2----*/
    border-top: 1px dotted #bfbfbf; /* Górna ramka paska */
    border-bottom: 1px dotted #cccccc; /* Dolna ramka paska (podwójna linia)
    /*----koniec WERSJA 2----*/
    /* DODANY CIEŃ: Wewnętrzny cień, który symuluje wklęsłość/głębię */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), /* Cień z góry */
              inset 0 -1px 3px rgba(255, 255, 255, 0.5); /* Jasny blask z dołu dla efektu 3D */
    /* Dodajemy margines, aby oddzielić elementy */
   /* margin: 10px 0 20px 0;*/
   /*margin: 0px 20px;*/
}



/*---------------------NAWIGACJA PO POSTACH -------------------------*/

/* Ustawienie kontenera do użycia Flexbox, co pozwala na rozmieszczenie elementów po skrajnych stronach */
.post-navigation-container {
    display: flex;
    justify-content: space-between; /* Rozsuwa lewy i prawy element */
    width: 100%;
    padding: 0 10px;
    border-top: 5px solid #eee; /* Opcjonalna linia separująca */
    /*border-top: 2px solid red;*/
}

/* Wyrównanie i szerokość dla obu sekcji nawigacyjnych */
.nav-prev,
.nav-next {
    max-width: 48%; /* Daje trochę przestrzeni między nimi */
}

/* Styl dla nagłówka "Poprzedni wpis" / "Następny wpis" */
.nav-label {
    display: block; /* Upewnia się, że etykieta zajmuje całą szerokość */
    font-size: 0.8rem;
    font-weight: 600;
    color: #000000; /* CZARNY kolor, zgodnie z życzeniem */
    margin-bottom: 5px;
    opacity: 0.7;
    transition: opacity 0.3s;
}

/* Styl dla tytułu wpisu (linku) */
.nav-title {
    font-size: 0.7rem;
    font-weight: 500;
    /*line-height: 1.3;*/
}


/* Wyrównanie tekstu dla lewej (Poprzedni) */
.nav-prev {
    text-align: left;
}

/* Wyrównanie tekstu dla prawej (Następny) */
.nav-next {
    text-align: right;
}

/* Puste miejsce (placeholder), gdy link nie istnieje, aby zachować formatowanie */
.nav-placeholder {
    visibility: hidden;
}

/* ------------------------------------------------------------- */
/* RESPONSYWNOŚĆ: Zmiana układu na wierszowy na małych ekranach */
/* ------------------------------------------------------------- */
@media (max-width: 768px) {
    .post-navigation-container {
        flex-direction: column; /* Układa elementy jeden pod drugim */
        gap: 20px;
    }

    .nav-prev,
    .nav-next {
        max-width: 100%; /* Pełna szerokość */
        text-align: center; /* Wyśrodkowanie na telefonach */
    }
}

/*----------------koniec NAWIGACJA PO POSTACH -------------------------*/

.thumbspis {
    border: 2px solid pink;
    width: 120px;
}


/**-------------------------------------------------------*/
/**-------STYLIZACJA MOICH WZORCÓW WPISÓW----------------*/


/*--------styl dla MÓj Wzorzec 1 ------------------------*/
.moj-wzorzec-recenzja {
    /*padding: 20px;*/
    border-top: 1px dotted var(--ciemnofioletowy);
    overflow: hidden;
    margin-bottom: 20px;
    background-color: #eeeced;
}

.moj-wzorzec-recenzja img {
    float: left;
    margin: 0 20px 5px 0;
    width: 340px;
    height: 340px;
    object-fit: cover;          
    display: block;
    padding:3px;
    background-color:#fff;
    border:1px solid #cccccc;
}

.moj-wzorzec-recenzja h2 {
    color: var(--ciemnofioletowy);
    margin-top: 0;
    display: block;
    border-bottom: 1px dotted var(--ciemnofioletowy);

}

.moj-wzorzec-recenzja p {
    line-height: 1.6;
    color: #555;
    padding: 0 20px 5px 10px;
}

/*------koniec Mój Wzorzec 1 --------------*/



/*-----STYL DLA mojego wzorca: NAGŁÓWEK-----*/
.heading-for-summary {
      display: flex;
      align-items: center;
      text-align: center;
      width: 100%;
      margin: 2rem 0;
}

.heading-for-summary h3 {
    margin: 0 20px; /* Odstęp między liniami a tekstem */
    white-space: nowrap; /* Zapobiega łamaniu tekstu na małych ekranach */
    letter-spacing: 0.3vh;
    text-transform: uppercase;
    color: #333;
    /*font-size: 1.2rem;*/
}

.heading-for-summary::before,
.heading-for-summary::after {
    content: "";
    flex: 1; /* Powoduje, że linie zajmują całą dostępną przestrzeń */
    height: 1px;
    /* Możesz zmienić 'solid' na 'dotted', aby pasowało do Twojego poprzedniego stylu */
    border-bottom: 1px dotted #666666; 
}

/*-------koniec stylu dla wzorca Nagłówek ------------*/

/* -----------STYL DLA CUSTOM POST TYPE tylko nie wiem jakich i po co-------------------------------------------------- */
.display-cpt-container {
    /*background-color: pink;*/
    margin-top: 10px;
    border-top: 1px solid #999999;
    /*padding: 5px 5px 5px 20px;*/
}

.cpt-taxonomies-wrapper {
    font-size: 0.9rem;
    padding: 5px 0;
   /* background-color: #eeeced;
    /*background-color: yellow;*/
}

.cpt-taxonomies-wrapper a {
    color: #525252;
}

.cpt-taxonomy-label {
color: blue;

}

.cpt-taxonomy-value {
    
}

.cpt-meta-line {
    font-weight: bold;
}

.cpt-content {
    border-top: 1px dotted #999999;
    background-color: #eeeced;
    
}


/*==============================================================*/
/* ------------------------------------------------------------- */
/* ================STYLE DLA ZEWNĘTRZNYCH WTYCZEK=============== */
/* ------------------------------------------------------------- */

/*---1. Related Posts ---*/
/*---2. Spisy treści ---*/
/*---3. Serie artykułów - wtyczka NL Organize Custom Series ---*/
/*---4. Recenzje (Lista Wyróżnionych Wpisów w Sidebarze)---*/



/*----------------1. RELATED POSTS----------------------------------------*/
.related-posts-section {
margin: 20px 0;
display: flex;
flex-direction: column;
padding: 5px 20px;
border-top: 1px dotted #cccccc;
border-bottom: 1px dotted #cccccc;
background-color: #eeeced;
}

.related-posts-section .section-title {
font-size: 1.2em;
font-weight: 700;
margin-bottom: 20px;
width: 100%;
color: #525252;
}

.related-posts-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
width: 100%;
justify-content: flex-start; /* Elementy od lewej, wyrównane gapem */
}

.related-post-item {
text-align: center;
overflow: hidden;
/* Obliczanie szerokości dla 5 kolumn */
width: calc((100% - 80px) / 5);
min-width: 120px; /* Zwiększone min-width, aby pomieścić ramkę 110px */
}

.related-post-item a {
text-decoration: none;
color: inherit;
display: block;
transition: transform 0.2s ease-in-out;
}

.related-post-item a:hover {
transform: translateY(-5px);
}

/* --- ZAKTUALIZOWANE: Stały rozmiar kontenera miniatury --- */
.related-post-thumbnail {
width: 110px;               
height: 110px;              
border: 5px solid #dddddd;
margin: 0 auto 10px auto;   
display: block;
overflow: hidden;           
position: relative;         
}

/* --- ZAKTUALIZOWANE: Dopasowanie obrazka wewnątrz --- */
.related-post-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;          
display: block;
}

.related-post-title {
font-size: 0.9em;
line-height: 1.3;
height: 2.6em;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
color: var(--ciemnofioletowy, #4b0082);
text-align: center;
}

/* Responsywność */
@media (max-width: 1200px) {
.related-post-item {
width: calc((100% - 60px) / 4);
}
}

@media (max-width: 992px) {
.related-post-item {
width: calc((100% - 40px) / 3);
}
}

@media (max-width: 576px) {
.related-post-item {
width: calc((100% - 20px) / 2);
}
/* Na bardzo małych ekranach możemy zmniejszyć ramkę, jeśli 110px to za dużo */
.related-post-thumbnail { width: 90px; height: 90px; } 
}

/*--------------------koniec RELATED POSTS-------------------------*/




/*---------------------2. SPISY TREŚCI - stylizacja wtyczki AI NL -------------------------*/

/* * UWAGA: Selektory używają atrybutu data-id, 
 * co pozwala na unikalne stylowanie różnych spisów, 
 * nawet jeśli w przyszłości jeden będzie miał kolumny, a drugi nie.
 */

/* Style dla wszystkich kontenerów spisów */
.uni-index-container {
    padding: 20px 0;
    /* Upewnij się, że ten kontener jest odpowiednio szeroki na kolumny */
}

/* 1. Nagłówki z Literami (A, B, C...) */
.uni-index-container .uni-index-letter {
    /* Użycie Twojego koloru */
    color: var(--ciemnofioletowy); 
    /* Użyłem fall-backowego, mocnego fioletu (#4b0082) na wypadek, gdyby 
       zmienna --ciemnofioletowy nie była zdefiniowana. */
    
    font-size: 1.8em; /* Trochę większa litera */
    font-weight: 500;
    margin-top: 30px; 
    margin-bottom: 15px;
    border-bottom: 1px solid var(--ciemnofioletowy); 
    padding-bottom: 5px;
    
    /* Gwarantuje, że nagłówek zacznie się od nowej kolumny w widoku kolumnowym */
    break-before: column; 
    display: block;
}

/* 2. Style dla Miniatur (Thumbnaili) */
.uni-index-container .uni-index-thumbnail {
    /* Wymagana wielkość */
    width: 110px;
    height: 110px;
    
    /* Ramka */
    border: 5px solid #dddddd;
    
    /* Inne poprawki wizualne */
    /*border-radius: 8px; /* Lekkie zaokrąglenie */
    object-fit: cover;
    margin-right: 15px;
    transition: transform 0.2s ease-in-out;
}

/* Efekt hover na miniaturze */
.uni-index-container .uni-index-list-item:hover .uni-index-thumbnail {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Stylizacja elementów listy */
.uni-index-container .uni-index-list-item {
    align-items: flex-start; /* Ustawia miniaturę na górze */
    padding: 5px 0;
}

/* Stylizacja linku */
.uni-index-container .uni-index-link {
    font-size: 1.1em;
    font-weight: 500;
    line-height: 1.4;
    color: #333;
    text-decoration: none;
    transition: color 0.2s;
    display: flex;
    align-items: center;
}

.uni-index-container .uni-index-link:hover {
    color: var(--ciemnofioletowy);
}

/* Nadpisanie domyślnych stylów kolumn dla dużych ekranów, 
   jeśli wtyczka ustawiła kolumny */
.uni-index-container .uni-index-list {
    /* Usuń standardowe numerowanie lub kropki */
    list-style: none;
    padding: 0;
}


/*----------koniec-----SPISY TREŚCI - stylizacja wtyczki AI NL -------------------------*/


/*---------------------3. SERIE ARTYKUŁÓW: NL ORGANIZE CUSTOM SERIES (moja wtyczka)-------------------------*/

.seriesmeta {
    border-bottom: 1px dotted var(--ciemnofioletowy);
    text-align: right;
    font-size: 0.7rem;
    margin-bottom: 8px;

}

/* Kontener główny całej sekcji serii */
.series-footer-container {
margin-top: 40px;
width: 100%;
}

/* Napis "Czytaj dalej w tej serii" nad przyciskami */
.series-footer-label {
display: block;
text-align: center;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
padding: 0 10px;
color: #333;
}

/* Kontener nawigacji (Flexbox) */
.series_navigation {
display: flex;
justify-content: space-between;
width: 100%;
padding: 15px 10px;
border-top: 5px solid #eee;
}

/* Wspólne style dla bloków Poprzedni/Następny */
.series-nav-link {
max-width: 48%;
flex: 1;
text-decoration: none;
color: inherit;
transition: opacity 0.3s;
}

.series-nav-link:hover {
opacity: 0.8;
}

/* Etykiety: Poprzedni wpis / Następny wpis */
.series-nav-meta {
display: block;
font-size: 0.8rem;
font-weight: 600;
color: #000000;
margin-bottom: 5px;
opacity: 0.7;
}

/* Tytuły konkretnych wpisów */
.series-nav-title {
display: block;
font-size: 0.7rem;
font-weight: 500;
line-height: 1.4;
}

/* Wyrównanie */
.series-nav-prev {
text-align: left;
}

.series-nav-next {
text-align: right;
}

/* Puste miejsce dla zachowania układu */
.series-nav-spacer {
max-width: 48%;
flex: 1;
visibility: hidden;
}

/* RESPONSYWNOŚĆ */
@media (max-width: 768px) {
.series_navigation {
flex-direction: column;
gap: 20px;
}

.series-nav-link, 
.series-nav-spacer {
    max-width: 100%;
    text-align: center;
}


}

/*-----4. RECENZJE (LISTA WYRÓŻNIONYCH WPISÓW w Sidebarze)-------*/

.featured-reviews-grid {
display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 -10px !important; /* Kompensacja marginesów wewnętrznych */
    clear: both !important;
}

/* Pojedynczy element - wymuszamy dokładnie 50% szerokości */
.featured-post-thumb-wrapper {
    flex: 0 0 50% !important; /* Nie rośnij, nie kurcz się, zajmuj 50% */
    max-width: 50% !important;
    padding: 10px !important;
    box-sizing: border-box !important; /* Ważne: dopełnienie nie zwiększa szerokości */
    float: none !important;    /* Resetujemy ewentualne wyrównanie motywu */
    display: block !important;
    text-align: center !important;

}

.featured-post-thumb-wrapper img {
    width: 100% !important;    /* Obrazek zajmuje całą dostępną szerokość połowy */
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    transition: all 0.2s ease;
}

.featured-post-thumb-wrapper img:hover {
    border: 3px solid #333333;
}


/* Responsywność: Jeśli na telefonach chcesz mieć 1 kolumnę zamiast 2 */
@media (max-width: 480px) {
    .featured-post-thumb-wrapper {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/*===============================================================*/
/*-----style odziedziczone po NL3.0-------*/
/*===============================================================*/

/*Centered images fix*/

.aligncenter, img.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; }

img.alignleft, div.alignleft {
float:left;
margin:0 0.5em 0.5em 0;
}
img.alignright, div.alignright {
float:right;
margin:0 0 0.5em 0.5em;
}
img.aligncenter, div.aligncenter {
text-align:center;
margin:0 auto;
}


/**obrazek tytułowy - podkreślony, określona wielkość **/
.post_image {
background-image:url(images/postimage_bg.jpg);
background-repeat:repeat-x;
margin-left:-20px;
margin-right:-20px;
padding-top:15px;
padding-bottom:15px;
text-align:center;
margin-bottom:10px;
}

.post_image img {
padding:3px;
background-color:#fff;
border:1px solid #cccccc;
width:550px;
height:190px;
0max-width:550px; 
0height:auto;
0width:auto;
}


/**obrazek tytułowy z NL2.2 - określona szerokość //obrazek-class dla starych postów**/
.obrazek_tytulowy, .obrazek-class {
	width: 400px;
display: block;
margin-left: auto;
margin-right: auto;
background-color:#fff;
0border:4px solid #cccccc;
		}


/**** Dowolny obrazek we wpisie, rozmiar oryginalny, wyrównanie do lewej i otaczanie tekstem //.img dla starych postów//***/
.obrazek, .img
{
border:4px solid #cccccc;
float: left;
margin-top:10px;
margin-right: 10px;
}


/**** OKLADKA CD WE WPISIE *****/
.cd {
	background-image:url(images/postimage_bg.jpg);
background-repeat:repeat-x;
0margin-left:-20px;
0margin-right:-20px;
0padding-top:15px;
0padding-bottom:15px;
0text-align:center;
margin-right: 10px;
margin-bottom:10px;
float: left;
padding:3px;
background-color:#fff;
border:1px solid #cccccc;
width: 340px;
height: 340px;
}