/*
Theme Name: ZZ Chemików
Theme URI: https://zzchemikow-debica.s1.zetohosting.pl
Author: Kamil
Author URI: https://zzchemikowdebica.pl
Description: Autorski motyw dla Związku Zawodowego Chemików w Dębicy.
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zzchemikow
*/

/* ======= OGÓLNE USTAWIENIA STRONY ======= */
body {
    background-color: #ffffff;
    color: #333;
    width: 100%;
    margin: 0;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
}

/* ======= LINKI ======= */
a {
    color: #fdb827;
}

a:hover {
    color: #e0a620;
}

/* ======= STOPKA ======= */
footer {
    background-color: #fdb827;
    color: #195e99;
    padding: 20px;
    text-align: center;
}

/* ======= PRZYCISK DOŁĄCZENIA ======= */
.join-us-widget {
    text-align: center;
    margin-bottom: 20px;
}

.join-union-btn {
    display: inline-block;
    background-color: #195e99;
    color: #fdb827;
    font-weight: bold;
    padding: 15px 25px;
    border-radius: 5px;
    text-transform: uppercase;
    text-align: center;
    transition: 0.3s;
    width: 100%;
}

.join-union-btn:hover {
    background-color: #133e6e;
    color: #ffffff;
}

/* ======= SIDEBAR ======= */
body.single .sidebar {
    background-color: #ffffff;
    padding: 20px;
    color: #000;
    flex: 0 0 30%;
}

/* ======= TREŚĆ WPISU ======= */
/* Zmniejszenie czcionki tytułów wpisów na stronie głównej */
.post-content h2 {
    font-size: 20px; /* Możesz dostosować np. 18px, jeśli dalej za duże */
    font-weight: bold;
	text-decoration: none !important;

}

/* Skrócenie opisu wpisów */
.post-content p {
    font-size: 14px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Maksymalnie 3 linijki */
    -webkit-box-orient: vertical;
}


/* ======= WIDGETY ======= */
.widget {
    background: #ffffff;
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
}

.widget h3 {
    font-size: 18px;
    color: #000;
    margin-bottom: 10px;
}

.widget ul {
    list-style: none;
    padding: 0;
}

.widget li {
    margin-bottom: 8px;
}

.widget a {
    text-decoration: none;
    color: #000;
}

.widget a:hover {
    text-decoration: underline;
}

/* ======= MENU ======= */
.navbar {
    background-color: #fdb827;
    padding: 20px 0;
    width: 100%;
    margin-top: 15px;
    margin-bottom: 10px;
}

.navbar-nav {
    font-size: 18px;
    font-weight: bold;
    justify-content: center;
}

.navbar-nav .nav-item {
    margin: 0 15px;
}

.navbar-nav .nav-link {
    color: #000 !important;
    padding: 10px 15px;
    transition: color 0.3s ease, background 0.3s ease;
}

.navbar-nav .nav-link:hover {
    color: #ffffff !important;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 5px;
}

/* ======= STOPKA WPISU ======= */
.post-footer {
    background: #f8f9fa;
    padding: 20px;
    margin-top: 20px;
    border-top: 2px solid #ddd;
    text-align: center;
}

/* ======= NAWIGACJA MIĘDZY WPISAMI ======= */
.post-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    padding: 10px 0;
    border-top: 1px solid #ddd;
}

.post-navigation a {
    background: #195e99;
    color: #ffffff;
    padding: 10px 15px;
    border-radius: 5px;
    text-decoration: none;
    transition: 0.3s;
}

.post-navigation a:hover {
    background: #133e6e;
}

/* ======= WYSZUKIWARKA (LUPKA) ======= */
.search-icon {
    font-size: 22px;
    color: #000;
    cursor: pointer;
    margin-left: 15px;
}


/* Stylizacja wyszukiwarki */
.search-box {
    background: transparent; /* Usunięcie białego tła */
    border-radius: 5px;
    display: flex;
    align-items: center;
}

.search-box input {
    width: 180px;
    padding: 6px;
    border: 1px solid #ddd;
    border-radius: 5px;
    outline: none;
    background: #fdb827; /* Dopasowanie tła do menu */
    color: black;
}

.search-box button {
    background: #195e99;
    color: white;
    border: none;
    padding: 6px 10px;
    border-radius: 5px;
    cursor: pointer;
}

.search-box button:hover {
    background: #133e6e;
}
/* 🔹 2. Efekt zoom + obrót na hoverze dla miniaturki */
.post-thumbnail img {
    width: 400px; /* Stała szerokość */
    height: 300px; /* Stała wysokość */
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.3s ease-in-out;
}

.post-thumbnail:hover img {
    transform: scale(1.05) rotate(3deg);
}

/* 🔹 3. Upewnienie się, że miniaturki mają ten sam rozmiar */
.post-thumbnail {
    width: 400px;
    height: 300px;
    overflow: hidden;
	margin-right: 0 !important; /* Usunięcie dodatkowych marginesów */

}

/* 🔹 4. Usunięcie ramek i dodanie cienkiej kreski */
.post {
    border: none !important;
    border-bottom: 2px solid #ddd;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

/* 🔹 5. Stylizacja przycisku "Czytaj więcej" */
.post-content .btn-primary {
    background-color: #195e99; /* Niebieski */
    color: #ffffff;
    border: none;
    padding: 10px 15px;
    font-weight: bold;
    border-radius: 5px;
    display: inline-block;
    margin-top: 10px;
    transition: background 0.3s ease-in-out;
}

.post-content .btn-primary:hover {
    background-color: #144a7a;
}

/* 🔹 Dodanie ">" do przycisku */
.post-content .btn-primary::after {
    content: " >";
}
.post {
    display: flex;
    align-items: center;
    gap: 20px; /* Odstęp między obrazkiem a tekstem */
}

.post-thumbnail {
    flex: 0 0 40%; /* Obrazek zajmuje 40% szerokości kontenera */
    max-width: 40%;
}


.post-content {
    flex: 0 0 60%; /* Tekst zajmuje 60% szerokości */
    max-width: 60%;
}

body.single .post-content {
    flex: 1;
    max-width: 100%;
}

.post-content h2 a {
    text-decoration: none !important; /* Usuwa podkreślenie */
    color: #000; /* Zapewnia czarny kolor */
}

.post-content h2 a:hover {
    text-decoration: underline; /* Możesz dodać podkreślenie tylko przy najechaniu */
}
.post {
    border-bottom: 1px solid #ddd; /* Cienka linia między wpisami */
    padding-bottom: 20px;
    margin-bottom: 20px;
}
}
.sidebar .join-union-btn {
    background-color: #195e99;
    color: #ffffff;
    padding: 15px;
    font-size: 18px;
    font-weight: bold;
    display: block;
    text-align: center;
    border-radius: 8px;
}

.sidebar .widget-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
}

.sidebar ul li {
    margin-bottom: 10px;
}

/* 1. Poprawienie formatowania nagłówka wpisu */
.single-post-header {
    text-align: left !important;
    margin-bottom: 20px;
}

.post-title {
    font-size: 32px;
    font-weight: bold;
    color: #222;
    text-decoration: none !important;
}

/* 2. Meta dane - data i autor */
.post-meta {
    font-size: 14px;
    color: #777;
}}

/* 4. Odstępy w treści */
.single-post-content p {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* 5. Poprawienie sidebaru */
.sidebar {
    background-color: #ffffff;
    padding: 20px;
    color: #000;
}

.sidebar .widget-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
}

.sidebar ul li {
    margin-bottom: 10px;
}

/* 6. Poprawienie miniatur wpisów powiązanych */
.related-posts h3 {
    font-size: 22px;
    margin-bottom: 15px;
}

.related-posts a {
    text-decoration: none;
    color: #000;
}

.related-posts a:hover {
    text-decoration: underline;
}

/* 7. Poprawka cienkiej kreski oddzielającej wpisy */
.post {
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
/* ✅ 1. Usunięcie ramek wokół widgetów w sidebarze */
.sidebar .widget {
    border: none !important;
    background: transparent; /* Opcjonalnie: usunięcie tła */
    box-shadow: none; /* Usunięcie ewentualnych cieni */
    padding: 10px 0; /* Opcjonalne zmniejszenie paddingu */
}
.categories-widget ul {
    list-style: none;
    padding: 0;
}

.categories-widget li {
    display: flex;
    align-items: center;
    font-size: 16px;
    margin-bottom: 10px;
}

.categories-widget li i {
    margin-right: 10px;
    color: #195e99; /* Niebieski kolor ikon */
    font-size: 18px;
}


.sidebar .widget_categories ul li {
    display: flex;
    align-items: center;
    font-size: 18px;
    margin-bottom: 10px;
}

.sidebar .widget_categories ul li i {
    font-size: 24px; /* Powiększenie ikon */
    margin-right: 10px; /* Dodanie odstępu od tekstu */
}
.social-icons {
    display: flex;
    gap: 15px; /* Odstęp między ikonami */
    font-size: 24px; /* Powiększenie ikon */
}

.social-icons a {
    text-decoration: none;
    color: black; /* Możesz zmienić na inny kolor */
    transition: color 0.3s;
}

.social-icons a:hover {
    color: #195e99; /* Efekt najechania */
}
.categories-widget ul {
    list-style: none;
    padding: 0;
}

.categories-widget li {
    display: flex;
    align-items: center;
    font-size: 18px;
    margin-bottom: 12px; /* Większy odstęp między kategoriami */
}

.categories-widget li i {
    font-size: 24px; /* Powiększenie ikon */
    margin-right: 12px; /* Większy odstęp od tekstu */
    color: #195e99; /* Kolor ikon */
}
.featured-links ul {
    list-style: none;
    padding: 0;
}

.featured-links li {
    display: flex;
    flex-direction: column; /* Miniaturka nad linkiem */
    align-items: flex-start; /* Wyrównanie do lewej */
    margin-bottom: 15px;
}

.featured-links img {
    width: 48px; /* Rozmiar miniaturki */
    height: auto;
    border-radius: 5px;
    margin-bottom: 5px; /* Odstęp od tekstu */
}

.featured-links a {
    text-decoration: none;
    color: black;
    font-weight: bold;
    transition: color 0.3s ease;
}

.featured-links a:hover {
    color: #195e99; /* Efekt podświetlenia */
}


/* Poprawa nawigacji między wpisami */
.post-navigation-wrapper {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.post-navigation {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.post-navigation a {
    background: #195e99;
    color: white;
    padding: 8px 12px;
    border-radius: 5px;
    text-decoration: none;
}

.post-navigation a:hover {
    background: #144a7a;
}

/* Powiązane artykuły */
.related-posts {
    margin-top: 30px;
}

.related-posts h3 {
    font-size: 22px;
    margin-bottom: 15px;
    border-bottom: 2px solid #ddd;
    padding-bottom: 5px;
}

.related-posts .row {
    display: flex;
    justify-content: space-between;
}

.related-post-item {
    text-align: center;
}

.related-post-thumbnail img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
}

.related-post-title {
    font-size: 16px;
    font-weight: bold;
    margin-top: 10px;
    text-decoration: none;
    color: black;
}

.related-post-title:hover {
    color: #195e99;
}
.contact-container {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    margin: 20px auto;
}

.contact-container h2, .contact-container h3 {
    color: #195e99;
    text-align: center;
}

.contact-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-item {
    background: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.contact-item h4 {
    margin: 0;
    color: #195e99;
}

.contact-item p {
    margin: 5px 0;
    font-size: 16px;
}

.contact-item a {
    color: #195e99;
    text-decoration: none;
    font-weight: bold;
}

.contact-item a:hover {
    text-decoration: underline;
		
}

/* —————————————————————————————————————————
   Usuń przerwę po featured image na stronie wpisu
   ————————————————————————————————————————— */
body.single .post {
  display: block !important;
}

body.single .post-thumbnail,
body.single .single-post-thumbnail {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Usuń ewentualny odstęp nad treścią wpisu */
body.single .post-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}