/* ==========================================================================
   Arnulf Rainer – main stylesheet
   ========================================================================== */

/* 1. Design tokens
   ========================================================================== */
:root {
	/* --ar-color-primary: #000; */

	/* Page header sizes */
	--ph-min-height: 400px;
	--ph-title-size: 80px;
	--ph-min-height-compact: 180px;
	--ph-title-size-compact: 30px;
}

@media (max-width: 1024px) {
	:root {
		--ph-min-height: 300px;
		--ph-title-size: 60px;
		--ph-min-height-compact: 140px;
		--ph-title-size-compact: 26px;
	}
}

@media (max-width: 767px) {
	:root {
		--ph-min-height: 220px;
		--ph-title-size: 44px;
		--ph-min-height-compact: 100px;
		--ph-title-size-compact: 22px;
	}
}

/* 2. Base
   ========================================================================== */

/* 3. Layout
   ========================================================================== */

/* Page header: fixed wrapper that slides away on scroll down (see main.js).
   Content is pushed down by body padding equal to the header's full (uncompacted)
   height, so nothing moves while the header shrinks. */
body {
	padding-top: var(--ph-min-height);
}

header.elementor-location-header {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	z-index: 999;
	transition: transform .35s ease;
	will-change: transform;
}

header.elementor-location-header.is-hidden {
	transform: translateY(-100%);
}

#pageheader {
	min-height: var(--ph-min-height);
}

#pageheader__title {
	font-size: var(--ph-title-size);
}

/* Fallback (no scroll-driven animations): JS toggles .is-compact, CSS transitions. */
#pageheader,
#pageheader__title {
	transition: min-height .3s ease, font-size .3s ease;
}

#pageheader.is-compact {
	min-height: var(--ph-min-height-compact);
}

#pageheader.is-compact #pageheader__title {
	font-size: var(--ph-title-size-compact);
}

/* Scroll-driven: header shrinks continuously over the first 150px of scrolling. */
@keyframes ph-shrink {
	to { min-height: var(--ph-min-height-compact); }
}

@keyframes ph-title-shrink {
	to { font-size: var(--ph-title-size-compact); }
}

@supports (animation-timeline: scroll()) {
	#pageheader,
	#pageheader__title {
		transition: none;
		animation-timing-function: linear;
		animation-fill-mode: both;
		animation-timeline: scroll(root block);
		animation-range: 0 150px;
	}

	#pageheader {
		animation-name: ph-shrink;
	}

	#pageheader__title {
		animation-name: ph-title-shrink;
	}
}

@media (prefers-reduced-motion: reduce) {
	header.elementor-location-header,
	#pageheader,
	#pageheader__title {
		transition: none;
	}
}

/* 4. Components
   ========================================================================== */

/* 5. Utilities
   ========================================================================== */