/* ==========================================================================
   BASIC LAYOUT
   ========================================================================== */

:root {
	--site-container-width: 2000px;
}

body {
	display: grid;
	grid-template-columns: 1fr minmax(auto, var(--site-container-width)) 1fr;		/* Site margins and site container */
	grid-template-rows: auto 1fr;
}

.site-margin {
	background-color: var(--color-site-background);
	z-index: 0;
}

.site-margin-image {
	background-color: var(--color-site-background);
	width: 100%;
	height: 100%;
	background-attachment: fixed;
	background-size: auto 100vh;
	opacity: var(--background-image-opacity);
	filter: grayscale(1);
	background-blend-mode: difference;
}

#site-margin-image-left {
	background-image: var(--background-image-left);
	background-position: left top;
}

#site-margin-image-right {
	background-image: var(--background-image-right);
	background-position: right top;
}

.site-container {
	container-name: site-container;
	container-type: inline-size;
	position: relative;
	margin: 0;
	background-color: var(--color-site-background);
	z-index: 50;
}

.page-has-shadow .site-container {
	box-shadow: var(--shadow-page);
}

@media (max-width: 2000px) {

	body {
		display: block;
	}
	
	.site-margin {
		display: none;	
	}

}
   

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
	
#navbar-area {
	z-index: 100;
	position: sticky;
	top: var(--offset-top);
}
	
:root.scrolled #navbar-area {
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}
	
.site-header, .site-main, .site-footer {
	position: relative;
	z-index: 0;
}


/* ==========================================================================
   AREAS AŃD STRIPES
   ========================================================================== */

.area {
	position: relative;
	width: 100%;
}

.stripe {
	position: absolute;
	width: 100%;
	margin: 0 auto;
}

.stripe-foreground {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	mask-size: var(--site-container-width ) 100%;
	mask-position: center;
	mask-origin: border-box;
	mask-repeat: no-repeat;
	mask-clip: border-box;
}

.stripe.top {
	top: 0;
	z-index: 100;
}

.stripe.bottom {
	bottom: 0;
}

@container site-container {
	
	.stripe {
		height: 3.3cqw; 		/* Resolves to 40px for a container width of 1200px. */
		max-height: 40px;
	}

	.stripe.header-bottom {
		height: 5cqw; 		/* Resolves to 60px for a container width of 1200px. */
		max-height: 60px;
	}

	.stripe.frontpage-widgets-bottom {
		height: 8cqw; 
		max-height: 96px;
	}

	.stripe.frontpage-odd {
		height: 10cqw;
		max-height: 120px; 
	}

	.stripe.frontpage-even {
		height: 10cqw;
		max-height: 120px; 
	}

	.stripe.page-top-content-narrow {
		height: 6cqw;
		max-height: 72px;
	}

	.stripe.page-top-content-wide {
		height: 6cqw;
		max-height: 72px;
	}

	.stripe.frontpage-bottom, .stripe.article-bottom {
		height: 8cqw;
		max-height: 96px;
	}

}


/* ==========================================================================
   WRAPPERS
   ========================================================================== */

.wrapper {
	position: relative;
	margin: auto;
}

.navbar-wrapper, .header-wrapper, .frontpage-widgets-wrapper, .entry-footer-wrapper, .footer-wrapper {
	max-width: var(--content-width-wide);
}

:root.content-narrow :is(.content-wrapper, .content-footer-wrapper, .frontpage-part-wrapper) {
	max-width: var(--content-width-narrow);
}

:root.content-wide :is(.content-wrapper, .content-footer-wrapper, .frontpage-part-wrapper) {
	max-width: var(--content-width-wide);
}


/* ==========================================================================
   PAGE AND POST CONTENT
   ========================================================================== */

.content {
	padding-top: 24px;
	padding-bottom: 100px;
}

.content article.full-post {
	padding-top: var(--spacing-grid);
	padding-bottom: var(--spacing-grid);
}

.content article.full-post .entry-header {
	margin-bottom: var(--spacing-paragraph);
}

.content .page-title {
	margin-top: 0;
}

.content article.full-post .page-title {
	margin: 8px 0 0.15em 0;
}

.content article.full-post .entry-footer {
	padding: var(--spacing-grid) 0;
}

.content article.full-post.type-post .entry-footer {
	margin-top: var(--spacing-grid);
	border-top: 1px solid var(--color-border); 
}

.content-footer-area:not(:empty) {
	padding: 0 var(--spacing-content) 100px var(--spacing-content);
}

/* We cannot query the width of the site-container to extend gallery margins on wide screens 
	because there is a named content-wrapper container between it and the gallery. 
	So we have to take a crude approach and switch margins just once when there is enough space
	for six thumbnails in a row */
@media (min-width: 1400px) {

	.content-narrow :is(.gallery, .page-preview) {
		margin-left: -300px;
		margin-right: -300px;
	}

}


/* ==========================================================================
   FRONTPAGE
   ========================================================================== */

.frontpage-widgets .widget {
	z-index: 10;
}

@container frontpage-widgets-wrapper (min-width: 769px) {

	.frontpage-widgets .widget_sp_image h1 {
		position: relative;
		left: calc( -1 * 7cqw);
	}
	
}

.frontpage-part-content {
	position: relative;
	z-index: 100;
}

section.frontpage-part-area:nth-of-type(odd) .frontpage-part-content {
	padding-top: 0;
	padding-bottom: 70px;
}

section.frontpage-part-area:nth-of-type(even) .frontpage-part-content {
	padding-top: 28px;
	padding-bottom: 80px;
}

section.frontpage-part-area:first-of-type .frontpage-part-content {
	padding-top: 16px;
}

section.frontpage-part-area:last-of-type .frontpage-part-content {
	padding-bottom: 100px;
}

.frontpage-part-content h1 {
	margin-top: 0;
	margin-bottom: 0.5em;
	text-align: center;
}

.frontpage-part-content > :last-child {
	margin-bottom: 0;
}

.frontpage-part-content p.view-all-posts {
	text-align: center;
}


/* ==========================================================================
   CONTENT AREA BACKGROUND PATTERNS
   ========================================================================== */
   
:is([data-post-type=archive], [data-post-type=search]) .content-area {
	background-image: url(../backgrounds/background-archive-top.png), url(../backgrounds/background-archive-bottom-left.png), url(../backgrounds/background-archive-bottom-right.png);
	background-size: 2000px auto, 600px auto, 600px auto; 
	background-position: left top, left bottom, right bottom; 
	background-repeat: repeat, no-repeat, no-repeat;
}

:is([data-post-type=post]) .content-footer-area {
	background-image: url(../backgrounds/background-archive.png);
	background-size: 800px;
	background-position: left top; 
}

.frontpage-part-area-even {
	background-image: url(../backgrounds/background-archive.png);
	background-size: 800px;
	background-position: left top; 
}

/* ==========================================================================
   DECORATION
   ========================================================================== */

@container frontpage-widgets-wrapper (min-width: 769px) {

	.frontpage-widgets::after {
		content: url('../img/hummel.png');
		position: absolute;
		bottom: -2em;
		right: calc(var(--sidebar-width) - 100px);
		z-index: 50;
	}
	
}

@media (min-width: 769px) {

	[data-post-type=frontpage] .footer-wrapper::before {
		content: url('../img/blume_1.png');
		display: block;
		position: absolute;
		top: -440px;  
		right: -150px;
		z-index: 0;
	}

	[data-post-type=frontpage] .footer-wrapper::after {
		content: url('../img/blaumeise.png');
		display: block;
		position: absolute;
		top: -210px;  
		left: -250px;
		z-index: 1000;
	}
	
}

.content-wrapper-decoration {
	z-index: 1000;
}

[data-post-type=frontpage] #decoration-0 {
	background-image: url(../img/schmetterling.png);
	background-size: 110px auto;
}

:is([data-post-type=archive], [data-post-type=search]) #decoration-0  {
	background-image: url(../img/kaefer.png);
	background-size: 50px auto; 
}

:is([data-post-type=archive], [data-post-type=search]) #decoration-1  {
	background-image: url(../img/schmetterling.png);
	background-size: 120px auto;
}

:is([data-post-type=archive], [data-post-type=search]) #decoration-2 {
	background-image: url(../img/kohlmeise.png);
	background-size: 200px auto;
}