/* =========================================================
   FA Luxury Transport — Blog (home.php, category.php, search.php,
   single-post.php)
   Reuses color/font/container tokens from header-footer.css
   ========================================================= */

.fa-blog,
.fa-blog * {
	box-sizing: border-box;
}

/* These four templates own the whole page (like single-car.php/404.php),
   so neutralize Astra's default wrapper the same way car-single.css does —
   .blog is the is_home() body class, .search the is_search() class,
   .category the is_category() class, .single-post the is_singular('post')
   class (all confirmed against WordPress core's body_class()). */
.blog .ast-container,
.search .ast-container,
.category .ast-container,
.single-post .ast-container {
	padding: 0;
	max-width: none;
	display: block;
}

/* Astra's inline CSS re-pads .ast-container at <=544px through
   `.ast-separate-container #content .ast-container` (an ID selector), which
   out-ranks the reset above — that left an ~8px inset on both sides of the
   whole page on phones, so the hero and the dark article band stopped short
   of the screen edges. Same reset, ID-level specificity. */
.ast-separate-container.blog #content .ast-container,
.ast-separate-container.search #content .ast-container,
.ast-separate-container.category #content .ast-container,
.ast-separate-container.single-post #content .ast-container {
	padding: 0;
}

.fa-blog {
	width: 100%;
}

/* -----------------------------------------------------------
   Shared: static hero (index / category / search) — title + description
   + search form, no image. Distinct from the single-post editorial hero
   below, which is image-led.
   ----------------------------------------------------------- */

.fa-blog-hero {
	background: var(--fa-bg-dark);
	padding: 100px 0 64px;
	text-align: center;
}

.fa-blog-hero__inner {
	max-width: 760px;
	margin: 0 auto;
	padding: 0 var(--fa-container-pad);
}

.fa-blog-hero__eyebrow {
	margin: 0 0 16px;
	color: var(--fa-gold);
	font-family: var(--fa-font-sans);
	font-size: 13px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.3em;
}

.fa-blog-hero__title {
	margin: 0;
	color: var(--fa-white);
	font-family: var(--fa-font-serif);
	font-size: 48px;
	font-weight: 300;
	line-height: 1.25;
	text-wrap: balance;
}

.fa-blog-hero__desc {
	margin: 16px 0 0;
	color: var(--fa-gray-300);
	font-family: var(--fa-font-sans);
	font-weight: 300;
	font-size: 17px;
	line-height: 1.6;
}

.fa-blog-hero .fa-blog-search {
	margin-top: 40px;
	text-align: left;
}

/* -----------------------------------------------------------
   Search form
   ----------------------------------------------------------- */

/* Input and button side by side at every width down to a 360px phone —
   not stacked. The field is the only flexible member (min-width: 0 is
   required on a flex item for it to ever shrink below its content's
   natural size, which a 44px-left-padded input with a placeholder
   otherwise refuses to do); the button stays a fixed, un-shrinking size
   and drops to icon-only at the narrowest widths (see Responsive) rather
   than the row wrapping to a second line. */
.fa-blog-search__row {
	display: flex;
	align-items: stretch;
	gap: 10px;
}

.fa-blog-search__label {
	/* Visually hidden but announced — the input's own placeholder carries
	   enough visible context in this compact layout. */
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.fa-blog-search__field {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

.fa-blog-search__icon {
	position: absolute;
	top: 50%;
	left: 16px;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	color: var(--fa-gray-500);
	pointer-events: none;
}

/* Astra's own core stylesheet carries a selector list targeting form
   fields — `input[type="email"], ..., input[type="search"], ..., select,
   textarea { color: ...; background: ... }` (assets/css/minified/main.min.css)
   — and each selector in that list is specificity-checked independently
   against the element it actually matches. `input[type="search"]` has
   specificity (0,0,1,1), one column higher than a single .fa-blog-search__input
   class rule (0,0,1,0) — which is why that field kept rendering white
   until the .fa-blog-search prefix below (2 classes = (0,0,2,0)) was
   added. Separately: input[type="search"] carries native OS/browser
   chrome (WebKit's search-field decoration in particular) that partially
   ignores background-color unless appearance is reset first —
   color-scheme: dark tells the browser to paint whatever native bits DO
   remain (autofill, spellcheck, selection) in dark-appropriate colors
   instead of assuming a light page. */
.fa-blog-search__input {
	color-scheme: dark;
}

.fa-blog-search .fa-blog-search__input {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	/* height/line-height explicit, not left to inherit: a UAG (Ultimate
	   Addons for Gutenberg) inline stylesheet sets a fixed `height: 40px`
	   plus `line-height: 24px` on bare input/select selectors sitewide,
	   which — left undeclared here — clipped this field's own text
	   against its box. Confirmed live: the select using the exact same
	   padding was rendering its "All Categories" text cut off mid-glyph
	   until height/line-height were pinned explicitly, same fix applied
	   to both fields below. */
	height: auto;
	line-height: 1.4;
	padding: 14px 16px 14px 44px;
	background: var(--fa-bg-panel);
	border: 1px solid var(--fa-border);
	border-radius: 0;
	color: var(--fa-white);
	font-family: var(--fa-font-sans);
	font-size: 15px;
}

.fa-blog-search__input::placeholder {
	color: var(--fa-gray-500);
}

/* WebKit still draws its own magnifier/clear glyphs inside a
   type="search" field even with appearance:none on the field itself;
   without this they'd show as light-on-light next to our own icon. */
.fa-blog-search__input::-webkit-search-decoration,
.fa-blog-search__input::-webkit-search-cancel-button,
.fa-blog-search__input::-webkit-search-results-button,
.fa-blog-search__input::-webkit-search-results-decoration {
	display: none;
}

/* Astra's core CSS also carries `input[type="search"]:focus,
   ...,select:focus { background-color: #fff; }` (specificity 0,0,2,1 —
   element + attribute/pseudo-class + pseudo-class), which outranks a
   single-class :focus-visible rule (0,0,2,0) the same way the unfocused
   background rule above did. Re-declaring background/color at :focus
   (2-class prefix = 0,0,3,0) is required so the field doesn't flash back
   to white the moment it's clicked into, on top of the separate
   :focus-visible rule for the gold keyboard-focus outline. */
.fa-blog-search .fa-blog-search__input:focus {
	background: var(--fa-bg-panel);
	color: var(--fa-white);
}

.fa-blog-search__input:focus-visible {
	outline: 2px solid var(--fa-gold);
	outline-offset: -1px;
}

/* Fixed-size, non-shrinking button so .fa-blog-search__field (flex:1 1
   auto; min-width:0) is the only thing that ever gives up space — see
   Responsive for the icon-only collapse at the narrowest widths. */
.fa-blog-search__submit {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0 28px;
	background: var(--fa-gold);
	border: none;
	color: var(--fa-black);
	font-family: var(--fa-font-sans);
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	cursor: pointer;
	transition: background var(--fa-dur-base) var(--fa-ease-out-quart);
}

.fa-blog-search__submit:hover {
	background: #8f6c24;
}

.fa-blog-search__submit:focus-visible {
	outline: 2px solid var(--fa-gold);
	outline-offset: 2px;
}

.fa-blog-search__submit-icon {
	/* Hidden by default — visible only at the icon-only breakpoint (see
	   Responsive) so the button never shows both the glyph and the label
	   redundantly at normal widths. */
	display: none;
	width: 18px;
	height: 18px;
}

/* Live results dropdown — same geometry as .fa-booking-form__suggestions
   (the site's existing live-lookup pattern). */
.fa-blog-search__results {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 40;
	background: var(--fa-bg-panel);
	border: 1px solid var(--fa-border);
	max-height: 360px;
	overflow-y: auto;
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
	text-align: left;
}

.fa-blog-search__result {
	display: flex;
	gap: 12px;
	width: 100%;
	padding: 12px 14px;
	background: none;
	border: none;
	border-bottom: 1px solid var(--fa-border-subtle);
	color: var(--fa-white);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	font-family: var(--fa-font-sans);
}

.fa-blog-search__result:last-child {
	border-bottom: none;
}

.fa-blog-search__result:hover,
.fa-blog-search__result.is-active {
	background: rgba(161, 124, 43, 0.12);
}

.fa-blog-search__result-thumb {
	flex: 0 0 56px;
	width: 56px;
	height: 40px;
	object-fit: cover;
	background: var(--fa-bg-dark);
}

.fa-blog-search__result-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	overflow: hidden;
}

.fa-blog-search__result-category {
	color: var(--fa-gold);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.fa-blog-search__result-title {
	color: var(--fa-white);
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.fa-blog-search__result-excerpt {
	color: var(--fa-gray-500);
	font-size: 12px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.fa-blog-search__more,
.fa-blog-search__empty,
.fa-blog-search__loading {
	padding: 14px;
	color: var(--fa-gray-500);
	font-family: var(--fa-font-sans);
	font-size: 13px;
}

.fa-blog-search__more {
	display: block;
	color: var(--fa-gold);
	text-decoration: none;
	border-top: 1px solid var(--fa-border-subtle);
}

.fa-blog-search__more:hover {
	background: rgba(161, 124, 43, 0.12);
}

/* -----------------------------------------------------------
   Grid + card (index / category / search / related)
   ----------------------------------------------------------- */

.fa-blog-content {
	background: var(--fa-bg-dark);
	padding: 64px 0 100px;
}

.fa-blog-content__inner {
	max-width: var(--fa-container-max);
	margin: 0 auto;
	padding: 0 var(--fa-container-pad);
}

.fa-blog-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-bottom: 48px;
}

.fa-blog-filters__tab {
	display: inline-block;
	padding: 12px 24px;
	background: none;
	border: 1px solid rgba(255, 255, 255, 0.15);
	color: var(--fa-gray-300);
	font-family: var(--fa-font-sans);
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	text-decoration: none;
	transition: border-color var(--fa-dur-base) var(--fa-ease-out-quart),
		color var(--fa-dur-base) var(--fa-ease-out-quart);
}

.fa-blog-filters__tab:hover {
	border-color: var(--fa-gold);
	color: var(--fa-white);
}

.fa-blog-filters__tab:focus-visible {
	outline: 2px solid var(--fa-gold);
	outline-offset: 2px;
}

.fa-blog-filters__tab.is-active {
	background: var(--fa-gold);
	border-color: var(--fa-gold);
	color: var(--fa-black);
}

.fa-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
}

.fa-blog-grid--related {
	margin-top: 32px;
}

.fa-blog-card {
	display: flex;
	flex-direction: column;
	min-width: 0; /* grid blowout guard, matching .fa-blog-single__main */
	background: var(--fa-bg-panel);
	border: 1px solid var(--fa-border);
	transition: border-color var(--fa-dur-base) var(--fa-ease-out-quart),
		transform var(--fa-dur-base) var(--fa-ease-out-quart),
		box-shadow var(--fa-dur-base) var(--fa-ease-out-quart);
}

.fa-blog-card:hover {
	border-color: rgba(161, 124, 43, 0.4);
	transform: translateY(-6px);
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
}

.fa-blog-card__media-link {
	display: block;
}

.fa-blog-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--fa-bg-dark);
}

/* A post without a featured image gets a deliberate placeholder — a flat
   black rectangle reads as a broken image, not as restraint. */
.fa-blog-card__media--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		radial-gradient(circle at 30% 20%, rgba(161, 124, 43, 0.16), transparent 60%),
		var(--fa-bg-panel);
}

.fa-blog-card__monogram {
	color: rgba(161, 124, 43, 0.35);
	font-family: var(--fa-font-serif);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.5em;
	text-indent: 0.5em; /* re-centers the glyphs against their own trailing letter-spacing */
}

.fa-blog-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--fa-dur-slow) var(--fa-ease-out-quart);
}

.fa-blog-card:hover .fa-blog-card__image {
	transform: scale(1.06);
}

.fa-blog-card__badge {
	position: absolute;
	top: 16px;
	left: 16px;
	padding: 4px 12px;
	background: rgba(0, 0, 0, 0.7);
	border: 1px solid rgba(161, 124, 43, 0.3);
	color: var(--fa-gold);
	font-family: var(--fa-font-sans);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.fa-blog-card__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	padding: 28px;
}

.fa-blog-card__title {
	margin: 0 0 12px;
	font-family: var(--fa-font-serif);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.3;
	text-wrap: balance;
}

.fa-blog-card__title a {
	color: var(--fa-white);
	text-decoration: none;
}

.fa-blog-card__title a:hover {
	color: var(--fa-gold);
}

.fa-blog-card__title a:focus-visible {
	outline: 2px solid var(--fa-gold);
	outline-offset: 2px;
}

.fa-blog-card__excerpt {
	margin: 0 0 auto;
	padding-bottom: 20px;
	color: var(--fa-gray-400);
	font-family: var(--fa-font-sans);
	font-size: 14px;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.fa-blog-card__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 20px;
	color: var(--fa-gold);
	font-family: var(--fa-font-sans);
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-decoration: none;
}

.fa-blog-card__link:hover {
	color: var(--fa-white);
}

.fa-blog-card__link:focus-visible {
	outline: 2px solid var(--fa-gold);
	outline-offset: 2px;
}

.fa-blog-card__link-icon {
	width: 14px;
	height: 14px;
	transition: transform var(--fa-dur-base) var(--fa-ease-out-quart);
}

.fa-blog-card__link:hover .fa-blog-card__link-icon {
	transform: translateX(3px);
}

/* Entrance stagger — fires on load (staggered by --i), NOT gated behind
   scroll/IntersectionObserver visibility. .fa-fleet__card (fleet.css) uses
   the scroll-gated version of this pattern — opacity:0 until an
   IntersectionObserver adds .is-visible — which silently ships blank for
   any card the visitor's viewport never scrolls to: a fast scroller, a
   short viewport, a prerendered/headless render, or simply a card far
   enough down the Related Topics grid on a tall page all leave it at
   opacity:0 forever. Confirmed live: Related Topics rendered as an empty
   gap in a full-page capture below the fold for exactly this reason.
   Firing the animation immediately (bounded finish time: --fa-dur-slow +
   a handful of 60ms steps, well under a second) keeps every card visible
   by default and treats the fade+rise as pure enhancement, per this
   project's own design rules on reveal animations. */
@keyframes fa-blog-card-in {
	from { opacity: 0; transform: translateY(24px); }
	to { opacity: 1; transform: translateY(0); }
}

.fa-blog-grid.is-enhanced .fa-blog-card {
	animation: fa-blog-card-in var(--fa-dur-slow) var(--fa-ease-out-quart) both;
	animation-delay: calc(var(--i, 0) * 60ms);
}

/* -----------------------------------------------------------
   Pagination
   ----------------------------------------------------------- */

.fa-blog-pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 64px;
}

.fa-blog-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--fa-border);
	color: var(--fa-gray-300);
	font-family: var(--fa-font-sans);
	font-size: 14px;
	text-decoration: none;
	transition: border-color var(--fa-dur-base) var(--fa-ease-out-quart),
		color var(--fa-dur-base) var(--fa-ease-out-quart);
}

.fa-blog-pagination .page-numbers.current {
	background: var(--fa-gold);
	border-color: var(--fa-gold);
	color: var(--fa-black);
}

.fa-blog-pagination a.page-numbers:hover {
	border-color: var(--fa-gold);
	color: var(--fa-gold);
}

.fa-blog-pagination a.page-numbers:focus-visible {
	outline: 2px solid var(--fa-gold);
	outline-offset: 2px;
}

.fa-blog-pagination .fa-icon {
	width: 16px;
	height: 16px;
}

/* -----------------------------------------------------------
   Empty state (search / index with no posts)
   ----------------------------------------------------------- */

.fa-blog-empty {
	max-width: 560px;
	margin: 0 auto;
	padding: 48px 0;
	text-align: center;
}

.fa-blog-empty__text {
	margin: 0 0 24px;
	color: var(--fa-gray-300);
	font-family: var(--fa-font-sans);
	font-size: 16px;
}

.fa-blog-empty__categories {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-bottom: 32px;
}

.fa-blog-empty__category {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border: 1px solid var(--fa-border);
	color: var(--fa-gray-300);
	font-family: var(--fa-font-sans);
	font-size: 13px;
	text-decoration: none;
}

.fa-blog-empty__category:hover {
	border-color: var(--fa-gold);
	color: var(--fa-gold);
}

.fa-blog-empty__category .fa-icon {
	width: 14px;
	height: 14px;
}

.fa-blog-empty__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 28px;
	background: var(--fa-gold);
	color: var(--fa-black);
	font-family: var(--fa-font-sans);
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	text-decoration: none;
	transition: background var(--fa-dur-base) var(--fa-ease-out-quart);
}

.fa-blog-empty__btn:hover {
	background: #8f6c24;
}

.fa-blog-empty__btn:focus-visible {
	outline: 2px solid var(--fa-gold);
	outline-offset: 2px;
}

/* -----------------------------------------------------------
   Single post — editorial hero
   ----------------------------------------------------------- */

.fa-blog-single__hero {
	position: relative;
	min-height: 480px;
	display: flex;
	align-items: flex-end;
	background: var(--fa-bg-dark);
	overflow: hidden;
}

/* A post with no featured image gets a deliberate dark/gold treatment
   here too (see .fa-blog-card__media--placeholder for the card-scale
   version of the same fix) — a flat black band the full height of the
   hero read as a broken image, not as restraint. */
.fa-blog-single__hero--placeholder {
	min-height: 360px;
	background:
		radial-gradient(circle at 20% 15%, rgba(161, 124, 43, 0.14), transparent 55%),
		var(--fa-bg-panel);
}

.fa-blog-single__hero-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.fa-blog-single__hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, #0b0b0d 0%, rgba(11, 11, 13, 0.85) 45%, rgba(11, 11, 13, 0.35) 100%);
}

.fa-blog-single__hero-inner {
	position: relative;
	z-index: 1;
	max-width: var(--fa-container-max);
	margin: 0 auto;
	width: 100%;
	padding: 48px var(--fa-container-pad) 56px;
}

.fa-blog-single__back {
	/* flex (not inline-flex) — this and .fa-blog-single__eyebrow are two
	   separate <a> elements; inline-level boxes sit on the same line by
	   default, which is what was crowding "Back to Blog" against the
	   category label instead of stacking them. */
	display: flex;
	width: fit-content;
	align-items: center;
	gap: 8px;
	margin-bottom: 24px;
	color: var(--fa-gray-300);
	font-family: var(--fa-font-sans);
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	text-decoration: none;
}

.fa-blog-single__back:hover {
	color: var(--fa-gold);
}

.fa-blog-single__back:focus-visible {
	outline: 2px solid var(--fa-gold);
	outline-offset: 2px;
}

.fa-blog-single__back .fa-icon {
	width: 16px;
	height: 16px;
	transition: transform var(--fa-dur-base) var(--fa-ease-out-quart);
}

.fa-blog-single__back:hover .fa-icon {
	transform: translateX(-3px);
}

.fa-blog-single__eyebrow {
	display: block;
	width: fit-content;
	margin: 0 0 16px;
	color: var(--fa-gold);
	font-family: var(--fa-font-sans);
	font-size: 13px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	text-decoration: none;
}

a.fa-blog-single__eyebrow:hover {
	color: var(--fa-white);
}

.fa-blog-single__title {
	margin: 0;
	max-width: 900px;
	color: var(--fa-white);
	font-family: var(--fa-font-serif);
	font-size: 52px;
	font-weight: 300;
	line-height: 1.2;
	text-wrap: balance;
}

/* -----------------------------------------------------------
   Single post — article
   ----------------------------------------------------------- */

.fa-blog-single__body {
	background: var(--fa-bg-dark);
	padding: 64px 0 100px;
}

/* Article + sidebar, side by side rather than everything stacked in one
   column. The grid track is wider than the article's own reading measure
   (see .fa-blog-single__main below) so the sidebar gets a real dedicated
   column instead of squeezing the article to make room.
   max-width is the shared --fa-container-max, same as the hero and the
   related/prev-next bands, so the article's left edge lines up with the
   title above it. It was 1160px on a border-box that ALSO carries the
   120px side padding, leaving 920px of content: minus the 320px sidebar
   and 64px gap the article was squeezed to 536px and sat ~130px in from
   the hero's left edge. */
.fa-blog-single__bodyinner {
	max-width: var(--fa-container-max);
	margin: 0 auto;
	padding: 0 var(--fa-container-pad);
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 24px 64px;
	align-items: start;
}

.fa-blog-single__main {
	/* width: 100% is required, not decorative — a grid item with
	   max-width set but no explicit width does NOT reliably stretch to
	   fill its track by default in every browser (confirmed live: this
	   item was rendering at its content's preferred width — 406px,
	   wider than its own 281px track at 360px viewport — until width:
	   100% was added; min-width:0 alone does not fix this, it only
	   allows shrinking, it doesn't force filling). */
	width: 100%;
	min-width: 0; /* grid blowout guard: without this a long unbroken word/URL can force the track wider than its 1fr share */
	max-width: 760px;
}

.fa-blog-single__aside {
	min-width: 0;
}

.fa-blog-single__aside-sticky {
	position: sticky;
	/* clears the site's own position:sticky header (header-footer.css),
	   whose height is the same --fa-header-height token used there — this
	   tracks that value automatically if it's ever changed, rather than
	   duplicating a hardcoded number that could drift out of sync. */
	top: calc(var(--fa-header-height) + 32px);
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* Shared surface for every sidebar block (Key Takeaways, the booking CTA,
   Share) — one visual system instead of three one-off panels. */
.fa-blog-aside-card {
	padding: 28px;
	background: var(--fa-bg-panel);
	border: 1px solid var(--fa-border);
}

.fa-blog-single__takeaways-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	color: var(--fa-gold);
	font-family: var(--fa-font-sans);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.fa-blog-single__takeaways-title .fa-icon {
	width: 18px;
	height: 18px;
}

.fa-blog-single__takeaways-body ul {
	margin: 0;
	padding-left: 20px;
	color: var(--fa-gray-300);
	font-family: var(--fa-font-sans);
	font-size: 14px;
	line-height: 1.7;
}

.fa-blog-single__takeaways-body li + li {
	margin-top: 8px;
}

/* -----------------------------------------------------------
   Sidebar booking CTA card
   ----------------------------------------------------------- */

.fa-blog-sidebar-cta {
	border-color: rgba(161, 124, 43, 0.3); /* gold-tinted border — this card is the primary conversion point, worth a quieter visual lift over the plain-border cards beside it */
}

.fa-blog-sidebar-cta__title {
	margin: 0;
	color: var(--fa-white);
	font-family: var(--fa-font-serif);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.3;
}

.fa-blog-sidebar-cta__subtitle {
	margin: 8px 0 0;
	color: var(--fa-gray-400);
	font-family: var(--fa-font-sans);
	font-size: 13px;
	line-height: 1.6;
}

.fa-blog-sidebar-cta__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 20px;
}

.fa-blog-sidebar-cta .fa-blog-single__btn {
	width: 100%;
	padding: 13px 20px;
	font-size: 12px;
}

.fa-blog-single__content {
	color: var(--fa-gray-300);
	font-family: var(--fa-font-sans);
	font-size: 18px;
	font-weight: 300;
	line-height: 1.75;
}

.fa-blog-single__content > * + * {
	margin-top: 24px;
}

.fa-blog-single__content h2 {
	margin-top: 56px;
	color: var(--fa-white);
	font-family: var(--fa-font-serif);
	font-size: 30px;
	font-weight: 500;
	line-height: 1.3;
	scroll-margin-top: 100px;
}

.fa-blog-single__content h3 {
	margin-top: 40px;
	color: var(--fa-white);
	font-family: var(--fa-font-serif);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.3;
	scroll-margin-top: 100px;
}

/* :not(.fa-blog-single__btn) matters: a shortcode embedded in the article
   body (do_shortcode() still runs on the_content) can render one of the
   site's own button-styled anchors. Without this exclusion, this rule's
   extra element-selector (.class + a = higher specificity than a bare
   .fa-blog-single__btn--solid class rule) would win regardless of source
   order and repaint a solid gold button's text gold-on-gold — invisible.
   That exact bug shipped once, in the inline CTA this page used to inject
   mid-article; keeping the guard here even though that injection is gone. */
.fa-blog-single__content a:not(.fa-blog-single__btn) {
	color: var(--fa-gold);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.fa-blog-single__content a:not(.fa-blog-single__btn):hover {
	color: var(--fa-white);
}

.fa-blog-single__content strong {
	color: var(--fa-white);
	font-weight: 600;
}

.fa-blog-single__content ul,
.fa-blog-single__content ol {
	margin-left: 0; /* cancels Astra's default 3em list margin, which stacked on the 24px padding and pushed every list ~78px in */
	padding-left: 24px;
}

.fa-blog-single__content li + li {
	margin-top: 8px;
}

/* A full bordered panel with a serif quotation glyph, not a colored
   left-stripe — a stripe accent reads as a leftover CMS-editor default,
   not a considered typographic choice on an editorial page like this. */
.fa-blog-single__content blockquote {
	position: relative;
	margin: 0;
	padding: 36px 32px 32px;
	background: var(--fa-bg-panel);
	border: 1px solid var(--fa-border);
	color: var(--fa-gray-300);
	font-family: var(--fa-font-serif);
	font-size: 19px;
	font-style: italic;
	line-height: 1.6;
}

.fa-blog-single__content blockquote::before {
	content: '\201C';
	position: absolute;
	top: 4px;
	left: 28px;
	color: var(--fa-gold);
	font-family: var(--fa-font-serif);
	font-size: 48px;
	font-style: normal;
	line-height: 1;
}

.fa-blog-single__content blockquote p {
	margin: 0;
}

.fa-blog-single__content blockquote p + p {
	margin-top: 12px;
}

.fa-blog-single__content code {
	padding: 2px 6px;
	background: var(--fa-bg-panel);
	border: 1px solid var(--fa-border);
	color: var(--fa-white);
	font-size: 0.9em;
}

.fa-blog-single__content pre {
	padding: 20px 24px;
	background: var(--fa-bg-panel);
	border: 1px solid var(--fa-border);
	overflow-x: auto;
}

.fa-blog-single__content pre code {
	padding: 0;
	background: none;
	border: none;
}

.fa-blog-single__content img {
	max-width: 100%;
	height: auto;
	display: block;
}

.fa-blog-single__content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.fa-blog-single__content th,
.fa-blog-single__content td {
	padding: 10px 14px;
	border: 1px solid var(--fa-border);
	text-align: left;
}

.fa-blog-single__content th {
	color: var(--fa-white);
	background: var(--fa-bg-panel);
}

/* Share card — a sidebar aside-card now, not an end-of-article strip.
   (Fixing a pre-existing bug in passing: these two rules were previously
   named .fa-blog-single__share / .fa-blog-single__share-label, which never
   matched the actual markup — fa_render_blog_share() has always rendered
   .fa-blog-share / .fa-blog-share__label — so this block's spacing/label
   styling was dead CSS from day one.) */
.fa-blog-share {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.fa-blog-share__label {
	width: 100%;
	margin-bottom: 6px;
	color: var(--fa-gray-500);
	font-family: var(--fa-font-sans);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.fa-blog-share__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: var(--fa-bg-dark);
	border: 1px solid var(--fa-border);
	color: var(--fa-gray-300);
	cursor: pointer;
	transition: border-color var(--fa-dur-base) var(--fa-ease-out-quart),
		color var(--fa-dur-base) var(--fa-ease-out-quart);
}

.fa-blog-share__link:hover {
	border-color: var(--fa-gold);
	color: var(--fa-gold);
}

.fa-blog-share__link:focus-visible {
	outline: 2px solid var(--fa-gold);
	outline-offset: 2px;
}

.fa-blog-share__link .fa-icon {
	width: 18px;
	height: 18px;
}

.fa-blog-share__link.is-copied {
	border-color: var(--fa-gold);
	color: var(--fa-gold);
}

/* -----------------------------------------------------------
   Bottom CTA band (end of every post)
   ----------------------------------------------------------- */

.fa-blog-cta {
	background: var(--fa-black);
	border-top: 1px solid var(--fa-border);
	padding: 96px 0;
	text-align: center;
}

.fa-blog-cta__inner {
	max-width: calc(760px + 2 * var(--fa-container-pad)); /* padding sits inside max-width (border-box), so add it to keep a true 760px measure */
	margin: 0 auto;
	padding: 0 var(--fa-container-pad);
}

.fa-blog-cta__eyebrow {
	margin: 0 0 20px;
	color: var(--fa-gold);
	font-family: var(--fa-font-sans);
	font-size: 13px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.3em;
}

.fa-blog-cta__title {
	margin: 0;
	color: var(--fa-white);
	font-family: var(--fa-font-serif);
	font-size: 40px;
	font-weight: 300;
	line-height: 1.2;
	text-wrap: balance;
}

.fa-blog-cta__subtitle {
	margin: 20px 0 0;
	color: var(--fa-gray-400);
	font-family: var(--fa-font-sans);
	font-size: 16px;
	line-height: 1.6;
}

.fa-blog-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin-top: 36px;
}

/* -----------------------------------------------------------
   Related topics
   ----------------------------------------------------------- */

.fa-blog-related {
	background: var(--fa-bg-panel);
	padding: 64px 0;
}

.fa-blog-related__inner {
	max-width: var(--fa-container-max);
	margin: 0 auto;
	padding: 0 var(--fa-container-pad);
}

.fa-blog-related__eyebrow {
	margin: 0 0 32px;
	color: var(--fa-gold);
	font-family: var(--fa-font-sans);
	font-size: 13px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.3em;
}

/* -----------------------------------------------------------
   Prev / Read Next
   ----------------------------------------------------------- */

.fa-blog-prevnext {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	border-top: 1px solid var(--fa-border);
	border-bottom: 1px solid var(--fa-border);
}

.fa-blog-prevnext__link {
	display: flex;
	align-items: center;
	gap: 16px;
	min-width: 0; /* grid blowout guard, matching .fa-blog-single__main */
	padding: 32px var(--fa-container-pad);
	color: var(--fa-white);
	text-decoration: none;
	transition: background var(--fa-dur-base) var(--fa-ease-out-quart);
}

.fa-blog-prevnext__link:hover {
	background: var(--fa-bg-panel);
}

.fa-blog-prevnext__link:focus-visible {
	outline: 2px solid var(--fa-gold);
	outline-offset: -2px;
}

.fa-blog-prevnext__link--prev {
	border-right: 1px solid var(--fa-border);
}

.fa-blog-prevnext__link--next {
	grid-column: 2;
	justify-content: flex-end;
	text-align: right;
}

.fa-blog-prevnext__icon {
	width: 20px;
	height: 20px;
	color: var(--fa-gold);
	flex-shrink: 0;
}

.fa-blog-prevnext__label {
	display: block;
	margin-bottom: 4px;
	color: var(--fa-gray-500);
	font-family: var(--fa-font-sans);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.fa-blog-prevnext__title {
	display: block;
	font-family: var(--fa-font-serif);
	font-size: 17px;
	line-height: 1.4;
}

/* -----------------------------------------------------------
   Booking buttons — shared by the sidebar CTA card
   (fa_render_blog_sidebar_cta(), .fa-blog-sidebar-cta above). There is no
   full-width CTA band on this page anymore: a persistent sticky sidebar
   CTA on desktop, and the same card naturally landing right after the
   article once the grid collapses to one column on mobile (see
   Responsive below), replaced what used to be two separate full-width
   bands repeating the same ask.
   ----------------------------------------------------------- */

.fa-blog-single__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 32px;
	font-family: var(--fa-font-sans);
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	text-decoration: none;
	transition: background var(--fa-dur-base) var(--fa-ease-out-quart),
		border-color var(--fa-dur-base) var(--fa-ease-out-quart),
		color var(--fa-dur-base) var(--fa-ease-out-quart);
}

.fa-blog-single__btn:focus-visible {
	outline: 2px solid var(--fa-gold);
	outline-offset: 2px;
}

.fa-blog-single__btn-icon {
	width: 16px;
	height: 16px;
	transition: transform var(--fa-dur-base) var(--fa-ease-out-quart);
}

.fa-blog-single__btn:hover .fa-blog-single__btn-icon {
	transform: translateX(3px);
}

.fa-blog-single__btn--solid {
	background: var(--fa-gold);
	color: var(--fa-black);
}

.fa-blog-single__btn--solid:hover {
	background: #8f6c24;
}

.fa-blog-single__btn--whatsapp {
	background: #25d366;
	color: var(--fa-white);
}

.fa-blog-single__btn--whatsapp:hover {
	background: #1ebe57;
}

/* -----------------------------------------------------------
   Responsive
   ----------------------------------------------------------- */

@media (max-width: 1279px) {
	.fa-blog-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}

	.fa-blog-single__title {
		font-size: 40px;
	}

	.fa-blog-related {
		padding: 60px 0;
	}

	/* Matches the site's own convention for a 2-column layout collapsing
	   to 1 (car-single.php's gallery+info grid does the same at this
	   breakpoint). The sidebar stops being sticky once it's no longer
	   beside the article it was tracking — mid-column stickiness on a
	   full-width stacked block reads as a bug, not a feature.
	   minmax(0, 1fr), NOT a bare 1fr: a bare 1fr track has an implicit
	   min-width of auto, so a single unbreakable line inside .fa-blog-
	   single__main (a <pre> code sample — white-space: pre never wraps,
	   and its own overflow-x: auto only lets IT scroll, it doesn't shrink
	   the min-content size the grid track sizing algorithm sees) forces
	   the TRACK ITSELF wider than the viewport, not just the item inside
	   it — confirmed live: a 360px page was scrolling ~80px horizontally
	   because of exactly this. minmax(0, 1fr) is the same guard already
	   used on the desktop 2-column template above; missing it on this one
	   override was the actual bug. */
	.fa-blog-single__bodyinner {
		grid-template-columns: minmax(0, 1fr);
		gap: 48px;
	}

	.fa-blog-single__main {
		max-width: 720px;
		margin: 0 auto;
	}

	.fa-blog-single__aside {
		max-width: 480px;
		margin: 0 auto;
		width: 100%;
	}

	.fa-blog-single__aside-sticky {
		position: static;
	}

	/* The stacked sidebar would put this card right beside the bottom CTA
	   band, repeating the same ask twice in a row. */
	.fa-blog-sidebar-cta {
		display: none;
	}

	.fa-blog-cta {
		padding: 72px 0;
	}

	.fa-blog-cta__title {
		font-size: 34px;
	}
}

@media (max-width: 1023px) {
	.fa-blog-hero {
		padding: 72px 0 48px;
	}

	.fa-blog-hero__title {
		font-size: 36px;
	}
}

@media (max-width: 767px) {
	.fa-blog-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.fa-blog-cta {
		padding: 56px 0;
	}

	.fa-blog-cta__title {
		font-size: 28px;
	}

	.fa-blog-cta__actions {
		flex-direction: column;
	}

	.fa-blog-single__hero {
		min-height: 360px;
	}

	.fa-blog-single__title {
		font-size: 30px;
	}

	.fa-blog-single__content {
		font-size: 16px;
	}

	.fa-blog-single__content h2 {
		font-size: 24px;
	}

	.fa-blog-single__aside {
		max-width: none;
	}

	.fa-blog-prevnext {
		grid-template-columns: minmax(0, 1fr);
	}

	.fa-blog-prevnext__link--prev {
		border-right: none;
		border-bottom: 1px solid var(--fa-border);
	}

	.fa-blog-prevnext__link--next {
		grid-column: 1;
		justify-content: flex-start;
		text-align: left;
	}
}

@media (max-width: 640px) {
	.fa-blog-hero__title {
		font-size: 30px;
	}
}

/* Icon-only search button on genuinely small phones (360px reference
   width and below) — the "SEARCH" label plus its padding is the single
   biggest fixed cost in the search row at this width, and dropping it
   gives .fa-blog-search__field (the field that actually matters) real
   breathing room rather than shrinking it to fit a label. The button
   keeps its accessible name via the aria-label already set in markup
   (fa_render_blog_search_form()), so nothing is lost for assistive tech —
   only the visible text is hidden. */
@media (max-width: 400px) {
	.fa-blog-search__submit {
		padding: 0;
		width: 48px;
		flex-basis: 48px;
	}

	.fa-blog-search__submit-icon {
		display: block;
	}

	.fa-blog-search__submit-text {
		display: none;
	}
}