/* ============================================
   Nowy design – inspirowany index.html
   Kolorystyka: ciemne tło, zielone akcenty
   ============================================ */

/* Nadpisanie zmiennych dla trybu ciemnego */
body.dark-theme {
    --color-initial: #0A0A0B;      /* bg-void – główne tło */
    --color-primary: #f2f2f2;      /* text-bone – główny tekst */
    --color-secondary: #a0a0a5;    /* text-stone – szary tekst */
    --color-tertiary: #141518;     /* bg-surface – tło kart */
    --color-quaternary: #06b169;   /* text-ember – akcent (zielony) */
    --color-quinary: #06b169;      /* dodatkowy akcent */
    --color-border: rgba(255,255,255,0.05);
    --color-shadow: rgba(6,177,105,0.06);
}

/* Klasy kolorów – zapewnienie spójności */
body.dark-theme .color-primary {
    color: var(--color-primary) !important;
}
body.dark-theme .color-secondary {
    color: var(--color-secondary) !important;
}
body.dark-theme .color-quaternary {
    color: var(--color-quaternary) !important;
}
body.dark-theme .bg-initial {
    background-color: var(--color-initial) !important;
}
body.dark-theme .bg-tertiary {
    background-color: var(--color-tertiary) !important;
}

/* ============================================
   NAGŁÓWKI – linia podkreślenia w kolorze akcentu
   ============================================ */

/* Kreseczki pod nagłówkami – kolor akcentu (light) */
.related-posts h3::after,
.widget h3::after,
.container h2.fs-24::after,
.container h1.fs-24::after {
    background-color: #06b169 !important;
}

.entry-content h1::after,
.entry-content h2::after,
.entry-content h3::after,
.entry-content h4::after,
.entry-content h5::after,
.entry-content h6::after {
    background-color: #06b169 !important;
}

body.dark-theme .related-posts h3::after,
body.dark-theme .widget h3::after,
body.dark-theme .container h2.fs-24::after,
body.dark-theme .container h1.fs-24::after {
    background-color: var(--color-quaternary) !important;
}

body.dark-theme .entry-content h1::after,
body.dark-theme .entry-content h2::after,
body.dark-theme .entry-content h3::after,
body.dark-theme .entry-content h4::after,
body.dark-theme .entry-content h5::after,
body.dark-theme .entry-content h6::after {
    background-color: var(--color-quaternary) !important;
}

body.dark-theme h1,
body.dark-theme h2,
body.dark-theme h3,
body.dark-theme h4,
body.dark-theme h5,
body.dark-theme h6 {
    color: var(--color-primary);
}

/* ============================================
   LINKI
   ============================================ */

a {
    transition: color 0.3s ease;
}

body.dark-theme a {
    color: var(--color-secondary);
}
body.dark-theme a:hover {
    color: var(--color-quaternary);
}

/* ============================================
   HEADER
   ============================================ */

/* UWAGA: blur na wewnętrznym kontenerze, nie na headerze –
   backdrop-filter tworzy containing block dla position:fixed,
   co zablokowałoby pełnoekranowe menu mobile */
.kd-header > .container {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Fixed header – zawsze na górze */
.kd-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: var(--color-tertiary); /* jak body (bg-tertiary, oba tryby) */
}

/* Admin bar na desktopie (>=782px) jest fixed (32px) – header schodzi niżej */
@media screen and (min-width: 782px) {
    body.admin-bar .kd-header {
        top: 32px;
    }
}

body.dark-theme header {
    border-bottom: 1px solid var(--color-border);
}

/* ============================================
   MOBILE MENU – hamburger + pełnoekranowe menu
   ============================================ */

/* Desktop: nawigacja inline */
.kd-nav-desktop {
    display: flex;
    align-items: center;
}

/* Przełącznik motywu – bez efektu hover */
.theme-toggle,
.theme-toggle:hover,
.theme-toggle:focus {
    color: inherit;
    transition: none;
}

/* Pełnoekranowe menu mobile – ukryte na desktopie */
.kd-mobile-menu {
    display: none;
}

/* Hamburger – widoczny tylko na mobile */
.kd-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    z-index: 1000;
}
/* Bez background/box-shadow z milligram (button:hover) */
.kd-menu-toggle:hover,
.kd-menu-toggle:focus,
.kd-menu-toggle:active {
    background: none;
    box-shadow: none;
}
.kd-menu-line {
    display: block;
    width: 26px;
    height: 3px;
    border-radius: 2px;
    background: var(--color-primary);
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.kd-menu-toggle.active .kd-menu-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.kd-menu-toggle.active .kd-menu-line:nth-child(2) {
    opacity: 0;
}
.kd-menu-toggle.active .kd-menu-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

@media (max-width: 991px) {
    /* Wyższa specyficzność – style.css ma `header nav.navigation { display: block }` */
    .kd-header .kd-nav-desktop {
        display: none !important;
    }
    /* Ikona motywu w headerze ukryta – na mobile jest w pełnoekranowym menu */
    .kd-header .theme-toggle {
        display: none;
    }
    .kd-menu-toggle {
        display: flex;
    }
    .kd-mobile-menu {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: 998;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 40px;
        padding: 40px 20px;
        background: var(--color-initial);
        transform: translateY(-100%);
        transition: transform 0.35s ease;
        visibility: hidden;
    }
    .kd-mobile-menu.open {
        transform: translateY(0);
        visibility: visible;
    }
    .kd-mobile-menu .navigation ul {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
    }
    .kd-mobile-menu .navigation ul li a {
        font-size: 22px;
    }
    .kd-mobile-menu .theme-toggle {
        transform: scale(1.3);
    }
}

/* Admin bar na mobile (<783px) jest absolute (46px) – overlay poniżej */
@media (max-width: 781px) {
    body.admin-bar .kd-mobile-menu {
        top: 46px;
    }
}

body.kd-menu-open {
    overflow: hidden;
}

.navigation ul li a {
    font-weight: 500;
    transition: color 0.3s ease;
}

/* Jasny motyw – hover menu (desktop i mobile) */
.navigation ul li a:hover {
    color: #06b169;
}

/* Aktywny element menu – kolor jak hover */
.navigation ul li.current-menu-item a,
.navigation ul li.current_page_item a {
    color: #06b169;
}

body.dark-theme .navigation ul li a {
    color: var(--color-secondary);
}
body.dark-theme .navigation ul li a:hover {
    color: var(--color-quaternary);
}
body.dark-theme .navigation ul li.current-menu-item a,
body.dark-theme .navigation ul li.current_page_item a {
    color: var(--color-quaternary);
}

/* ============================================
   KARTY NA STRONIE GŁÓWNEJ – pierwszy rząd
   ============================================ */

.chpf__left article,
.chpf__right article,
.column.bg-initial.br-10.shadow {
    border: 1px solid #c3c3c3;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

/* Jasny motyw – hover */
.chpf__left article:hover,
.chpf__right article:hover,
.column.bg-initial.br-10.shadow:hover {
    box-shadow: 0 0 40px rgba(6, 177, 105, 0.06);
    border-color: #06b169;
}

/* Jasny motyw – hover linku w karcie (kd-last-posts / kd-sidebar-last-one-post) */
.kd-last-posts article:hover .info h3 a,
.kd-sidebar-last-one-post article:hover .info h3 a {
    color: #00ff93 !important;
}

/* Ramka obrazków w kartach (na kontenerze a, żeby zoom jej nie rozciągał) */
.kd-featured-posts .chpf__img {
    border: 1px solid #c3c3c3;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
body.dark-theme .kd-featured-posts .chpf__img {
    border: 1px solid #373737;
}

/* Płynna animacja hover na obrazkach */
.kd-featured-posts .chpf__img img,
.row .column.bg-initial.br-10.p-15 .chpf__img img {
    transition: all 0.3s ease;
}

body.dark-theme .chpf__left article,
body.dark-theme .chpf__right article,
body.dark-theme .column.bg-initial.br-10.shadow {
    background: var(--color-tertiary) !important;
    border: 1px solid var(--color-border);
    box-shadow: 0 0 20px var(--color-shadow);
}

body.dark-theme .chpf__left article:hover,
body.dark-theme .chpf__right article:hover,
body.dark-theme .column.bg-initial.br-10.shadow:hover {
    box-shadow: 0 0 40px var(--color-shadow);
    border-color: var(--color-quaternary);
}

/* Dark – hover linku w karcie (kd-last-posts / kd-sidebar-last-one-post) */
body.dark-theme .kd-last-posts article:hover .info h3 a,
body.dark-theme .kd-sidebar-last-one-post article:hover .info h3 a {
    color: #00ff93 !important;
}

/* ============================================
   DATA – żółta, wyróżniona
   ============================================ */

.chpf__date {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Jasny motyw – data w kolorze akcentu */
.chpf__date {
    color: #06b169 !important;
}

body.dark-theme .chpf__date {
    color: var(--color-quaternary) !important;
}

/* Overlay z gradientem na dole karty */
body.dark-theme .chpf__info {
    background: linear-gradient(180deg, transparent 0%, var(--color-initial) 100%) !important;
}
body.dark-theme .chpf__info h3 a {
    color: var(--color-primary) !important;
}
body.dark-theme .chpf__info .excerpt {
    color: var(--color-secondary);
}

/* ============================================
   WYRÓŻNIONE WPISY – kafelki (4 kolumny)
   ============================================ */

/* Jasny motyw – data w kolorze akcentu */
.info .date {
    color: #06b169 !important;
}

body.dark-theme .info .date {
    color: var(--color-quaternary) !important;
}

.info h3 a {
    transition: color 0.3s ease;
}

body.dark-theme .info h3 a {
    color: var(--color-primary);
}

/* Hover nagłówka kafelka – jak w kd-other-posts */
.kd-featured-posts article:hover .info h3 a {
    color: #06b169;
}
body.dark-theme .kd-featured-posts article:hover .info h3 a,
body.dark-theme .column.mb-20 .related-post:hover a {
    color: var(--color-quaternary) !important;
}

/* Hover kafelka – ramka i cień na kontenerze (a) */
.kd-featured-posts article:hover .chpf__img {
    border-color: #06b169;
    box-shadow: 0 0 40px rgba(6, 177, 105, 0.06);
}
body.dark-theme .kd-featured-posts article:hover .chpf__img {
    border-color: var(--color-quaternary);
    box-shadow: 0 0 40px var(--color-shadow);
}

/* ============================================
   POZOSTAŁE WPISY – lista
   ============================================ */

.row .column.bg-initial.br-10.p-15 {
    border: 1px solid #c3c3c3;
    transition: all 0.3s ease;
}

/* Jasny motyw – hover */
.row .column.bg-initial.br-10.p-15:hover {
    border-color: #06b169;
}
.row .column.bg-initial.br-10.p-15:hover .chpf__img img {
    box-shadow: 0 0 40px rgba(6, 177, 105, 0.06);
}

body.dark-theme .row .column.bg-initial.br-10.p-15 {
    background: var(--color-tertiary) !important;
    border: 1px solid var(--color-border);
}

body.dark-theme .row .column.bg-initial.br-10.p-15:hover {
    border-color: var(--color-quaternary);
}
body.dark-theme .row .column.bg-initial.br-10.p-15:hover .chpf__img img {
    box-shadow: 0 0 40px var(--color-shadow);
}
body.dark-theme .row .column.bg-initial.br-10.p-15 .info h3 a {
    color: var(--color-primary);
}
body.dark-theme .row .column.bg-initial.br-10.p-15 .excerpt {
    color: var(--color-secondary);
}
/* Jasny motyw – data w kolorze akcentu */
.row .column.bg-initial.br-10.p-15 .date {
    color: #06b169;
}

body.dark-theme .row .column.bg-initial.br-10.p-15 .date {
    color: var(--color-quaternary);
}

/* Hover na całym wierszu – zmiana koloru linku */
.row .column.bg-initial.br-10.p-15:hover .info h3 a {
    color: #06b169;
}
body.dark-theme .row .column.bg-initial.br-10.p-15:hover .info h3 a {
    color: var(--color-quaternary) !important;
}

/* ============================================
   POWIĄZANE WPISY – kd-related-posts i kd-related-posts2
   efekty hover na elemencie .related-post
   ============================================ */

.kd-related-posts .related-post,
.kd-related-posts2 .related-post {
    border: 1px solid #c3c3c3;
    transition: all 0.3s ease;
}

/* Jasny motyw – hover */
.kd-related-posts .related-post:hover,
.kd-related-posts2 .related-post:hover {
    border-color: #06b169;
    box-shadow: 0 0 40px rgba(6, 177, 105, 0.06);
}
.kd-related-posts .related-post:hover h4 a,
.kd-related-posts2 .related-post:hover h4 a {
    color: #06b169;
}
body.dark-theme .kd-related-posts .related-post:hover h4 a,
body.dark-theme .kd-related-posts2 .related-post:hover h4 a {
    color: var(--color-quaternary);
}

body.dark-theme .kd-related-posts .related-post,
body.dark-theme .kd-related-posts2 .related-post {
    border: 1px solid #373737;
}
body.dark-theme .kd-related-posts .related-post:hover,
body.dark-theme .kd-related-posts2 .related-post:hover {
    border-color: var(--color-quaternary);
    box-shadow: 0 0 40px var(--color-shadow);
}

/* ============================================
   SEKCJE "PROPONOWANE" i "NOWE" (w artykule)
   hover TYLKO wewnątrz .container.p-0.mb-20
   NIE WPŁYWA NA SIDEBAR
   ============================================ */

.container.p-0.mb-20 .related-post,
.container.p-0.mb-20 article.column {
    border: 1px solid transparent;
    transition: all 0.3s ease;
    border-radius: 8px;
}

/* Jasny motyw – hover */
.container.p-0.mb-20 .related-post:hover,
.container.p-0.mb-20 article.column:hover {
    background: var(--color-tertiary);
    border-color: #06b169;
    box-shadow: 0 0 30px rgba(6, 177, 105, 0.06);
}

body.dark-theme .container.p-0.mb-20 .related-post:hover,
body.dark-theme .container.p-0.mb-20 article.column:hover {
    background: var(--color-tertiary) !important;
    border-color: var(--color-quaternary) !important;
    box-shadow: 0 0 30px var(--color-shadow);
}

body.dark-theme .container.p-0.mb-20 .related-post:hover a,
body.dark-theme .container.p-0.mb-20 article.column:hover a {
    color: var(--color-quaternary) !important;
}

/* ============================================
   SIDEBAR – KATEGORIE (widget)
   ============================================ */

.widget .cat-item a {
    padding: 8px 12px;
    transition: all 0.3s ease;
}

/* Jasny motyw – hover */
.widget .cat-item a:hover {
    color: #000;
}

body.dark-theme .widget .cat-item a {
    background: transparent;
    border-left: 3px solid transparent;
}

body.dark-theme .widget .cat-item a:hover {
    border-left-color: var(--color-quaternary);
    background: var(--color-initial);
    background-color: color-mix(in srgb, var(--color-initial) 10%, black);
    color: var(--color-quaternary);
}

/* Jasny motyw – hover linków w sidebarze */
.kd-sidebar-last-posts h4 a:hover,
.kd-sidebar-related-posts h4 a:hover {
    color: #06b169;
}

/* ============================================
   PAGINACJA
   ============================================ */

.pagination .page-numbers {
    padding: 0.5rem 1rem;
    border-radius: 5px;
    transition: all 0.3s ease;
}

/* Jasny motyw – paginacja */
.pagination .page-numbers {
    color: var(--color-primary);
    background: #ffffff;
    border: 1px solid #e3e3e3;
}
.pagination .page-numbers:hover {
    background: #06b169;
    color: #0a0a0b;
}
.pagination .page-numbers.current {
    background: #06b169;
    color: #0a0a0b;
    border-color: #06b169;
}

body.dark-theme .pagination .page-numbers {
    color: var(--color-secondary);
    background: var(--color-tertiary);
    border: 1px solid var(--color-border);
}
body.dark-theme .pagination .page-numbers.current {
    background: var(--color-quaternary);
    color: var(--color-initial);
    border-color: var(--color-quaternary);
}
body.dark-theme .pagination .page-numbers:hover {
    background: var(--color-quaternary);
    color: var(--color-initial);
}

/* ============================================
   STOPKA
   ============================================ */

body.dark-theme footer {
    background: var(--color-initial) !important;
    border-top: 1px solid var(--color-border);
    color: var(--color-secondary);
}
body.dark-theme footer .container .column {
    color: var(--color-secondary);
}

/* ============================================
   NAGŁÓWKI SEKCJI
   ============================================ */

body.dark-theme .container h2.fs-24 {
    color: var(--color-primary);
}

/* ============================================
   OGÓLNE TŁO I OBRAZKI
   ============================================ */

body.dark-theme {
    background: var(--color-initial);
    color: var(--color-secondary);
}

/* ============================================
   ZOOM OBRAZKÓW NA HOVER
   ============================================ */

/* Border-radius + przycięcie na linkach otaczających obrazki */
article a.br-10 {
    display: block;
    overflow: hidden;
    border-radius: 10px;
}

/* Płynne przejście zoomu */
.kd-related-posts .related-post img,
.kd-related-posts2 .related-post img,
.kd-other-posts article img,
.kd-sidebar-last-posts .related-post img,
.kd-sidebar-related-posts .related-post img,
.kd-last-posts .chpf__img img,
.kd-sidebar-last-one-post .chpf__img img {
    transition: transform 0.3s ease;
}

/* Zoom na hover */
.kd-related-posts .related-post:hover img,
.kd-related-posts2 .related-post:hover img,
.kd-other-posts article:hover img,
.kd-sidebar-last-posts .related-post:hover img,
.kd-sidebar-related-posts .related-post:hover img,
.kd-last-posts article:hover .chpf__img img,
.kd-sidebar-last-one-post article:hover .chpf__img img,
.kd-featured-posts article:hover .chpf__img img {
    transform: scale(1.08);
}

/* ============================================
   PRZYCIEMNIENIE ZDJĘĆ W HERO-KARTACH
   ============================================ */

.kd-last-posts article .chpf__img::after,
.kd-sidebar-last-one-post article .chpf__img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    pointer-events: none;
    z-index: 1;
}

/* ============================================
   KOD – blok z kolorowaniem składni (shortcode [kod])
   ============================================ */

.kod-block {
    background: #f6f8fa;
    border: 1px solid #c3c3c3;
    border-radius: 10px;
    padding: 15px;
    overflow: auto;
    font-size: 14px;
    line-height: 1.5;
    margin: 15px 0;
}
.kod-block code {
    font-family: Consolas, Monaco, 'Courier New', monospace;
    background: none;
    white-space: pre;
    color: #24292e;
}

/* Jasny motyw – kolory tokenów */
.kod-block .tok-kw   { color: #a626a4; }
.kod-block .tok-str  { color: #50a14f; }
.kod-block .tok-com  { color: #a0a0a0; font-style: italic; }
.kod-block .tok-num  { color: #986801; }
.kod-block .tok-fn   { color: #4078f2; }
.kod-block .tok-var  { color: #e45649; }
.kod-block .tok-tag  { color: #986801; }
.kod-block .tok-prop { color: #4078f2; }

/* Dark – blok i kolory tokenów */
body.dark-theme .kod-block {
    background: #141518;
    border-color: #373737;
}
body.dark-theme .kod-block code {
    color: #f2f2f2;
}
body.dark-theme .kod-block .tok-kw   { color: #c678dd; }
body.dark-theme .kod-block .tok-str  { color: #98c379; }
body.dark-theme .kod-block .tok-com  { color: #6a737d; font-style: italic; }
body.dark-theme .kod-block .tok-num  { color: #d19a66; }
body.dark-theme .kod-block .tok-fn   { color: #61afef; }
body.dark-theme .kod-block .tok-var  { color: #e06c75; }
body.dark-theme .kod-block .tok-tag  { color: #d19a66; }
body.dark-theme .kod-block .tok-prop { color: #61afef; }