/**
 * Header enhancements: sticky behaviour, and the left-hand tagline.
 *
 * --- Tagline ---
 *
 * "NOW LEASING | MODERN COMFORT, TIMELESS CHARM". The tagline half is desktop
 * only; below 1025px just the status remains, so the status, centre logo and
 * buttons still fit on one line.
 *
 * --- Sticky ---
 *
 * Desktop only (>=1025px). Under that the header keeps its original static
 * behaviour, because the mobile layout restyles the logo inline and moves the
 * buttons into the full-screen menu.
 *
 * One mechanism drives both page types: .site_header is sticky, and the top
 * offset decides whether the promo bar rides along.
 *   - interior pages: top = -(promo height), so the promo scrolls out of view
 *     and the dark nav lands pinned at 0.
 *   - homepage: top = 0, so the promo bar stays pinned with the nav.
 *
 * --promoH is measured and written by assets/js/custom.js so the offset stays
 * correct when the promo text wraps to a second line.
 */

/*
 * .header__left span is styled orange and heavy for the "NOW LEASING" status,
 * so the tagline span has to opt back out of it.
 */
.header__left .header__tagline {
	color: inherit;
	font-weight: inherit;
	/* Flex items, so the whitespace around the pipe collapses — restore it. */
	margin-left: 0.35em;
}

/* Desktop-only, per design: the tagline is dropped on tablet and phone. */
@media (max-width: 1024px) {
	.header__tagline {
		display: none;
	}
}

/*
 * Seam guard.
 *
 * Sections paint their own backgrounds, so the white <body> canvas shows only
 * where two boxes meet. On hi-DPI screens sub-pixel rounding of the header's
 * height can leave a fraction of a pixel there, which renders as a white
 * hairline under the nav — most obvious on Contact, where the hero below is a
 * flat rust colour.
 *
 * A bottom border in the header's own colour extends its painted box over that
 * fraction. Chosen over a negative margin on the next section because it needs
 * no stacking-order changes and works on every template.
 */
.site_header {
	border-bottom: 1px solid var(--clrDark1);
}

/*
 * Mobile wordmark. Hidden by default; shown only at the width where the
 * homepage hides the centre badge (custom.css, max-width 767px), so the two
 * are never on screen together. Sizing already lives in custom.css (119px)
 * and custom-v2.css (95px at <=480px).
 */
.header__logo--mobile {
	display: none;
}

@media (max-width: 991px) {
	.home .header__center .header__logo--mobile {
		display: block;
	}
}

@media (min-width: 1025px) {

	.site_header {
		position: -webkit-sticky;
		position: sticky;
		top: calc(-1 * var(--promoH, 58px));
		z-index: 100;
	}

	/* The full-screen menu has to clear the pinned header. */
	.screen_menu {
		z-index: 200;
	}

	/* --- Homepage ------------------------------------------------------- */

	.home .site_header {
		top: 0;
	}

	/*
	 * Load state: no promo bar, no centre badge — the hero carries the big
	 * HEWER logo, so the badge would double up on it.
	 *
	 * The badge is hidden with visibility rather than display so .header__center
	 * keeps its 238px width and the right-hand buttons don't shift.
	 */
	/*
	 * The promo bar slides in over the top of the page instead of growing in
	 * the flow. Growing it pushed the whole page down 58px at the 50px scroll
	 * trigger (and back up when scrolling to the top), which read as a glitch.
	 * Here the bar is absolutely positioned and the nav slides down by the
	 * same distance with the same timing, so the header's layout height never
	 * changes and nothing below it moves.
	 */
	.home .promo_banner {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		transition: transform 300ms ease, opacity 300ms ease;
	}

	.home .header {
		transition: transform 300ms ease;
	}

	.home .header__logo {
		transition: opacity 300ms ease, visibility 300ms ease;
	}

	/*
	 * Scoped to :not(.is-scrolled) rather than paired with an .is-scrolled
	 * override, so the scrolled state is simply the theme's own styling with
	 * nothing layered on top of it.
	 */
	.home:not(.is-scrolled) .promo_banner {
		transform: translateY(-100%);
		opacity: 0;
	}

	.home.is-scrolled .header {
		transform: translateY(var(--promoH, 58px));
	}

	.home:not(.is-scrolled) .header__logo {
		opacity: 0;
		visibility: hidden;
	}
}

@media (prefers-reduced-motion: reduce) {
	.home .promo_banner,
	.home .header,
	.home .header__logo {
		transition: none;
	}
}