/* Tryb ciemny stron do czytania (includes/ciemny.php, assets/ciemny.js). Działa tylko pod html.bwr-ciemny, który
   ustawia czytelnik przełącznikiem w nagłówku. Domyślnie strona jest jasna.

   Zasada: w komponentach --bwr-black służy jako kolor tekstu i jako tło czarnych elementów. W trybie ciemnym
   przestawiamy zmienne na jasny tekst i ciemne tła, a elementom na żółtym albo czarnym tle (belki, przyciski,
   znaczniki) przywracamy --bwr-black: #111111, żeby zostały takie jak za dnia.

   Kolory: strona #161614, karty #23231f, pudełka na tle strony #1e1e1b, tekst #d3d1c8, nagłówki #f1efe7. */

/* zmienne komponentów */
html.bwr-ciemny :is(.bwr-ep, .bwr-tip, .bwr-epage, .bwr-plan, .bwr-roz, .bwr-sch, .bwr-blog, .bwr-list, .bwr-losuj, .bwr-search, .bwr-playlist) {
	--bwr-black: #f1efe7;
	--bwr-text: #d3d1c8;
	--bwr-muted: #a09e95;
	--bwr-line: #37362f;
	--bwr-bg: #23231f;
	--bwr-yellow-soft: #3d3411;
	color-scheme: dark;
}

/* elementy na żółtym albo czarnym tle zostają jak za dnia */
html.bwr-ciemny :is(
	.bwr-epage__hero, .bwr-plan__hero, .bwr-roz__hero, .bwr-blog__hero, .bwr-list__hero, .bwr-losuj__hero, .bwr-search__hero,
	.bwr-losuj__label, .bwr-losuj__chip.is-active, .bwr-search__topics span, .bwr-search__where--temat, .bwr-search__more,
	.bwr-art__keys, .bwr-ep__section--questions, .bwr-plan__install,
	.bwr-ep__reading, .bwr-epage__day, .bwr-plan__today, .bwr-roz__ep, .bwr-sch__kicker, .bwr-sch__c0, .bwr-sch__c1,
	.bwr-art__ep-play, .bwr-tr__toggle, .bwr-sch__outer,
	.bwr-sch__table thead th, .bwr-roz__grid a.is-current, .bwr-blog__chips a.is-current, .bwr-plan__fab
),
html.bwr-ciemny .bwr-ep .bwr-ep__ideas li::before,
html.bwr-ciemny .bwr-plan .bwr-plan__cover::after {
	--bwr-black: #111111;
}

/* tło strony tylko tam, gdzie jest nasza treść do czytania */
html.bwr-ciemny body:has(.bwr-epage, .bwr-plan, .bwr-roz, .bwr-blog, .bwr-list, .bwr-losuj, .bwr-search) {
	background: #161614;
}

html.bwr-ciemny .bwr-epage {
	background: #161614;
}

/* stopka z Elementora: za dnia biała z czarnym tekstem, nocą czarna jak nagłówek (logo to czarny kwadrat z białymi
   literami, więc dalej je widać) */
html.bwr-ciemny body:has(.bwr-epage, .bwr-plan, .bwr-roz, .bwr-blog, .bwr-list, .bwr-losuj, .bwr-search) .elementor-location-footer {
	background: #111111;
}

html.bwr-ciemny body:has(.bwr-epage, .bwr-plan, .bwr-roz, .bwr-blog, .bwr-list, .bwr-losuj, .bwr-search) .elementor-location-footer :is(.elementor-heading-title, p, a, span) {
	color: #e8e6df;
}

/* linki do mediów społecznościowych mają kolor wpisany w atrybut style */
html.bwr-ciemny body:has(.bwr-epage, .bwr-plan, .bwr-roz, .bwr-blog, .bwr-list, .bwr-losuj, .bwr-search) .elementor-location-footer [style*="color"] {
	color: #e8e6df !important;
}

html.bwr-ciemny body:has(.bwr-epage, .bwr-plan, .bwr-roz, .bwr-blog, .bwr-list, .bwr-losuj, .bwr-search) .elementor-location-footer a:hover {
	color: #f8cf00 !important;
}

/* litery logo w stopce są wycięte w czarnym kwadracie, więc podkładamy pod nie białe tło */
html.bwr-ciemny body:has(.bwr-epage, .bwr-plan, .bwr-roz, .bwr-blog, .bwr-list, .bwr-losuj, .bwr-search) .elementor-location-footer img[src*="logo-s"] {
	background: linear-gradient(#ffffff, #ffffff) 50% 8% / 84% 72% no-repeat;
}

html.bwr-ciemny :is(.bwr-plan, .bwr-roz, .bwr-blog, .bwr-list, .bwr-losuj, .bwr-search) {
	background: #161614;
}

/* ---------- artykuł i odcinek ---------- */

html.bwr-ciemny .bwr-art .bwr-art__keys {
	border: 1px solid #2f2f2a;
}

html.bwr-ciemny .bwr-epage .bwr-hl {
	background: #5a4a12;
	color: #f1efe7;
}

html.bwr-ciemny .bwr-epage .bwr-tr__body::after {
	background: linear-gradient(rgba(35, 35, 31, 0), #23231f);
}

html.bwr-ciemny .bwr-ep .bwr-ref {
	background: transparent;
}

html.bwr-ciemny .bwr-ep :is(button.bwr-ref:hover, button.bwr-ref:focus, button.bwr-ref[aria-expanded="true"]),
html.bwr-ciemny .bwr-tip :is(.bwr-tip__close:hover, .bwr-tip__close:focus),
html.bwr-ciemny .bwr-epage :is(.bwr-tr__toggle:hover, .bwr-tr__toggle:focus) {
	--bwr-black: #111111;
	border-color: #f8cf00;
	background: #f8cf00;
}

html.bwr-ciemny .bwr-tip {
	background: #23231f;
	border-color: #55544c;
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
}

html.bwr-ciemny .bwr-tip .bwr-tip__close {
	background: #34332d;
}

html.bwr-ciemny .bwr-art .bwr-art__content a.bwr-art__ep-play {
	box-shadow: 0 0 0 1px #3a3a34;
}

/* ---------- plan czytania ---------- */

html.bwr-ciemny .bwr-plan :is(.bwr-plan__progress, .bwr-plan__months a, .bwr-plan__day, .bwr-plan__settings, .bwr-plan__start-info) {
	background: #1e1e1b;
}

html.bwr-ciemny .bwr-plan .bwr-plan__day.is-today {
	background: var(--bwr-yellow-soft);
}

html.bwr-ciemny .bwr-plan .bwr-plan__day.is-flash {
	background: #5a4a12;
}

html.bwr-ciemny .bwr-plan .bwr-plan__months a:hover {
	--bwr-black: #111111;
	background: #f8cf00;
}

html.bwr-ciemny .bwr-plan .bwr-plan__btn,
html.bwr-ciemny .bwr-plan .bwr-plan__btn--primary.is-done,
html.bwr-ciemny .bwr-plan .bwr-plan__top,
html.bwr-ciemny .bwr-plan .bwr-plan__check span,
html.bwr-ciemny .bwr-plan .bwr-plan__setting input[type="date"] {
	background: #1e1e1b;
}

html.bwr-ciemny .bwr-plan .bwr-plan__btn--primary {
	background: #f1efe7;
	color: #111111;
}

html.bwr-ciemny .bwr-plan .bwr-plan__btn--primary.is-done {
	color: #f1efe7;
}

html.bwr-ciemny .bwr-plan :is(.bwr-plan__btn:hover, .bwr-plan__btn:focus, .bwr-plan__top:hover, .bwr-plan__top:focus, .bwr-plan__fab:hover, .bwr-plan__fab:focus) {
	--bwr-black: #111111;
	border-color: #f8cf00;
	background: #f8cf00;
	color: #111111;
}

/* przyciski w żółtej ramce „Na dziś” zostają jak za dnia */
html.bwr-ciemny .bwr-plan .bwr-plan__today .bwr-plan__btn {
	background: #ffffff;
}

html.bwr-ciemny .bwr-plan .bwr-plan__today .bwr-plan__btn--primary {
	background: #111111;
	color: #ffffff;
}

html.bwr-ciemny .bwr-plan .bwr-plan__today .bwr-plan__btn--primary.is-done {
	background: #ffffff;
	color: #111111;
}

html.bwr-ciemny .bwr-plan .bwr-plan__install .bwr-plan__btn--primary {
	border-color: #f8cf00;
	background: #f8cf00;
	color: #111111;
}

html.bwr-ciemny .bwr-plan .bwr-plan__check input:checked + span::after {
	border-color: #111111;
}

html.bwr-ciemny .bwr-plan .bwr-plan__fab {
	border-color: #4a4a43;
}

html.bwr-ciemny .bwr-plan .bwr-plan__link--danger {
	color: #ff9a8f;
}

/* ---------- rozdziały i strony ksiąg ---------- */

html.bwr-ciemny .bwr-roz :is(.bwr-roz__box, .bwr-roz__btn, .bwr-roz__grid a) {
	background: #1e1e1b;
}

html.bwr-ciemny .bwr-roz .bwr-roz__grid a.is-current {
	border-color: #f8cf00;
	background: #111111;
}

html.bwr-ciemny .bwr-roz .bwr-roz__text p {
	color: #e4e2da;
}

html.bwr-ciemny .bwr-roz :is(.bwr-roz__btn:hover, .bwr-roz__btn:focus) {
	border-color: #f8cf00;
	background: #f8cf00;
	color: #111111;
}

html.bwr-ciemny .bwr-roz :is(.bwr-roz__ep:hover, .bwr-roz__ep:focus) {
	background: #f1efe7;
}

/* ---------- blog i lista odcinków ---------- */

html.bwr-ciemny .bwr-blog :is(.bwr-blog__filters, .bwr-blog__chips a, a.bwr-blog__card, a.bwr-blog__episode),
html.bwr-ciemny .bwr-list :is(.bwr-list__filters, .bwr-list__card) {
	background: #1e1e1b;
}

html.bwr-ciemny .bwr-blog .bwr-blog__search input,
html.bwr-ciemny .bwr-list :is(.bwr-list__field input, .bwr-list__field select) {
	background-color: #161614;
}

html.bwr-ciemny .bwr-blog :is(.bwr-blog__chips a:hover, a.bwr-blog__card:hover, a.bwr-blog__episode:hover),
html.bwr-ciemny .bwr-list .bwr-list__card:hover {
	background: var(--bwr-yellow-soft);
}

html.bwr-ciemny .bwr-blog .bwr-blog__chips a.is-current {
	border-color: #f8cf00;
	background: #111111;
}

html.bwr-ciemny .bwr-blog .bwr-blog__image {
	background: #2a2a26;
}

html.bwr-ciemny .bwr-blog .bwr-blog__podcast h2 span {
	color: #111111;
}

html.bwr-ciemny .bwr-blog a.bwr-blog__podcast-all {
	background: #f1efe7;
	color: #111111;
}

/* ---------- losowanie cytatu ---------- */

html.bwr-ciemny .bwr-losuj :is(.bwr-losuj__card, .bwr-losuj__btn, .bwr-losuj__chip, .bwr-losuj__chip:hover, .bwr-losuj__chip:focus, .bwr-losuj__info) {
	background: #1e1e1b;
}

html.bwr-ciemny .bwr-losuj .bwr-losuj__chip.is-active {
	border-color: #f8cf00;
	background: #111111;
}

html.bwr-ciemny .bwr-losuj :is(.bwr-losuj__btn:hover, .bwr-losuj__btn:focus, .bwr-losuj__btn--primary:hover, .bwr-losuj__btn--primary:focus) {
	border-color: #f8cf00;
	background: #f8cf00;
	color: #111111;
}

html.bwr-ciemny .bwr-losuj .bwr-losuj__btn--primary {
	border-color: #f8cf00;
	background: #111111;
	color: #f8cf00;
}

/* ---------- wyszukiwarka ---------- */

html.bwr-ciemny .bwr-search :is(.bwr-search__box, .bwr-search__chips a, .bwr-search__chips button, .bwr-search__jump a, a.bwr-search__card, .bwr-search__none, .bwr-search__deeper) {
	background: #1e1e1b;
}

html.bwr-ciemny .bwr-search .bwr-search__form input {
	background: #1e1e1b;
	color: #f1efe7;
}

html.bwr-ciemny .bwr-search :is(.bwr-search__chips a:hover, .bwr-search__chips button:hover, .bwr-search__jump a:hover) {
	--bwr-black: #111111;
	border-color: #f8cf00;
	background: #f8cf00;
	color: #111111;
}

html.bwr-ciemny .bwr-search a.bwr-search__card:hover {
	background: var(--bwr-yellow-soft);
}

html.bwr-ciemny .bwr-search .bwr-search__section h2 span {
	color: #111111;
}

html.bwr-ciemny .bwr-search .bwr-search__more {
	border-color: #f1efe7;
	background: #f1efe7;
	color: #111111;
}

/* ---------- schematy (wykresy w artykułach) ---------- */

html.bwr-ciemny :is(.bwr-sch__ref, .bwr-sch__tag, .bwr-sch__line, .bwr-sch__step, .bwr-sch__table th, .bwr-sch__table td, .bwr-sch__group, .bwr-sch__route),
html.bwr-ciemny .bwr-sch__os-item.bwr-sch--hipoteza::before {
	background: #2d2d28;
}

html.bwr-ciemny .bwr-sch__table thead th {
	background: #111111;
	color: #ffffff;
}

html.bwr-ciemny .bwr-sch__table tbody th {
	background: var(--bwr-yellow-soft);
}

@media (max-width: 640px) {
	html.bwr-ciemny .bwr-sch__table tr {
		background: #2d2d28;
	}
}

html.bwr-ciemny .bwr-sch__stops li {
	background: #161614;
}

html.bwr-ciemny .bwr-sch__c2 {
	background: #5f5e58;
}

html.bwr-ciemny .bwr-sch__c3 {
	border-color: #6b5a1a;
}

html.bwr-ciemny .bwr-sch__outer {
	border: 1px solid #3a3a34;
}

html.bwr-ciemny .bwr-sch__outer > p .bwr-sch__ref {
	border-color: #f8cf00;
	background: #f8cf00;
	color: #111111;
}

html.bwr-ciemny .bwr-sch__inner {
	--bwr-black: #f1efe7;
	--bwr-text: #d3d1c8;
	--bwr-muted: #a09e95;
	background: #2d2d28;
}

/* ---------- lista odtwarzania (wysuwana z odtwarzacza) ---------- */

html.bwr-ciemny .bwr-playlist {
	background: #1e1e1b;
	box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.7);
}

html.bwr-ciemny .bwr-playlist :is(.bwr-playlist__note, .bwr-playlist__day, .bwr-playlist__reading, .bwr-playlist__timer-left) {
	color: #a09e95;
}

html.bwr-ciemny .bwr-playlist .bwr-playlist__items button:hover {
	background: #2a2a26;
}

html.bwr-ciemny .bwr-playlist .bwr-playlist__items li.is-current button {
	background: #3d3411;
}

html.bwr-ciemny .bwr-playlist :is(.bwr-playlist__timer button, .bwr-playlist__timer button:hover, .bwr-playlist__timer button:focus) {
	border-color: #f1efe7;
	background: #1e1e1b;
	color: #f1efe7;
}

html.bwr-ciemny .bwr-playlist .bwr-playlist__timer button.is-active {
	background: #f8cf00;
	border-color: #f8cf00;
	color: #111111;
}

/* ---------- przełącznik w nagłówku (widoczny w obu trybach) ---------- */

.bwr-motyw-rzad {
	flex-wrap: nowrap !important;
	align-items: center;
}

.bwr-motyw {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	margin-right: 12px;
}

.bwr-motyw button.bwr-motyw__btn,
.bwr-motyw button.bwr-motyw__btn:hover,
.bwr-motyw button.bwr-motyw__btn:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	background: transparent;
	color: #ffffff;
	box-shadow: none;
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s;
}

.bwr-motyw button.bwr-motyw__btn:hover,
.bwr-motyw button.bwr-motyw__btn:focus-visible {
	border-color: #f8cf00;
	color: #f8cf00;
	outline: none;
}

.bwr-motyw svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bwr-motyw .bwr-motyw__slonce,
html.bwr-ciemny .bwr-motyw .bwr-motyw__ksiezyc {
	display: none;
}

html.bwr-ciemny .bwr-motyw .bwr-motyw__slonce {
	display: block;
}

@media (max-width: 767px) {
	.bwr-motyw {
		margin-right: 8px;
	}

	.bwr-motyw button.bwr-motyw__btn,
	.bwr-motyw button.bwr-motyw__btn:hover,
	.bwr-motyw button.bwr-motyw__btn:focus {
		width: 38px;
		height: 38px;
	}

	.bwr-motyw svg {
		width: 19px;
		height: 19px;
	}
}

@media (max-width: 380px) {
	.bwr-motyw {
		margin-right: 6px;
	}

	/* na najwęższych telefonach przycisk „Słuchaj” oddaje trochę miejsca, żeby nie dotykać logo */
	.bwr-motyw-rzad a.elementor-button {
		padding-left: 14px !important;
		padding-right: 14px !important;
	}

	.bwr-motyw button.bwr-motyw__btn,
	.bwr-motyw button.bwr-motyw__btn:hover,
	.bwr-motyw button.bwr-motyw__btn:focus {
		width: 34px;
		height: 34px;
	}

	.bwr-motyw svg {
		width: 17px;
		height: 17px;
	}
}