/* === plg_system_motyw — ciemny motyw parafialaziska.pl (makieta zaakceptowana 2026-10-07) ===
   Działa tylko przy <html data-theme="dark"> (ustawia go skrypt na początku <head>); jasny wygląd strony zostaje bez zmian.
   Obejmuje Helix Ultimate i własne rozszerzenia; kolory z opcji mod_intencje rozjaśnia sam moduł (--intencje-dark, od 1.3.0).
   Kontrast tekstu: ink 13–15:1, muted 6–8:1, akcent 6–8:1 (WCAG 1.4.3 z zapasem). */

html[data-theme="dark"] {
  color-scheme: dark;
  --d-bg: #151413;
  --d-surface: #1e1c1a;
  --d-surface-2: #2a2724;
  --d-line: #3b3733;
  --d-ink: #ece6dd;
  --d-ink-strong: #f6f1ea;
  --d-muted: #b0a89e;
  --d-accent: #ff8a5b;          /* tekst i linki na ciemnym tle */
  --d-accent-hover: #ffb08f;
  --d-accent-fill: #cd3a0d;     /* tła z białym tekstem (5,0:1) — jak w jasnym motywie */
  --d-red: #ff7b72;
  --d-blue: #8fb3ff;
  --d-footer: #0e0d0c;
  --d-logo-plate: #f4efe6;

  /* Bootstrap 5.2 */
  --bs-body-bg: var(--d-bg);
  --bs-body-color: var(--d-ink);
  --bs-border-color: var(--d-line);
  --bs-link-color: var(--d-accent);
  --bs-link-hover-color: var(--d-accent-hover);
  --bs-secondary-color: var(--d-muted);
}

/* --- podstawy --- */
html[data-theme="dark"] body,
html[data-theme="dark"] .body-wrapper,
html[data-theme="dark"] .body-innerwrapper,
html[data-theme="dark"] .sp-pre-loader,
html[data-theme="dark"] .sp-preloader { background-color: var(--d-bg); color: var(--d-ink); }
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: var(--d-ink-strong); }
/* Ogólne kolory linków z niską swoistością (:where): przyciski (.btn) zachowują swoje kolory, a reguły komponentów
   (karty grobów, zakładki intencji) wygrywają także na hover. Linki Helixa z własnym ciemnym kolorem — niżej, wprost. */
html[data-theme="dark"] a:where(:not(.btn)) { color: var(--d-accent); }
html[data-theme="dark"] a:where(:not(.btn)):where(:hover, :focus) { color: var(--d-accent-hover); }
/* Linki w treści: na ciemnym tle pomarańcz różni się od tekstu tylko 1,9:1 — podkreślenie (WCAG 1.4.1). */
/* Tylko zwykłe linki redakcyjne (bez klasy) — przyciski i zakładki modułów osadzonych w artykule zostają bez podkreślenia. */
html[data-theme="dark"] [itemprop="articleBody"] a:not([class]) { text-decoration: underline; text-underline-offset: .15em; }
html[data-theme="dark"] .article-list .article .readmore a,
html[data-theme="dark"] .article .readmore a,
html[data-theme="dark"] a.readmore { color: var(--d-accent); }
html[data-theme="dark"] hr { color: var(--d-line); border-color: var(--d-line); opacity: 1; }
html[data-theme="dark"] blockquote { background: var(--d-surface-2); color: var(--d-ink); }
html[data-theme="dark"] blockquote span { color: var(--d-ink-strong); }
html[data-theme="dark"] :focus-visible { outline-color: var(--d-accent); }

/* --- nagłówek, górny pasek, logo --- */
html[data-theme="dark"] #sp-header,
html[data-theme="dark"] #sp-header-topbar,
html[data-theme="dark"] #sp-header.header-sticky { background: var(--d-surface); }
html[data-theme="dark"] #sp-header { box-shadow: 0 1px 0 var(--d-line); }
html[data-theme="dark"] #sp-header-topbar .container-inner { border-bottom-color: var(--d-line); }
html[data-theme="dark"] #sp-header-topbar a,
html[data-theme="dark"] #sp-header-topbar .sp-contact-info,
html[data-theme="dark"] #sp-header-topbar-social a { color: var(--d-muted); }
html[data-theme="dark"] #sp-header-topbar a:hover,
html[data-theme="dark"] #sp-header-topbar a:focus { color: var(--d-accent); }
/* Bez osobnego logo dla ciemnego motywu (opcja wtyczki) — tarcza pod oryginałem. Z logo z opcji wtyczki ten blok
   wyłącza styl inline dodawany przez Motyw.php (podmiana obrazka przez `content` + motyw.js). */
/* Logo to okrągły medalion (GIF z przezroczystością 1-bitową, koło 760 px w obrazku 814×943, środek 49,75% / 49,5%):
   jasna tarcza dokładnie pod medalionem, z wąskim marginesem — bez postrzępionych krawędzi na ciemnym tle. */
html[data-theme="dark"] .logo-image,
html[data-theme="dark"] .logo-image-phone { background: radial-gradient(circle closest-side at 49.75% 49.5%, var(--d-logo-plate) 98.5%, transparent 100%); }

/* --- menu główne i rozwijane --- */
html[data-theme="dark"] .sp-megamenu-parent > li > a,
html[data-theme="dark"] .sp-megamenu-parent > li > span { color: var(--d-ink); }
html[data-theme="dark"] .sp-megamenu-parent > li:hover > a,
html[data-theme="dark"] .sp-megamenu-parent > li:hover > span,
html[data-theme="dark"] .sp-megamenu-parent > li.active > a,
html[data-theme="dark"] .sp-megamenu-parent > li.active > span,
html[data-theme="dark"] .menu li.active a { color: var(--d-accent); }
html[data-theme="dark"] .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner { background: var(--d-surface-2); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a,
html[data-theme="dark"] .sp-megamenu-parent .sp-dropdown li.sp-menu-item > span:not(.sp-menu-badge) { color: var(--d-ink); }
html[data-theme="dark"] .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover,
html[data-theme="dark"] .sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a { color: var(--d-accent); }
html[data-theme="dark"] .burger-icon > span { background-color: var(--d-ink); }

/* --- menu mobilne (offcanvas) --- */
html[data-theme="dark"] .offcanvas-menu { background-color: var(--d-surface); color: var(--d-ink); }
html[data-theme="dark"] .offcanvas-menu .offcanvas-inner a,
html[data-theme="dark"] .offcanvas-menu .offcanvas-inner ul.menu > li a,
html[data-theme="dark"] .offcanvas-menu .offcanvas-inner ul.menu > li span { color: var(--d-ink); }
html[data-theme="dark"] .offcanvas-menu .offcanvas-inner ul.menu > li li a { color: var(--d-muted); }
html[data-theme="dark"] .offcanvas-menu .offcanvas-inner ul.menu > li.active > a,
html[data-theme="dark"] .offcanvas-menu .offcanvas-inner a:hover { color: var(--d-accent); }
html[data-theme="dark"] .offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent .menu-toggler { color: var(--d-ink) !important; }
html[data-theme="dark"] .offcanvas-menu .close-offcanvas .burger-icon > span { background-color: var(--d-ink); }
html[data-theme="dark"] .offcanvas-menu .sp-contact-info,
html[data-theme="dark"] .offcanvas-menu .sp-contact-info a,
html[data-theme="dark"] .offcanvas-menu .sp-contact-info span,
html[data-theme="dark"] .offcanvas-menu .social-icons a { color: var(--d-muted); opacity: 1; }
/* Helix daje ikonom Font Awesome w menu mobilnym własny kolor (.offcanvas-menu .fab{color:#252525}) — ikony biorą kolor linku. */
html[data-theme="dark"] .offcanvas-menu .fa,
html[data-theme="dark"] .offcanvas-menu .fab,
html[data-theme="dark"] .offcanvas-menu .far,
html[data-theme="dark"] .offcanvas-menu .fas { color: inherit; }
/* Bieżący dział w menu mobilnym: Helix daje mu #cd3a0d i opacity .7 (na ciemnym ~2:1). */
html[data-theme="dark"] .offcanvas-menu .offcanvas-inner ul.menu li.active > a,
html[data-theme="dark"] .offcanvas-menu .offcanvas-inner ul.menu li.active > span,
html[data-theme="dark"] .offcanvas-menu .offcanvas-inner ul.menu li.active > .nav-header,
html[data-theme="dark"] .offcanvas-menu .offcanvas-inner ul.menu li.active > .mod-menu__heading { color: var(--d-accent); opacity: 1; }
/* Helix przygasza kontakt i ikony w menu mobilnym (opacity .7) — na ciemnym tle to za mało kontrastu (4,2:1).
   Ten sam selektor co w Helixie + prefiks motywu, bo bundel szablonu ładuje się PO tym arkuszu. */
html[data-theme="dark"] .offcanvas-menu .offcanvas-inner .sp-contact-info > li > a,
html[data-theme="dark"] .offcanvas-menu .offcanvas-inner .social-icons > li > a { opacity: 1; }
html[data-theme="dark"] .form-control { background-color: var(--d-surface-2); border-color: var(--d-line); color: var(--d-ink); }
html[data-theme="dark"] .form-control::placeholder { color: var(--d-muted); }

/* --- stopka: o ton ciemniejsza od strony, żeby nie zlała się z treścią --- */
html[data-theme="dark"] #sp-bottom,
html[data-theme="dark"] #sp-footer { background: var(--d-footer); color: var(--d-ink); }
html[data-theme="dark"] #sp-bottom { border-top: 1px solid var(--d-line); }
html[data-theme="dark"] #sp-bottom a,
html[data-theme="dark"] #sp-footer a { color: var(--d-muted); }
html[data-theme="dark"] #sp-bottom a:hover,
html[data-theme="dark"] #sp-footer a:hover { color: var(--d-ink-strong); }

/* --- treść: karty bloga, listy, tabele, paginacja, przyciski --- */
html[data-theme="dark"] .article-list .article,
html[data-theme="dark"] .blog-item.article,
html[data-theme="dark"] .article { background: var(--d-surface); border-color: var(--d-line); }
html[data-theme="dark"] .article-list .article .article-header h2 a,
html[data-theme="dark"] .article-header h1 a,
html[data-theme="dark"] .article-header h2 a,
html[data-theme="dark"] .newstitle a,
html[data-theme="dark"] .newsflash-title a,
html[data-theme="dark"] .news-list .news .news-header h4 a { color: var(--d-ink-strong); }
html[data-theme="dark"] .article-info,
html[data-theme="dark"] .article-info a { color: var(--d-muted); }
/* Helix oddziela zdjęcie od tekstu karty linią #f5f5f5 — w jasnym motywie niewidoczna, w ciemnym jasna kreska.
   Zdjęcie przechodzi wprost w kartę (jak w karuzeli). */
html[data-theme="dark"] .article-list .article .article-intro-image,
html[data-theme="dark"] .article-list .article .article-featured-video,
html[data-theme="dark"] .article-list .article .article-featured-audio,
html[data-theme="dark"] .article-list .article .article-full-image { border-bottom-color: transparent; }
/* Pojedynczy artykuł: karta jak pozycja bloga (lista intencji, ogłoszeń) — bez niej tekst „wisi” na tle strony. */
html[data-theme="dark"] body.view-article .article-details {
  background: var(--d-surface);
  border: 1px solid var(--d-line);
  border-radius: 3px;
  padding: 20px;
}
/* Menu i moduły w kolumnach bocznych: Helix daje im jasną ramkę #f3f3f3 — tu ta sama karta co artykuł. */
html[data-theme="dark"] #sp-left .sp-module,
html[data-theme="dark"] #sp-right .sp-module { background: var(--d-surface); border-color: var(--d-line); }
html[data-theme="dark"] #sp-left .sp-module .sp-module-title,
html[data-theme="dark"] #sp-right .sp-module .sp-module-title,
html[data-theme="dark"] #sp-left .sp-module ul > li,
html[data-theme="dark"] #sp-right .sp-module ul > li { border-bottom-color: var(--d-line); }
/* Linie oddzielające treść w widoku artykułu i w modułach bocznych — zostają, ale w kolorze linii motywu. */
html[data-theme="dark"] .article-details .article-ratings-social-share,
html[data-theme="dark"] .article-details .article-author-information,
html[data-theme="dark"] .pager,
html[data-theme="dark"] #article-comments,
html[data-theme="dark"] #sp-left .sp-module .latestnews > div,
html[data-theme="dark"] #sp-right .sp-module .latestnews > div { border-color: var(--d-line); }
/* Linki, którym preset Helixa daje #252525 (moduły boczne, nawigacja poprzedni/następny, udostępnianie). */
html[data-theme="dark"] .sp-module ul > li > a,
html[data-theme="dark"] .sp-module .latestnews > div > a,
html[data-theme="dark"] .pager > li a,
html[data-theme="dark"] .article-social-share .social-share-icon ul li a { color: var(--d-ink); }
html[data-theme="dark"] .sp-module ul > li > a:hover,
html[data-theme="dark"] .sp-module .latestnews > div > a:hover,
html[data-theme="dark"] .pager > li a:hover { color: var(--d-accent); }
html[data-theme="dark"] .pager > li a { border-color: var(--d-line); }
html[data-theme="dark"] .article-social-share .social-share-icon ul li a:hover,
html[data-theme="dark"] .article-social-share .social-share-icon ul li a:focus { background: var(--d-accent-fill); color: #fff; }
html[data-theme="dark"] .list-group {
  --bs-list-group-bg: var(--d-surface);
  --bs-list-group-color: var(--d-ink);
  --bs-list-group-border-color: var(--d-line);
  --bs-list-group-action-hover-bg: var(--d-surface-2);
  --bs-list-group-action-hover-color: var(--d-ink-strong);
}
html[data-theme="dark"] .table {
  --bs-table-color: var(--d-ink);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--d-line);
  --bs-table-striped-bg: rgba(255, 255, 255, .04);
  --bs-table-striped-color: var(--d-ink);
  --bs-table-hover-bg: rgba(255, 255, 255, .06);
  --bs-table-hover-color: var(--d-ink);
  --bs-table-active-bg: rgba(255, 255, 255, .08);
  --bs-table-active-color: var(--d-ink);
  color: var(--d-ink);
  border-color: var(--d-line);
}
html[data-theme="dark"] table td, html[data-theme="dark"] table th { border-color: var(--d-line); }
html[data-theme="dark"] .table-group-divider { border-top-color: var(--d-muted) !important; }
html[data-theme="dark"] .pagination {
  --bs-pagination-bg: var(--d-surface);
  --bs-pagination-color: var(--d-ink);
  --bs-pagination-border-color: var(--d-line);
  --bs-pagination-hover-bg: var(--d-surface-2);
  --bs-pagination-hover-color: var(--d-ink-strong);
  --bs-pagination-disabled-bg: var(--d-bg);
  --bs-pagination-disabled-color: var(--d-muted);
  --bs-pagination-disabled-border-color: var(--d-line);
}
html[data-theme="dark"] .pagination > li > a,
html[data-theme="dark"] .pagination > li > span { background-color: var(--d-surface); border-color: var(--d-line); color: var(--d-ink); }
html[data-theme="dark"] .pagination > .active > a,
html[data-theme="dark"] .pagination > .active > span { background-color: var(--d-accent-fill); border-color: var(--d-accent-fill); color: #fff; }
html[data-theme="dark"] .btn-outline-primary {
  --bs-btn-color: var(--d-accent);
  --bs-btn-border-color: var(--d-accent);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--d-accent-fill);
  --bs-btn-hover-border-color: var(--d-accent-fill);
  --bs-btn-active-bg: var(--d-accent-fill);
  --bs-btn-active-border-color: var(--d-accent-fill);
}
html[data-theme="dark"] .btn-outline-secondary { --bs-btn-color: var(--d-ink); --bs-btn-border-color: var(--d-line); }

/* --- stare intencje (artykuły w kategorii 15) i nagłówki dni --- */
html[data-theme="dark"] h4.day-header,
html[data-theme="dark"] .day-header { color: var(--d-accent); }
html[data-theme="dark"] .intention-extra { color: var(--d-blue); }
html[data-theme="dark"] .intention-red,
html[data-theme="dark"] .intention-strong-red { color: var(--d-red); }

/* --- karuzela „W najbliższym czasie” (mod_news_carousel) --- */
html[data-theme="dark"] .news-list .news,
html[data-theme="dark"] .mod-news-carousel .news { background: var(--d-surface); box-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .news-list .news:hover { background: var(--d-surface-2); }
html[data-theme="dark"] .news-list .news .news-intro-image { border-bottom-color: var(--d-line); }
html[data-theme="dark"] .news-carousel-wrapper .swiper-button-next,
html[data-theme="dark"] .news-carousel-wrapper .swiper-button-prev { background: var(--d-surface-2); box-shadow: 0 0 0 1px var(--d-line), 0 2px 10px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .news-carousel-wrapper .swiper-button-next:hover,
html[data-theme="dark"] .news-carousel-wrapper .swiper-button-prev:hover { background: var(--d-line); }
html[data-theme="dark"] .news-carousel-wrapper .swiper-button-next::after,
html[data-theme="dark"] .news-carousel-wrapper .swiper-button-prev::after { color: var(--d-ink); }

/* --- mod_intencje (Intencje 2027) --- */
html[data-theme="dark"] .mod-intencje {
  --intencje-accent: var(--d-accent-fill);
  --intencje-accent-soft: var(--d-surface-2);
  --intencje-ink: var(--d-ink);
  --intencje-muted: var(--d-muted);
}
html[data-theme="dark"] .mod-intencje__tabs { background: transparent; }
html[data-theme="dark"] .mod-intencje__tabs.is-stuck { background: var(--d-surface); box-shadow: 0 1px 0 var(--d-line); }
html[data-theme="dark"] .mod-intencje__tab { background: var(--d-surface); border-color: var(--d-accent); color: var(--d-ink); }
html[data-theme="dark"] .mod-intencje__tab.active,
html[data-theme="dark"] .mod-intencje__tab.active:hover { background: var(--d-accent-fill); border-color: var(--d-accent-fill); color: #fff; }
html[data-theme="dark"] .mod-intencje .day-header { color: var(--d-accent); }

/* --- com_cmentarz: pogrzeby --- */
html[data-theme="dark"] .com-pogrzeby { --pogrzeby-accent: var(--d-accent); }
html[data-theme="dark"] .com-pogrzeby .pogrzeby-archiwum summary,
html[data-theme="dark"] .com-pogrzeby .pogrzeby-archiwum-tresc,
html[data-theme="dark"] .com-pogrzeby .pogrzeby-karta { background: var(--d-surface); border-color: var(--d-line); color: var(--d-ink); }
html[data-theme="dark"] .com-pogrzeby .pogrzeby-archiwum summary:hover { background: var(--d-surface-2); }
html[data-theme="dark"] .com-pogrzeby .pogrzeby-karta { box-shadow: 0 2px 8px rgba(0, 0, 0, .45); }
/* Klepsydra to czarna grafika na NIEprzezroczystym białym tle: odwracamy ją (biały krzyż na czarnym)
   i mieszamy trybem screen, więc czarne tło znika w tle karty. */
html[data-theme="dark"] img[src*="klepsydra"] { filter: invert(1) brightness(.9); mix-blend-mode: screen; }

/* --- com_cmentarz: wyszukiwarka i karta grobu --- */
html[data-theme="dark"] .com-groby {
  --cm-ink: var(--d-ink);
  --cm-stone: var(--d-muted);
  --cm-line: var(--d-line);
  --cm-plate: var(--d-surface-2);
  --cm-accent: var(--d-accent);
  --cm-wygasla-kolor: var(--d-red) !important;
}
html[data-theme="dark"] .com-groby .cmentarz-szukaj input[type='text'] { background: var(--d-surface-2); border-color: var(--d-line); color: var(--d-ink); }
html[data-theme="dark"] .com-groby .cmentarz-szukaj input[type='text']::placeholder { color: var(--d-muted); }
html[data-theme="dark"] .com-groby .cmentarz-szukaj button { background: var(--d-ink); color: var(--d-bg); }
html[data-theme="dark"] .com-groby .cmentarz-szukaj button:hover { background: #fff; }
html[data-theme="dark"] .com-groby .cmentarz-karta,
html[data-theme="dark"] .com-groby .cmentarz-detal,
html[data-theme="dark"] .com-groby .cmentarz-znicz-przycisk { background: var(--d-surface); border-color: var(--d-line); }
html[data-theme="dark"] .com-groby .cmentarz-karta:hover,
html[data-theme="dark"] .com-groby .cmentarz-znicz-przycisk:hover { border-color: var(--d-muted); }
html[data-theme="dark"] .com-groby .cmentarz-tabliczka { box-shadow: inset 0 0 0 3px var(--d-surface), inset 0 0 0 4px rgba(255, 255, 255, .08); }
html[data-theme="dark"] .com-groby .cmentarz-grunt { background: linear-gradient(#1b1917, #181614); }
html[data-theme="dark"] .com-groby .cmentarz-grunt .cmentarz-karta { box-shadow: none; }

/* --- com_transmisje --- */
html[data-theme="dark"] .transmisje-live { background: #c62828; }

/* --- galeria (plg_content_galeria): akcent przychodzi inline z opcji wtyczki --- */
html[data-theme="dark"] .galeria { --galeria-accent: var(--d-accent) !important; }
html[data-theme="dark"] .galeria__tile { background: var(--d-surface-2); }
html[data-theme="dark"] .galeria__more-btn:hover,
html[data-theme="dark"] .galeria__more-btn:focus-visible { color: var(--d-bg); }

/* --- przełącznik motywu (górny pasek; przycisk dokłada motyw.js) --- */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid currentColor; border-radius: 50%; background: transparent; color: #6e6f74; font-size: 14px; line-height: 1; cursor: pointer; }
.theme-toggle:hover, .theme-toggle:focus-visible { color: #cd3a0d; }
.theme-toggle .fa-sun { display: none; }
html[data-theme="dark"] .theme-toggle { color: var(--d-muted); }
html[data-theme="dark"] .theme-toggle:hover, html[data-theme="dark"] .theme-toggle:focus-visible { color: var(--d-accent); }
html[data-theme="dark"] .theme-toggle .fa-moon { display: none; }
html[data-theme="dark"] .theme-toggle .fa-sun { display: inline; }