/*
Stylesheet for desktop browsers (detected from HTPP header)
This stylessheet uses modern CSS, including container queries
and shows all shapes and decorative elements. 
*/

/* TABLE OF CONTENTS

	* VARIABLES
	* BASIC LAYOUT
	* MAIN NAVIGATION
	* HEADER
	* FRONTPAGE WIDGET AREA
	* FRONTPAGE
	* POSTS AND PAGES
	* PAGE PREVIEWS
	* POST PREVIEWS
	* COMMENT PREVIEWS
	* COMMENTS
	* FOOTER
	* SHORTCODES
	* AREAS AND STRIPES
	* WRAPPERS
	* BACKGROUND IMAGES
	* DECORATIONS

*/


/* ==========================================================================
   VARIABLES
   ========================================================================== */

:root {
	--site-container-width: 2000px;
	--decoration-shadow: 0px 6px 10px rgba(0, 0, 0, 0.2);
}


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

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;	
	}

}
   
.site-header, .site-main, .site-footer {
	position: relative;
	z-index: 0;
}

/* ==========================================================================
   MAIN 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);
}
	
#navbar-wrapper {
	container-name: navbar-wrapper;
	container-type: inline-size;
}

#navbar {
	display: grid;
	align-items: center;
}

@container navbar-wrapper (min-width: 901px) {

	#navbar {
		grid-template-columns: 1fr auto;
	}
	
	.homebutton-wrapper, .menubutton-wrapper {
		display: none;
	}
	
	/* If the whole menu is visible on large screens, the 'home' menu entry is replaced by an icon */
	
	.menu-item-home {
		overflow: hidden;
		width: 3.4em;
		white-space: nowrap;
	}
	
	.menu-item-home a {
		color: transparent !important;
		user-select: none;
	}
	
	.menu-item-home a::before {
		display: inline-block;
		font-family: dashicons;
		content: "\f102";
		color: var(--color-accent-text) !important;
		line-height: 0;
		font-size: 180%;
		position: relative;
		top: 0.2em;
		left: -0.37em;
		margin-right: 0.1em;
	}

}

@container navbar-wrapper (max-width: 900px) {

	#navbar {
		grid-template-columns: 1fr auto 1fr;
	}

	.homebutton-wrapper {
		justify-self: start;
	}
	
	.menubutton-wrapper {
		justify-self: end;
	}
	
	.main-navigation {
   	position: fixed;
   	left: 0.5em;
    	right: 0.5em;
		top: calc( var(--offset-top) + 60px);
   	z-index: 1000;
		transform: scale(0);
 		transform-origin: top right;
		transition: transform var(--animation-time);
		overflow: hidden;
		border: 1px solid var(--color-border-bright);
		box-shadow: var(--shadow-stacking);
		flex-flow: column nowrap;
	}
	
	.main-navigation > .primary-menu > li {
		width: 100%;
		border-bottom: 1px solid var(--color-border-bright);
	}
	
	.main-navigation li {
		padding: 4px;
	}

	.main-navigation li:last-child {
		border-bottom: none; 	
	}

	.main-navigation a {
		text-align: left;
		padding: 0.8em 1.2em;
	}

	.main-navigation .sub-menu  {
		position: static;
		margin-top: 0.5em;
		height: calc-size(auto);
		transition: height 0.5s;
		margin: 0.5em;
	}
	
	.main-navigation .sub-menu .menu-item-has-children > a::after {
		content: "\f140";
		font-family: dashicons;
		display: inline-block;
		line-height: 0;
		text-decoration: none;
		position: relative;
		top: 0.2em;
		left: 0;
	}
		
	:root.show-menu .main-navigation {
 		transform: scale(1);
		transition: transform var(--animation-time);
	}
}

@container navbar-wrapper (max-width: 400px) {

	#navbar {
		grid-template-columns: auto 1fr;
	}

	.homebutton-wrapper {
		display: none;
	}

}


/* ==========================================================================
   HEADER
   ========================================================================== */

@container header-wrapper (max-width: 900px) {
	
	.site-branding {
		display: none;
	}
	
	.site-logo {
		height: 57%;
		right: 8%; 	/* 5% if site-description visible */
	}

}

@container header-wrapper (max-width: 500px) {
	
	.site-header {
		height: auto;
	}

	.site-logo {
		position: static;
		width: 80%;
		height: auto;
		margin: var(--spacing-content) auto 50px; 
	}

	.site-logo img {
		width: 100%;
		height: auto;
	}

}


/* ==========================================================================
   FRONTPAGE WIDGET AREA
   ========================================================================== */

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

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

	.frontpage-widgets {
		grid-template-columns: auto var(--widget-width);
		grid-template-rows: auto;
		align-items: start;
		padding-bottom: 3.3cqw;
	}
	
	.frontpage-widget:nth-child(1) {
		margin-top: -5cqw;
	}

	.frontpage-widgets .widget_sp_image h1 {
		position: relative;
		left: -7cqw;
	}
	
}

@container frontpage-widgets-wrapper (max-width: 768px) {

	.frontpage-widgets {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		align-items: start;
		padding: 32px var(--spacing-grid);
	}

	.frontpage-widget:nth-child(2) {
		grid-row: 1 / span 1;
	}

}

@container frontpage-widgets-wrapper (max-width: 500px) {

	.frontpage-widgets {
		padding: 24px var(--spacing-grid);
	}

	.frontpage-widgets .widget_sp_image {
		padding-top: 0.5em;
	}

	.frontpage-widgets .widget_sp_image img {
		float: none;
		width: 100%;
		shape-outside: none;
		shape-margin: 0;
		margin: var(--spacing-grid) 0;
	}

}


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

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

.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;
}


@container (min-width: 769px) {

	.frontpage-part-content {
		padding-left: var(--spacing-content);
		padding-right: var(--spacing-content);
	}

	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: 90px;
	}
	
	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: 90px;
	}

	.frontpage-part-content .post-preview {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: stretch;
		gap: 0 var(--spacing-grid);
		margin-bottom: 0.2em;
	}

}

@container (max-width: 768px) {

	.frontpage-part-content {
		padding-left: var(--spacing-grid);
		padding-right: var(--spacing-grid);
	}

	section.frontpage-part-area:nth-of-type(odd) .frontpage-part-content {
		padding-top: 16px;
		padding-bottom: 50px;
	}
	
	section.frontpage-part-area:nth-of-type(even) .frontpage-part-content {
		padding-top: 32px;
		padding-bottom: 80px;
	}
	
	section.frontpage-part-area:first-of-type .frontpage-part-content {
		padding-top: 24px;
	}
	
	section.frontpage-part-area:last-of-type .frontpage-part-content {
		padding-bottom: 40px;
	}

}

@container (max-width: 500px) {

	.frontpage-part-content {
		padding-left: var(--spacing-paragraph);
		padding-right: var(--spacing-paragraph);
	}

}


/* ==========================================================================
   POSTS AND PAGES
   ========================================================================== */

.content, .content-footer {
	min-height: 30em;
}

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

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

	.content {
		padding-top: 24px;
		padding-bottom: 60px;
		padding-left: calc(var(--spacing-content) + var(--spacing-grid));
		padding-right: calc(var(--spacing-content) + var(--spacing-grid));
	}
	
	:is([data-post-type=archive], [data-post-type=search], [data-post-type=404]) .content {
		padding-bottom: 100px;
	}

}

@container content-wrapper (max-width: 768px) {

	.content {
		padding-top: 16px;
		padding-bottom: 40px;
		padding-left: var(--spacing-content);
		padding-right: var(--spacing-content);
	}

	:is([data-post-type=archive], [data-post-type=search], [data-post-type=404]) .content {
		padding-bottom: 85px;
	}

}

@container content-wrapper (max-width: 500px) {

	.content {
		padding-top: 8px;
		padding-bottom: 20px;
		padding-left: var(--spacing-grid);
		padding-right: var(--spacing-grid);
	}

	:is([data-post-type=archive], [data-post-type=search], [data-post-type=404]) .content {
		padding-bottom: 70px;
	}

}

@container content-footer-wrapper (min-width: 769px) {

	.content-footer {
		padding: 16px var(--spacing-grid) 96px;
	}

}

@container content-footer-wrapper (max-width: 768px) {

	.content-footer {
		padding: 12px var(--spacing-grid) 96px;
	}

}

@container content-footer-wrapper (max-width: 500px) {

	.content-footer {
		padding: 8px var(--spacing-grid) 96px;
	}

}

h1.page-title {
	padding-right: 120px;
}


/* ==========================================================================
   PAGE PREVIEWS
   ========================================================================== */

[data-post-type=frontpage] .page-preview {
	margin-bottom: 3em;
}

[data-post-type=frontpage] .page-thumbnail {
	height: 240px;
}


/* ==========================================================================
   POST PREVIEWS
   ========================================================================== */

.post-wrapper {
	height: -webkit-fill-available;
	height: stretch;	
}

@container post-wrapper (max-width: 400px) {

	.post-preview-item {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
		gap: 0;
	}

	.post-thumbnail {
		grid-column: 1 / span 1;
		grid-row: 1 / span 1;
		width: 150px;
		margin: 0 auto;
	}
	
	.entry-header {
		grid-column: 1 / span 1;
		grid-row: 2 / span 1;
		text-align: center;
		margin: 0;
	}

	.entry-title {
		margin: 0.7em 0 0.3em 0;
	}

	.entry-meta {
		display: none;
	}
	
	.entry-content {
		grid-column: 1 / span 1;
		grid-row: 3 / span 1;
		hyphens: auto;
	}

	.post-excerpt-full, .post-excerpt-long {
		display: none;
	}

}

@container post-wrapper (min-width: 401px) {

	.post-preview-item {
		display: block;
		min-height: calc( 150px + 2 * var(--spacing-grid) );
	}

	.post-thumbnail {
		float: left;
		width: 150px; 
		margin: 0 var(--spacing-grid) var(--spacing-grid) 0;
	}
	
	.entry-title {
		margin: 0 0 0.3em 0;
	}

	.post-excerpt-full, .post-excerpt-short {
		display: none;
	}
	
}

@container post-wrapper (min-width: 780px) {

	.post-preview-item {
		min-height: calc( 200px + 2 * var(--spacing-grid) );
	}

	.post-thumbnail {
		width: 200px;
	}
	
}


/* ==========================================================================
   COMMENT PREVIEWS
   ========================================================================== */

@container comment-preview-item-wrapper (max-width: 400px) {

	.comment-preview-item {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
		gap: 0;
	}

	.post-thumbnail {
		grid-column: 1 / span 1;
		grid-row: 1 / span 1;
		margin: 0 auto;
	}
	
	.entry-header {
		grid-column: 1 / span 1;
		grid-row: 2 / span 1;
		text-align: center;
	}

	.comment-preview-item .entry-title {
		margin: 1em 0 0 0;
	}
	
	.comment-preview-item .entry-content {
		grid-column: 1 / span 1;
		grid-row: 3 / span 1;
		hyphens: auto;
	}

}

@container comment-preview-item-wrapper (min-width: 401px) {

	.comment-preview-item {
		display: block;
		min-height: calc( 100px + 2 * var(--spacing-grid) );
	}

	.post-thumbnail {
		float: left;
		margin: 0 var(--spacing-grid) var(--spacing-grid) 0;
	}
	
	.comment-preview-item .entry-title {
		margin: 0;
	}
	
}


/* ==========================================================================
   COMMENTS
   ========================================================================== */

@container content-footer-wrapper (max-width: 768px) {

	.avatar {
		width: 40px;
		height: 40px;
	}

	.comment-arrow.left {
		top: 12px;
	}

	.comment-form-comment, .comment-form-author, .comment-form-email, .comment-form-url  {
		display: block;
	}

}

@container content-footer-wrapper (max-width: 360px) {
	
	.comment-wrapper {
		display: block;
	}
	
	.comment-wrapper .avatar, .comment-arrow, .comment-edit-link {
		display: none;	
	}
	
}


/* ==========================================================================
   FOOTER
   ========================================================================== */
	
/* The footer area should accomodate decorations issued to the preceding area. */
 
#footer-area {
	z-index: 0;
}

@container footer-wrapper (min-width: 1001px) {

	.footer-widget {
		width: var(--widget-width);
	}

	.footer-widget:first-child {
		text-align: left;
	}
	
	.footer-widget:nth-child(2) {
		text-align: center;
	}
	
	.footer-widget:last-child {
		text-align: right;
	}

}

@container footer-wrapper (max-width: 1000px) {

	.footer-widget:nth-child(2) {
		display: none;
	}

}

@container footer-wrapper (max-width: 650px) {

	.footer-widgets {
		flex-flow: column nowrap;
		align-items: center;
	}

	.footer-widget {
		text-align: center;
	}

}


/* ==========================================================================
   SHORTCODES
   ========================================================================== */

@container (max-width: 768px) {

	.box.alignnone {
		width: auto;
		max-width: 100% !important;
	}

}

@container (max-width: 500px) {

	.box.alignleft, .box.alignright {
		width: auto;
		max-width: 100%;
		float: none;
		margin: 0 0 1.5em 0;
	}

}

@container category-cloud-wrapper {
	
	.category-cloud-shape.left {
		float: left;
		width: 75cqw;
		height: 97cqw;
		shape-outside: url('../img/category-cloud-mask-left.svg');
	}

	.category-cloud-shape.right {
		float: right;
		width: 23cqw;
		height: 97cqw;
		shape-outside: url('../img/category-cloud-mask-right.svg');
	}

}

@container category-cloud-wrapper (max-width: 680px) {

	.category-cloud {
		background-image: none;
	}

	.category-cloud-shape {
		display: none;
	}

}


/* ==========================================================================
   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: 8cqw; 			/* Must be a bit taller than usual for small screens. */
		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: 8cqw;	
		max-height: 96px; 
	}

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

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

	.stripe.frontpage-bottom, .stripe.page-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);
}


/* ==========================================================================
   BACKGROUND IMAGES
   ========================================================================== */
   
.frontpage-part-area-even {
	background-image: url(../backgrounds/background-archive-bottom-left.png), url(../backgrounds/background-archive-bottom-right.png), url(../backgrounds/background-archive.png);
	background-size: 500px auto, 500px auto, 2000px auto;
	background-position: left bottom, right bottom, center top; 
	background-repeat: no-repeat, no-repeat, repeat;
}

:is([data-post-type=archive], [data-post-type=search], [data-post-type="404"]) .content-area,
[data-post-type=post] .content-footer-area {
	background-image: url(../backgrounds/background-archive-bottom-left.png), url(../backgrounds/background-archive-bottom-right.png), url(../backgrounds/background-archive.png);
	background-size: 500px auto, 500px auto, 2000px auto; 
	background-position: left bottom, right bottom, center top; 
	background-repeat: no-repeat, no-repeat, repeat;
}

:is([data-post-type=page], [data-post-type=evge_venue]) .content-footer-area {
	background-image: url(../backgrounds/background-page-bottom-left.png), url(../backgrounds/background-page-bottom-right.png), url(../backgrounds/background-page.png);
	background-size: 500px auto, 500px auto, 2000px auto; 
	background-position: left bottom, right bottom, center top; 
	background-repeat: no-repeat, no-repeat, repeat;
}

[data-post-type=evge_event] .content-footer-area {
	background-image: url(../backgrounds/background-event-bottom-left.png), url(../backgrounds/background-event-bottom-right.png), url(../backgrounds/background-event.png);
	background-size: 500px auto, 500px auto, 2000px auto; 
	background-position: left bottom, right bottom, center top; 
	background-repeat: no-repeat, no-repeat, repeat;
}


/* ==========================================================================
   DECORATIONS
   ========================================================================== */

.content-wrapper-decoration {
	z-index: 1000;
	filter: drop-shadow(var(--decoration-shadow));
}

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

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

@media (min-width: 769px) {

	[data-post-type=frontpage] .footer-wrapper::before {
		content: url('../img/kamille.png');
		display: block;
		position: absolute;
		top: -360px;  
		right: -150px;
		z-index: 0;
		filter: drop-shadow(var(--decoration-shadow));
	}

	[data-post-type=frontpage] .footer-wrapper::after {
		content: url('../img/rotkehlchen.png');
		display: block;
		position: absolute;
		top: -183px;  
		left: -170px;
		z-index: 1000;
		filter: drop-shadow(var(--decoration-shadow));
	}
	
}