/*!
Theme Name: Blog Posts
Theme URI: https://adorethemes.com/downloads/blog-posts/
Author: Adore Themes
Author URI: https://adorethemes.com/
Description: Blog Posts is a minimalist and lightweight WordPress theme designed for creating professional blogging websites. The theme has a clean design and is ideal for various blog types, such as fashion, lifestyle, travel, food, and photography. Blog Posts is mobile-friendly and cross-browser compatible, making it accessible across various devices and screen sizes. The theme is also translation-ready, allowing you to create blogs in any language. Overall, Blog Posts offers a user-friendly interface, modern and creative design, and range of features suitable for building engaging and unique blog websites. Live preview : https://demo.adorethemes.com/blog-posts/
Version: 1.0.3
Requires at least: 5.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Template: glowing-blog
Text Domain: blog-posts
Tags: custom-background, custom-header, custom-logo, custom-menu, featured-images, footer-widgets, left-sidebar, right-sidebar, blog, one-column, portfolio, photography, theme-options, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Blog Posts is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/

*/

/* Root
	========================================================================== */
	:root {
		--body-background: #f4f3ee;
		--primary-color: #bf0603;
		--glow-box-shadow-color: #463f3a;
		--color-text: #22223b;
	}

/* Start categories section
--------------------------------------------- */
.categories-section .categories-wrapper {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.categories-section .category-single {
	aspect-ratio: 4/2.8;
	position: relative;
	overflow: hidden;
	border-radius: 15px;
	box-shadow: var(--shadow);
	background-repeat: no-repeat;
	background-size: cover;
	transition: var(--transition);
	background-position: center;
	box-shadow: var(--glow-medium-shadow);
	border: 1px solid var(--glow-border-color);
}

.categories-section .category-single:focus-within,
.categories-section .category-single:hover{
	box-shadow: var(--glow-box-shadow);
}

.categories-section .category-single>a {
	position: absolute;
	inset: 0;
	text-decoration: none;
	text-align: start;
	display: block;
	color: #fff;
	line-height: 1.2;
	font-size: var(--font-size-md);
	z-index: 3;
	font-weight: bold;
	isolation: isolate;
}

.categories-section .category-single>a::before {
	position: absolute;
	content: "";
	inset: 0;
	z-index: -1;
	opacity: .2;
	background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 100%);
}

.categories-section .category-single>a>.title {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 12px 20px;
	text-shadow: 0px 2px 5px rgba(0,0,0,0.2);
}

.categories-section .category-single .count {
	position: absolute;
	inset-inline-start: 20px;
	top: 20px;
	color: var(--color-text);
	font-weight: bold;

}
.categories-section .category-single .count .number{
	width: 35px;
	height: 35px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	z-index: 3;
	font-size: var(--font-size-base);
	background: var(--post-item-background);
	box-shadow: var(--glow-small-shadow);
	border: 1px solid var(--glow-border-color);
}
.categories-section .category-single .count .view{
	position: absolute;
	z-index: 1;
	inset-inline-start: 100%;
	top: 50%;
	transform: translateY(-50%);
	font-size: var(--font-size-sm);
	background: var(--post-item-background);
	border-radius: 25px;
	white-space: nowrap;
	padding: 0px 15px;
	height: 30px;
	line-height: 30px;
	margin-inline-start: 5px;
	opacity: 0;
	transition: all 300ms ease;
	box-shadow: var(--glow-small-shadow);
	border: 1px solid var(--glow-border-color);
}
.categories-section .category-single:focus-within .count .view,
.categories-section .category-single:hover .count .view{
	opacity: 1;
}
/* End categories section
--------------------------------------------- */

/* Start Post Carousel Section
--------------------------------------------- */

.post-carousel-section .post-carousel-wrapper .post-item.overlay-post {
	aspect-ratio: 3/3.2;
	border-radius: 0;
}

.post-carousel-section .post-carousel-wrapper{
	overflow: hidden;
}
.post-carousel-section .post-carousel-wrapper .slick-list{
	margin-inline: -15px;
}
.post-carousel-section .post-carousel-wrapper .slick-slide{
	padding-inline: 15px;
	padding-block-end: 5px;
}
.post-carousel-section .post-carousel-wrapper .slick-dots{
	margin-top: 20px;
}
.post-carousel-section .post-carousel-wrapper .post-item.overlay-post {
	border-radius: 5px;
}

/* End Post Carousel Section
--------------------------------------------- */

/* Archive grid layout
--------------------------------------------- */

/* grid layout */
.theme-archive-layout.grid-layout {
	display: flex;
	flex-wrap: wrap;
	margin-inline: -15px;
}


@media (min-width: 576px) {
	.theme-archive-layout.grid-layout article {
		width: 100%;
	}
}

@media (min-width: 768px) {
	.theme-archive-layout.grid-layout article {
		width: 50%;
	}
}

@media (min-width: 992px) {
	.theme-archive-layout.grid-layout article {
		width: 33.33%;
	}
}

@media (min-width: 992px) {
	.theme-archive-layout.grid-layout.grid-column-3 article {
		width: 33.33%;
	}
}

.theme-archive-layout.grid-layout article {
	padding-inline: 15px;
	margin: 0;
	margin-bottom: 30px;
}

.theme-archive-layout.grid-layout article:not(.has-post-thumbnail) .post-item {
	padding: 15px;
}
.theme-archive-layout.grid-layout article:not(.has-post-thumbnail) .post-item .post-item-image{
	box-shadow: unset;
    border: unset;
    overflow: visible;
}
.theme-archive-layout.grid-layout article:not(.has-post-thumbnail) .read-time-comment {
	padding-block: 5px;
	padding-inline: 0;
}
.theme-archive-layout.grid-layout article:not(.has-post-thumbnail) .post-item .post-item-image .entry-cat {
	position: unset;
	padding: 0;
}

/* grid layout */

@media (min-width: 576px) {
	.theme-archive-layout.grid-layout article {
		width: 100%;
	}
}

@media (min-width: 768px) {
	.theme-archive-layout.grid-layout article {
		width: 50%;
	}
}

@media (min-width: 992px) {
	.theme-archive-layout.grid-layout article {
		width: 33.33%;
	}
}

@media (min-width: 992px) {
	.theme-archive-layout.grid-layout.grid-column-2 article {
		width: 50%;
	}
}

@media (min-width: 992px) {
	.theme-archive-layout.grid-layout.grid-column-3 article {
		width: 33.33%;
	}
}

/* Override pagination CSS
--------------------------------------------- */
nav.navigation.pagination {
	display: block !important;
}

/* Pagination CSS
--------------------------------------------- */
nav.navigation.pagination .nav-links span, nav.navigation.pagination .nav-links a {
	border-radius: 5px;
	box-shadow: var(--glow-small-shadow);
	background-color: var(--post-item-background);
}

/* Zablokuj Przyklejanie Nagłówka
--------------------------------------------- */
.adore-header,
.adore-header.fix-header,
.site-header,
.site-header.fix-header {
    position: static !important;
    top: auto !important;
    box-shadow: none !important;
    transition: none !important;
    z-index: auto !important;
}

/* Dodatkowo możesz też wyłączyć przesuwanie body */
body.scroll-up {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
/* End Zablokuj Przyklejanie Nagłówka
--------------------------------------------- */

/* Floating Social Sidebar
--------------------------------------------- */
/* Desktop Sidebar: Visible only on screens wider than 1360px */
.floating-social-sidebar {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px 4px;
    z-index: 9999;
    background: transparent;
}

.floating-social-sidebar a {
    display: block;
}

.floating-social-sidebar img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: block;
    transition: transform 0.3s ease;
}

.floating-social-sidebar img:hover {
    transform: scale(1.1);
}

/* Mobile Social Bar: Hidden by default */
.mobile-social-bar {
    display: none;
}

/* Switch behavior below 1360px */
@media (max-width: 1359px) {
    .floating-social-sidebar {
        display: none !important;
    }

    .mobile-social-bar {
        display: flex !important;
        justify-content: center;
        align-items: center;
        gap: 5px;
        height: 50px;
        background-color: #f4f3ee;
        padding-bottom: 5px;
        margin-bottom: 10px;
    }

    .mobile-social-bar img {
        width: 48px;
        height: 48px;
        object-fit: contain;
        transition: transform 0.2s ease;
    }

    .mobile-social-bar img:hover {
        transform: scale(1.05);
    }
}

/* Footer Adjustment */
footer.site-footer {
    margin-top: 0 !important;
}

/* End Floating Social Sidebar
--------------------------------------------- */

/* Wypchnięcie stopki
--------------------------------------------- */
/* Upewnij się, że html i body mają 100% wysokości */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Zakładam, że Twój główny wrapper ma id "page" i klasę "site" */
#page.site {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* Upewnij się, że część główna strony (np. #primary-content) rozwija się i wypycha stopkę */
#primary-content {
    flex: 1;
}

.site-footer {
    margin-top: auto; /* wypycha footer na dół, jeśli potrzeba */
}

/* End Wypchnięcie Stopki
--------------------------------------------- */

/* Przycisk Submit dla formularza kontaktu
--------------------------------------------- */
.wpforms-submit-container {
	margin: 10px 0 20px !important;
    display: flex;
    justify-content: center; /* Poziome wyśrodkowanie */
    align-items: center;     /* Pionowe wyśrodkowanie */
    height: auto;           /* Przykładowa wysokość kontenera, dostosuj według potrzeb */
}

.search-submit {
	margin-left: 10px;
}

.wpforms-submit,
.search-submit,
.wp-block-search__button {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
	font-weight: 600 !important;
    border-radius: 5px !important;
    box-shadow: var(--glow-small-shadow) !important;
    background-color: var(--post-item-background) !important;
	background: var(--primary-color) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
	border: 1px solid black !important;
	color: white !important;
}

.search-submit:hover {
	border-radius: 5px !important;
	background-color: var(--post-item-background-hover) !important; /* jeśli masz */
	box-shadow: var(--glow-medium-shadow) !important; /* lub inny efekt hover */
} 

.wpforms-submit:hover {
	border-radius: 5px !important;
	background-color: var(--post-item-background-hover); /* jeśli masz */
	box-shadow: var(--glow-medium-shadow); /* lub inny efekt hover */
}

.wp-block-search__button:hover {
	border-radius: 5px !important;
	background-color: var(--post-item-background-hover); /* jeśli masz */
	box-shadow: var(--glow-medium-shadow); /* lub inny efekt hover */
}

/* End Przycisk Submit dla formularza kontaktu
--------------------------------------------- */

/* Footer 3 kolumny
--------------------------------------------- */
.bottom-footer-info {
    position: relative;
    max-width: 1200px; /* dopasuj do szerokości głównego kontenera */
    margin: 0 auto;
	min-height: 25px; /* zapewnia wystarczającą wysokość stopki */
}

/* Lewa kolumna – linki */
.footer-left {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* Wewnątrz lewej kolumny ustalamy linki w jednym rzędzie */
.footer-left .footer-menu {
    display: flex;
    flex-direction: row; /* upewnia się, że linki są obok siebie */
    gap: 15px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-left .footer-menu li a {
    text-decoration: none;
    color: white;  /* ustawia kolor linków; zmień według potrzeb */
}

/* Prawa kolumna – przycisk SEARCH */
.footer-right {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.footer-right a {
    text-decoration: none;
    color: white;  /* nadpisuje domyślny niebieski kolor linku */
}

/* Środkowy element – wycentrowany tekst */
.site-info {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    white-space: nowrap;
    color: white; /* jeśli potrzebujesz, aby tekst był biały */
}
/* End Footer 3 kolumny
--------------------------------------------- */

/* Footer 3 kolumny wersja mobilna
--------------------------------------------- */
@media (max-width: 992px) {
	.bottom-footer-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        min-height: auto;
        position: static; /* wyłącz pozycjonowanie absolute */
    }

    .footer-left,
    .footer-right,
    .site-info {
        position: static;
        transform: none;
        top: auto;
        left: auto;
        right: auto;
    }

    .footer-left {
        order: 1;
    }

    .footer-right {
        order: 2;
    }

    .site-info {
        order: 3;
    }

    .footer-left .footer-menu {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }

    .footer-left .footer-menu li a,
    .footer-right a {
        color: white;
    }

    .footer-right a {
        display: block;
    }

    .site-info {
        text-align: center;
        white-space: normal;
    }
}

@media (max-width: 768px) {
    .bottom-footer-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        min-height: auto;
        position: static; /* wyłącz pozycjonowanie absolute */
    }

    .footer-left,
    .footer-right,
    .site-info {
        position: static;
        transform: none;
        top: auto;
        left: auto;
        right: auto;
    }

    .footer-left {
        order: 1;
    }

    .footer-right {
        order: 2;
    }

    .site-info {
        order: 3;
    }

    .footer-left .footer-menu {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }

    .footer-left .footer-menu li a,
    .footer-right a {
        color: white;
    }

    .footer-right a {
        display: block;
    }

    .site-info {
        text-align: center;
        white-space: normal;
    }
}
/* End Footer 3 kolumny wersja mobilna
--------------------------------------------- */

/* dodanie czcionki
--------------------------------------------- */
@font-face {
  font-family: 'Bashats';
  src: url('https://cozyblankettales.com/wp-content/fonts/ReadexPro/ReadexPro.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

.page-title,
.entry-title,
.related-title,
.wp-block-heading,
.hostinger-affiliate-block-single-type__product-title a,
.hostinger-affiliate-block-single-type__product-title h3 {
	font-family: var(--font-body) !important;
	color: black;
}
/* END dodanie czcionki
--------------------------------------------- */

.wp-block-list {
	margin-left: 0px !important;
	padding-left: 15px !important;
}

nav.navigation.post-navigation {
    margin-top: 20px !important;
    margin-bottom: 20px!important;
}

span.cat-links {
    margin-bottom: 0px !important;
}

.site-logo {
    line-height: normal !important;
}

@media (max-width: 768px) {
        .site-content {
            margin-top: 15px !important;
        }
	}

.nav-links {
	margin-bottom: 0px !important;
}

.theme-wrap {
	margin-bottom: 20px !important;
}

/* === First Visit Message Overlay === */
#first-visit-message-wrapper {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 99999;
	display: none;
	justify-content: center;
	align-items: center;
	padding: 15px;
	box-sizing: border-box;
}

/* === Popup Window === */
#first-visit-message {
	width: 33.33%;
	max-width: 400px;
	background-color: var(--post-item-background);
	border: 1px solid var(--color-text);
	box-shadow: var(--glow-small-shadow);
	border-radius: 8px;
	padding: 20px;
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--color-text);
	display: flex;
	flex-direction: column;
	gap: 2px;

	box-sizing: border-box;
}

/* === Popup Text === */
#first-visit-message p {
	margin: 0;
	line-height: 1.5;
	text-align: justify;
	margin-left: auto;
	margin-right: auto;
}

/* === OK Button Styling (Matches .apply-filters-btn) === */
#first-visit-ok {
	margin-top:6px;
  	border-radius: 5px;
	box-shadow: var(--glow-small-shadow);
	background-color: rgb(191, 6, 3);
	color: #fff;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--transition);
	border: 1px solid var(--color-text);
	font-size: 1rem;
	line-height: 1.5;
	font-family: var(--font-body);
	padding: 0.5rem 1rem;
	cursor: pointer;
}

/* === Hover (Matches .apply-filters-btn:hover) === */
#first-visit-ok:hover {
  	background-color: rgb(191, 6, 3) !important;
	color: #fff !important;
}

/* === Responsive: Mobile Full Width Popup === */
@media (max-width: 768px) {
	#first-visit-message {
		width: 100%;
		max-width: 100%;
		background-color: var(--post-item-background);
		border: 1px solid var(--color-text);
		box-shadow: var(--glow-small-shadow);
		border-radius: 8px;
		padding: 20px;
		font-family: var(--font-body);
		font-size: 1rem;
		color: var(--color-text);
		display: flex;
		flex-direction: column;
		gap: 2px;

		box-sizing: border-box;
  	}
}

/* === Custom Cookie Consent Banner (BC WORKWEAR) === */
/* === Tło dla banera zgody (Overlay) === */
#cookie-consent-wrapper {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99998;
    display: none; /* Domyślnie ukryty */
    justify-content: center;
    align-items: center;
    padding: 15px;
    box-sizing: border-box;
}

/* === Okienko z treścią (Popup) === */
#cookie-consent-banner {
    width: 33.33%;
    max-width: 400px;
    background-color: var(--post-item-background);
    border: 1px solid var(--color-text);
    box-shadow: var(--glow-small-shadow);
    border-radius: 8px;
    padding: 20px;
    color: var(--color-text);
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-sizing: border-box;
}

/* === Tekst w okienku === */
#cookie-consent-banner p {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.5;
    text-align: justify;
}

/* === Kontener na przyciski === */
#cookie-consent-banner .buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* === Wspólny styl dla przycisków zgody === */
#cookie-consent-banner button {
    border-radius: 5px;
    box-shadow: var(--glow-small-shadow);
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    border: 1px solid var(--color-text);
    font-size: 1rem;
    line-height: 1.5;
    font-family: var(--font-body);
    padding: 0.5rem 1rem;
    cursor: pointer;
}

/* === Przycisk AKCEPTUJĘ (zielony) === */
#accept-cookies {
    background-color: #27ae60;
}

/* === Przycisk ODRZUCAM (czerwony) === */
#reject-cookies {
    background-color: rgb(191, 6, 3);
}

/* === Responsive: Okienko na całą szerokość na mobilnych === */
@media (max-width: 768px) {
    #cookie-consent-banner {
        width: 100%;
        max-width: 100%;
    }
}
/* === End Custom Cookie Consent Banner === */

/* === Wyłącza datę w poście === */
.related-posts .post-date {
    display: none;
}

.entry-price{
    font-size: clamp(14px, 2.2vw, 18px);
    font-weight: 700;
    line-height: 1.2;
    color: #b12704;
    display: inline-block;
}

/* === Amazon slider – poziome przesuwanie === */
.amazon-slider-wrapper {
  overflow: hidden;
  position: relative;
  width: 100%;
  border-radius: 6px;
}

.amazon-slider-track {
  display: flex;
  transition: transform 0.8s ease-in-out;
  will-change: transform;
}

.amazon-slider-track a {
  flex: 0 0 100%;
  display: block;
}

.amazon-slider-track img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  object-fit: contain;
}

/* === Amazon Affiliate Block: finalna korekta wyrównania i nagłówka === */

/* 1. Wyrównanie całego bloku produktu do góry */
.hostinger-affiliate-block-single-type {
  display: flex; 
  align-items: flex-start !important;
  gap: 0 !important;
  padding-top: 0 !important;
}

/* 2. Kolumna z danymi produktu */
.hostinger-affiliate-block-single-type__product-data {
  align-self: flex-start !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 3. Kontener tytułu */
.hostinger-affiliate-block-single-type__product-title,
.hostinger-affiliate-block-single-type__product-title a {
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  overflow: visible !important;
}

/* 4. Sam nagłówek H3 — górny margines usunięty, dolny zachowany */
.hostinger-affiliate-block-single-type__product-title h3 {
  margin-top: 0 !important;
  margin-bottom: 16px !important; /* ← przywrócony odstęp pod tytułem */
  padding: 0 !important;
  line-height: 1.05 !important;   /* redukcja pustki nad tekstem */
  transform: translateY(-2px);    /* optyczne wyrównanie do góry */
  height: auto !important;
}

/* === Amazon slider – poziome przesuwanie === */
.adore-header-wrapper {
  background-color: #2C4E39 !important; 
}

/* === Amazon slider: nie przycinaj obrazków, zachowaj stały aspekt karty === */

/* tor slajdów – jak było */
.amazon-slider-wrapper { overflow: hidden; position: relative; width: 100%; }
.amazon-slider-track   { display: flex; transition: transform .8s ease-in-out; }

/* KAŻDY slajd ma stały aspekt (np. 4:3), a obraz jest wyśrodkowany */
.post-item .post-item-image .amazon-slider-wrapper .amazon-slider-track a {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;      /* wysokość karty stała */
  background: #fff;         /* tło pod „contain” */
  overflow: hidden;
  border-radius: 6px;
}

/* Obrazek: skaluj w ramce, nic nie przycinaj */
.post-item .post-item-image .amazon-slider-wrapper .amazon-slider-track img {
  max-width: 100%;
  max-height: 100%;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  aspect-ratio: auto !important; /* zdejmij aspekt z motywu */
  display: block;
}

/* Dla pewności – wyłącz regułę motywu dla IMG w slajderze (wyższa specyficzność) */
.post-item .post-item-image .amazon-slider-wrapper img {
  object-fit: contain !important;
  height: auto !important;
  width: auto !important;
}

/* Schowaj domyślne logo motywu w headerze */
.site-header .site-logo {
    display: none !important;
}

/* Wyłącz zielone tło "spłaszczonego jaja" w headerze */
.site-header .adore-header,
.site-header .adore-header-wrapper {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Opcjonalnie: zmniejsz pionowe odstępy w headerze, żeby nie było pustej belki */
.site-header .adore-header-wrapper {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* --- HERO: kontener wyrównany do szerokości strony --- */
.cbt-hero-header {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 20px auto 60px;   /* odstęp pod banerem */
    background: transparent;
}

@media (min-width: 769px) {
    .cbt-hero-header {
        margin-bottom: 100px !important; /* Wypycha wszystko pod banerem o 120px w dół */
    }
}

/* Wewnętrzny blok, ta sama szerokość co grid postów */
.cbt-hero-inner {
    width: 100%;
    max-width: 1280px;        /* jak wcześniej */
    position: relative;
}

/* Baner 2400x800 — skaluje się do szerokości kontenera */
.cbt-hero-image {
    width: 100%;
    height: auto;
    display: block;

    border: 1px solid var(--glow-border-color);
    box-shadow: var(--glow-medium-shadow);
    border-radius: 15px;
    background-color: var(--post-item-background); /* opcjonalnie – można usunąć */
}

/* OKRĄGŁE LOGO nachodzące na dół banera — DESKTOP */
.cbt-hero-logo {
    position: absolute;
    left: 40px;                /* odległość od lewej krawędzi banera */
    bottom: -112px;            /* dokładnie połowa koła pod banerem */
    width: 225px;              /* 1.5x większe niż 150px */
    height: 225px;
    border-radius: 50%;
    border: 4px solid #000000;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Obrazek wewnątrz koła */
.cbt-hero-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Responsywność – MOBILE */
@media (max-width: 768px) {

    .cbt-hero-inner {
        position: relative;
    }

    /* baner – podnosimy wysokość, żeby logo miało w co „wejść” */
    .cbt-hero-image {
        width: 100%;
        height: 260px;           /* możesz potem podnieść/obniżyć */
        object-fit: cover;       /* nie rozciąga, tylko przycina jak tło */
        object-position: center;
        display: block;
    }

    .cbt-hero-logo {
        width: 110px;            /* ten sam rozmiar, co teraz */
        height: 110px;
        position: absolute;
        left: 0;                /* prawa krawędź loga = prawa krawędź zdjęcia */
        right: auto;              /* kasujemy wcześniejsze left */
        bottom: -55px;           /* ~połowa wysokości loga pod banerem */
        border-width: 3px;
        z-index: 2;              /* żeby zawsze leżało na zdjęciu */
    }
}

/* 1. Resetujemy fundamenty */
html, body {
    height: 100% !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 2. Twój główny kontener (widoczny na screenie jako #page) */
#page.site {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important; /* Cała wysokość okna */
    height: auto !important;
}

/* 3. AUTOMATYCZNE wypchnięcie środka */
#content.site-content {
    flex: 1 0 auto !important; /* To automatycznie wypełnia pustą lukę */
    display: block !important;
    float: none !important;    /* Wyłączamy stare "pływanie", które blokuje flexa */
    width: 100% !important;
}

/* 4. Stopka zawsze na końcu */
#colophon.site-footer {
    flex-shrink: 0 !important;
    margin-top: auto !important; /* To jest magia, która pcha stopkę w dół */
}