/*
Theme Name: Rotmilan
Author: Kollektiv13
Author URI: https://kollektiv13.eu/
Version: 2.3.0
Text Domain: rotmilan
*/


/* Layout */
* {
	box-sizing: border-box;
}

html {
	max-width: 1920px;
	margin: 0 auto;
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	/*box-shadow: 0 0 1em lightgrey;*/
}

.wp-site-blocks {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

main {
	flex-grow: 1;
}

body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	width: 90%;
}

/* Tables */
.is-style-blank table {
	width: auto;
}

.is-style-blank td {
	border: none;
	padding: 0;
	vertical-align: top;
}

.is-style-blank td + td {
	padding-left: .5em;
}

/* Forms */
input, textarea, select {
	font-size: 1rem;
	padding: .5em;
}

.wpcf7-form p > label {
	display: block;
	padding: .5em 0;
}

.wpcf7-form-control-wrap {
	display: block;
}

.wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance) {
	display: block;
	width: 100%;
}

.wpcf7-list-item {
	margin-left: 0;
}

@media screen and (min-width: 768px) {
	.wpcf7 .group {
		margin: 1em 0;
		display: flex;
		gap: 2em;
	}

	.wpcf7 .group > * {
		margin-top: 0;
		margin-bottom: 0;
		flex-grow: 1;
	}
}

/* Custom */

:root {
	--grid-line-width: clamp(5px, 2vw, 1.3rem);
}

header {
	color: #BB8BF1;
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--base);
	border-bottom: var(--grid-line-width) solid #ede7a5;
}

header a:hover {
	color: var(--wp--preset--color--primary) !important;
}

header .wp-block-navigation {
	text-transform: lowercase;
	font-size: 1.1em;
	font-weight: 600;
}

main .entry-content {
	padding-top: 0;
	padding-bottom: 0;
}

.wp-block-cover h1 {
	color: var(--wp--preset--color--primary);
	text-transform: lowercase;
	font-size: clamp(3rem, calc(3rem + ((1vw - 0.48rem) * 9.7222)), 10rem) !important;
}

nav.has-pixel {
	background: url('/wp-content/themes/rotmilan/assets/images/Pixel.png') center/cover no-repeat !important;
}

nav.has-pixel li:first-of-type {
	margin-bottom: auto;
}

.is-layout-grid {
	background: #ede7a5;
	padding: calc(var(--grid-line-width) * .5);
	gap: 0;
}

.is-layout-grid > * {
	margin: calc(var(--grid-line-width) * .5) !important;
	background: var(--wp--preset--color--base);
	min-height: 0;
	aspect-ratio: 1;
}

.is-layout-grid > .wp-block-group,
.is-layout-grid > .wp-block-template-part .wp-block-group {
	position: relative;
	padding-top: 2rem;
	padding-bottom: 2rem;
}

.is-layout-grid > .wp-block-group .wp-block-heading,
.is-layout-grid > .wp-block-template-part .wp-block-group .wp-block-heading {
	position: relative;
	left: calc((5% + var(--grid-line-width)) * -1);
	top: calc((2rem + var(--grid-line-width)) * -1);
	text-transform: lowercase;
	line-height: 1;
	font-weight: bold;
	font-size: 4em;
	margin-top: 0;
}

.is-layout-grid > .wp-block-group.reverse {
	position: relative;
	padding-bottom: var(--wp--preset--font-size--clg);
	padding-top: 1.5em;
}

.is-layout-grid > .wp-block-group.reverse .wp-block-post-title {
	position: absolute;
	left: calc(var(--grid-line-width) * -1);
	bottom: calc(var(--grid-line-width) * -1);
	text-transform: uppercase;
	line-height: 1;
	font-weight: bold;
	font-size: 4em;
	z-index: 1;
}

.is-layout-grid .is-style-tile {
	position: relative;
	color: var(--wp--preset--color--contrast) !important;
}

.is-layout-grid .is-style-tile.is-project {
	color: var(--wp--preset--color--base) !important;
}

.is-layout-grid .is-style-tile:hover {
	position: relative;
	color: var(--wp--preset--color--primary) !important;
}

.is-layout-grid .is-style-tile.is-product:hover > a::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: rgba(237, 231, 170, .5);
}

.is-layout-grid .is-style-tile.is-project:hover > a::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: rgba(187, 139, 241, .5);
}

.is-layout-grid .is-style-tile figcaption {
	margin: 0;
	position: absolute;
	left: calc(var(--grid-line-width) * -1);
	bottom: calc(var(--grid-line-width) * -1);
	font-size: var(--wp--preset--font-size--clg);
	line-height: 1;
	text-transform: lowercase;
	font-weight: bold;
	z-index: 1;
}

.is-layout-grid .is-style-tile.right figcaption {
	left: auto;
	right: calc(var(--grid-line-width) * -1);
	text-align: right;
}

.is-layout-grid .is-style-tile.black figcaption {
	color: var(--wp--preset--color--contrast);
}

.is-layout-grid .is-style-tile figcaption small {
	font-size: .6em;
	display: none;
}

.is-layout-grid .is-style-tile:hover figcaption small {
	display: inline-block;
}

.is-layout-grid a {
	color: inherit;
	text-decoration: none;
}

.is-layout-grid > *.is-span-two, .is-span-two {
	aspect-ratio: 2/1;
	min-height: 0;
}

.is-layout-grid > *.is-span-two img {
	height: 100%;
	object-fit: cover;
}

.is-layout-grid > *.is-double-height {
	aspect-ratio: unset;
}

.is-layout-grid > *.is-left-borderless {
	margin-left: calc(var(--grid-line-width) * -.5) !important;
	overflow: scroll;
}

.is-layout-grid > *.is-borderless {
	margin-left: calc(var(--grid-line-width) * -.5) !important;
	margin-right: calc(var(--grid-line-width) * -.5) !important;
}

.is-layout-grid .wp-block-cover p {
	color: #ffffff;
	line-height: 1;
	font-weight: bold;
}

.is-layout-grid .wp-block-cover.is-position-bottom-left,
.is-layout-grid .wp-block-cover.is-position-bottom-right {
	padding: 0;
	overflow: visible;
}

.is-layout-grid .wp-block-cover.is-position-bottom-left .wp-block-cover__inner-container {
	position: relative;
	left: calc(var(--grid-line-width) * -1);
	top: var(--grid-line-width);
}

.is-layout-grid .wp-block-cover.is-position-bottom-right .wp-block-cover__inner-container {
	position: relative;
	right: calc(var(--grid-line-width) * -1);
	top: var(--grid-line-width);
}

.claim {
	line-height: 1;
	font-weight: bold;
	position: relative;
	text-transform: lowercase;
	font-size: 2em;
}

.claim .wp-block-cover__inner-container {
	height: 100%;
}

.claim p:first-child {
	position: absolute;
	top: 0;
	left: 0
}

.claim p:last-child {
	position: absolute;
	bottom: 0;
	right: 0;
}


footer .wp-block-navigation {
	font-weight: bold;
	text-transform: lowercase;
}

footer .wp-block-navigation > ul {
	justify-content: flex-end;
}

footer .wp-block-navigation > ul a:hover {
	color: var(--wp--preset--color--primary) !important;
}

footer .wp-block-navigation > ul.items-justified-left {
	position: relative;
	right: var(--grid-line-width);
	top: var(--grid-line-width);
}

footer .wp-block-navigation > ul.items-justified-right {
	position: relative;
	left: var(--grid-line-width);
	top: var(--grid-line-width);
}

footer .wp-block-social-links {
	flex-wrap: nowrap;
}

footer .wp-block-social-links .wp-social-link svg {
	width: 3em;
	height: 3em;
}

footer p {
	color: #BB8BF1;
}

@media (max-width: 1024px) {
	.is-layout-grid {
		grid-template-columns: repeat(1, 1fr) !important;
	}

	.is-layout-grid > *.is-span-two, .is-span-two {
		aspect-ratio: 1;
		min-height: 0;
		grid-column: 1;
	}
}
/*
@media (prefers-color-scheme: dark) {
	:root {
		--wp--preset--color--base: #1f1f1f;
		--wp--preset--color--contrast: white;
	}
}
*/
/* Slider */
.glide__slide img {
	display: block;
	width: 100%;
	object-fit: cover;
}

.glide.stimmungsbild .glide__slide img {
	aspect-ratio: 21/9;
}

.glide.stimmungsbild .static-text {
	margin: 0;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	color: #FFFFFF;
	font-size: 5em;
	font-weight: 900;
	letter-spacing: .1em;
}

.glide.stimmungsbild .glide__arrow {
	border: 0;
	font-size: 4em;
	padding: .1em .3em;
	box-shadow: none;
}

.glide.stimmungsbild .glide__arrow--right {
	right: 2rem;
}

.glide.stimmungsbild .glide__arrow--left {
	left: 2rem;
}

.glide.strichzeichnung .glide__slide img {
	aspect-ratio: 1;
}

.glide__bullet {
	background-color: var(--wp--preset--color--secondary);
}

.glide__bullet--active,
.glide__bullet:hover, .glide__bullet:focus {
	border: 2px solid transparent;
	background-color: var(--wp--preset--color--contrast);
}

.product-acf-image {
	
}

.product-acf-image img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

.is-span-two .product-acf-image img {
	aspect-ratio: 2/1;
}

.is-span-two .product-acf-text {
	position: absolute;
	left: 1em;
    top: calc(var(--grid-line-width)* -1);
    text-transform: lowercase;
    line-height: 1;
    font-weight: bold;
	margin: 0;
	font-size: 4em;
}


/* Produktbilder */

.product-images-container {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.produktbilder .glide__arrow {
	color: var(--wp--preset--color--contrast);
	border-color: transparent;
	box-shadow: none;
}

/* Tabs */
.wc-tabs {
	display: none;
}

/* Strichzeichnungen */
.strichzeichnung figure {
	margin: 0;
}

.strichzeichnung figure img {
	display: block;
}

.strichzeichnung figure:nth-of-type(2) {
	display: none;
}

.strichzeichnung:hover figure:nth-of-type(1) {
	display: none;
}

.strichzeichnung:hover figure:nth-of-type(2) {
	display: block;
}

/* Noch Fragen? */
.noch-fragen {
	height: 100%;
}

.noch-fragen .wp-block-group {
	z-index: 1;
	text-shadow: 1px 1px #FFFFFF;
}

.noch-fragen figure {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 80%;
}

/* Swatches */

.cfvsw-label-none table.variations tr th.label {
	display: block !important;
}

.cfvsw-selected-label {
	display: none;
}

.woocommerce div.product form.cart .variations tr {
	display: block;
}

.woocommerce div.product form.cart .variations tr + tr {
	margin-top: 2em;
}

.woocommerce div.product form.cart .variations :where(th, td) {
	display: block;
}

.woocommerce div.product form.cart .variations label {
	color: #ede7a5;
}

.cfvsw-swatches-container {
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
}

.cfvsw-label-option {
	border: none;
	padding: 0 !important;
	font-size: inherit;
}

.cfvsw-label-option.cfvsw-selected-swatch {
}

.cfvsw-label-option.cfvsw-selected-swatch::after {
	content: '';
	display: block;
	position: absolute;
	left: -.5em;
	right: -.5em;
	bottom: 0;
	height: .7em;
	background: #ede7a5;
	z-index: 0;
}

.cfvsw-label-option.cfvsw-selected-swatch .cfvsw-swatch-inner {
	position: relative;
	z-index: 10;
}

[swatches-attr="attribute_pa_holz"]{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.cfvsw-image-option {
	width: 100px;
	height: 100px;
	border: none;
	border-radius: 0;
}

/* Produktsammlung */

.wc-block-product-template {
	gap: 0;
	border: calc(var(--grid-line-width) / 2) solid #ede7a5;
}

.wc-block-product-template li {
	border: calc(var(--grid-line-width) / 2) solid #ede7a5;
	padding: var(--wp--preset--spacing--40);
}