/**
 * Property Site — layout, colors, typography.
 */

:root {
	--color-primary: #152e4d;
	--color-secondary: #a1abb8;
	--color-page: #eeebe9;
	--color-white: #ffffff;
	--content-max: 1400px;
	--header-height: 4.5rem;
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-height) + 0.5rem);
	overflow-x: hidden;
	overflow-x: clip;
}

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	font-family: "Mulish", system-ui, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--color-primary);
	background-color: var(--color-page);
	overflow-x: hidden;
	overflow-x: clip;
}

/* ----- Fixed header: transparent → primary bar slides down (above slideshow / hero) ----- */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99990;
	min-height: var(--header-height);
	padding: 0 1.25rem;
	display: flex;
	align-items: stretch;
	justify-content: flex-end;
	isolation: isolate;
}

.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--color-primary);
	transform: scaleY(0);
	transform-origin: top center;
	transition: transform 0.45s var(--ease-out);
	z-index: 0;
	pointer-events: none;
}

.site-header.is-scrolled::before {
	transform: scaleY(1);
}

.site-header__inner {
	position: relative;
	z-index: 1;
	flex: 1;
	width: 100%;
	max-width: var(--content-max);
	min-width: 0;
	min-height: var(--header-height);
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: 0.75rem 0;
	padding-right: 3rem;
	gap: 0.75rem;
}

/*
 * Navigation — mobile-first so the hamburger always shows on small screens.
 * (max-width queries can fail to match some zoom/DPR cases; default = mobile.)
 */
body.has-site-nav-open {
	overflow: hidden;
}

/*
 * Pull the hamburger out of the flex row so the <nav> cannot push it off-screen;
 * keep it in the top-right of the header bar on all narrow viewports.
 */
.site-nav__toggle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	margin: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	color: var(--color-primary);
	border-radius: 4px;
	transition: color 0.35s var(--ease-out), background 0.2s ease;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	flex: none;
	-webkit-appearance: none;
	appearance: none;
}

.site-header.is-scrolled .site-nav__toggle {
	color: var(--color-white);
}

.site-nav__toggle:focus-visible {
	outline: 2px solid var(--color-secondary);
	outline-offset: 3px;
}

.site-nav__toggle-bar {
	display: block;
	width: 1.35rem;
	height: 2px;
	background-color: currentColor;
	border-radius: 1px;
	transition: transform 0.25s var(--ease-out), opacity 0.2s ease;
}

.site-header--nav-open .site-nav__toggle .site-nav__toggle-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.site-header--nav-open .site-nav__toggle .site-nav__toggle-bar:nth-child(2) {
	opacity: 0;
}

.site-header--nav-open .site-nav__toggle .site-nav__toggle-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Mobile panel: fixed below header (toggle is absolutely positioned, so nav may span the inner row). */
.site-nav {
	position: fixed;
	top: var(--header-height);
	left: 0;
	right: 0;
	z-index: 1;
	flex: 1 1 auto;
	align-self: stretch;
	min-width: 0;
	width: 100%;
	max-width: 100%;
	background-color: var(--color-primary);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
	max-height: 0;
	overflow: hidden;
	visibility: hidden;
	transition:
		max-height 0.4s var(--ease-out),
		visibility 0.4s;
}

.site-header--nav-open .site-nav {
	max-height: min(70vh, 28rem);
	visibility: visible;
}

.site-nav__list {
	list-style: none;
	margin: 0;
	padding: 0.75rem 1.25rem 1.25rem;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: flex-start;
	gap: 0;
}

.site-nav__item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.site-nav__item:last-child {
	border-bottom: none;
}

.site-nav__link {
	position: relative;
	display: block;
	font-family: "Mulish", system-ui, sans-serif;
	font-weight: 400;
	font-size: 0.99rem;
	letter-spacing: 0.02em;
	text-decoration: none;
	color: var(--color-white);
	padding: 0.65rem 0;
	transition: color 0.35s var(--ease-out);
}

.site-nav__link::after {
	display: none;
}

.site-nav__link:focus-visible {
	outline: 2px solid var(--color-secondary);
	outline-offset: 4px;
}

/* Desktop: hide hamburger, inline nav */
@media (min-width: 992px) {
	body.has-site-nav-open {
		overflow: visible;
	}

	.site-header__inner {
		padding-right: 0;
	}

	.site-nav__toggle {
		display: none;
		position: static;
		transform: none;
	}

	.site-nav {
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		z-index: auto;
		flex: 0 1 auto;
		align-self: auto;
		min-width: 0;
		width: auto;
		max-width: none;
		background: transparent;
		box-shadow: none;
		max-height: none;
		overflow: visible;
		visibility: visible;
		transition: none;
	}

	.site-header--nav-open .site-nav {
		max-height: none;
	}

	.site-nav__list {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-end;
		gap: 0.5rem 1.75rem;
		padding: 0;
	}

	.site-nav__item {
		border-bottom: none;
	}

	.site-nav__link {
		display: inline-block;
		color: var(--color-primary);
		padding: 0.35rem 0;
	}

	.site-header.is-scrolled .site-nav__link {
		color: var(--color-white);
	}

	.site-nav__link::after {
		display: block;
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 2px;
		background-color: currentColor;
		transform: scaleX(0);
		transform-origin: center;
		transition: transform 0.3s var(--ease-out);
	}

	.site-nav__link:hover::after,
	.site-nav__link:focus-visible::after {
		transform: scaleX(1);
	}
}

/* ----- Main & sections ----- */
.property-main {
	flex: 1;
	padding-top: var(--header-height);
	padding-bottom: 3rem;
}

.property-section {
	background-color: var(--color-white);
	color: var(--color-primary);
	margin: 0 auto 1.5rem;
	max-width: 100%;
	box-shadow: 0 1px 0 rgba(21, 46, 77, 0.06);
	scroll-margin-top: calc(var(--header-height) + 0.5rem);
}

.property-section__container {
	max-width: var(--content-max);
	margin-left: auto;
	margin-right: auto;
	padding: 2.5rem 1.5rem;
}

/* Section title: Outfit H3 + secondary line at vertical center */
.property-section__header {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1.75rem;
}

.property-section__title {
	font-family: "Outfit", system-ui, sans-serif;
	font-weight: 200;
	font-size: calc(1.8 * clamp(1.35rem, 2.5vw, 1.75rem));
	line-height: 1.2;
	margin: 0;
	color: var(--color-primary);
}

/* Thick secondary accent: vertically centered with title row */
.property-section__underline {
	flex: 1;
	min-width: 3rem;
	height: 4px;
	align-self: center;
	background: linear-gradient(
		90deg,
		var(--color-secondary) 0%,
		var(--color-secondary) 100%
	);
	border-radius: 2px;
	opacity: 0.95;
}

.property-section__body {
	font-family: "Mulish", system-ui, sans-serif;
	color: var(--color-primary);
}

/* No sections matched (DB/plugins/slug) */
.property-section--empty {
	padding: 2rem 1.25rem 3rem;
}

.property-empty {
	max-width: 640px;
	margin: 0 auto;
	padding: 1.5rem 1.25rem;
	background: var(--color-white);
	border-radius: 8px;
	box-shadow: 0 1px 6px rgba(21, 46, 77, 0.08);
}

.property-empty__title {
	font-family: "Outfit", system-ui, sans-serif;
	font-weight: 500;
	font-size: 1.35rem;
	margin: 0 0 0.75rem;
}

.property-empty__text {
	margin: 0 0 1rem;
}

.property-empty__admin {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(21, 46, 77, 0.12);
	font-size: 0.95rem;
}

.property-empty__admin p {
	margin: 0 0 0.75rem;
}

.property-empty__hint {
	margin: 0.75rem 0 0;
	font-size: 0.9rem;
	color: var(--color-secondary);
}

.property-empty__hint code {
	font-size: 0.85em;
}

/* Pallspera gallery: keep section surface white (tile styles live in plugin CSS). */
.property-section--gallery .property-section__body {
	background-color: var(--color-white);
}

/* Slideshow hero: no boxed container — flush to viewport top under fixed header */
.property-section--slideshow {
	background: transparent;
	box-shadow: none;
	margin-bottom: 1.5rem;
	padding: 0;
	max-width: none;
	width: 100%;
}

.property-section--slideshow:first-child {
	margin-top: calc(-1 * var(--header-height));
}

.property-section--slideshow .ps-slideshow-wrap {
	margin-bottom: 0;
}

.property-text p {
	margin-top: 0;
	margin-bottom: 1rem;
}

.property-text a {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.property-text a:hover {
	color: var(--color-secondary);
}

/* Scroll-in: fade + slide (direction cycles: up / left / right) */
[data-section-animate] {
	opacity: 0;
	transition:
		opacity 0.7s var(--ease-out),
		transform 0.75s var(--ease-out);
}

[data-section-animate][data-section-enter="up"] {
	transform: translateY(2rem);
}

[data-section-animate][data-section-enter="left"] {
	transform: translateX(-2.25rem);
}

[data-section-animate][data-section-enter="right"] {
	transform: translateX(2.25rem);
}

[data-section-animate].is-visible {
	opacity: 1;
	transform: translate(0, 0);
}

/* Title row underline: draws left → right after section starts appearing */
[data-section-animate] .property-section__underline {
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.65s var(--ease-out) 0.18s;
}

[data-section-animate].is-visible .property-section__underline {
	transform: scaleX(1);
}

/* ----- Footer ----- */
.site-footer {
	background-color: #000000;
	color: var(--color-white);
	margin-top: auto;
	padding: 2rem 1.5rem;
}

.site-footer__inner {
	max-width: var(--content-max);
	margin: 0 auto;
	text-align: center;
}

.site-footer__copy {
	margin: 0;
	font-family: "Mulish", system-ui, sans-serif;
	font-size: 0.9375rem;
}

/* ----- Fallback index ----- */
.property-main--fallback {
	min-height: 50vh;
}

.property-main--fallback .entry-content {
	font-family: "Mulish", system-ui, sans-serif;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.site-header::before {
		transition: none;
	}

	[data-section-animate],
	[data-section-animate].is-visible {
		opacity: 1;
		transform: none;
		transition: none;
	}

	[data-section-animate] .property-section__underline,
	[data-section-animate].is-visible .property-section__underline {
		transform: scaleX(1);
		transition: none;
	}

	.site-nav__link::after {
		transition: none;
	}

	.site-nav {
		transition: none;
	}
}