/*
 Theme Name:   MiWiki 2023
 Theme URI:    https://generatepress.com
 Description:  MiWiki GeneratePress child theme
 Author:       Stefan Kuhn
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/



/*************************************************************************
 * Archiv-Seiten
 *************************************************************************/
 
 
@media (min-width: 1080px) {
	.one-container.archive .site.container {
		padding-top: 0;
	}
}

/* Maximale Laufweite der Inhalte */
.archive .page-header {
	max-width: 782px;
	margin: 3em auto;
	text-align: center;
}
.archive article {
	max-width: 782px;
	margin: 0 auto;
}
/* H1-Überschrift auf Archivseiten ausblenden */
@media (min-width: 1080px) {
	.archive .content-area .page-header {
		border: 0;
		clip: rect(1px,1px,1px,1px);
		-webkit-clip-path: inset(50%);
		clip-path: inset(50%);
		height: 1px;
		margin: -1px;
			margin-bottom: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute !important;
		width: 1px;
		word-wrap: normal !important;
	}
}
/* Abstand zwischen den einzelnen Posts */
.one-container.archive article:not(:last-child):not(.is-loop-template-item) {
	padding-bottom: 0em;
}
.one-container.archive article:last-of-type:not(.is-loop-template-item) {
	padding-bottom: 0;
}
.one-container.archive article:first-of-type:not(.is-loop-template-item) {
	margin-top: 0;
	margin-bottom: 0;
}


/*
.archive .site-main {
	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
		color: var(--wp-j4b-theme-color-accent);
	}
}
*/

.archive .site-main h2:not(.has-text-align-left):not(.has-text-align-right) {
	text-align: left;
}
@media (max-width: 600px) {
	.archive .site-main h2:not(.has-text-align-left):not(.has-text-align-right) {
		margin-top: .25em;
		margin-bottom: .25em;
	}
}
@media (min-width: 601px) {
	.archive .site-main h2:not(.has-text-align-left):not(.has-text-align-right) {
		margin-top: 0;
		margin-bottom: .5em;
	}
}

.archive article .entry-content,
.archive article .entry-summary {
	margin-bottom: 3em;
}



/* Meta-Daten des Post verbergen */
.archive h2 + .entry-meta {
	display: none;
}
/* Post-Bilder (Breite & Abstand) */
.archive article .post-image {
	margin-top: 0.4em;
	margin-bottom: 0.4em;
}
.archive article .post-image .size-full {
	width: 100%;
}
.archive article .post-image a {
	line-height: 0;
	display: block;
}
/* Post-Excerpt (Abstand) */
.archive article .entry-content,
.archive article .entry-summary {
	margin-top: 0;
}
.archive article .entry-content a,
.archive article .entry-summary a {
	color: inherit;
	display: block;
}
/* Silbentrennung */
.archive article {
	hyphens: auto;
}
@media (min-width: 782px) {
	.archive article .entry-header {
		hyphens: manual;
	}
}

/* Content-Reihenfolge */
.archive article .inside-article {
	display: flex;
	flex-direction: column;
}
.archive article .inside-article .post-image{
	order: 1;
}
.archive article .inside-article .entry-header{
	order: 2;
}
.archive article .inside-article .entry-content,
.archive article .inside-article .entry-summary {
	order: 3;
}
/* Content-Abstände */
.one-container.archive .post,
.one-container.archive .teaser {
	padding: 0 !important;
	margin: 0 auto 3em;
}
@media (min-width: 782px) {
	.one-container.archive .post,
	.one-container.archive .teaser {
		margin-bottom: 4.5em;
	}
}


/* Klick-Bereich vergrößern */
/*
.archive article .inside-article {
	position: relative;
}
.archive article .entry-title a::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 1;
}
*/
@media (hover: hover) and (pointer: fine) {
	.archive article:hover {
		cursor: pointer;
	}
	.archive article:hover .entry-title a {
		/*
		color: inherit;
		color: var(--wp-j4b-theme-color-on-background-medium);
		*/
		color: var(--wp-j4b-theme-color-accent);
	}
	.archive article .post-image {
		width: 100%;
		overflow: hidden;
	}
	.archive article .post-image img {
		transition: transform .1s ease-in-out, filter .1s ease-in-out;
	}
	.archive article:hover .post-image img {
		transform: scale(1.05);
		filter: brightness(1) contrast(1);
	}
}



@media (min-width: 782px) {
	/* Den ersten Post auf der ersten Seite eines Archivs am Dektop prominenter darstellen */
	.archive:not(.paged) article:first-of-type {
		margin-bottom: 3em;
		max-width: unset;
	}
	.archive:not(.paged) article:first-of-type .inside-article {
		align-items: center;
	}
	.archive:not(.paged) article:first-of-type .entry-header,
	.archive:not(.paged) article:first-of-type .entry-content,
	.archive:not(.paged) article:first-of-type .entry-summary {
		width: calc( 100% - 6em);
		max-width: calc(782px + 2em);
		background-color: var(--wp-j4b-theme-color-background);
		background-image: linear-gradient(var(--wp-j4b-theme-color-lighter-1),var(--wp-j4b-theme-color-lighter-1));
	}
	.archive:not(.paged) article:first-of-type .entry-header {
		z-index: 2;
		/*
		margin-top: -6em;
		*/
		padding: 1em 1em 0;
		border-top-left-radius: 1em;
		border-top-right-radius: 1em;
		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);
	}
	.archive:not(.paged) article:first-of-type .entry-content,
	.archive:not(.paged) article:first-of-type .entry-summary {
		z-index: 3;
		padding: 0 1em 1em;
		border-bottom-left-radius: 1em;
		border-bottom-right-radius: 1em;
		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);
	}
	.archive:not(.paged) article:first-of-type .post-image {
		position: relative;
		bottom: -6em;
		margin-top: -6em;
	}

}



@media (min-width: 782px) {
	/* Die normalen Posts eines Archivs am Desktop */
	.archive:not(.paged) article:not(:first-of-type),
	.archive.paged article:not(:first-of-type),
	.archive.paged.one-container .post,
	.archive.one-container .teaser:not(:first-of-type) {
		margin-bottom: 0 !important;
		padding-top: 1.5em !important;
	}
	.archive:not(.paged) article:not(:first-of-type)::after,
	.archive.paged article::after {
		content: "";
		display: block;
		height: 1px;
		background: linear-gradient(90deg,var(--wp-j4b-theme-color-on-background-disabled) 25%,transparent 0) 0 100% / 0.25em 1px repeat-x;
	}
	.archive:not(.paged) article:not(:first-of-type):last-of-type::after,
	.archive.paged article:last-of-type::after {
		height: 0;
		margin-bottom: 1.5em;
	}
	.archive:not(.paged) article:not(:first-of-type) .inside-article,
	.archive.paged article .inside-article {
		display: block;
	}
	.archive:not(.paged) article:not(:first-of-type) .inside-article::after,
	.archive.paged article .inside-article::after {
		content: "";
		display: block;
		clear: both;
	}
	.archive:not(.paged) article:not(:first-of-type) .inside-article .post-image,
	.archive.paged article .inside-article .post-image {
		float: right;
		width: calc(33% - 0.5em);
		margin-bottom: 1.5em;
	}
	.archive:not(.paged) article:not(:first-of-type) .entry-header,
	.archive.paged article .entry-header {
		float: left;
		width: 66%;
	}
	.archive:not(.paged) article:not(:first-of-type) .entry-content,
	.archive.paged article .entry-content,
	.archive:not(.paged) article:not(:first-of-type) .entry-summary,
	.archive.paged article .entry-summary {
		float: left;
		width: 66%;
		margin-bottom: 1.5em;
	}
}



@media (min-width: 782px) {
	/* Posts ohne Bild immer in voller Breite am Desktop */
	.archive article .inside-article:not(:has(.post-image)) .entry-header,
	.archive article .inside-article:not(:has(.post-image)) .entry-content,
	.archive article .inside-article:not(:has(.post-image)) .entry-summary {
		width: 100%;
		margin-top: 0;
	}
}


/* Pseudo Überschrift im Blog-Archiv von jannot.de bei Mobilansicht */
@media not (min-width: 1080px) {
	html[lang="de-DE"] .blog .content-area::before {
		content: "Blog";
		display: block;
		max-width: 782px;
		margin: calc(3em / 1.33333333333) auto;
		font-size: 1.33333333333em;
		font-weight: 900;
		line-height: 1.1;
		text-align: center;
	}
}
@media (min-width: 601px) {
	html[lang="de-DE"] .blog .content-area::before {
		font-size: 2.0em;
		margin: calc(3em / 2) auto;
	}
}

