/**
 * WLRE Theme - Header Styles
 *
 * Transparent on hero pages, solid dark green on scroll.
 */

/* === Header base === */
.wlre-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	height: var(--wlre-header-height);
	background-color: transparent;
	transition: background-color 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.wlre-header--solid {
	position: fixed;
	background-color: var(--wlre-color-text-900);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Pages without a hero: the block template-part wrapper becomes sticky.
 * Sticky on .wlre-header itself fails because wp-block-template-part only
 * wraps the header — there is no extra parent height for the sticky range. */
.wlre-page--no-hero header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	transition: box-shadow 0.4s ease;
}

.wlre-page--no-hero .wlre-header {
	position: static;
	background-color: var(--wlre-color-text-900);
}

.wlre-page--no-hero .wlre-header--solid {
	/* Position handled by sticky wrapper; suppress the base solid box-shadow
	 * (it would render on .wlre-header, not the wrapper — use :has() below). */
	box-shadow: none;
}

/* Shadow materialises on the sticky wrapper as the user scrolls past the
 * threshold — same 0.4 s ease timing as the homepage transparent→solid fade. */
.wlre-page--no-hero header.wp-block-template-part:has(.wlre-header--solid) {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Listing page — show header on load, scroll it away (no sticky on mobile). */
@media (max-width: 767px) {
	body.wlre-page--search header.wp-block-template-part {
		position: static;
	}
}

/* Property details — sticky wrapper keeps the white header pinned to the top. */
body.single-property header.wp-block-template-part,
body.single.post-type-property header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	transition: box-shadow 0.4s ease;
}

body.single-property .wlre-header,
body.single.post-type-property .wlre-header {
	position: static;
	background-color: var(--wlre-color-white);
	border-bottom: 1px solid rgba(10, 36, 56, 0.08);
}

body.single-property .wlre-header--solid,
body.single.post-type-property .wlre-header--solid {
	/* Position handled by sticky wrapper; shadow is on the wrapper via :has(). */
	background-color: var(--wlre-color-white);
	box-shadow: none;
	border-bottom-color: transparent;
}

body.single-property header.wp-block-template-part:has(.wlre-header--solid),
body.single.post-type-property header.wp-block-template-part:has(.wlre-header--solid) {
	box-shadow: 0 2px 10px rgba(10, 36, 56, 0.08);
}

/* Mobile: show header on load, scroll it away (no sticky on mobile). */
@media (max-width: 767px) {
	body.single-property header.wp-block-template-part,
	body.single.post-type-property header.wp-block-template-part {
		position: static;
	}
}

body.single-property .wlre-header__inner,
body.single.post-type-property .wlre-header__inner {
	padding-inline: var(--wlre-space-100);
}

body.single-property .wlre-header__logo,
body.single.post-type-property .wlre-header__logo,
body.single-property .wlre-header__nav-list a,
body.single.post-type-property .wlre-header__nav-list a,
body.single-property .wlre-header__dropdown-trigger,
body.single.post-type-property .wlre-header__dropdown-trigger,
body.single-property .wlre-header .wlre-header__lang-btn,
body.single.post-type-property .wlre-header .wlre-header__lang-btn,
body.single-property .wlre-header .wlre-account-menu__trigger,
body.single.post-type-property .wlre-header .wlre-account-menu__trigger,
body.single-property .wlre-header__hamburger span,
body.single.post-type-property .wlre-header__hamburger span {
	color: var(--wlre-color-text-900);
}

body.single-property .wlre-header__hamburger span,
body.single.post-type-property .wlre-header__hamburger span {
	background-color: var(--wlre-color-text-900);
}

body.single-property .wlre-header__login,
body.single.post-type-property .wlre-header__login {
	color: var(--wlre-color-text-900);
	border-color: var(--wlre-color-text-900);
	background: transparent;
}

/* === Inner layout === */
.wlre-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
}

/* === Logo ========================================================
 * Rendered by the `wlre_brand_logo()` helper — inlines the SVG from
 * `assets/images/logo.svg` (Figma node 6045:116780). The letters use
 * `currentColor`, so we pin `color: white` on the header link and they
 * inherit correctly; the aqua roof stays Tiffany Aqua regardless.
 * Dimensions: Figma logged-in header logo = 154 × 40.
 * ================================================================ */
.wlre-header__logo {
	display: flex;
	align-items: center;
	color: var(--wlre-color-white);
	text-decoration: none;
	flex-shrink: 0;
}

.wlre-header__logo:hover {
	opacity: 0.9;
}

.wlre-header__logo-mark {
	display: inline-flex;
	width: 154px;
	height: 40px;
	flex-shrink: 0;
}

.wlre-header__logo-mark svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* === Navigation === */
.wlre-header__nav-list {
	display: flex;
	align-items: center;
	gap: var(--wlre-space-20);
	list-style: none;
	margin: 0;
	padding: 0;
}

.wlre-header__nav-list a,
.wlre-header__dropdown-trigger {
	color: var(--wlre-color-white);
	text-decoration: none;
	font-family: var(--wlre-font-body);
	font-weight: 400;
	font-size: var(--wlre-font-size-m);
	line-height: var(--wlre-line-height-body);
	background: none;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: var(--wlre-space-4);
	height: var(--wlre-space-48);
	padding: 0 var(--wlre-space-12);
	transition: color 0.2s ease;
}

.wlre-header__nav-list a:hover,
.wlre-header__dropdown-trigger:hover {
	color: var(--wlre-color-accent-500);
}

/* === Dropdown === */
.wlre-header__dropdown {
	position: relative;
}

.wlre-header__dropdown-menu {
	display: none;
	position: absolute;
	top: calc(100% + var(--wlre-space-12));
	left: 50%;
	transform: translateX(-50%);
	background: var(--wlre-color-white);
	border-radius: var(--wlre-radius-sm);
	box-shadow: var(--wlre-shadow-card);
	/* 12px vertical padding per Figma Owner Menu Dropdown 6074:34892. */
	padding: var(--wlre-space-12) 0;
	/* Figma 6165-64107 — Owners dropdown is 227px wide. */
	min-width: 227px;
	max-height: 400px;
	overflow-y: auto;
	list-style: none;
	margin: 0;
	z-index: 110;
}

.wlre-header__dropdown-menu a {
	color: var(--wlre-color-text-900);
	padding: var(--wlre-space-12) var(--wlre-space-20);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wlre-space-12);
	font-family: var(--wlre-font-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.48;
	text-decoration: none;
}

/* Arrow-forward icon on each Owners dropdown row — Figma 6074:34892. */
.wlre-header__dropdown-menu-icon {
	display: inline-flex;
	width: var(--wlre-space-20);
	height: var(--wlre-space-20);
	color: var(--wlre-color-text-900);
	flex-shrink: 0;
}

.wlre-header__dropdown-menu-icon svg {
	width: 100%;
	height: 100%;
}

.wlre-header__dropdown-menu a:hover {
	background-color: var(--wlre-color-surface-50);
	color: var(--wlre-color-brand-900);
}

.wlre-header__dropdown[data-open="true"] .wlre-header__dropdown-menu {
	display: block;
}

.wlre-header__dropdown[data-open="true"] .wlre-header__dropdown-trigger svg {
	transform: rotate(180deg);
}

/* Chevron icon (Figma expand_more, node 217:2172) — 21×21 */
.wlre-header__chevron {
	display: inline-flex;
	width: 21px;
	height: 21px;
	transition: transform 0.2s ease;
}

.wlre-header__chevron svg {
	width: 100%;
	height: 100%;
}

.wlre-header__dropdown[data-open="true"] .wlre-header__chevron {
	transform: rotate(180deg);
}

.wlre-header__dropdown-trigger svg {
	transition: transform 0.2s ease;
}

/* === Actions === */
.wlre-header__actions {
	display: flex;
	align-items: center;
	gap: var(--wlre-space-20);
	flex-shrink: 0;
}

/* Language button — Figma: 14px Lato Bold white, h-44px */
.wlre-header .wlre-header__lang-btn {
	display: flex;
	align-items: center;
	gap: var(--wlre-space-4);
	height: var(--wlre-tap-target);
	color: var(--wlre-color-white);
	background: none;
	border: none;
	cursor: pointer;
	font-family: var(--wlre-font-body);
	font-size: var(--wlre-font-size-m);
	font-weight: 700;
	padding: 0 var(--wlre-space-4);
	transition: color 0.2s ease;
}

.wlre-header__lang-btn:hover {
	color: var(--wlre-color-accent-500);
}

/* Globe icon — Figma 6722:441284: 20×20, fills currentColor (inherits white from the button) */
.wlre-header__lang-globe {
	display: flex;
	align-items: center;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.wlre-header__lang-globe svg {
	width: 20px;
	height: 20px;
}

/* Chevron — matches the profile dropdown chevron (Figma expand_more). */
.wlre-header__lang-chevron {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	transition: transform 0.15s ease;
}

.wlre-header__lang-chevron svg {
	width: 100%;
	height: 100%;
}

.wlre-language-dropdown.wlre-dropdown[data-open="true"] .wlre-header__lang-chevron {
	transform: rotate(180deg);
}

/* Login button — Figma: white bg, brand-900 text, 44px, 8px radius, 14px bold */
.wlre-header__login {
	font-size: var(--wlre-font-size-m);
}

/* === Hamburger === */
.wlre-header__hamburger {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	background: none;
	border: none;
	cursor: pointer;
	padding: var(--wlre-space-8);
	min-width: var(--wlre-tap-target);
	min-height: var(--wlre-tap-target);
}

.wlre-header__hamburger span {
	display: block;
	width: var(--wlre-space-24);
	height: 2px;
	background-color: var(--wlre-color-white);
	transition: transform 0.3s ease, opacity 0.3s ease;
}

/* === Responsive === */
@media (max-width: 1023px) {
	.wlre-header__inner,
	body.single-property .wlre-header__inner,
	body.single.post-type-property .wlre-header__inner {
		padding-inline: var(--wlre-space-40);
	}

	.wlre-header__nav-list {
		gap: var(--wlre-space-20);
	}

	.wlre-header__nav-list a,
	.wlre-header__dropdown-trigger {
		font-size: 13px;
	}

	.wlre-header__lang-btn {
		font-size: 13px;
	}
}

@media (max-width: 767px) {
	.wlre-header {
		height: 56px;
	}

	.wlre-header__inner,
	body.single-property .wlre-header__inner,
	body.single.post-type-property .wlre-header__inner {
		padding-inline: var(--wlre-space-16);
		position: relative;
		justify-content: flex-end;
	}

	/* Center logo in the header — pulled out of flow so actions stay right. */
	.wlre-header__logo {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	.wlre-header__logo-mark {
		width: 123.333px;
		height: 32px;
	}

	.wlre-header__hamburger {
		display: none;
	}
}

/* === WordPress admin bar compensation (admins only) ===
 * WP adds html { margin-top: 32px } which handles absolute/in-flow headers.
 * Fixed headers (.wlre-header--solid) need an explicit top offset so they
 * don't slide behind the admin bar on scroll. WP breakpoints: ≥783px = 32px,
 * <783px = 46px (not our 767px breakpoint). */
.admin-bar .wlre-header--solid {
	top: 32px;
}

/* Sticky wrappers need the same admin-bar offset. */
.admin-bar .wlre-page--no-hero header.wp-block-template-part,
.admin-bar body.single-property header.wp-block-template-part,
.admin-bar body.single.post-type-property header.wp-block-template-part {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .wlre-header--solid {
		top: 46px;
	}

	.admin-bar .wlre-page--no-hero header.wp-block-template-part,
	.admin-bar body.single-property header.wp-block-template-part,
	.admin-bar body.single.post-type-property header.wp-block-template-part {
		top: 46px;
	}
}