/* ─────────────────────────────────────────────────────────────────
 *  Falcon Vision — Components
 *
 *  All reusable UI pieces in alphabetical-ish order by section.
 *  Each component is self-contained and namespaced with .fv-{name}.
 * ───────────────────────────────────────────────────────────────── */


/* ╔════════════════════════════════════════════════════════════════╗
 *  EYEBROW
 *  The "─ Falcon Vision Adventures ─" label that prefaces every
 *  major section heading. Two thin rules flanking small-caps text.
 *  ╚════════════════════════════════════════════════════════════════╝ */

.fv-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--fv-space-4);
	margin: 0 0 var(--fv-space-6) 0;
	color: var(--fv-fg-muted);
	font-size: var(--fv-text-2xs);
	font-weight: var(--fv-weight-bold);
	letter-spacing: var(--fv-tracking-extreme);
	text-transform: uppercase;
}

.fv-eyebrow__rule {
	display: inline-block;
	width: 2rem;
	height: 1px;
	background: var(--fv-border-strong);
}

.fv-eyebrow--centered {
	display: flex;
	justify-content: center;
}

/* Variant: accent color */
.fv-eyebrow--accent { color: var(--fv-color-accent-light); }
.fv-eyebrow--gold   { color: var(--fv-color-gold); }


/* ╔════════════════════════════════════════════════════════════════╗
 *  BUTTONS
 *  Sharp-cornered. The brand never rounds CTA buttons.
 *  ╚════════════════════════════════════════════════════════════════╝ */

.fv-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--fv-space-3);
	padding: 0.95rem 1.75rem;
	min-height: 3rem;
	background: var(--fv-color-blue);
	color: var(--fv-color-white);
	font-family: var(--fv-font-heading);
	font-size: var(--fv-text-xs);
	font-weight: var(--fv-weight-bold);
	letter-spacing: var(--fv-tracking-widest);
	text-transform: uppercase;
	text-decoration: none;
	border-radius: var(--fv-radius-none);
	overflow: hidden;
	cursor: pointer;
	transition:
		background-color var(--fv-dur-base) var(--fv-ease-soft),
		color var(--fv-dur-base) var(--fv-ease-soft),
		transform var(--fv-dur-base) var(--fv-ease-out),
		box-shadow var(--fv-dur-base) var(--fv-ease-soft);
}

.fv-btn:hover {
	background: var(--fv-color-blue-dark);
	transform: translateY(-1px);
	box-shadow: var(--fv-glow-blue);
}

.fv-btn:focus-visible {
	outline: 2px solid var(--fv-color-white);
	outline-offset: 3px;
}

.fv-btn:active { transform: translateY(0); }

/* Solid variants */
.fv-btn--solid    { background: var(--fv-color-blue); color: var(--fv-color-white); }
.fv-btn--dark     { background: var(--fv-color-black); color: var(--fv-color-white); border: 1px solid var(--fv-border); }
.fv-btn--dark:hover { background: var(--fv-color-graphite); box-shadow: none; }
.fv-btn--accent   { background: var(--fv-color-accent); color: var(--fv-color-white); }
.fv-btn--accent:hover { background: var(--fv-color-accent-dark); box-shadow: var(--fv-glow-accent); }
.fv-btn--gold     { background: var(--fv-color-gold); color: var(--fv-color-black); }
.fv-btn--gold:hover { background: var(--fv-color-gold-dark); color: var(--fv-color-white); }

/* Outline variant */
.fv-btn--outline {
	background: transparent;
	color: var(--fv-color-white);
	border: 1px solid var(--fv-border-strong);
	box-shadow: none;
}
.fv-btn--outline:hover {
	background: var(--fv-color-white);
	color: var(--fv-color-black);
	transform: translateY(-1px);
	box-shadow: none;
}

/* Ghost — minimal underline button */
.fv-btn--ghost {
	background: transparent;
	color: var(--fv-color-white);
	padding-inline: 0;
	min-height: auto;
	letter-spacing: var(--fv-tracking-wider);
}
.fv-btn--ghost:hover { background: transparent; transform: none; box-shadow: none; color: var(--fv-color-blue-light); }
.fv-btn--ghost::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -3px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0.3);
	transform-origin: left;
	transition: transform var(--fv-dur-base) var(--fv-ease-out);
}
.fv-btn--ghost:hover::after { transform: scaleX(1); }

/* Sizes */
.fv-btn--sm { padding: 0.625rem 1.25rem; min-height: 2.5rem; font-size: var(--fv-text-2xs); }
.fv-btn--lg { padding: 1.25rem 2.5rem; min-height: 3.75rem; font-size: var(--fv-text-sm); }

/* Block layout */
.fv-btn--block { display: flex; width: 100%; }

/* Shimmer sweep */
.fv-btn__shimmer {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
	transform: translateX(-100%);
	pointer-events: none;
}
.fv-btn:hover .fv-btn__shimmer {
	animation: fv-shimmer 1.4s ease-in-out;
}

@keyframes fv-shimmer {
	100% { transform: translateX(100%); }
}

.fv-btn__icon {
	display: inline-flex;
	transition: transform var(--fv-dur-base) var(--fv-ease-out);
}
.fv-btn:hover .fv-btn__icon { transform: translateX(4px); }


/* ╔════════════════════════════════════════════════════════════════╗
 *  HEADER + PRIMARY NAVIGATION
 *  Transparent over the hero, fades to a smoke-glass bar on scroll.
 *  ╚════════════════════════════════════════════════════════════════╝ */

.fv-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--fv-z-header);
	background: transparent;
	transition:
		background-color var(--fv-dur-slow) var(--fv-ease-soft),
		backdrop-filter var(--fv-dur-slow) var(--fv-ease-soft),
		border-color var(--fv-dur-slow) var(--fv-ease-soft),
		padding var(--fv-dur-slow) var(--fv-ease-soft);
	padding-block: var(--fv-space-4);
	border-bottom: 1px solid transparent;
}

.fv-header.is-scrolled {
	background: rgba(0, 0, 0, 0.85);
	backdrop-filter: saturate(140%) blur(14px);
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	border-bottom-color: var(--fv-border);
	padding-block: var(--fv-space-2);
}

.fv-header__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 3.5rem;
	gap: var(--fv-space-4);
}

.fv-header__nav {
	display: none;
}

@media (min-width: 1024px) {
	.fv-header__nav {
		display: flex;
		align-items: center;
		gap: clamp(1.25rem, 2vw, 2.5rem);
	}
}

.fv-header__nav-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding-block: var(--fv-space-2);
	color: var(--fv-color-white);
	font-family: var(--fv-font-heading);
	font-size: var(--fv-text-xs);
	font-weight: var(--fv-weight-medium);
	letter-spacing: var(--fv-tracking-widest);
	text-transform: uppercase;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
	transition: color var(--fv-dur-fast) var(--fv-ease-soft);
}

.fv-header.is-scrolled .fv-header__nav-link {
	text-shadow: none;
	color: var(--fv-color-white);
}

.fv-header__nav-link::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 2px;
	height: 1px;
	background: var(--fv-color-blue-light);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform var(--fv-dur-base) var(--fv-ease-out);
}
.fv-header__nav-link:hover,
.fv-header__nav-link[aria-current="page"] { color: var(--fv-color-white); }
.fv-header__nav-link:hover::after,
.fv-header__nav-link[aria-current="page"]::after { transform: scaleX(1); }

.fv-header__logo {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	z-index: var(--fv-z-raised);
	transition: transform var(--fv-dur-base) var(--fv-ease-out);
}
.fv-header__logo img,
.fv-header__logo svg {
	height: 2.75rem;
	width: auto;
	max-width: 220px;
	object-fit: contain;
}
.fv-header__logo:hover { transform: translate(-50%, -50%) scale(1.03); }

.fv-header__logo-text {
	font-family: var(--fv-font-heading);
	font-weight: var(--fv-weight-bold);
	letter-spacing: var(--fv-tracking-widest);
	text-transform: uppercase;
	color: var(--fv-color-white);
	font-size: var(--fv-text-lg);
}

.fv-header__contact {
	display: none;
	color: var(--fv-color-white);
	font-size: var(--fv-text-xs);
	font-weight: var(--fv-weight-medium);
	letter-spacing: var(--fv-tracking-wider);
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}

@media (min-width: 1280px) {
	.fv-header__contact { display: inline-flex; align-items: center; gap: var(--fv-space-2); }
	.fv-header.is-scrolled .fv-header__contact { text-shadow: none; }
}

/* Mobile drawer toggle */
.fv-header__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	color: var(--fv-color-white);
	z-index: var(--fv-z-raised);
	border: 1px solid transparent;
	transition: border-color var(--fv-dur-fast) var(--fv-ease-soft);
}
.fv-header__toggle:hover { border-color: var(--fv-border-strong); }
.fv-header__toggle:focus-visible { outline: 2px solid var(--fv-color-blue-light); outline-offset: 2px; }

@media (min-width: 1024px) {
	.fv-header__toggle { display: none; }
}


/* ╔════════════════════════════════════════════════════════════════╗
 *  MOBILE DRAWER
 *  Slides in from the right. Uses native dialog semantics.
 *  ╚════════════════════════════════════════════════════════════════╝ */

.fv-drawer {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(420px, 100vw);
	background: var(--fv-color-black);
	border-left: 1px solid var(--fv-border);
	z-index: var(--fv-z-drawer);
	transform: translateX(100%);
	transition: transform var(--fv-dur-slow) var(--fv-ease-out);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}

.fv-drawer[data-state="open"] { transform: translateX(0); }

.fv-drawer__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(4px);
	z-index: calc(var(--fv-z-drawer) - 1);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--fv-dur-base) var(--fv-ease-soft);
}
.fv-drawer__backdrop[data-state="open"] { opacity: 1; pointer-events: auto; }

.fv-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--fv-space-6);
	border-bottom: 1px solid var(--fv-border);
}

.fv-drawer__close {
	width: 2.5rem;
	height: 2.5rem;
	color: var(--fv-color-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.fv-drawer__nav {
	padding: var(--fv-space-8) var(--fv-space-6);
	display: flex;
	flex-direction: column;
	gap: var(--fv-space-6);
}

.fv-drawer__nav a {
	font-family: var(--fv-font-heading);
	font-size: var(--fv-text-xl);
	font-weight: var(--fv-weight-medium);
	letter-spacing: var(--fv-tracking-wider);
	text-transform: uppercase;
	color: var(--fv-color-white);
	transition: color var(--fv-dur-fast) var(--fv-ease-soft), padding-left var(--fv-dur-base) var(--fv-ease-out);
}
.fv-drawer__nav a:hover { color: var(--fv-color-blue-light); padding-left: var(--fv-space-2); }

.fv-drawer__contact {
	margin-top: auto;
	padding: var(--fv-space-6);
	border-top: 1px solid var(--fv-border);
	display: flex;
	flex-direction: column;
	gap: var(--fv-space-4);
	color: var(--fv-color-mist);
	font-size: var(--fv-text-sm);
}

.fv-drawer__contact a {
	display: inline-flex;
	align-items: center;
	gap: var(--fv-space-3);
	color: var(--fv-color-white);
}
.fv-drawer__contact a:hover { color: var(--fv-color-blue-light); }

.fv-drawer__contact-icon {
	display: inline-flex;
	width: 2.25rem;
	height: 2.25rem;
	align-items: center;
	justify-content: center;
	background: var(--fv-bg-raised);
	border-radius: var(--fv-radius-pill);
}


/* ╔════════════════════════════════════════════════════════════════╗
 *  STICKY WHATSAPP BUTTON
 *  Floating, bottom-right, branded WhatsApp green with subtle pulse.
 *  ╚════════════════════════════════════════════════════════════════╝ */

.fv-whatsapp {
	position: fixed;
	bottom: clamp(1rem, 2.5vw, 1.75rem);
	right: clamp(1rem, 2.5vw, 1.75rem);
	z-index: var(--fv-z-whatsapp);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	background: #25D366;
	color: var(--fv-color-white);
	border-radius: var(--fv-radius-pill);
	box-shadow: 0 12px 32px -8px rgba(37, 211, 102, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4);
	transition: transform var(--fv-dur-base) var(--fv-ease-out);
}
.fv-whatsapp:hover {
	transform: scale(1.08) translateY(-2px);
	background: #1ebd5b;
}
.fv-whatsapp:focus-visible { outline: 3px solid var(--fv-color-white); outline-offset: 2px; }
.fv-whatsapp svg { width: 1.85rem; height: 1.85rem; }

/* Pulse ring */
.fv-whatsapp::before {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: var(--fv-radius-pill);
	border: 2px solid #25D366;
	opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.fv-whatsapp::before { animation: fv-whatsapp-pulse 2.6s ease-out infinite; }
}

@keyframes fv-whatsapp-pulse {
	0%   { transform: scale(1);   opacity: 0.6; }
	100% { transform: scale(1.8); opacity: 0; }
}

/* Label that expands on hover on desktop */
.fv-whatsapp__label {
	display: none;
}

@media (min-width: 1024px) {
	.fv-whatsapp {
		width: auto;
		padding: 0.875rem 1.25rem 0.875rem 1rem;
		border-radius: var(--fv-radius-pill);
		gap: var(--fv-space-3);
	}
	.fv-whatsapp__label {
		display: inline-block;
		font-family: var(--fv-font-heading);
		font-size: var(--fv-text-xs);
		font-weight: var(--fv-weight-bold);
		letter-spacing: var(--fv-tracking-wider);
		text-transform: uppercase;
		max-width: 0;
		overflow: hidden;
		white-space: nowrap;
		transition: max-width var(--fv-dur-slow) var(--fv-ease-out);
	}
	.fv-whatsapp:hover .fv-whatsapp__label { max-width: 180px; }
}


/* ╔════════════════════════════════════════════════════════════════╗
 *  ENQUIRY FORM
 *  Editorial, dark, sharp-cornered inputs with thin underlines.
 *  ╚════════════════════════════════════════════════════════════════╝ */

.fv-form {
	display: grid;
	gap: var(--fv-space-4);
}

.fv-form__row {
	display: grid;
	gap: var(--fv-space-4);
}
@media (min-width: 768px) {
	.fv-form__row--2col { grid-template-columns: 1fr 1fr; }
	.fv-form__row--3col { grid-template-columns: repeat(3, 1fr); }
	.fv-form__row--4col { grid-template-columns: repeat(4, 1fr); }
}

.fv-field { display: flex; flex-direction: column; gap: var(--fv-space-2); }

.fv-field__label {
	font-size: var(--fv-text-2xs);
	font-weight: var(--fv-weight-bold);
	letter-spacing: var(--fv-tracking-widest);
	text-transform: uppercase;
	color: var(--fv-fg-muted);
}

.fv-field__input,
.fv-field__textarea,
.fv-field__select {
	width: 100%;
	padding: 0.85rem 1rem;
	background: var(--fv-bg-card);
	color: var(--fv-color-white);
	border: 1px solid var(--fv-border);
	border-radius: var(--fv-radius-none);
	font-family: var(--fv-font-body);
	font-size: var(--fv-text-base);
	transition: border-color var(--fv-dur-fast) var(--fv-ease-soft), background-color var(--fv-dur-fast) var(--fv-ease-soft);
}

.fv-field__input::placeholder,
.fv-field__textarea::placeholder {
	color: var(--fv-fg-subtle);
}

.fv-field__input:focus,
.fv-field__textarea:focus,
.fv-field__select:focus {
	outline: none;
	border-color: var(--fv-color-blue-light);
	background: var(--fv-bg-raised);
}

.fv-field__textarea {
	min-height: 6rem;
	resize: vertical;
}

.fv-field--error .fv-field__input,
.fv-field--error .fv-field__textarea,
.fv-field--error .fv-field__select {
	border-color: var(--fv-color-accent);
}

.fv-field__hint, .fv-field__error {
	font-size: var(--fv-text-xs);
	color: var(--fv-fg-muted);
}
.fv-field__error { color: var(--fv-color-accent-light); }

.fv-form__status {
	padding: var(--fv-space-4) var(--fv-space-5);
	border: 1px solid var(--fv-border);
	background: var(--fv-bg-raised);
	font-size: var(--fv-text-sm);
	letter-spacing: var(--fv-tracking-wide);
}
.fv-form__status--success { border-color: var(--fv-color-blue-light); }
.fv-form__status--error   { border-color: var(--fv-color-accent); }


/* ╔════════════════════════════════════════════════════════════════╗
 *  FOOTER
 *  Editorial footer: logo block, four link columns, newsletter,
 *  accreditation row, copyright bar.
 *  ╚════════════════════════════════════════════════════════════════╝ */

.fv-footer {
	background: var(--fv-bg-raised);
	color: var(--fv-fg);
	border-top: 1px solid var(--fv-border);
}

.fv-footer__cta {
	background: var(--fv-color-black);
	padding-block: var(--fv-space-12);
	border-bottom: 1px solid var(--fv-border);
}

.fv-footer__cta-inner {
	display: grid;
	gap: var(--fv-space-8);
	align-items: center;
}

@media (min-width: 1024px) {
	.fv-footer__cta-inner {
		grid-template-columns: 2fr 1fr;
	}
}

.fv-footer__cta-title {
	font-size: clamp(var(--fv-text-2xl), 3.5vw, var(--fv-text-4xl));
}

.fv-footer__logo-block {
	padding-block: var(--fv-space-16);
	text-align: center;
	border-bottom: 1px solid var(--fv-border);
}

.fv-footer__logo {
	display: inline-flex;
	height: 4rem;
	width: auto;
	margin-bottom: var(--fv-space-4);
}

.fv-footer__tagline {
	color: var(--fv-color-mist);
	font-size: var(--fv-text-sm);
	letter-spacing: var(--fv-tracking-wider);
	text-transform: uppercase;
	max-width: 36rem;
	margin: 0 auto;
}

.fv-footer__grid {
	display: grid;
	gap: var(--fv-space-12);
	padding-block: var(--fv-space-16);
}

@media (min-width: 768px) {
	.fv-footer__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.fv-footer__grid {
		grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
	}
}

.fv-footer__col h4 {
	font-size: var(--fv-text-xs);
	letter-spacing: var(--fv-tracking-widest);
	color: var(--fv-color-white);
	margin-bottom: var(--fv-space-5);
}

.fv-footer__col ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--fv-space-3);
}

.fv-footer__col a {
	color: var(--fv-color-mist);
	font-size: var(--fv-text-sm);
	transition: color var(--fv-dur-fast) var(--fv-ease-soft), padding-left var(--fv-dur-base) var(--fv-ease-out);
}
.fv-footer__col a:hover { color: var(--fv-color-white); padding-left: var(--fv-space-2); }

.fv-footer__contact-item {
	display: flex;
	gap: var(--fv-space-3);
	color: var(--fv-color-mist);
	font-size: var(--fv-text-sm);
	line-height: var(--fv-leading-relaxed);
	margin-bottom: var(--fv-space-3);
}
.fv-footer__contact-item svg {
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	margin-top: 0.25rem;
	color: var(--fv-color-blue-light);
}

.fv-footer__newsletter {
	display: flex;
	flex-direction: column;
	gap: var(--fv-space-3);
}

.fv-footer__newsletter-form {
	display: flex;
	gap: var(--fv-space-2);
}

.fv-footer__newsletter-input {
	flex: 1;
	padding: 0.75rem 1rem;
	background: transparent;
	color: var(--fv-color-white);
	border: 1px solid var(--fv-border-strong);
	font-size: var(--fv-text-sm);
}
.fv-footer__newsletter-input:focus { outline: none; border-color: var(--fv-color-blue-light); }

.fv-footer__social {
	display: flex;
	gap: var(--fv-space-3);
	margin-top: var(--fv-space-5);
}
.fv-footer__social a {
	display: inline-flex;
	width: 2.25rem;
	height: 2.25rem;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--fv-border-strong);
	color: var(--fv-color-white);
}
.fv-footer__social a:hover { background: var(--fv-color-blue); border-color: var(--fv-color-blue); }

.fv-footer__accreditation {
	border-top: 1px solid var(--fv-border);
	padding-block: var(--fv-space-8);
	display: flex;
	flex-wrap: wrap;
	gap: var(--fv-space-8);
	align-items: center;
	justify-content: center;
	opacity: 0.6;
}
.fv-footer__accreditation img,
.fv-footer__accreditation svg { height: 2rem; width: auto; }

.fv-footer__copyright {
	border-top: 1px solid var(--fv-border);
	padding-block: var(--fv-space-5);
	color: var(--fv-color-mist);
	font-size: var(--fv-text-xs);
	letter-spacing: var(--fv-tracking-wide);
}
.fv-footer__copyright-inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fv-space-3);
	justify-content: space-between;
	align-items: center;
}