/*
Theme Name: Vinyl Studio
Theme URI: https://studio-1-konstanz.de
Author: Thomas Ruh
Version: 1.0.0
*/
html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}
@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}
body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}
/* sticky header push footer to bottom
 * regardless of the amount of content
 * is templatepart
 */
header.site-header {
	position:fixed;
	top:0px!important;
	width:100%;
	z-index:999!important;
}
/* wrapper autogenerated by wp
 * calc and padding depends
 * on navigation height 
 */
.wp-site-blocks {
	min-height: calc(100vh - 86px);
	padding-top: 86px;
	display: flex;
	flex-direction: column;
}
/* push footer to bottom
 * is templatepart
 */
footer.site-footer {
	margin-top: auto;
}
/* navigation links current style
 * missing in theme.json
*/
/* background: var(--wp--preset--color--secondary)!important; */
.current-menu-item,
.current-menu-ancestor {
	color: var(--wp--preset--color--quaternary)!important;
}
/* mobile #ptOffcanvas navbar - template-part is offcanvas */
.sidebar {
	height: 100%;
	display: flex;
	flex-direction: column;
	width: 0;
	position: fixed;
	z-index: 3;
	top: 0;
	right: 0;
	overflow-x: hidden;
	overflow-y: scroll;
	transition: all 0.5s;
}
#ptOffcanvas.sidebar-header {
	position: fixed;
    top: 0;
}
.sidebar-content {
	height:100%;
	overflow-x: hidden;
	overscroll-behavior: contain!important;
}
.last-item-bottom {
	flex-grow: 1;  /* ensures that the container will take up the full height of the parent container */
	overflow-y: auto;  /* adds scroll to this container */
}
#ptOffcanvas.sidebar-footer {
	position: fixed;
    bottom: 0;
}
a.dash-link:link,
a.dash-link:visited,
a.dash-link:hover,
a.dash-link:active {
	text-decoration: none!important;
}
.dashicons-dismiss {
	color: var(--wp--preset--color--primary)!important;
	font-size: 40px!important;
}
/* mobile slideIn navbar - use width from js in function.php */
.is-mobile .wp-block-navigation-link .wp-block-navigation-item__content {
	width: 320px;
	border-bottom: 0px;
}
/* show mobile hamburger and hide desctop hamburger */
@media ( min-width: 880px ) {
.is-mobile-hambuger {
	display:none;
	}
}
@media ( max-width: 881px ) {
.is-desctop-hambuger {
	display: none !important;
	}
}
/* single post navigation chevron style
 * against wp default
 */
span.is-arrow-chevron {
	color: var(--wp--preset--color--tertiary);
	font-size: 25px;
}
/*
 * add breakpoint to core/paragraph block
 * block-style-variation via block.json
 * is unable to handle complex breakpoints
 * path to block.json
 * theme > styles > blocks > text-zweispaltig.json
 */
@media only screen and (max-width: 768px) {
	.is-style-text-zweispaltig {
		column-count:1!important;
	}
}
/*
 * add breakpoint to core/columns block
 * block-style-variation via block.json
 * is unable to handle complex breakpoints
 * path to block.json
 * theme > styles > blocks > grid-columns-change.json
 */
@media only screen and (max-width: 1120px) and (min-width: 840px) {
  .columns-3.wp-block-post-template.is-layout-grid {
    grid-template-columns: 2fr 2fr !important;
  }
}
@media only screen and (max-width: 839px) and (min-width: 320px) {
  .columns-3.wp-block-post-template.is-layout-grid {
    grid-template-columns: 1fr !important;
  }
}
/* image right align */
@media only screen and (max-width: 768px) and (min-width: 320px) {
	figure.plakat {
		width: 100%!important;
		display: block!important;
	}
	figure.plakat > img {
		display: block!important;
		margin: 0 auto!important;
	}
	 figure.is-style-center-text-figcaption > .wp-element-caption {
		width: 100%!important;
		display: block!important;
	}
}
/* fadeIn header images */
.pt-fade-in {
  opacity: 0;
  animation: slideIn 2.2s ease-in forwards;
}
@keyframes slideIn {
  to {
    opacity: 1.0;
  }
}
/* rotate disc image in navbar on hover */
.box {
	display: inline-block;
	transition: transform 1s ease-in-out;
	animation: trans-rotate 2s infinite linear;
}
@keyframes trans-rotate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
@media (prefers-reduced-motion: reduce) {   
  .box  {
    animation: none;
  }
}