/* main.css */

/* ------------------------------------------------------------ */
/* Ogólne style strony (body, kontener)                       */
/* ------------------------------------------------------------ */
body {
    background: rgb(15, 15, 15) !important; /* Ciemne tło strony */
    color: white; /* Domyślny kolor tekstu na stronie */
}

#page-container {
    background-color: black; /* Czarne tło głównego kontenera */
    border: 1px solid grey !important; /* Szara obramowanie kontenera */
    padding: 15px; /* Wewnętrzny odstęp w kontenerze */
}

/* ------------------------------------------------------------ */
/* Nagłówek strony (logo, tytuł, ikony social media, języki)  */
/* ------------------------------------------------------------ */
.site-header {
    margin-bottom: 15px; /* Dolny margines nagłówka */
}

.site-branding {
    display: flex; /* Włącza flexbox dla kontenera brandingu */
    align-items: center; /* Wyrównuje elementy w pionie do środka */
    text-decoration: none !important; /* Usuwa podkreślenie linków brandingu */
    padding: 10px; /* Wewnętrzny odstęp brandingu */
}

.site-branding a {
    text-decoration: none !important; /* Usuwa podkreślenie linku w brandingu */
    padding: 0; /* Zerowy wewnętrzny odstęp linku w brandingu */
}

.site-logo {
    display: inline-block; /* Wyświetla logo jako element blokowy w linii */
    margin-right: 10px; /* Prawy margines logo */
}

.logo-image {
    height: 3rem; /* Wysokość obrazu logo */
}

.site-title {
    color: white; /* Biały kolor tytułu strony */
    font-size: 1.5rem; /* Rozmiar czcionki tytułu strony */
}

/* ------------------------------------------------------------ */
/* Przełącznik języków                                        */
/* ------------------------------------------------------------ */
.language-switcher {
    display: flex; /* Używa flexbox do ułożenia ikon języków */
    gap: 5px; /* Odstęp między ikonami języków */
    justify-content: flex-end; /* Wyrównuje ikony do prawej strony */
    align-items: center; /* Wyrównuje ikony do środka w pionie */
}

.language-link {
    opacity: 0.6; /* Domyślna przezroczystość ikony języka */
    transition: opacity 0.3s ease-in-out; /* Płynne przejście przezroczystości */
}

.language-link.active,
.language-link:hover {
    opacity: 1; /* Przezroczystość po najechaniu lub dla aktywnego języka */
}

.flag-icon {
    width: 24px; /* Szerokość ikony flagi */
    height: auto; /* Automatyczna wysokość ikony flagi */
    border-radius: 3px; /* Zaokrąglone rogi ikony flagi */
    vertical-align: middle; /* Wyrównuje ikonę flagi do środka w linii */
}

/* ------------------------------------------------------------ */
/* Ikony social media                                         */
/* ------------------------------------------------------------ */
.social-icons {
    display: flex !important; /* Używa flexbox do ułożenia ikon social media */
    justify-content: center !important; /* Wyśrodkowuje ikony social media */
    flex-wrap: wrap; /* Zawija ikony do nowej linii, gdy brakuje miejsca */
    gap: 10px; /* Odstęp między ikonami social media */
    width: 100%; /* Pełna szerokość kontenera ikon */
    margin-top: 10px; /* Górny margines ikon social media */
}

.social-icon {
    font-size: 2rem; /* Rozmiar czcionki ikon social media */
    margin: 0; /* Zerowy margines ikon */
    color: #333; /* Domyślny kolor ikon */
    transition: opacity 0.3s; /* Płynne przejście przezroczystości */
    text-decoration: none !important; /* Usuwa podkreślenie linków ikon */
    display: inline-flex; /* Wyświetla ikony jako element blokowy w linii z flexboxem */
    align-items: center; /* Wyrównuje ikony do środka w pionie */
    justify-content: center; /* Wyśrodkowuje ikony w poziomie */
    width: 2.5rem; /* Szerokość kontenera ikony */
    height: 2.5rem; /* Wysokość kontenera ikony */
    border-radius: 50%; /* Okrągły kształt ikon */
}

.social-icon:hover {
    opacity: 0.8; /* Zmniejsza przezroczystość po najechaniu */
}

.social-icon.youtube {
    color: #FF0000; /* Kolor ikony YouTube */
}

.social-icon.youtube:hover {
    opacity: 0.8; /* Zmniejsza przezroczystość po najechaniu */
}

.social-icon.instagram {
    color: #E1306C; /* Kolor ikony Instagram */
}

.social-icon.instagram:hover {
    opacity: 0.8; /* Zmniejsza przezroczystość po najechaniu */
}

.social-icon.twitter {
    color: #1DA1F2; /* Kolor ikony Twitter */
}

.social-icon.twitter:hover {
    opacity: 0.8; /* Zmniejsza przezroczystość po najechaniu */
}

.social-icon.newsletter {
    color: #202020 !important; /* Kolor ikony newsletter */
    background-color: transparent; /* Przezroczyste tło ikony newsletter */
    border: none; /* Brak obramowania ikony newsletter */
    padding: 0; /* Zerowy wewnętrzny odstęp ikony newsletter */
}

.social-icon.newsletter:hover {
    opacity: 0.8; /* Zmniejsza przezroczystość po najechaniu */
}

/* ------------------------------------------------------------ */
/* Menu nawigacyjne                                          */
/* ------------------------------------------------------------ */
.main-navigation .col-sm-12 { /* Styl dla kolumny zawierającej menu */
    padding: 0; /* Zerowy padding kolumny menu */
}

.collapsible-menu-container .collapse {
    background-color: black !important; /* Czarne tło rozwijanego menu */
}

.bg-dark {
    background-color: black !important; /* Zapewnia czarne tło dla paska nawigacji */
}

.navbar-dark .navbar-nav .nav-link {
    color: white; /* Kolor linków w głównym menu */
}

.nav-item .nav-link {
    padding: 0.5rem 1rem; /* Padding linków w menu */
    color: white; /* Kolor tekstu linków w menu */
}

.nav-item .nav-link.active {
    color: deepskyblue; /* Kolor aktywnego linku w menu */
}

.nav-item .nav-link.disabled {
    color: grey; /* Kolor nieaktywnego linku w menu */
}

.navbar-dark .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.1); /* Kolor obramowania przycisku rozwijania menu */
}

.navbar-dark .navbar-toggler-icon {
    background-image: var(--bs-navbar-toggler-icon-bg); /* Domyślna ikona rozwijania menu Bootstrap */
}

.menu-toggle-label {
    cursor: pointer; /* Kursor wskazujący dla etykiety rozwijania menu */
}

/* Dodatkowo dla Bootstrap Navbar Toggler */
.navbar-toggler {
    padding: .25rem .75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, .1); /* Domyślny kolor obramowania dla dark navbar */
    border-radius: .25rem;
    transition: box-shadow .15s ease-in-out;
}

.navbar-toggler:hover {
    text-decoration: none;
}

.navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: 0 0 0 .25rem; /* Standardowy focus ring Bootstrapa */
}

.navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    background-image: var(--bs-navbar-toggler-icon-bg); /* Używa zmiennej Bootstrapa */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

/* Upewnij się, że --bs-navbar-toggler-icon-bg jest zdefiniowane, jeśli używasz niestandardowego theme */
/* Domyślnie Bootstrap 5 dostarcza to w zmiennych, ale dla ciemnego menu często trzeba jawnie */
:root {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-dark .navbar-toggler-icon {
    /* Nadpisanie dla ciemnego motywu, jeśli domyślny biały svg jest za mało widoczny */
    background-image: var(--bs-navbar-toggler-icon-bg); /* Domyślna ikona będzie biała */
}


/* Style dla podmenu */
.dropdown-menu {
    background-color: black !important; /* Czarne tło podmenu */
    border: 1px solid grey; /* Szare obramowanie podmenu */
    list-style-type: none; /* Usuwa domyślne znaczniki listy */
    padding-left: 0; /* Zerowy lewy padding listy podmenu */
    margin: 0; /* Zerowy margines listy podmenu */
}

.dropdown-menu .dropdown-item {
    color: white !important; /* Biały kolor tekstu elementów podmenu */
    background-color: transparent !important; /* Przezroczyste tło elementów podmenu */
    padding: 0.5rem 1.5rem; /* Padding elementów podmenu */
}

.dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus {
    background-color: #333 !important; /* Ciemniejsze tło po najechaniu/skupieniu */
    color: white !important; /* Biały kolor tekstu po najechaniu/skupieniu */
}

/* ------------------------------------------------------------ */
/* Sekcje i separatory                                        */
/* ------------------------------------------------------------ */
.section-divider {
    border-top: 1px solid grey; /* Szara linia separatora */
    margin: 15px 0; /* Górny i dolny margines separatora */
}

/* ------------------------------------------------------------ */
/* Główna zawartość strony (lista postów)                     */
/* ------------------------------------------------------------ */
.row.mt-4.row-cols-1.row-cols-md-2.row-cols-lg-3 {
    margin-left: 5px; /* Skompensowanie domyślnego marginesu row */
    margin-right: 5px; /* Skompensowanie domyślnego marginesu row */
}

.col.mb-4.post-item {
    padding-left: 15px; /* Lewy padding dla każdego posta */
    padding-right: 15px; /* Prawy padding dla każdego posta */
    margin-bottom: 15px; /* Dolny margines dla każdego posta */
}

/* Miniaturki postów */
.post-thumbnail {
    max-height: 200px; /* Maksymalna wysokość miniaturki */
    object-fit: cover; /* Dopasowuje obraz do ramki z zachowaniem proporcji i przycinaniem */
    cursor: pointer; /* Kursor wskazujący po najechaniu */
}

/* Tytuły postów */
.post-title {
    cursor: pointer; /* Kursor wskazujący po najechaniu */
    color: white; /* Biały kolor tytułu */
    text-decoration: none; /* Usuwa podkreślenie linku */
    margin-bottom: 1rem; /* Dolny margines tytułu */
    text-align: center; /* Wyśrodkowanie tekstu tytułu */
}

.post-title:hover {
    opacity: 0.8; /* Zmniejsza przezroczystość po najechaniu */
}

.post-title-link {
    color: white; /* Biały kolor linku tytułu */
    text-decoration: none; /* Usuwa podkreślenie linku tytułu */
}

.post-title-link:hover {
    opacity: 0.8; /* Zmniejsza przezroczystość po najechaniu */
}

/* Fragmenty postów */
.post-excerpt {
    overflow: hidden; /* Ukrywa nadmiar tekstu */
    text-overflow: ellipsis; /* Dodaje wielokropek na końcu uciętego tekstu */
    display: -webkit-box; /* Używa flexboxa do ograniczenia liczby linii */
    -webkit-line-clamp: 3; /* Ogranicza do 3 linii */
    -webkit-box-orient: vertical; /* Ustawia orientację flexboxa na pionową */
    color: white; /* Biały kolor fragmentu tekstu */
}

/* Metadane postów (autor, data) */
.post-author,
.post-date {
    color: grey !important; /* Szary kolor autora i daty */
}

/* Kategorie postów */
.post-category {
    margin-right: 0.5rem; /* Prawy margines kategorii */
}

/* Tagi postów */
.post-tag {
    background-color: #6b8e23; /* Zielone tło tagu */
    color: #212529; /* Ciemny kolor tekstu tagu */
    border-radius: 0.25rem; /* Zaokrąglone rogi tagu */
    margin-left: 0.25rem; /* Lewy margines tagu */
    display: inline-block; /* Wyświetla tagi w linii */
    padding: 0.2rem 0.4rem; /* Wewnętrzny padding tagu */
    font-size: 0.875em; /* Rozmiar czcionki tagu */
}

/* Kontener treści posta na stronie pokaż-post.php */
.post-content-wrapper {
    padding: 15px; /* Wewnętrzny padding kontenera treści posta */
    margin-bottom: 20px; /* Dolny margines kontenera treści posta */
}

/* Artykuł posta - dodatkowe style dla artykułu, jeśli potrzebne */
/* .post-article {
    
} */

/* Obrazek wewnątrz posta */
.post-image {
    max-width: 100%; /* Maksymalna szerokość obrazka */
    height: auto; /* Automatyczna wysokość obrazka */
    margin-bottom: 1rem; /* Dolny margines obrazka */
    display: block; /* Ustawia jako element blokowy */
    margin-left: auto; /* Wyśrodkowuje obrazek */
    margin-right: auto; /* Wyśrodkowuje obrazek */
}

/* Treść posta */
.post-body {
    line-height: 1.6; /* Wysokość linii tekstu */
    margin-bottom: 2rem; /* Dolny margines treści */
    color: white; /* Biały kolor tekstu treści */
    text-align: justify; /* Justowanie tekstu treści */
}

/* Metadane posta (data, autor, kategoria, tagi) na stronie pokaż-post.php */
.post-meta {
    margin-bottom: 0.5rem; /* Dolny margines metadanych */
    color: #6c757d !important; /* Szary kolor metadanych */
}

/* Przyciski "Czytaj więcej" */
.read-more-button {
    margin-top: 1rem; /* Górny margines przycisku */
    align-self: flex-start; /* Wyrównuje przycisk do lewej strony w flexboxie */
    /* Ustawienie koloru tła i czcionki na taki jak niebieskie kategorie Bootstrapa (.bg-primary) */
    background-color: var(--bs-primary) !important; /* Używa zmiennej Bootstrapa dla niebieskiego */
    border-color: var(--bs-primary) !important; /* Obramowanie w tym samym kolorze */
    color: var(--bs-white) !important; /* Biały tekst, jak w badge-primary */
}

.read-more-button:hover {
    /* Lekko ciemniejszy odcień niebieskiego na hover */
    background-color: #0d6efd !important; /* Ciemniejszy niebieski */
    border-color: #0d6efd !important;
    color: var(--bs-white) !important; /* Utrzymaj biały kolor tekstu */
}

/* ------------------------------------------------------------ */
/* Stopka strony                                            */
/* ------------------------------------------------------------ */
.site-footer {
    padding: 10px; /* Wewnętrzny padding stopki */
    color: white !important; /* Biały kolor tekstu stopki */
    text-align: center; /* Wyśrodkowanie tekstu w stopce */
    margin-top: 20px; /* Górny margines stopki */
}

.footer-container {
    margin-top: 5px; /* Dodatkowy górny margines kontenera stopki */
}

.copyright-text {
    color: white; /* Biały kolor tekstu copyright */
    font-size: 0.9em; /* Mniejszy rozmiar czcionki copyright */
}

.copyright-text a {
    color: #007bff; /* Niebieski kolor linku w copyright */
    text-decoration: none; /* Usuwa podkreślenie linku */
}

.copyright-text a:hover {
    text-decoration: underline !important;/* Podkreślenie linku po najechaniu */
}

/* ------------------------------------------------------------ */
/* Responsywność                                             */
/* ------------------------------------------------------------ */

/* Dla ekranów mniejszych niż md (767.98px) */
@media (max-width: 767.98px) {
    .site-header .row {
        flex-direction: column; /* Ustawia kolumny jedną pod drugą */
        align-items: center; /* Wyśrodkowuje elementy w kolumnach */
    }

    .site-header .col-md-9 {
        width: 100%; /* Pełna szerokość dla tytułu i logo */
        text-align: center; /* Wyśrodkowuje tekst */
        margin-bottom: 10px; /* Dodaje odstęp od ikon */
    }

    .site-header .col-md-3 {
        width: 100%; /* Pełna szerokość dla ikon social media i języków */
        display: flex;
        justify-content: center; /* Wyśrodkowuje ikony */
    }

    .social-icons {
        justify-content: center !important; /* Dodatkowe wyśrodkowanie ikon */
    }

    .language-switcher {
        justify-content: center; /* Wyśrodkowuje przełącznik języków */
        margin-bottom: 10px; /* Dodaje odstęp od logo/tytułu */
    }
}

/* Dla średnich ekranów (tablety) - od 768px do 991.98px */
@media (min-width: 768px) and (max-width: 991.98px) {
    .row-cols-md-2 > * {
        width: 50%; /* Dwie kolumny na tabletach */
    }
}

/* Dla małych ekranów (telefony) - do 767.98px */
@media (max-width: 767.98px) {
    .row-cols-md-2 > * {
        width: 100%; /* Jedna kolumna na telefonach */
    }
}

/* liczba "przeczytano" */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* paginacja strony */
/* main.css */

/* ... (istniejące style) ... */

/* ------------------------------------------------------------ */
/* Style dla tabel (np. w panelu admina)                      */
/* ------------------------------------------------------------ */
.table {
    --bs-table-bg: #1a1a1a; /* Ciemne tło dla całej tabeli */
    --bs-table-striped-bg: #222222; /* Tło dla naprzemiennych wierszy */
    --bs-table-hover-bg: #333333; /* Tło po najechaniu myszką */
    --bs-table-color: white; /* Kolor tekstu (domyślny dla całej tabeli) */
    --bs-table-border-color: grey; /* Kolor obramowania */
    border: 1px solid var(--bs-table-border-color); /* Obramowanie zewnętrzne tabeli */
}

.table thead {
    background-color: #222222; /* Trochę jaśniejsze tło dla nagłówków */
    color: deepskyblue; /* Kolor tekstu dla nagłówków */
    border-bottom: 2px solid grey;
}

.table th, .table td {
    border-color: var(--bs-table-border-color); /* Kolor obramowania komórek */
}

.table tbody td {
    color: white; /* Ustawia kolor tekstu na biały w każdej komórce tbody */
}

/* ------------------------------------------------------------ */
/* Style dla paginacji (stronicowania) - ZMODYFIKOWANE KOLORY */
/* ------------------------------------------------------------ */
.pagination-container { /* Kontener paginacji np. dla tabeli */
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.pagination .page-item .page-link {
    background-color: #0d6efd !important; /* Tło jak btn-info */
    color: white !important; /* Tekst biały */
    border: 1px solid #0d6efd !important; /* Obramowanie jak btn-info */
}

.pagination .page-item.active .page-link {
    background-color: #0b5ed7 !important; /* Aktywna strona - lekko ciemniejszy niebieski */
    color: white !important; /* Tekst biały */
    border-color: #0a58ca !important;
}

.pagination .page-item.disabled .page-link {
    background-color: #3f5b7a !important; /* Wyłączone linki (szary, ale z niebieskim odcieniem) */
    color: #cccccc !important; /* Jaśniejszy szary tekst dla wyłączonych linków */
    border-color: #3f5b7a !important;
}

.pagination .page-item .page-link:hover {
    background-color: #0b5ed7 !important; /* Tło po najechaniu myszką - lekko ciemniejszy niebieski */
    color: white !important; /* Tekst biały */
}

.pagination .page-item.active .page-link:hover {
    background-color: #0a58ca !important; /* Aktywna strona nieznacznie ciemniejsza po najechaniu */
    color: white !important;
}

/* ------------------------------------------------------------ */
/* Style dla kart postów na stronie głównej                   */
/* ------------------------------------------------------------ */
.card.bg-dark {
    background-color: #1a1a1a !important; /* Upewnij się, że karty są ciemne */
    border: 1px solid grey; /* Dodaj obramowanie kartom */
}

.post-title-link {
    color: white; /* Zapewnij, że linki tytułów postów są białe */
    text-decoration: none;
}

.post-title-link:hover {
    color: deepskyblue; /* Zmień kolor po najechaniu */
    text-decoration: underline;
}

/* Zmodyfikowany styl dla przycisków "Czytaj więcej" */
.read-more-button {
    margin-top: 1rem; /* Górny margines przycisku */
    align-self: flex-start; /* Wyrównuje przycisk do lewej strony w flexboxie */
    /* Zmiany koloru tła i tekstu na takie jak kategorie (.bg-primary) */
    background-color: var(--bs-primary) !important; /* Domyślny niebieski kolor Bootstrapa */
    border-color: var(--bs-primary) !important; /* Obramowanie w tym samym kolorze */
    color: var(--bs-white) !important; /* Biały tekst dla kontrastu */
}

.read-more-button:hover {
    /* Lekko ciemniejszy odcień niebieskiego na hover */
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: var(--bs-white) !important; /* Utrzymaj biały kolor tekstu */
}

/* Zaktualizowany styl dla badge-ów/tagów (jeśli zmieniony od domyślnego) */
.badge.post-tag { /* Bardziej specyficzny selektor, aby uniknąć konfliktów */
    background-color: #6b8e23; /* Twój istniejący kolor tagów */
    color: #212529; /* Ciemny tekst na tagach */
}

/* Przyciski (globalne style dla btn-info i btn-danger, jeśli używasz ich w wielu miejscach) */
.btn-info {
    --bs-btn-bg: #0d6efd; /* Niebieski jak domyślny Bootstrap */
    --bs-btn-border-color: #0d6efd;
    --bs-btn-hover-bg: #0b5ed7;
    --bs-btn-hover-border-color: #0a58ca;
    --bs-btn-active-bg: #0a58ca;
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-disabled-bg: #0d6efd;
    --bs-btn-disabled-border-color: #0d6efd;
    color: #fff; /* Biały tekst */
}

.btn-danger {
    --bs-btn-bg: #dc3545; /* Czerwony jak domyślny Bootstrap */
    --bs-btn-border-color: #dc3545;
    --bs-btn-hover-bg: #bb2d3b;
    --bs-btn-hover-border-color: #b02a37;
    --bs-btn-active-bg: #b02a37;
    --bs-btn-active-border-color: #a52834;
    --bs-btn-disabled-bg: #dc3545;
    --bs-btn-disabled-border-color: #dc3545;
    color: #fff; /* Biały tekst */
}