/* =========================================================
   FA Luxury Transport — Header & Footer
   Design tokens
   ========================================================= */

:root {
	--fa-black: #000000;
	--fa-header-bg: rgba(11, 11, 13, 0.9);
	--fa-white: #ffffff;
	--fa-gold: #a17c2b;
	--fa-gray-300: #d1d5dc;
	--fa-gray-400: #99a1af;
	--fa-gray-500: #6a7282;
	--fa-gray-600: #4a5565;
	--fa-border-subtle: rgba(255, 255, 255, 0.05);
	--fa-border: rgba(255, 255, 255, 0.1);

	/* Dark section backgrounds shared by the fleet grid, car-hero carousel,
	   and car detail template — kept alongside the other tokens so every
	   new component reads from one source instead of hardcoding hex. */
	--fa-bg-dark: #0b0b0d;
	--fa-bg-panel: #111114;

	--fa-font-serif: Georgia, "Times New Roman", Times, serif;
	--fa-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--fa-container-max: 1440px;
	--fa-container-pad: 120px;
	--fa-topbar-height: 40px;
	--fa-header-height: 80px;
	--fa-z-header: 400;
	--fa-z-offcanvas: 500;
	--fa-z-fab: 450;

	/* Shared motion vocabulary for the fleet/car components — natural
	   deceleration curves, no bounce. Durations follow the 100/300/500
	   rule: fast for instant feedback, base for state changes, slow for
	   entrances. */
	--fa-ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
	--fa-ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
	--fa-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
	--fa-dur-fast: 150ms;
	--fa-dur-base: 250ms;
	--fa-dur-slow: 450ms;
}

/* Respect the user's motion preference everywhere in one place, rather
   than repeating this block in every component stylesheet. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media (max-width: 1279px) {
	:root { --fa-container-pad: 60px; }
}

@media (max-width: 767px) {
	:root { --fa-container-pad: 24px; --fa-header-height: 68px; }
}

/* =========================================================
   Shared resets (scoped to header/footer components only)
   ========================================================= */

.fa-topbar, .fa-header, .fa-offcanvas, .fa-footer,
.fa-topbar *, .fa-header *, .fa-offcanvas *, .fa-footer * {
	box-sizing: border-box;
}

.fa-nav__menu, .fa-offcanvas__menu, .fa-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fa-topbar__link, .fa-footer__link, .fa-offcanvas__link,
a.fa-logo, a.menu-link {
	text-decoration: none;
	color: inherit;
}

.fa-icon {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
}

/* =========================================================
   Logo wordmark
   ========================================================= */

.fa-logo {
	display: inline-flex;
	font-family: var(--fa-font-serif);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 24px;
	line-height: 1;
	white-space: nowrap;
}

.fa-logo__fa { color: var(--fa-white); }
.fa-logo__luxury { color: var(--fa-gold); }

.fa-logo--lg { font-size: 42px; }

/* Site Identity custom logo (Customizer > Site Identity).
   Astra's dynamic CSS ships `header .custom-logo-link img { width: Npx;
   max-width: Npx; }` from the "Header Logo Width" Customizer setting; that
   selector out-specifies the plain rule below and, with no object-fit,
   forces the image into a square box that distorts its aspect ratio.
   !important reclaims control so height is the only sizing dimension. */
.fa-logo--image { display: inline-flex; align-items: center; line-height: 0; }
.fa-logo--image .custom-logo-link { display: inline-flex; }
.fa-logo--image img {
	display: block;
	height: 40px;
	width: auto !important;
	max-width: none !important;
	object-fit: contain;
}
.fa-logo--image.fa-logo--lg img { height: 100px; }

/* =========================================================
   Topbar (scrolls with the page, sits above the sticky nav)
   ========================================================= */

.fa-topbar {
	background: var(--fa-black);
	border-bottom: 1px solid var(--fa-border-subtle);
}

.fa-topbar__inner {
	max-width: var(--fa-container-max);
	margin: 0 auto;
	height: var(--fa-topbar-height);
	padding: 0 var(--fa-container-pad);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.fa-topbar__contact {
	display: flex;
	align-items: center;
	gap: 24px;
	min-width: 0;
}

.fa-topbar__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--fa-gray-400);
	white-space: nowrap;
}

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

.fa-topbar__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--fa-gray-400);
	white-space: nowrap;
}

@media (max-width: 900px) {
	.fa-topbar__meta { display: none; }
}

@media (max-width: 640px) {
	.fa-topbar { display: none; }
}

/* =========================================================
   Main header / nav — sticky, semi-transparent + blurred
   ========================================================= */

.fa-header {
	position: sticky;
	top: 0;
	z-index: var(--fa-z-header);
	background: var(--fa-header-bg);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--fa-border);
}

.fa-header__inner {
	max-width: var(--fa-container-max);
	margin: 0 auto;
	height: var(--fa-header-height);
	padding: 0 var(--fa-container-pad);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.fa-nav__menu {
	display: flex;
	align-items: center;
	gap: 32px;
}

.fa-nav__menu li { position: relative; }

.fa-nav__menu .menu-item-row {
	display: flex;
	align-items: center;
	gap: 4px;
}

.fa-nav__menu .menu-link {
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	color: var(--fa-gray-300);
	transition: color 0.15s ease;
}

.fa-nav__menu .menu-link:hover,
.fa-nav__menu .menu-link:focus-visible { color: var(--fa-white); }

.fa-nav__menu .dropdown-toggle {
	display: inline-flex;
	align-items: center;
	background: none;
	border: none;
	padding: 0;
	color: var(--fa-gray-300);
	cursor: pointer;
}

.fa-nav__menu .dropdown-toggle .fa-icon { width: 16px; height: 16px; }

/* Last top-level item renders as the gold CTA button */
.fa-nav__menu > li:last-child {
	border: 1px solid var(--fa-gold);
	padding: 12px 24px;
}

.fa-nav__menu > li:last-child .menu-link {
	color: var(--fa-gold);
	font-weight: 600;
}

/* Desktop dropdown */
.fa-nav__menu .sub-menu {
	position: absolute;
	top: calc(100% + 12px);
	left: 0;
	min-width: 220px;
	background: rgba(11, 11, 13, 0.97);
	border: 1px solid var(--fa-border);
	padding: 8px 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.fa-nav__menu .menu-item-has-children:hover > .sub-menu,
.fa-nav__menu .menu-item-has-children.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.fa-nav__menu .sub-menu .menu-link {
	display: block;
	padding: 10px 20px;
	white-space: nowrap;
}

.fa-nav__menu .sub-menu .menu-link:hover { background: rgba(255, 255, 255, 0.04); color: var(--fa-gold); }

.fa-nav__menu .sub-menu .fa-fleet-dropdown__view-all,
.fa-offcanvas__menu .sub-menu .fa-fleet-dropdown__view-all {
	color: var(--fa-gold);
	font-weight: 600;
}

/* Fleet mega dropdown (desktop) — full-width panel spanning the viewport,
   generated from live car_type/car data. `position: fixed` deliberately
   escapes the trigger `<li>`'s narrow width; `top` is corrected live by
   initFleetMegaPosition() in header-footer.js since the header it sits
   below is itself `position: sticky` (its viewport offset changes with
   scroll, so a fixed CSS value can't track it). Selector is deliberately
   more specific than `.fa-nav__menu .sub-menu` so these overrides win
   regardless of declaration order. */
.fa-nav__menu .sub-menu.fa-fleet-dropdown--mega {
	position: fixed;
	top: calc(var(--fa-topbar-height) + var(--fa-header-height));
	left: 0;
	right: 0;
	min-width: 0;
	width: auto;
	max-width: none;
	padding: 0;
	background: rgba(11, 11, 13, 0.98);
	border-left: none;
	border-right: none;
	overflow-y: auto;
	transform: translateY(-8px);
	transition: opacity var(--fa-dur-fast) var(--fa-ease-out-quart),
		transform var(--fa-dur-fast) var(--fa-ease-out-quart),
		visibility var(--fa-dur-fast);
}

.fa-nav__menu .menu-item-has-children:hover > .fa-fleet-dropdown--mega,
.fa-nav__menu .menu-item-has-children.is-open > .fa-fleet-dropdown--mega {
	transform: translateY(0);
}

.fa-fleet-dropdown__inner {
	max-width: var(--fa-container-max);
	margin: 0 auto;
	padding: 24px var(--fa-container-pad) 20px;
}

.fa-fleet-dropdown__top {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 16px;
}

.fa-fleet-dropdown__view-all {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--fa-gold);
	font-weight: 600;
}

.fa-fleet-dropdown__view-all .fa-icon {
	width: 14px;
	height: 14px;
	transition: transform var(--fa-dur-fast) var(--fa-ease-out-quart);
}

.fa-fleet-dropdown__view-all:hover .fa-icon { transform: translateX(3px); }

.fa-fleet-dropdown__cars {
	display: flex;
	gap: 20px;
	margin-bottom: 20px;
}

.fa-fleet-dropdown__car {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	background: var(--fa-bg-panel);
	border: 1px solid var(--fa-border-subtle);
	overflow: hidden;
	transition: border-color var(--fa-dur-fast) var(--fa-ease-out-quart);
}

.fa-fleet-dropdown__car:hover { border-color: var(--fa-gold); }

.fa-fleet-dropdown__car-media {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--fa-bg-dark);
}

.fa-fleet-dropdown__car-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.fa-fleet-dropdown__car-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background: rgba(0, 0, 0, 0.75);
	color: var(--fa-gold);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 4px 10px;
}

.fa-fleet-dropdown__car-body {
	padding: 14px 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.fa-fleet-dropdown__car-title {
	font-family: var(--fa-font-serif);
	font-size: 16px;
	color: var(--fa-white);
	white-space: normal;
}

.fa-fleet-dropdown__car-excerpt {
	font-size: 12px;
	line-height: 1.5;
	color: var(--fa-gray-400);
	white-space: normal;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.fa-fleet-dropdown__car-specs {
	display: flex;
	gap: 14px;
	margin-top: 4px;
	font-size: 12px;
	color: var(--fa-gray-400);
}

.fa-fleet-dropdown__car-specs span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.fa-fleet-dropdown__car-specs .fa-icon { width: 14px; height: 14px; color: var(--fa-gold); }

.fa-fleet-dropdown__types {
	display: flex;
	gap: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--fa-border-subtle);
}

.fa-fleet-dropdown__type {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 16px 20px;
	border: 1px solid var(--fa-border);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--fa-gray-300);
	white-space: nowrap;
	transition: color var(--fa-dur-fast) var(--fa-ease-out-quart),
		border-color var(--fa-dur-fast) var(--fa-ease-out-quart);
}

.fa-fleet-dropdown__type .fa-icon {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	transition: transform var(--fa-dur-fast) var(--fa-ease-out-quart);
}

.fa-fleet-dropdown__type:hover {
	color: var(--fa-gold);
	border-color: var(--fa-gold);
}

.fa-fleet-dropdown__type:hover .fa-icon { transform: translateX(3px); }

@media (max-width: 1279px) {
	.fa-fleet-dropdown__cars { flex-wrap: wrap; }
	.fa-fleet-dropdown__car { flex: 1 1 calc(50% - 10px); }
	.fa-fleet-dropdown__types { flex-wrap: wrap; }
	.fa-fleet-dropdown__type { flex: 1 1 calc(50% - 8px); }
}

.fa-menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: none;
	border: 1px solid var(--fa-border);
	color: var(--fa-white);
	cursor: pointer;
}

.fa-menu-toggle .fa-icon { width: 20px; height: 20px; }

@media (max-width: 1023px) {
	.fa-nav { display: none; }
	.fa-menu-toggle { display: inline-flex; }
}

/* =========================================================
   Off-canvas mobile sidebar
   ========================================================= */

.fa-offcanvas {
	position: fixed;
	inset: 0;
	z-index: var(--fa-z-offcanvas);
	visibility: hidden;
	pointer-events: none;
}

.fa-offcanvas.is-open { visibility: visible; pointer-events: auto; }

.fa-offcanvas__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.fa-offcanvas.is-open .fa-offcanvas__backdrop { opacity: 1; }

.fa-offcanvas__panel {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: min(85vw, 380px);
	background: var(--fa-black);
	border-left: 1px solid var(--fa-border);
	display: flex;
	flex-direction: column;
	padding: 24px;
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform 0.3s ease;
}

.fa-offcanvas.is-open .fa-offcanvas__panel { transform: translateX(0); }

.fa-offcanvas__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 32px;
}

.fa-offcanvas__close {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 1px solid var(--fa-border);
	color: var(--fa-white);
	cursor: pointer;
}

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

.fa-offcanvas__menu {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 32px;
}

.fa-offcanvas__menu .menu-item { display: flex; flex-direction: column; }

.fa-offcanvas__menu > .menu-item {
	border-bottom: 1px solid var(--fa-border-subtle);
}

.fa-offcanvas__menu .menu-item-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.fa-offcanvas__menu .menu-link {
	display: block;
	padding: 14px 0;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	color: var(--fa-gray-300);
	flex: 1;
}

.fa-offcanvas__menu > .menu-item:last-child .menu-link {
	color: var(--fa-gold);
	font-weight: 600;
}

.fa-offcanvas__menu .dropdown-toggle {
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	color: var(--fa-gray-300);
	cursor: pointer;
	transition: transform 0.2s ease;
}

.fa-offcanvas__menu .menu-item-has-children.is-open .dropdown-toggle { transform: rotate(180deg); }

.fa-offcanvas__menu .sub-menu {
	flex-basis: 100%;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.25s ease;
}

.fa-offcanvas__menu .menu-item-has-children.is-open > .sub-menu { max-height: 600px; }

.fa-offcanvas__menu .sub-menu .menu-link { padding: 8px 0 8px 16px; font-size: 14px; }

.fa-offcanvas__contact {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-top: 24px;
	border-top: 1px solid var(--fa-border-subtle);
}

.fa-offcanvas__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--fa-gray-400);
}

.fa-offcanvas__social {
	display: flex;
	gap: 20px;
	margin-top: 4px;
}

.fa-offcanvas__social a {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--fa-gray-500);
	text-decoration: none;
}

body.fa-offcanvas-open { overflow: hidden; }

/* =========================================================
   Footer
   ========================================================= */

.fa-footer {
	background: var(--fa-black);
	border-top: 1px solid var(--fa-border);
	padding: 80px 24px 40px;
}

.fa-footer__inner {
	max-width: 700px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.fa-footer__tagline {
	margin: 24px 0 0;
	max-width: 440px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--fa-gray-500);
}

.fa-footer__menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px 32px;
	margin-top: 40px;
}

.fa-footer__menu .menu-link {
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--fa-gray-400);
}

.fa-footer__menu .menu-link:hover { color: var(--fa-gold); }

/* Footer nav is always flat per design — no dropdowns even if a footer
   menu item happens to have children assigned in Appearance > Menus. */
.fa-footer__menu .dropdown-toggle,
.fa-footer__menu .sub-menu { display: none; }

.fa-footer__contact {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px 40px;
	margin-top: 40px;
}

.fa-footer__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--fa-gray-400);
}

.fa-footer__social {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
	margin-top: 40px;
}

.fa-footer__social a {
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--fa-gray-500);
	text-decoration: none;
}

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

.fa-footer__bottom {
	margin-top: 40px;
	padding-top: 32px;
	width: 100%;
	max-width: 700px;
	border-top: 1px solid var(--fa-border-subtle);
}

.fa-footer__bottom p {
	margin: 0;
	font-size: 14px;
	text-align: center;
	color: var(--fa-gray-600);
}

.fa-footer__bottom p.fa-footer__credit {
	margin-top: 8px;
	font-size: 12px;
}

.fa-footer__credit a {
	color: var(--fa-gray-500);
	text-decoration: none;
}

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

/* =========================================================
   [fa_social_links] shortcode — "Follow Us" icon row, usable
   anywhere independent of the footer's plain-text social links
   ========================================================= */

.fa-social-links {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.fa-social-links__label {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--fa-gray-500);
}

.fa-social-links__icons {
	display: flex;
	gap: 16px;
}

.fa-social-links__icon {
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--fa-border);
	color: var(--fa-gray-300);
	transition: color var(--fa-dur-fast) var(--fa-ease-out-quart),
		border-color var(--fa-dur-fast) var(--fa-ease-out-quart);
}

.fa-social-links__icon .fa-icon { width: 20px; height: 20px; }

.fa-social-links__icon:hover {
	color: var(--fa-gold);
	border-color: var(--fa-gold);
}

/* =========================================================
   Site-wide floating WhatsApp button
   ========================================================= */

.fa-whatsapp-fab {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: var(--fa-z-fab);
	width: 56px;
	height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #25d366;
	color: var(--fa-white);
	border-radius: 50%;
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
	transition: transform var(--fa-dur-base) var(--fa-ease-out-quart),
		box-shadow var(--fa-dur-base) var(--fa-ease-out-quart);
	animation: fa-fab-breathe 3.2s var(--fa-ease-out-quart) infinite;
}

/* A slow, barely-there breathing pulse gives this persistent, easy-to-miss
   button a hint of life without demanding attention; it pauses the moment
   a visitor actually engages with it. */
@keyframes fa-fab-breathe {
	0%, 100% { box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(37, 211, 102, 0.35); }
	50% { box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25), 0 0 0 10px rgba(37, 211, 102, 0); }
}

.fa-whatsapp-fab:hover,
.fa-whatsapp-fab:focus-visible {
	transform: scale(1.08);
	color: var(--fa-white);
	animation-play-state: paused;
}

.fa-whatsapp-fab:active {
	transform: scale(0.96);
}

.fa-whatsapp-fab:focus-visible {
	outline: 2px solid var(--fa-gold);
	outline-offset: 3px;
}

.fa-whatsapp-fab__icon {
	width: 28px;
	height: 28px;
}

@media (max-width: 767px) {
	.fa-whatsapp-fab {
		right: 16px;
		bottom: 16px;
		width: 48px;
		height: 48px;
	}

	.fa-whatsapp-fab__icon {
		width: 24px;
		height: 24px;
	}
}