/**
  Theme Name: Haus und Hof
  Template: twentytwentyfive
  Version: 1.0
  Author: bernhard
  Author URI: https://bernhard-steger.dev
  Requires at least: 7.0
  Requires PHP: 8.4
*/

/* Smooth scrolling */
html {
	scroll-behavior: smooth;
}

/* Minimal Reset */
* {
	padding: 0;
	margin: 0;
}

/* Fix default wordpress margin */
:root :where(.is-layout-flow) > *,
:root :where(.is-layout-constrained) > * {
	margin-block-start: 0;
}

/* Basic View Transitions */
@media screen and (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}
}

/* remove wordpress focus outline */
*:focus,
*:focus-visible {
	outline: revert;
	box-shadow: revert;
}

/* ---------------------------- Hero Banner ---------------------------- */
.wp-block-group.is-style-hero,
.wp-block-group.is-style-blog-hero {
	margin-block-end: var(--wp--preset--spacing--200);
	height: clamp(300px, 40vw, 750px);
	position: relative;
	overflow: hidden;
}

.wp-block-group.is-style-hero figure,
.wp-block-group.is-style-blog-hero figure {
	margin-block-start: 0;
	max-width: unset;
}

.wp-block-group.is-style-hero h1,
.wp-block-group.is-style-blog-hero h1 {
	margin-block-start: var(--wp--preset--spacing--30);
}

.wp-block-group.is-style-hero p,
.wp-block-group.is-style-blog-hero p {
	color: var(--wp--preset--color--white);
}

.wp-block-group.is-style-blog-hero img,
.wp-block-group.is-style-hero img {
	object-position: center;
	position: absolute;
	object-fit: cover;
	height: 100%;
	width: 100%;
	z-index: -1;
}

.wp-block-group.is-style-hero video {
	object-position: center;
	position: absolute;
	object-fit: cover;
	min-width: 100%;
	height: 100%;
	width: 100%;
	z-index: -1;
}

.wp-block-group.is-style-hero .wp-block-group {
	bottom: var(--wp--preset--spacing--70);
	left: var(--wp--preset--spacing--100);
	position: absolute;
	max-width: 600px;
}

.wp-block-group.is-style-blog-hero .wp-block-group {
	top: var(--wp--preset--spacing--70);
	left: var(--wp--preset--spacing--100);
	position: absolute;
	max-width: 50%;
}

.wp-block-group.wp-block-group.is-style-hero.is-style-top-left .wp-block-group {
	top: var(--wp--preset--spacing--70);
}

.wp-block-group.wp-block-group.is-style-hero.is-style-bottom-right
	.wp-block-group {
	right: var(--wp--preset--spacing--100);
	left: unset;
}

/* ---------------------------- Column Image full ---------------------------- */
.wp-block-column:has(img) {
	position: relative;
	overflow: hidden;
	min-height: 250px;
}

/* Image Object Fit */
figure.wp-block-image.is-style-object-fit img {
	object-position: center;
	position: absolute;
	object-fit: cover;
	height: 100%;
	width: 100%;
}

/* -------------------------------- Heading 2 -------------------------------- */
.is-layout-flow h2 {
	margin-block-start: var(--wp--preset--spacing--30);
	margin-block-end: var(--wp--preset--spacing--85);
}

/* -------------------------------- Sub-Heading -------------------------------- */
.is-layout-flow p.is-style-text-subtitle {
	font-weight: 500;
	font-size: clamp(0.8rem, 2.5vw, 1rem);
}

/* -------------------------------- Text button -------------------------------- */
.wp-block-button.is-style-text button {
	color: var(--wp-preset-color-black);
	font-size: var(--wp-preset-font-size-small);
	position: relative;
	font-weight: 400;
	background: none;
	outline: none;
}

.wp-block-button.is-style-text button:focus,
.wp-block-button.is-style-text button:active {
	font-weight: bold;
}

/* Prevent layout shift when changing font weight
   by adding an already bold hidden element
*/
.wp-block-button.is-style-text button::before {
	content: attr(data-text);
	visibility: hidden;
	font-weight: 700;
	overflow: hidden;
	display: block;
	height: 0;
}

/* -------------------------------- Image Banner -------------------------------- */
.wp-block-group.is-style-image-banner {
	height: clamp(300px, 23vw, 450px);
	position: relative;
	overflow: hidden;
}

.wp-block-group.is-style-image-banner figure {
	max-width: unset;
}

.wp-block-group.is-style-image-banner img {
	object-position: center;
	position: absolute;
	object-fit: cover;
	height: 100%;
	width: 100%;
}

.wp-block-group.is-style-image-banner figure.hauho-img-pos-50-30 img {
	object-position: 50% 30%;
}

.wp-block-group.is-style-image-banner figure.hauho-img-pos-50-90 img {
	object-position: 50% 90%;
}

/* -------------------------------- Masonry Grid Layout -------------------------------- */
.wp-block-group.is-style-masonry-4 {
	grid-template-rows:
		clamp(200px, 25vw, 400px)
		repeat(3, clamp(50px, 8vw, 150px))
		clamp(200px, 25vw, 400px);
	grid-template-columns:
		1fr
		repeat(2, clamp(50px, 8vw, 150px))
		1fr;
	gap: 0;
}

.wp-block-group.is-style-masonry-4 figure,
.wp-block-group.is-style-masonry-3 figure,
.wp-block-group.is-style-masonry-text figure {
	position: relative;
	height: 100%;
}

.wp-block-group.is-style-masonry-4 figure img,
.wp-block-group.is-style-masonry-3 figure img,
.wp-block-group.is-style-masonry-text figure img {
	width: 100%;
	height: 100%;
	position: absolute;
	object-fit: cover;
	display: block;
}

.wp-block-group.is-style-masonry-4 *:first-child {
	grid-column: 1 / 2;
	grid-row: 1 / 4;
}

.wp-block-group.is-style-masonry-4 *:nth-child(2) {
	grid-column: 3 / 5;
	grid-row: 1 / 2;
}

.wp-block-group.is-style-masonry-4 *:nth-child(3) {
	grid-column: 1 / 3;
	grid-row: 5 / 6;
}

.wp-block-group.is-style-masonry-4 *:nth-child(4) {
	grid-column: 4 / 5;
	grid-row: 3 / 6;
}

.wp-block-group.is-style-masonry-text {
	grid-template-columns: 1fr repeat(2, clamp(50px, 8vw, 150px)) 1fr;
	grid-template-rows: min-content repeat(3, clamp(50px, 8vw, 150px)) clamp(
			200px,
			25vw,
			400px
		);
	gap: 0;
}

.wp-block-group.is-style-masonry-text *:first-child {
	grid-column: 1 / 3;
	grid-row: 1 / 2;
}

.wp-block-group.is-style-masonry-text *:nth-child(2) {
	grid-column: 4 / 5;
	grid-row: 1 / 4;
}

.wp-block-group.is-style-masonry-text *:nth-child(3) {
	grid-column: 1 / 2;
	grid-row: 3 / 6;
}

.wp-block-group.is-style-masonry-text *:nth-child(4) {
	grid-column: 3 / 5;
	grid-row: 5 / 6;
}

.wp-block-group.is-style-masonry-3 {
	grid-template-columns: 1fr clamp(50px, 8vw, 150px) 1fr;
	grid-template-rows: clamp(200px, 25vw, 400px) clamp(100px, 15vw, 200px);
	gap: 0;
}

.wp-block-group.is-style-masonry-3 *:first-child {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
}

.wp-block-group.is-style-masonry-3 *:nth-child(2) {
	grid-column: 3 / 4;
	grid-row: 1 / 4;
}

.wp-block-group.is-style-masonry-3 *:nth-child(3) {
	align-items: flex-end;
	grid-column: 1 / 2;
	grid-row: 3 / 4;
	display: flex;
}

.wp-block-paragraph.is-style-caption {
	margin-block-start: clamp(3px, 0.6vw, 10px);
	font-size: clamp(12px, 2.5vw, 16px);
}

/* -------------------------------- General Accordion -------------------------------- */
.wp-block-accordion
	.wp-block-accordion-heading
	.wp-block-accordion-heading__toggle-icon {
	display: none;
}

.wp-block-accordion .wp-block-accordion-heading button {
	max-width: 80%;
}

/* Level 1 Accordion */
.wp-block-accordion.is-style-nested
	> .wp-block-accordion-item
	> .wp-block-accordion-heading {
	font-size: var(--wp--preset--font-size--large);
	padding-left: 80px;
	position: relative;
	padding-bottom: 10px;
	font-weight: bold;
}

.wp-block-accordion.is-style-nested > .wp-block-accordion-item {
	padding: 25px 0 15px 0;
}

.wp-block-accordion.is-style-nested
	> .wp-block-accordion-item:not(:last-of-type) {
	border-bottom: 2px solid black;
}

.wp-block-accordion.is-style-nested
	> .wp-block-accordion-item
	> .wp-block-accordion-heading::before {
	align-items: center;
	position: absolute;
	display: flex;
	content: url('data:image/svg+xml,<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.1291 36.6474L0.000582071 23.5189L2.03656 21.483L13.094 32.5404L24.011 21.6234L35.7353 33.4882L46.3715 22.852L48.4426 24.9231L35.7353 37.6303L24.011 25.7655L13.1291 36.6474Z" fill="%231A1B19"/></svg>');
	height: calc(100% - 10px);
	left: 0;
}

/* Level 2 Accordion */
.wp-block-accordion.is-style-nested
	> .wp-block-accordion-item
	.wp-block-accordion {
	padding-left: 60px;
}

.wp-block-accordion.is-style-nested
	> .wp-block-accordion-item
	.wp-block-accordion
	.wp-block-accordion-item {
	border-bottom: 1px solid black;
}

.wp-block-accordion.is-style-nested
	> .wp-block-accordion-item
	.wp-block-accordion
	.wp-block-accordion-heading {
	margin-block-end: 1.2rem;
	padding: 20px 0 0 0;
	position: relative;
	font-weight: bold;
}

.wp-block-accordion.is-style-nested
	> .wp-block-accordion-item
	.wp-block-accordion
	.wp-block-accordion-heading::after {
	content: url('data:image/svg+xml,<svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M28.4435 13.4674L13.4673 28.4436L0 14.9763L2.22568 12.7506L13.4673 23.9922L26.2178 11.2417L28.4435 13.4674Z" fill="%231A1B19"/></svg>');
	transition: transform 0.5s ease-in-out;
	align-items: center;
	position: absolute;
	display: flex;
	height: 100%;
	right: 15px;
	top: 0;
}

.wp-block-accordion.is-style-nested
	> .wp-block-accordion-item
	.wp-block-accordion
	.wp-block-accordion-item.is-open
	.wp-block-accordion-heading::after {
	transform: rotate(180deg);
}

.wp-block-accordion.is-style-nested
	> .wp-block-accordion-item
	.wp-block-accordion
	.wp-block-accordion-panel {
	margin-block-end: 1.2rem;
}

.wp-block-accordion.is-style-nested h3 {
	font-size: var(--wp--preset--font-size--large);
	padding-bottom: var(--wp--preset--spacing--30);
}

.wp-block-accordion.is-style-nested
	> .wp-block-accordion-item
	.wp-block-accordion
	.wp-block-accordion-item:last-of-type {
	border: none;
}

/* -------------------------------- Tabbed Post List -------------------------------- */
.hauho-tabbed-post-list .hauho-tab-filter {
	justify-content: center;
	flex-wrap: nowrap;
	display: flex;
	gap: var(--wp--preset--spacing--70);
	margin-block-end: var(--wp--preset--spacing--150);
}

.hauho-tabbed-post-list .hauho-tab-filter button.wp-element-button {
	padding: 0;
}

.hauho-tabbed-post-list .hauho-tab-filter button.is-active {
	font-weight: bold;
}

.hauho-tabbed-post-list .hauho-post-list {
	transition:
		opacity 220ms ease,
		transform 220ms ease;
	flex-direction: column;
	display: flex;
	gap: 100px;
}

.hauho-tabbed-post-list .hauho-post-list.is-transitioning {
	opacity: 0;
	transform: translateY(8px);
}

.hauho-tabbed-post-list .hauho-post.is-hidden {
	visibility: hidden;
	display: none;
}

.hauho-tabbed-post-list .hauho-post:nth-of-type(even) .wp-block-columns {
	--padding-left: var(--wp--preset--spacing--150);
}

.hauho-tabbed-post-list .hauho-post:nth-of-type(odd) .wp-block-columns {
	flex-direction: row-reverse;
	--padding-right: var(--wp--preset--spacing--150);
}

.hauho-post .hauho-post-thumbnail {
	position: relative;
	overflow: hidden;
}

.hauho-post .hauho-post-content {
	padding-right: var(--padding-right);
	padding-left: var(--padding-left);
	padding-block-start: var(--wp--preset--spacing--30);
	padding-block-end: var(--wp--preset--spacing--30);
}

.hauho-post .hauho-post-content p,
.hauho-post .hauho-post-content .wp-block-button {
	padding-left: var(--wp--preset--spacing--70);
}

.hauho-post .hauho-post-content h3 {
	margin-block-start: 0;
	margin-block-end: var(--wp--preset--spacing--40);
}

.hauho-post .hauho-post-content p {
	margin-block-end: var(--wp--preset--spacing--30);
}

.hauho-post .hauho-post-thumbnail img {
	object-position: center;
	position: absolute;
	object-fit: cover;
	height: 100%;
	width: 100%;
}

.hauho-tabbed-post-list.is-transitioning {
	opacity: 0;
	transform: translateY(8px);
}

/* -------------------------------- Google Reviews -------------------------------- */
.wp-block-group.is-style-google-reviews {
	position: relative;
	min-height: 400px;
}

.wp-block-group.is-style-google-reviews .wp-block-group {
	position: absolute;
	opacity: 0;
	transform: translateY(10px);
	transition:
		opacity 0.6s ease,
		transform 0.6s ease;

	pointer-events: none;
}

.wp-block-group.is-style-google-reviews .wp-block-group.active {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.wp-block-group.is-style-google-reviews .wp-block-group p:first-of-type {
	font-size: var(--wp--preset--font-size--x-large);
	text-align: center;
	font-weight: 800;
}

.wp-block-group.is-style-google-reviews .wp-block-group p:nth-of-type(2) {
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

/* Navigation */
li.wp-block-navigation-item.navigation-button {
	background-color: var(--wp--preset--color--black);
	border-radius: 22px;
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	padding-top: 20px;
	padding-right: 25px;
	padding-bottom: 20px;
	padding-left: 25px;
}

.hauho-navigation-menu ul li {
	padding-block-start: var(--wp--preset--spacing--30);
	padding-block-end: var(--wp--preset--spacing--30);
}

.hauho-navigation-menu ul li:not(.navigation-button) {
	border-bottom: 2px solid var(--wp--preset--color--black);
	justify-content: flex-end;
	width: 100%;
}

.hauho-navigation-menu ul li.navigation-button {
	margin-block-start: var(--wp--preset--spacing--50);
}

.wp-block-navigation-item.current-menu-item {
	font-weight: bold;
}

.hauho-navigation-menu > .wp-block-group {
	height: 50px;
}

.hauho-language-switcher a {
	text-decoration: none;
}

/* Replace Hamburger Menu Icon and Close Icon with rotated Menü text  */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation-overlay-close {
	rotate: -90deg;
}

.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation-overlay-close svg {
	display: none;
}

.wp-block-navigation__responsive-container-open::before,
.wp-block-navigation-overlay-close::before {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	content: "menu";
}

/* Sticky Header */
header.wp-block-template-part {
	top: calc(0px + var(--wp-admin--admin-bar--position-offset, 0px));
	position: sticky;
	z-index: 10;
}

header.wp-block-template-part > div.wp-block-group {
	transition:
		box-shadow 0.2s ease,
		padding-bottom 0.3s ease;
}

header.wp-block-template-part.is-sticky > div.wp-block-group {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
	padding-bottom: 30px !important;
}

header
	.wp-block-group
	.wp-block-group:first-child:has(.hauho-language-switcher) {
	transition:
		height 0.3s ease,
		margin 0.3s ease;
	overflow: hidden;
	height: 25px;
}

header.is-sticky .wp-block-group .wp-block-group:first-child {
	margin-bottom: 0 !important;
	height: 0;
}

/* Easybooking */
.eb-availability span.eb-oneday.arrival-blocked.departure-blocked,
.eb-availability span.eb-oneday.departure-free.arrival-blocked {
	background: #efefef;
	color: #9d9d9d;
}

.eb-availability span.eb-oneday.arrival-free.departure-free,
.eb-availability span.eb-oneday.departure-blocked.arrival-free {
	background: #010101;
	color: #ffffff;
}

@media (max-width: 600px) {
	/* reverse column order on mobile */
	.hauho-mobile-column-reverse {
		flex-direction: column-reverse;
	}

	/* partner logos */
	footer .wp-block-group.is-content-justification-space-between {
		justify-content: center;
		flex-wrap: wrap;
	}

	footer .wp-block-group.is-content-justification-space-between figure {
		max-width: 200px;
	}

	.mobile-no-padding {
		padding: 0 !important;
	}
}

/* Revert core styles above the default 600px breakpoint */
@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;
	}
}

/* Switch to desktop menu at 1040px */
@media (min-width: 1040px) {
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none;
	}

	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(
		.is-menu-open
	) {
		display: block;
	}
}