/*
	Theme Name:		MiWiki 2023
	Theme Part:		j4b-darkmode.css
	Description:	CSS-Formatierungen für Darkmode & Theme-Switch
	Author:			Stefan Kuhn
	Author URI:		https://just4business.de/
	Template:		Generatepress Child-Theme MiWiki 2023
	Version:		0.1
*/



/*****************************************************************************
 *	Theme-Farben für den Dark-Mode
 ****************************************************************************/

:root[data-theme="dark"] {
		color-scheme: dark;
		--wp-j4b-theme-color-darker-1:						rgba(255,255,255,0.05);
		--wp-j4b-theme-color-darker-2:						rgba(255,255,255,0.07);
		--wp-j4b-theme-color-darker-3:						rgba(255,255,255,0.08);
		--wp-j4b-theme-color-darker-4:						rgba(255,255,255,0.09);
		--wp-j4b-theme-color-darker-5:						rgba(255,255,255,0.11);
		--wp-j4b-theme-color-darker-6:						rgba(255,255,255,0.12);
		--wp-j4b-theme-color-darker-7:						rgba(255,255,255,0.14);
		--wp-j4b-theme-color-darker-8:						rgba(255,255,255,0.15);
		--wp-j4b-theme-color-darker-9:						rgba(255,255,255,0.16);

		--wp-j4b-theme-color-lighter-1:						rgba(0,0,0,0.05);
		--wp-j4b-theme-color-lighter-2:						rgba(0,0,0,0.07);
		--wp-j4b-theme-color-lighter-3:						rgba(0,0,0,0.08);
		--wp-j4b-theme-color-lighter-4:						rgba(0,0,0,0.09);
		--wp-j4b-theme-color-lighter-5:						rgba(0,0,0,0.11);
		--wp-j4b-theme-color-lighter-6:						rgba(0,0,0,0.12);
		--wp-j4b-theme-color-lighter-7:						rgba(0,0,0,0.14);
		--wp-j4b-theme-color-lighter-8:						rgba(0,0,0,0.15);
		--wp-j4b-theme-color-lighter-9:						rgba(0,0,0,0.16);

		--wp-j4b-theme-color-background:					rgb(0,0,0);
		--wp-j4b-theme-color-on-background:					rgba(255,255,255,.87);
		--wp-j4b-theme-color-on-background-medium:			rgba(255,255,255,.60);
		--wp-j4b-theme-color-on-background-disabled:		rgba(255,255,255,.38);
		--wp-j4b-theme-color-surface:						rgb(250,250,246);
		--wp-j4b-theme-color-on-surface:					var(--wp-j4b-theme-color-on-background);
		--wp-j4b-theme-color-on-surface-medium:				var(--wp-j4b-theme-color-on-background-medium);
		--wp-j4b-theme-color-on-surface-disabled:			var(--wp-j4b-theme-color-on-background-disabled);

		--wp-j4b-theme-color-accent:						rgb(255, 74, 135);				/* #FF4A87 Jannot-Pink 80% Saturation und aufgehellt */
		--wp-j4b-theme-color-on-accent:						rgb(255,255,255);
		--wp-j4b-theme-color-accent-hover:					var(--wp-j4b-theme-color-on-background-medium);
		--wp-j4b-theme-color-on-accent-hover:				rgb(255,255,255);

		--wp-j4b-theme-color-menu:							var(--wp-j4b-theme-color-darker-4);
		--wp-j4b-theme-color-on-menu:						var(--wp-j4b-theme-color-on-background);

		--wp-j4b-theme-color-menu-hover:					var(--wp-j4b-theme-color-darker-9);
		--wp-j4b-theme-color-on-menu-hover:					var(--wp-j4b-theme-color-accent);

		--wp-j4b-theme-color-submenu:						var(--wp-j4b-theme-color-lighter-1);
		--wp-j4b-theme-color-on-submenu:					var(--wp-j4b-theme-color-on-background);
		--wp-j4b-theme-color-subsubmenu:					var(--wp-j4b-theme-color-lighter-1);
		--wp-j4b-theme-color-on-subsubmenu:					var(--wp-j4b-theme-color-on-background);
		--wp-j4b-theme-color-site-background:				var(--wp-j4b-theme-color-brand-1);
		--wp-j4b-theme-color-footer:						rgb(40,44,40);
		--wp-j4b-theme-color-on-footer:						rgba(255,255,255,0.60);
		--wp-j4b-theme-color-on-footer-hover:				var(--wp-j4b-theme-color-accent-hover);
		--wp-j4b-theme-color-searchbar:						rgba(224, 224, 224, 1);
		--wp-j4b-theme-color-on-searchbar:					rgba(33, 33, 33, 1);
}



/*****************************************************************************
 *	Theme-Anpassungen für den Dark-Mode
 ****************************************************************************/



/* Site-Logo umfärben  */
[data-theme="dark"] .main-navigation .site-logo a:any-link .j4b-logo-vierer,
[data-theme="dark"] .main-navigation .site-logo a:any-link .j4b-logo-schrift {
	fill: rgb(156, 153, 153); /* #9c9999 */
}
[data-theme="dark"] .main-navigation .site-logo a:any-link .j4b-logo-kringel {
	fill: rgb(89, 87, 87); /* #595757 */
}
@media (hover: hover) and (pointer: fine) {
	[data-theme="dark"] .main-navigation .site-logo a:hover .j4b-logo-schrift {
		fill: var(--wp-j4b-theme-color-accent);
	}
}



/* Bilder mit mehr Kontrast und weniger Sättigung */
[data-theme="dark"] .site-content img,
[data-theme="dark"] .site-content svg {
	filter: brightness(.85) contrast(1.15);
	transition: filter .1s ease-in-out;
}
@media (hover: hover) and (pointer: fine) {
	/* Verlinkte Bilder bei Hover mit normalem  Kontrast & Sättigung */
	[data-theme="dark"] .site-content a:hover img,
	[data-theme="dark"] .site-content a:hover svg,
	[data-theme="dark"] .wp-block-image:hover img,
	[data-theme="dark"] img:hover {
		filter: brightness(1) contrast(1);
	}
}

/* Pressezentrum: Cover-Schatten */
[data-theme="dark"] .wp-block-image.j4b_box_shadow_3d figure::after,
[data-theme="dark"] .wp-block-image.j4b_box_shadow_3d figure::before {
	content: unset;
}

/* Home & Archivseiten: Neuester Beitrag */
@media (min-width: 782px) {
	[data-theme="dark"] .home .j4b-main-teaser .entry-header,
	[data-theme="dark"] .home .j4b-main-teaser .entry-content,
	[data-theme="dark"] .archive:not(.paged) article:first-of-type .entry-header,
	[data-theme="dark"] .archive:not(.paged) article:first-of-type .entry-content {
		background-image: linear-gradient(var(--wp-j4b-theme-color-darker-1),var(--wp-j4b-theme-color-darker-1));
	}
	[data-theme="dark"] .home .j4b-main-teaser .entry-header,
	[data-theme="dark"] .archive:not(.paged) article:first-of-type .entry-header {
		box-shadow: inset 0 4px 4px -4px var(--wp-j4b-theme-color-darker-9), inset -4px 0 4px -4px var(--wp-j4b-theme-color-darker-9), inset 4px 0 4px -4px var(--wp-j4b-theme-color-darker-9);
	}
	[data-theme="dark"] .home .j4b-main-teaser .entry-content,
	[data-theme="dark"] .archive:not(.paged) article:first-of-type .entry-content {
		box-shadow: inset 0 -4px 4px -4px var(--wp-j4b-theme-color-darker-9), inset -4px 0 4px -4px var(--wp-j4b-theme-color-darker-9), inset 4px 0 4px -4px var(--wp-j4b-theme-color-darker-9);
	}
}

/* Textkästen */
[data-theme="dark"] .page.wissen .toc,
[data-theme="dark"] .page.wissen .kasten {
	box-shadow: unset;
	background-color: var(--wp-j4b-theme-color-darker-1);
}
[data-theme="dark"] .wp-block-group.textkasten {
	background-color: var(--wp-j4b-theme-color-darker-1);
}

/* Trennlinie */
[data-theme="dark"] .entry-content hr {
	background-color: var(--wp-j4b-theme-color-darker-9);
}

/* Rahmen um Aufmacherbilder */
[data-theme="dark"] .post-image img,
[data-theme="dark"] .featured-image img {
	border: 1px solid var(--wp-j4b-theme-color-darker-3);
}

/* Lightbox-Hintergrund */
[data-theme="dark"] .wp-lightbox-overlay .scrim {
	background-color: var(--wp-j4b-theme-color-background) !important;
}


/* heise meets Podcast-Player */
[data-theme="dark"] .j4b-progress-slider > input:disabled::-moz-range-thumb {
	background-color: rgb(255, 255, 255);
	box-shadow: 0 0 0 1px rgb(0, 0, 0) !important;
}
[data-theme="dark"] .j4b-progress-slider > input:disabled::-webkit-slider-thumb {
	background-color: rgb(255, 255, 255);
	box-shadow: 0 0 0 1px rgb(0, 0, 0) !important;
}
[data-theme="dark"] .j4b-progress-slider > input:disabled::-moz-range-track {
	background-color: rgba(255, 255, 255, 0.38);
}
[data-theme="dark"] .j4b-progress-slider > input:disabled::-webkit-slider-runnable-track {
	background-color: rgba(255, 255, 255, 0.38);
}
[data-theme="dark"] .j4b-progress-slider > input:disabled::-moz-range-progress {
	background-color: rgba(255, 255, 255, 0.87);
}
[data-theme="dark"] .j4b-progress-slider > input:disabled::before {
	background-color: rgba(255, 255, 255, 0.87);
}
[data-theme="dark"] .j4b-podigee-abo-icon::before {
	background-color: #009ee3 !important;
	filter: grayscale(1);
}
[data-theme="dark"] .j4b-podigee-abo-icon:is(:hover, :focus)::before {
	filter: grayscale(0);
}
[data-theme="dark"] button.j4b-podigee-play-button {
	box-shadow: 0 3px 1px -2px rgba(255, 255, 255, 0.2), 0 2px 2px 0 rgba(255, 255, 255, 0.14), 0 1px 5px 0 rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] button.j4b-podigee-play-button:hover, button.j4b-podigee-play-button:focus {
	box-shadow: 0 2px 4px -1px rgba(255, 255, 255, 0.2), 0 4px 5px 0 rgba(255, 255, 255, 0.14), 0 1px 10px 0 rgba(255, 255, 255, 0.12);
}

/* Social Icons Hover-Effekt */
@media (hover: hover) and (pointer: fine) {
	[data-theme="dark"] .site-info .wp-block-social-links.is-style-logos-only .wp-social-link a:hover {
		box-shadow: 1px 1px 4px 0px var(--wp-j4b-theme-color-brand-1), 2px 2px 8px 0px var(--wp-j4b-theme-color-brand-1);
	}
}


/*****************************************************************************
 *	Theme-Toggle (Light-/Dark-Mode) - Gestaltung im Stil des Menu-Toggle
 ****************************************************************************/

.main-navigation .menu-bar-item.theme-toggle {
	background:none;
	border:none;
	padding:0;
	border-radius:50%;
	cursor:pointer;
	-webkit-tap-highlight-color:transparent;
	outline-offset:5px;
}

@media (max-width: 320px) {
	.main-navigation .menu-bar-item.theme-toggle {
		display:none;
	}
}

.menu-bar-item.theme-toggle #theme-toggle {
	display: flex;
	height: 56px;
	padding: 4px 0;
	margin: 0;
	color: var(--wp-j4b-theme-color-on-menu);
	background-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
	.menu-bar-item.theme-toggle #theme-toggle:hover {
		color: var(--wp-j4b-theme-color-accent);
	}
}

@media (min-width: 600px) and (max-width: 1024px){
	.menu-bar-item.theme-toggle #theme-toggle::before {
		content: "Design";
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 1.5px;
		text-transform: uppercase;
		line-height: 48px;
		display: block;
		padding-left: 12px;
		padding-right: 2px;
	}
}
@media (min-width: 1025px) {
	.main-navigation .menu-bar-item.theme-toggle #theme-toggle {
		height: 64px;
		margin: 0;
		padding: 8px;
	}
	.menu-bar-item.theme-toggle #theme-toggle::after {
		display: none;
	}
}



/*****************************************************************************
 *	Open-Props Animationskurven - https://open-props.style/
 *
 *	@import"https://unpkg.com/open-props/easings.min.css";
 ****************************************************************************/

:where(html) {
	--ease-1:cubic-bezier(.25,0,.5,1);
	--ease-2:cubic-bezier(.25,0,.4,1);
	--ease-3:cubic-bezier(.25,0,.3,1);
	--ease-4:cubic-bezier(.25,0,.2,1);
	--ease-5:cubic-bezier(.25,0,.1,1);
	--ease-in-1:cubic-bezier(.25,0,1,1);
	--ease-in-2:cubic-bezier(.50,0,1,1);
	--ease-in-3:cubic-bezier(.70,0,1,1);
	--ease-in-4:cubic-bezier(.90,0,1,1);
	--ease-in-5:cubic-bezier(1,0,1,1);
	--ease-out-1:cubic-bezier(0,0,.75,1);
	--ease-out-2:cubic-bezier(0,0,.50,1);
	--ease-out-3:cubic-bezier(0,0,.3,1);
	--ease-out-4:cubic-bezier(0,0,.1,1);
	--ease-out-5:cubic-bezier(0,0,0,1);
	--ease-in-out-1:cubic-bezier(.1,0,.9,1);
	--ease-in-out-2:cubic-bezier(.3,0,.7,1);
	--ease-in-out-3:cubic-bezier(.5,0,.5,1);
	--ease-in-out-4:cubic-bezier(.7,0,.3,1);
	--ease-in-out-5:cubic-bezier(.9,0,.1,1);
	--ease-elastic-1:cubic-bezier(.5,.75,.75,1.25);
	--ease-elastic-2:cubic-bezier(.5,1,.75,1.25);
	--ease-elastic-3:cubic-bezier(.5,1.25,.75,1.25);
	--ease-elastic-4:cubic-bezier(.5,1.5,.75,1.25);
	--ease-elastic-5:cubic-bezier(.5,1.75,.75,1.25);
	--ease-squish-1:cubic-bezier(.5,-.1,.1,1.5);
	--ease-squish-2:cubic-bezier(.5,-.3,.1,1.5);
	--ease-squish-3:cubic-bezier(.5,-.5,.1,1.5);
	--ease-squish-4:cubic-bezier(.5,-.7,.1,1.5);
	--ease-squish-5:cubic-bezier(.5,-.9,.1,1.5);
	--ease-step-1:steps(2);
	--ease-step-2:steps(3);
	--ease-step-3:steps(4);
	--ease-step-4:steps(7);
	--ease-step-5:steps(10);
}



/*****************************************************************************
 *	Gestaltung und Animation des Theme-Switch Icons
 *
 *	Quelle: https://gui-challenges.web.app/theme-switch/dist/
 ****************************************************************************/

.sun-and-moon {
	fill:currentColor;
}
.sun-and-moon>.sun-beams {
	stroke-width:2px;
	stroke:currentColor;
	stroke-linecap:round;
}
.sun-and-moon>:is(.moon,.sun,.sun-beams) {
	transform-origin:center center;
}
[data-theme=dark] .sun-and-moon>.sun {
	transform:scale(1.75);
}
[data-theme=dark] .sun-and-moon>.sun-beams {
	opacity:0;
}
[data-theme=dark] .sun-and-moon>.moon>circle {
	transform:translate(-7px);
}
@supports (cx: 1) {
	[data-theme=dark] .sun-and-moon>.moon>circle {
		transform:translate(0);
		cx:17;
	}
}
@media (prefers-reduced-motion: no-preference) {
	.sun-and-moon>.sun {
		transition:transform .5s var(--ease-elastic-3);
	}
	.sun-and-moon>.sun-beams {
		transition:transform .5s var(--ease-elastic-4),opacity .5s var(--ease-3);
	}
	.sun-and-moon .moon>circle {
		transition:transform .25s var(--ease-out-5);
	}
	@supports (cx: 1) {
		.sun-and-moon .moon>circle {
			transition:cx .25s var(--ease-out-5);
		}
	}
	[data-theme=dark] .sun-and-moon>.sun {
		transform:scale(1.75);
		transition-timing-function:var(--ease-3);
		transition-duration:.25s;
	}
	[data-theme=dark] .sun-and-moon>.sun-beams {
		transform:rotate(-25deg);
		transition-duration:.15s;
	}
	[data-theme=dark] .sun-and-moon>.moon>circle {
		transition-delay:.25s;
		transition-duration:.5s;
	}
}