/*
 Theme Name:   Freihaus
 Description:  Freihaus
 Template:     tove
 Version:      1.0
 Text Domain:  tove-child
 */

/* *** Allgemein *** */

:root {
	--mobile-menue-size: 40px;
}

::selection {
	color: rgb(240, 240, 218);
	background: var(--wp--preset--color--custom-fh-1);
}

body,
html {
	overflow-x: hidden;
}

html {
	scroll-behavior: smooth;
	scroll-padding: 120px;
}

html.has-modal-open {
	overflow: auto;
}

h1,
h2,
h3 {
	hyphens: auto;
	overflow-wrap: break-word;
}

p {
	text-wrap: pretty;
}

a:hover {
	text-decoration-thickness: 0.1em;
}

time a:hover {
	text-decoration-thickness: 0.2em;
}

h2.wp-block-post-title,
.post-template-default h1 {
	hyphens: none;
}

/* Sticky Footer */

.wp-site-blocks {
	display: flex;
	min-block-size: 95svh;
	margin: 0 auto;
	flex-direction: column;
}

main {
	flex: 1;
}

/* *** Navigation *** */

.wp-block-site-title,
.wp-block-site-title a {
	text-decoration: none;
}
.wp-site-blocks {
	padding-top: 0;
}

@media (min-width: 1150px) {
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none !important;
	}
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(
			.is-menu-open
		) {
		display: block !important;
	}
}

@media (min-width: 600px) {
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(
			.is-menu-open
		) {
		display: none;
	}
}

.wp-block-navigation__responsive-container-close svg,
.wp-block-navigation__responsive-container-open svg {
	fill: var(--wp--preset--color--custom-fh-2);
	display: block;
	height: var(--mobile-menue-size);
	pointer-events: none;
	width: var(--mobile-menue-size);
}

.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-close svg {
	background: transparent;
}

.wp-block-navigation:not(.has-background)
	.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--custom-fh-1);
}

.wp-block-navigation:not(.has-background)
	.wp-block-navigation__responsive-container.is-menu-open {
	color: var(--wp--preset--color--background);
}

@media (min-width: 1000px) {
	.wp-block-navigation:not(.has-background)
		.wp-block-navigation__responsive-container.is-menu-open {
		width: 35rem;
		margin-left: auto;
	}
}

.has-modal-open .wp-block-navigation__responsive-container-open::before {
	opacity: 0;
}
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
	height: 80vh;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content
	.wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content
	.wp-block-page-list {
	align-items: center !important;
	justify-content: space-around;
}

.wp-block-navigation ul,
.wp-block-navigation ul li {
	list-style: none;
	padding: 0;
	font-size: 2.6rem;
	text-decoration: none;
}

.main-nav .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--wp--preset--color--custom-fh-2);
}

.main-nav .wp-block-navigation ul,
.wp-block-navigation ul li a {
	font-weight: 700;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--onlysans) !important;
}
.wp-block-navigation__responsive-container-open svg {
	display: none;
}
.wp-block-navigation__responsive-container-open::before {
	content: "";
	display: inline-block;
	width: var(--mobile-menue-size);
	height: var(--mobile-menue-size);
	background-color: var(--wp--preset--color--foreground);
	-webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='square' stroke-linejoin='square' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E");
	mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='square' stroke-linejoin='square' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content
	.wp-block-navigation__container {
	align-items: flex-start;
	width: 100%;
	gap: 2rem;
}

header,
header.sticky {
	min-height: var(--header-height);
	width: 100vw;
	position: fixed;
	z-index: 10;
	padding-top: 1rem;
	background-color: var(--wp--preset--color--background);
	transition: background-color 0.2s;
}

header .wp-block-group {
	padding-left: var(--wp--style--root--padding-left);
	padding-right: var(--wp--style--root--padding-right);
}

.secondary-nav ul {
	display: flex;
	margin: auto;
	flex-direction: row;
	justify-content: space-between;
	color: var(--wp--preset--color--primary);
}

.wp-block-navigation ul li:last-child a:before {
	position: absolute;
	content: url("assets/img/instagram.svg ");
	height: 20px;
	width: 20px;
}

/* *** Inhalt *** */

/*  ** Startseite **  */

.home h1.wp-block-heading {
	hyphens: none;
	max-width: 33rem;
}

.home .wp-block-media-text .wp-block-media-text__content {
	padding: 0;
}

@media (min-width: 768px) {
	.home h1.wp-block-heading {
		hyphens: none;
		max-width: 53rem;
	}
	.home .wp-block-media-text .wp-block-media-text__content {
		padding: 0 0 0 var(--wp--preset--spacing--40);
	}
}

@media (min-width: 1024px) {
	.home .wp-block-media-text .wp-block-media-text__content {
		padding: var(--wp--preset--spacing--60);
	}
}

/* Marquee */

.marquee,
.marquee-loop {
	overflow: clip;
}

.track,
.marquee-loop-track {
	list-style: none;
	display: flex;
	gap: 2rem;
	width: max-content;
	animation: marqueeMove 30s linear infinite;
	will-change: transform;
}

.track li,
.marquee-loop-track li {
	white-space: nowrap;
}

.marquee-loop-track li:last-child {
	margin-right: 0;
}

.marquee-loop .wp-block-post-template {
	max-width: max-content;
}

@keyframes marqueeMove {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

.marquee-loop-track {
	animation: marqueeLoopMove 40s linear infinite;
}

@keyframes marqueeLoopMove {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

/* Pause Animation bei Hover */

.marquee-loop:hover .marquee-loop-track {
	animation-play-state: paused;
}

/* ** Beitrag ** */

@media (min-width: 768px) {
	.post-header-container .wp-block-column:first-child {
		padding-inline-end: 4rem;
	}
	.post-intro-container .sponsor {
		padding-inline-start: 1.5rem;
	}
}

.wp-lightbox-overlay .scrim {
	background-color: var(--wp--preset--color--custom-fh-1) !important;
}

main > .wp-block-group > :first-child {
	margin-top: 3rem;
}

figure.hg-bubble {
	position: relative;
	z-index: 5;
	width: 100%;
	max-width: 300px !important;
}

.wp-block-post-featured-image.push {
	margin-block-end: 2rem;
}

@media (min-width: 768px) {
	.wp-block-post-featured-image.push {
		margin-block-end: -5rem;
	}

	figure.hg-bubble {
		margin-inline-start: -6rem;
		margin-block-end: -3rem;
	}
}

/* * Meta Angaben */
.post-date time,
.post-template-default h1 {
	font-family: var(--wp--preset--font-family--dina-chaumont);
	font-size: clamp(2.5rem, 1.286rem + 3.238vw, 4.2rem);
}

.post-template-default h1 {
	line-height: 1.1;
	text-wrap: pretty;
}

.wp-block-group.post-time-container {
	flex-wrap: wrap;
}

.post-time time::after {
	content: "Uhr";
	padding-left: 2px;
}

/* Media-Text-Elemente */

.hausgespraeche-bubble {
	position: relative;
	z-index: 1;
}
.push-up-block,
.push-up figure.wp-block-media-text__media,
.push-down-block,
.push-down figure.wp-block-media-text__media {
	padding-block: 1.5rem;
	margin: 0;
}

@media (min-width: 782px) {
	.push-up-block,
	.push-up figure.wp-block-media-text__media {
		padding-bottom: 2rem;
		margin-top: -4em;
	}

	.push-down-block,
	.push-down figure.wp-block-media-text__media {
		padding-top: 2rem;
		margin-bottom: -8em;
	}

	.wb-right {
		background-image: linear-gradient(
			90deg,
			transparent 98%,
			rgba(255, 255, 255, 1) 98%,
			rgba(255, 255, 255, 1) 100%
		);
	}
	.wb-top {
		background-image: linear-gradient(
			0deg,
			transparent 98%,
			rgba(255, 255, 255, 1) 98%,
			rgba(255, 255, 255, 1) 100%
		);
	}

	.wb-left {
		background-image: linear-gradient(
			90deg,
			rgb(255, 255, 255) 0%,
			rgb(255, 255, 255) 2%,
			transparent 2%
		);
	}
	.wb-bottom {
		background-image: linear-gradient(
			0deg,
			rgb(255, 255, 255) 0%,
			rgb(255, 255, 255) 2%,
			transparent 2%
		);
	}
}

.img-ontop {
	position: relative;
	z-index: 1;
}

/* Galerie */

.wp-block-gallery figure:nth-child(1) {
	transform: translate (20px 20px);
}

.wp-block-gallery.random figure {
	will-change: transform;
}

/* Scatter Gallerie */

.wp-block-gallery.scatter figure {
	transition: transform 0.35s ease;
}
@media (min-width: 1300px) {
	figure.scatter {
		overflow-x: visible;
	}
}

.wp-block-gallery {
	padding-block: 12rem;
}

/* Kategorie */
.wp-block-post-featured-image img {
	transition: 0.4s ease-in-out;
}

.wp-block-post-featured-image a:hover img {
	transform: scale(1.1);
}

.wp-block-post-featured-image {
	overflow: clip;
}

/* Loop */

time a {
	font-family: var(--wp--preset--font-family--dina-chaumont);
	color: var(--wp--preset--color--custom-fh-2);
}

.wp-block-post-template li:nth-child(even) time a {
	color: var(--wp--preset--color--custom-fh-1);
}

/* *** Footer *** */

footer .wp-block-site-title a {
	font-size: inherit;
}

/* *** Helfer *** */

@media (max-width: 768px) {
	.wp-block-columns.row-reverse {
		flex-direction: row-reverse;
	}
}

.uppercase {
	text-transform: uppercase;
}
.m-right-auto {
	margin-right: auto;
}
.m-left-auto {
	margin-left: auto;
}

.hide-this {
	display: none;
}