/* ==========================================================================
   SHARED PAGE HEADER

   One implementation of the eyebrow / serif headline / subhead block used at
   the top of every templated page. See inc/page-header.php for the partial
   that renders it and for what this replaced.

   Corrected to /style-guide/ rather than to what the old five copies did:
     - H1 is proxima-sera 70px at weight 300 (every old copy shipped 400 or
       whatever Astra inherited, so the guide's H1 appeared nowhere on the site)
     - the emphasised word is Inter Tight at the guide's 70/66 ratio, expressed
       as 0.94em so it holds at every step of the fluid scale
     - the scale is fluid, replacing a fixed 70px that snapped to 50px at 767px
     - eyebrow tracking is 0.36em rather than a flat 4px, so it stays
       proportional instead of crowding as the type shrinks

   Colors come from the shared palette in style.css :root, which loads on
   every page, so this block renders identically wherever it is used.
   ========================================================================== */

.fc-page-header,
.fclt-listings-header {
	position: relative;
	max-width: 820px;
	margin: 0 auto;
	padding: 84px 60px 44px;
	text-align: center;
}

/* Nested inside a section that already supplies its own padding and ground
   (Leasing Details), so it contributes spacing below itself only. */
.fc-page-header--section {
	max-width: 720px;
	padding: 0 20px;
	margin-bottom: 64px;
}

/* ---------- Eyebrow ---------- */

.fc-page-header__eyebrow,
.fclt-listings-eyebrow {
	display: block;
	font-family: var(--font-body, 'proxima-nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.36em;
	text-transform: uppercase;
	color: var(--fc-green);
	margin: 0 0 20px;
}

/* ---------- Headline ----------
   The class is repeated to raise specificity past Astra's own heading rules
   without reaching for !important — the same trick the old .fclt-listings-h1
   rule used. */

.fc-page-header .fc-page-header__title.fc-page-header__title,
.fclt-listings-header .fclt-listings-h1.fclt-listings-h1 {
	font-family: var(--font-display, 'proxima-sera', Georgia, 'Times New Roman', serif);
	font-weight: 300;
	font-size: clamp(42px, 5.6vw, 70px);
	line-height: 1em;
	letter-spacing: -0.005em;
	color: var(--fc-ink);
	margin: 0 0 20px;
	overflow-wrap: break-word;
}

/* Section heads sit at the guide's H2 step (54px / weight 400) instead. */
.fc-page-header--h2 .fc-page-header__title.fc-page-header__title {
	font-weight: 400;
	font-size: clamp(34px, 4.4vw, 54px);
}

/* The accent word. <em> is matched alongside <b> because the listings pages
   author their headline into post_content and use <em> there; both are
   stripped of their default styling and re-set in the accent face.

   The wrapper class is included in the selector so this outranks template
   stylesheets that style emphasis generically, e.g. leasing-details.css's
   `.fc-leasing h1 b`, which would otherwise win on element count. */
.fc-page-header .fc-page-header__title b,
.fc-page-header .fc-page-header__title em,
.fc-page-header .fc-page-header__title strong,
.fclt-listings-header .fclt-listings-h1 b,
.fclt-listings-header .fclt-listings-h1 em,
.fclt-listings-header .fclt-listings-h1 strong {
	font-family: var(--font-accent, 'Inter Tight', 'Helvetica Neue', Arial, sans-serif);
	font-weight: 400;
	font-style: normal;
	font-size: 0.94em;
	color: var(--fc-green);
}

/* ---------- Subhead ---------- */

.fc-page-header__sub,
.fclt-listings-sub {
	max-width: 600px;
	margin: 0 auto;
	font-family: var(--font-body, 'proxima-nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--fc-warm-gray);
}

/* ---------- Optional meta pill ----------
   For a result count or similar, so the header can answer the page's first
   question before the reader gets to the content. */

.fc-page-header__meta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 28px 0 0;
	padding: 9px 18px;
	border: 1px solid var(--fc-line);
	border-radius: 999px;
	background: #fff;
	font-family: var(--font-accent, 'Inter Tight', 'Helvetica Neue', Arial, sans-serif);
	font-size: 13.5px;
	line-height: 1;
	color: var(--fc-ink);
}

.fc-page-header__dot {
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--fc-green);
	box-shadow: 0 0 0 3px rgba(74, 124, 58, 0.16);
}

/* ---------- Bottom rule ----------
   Drawn wider than the 820px text column so it reads as a page division
   rather than as an underline on the subhead. min() keeps it inside the
   viewport instead of forcing horizontal scroll on small screens. */

.fc-page-header--rule::after,
.fclt-listings-header::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: min(100vw - 40px, 1160px);
	border-bottom: 1px solid var(--fc-line);
}

/* The listings header's own border-bottom lives in the plugin stylesheet's
   history; it is drawn by the ::after above now. Reset in case an older
   cached copy of that file is still being served. */
.fclt-listings-header {
	border-bottom: 0;
}

@media (max-width: 767px) {
	.fc-page-header,
	.fclt-listings-header {
		padding: 52px 20px 34px;
	}

	.fc-page-header--section {
		padding: 0 16px;
		margin-bottom: 42px;
	}

	.fc-page-header__sub,
	.fclt-listings-sub {
		font-size: 15.5px;
	}
}

/* ---------- Image banner ----------
   fc_page_header( array( 'image' => $id ) ). Full width band with the
   headline centered in light type over a dark overlay; the partial leaves out
   the subhead and the bottom rule for this variant. Used by 92 Alpine Drive,
   whose container already runs edge to edge. */

.fc-page-header--banner {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: none;
	min-height: 500px;
	padding: 96px 60px;
	overflow: hidden;
	isolation: isolate;
}

.fc-page-header--banner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(31, 36, 25, 0.62), rgba(31, 36, 25, 0.38));
}

.fc-page-header__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-size: cover;
	background-position: center 40%;
	background-repeat: no-repeat;
}

.fc-page-header__inner {
	max-width: 820px;
}

.fc-page-header--banner .fc-page-header__eyebrow {
	color: rgba(255, 255, 255, 0.92);
}

.fc-page-header--banner .fc-page-header__title.fc-page-header__title {
	font-size: clamp(44px, 6vw, 80px);
	color: var(--fc-white);
	margin-bottom: 0;
}

.fc-page-header--banner .fc-page-header__title b,
.fc-page-header--banner .fc-page-header__title em,
.fc-page-header--banner .fc-page-header__title strong {
	color: var(--fc-green-light);
}

@media (prefers-reduced-motion: no-preference) {
	.fc-page-header--banner .fc-page-header__media {
		animation: fc-page-header-settle 1.8s cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	.fc-page-header--banner .fc-page-header__inner {
		animation: fc-page-header-rise 0.9s 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
	}
}

@keyframes fc-page-header-settle {
	from { transform: scale(1.06); }
	to { transform: scale(1); }
}

@keyframes fc-page-header-rise {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}

@media (max-width: 767px) {
	.fc-page-header--banner {
		min-height: 480px;
		padding: 72px 20px;
	}
}