/* =========================================================================
   Rapid Partners — header & footer (Hello Elementor child)
   ========================================================================= */

:root {
	--rp-red: #FF1E1E;
	--rp-red-hover: #fb0000;
	--rp-yellow: #f2c61e;
	--rp-yellow-hover: #e2b711;
	--rp-dark: #0d0d0d;
	--rp-panel: #1c1c1c;
	--rp-text: #f4f4f4;
	--rp-muted: #8a8a8a;
	--rp-max: 1480px;
}

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

/* -------------------------------------------------------------------------
   HEADER
   ------------------------------------------------------------------------- */

.rapid-header {
	width: 100%;
	position: relative;
	z-index: 50;
	background: linear-gradient(
		90deg,
		#2a100b 0%,
		#150b09 20%,
		#0e0e0e 50%,
		#150b09 80%,
		#2a100b 100%
	);
}

.rapid-header__inner {
	max-width: var(--rp-max);
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 14px 40px;
}

.rapid-header__branding {
	flex: 1 1 0;
	display: flex;
	align-items: center;
}

.rapid-header .custom-logo-link {
	display: block;
	line-height: 0;
}

.rapid-header .custom-logo,
.rapid-header__branding img {
	height: 56px;
	width: auto;
	display: block;
}

.rapid-header__logo-fallback {
	color: #fff;
	font-weight: 800;
	font-size: 22px;
	text-decoration: none;
	letter-spacing: 0.04em;
}

/* Desktop nav (text links) */
.rapid-header__nav {
	flex: 0 0 auto;
}

.rapid-header__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 44px;
}

.rapid-header__menu a {
	font-family: Montserrat, Sans-serif;
	color: #e9e9e9;
	text-decoration: none;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition: color 0.15s ease;
}

.rapid-header__menu a:hover,
.rapid-header__menu .current-menu-item > a {
	color: #fff;
}

/* Actions: buttons + burger */
.rapid-header__actions {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 14px;
}

.rapid-btn {
	font-family: "Orbitron", Sans-serif;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 11px 24px;
	border-radius: 5px;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s ease, transform 0.05s ease;
}

.rapid-btn:active {
	transform: translateY(1px);
}

.rapid-btn--signin {
	background: var(--rp-red);
	color: #fff;
}

.rapid-btn--signin:hover {
	background: var(--rp-red-hover);
	color: #fff;
}

.rapid-btn--signup {
	background: var(--rp-yellow);
	color: #1a1a1a;
}

.rapid-btn--signup:hover {
	background: var(--rp-yellow-hover);
	color: #1a1a1a;
}

.rapid-header__actions .rapid-burger {
	background: none;
	border: 0;
	border-radius: 0;
	color: #fff;
	cursor: pointer;
	padding: 8px 4px;
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	margin-left: 6px;
}

.rapid-burger span {
	display: block;
	width: 28px;
	height: 2.5px;
	background: #fff;
	border-radius: 2px;
}

/* Neutralise Hello Elementor reset.css button hover/focus (pink fill). */
.rapid-header__actions .rapid-burger:hover,
.rapid-header__actions .rapid-burger:focus,
.rapid-offcanvas .rapid-offcanvas__close:hover,
.rapid-offcanvas .rapid-offcanvas__close:focus {
	background: none;
	color: #fff;
}

/* -------------------------------------------------------------------------
   OFF-CANVAS MENU
   ------------------------------------------------------------------------- */

.rapid-offcanvas-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	z-index: 999;
}

.rapid-offcanvas {
	position: fixed;
	top: 0;
	right: 0;
	height: 100vh;
	height: 100dvh;
	width: 390px;
	max-width: 86vw;
	background: var(--rp-panel);
	z-index: 1000;
	transform: translateX(100%);
	transition: transform 0.28s ease;
	padding: 84px 40px 40px;
	overflow-y: auto;
	box-shadow: -24px 0 70px rgba(0, 0, 0, 0.5);
}

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

.rapid-offcanvas:focus {
	outline: none;
}

/* Keyboard-only focus indicator for the header/menu controls. */
.rapid-burger:focus-visible,
.rapid-offcanvas__close:focus-visible,
.rapid-nav__link:focus-visible,
.rapid-header__menu a:focus-visible,
.rapid-btn:focus-visible {
	outline: 2px solid var(--rp-yellow);
	outline-offset: 3px;
}

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

.rapid-offcanvas .rapid-offcanvas__close {
	position: absolute;
	top: 26px;
	right: 30px;
	width: 34px;
	height: 34px;
	background: none;
	border: 0;
	border-radius: 0;
	color: #fff;
	cursor: pointer;
	padding: 0;
}

.rapid-offcanvas__close svg {
	width: 30px;
	height: 30px;
}

.rapid-nav__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.rapid-nav__link {
	font-family: Montserrat, Sans-serif;
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 12px 0;
	color: #fff;
	text-decoration: none;
	font-size: 22px;
	font-weight: 600;
}

.rapid-nav__icon {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.rapid-nav__icon-svg {
	width: 28px;
	height: 28px;
	fill: var(--rp-yellow);
}

.rapid-nav__link:hover .rapid-nav__label {
	color: var(--rp-yellow);
}

/* -------------------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------------------- */

.rapid-footer {
	position: relative;
	/* #0d0d0d base colour kept beneath the grain texture (shows at the edges
	   and while the image loads). */
	background-color: var(--rp-dark);
	color: var(--rp-text);
	overflow: hidden;
}

.rapid-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.1;
	background-image: url( ../images/space-overlay.jpg );
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.rapid-footer::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.5;
	background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 26px 26px;
}

.rapid-footer__inner {
	font-family: Inter, Sans-serif;
	position: relative;
	z-index: 1;
	max-width: var(--rp-max);
	margin: 0 auto;
	padding: 64px 40px 40px;
}

.rapid-footer__columns {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr minmax(280px, 1.1fr);
	gap: 32px 40px;
	align-items: start;
}

.rapid-footer__heading {
	margin: 0 0 18px;
	color: var(--rp-muted);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.rapid-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.rapid-footer__col a,
.rapid-footer__list a {
	color: #e7e7e7;
	text-decoration: none;
	font-size: 16px;
	transition: color 0.15s ease;
}

.rapid-footer__col a:hover,
.rapid-footer__list a:hover {
	color: #fff;
	text-decoration: underline;
}

/* Newsletter */
.rapid-footer__col--newsletter {
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
}

.rapid-subscribe {
	display: flex;
	gap: 12px;
	align-items: stretch;
	width: 100%;
	max-width: 340px;
}

.rapid-subscribe__input {
	font-family: Inter, sans-serif;
	flex: 1 1 auto;
	min-width: 0;
	background: #fff;
	border: 0 !important;
	border-radius: 8px !important;
	padding: 16px 24px !important;
	font-size: 18px;
	color: #000;
}

input.rapid-subscribe__input::placeholder {
	color: #000;
}

.rapid-subscribe .rapid-subscribe__btn {
	flex: 0 0 auto;
	width: 56px;
	border: 0;
	border-radius: 8px;
	background: var(--rp-red);
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease;
}

.rapid-subscribe__btn:hover {
	background: var(--rp-red-hover) !important;
}

.rapid-subscribe__btn svg {
	width: 22px;
	height: 22px;
	fill: #fff;
}

.rapid-footer__copyright {
	position: relative;
	z-index: 1;
	margin: 46px 0 0;
	color: #5f5f5f;
	font-size: 15px;
}

/* -------------------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------------------- */

/* Hide desktop text nav; keep the burger on all sizes (as in the design). */
@media (max-width: 991px) {
	.rapid-header__nav {
		display: none;
	}
	.rapid-header__branding {
		flex: 0 0 auto;
	}
}

@media (max-width: 900px) {
	.rapid-footer__columns {
		grid-template-columns: 1fr 1fr;
	}
	.rapid-footer__col--newsletter {
		grid-column: 1 / -1;
		justify-content: flex-start;
		margin-top: 8px;
	}
}

@media (max-width: 600px) {
	.rapid-header__inner {
		padding: 12px 18px;
		gap: 12px;
	}
	.rapid-header .custom-logo,
	.rapid-header__branding img {
		height: 40px;
	}
	.rapid-header__actions {
		gap: 9px;
	}
	.rapid-btn {
		padding: 9px 14px;
		font-size: 12px;
		letter-spacing: 0.04em;
	}
	.rapid-burger span {
		width: 22px;
	}

	.rapid-footer__columns {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.rapid-footer__inner {
		padding: 40px 24px 30px;
	}
	.rapid-subscribe {
		max-width: 100%;
	}
}

/* =========================================================================
   ".rapid-scroll-effect" — scroll parallax (JS-driven, see rapid-scroll-effect.js).
   The JS animates the CSS `translate` property; this just hints the compositor
   for smoother movement. Reduced-motion users get no movement (handled in JS).
   ========================================================================= */
.rapid-scroll-effect,
.rapid-scroll-effect-2 {
	will-change: transform;
}

/* =========================================================================
   ".js-rapid-slider" — native horizontal-scroll slider on small screens.

   Add the CSS class "js-rapid-slider" to an Elementor flex container. On
   phones its cards become a swipeable, horizontally-scrolling strip — no
   JS, so no dots and no arrows. Because it uses overflow-x: auto, it only
   actually scrolls when the row is wider than the screen; if the cards
   fit, nothing scrolls.

   The flex row of a *boxed* container lives on ".e-con-inner"; direct-child
   containers put it on the element itself — target both so it works either
   way. !important is used only where Elementor's own responsive CSS (which
   may stack the container to a column on mobile) would otherwise win.
   ========================================================================= */
@media (max-width: 1280px) {
	.js-rapid-slider > .e-con-inner,
	.js-rapid-slider.e-con {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		/* Start at the first card. Elementor centers the row by default,
		   which spills an overflowing row off both edges and hides the
		   start. */
		justify-content: flex-start !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		/* Hide the scrollbar so it reads as a clean slider. */
		scrollbar-width: none; /* Firefox */
	}
	.js-rapid-slider > .e-con-inner::-webkit-scrollbar,
	.js-rapid-slider.e-con::-webkit-scrollbar {
		display: none; /* Chrome / Safari */
	}

	/* Cards keep their size (don't shrink to fit) so the row overflows and
	   becomes scrollable. Tune the width to change how much of the next
	   card "peeks" in. */
	.js-rapid-slider > .e-con-inner > .why-card,
	.js-rapid-slider.e-con > .why-card {
		flex: 0 0 auto !important;
		width: min(78vw, 300px);
		scroll-snap-align: start;
	}
}

/* =========================================================================
   Contact Form 7 — "Email / Name / Your question / SEND" contact bar.
   Desktop: one row of three black rounded fields + a red SEND button.
   Mobile:  fields stack full-width, SEND sits centred beneath them.
   ========================================================================= */
/* The shortcode widget is set to "Inline (auto)" width in Elementor, which
   shrinks it to content and collapses the fields. Force it (and the CF7
   wrappers) to full width so the row can lay out. */
.elementor-widget-shortcode:has( .wpcf7-form ) {
	width: 100% !important;
	max-width: 100%;
}
.wpcf7,
.wpcf7 .wpcf7-form {
	width: 100%;
}

.wpcf7 .wpcf7-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 16px;
	margin: 0;
	--rp-field-h: 76px;
}

/* Hidden inputs container — keep it out of the flex flow (inputs still post). */
.wpcf7 .wpcf7-form > .hidden-fields-container {
	display: none;
}

/* Each field is wrapped in its own <p>; make them equal-width columns. */
.wpcf7 .wpcf7-form > p {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
}

/* The submit paragraph shouldn't stretch. */
.wpcf7 .wpcf7-form > p:has( .wpcf7-submit ) {
	flex: 0 0 auto;
	position: relative;
}

.wpcf7 .wpcf7-form .wpcf7-form-control-wrap {
	display: block;
}

/* Text / email inputs — the black rounded fields. */
.wpcf7 .wpcf7-form .wpcf7-form-control.wpcf7-text,
.wpcf7 .wpcf7-form input[type="text"],
.wpcf7 .wpcf7-form input[type="email"] {
	font-family: Inter, Sans-serif;
	width: 100%;
	box-sizing: border-box;
	height: var(--rp-field-h);
	background: var(--rp-dark, #0d0d0d);
	color: #fff;
	border: 0;
	border-radius: 14px;
	padding: 0 28px;
	font-size: 18px;
	font-weight: 500;
	line-height: normal;
	outline: none;
	transition: box-shadow 0.2s ease;
}
.wpcf7 .wpcf7-form input::placeholder {
	color: #fff;
	opacity: 1;
}
.wpcf7 .wpcf7-form input:focus {
	box-shadow: 0 0 0 2px var(--rp-yellow, #f2c61e);
}

/* SEND button. */
.wpcf7 .wpcf7-form .wpcf7-submit {
	font-family: "Orbitron", Sans-serif;
	width: 100%;
	box-sizing: border-box;
	height: var(--rp-field-h);
	background: var(--rp-red, #e63329);
	color: #fff;
	border: 0;
	border-radius: 14px;
	padding: 0 48px;
	font-size: 18px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	line-height: normal;
	cursor: pointer;
	transition: background 0.2s ease;
}
.wpcf7 .wpcf7-form .wpcf7-submit:hover,
.wpcf7 .wpcf7-form .wpcf7-submit:focus {
	background: var(--rp-red-hover, #cf2c23);
}

/* Response + validation messages span the full width, below the row. */
.wpcf7 .wpcf7-form .wpcf7-response-output {
	flex-basis: 100%;
	margin: 6px 0 0;
	border-radius: 10px;
}
.wpcf7 .wpcf7-form .wpcf7-not-valid-tip {
	font-size: 13px;
	margin-top: 6px;
}
.wpcf7 .wpcf7-form .wpcf7-not-valid {
	box-shadow: 0 0 0 2px var(--rp-red, #e63329);
}
/* Keep the AJAX spinner from adding height (it would otherwise wrap below the
   full-width button). Float it over the right end of the button while active. */
.wpcf7 .wpcf7-form .wpcf7-spinner {
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
}

/* Mobile: stack the fields, centre a narrower SEND button. */
@media (max-width: 767px) {
	.wpcf7 .wpcf7-form {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
	}
	.wpcf7 .wpcf7-form > p {
		flex: 1 1 auto;
		width: 100%;
	}
	.wpcf7 .wpcf7-form > p:has( .wpcf7-submit ) {
		align-self: center;
		width: 62%;
		margin-top: 4px;
	}
}

/* =========================================================================
   Custom CSS
   ========================================================================= */

* {
	transform-origin: left center;
}

html, body {
	overflow-x: hidden;
}

.rapid-text-shadow {
	text-shadow: -2px 0px 0 #FFD400, 2px 0px 0 #FF1E1E;
}

.why-card {
	max-width: 240px;
	min-width: 180px;
	box-sizing: border-box;
}

.rapid-drop-shadow-red {
	/* filter: drop-shadow(0 0 0.75rem #FF1E1E); */
	filter: drop-shadow(0 0 0.75rem #000);
}

.rapid-drop-shadow-yellow {
	/* filter: drop-shadow(0 0 0.75rem #FFD400); */
	filter: drop-shadow(0 0 0.75rem #000);
}

.rapid-drop-shadow-white {
	filter: drop-shadow(0 0 0.75rem #FFFFFF);
}