/**
 * Single post (News & Events article). See single.php.
 *
 * Brand tokens are redeclared here rather than imported, the same reasoning as
 * news.css: home.css defines them too but is only enqueued on the homepage.
 * fc-news.css is enqueued alongside this file (see functions.php), so the
 * card, pill, chip and bento styles it defines are reused as-is rather than
 * duplicated here.
 */

/* Astra's own .ast-container still boxes this page with its default ~20px
   mobile side padding, stacking underneath this page's own padding. Same
   fix as contact.css / news.css / team.css / leasing-details.css /
   sitemap-map.css. */
.site-content > .ast-container:has(.fc-single-template) {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.fc-single-template {
	--font-display: 'proxima-sera', Georgia, 'Times New Roman', serif;
	--font-accent: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
	--font-body: 'proxima-nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	background: transparent;
	font-family: var(--font-body);
	color: var(--ink);
}

/* Astra puts a 64px top margin on #primary; the head carries its own instead. */
#primary.fc-single-template {
	margin-top: 0;
}

.fc-single-template h1,
.fc-single-template h2,
.fc-single-template h3 {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 1em;
	letter-spacing: -0.01em;
}

/* ============ HEAD ============
   Centred, on the plain mist ground, the way every other interior page on
   the site opens: back link, category pill, title, then the byline row. */
.fc-single-head {
	max-width: 720px;
	margin: 0 auto;
	padding: 56px 20px 0;
	text-align: center;
}

/* Qualified with the element + root class (same fix news.css uses for its
   buttons/pills): Elementor's kit styles every `a` via `.elementor-kit-99 a`,
   which ties or outranks a bare class and left this link in the body font at
   its default weight. */
.fc-single-template a.fc-single-back {
	display: inline-block;
	font-family: var(--font-accent);
	font-size: 13px;
	font-weight: 600;
	color: var(--warm-gray);
	text-decoration: none;
	margin-bottom: 22px;
}

.fc-single-template a.fc-single-back:hover {
	color: var(--green-dark);
}

.fc-single-template .fc-single-head__pill {
	margin-bottom: 18px;
}

.fc-single-head h1 {
	font-size: clamp(50px, 6vw, 70px);
	margin: 0;
	color: var(--ink);
	overflow-wrap: break-word;
}

.fc-single-meta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 24px;
	font-family: var(--font-accent);
	font-size: 13px;
	color: var(--warm-gray);
}

.fc-single-meta__avatar {
	border-radius: 50%;
	width: 28px;
	height: 28px;
}

.fc-single-meta__author {
	color: var(--ink);
	font-weight: 600;
}

.fc-single-meta__dot {
	color: var(--line);
}

/* ============ COVER ============ */
.fc-single-cover {
	max-width: 1100px;
	margin: 40px auto 0;
	padding: 0 20px;
}

.fc-single-cover__img {
	display: block;
	width: 100%;
	max-height: 520px;
	object-fit: cover;
	border-radius: 16px;
}

.fc-single-body {
	padding-top: 50px;
	padding-bottom: 20px;
}

/* ============ LAYOUT (content + on-page nav) ============ */
.fc-single-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 220px;
	gap: 64px;
	align-items: start;
}

.fc-single-toc {
	position: sticky;
	top: 32px;
}

.fc-single-toc.is-empty {
	display: none;
}

.fc-single-layout--no-toc {
	grid-template-columns: minmax(0, 1fr);
}

.fc-single-layout--no-toc .fc-single-content {
	max-width: 720px;
}

.fc-single-toc__label {
	display: block;
	font-family: var(--font-accent);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--warm-gray);
	margin-bottom: 14px;
}

.fc-single-toc ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	border-left: 2px solid var(--line);
}

.fc-single-toc li {
	margin: 0;
}

/* Same Elementor-kit tie as the back link above: qualified with the root
   class so this reliably beats `.elementor-kit-99 a` instead of depending on
   stylesheet load order to win a specificity tie. */
.fc-single-template .fc-single-toc a {
	display: block;
	padding: 6px 0 6px 16px;
	margin-left: -2px;
	border-left: 2px solid transparent;
	font-family: var(--font-accent);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--warm-gray);
	text-decoration: none;
	transition: color 150ms ease, border-color 150ms ease;
}

.fc-single-toc .fc-single-toc__sub a {
	padding-left: 28px;
	font-size: 12.5px;
}

.fc-single-template .fc-single-toc a:hover {
	color: var(--ink);
}

.fc-single-toc a.is-active {
	border-color: var(--green);
	color: var(--ink);
	font-weight: 600;
}

/* ============ PROSE ============ */
/* break-word lets a long pasted URL wrap instead of running off a phone. */
.fc-single-content {
	max-width: 700px;
	overflow-wrap: break-word;
	font-size: 17px;
	line-height: 1.75;
	color: var(--ink);
}

.fc-single-content > *:first-child {
	margin-top: 0;
}

.fc-single-content p {
	margin: 0 0 22px;
}

.fc-single-content h2 {
	font-size: clamp(23px, 2.6vw, 29px);
	margin: 48px 0 16px;
	scroll-margin-top: 40px;
}

.fc-single-content h3 {
	font-size: 20px;
	margin: 34px 0 12px;
	scroll-margin-top: 40px;
}

/* Same Elementor-kit tie again: without the root-class qualifier this ties
   `.elementor-kit-99 a` on specificity and the link color becomes a coin
   flip depending on stylesheet order. */
.fc-single-template .fc-single-content a {
	color: var(--green-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.fc-single-template .fc-single-content a:hover {
	color: var(--green);
}

.fc-single-content strong,
.fc-single-content b {
	font-weight: 600;
	color: var(--ink);
}

.fc-single-content ul,
.fc-single-content ol {
	margin: 0 0 22px;
	padding-left: 22px;
}

.fc-single-content li {
	margin-bottom: 8px;
}

.fc-single-content li::marker {
	color: var(--green);
}

.fc-single-content blockquote {
	margin: 32px 0;
	padding: 20px 26px;
	background: var(--green-pale);
	border-left: 4px solid var(--green);
	border-radius: 0 10px 10px 0;
	font-family: var(--font-accent);
	font-style: italic;
	color: var(--green-dark);
}

.fc-single-content blockquote p {
	margin-bottom: 10px;
}

.fc-single-content blockquote p:last-child {
	margin-bottom: 0;
}

.fc-single-content img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 10px;
	margin: 28px 0;
}

.fc-single-content figure {
	margin: 28px 0;
}

.fc-single-content figure img {
	margin: 0;
}

.fc-single-content figcaption {
	font-family: var(--font-accent);
	font-size: 13px;
	color: var(--warm-gray);
	text-align: center;
	margin-top: 10px;
}

.fc-single-content hr {
	border: none;
	border-top: 1px solid var(--line);
	margin: 40px 0;
}

/* ============ TAGS ============ */
.fc-single-foot {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
}

.fc-single-template a.fc-single-tag {
	font-family: var(--font-accent);
	font-size: 12.5px;
	padding: 6px 13px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--line);
	color: var(--warm-gray);
	text-decoration: none;
}

.fc-single-template a.fc-single-tag:hover {
	border-color: var(--green);
	color: var(--green-dark);
}

/* ============ PREV / NEXT ============
   Docs-site pattern: a circled chevron on the side the link travels to, a
   small muted label, then the title (two lines max). Two cards side by side
   on desktop; one joined card with a divider between rows on mobile. Links
   are qualified with the root class so Elementor's `.elementor-kit-99 a`
   colour and weight can't tie with them. */
.fc-single-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin: 44px 0 10px;
}

.fc-single-template .fc-single-nav__item a {
	display: flex;
	align-items: center;
	gap: 16px;
	height: 100%;
	padding: 18px 20px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 12px;
	color: var(--ink);
	text-decoration: none;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.fc-single-template .fc-single-nav__item--next a {
	flex-direction: row-reverse;
	text-align: right;
}

.fc-single-template .fc-single-nav__item a:hover {
	border-color: var(--green);
	box-shadow: 0 8px 22px rgba(31, 36, 25, 0.08);
}

.fc-single-template .fc-single-nav__item a:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 2px;
}

.fc-single-nav__arrow {
	flex: none;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--green-pale);
	color: var(--green-dark);
	transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.fc-single-nav__item a:hover .fc-single-nav__arrow {
	background: var(--green);
	color: #fff;
}

.fc-single-nav__item--prev a:hover .fc-single-nav__arrow {
	transform: translateX(-3px);
}

.fc-single-nav__item--next a:hover .fc-single-nav__arrow {
	transform: translateX(3px);
}

.fc-single-nav__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.fc-single-nav__label {
	font-family: var(--font-accent);
	font-size: 12px;
	font-weight: 500;
	color: rgba(31, 36, 25, 0.55);
}

.fc-single-nav__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 17px;
	line-height: 1.25;
	color: var(--ink);
}

/* ============ RELATED ============ */
.fc-single-related {
	margin: 66px 0 10px;
}

.fc-single-template .fc-single-related h2 {
	font-size: 28px;
	margin: 0 0 26px;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
	/* minmax(0, ...) like the desktop track: a bare 1fr can't shrink below
	   its longest word, so one long URL in a post widened the whole column
	   past the screen. */
	.fc-single-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.fc-single-toc {
		display: none;
	}

	.fc-single-content {
		max-width: 720px;
	}
}

@media (max-width: 720px) {
	/* Stacked on a phone, the index's 46px row gap and the bento's 60px top
	   margin read as dead space. One 12px rhythm from the last related card
	   through both CTAs. Scoped here so the News & Events index keeps its
	   own spacing. */
	.fc-single-related {
		margin-bottom: 0;
	}

	.fc-single-related .fc-news-grid {
		row-gap: 12px;
	}

	/* news.css's card margin reset is scoped to .fc-news-template, so here
	   Astra's article margin was stacking on top of the row gap. */
	.fc-single-template .fc-single-related .fc-news-grid > .fc-news-card {
		margin: 0;
	}

	.fc-single-template .fc-news-bento {
		margin-top: 12px;
	}

	.fc-single-template .fc-news-bento__grid {
		gap: 12px;
	}

	.fc-single-head {
		padding: 48px 16px 0;
	}

	/* The shared page header's phone size (assets/page-header.css). At the
	   desktop floor of 50px, single words like "Announcement" were wider
	   than a 320px screen. */
	.fc-single-head h1 {
		font-size: 42px;
	}

	.fc-single-cover {
		margin-top: 28px;
	}

	.fc-single-cover__img {
		border-radius: 10px;
		max-height: 320px;
	}

	.fc-news-wrap.fc-single-body {
		padding: 0 20px;
	}

	/* One card, two full-width rows split by a hairline. Both arrows sit on
	   the left so the titles line up and scan as a list; the chevron's
	   direction is what tells the rows apart. */
	.fc-single-nav {
		grid-template-columns: 1fr;
		gap: 0;
		margin-top: 36px;
		background: #fff;
		border: 1px solid var(--line);
		border-radius: 12px;
		overflow: hidden;
	}

	.fc-single-nav__item:empty {
		display: none;
	}

	.fc-single-nav__item + .fc-single-nav__item:not(:empty) {
		border-top: 1px solid var(--line);
	}

	.fc-single-template .fc-single-nav__item a {
		gap: 14px;
		padding: 16px;
		border: 0;
		border-radius: 0;
	}

	.fc-single-template .fc-single-nav__item--next a {
		flex-direction: row;
		text-align: left;
	}

	.fc-single-template .fc-single-nav__item a:hover {
		box-shadow: none;
		background: var(--green-pale);
	}

	.fc-single-template .fc-single-nav__item a:focus-visible {
		outline-offset: -2px;
	}

	.fc-single-nav__text {
		flex: 1;
	}

	.fc-single-nav__arrow {
		width: 34px;
		height: 34px;
	}

	.fc-single-nav__title {
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fc-single-nav__item a,
	.fc-single-nav__arrow {
		transition: none;
	}
}

/* ============ SCROLL REVEAL ============
   Same recipe as the News & Events index (see news-reveal.js / news.css):
   fade + rise, driven by single-reveal.js. The cover sits above the fold so
   it settles in almost immediately; the related cards stagger by grid
   position the same way the index grid does. */
@media (prefers-reduced-motion: no-preference) {
	.fc-single-template .fc-single-cover,
	.fc-single-template .fc-single-related .fc-news-card {
		opacity: 0;
		transform: translateY(24px);
		transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
		            transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
		            box-shadow 0.18s ease;
		will-change: transform, opacity;
	}

	.fc-single-template .fc-single-cover.is-in,
	.fc-single-template .fc-single-related .fc-news-card.is-in {
		opacity: 1;
		transform: none;
	}

	/* Restated at the .is-in specificity, the same fix news.css uses: plain
	   `transform: none` above would otherwise outrank the card's own :hover
	   lift once revealed. */
	.fc-single-template .fc-single-related .fc-news-card.is-in:hover {
		transform: translateY(-2px);
	}
}