/* Intelligent Dark Mode for CH24 */

body.dark {
    background-color: #000 !important;
}

/* Odwracamy zawartość strony (wpisy, strony), omijając całkowicie header i footer, 
   dzięki czemu position: fixed nagłówka działa w 100% płynnie i bez zacięć. */
body.dark #page > *:not(#masthead):not(#colophon) {
    filter: invert(1) hue-rotate(180deg);
}

/* Z powrotem odwracamy multimedia w treści, żeby nie były w negatywie */
body.dark #page > *:not(#masthead):not(#colophon) img,
body.dark #page > *:not(#masthead):not(#colophon) video,
body.dark #page > *:not(#masthead):not(#colophon) iframe,
body.dark #page > *:not(#masthead):not(#colophon) .boxersandswipers img,
body.dark #page > *:not(#masthead):not(#colophon) [style*="background-image"],
body.dark #page > *:not(#masthead):not(#colophon) [class*="bg-image"],
body.dark #page > *:not(#masthead):not(#colophon) .thumbnail img,
body.dark #page > *:not(#masthead):not(#colophon) .attachment-post-thumbnail,
body.dark #page > *:not(#masthead):not(#colophon) .wp-post-image {
    filter: invert(1) hue-rotate(180deg);
}


/* --- HEADER --- 
 * Oryginalnie header jest biały (zarówno na górze, jak i przy scrollu).
 * Ręcznie wymuszamy jego czysty, ciemny wygląd (bez filtrów invert).
 */
body.dark #masthead {
    background-color: #121212 !important;
    border-bottom: 1px solid #222 !important;
}

body.dark .site-header .site-branding a {
    background: url(../img/logo-ch-white.svg) center center no-repeat;
}

/* Ręcznie jasne teksty w headerze */
body.dark #masthead * {
    color: #eee !important;
}

/* Strzałki w rozwijanym menu - poprawka koloru dla trybu ciemnego */
body.dark .site-header .main-navigation .menu > li.menu-item-has-children > a:after {
    border-color: #eee transparent transparent transparent !important;
}

/* Ręcznie odwracamy wszystkie czarne ikony i logo w headerze, żeby stały się jasne */
body.dark #masthead img[src*="icon"],
body.dark #masthead .social_menu img,
body.dark #masthead .site-branding img,
body.dark #masthead svg {
    filter: invert(1) !important;
}
/* Upewniamy się, że miniatury wpisów w headerze nie są odwrócone */
body.dark #top_featured img {
    filter: none !important;
}

/* Przełącznik języka musi być jasny */
body.dark #header_language_switcher a {
    color: #fff !important;
}

/* --- TOGGLE ICON (SŁOŃCE / KSIĘŻYC) --- */
/* Ikona włącznika ma własny kolor z currentColor, nie powinna być odwracana przez ogólny filtr na svg,
 * inaczej biały kolor currentColor zostanie odwrócony na niewidoczny czarny! */
body.dark #dark-mode-toggle svg {
    filter: none !important; 
    color: #eee !important;
}

/* Logika pokazywania Słońca lub Księżyca */
#icon-sun { display: none; }
#icon-moon { display: block; }
body.dark #icon-sun { display: block; }
body.dark #icon-moon { display: none; }


/* --- FOOTER --- 
 * Wymuszony, sztywny kolor na prośbę.
 */
body.dark #colophon,
body.dark .site-footer {
    background-color: #121212 !important;
    color: #eee !important;
}
/* Linki i teksty w stopce */
body.dark #colophon *,
body.dark .site-footer * {
    color: #eee !important;
}

/* Elementy multimedialne w stopce nie powinny być odwrócone (chyba, że to czarne logo, to dajmy invert) */
/* Jeśli w stopce jest czarne logo, invert(1) sprawi, że będzie białe */


/* Usunięcie ostrych cieni na całej stronie, które rażą w oczy w trybie ciemnym */
body.dark * {
    box-shadow: none !important;
}

/* FIX DLA ROZWIJANEGO MENU (MEGA MENU / SUB-MENU) */
body.dark .site-header .main-navigation ul ul,
body.dark .site-header .main-navigation ul ul li,
body.dark .site-header .main-navigation ul ul div,
body.dark .site-header .main-navigation .mega-menu,
body.dark .site-header .main-navigation .menu-producers-block,
body.dark .site-header .main-navigation .menu-producers-col,
body.dark .site-header .main-navigation input {
    background-color: #1a1a1a !important; /* Odrobinę jaśniejszy ciemny */
    color: #eee !important;
    border-color: #333 !important;
}

/* Usuwamy białe tło z elementów producentów */
body.dark .site-header .main-navigation .menu-producer-item {
    background-color: transparent !important;
}

/* Trójkąty wskazujące nad otwartym menu (strzałki w górę) we wszystkich działach i markach */
body.dark .dzialy > .sub-menu:after, 
body.dark .dzialy > .sub-menu:before,
body.dark .marki > .sub-menu:after, 
body.dark .marki > .sub-menu:before,
body.dark .site-header .main-navigation .menu > li > .sub-menu:after,
body.dark .site-header .main-navigation .menu > li > .sub-menu:before {
    border-bottom-color: #1a1a1a !important;
    background-color: #1a1a1a !important;
}

/* Pole wyszukiwania w menu */
body.dark .site-header .main-navigation input {
    border: 1px solid #555 !important;
}

/* FIX DLA POJEDYNCZEGO WPISU I POLECANYCH WPISÓW W HEADERZE */
body.dark #top_featured {
    background-color: #121212 !important;
}

body.dark.single-post #masthead.hasScrolled > .wrap:after, 
body.dark.single-post #masthead.hasScrolled > .wrap:before {
    background-color: #121212 !important;
}

body.dark.single-post #masthead.hasScrolled > .wrap {
    background-color: transparent !important;
}

/* Odwracamy ikonę udostępniania w headerze, żeby była biała */
body.dark .header_share #sharing_buttons_header:before {
    filter: invert(1) !important;
}

/* Tooltip wyszukiwania - ciemne tło */
body.dark #header_search_content_tooltip {
    background-color: #000 !important;
}
body.dark #header_search_content_tooltip:before {
    background-color: #000 !important;
    border-bottom-color: #000 !important;
}

/* Wymuszony ciemny kolor pierwszych trzech elementów w menu 'Działy' */
body.dark .dzialy > .sub-menu > li:nth-child(1),
body.dark .dzialy > .sub-menu > li:nth-child(2),
body.dark .dzialy > .sub-menu > li:nth-child(3) {
    background-color: #000 !important;
}

/* --- BELKI Z INFORMACJAMI O PRODUCENCIE (.producer-heading) --- */
/* Zastosujemy tu podwójne odwrócenie filtrem, żeby móc swobodnie używać klasycznych kolorów hex */
body.dark .producer-heading {
    filter: invert(1) hue-rotate(180deg) !important;
    background-color: #222222 !important; /* Głęboki, ale widoczny szary/grafit */
    border: 1px solid #333 !important; /* Delikatna ramka dla jeszcze lepszego oddzielenia */
}
body.dark .producer-heading,
body.dark .producer-heading * {
    color: #eeeeee !important;
}
/* Odwracamy z powrotem ewentualne logo w tym bloku, żeby było naturalne */
body.dark .producer-heading img {
    filter: invert(1) hue-rotate(180deg) !important;
}

/* Przycisk oficjalnej strony w bloku producenta */
body.dark .producer-heading .official_www {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #444 !important;
    transition: all 0.3s ease;
}
body.dark .producer-heading .official_www:hover {
    background-color: #333333 !important;
    border-color: #555 !important;
}

/* --- NAGŁÓWKI STRON ARCHIWUM (.top-page) ORAZ ENCYKLOPEDII (#ency_top) --- */
/* Analogiczny manewr podwójnego odwrócenia, żeby sekcja tytułowa wyglądała naturalnie ciemno */
body.dark .top-page,
body.dark #ency_top {
    filter: invert(1) hue-rotate(180deg) !important;
    background-color: #1a1a1a !important; /* Ciemne, eleganckie tło */
    border-bottom: 1px solid #222 !important;
}
body.dark .top-page,
body.dark .top-page *,
body.dark #ency_top,
body.dark #ency_top * {
    color: #eeeeee !important;
}

/* --- MENU MOBILNE --- */
/* Ikonka "hamburgera" (3 paski) na urządzeniach mobilnych musi być jasna na ciemnym headerze */
body.dark .site-header .menu-toggle span {
    background-color: #ffffff !important;
}

/* Tło rozwiniętego menu na urządzeniach mobilnych */
@media (max-width: 1023px) {
    body.dark .toggled .menu {
        background-color: #121212 !important;
    }
    /* Ewentualne linie oddzielające elementy menu */
    body.dark .toggled .menu li {
        border-color: #333 !important;
    }
    /* Nadpisanie tła z wersji desktopowej (mega-menu) na transparent w wersji mobilnej */
    body.dark .site-header .main-navigation ul ul,
    body.dark .site-header .main-navigation ul ul li,
    body.dark .site-header .main-navigation ul ul div,
    body.dark .dzialy > .sub-menu > li:nth-child(1),
    body.dark .dzialy > .sub-menu > li:nth-child(2),
    body.dark .dzialy > .sub-menu > li:nth-child(3) {
        background-color: transparent !important;
    }
}