/*
 * Royal Vision Traders - site footer.
 *
 * Styles the Elementor footer template "RVT Footer" (post 11980), which is
 * built from native containers and widgets only. Every rule here hangs off a
 * semantic rvt-footer__* class set on those elements.
 *
 * Ground is ink. The page above is cream, so the dark band closes the page
 * with real contrast instead of a muddy beige step. Type is cream on ink,
 * teal carries every action, and the brand name sits across the bottom as a
 * wide-tracked band.
 *
 * Colours are the saved "Warm Tech" tokens from rvt-design.css only. Where a
 * softer tone is needed it is an alpha of the cream token, never a new hex.
 */

/* ============================================================
   1. SECTION GROUND AND LOCAL TOKENS
   ============================================================ */

.rvt-footer {
	--ftr-ground: var(--rvt-ink, #1A1A1A);
	--ftr-cream: var(--rvt-bg, #FBF3EC);
	--ftr-accent: var(--rvt-accent, #2FA9A0);
	--ftr-accent-hover: var(--rvt-accent-h, #238C85);

	/* Alphas of the cream token, so nothing off palette is introduced. */
	--ftr-text: rgba(251, 243, 236, 0.92);
	--ftr-muted: rgba(251, 243, 236, 0.58);
	--ftr-rule: rgba(251, 243, 236, 0.14);
	--ftr-rule-soft: rgba(251, 243, 236, 0.09);
	--ftr-wordmark: rgba(251, 243, 236, 0.09);

	--ftr-radius: var(--rvt-rm, 16px);
	--ftr-pill: var(--rvt-rp, 999px);
	--ftr-col-gap: clamp(28px, 4vw, 72px);
	--ftr-row-gap: clamp(36px, 4vw, 60px);

	position: relative;
	width: 100%;
	/* The section above ends flush, so the band buys its own separation. */
	margin-top: clamp(48px, 6vw, 96px);
	padding:
		clamp(72px, 8vw, 128px)
		clamp(20px, 5vw, 64px)
		clamp(28px, 3vw, 40px);
	background: var(--ftr-ground);
	color: var(--ftr-text);
	font-family: var(--rvt-b, 'General Sans', sans-serif);
	-webkit-font-smoothing: antialiased;
}

.rvt-footer > .e-con-inner {
	position: relative;
	z-index: 1;
	max-width: 1240px;
	margin-inline: auto;
	padding: 0;
}

.rvt-footer .elementor-widget:not(:last-child) {
	margin-block-end: 0;
}

/*
 * This Elementor build renders widgets without the legacy
 * .elementor-widget-container wrapper, so every rule below targets the widget
 * element itself. Both shapes are covered where it costs nothing.
 */
.rvt-footer .elementor-widget-container {
	margin: 0;
	padding: 0;
}

/* ============================================================
   2. TOP ROW - newsletter and brand
   ============================================================ */

.rvt-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
	align-items: start;
	gap: var(--ftr-row-gap) clamp(32px, 4vw, 80px);
	width: 100%;
	padding: 0;
}

.rvt-footer__intro,
.rvt-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: 0;
	width: 100%;
}

.rvt-footer__brand {
	align-items: flex-end;
	text-align: right;
	gap: 18px;
}

/* --- Headline ------------------------------------------------ */

.rvt-footer__title .elementor-heading-title {
	margin: 0;
	max-width: 15ch;
	color: var(--ftr-cream);
	font-family: var(--rvt-h, 'Satoshi', sans-serif);
	font-size: clamp(30px, 3.7vw, 50px);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -0.03em;
}

/* ============================================================
   3. NEWSLETTER FORM
   ============================================================ */

/*
 * The field and the button sit side by side in a plain flex row. An earlier
 * version pinned the button inside the field with absolute positioning and it
 * drifted out of place, so the button is a normal flex item now and the row
 * simply wraps on small screens.
 *
 * Elementor writes the form's gutters as per-widget rules
 * (.elementor-11980 .elementor-element.elementor-element-xxxx .elementor-field-group),
 * which outweigh a plain class selector, so those few properties are
 * overridden by weight. Field and button colours are set in the widget's own
 * settings, not here, so they stay editable in the builder.
 */

.rvt-footer .rvt-footer__form .elementor-form-fields-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	max-width: 520px;
	margin: 0 !important;
}

.rvt-footer .rvt-footer__form .elementor-field-group {
	flex: 1 1 250px;
	width: auto !important;
	max-width: none;
	padding: 0 !important;
	margin-bottom: 0 !important;
}

.rvt-footer .rvt-footer__form .elementor-field-type-submit {
	flex: 0 0 auto;
}

/* The label sits above the field as a small tracked caption. */
.rvt-footer__form .elementor-field-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	color: var(--ftr-muted);
	font-family: var(--rvt-b, 'General Sans', sans-serif);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

/* The one accent dot in the section, echoing the logo. */
.rvt-footer__form .elementor-field-label::before {
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ftr-accent);
	content: "";
}

.rvt-footer__form input[type="email"].elementor-field-textual {
	width: 100%;
	height: 56px;
	padding: 0 22px;
	border-radius: var(--ftr-pill);
	font-family: var(--rvt-b, 'General Sans', sans-serif);
	font-size: 15px;
	line-height: 56px;
	box-shadow: none;
	transition: border-color 200ms ease, box-shadow 200ms ease;
}

.rvt-footer__form input[type="email"].elementor-field-textual::placeholder {
	color: var(--ftr-muted);
	opacity: 1;
}

.rvt-footer__form input[type="email"].elementor-field-textual:focus {
	border-color: var(--ftr-accent);
	box-shadow: 0 0 0 3px rgba(47, 169, 160, 0.28);
	outline: none;
}

.rvt-footer__form .elementor-field-type-submit .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 128px;
	height: 56px;
	padding: 0 32px;
	border: 0;
	border-radius: var(--ftr-pill);
	font-family: var(--rvt-b, 'General Sans', sans-serif);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background-color 200ms ease, transform 200ms ease;
}

.rvt-footer__form .elementor-field-type-submit .elementor-button:hover,
.rvt-footer__form .elementor-field-type-submit .elementor-button:focus-visible {
	transform: translateY(-2px);
}

.rvt-footer__form .elementor-message {
	flex: 1 1 100%;
	margin-top: 12px;
	color: var(--ftr-text);
	font-size: 14px;
}

/* --- Consent line -------------------------------------------- */

.rvt-footer__consent,
.rvt-footer__consent p {
	margin: 0;
	color: var(--ftr-muted);
	font-size: 13px;
	line-height: 1.5;
}

/* ============================================================
   4. BRAND BLOCK
   ============================================================ */

/*
 * The logo is a transparent PNG, but its "VISION TRADERS" wordmark is near
 * black and would disappear against the ink ground. It therefore sits on a
 * cream plate, which keeps the full brand colours readable and reads as a
 * deliberate lockup. A light version of the logo could sit directly on the
 * ground instead.
 */
.rvt-footer__logo {
	display: inline-flex;
	align-self: inherit;
	padding: 18px 22px;
	border-radius: var(--ftr-radius);
	background: var(--ftr-cream);
}

.rvt-footer__logo > a {
	display: block;
	line-height: 0;
}

.rvt-footer__logo img {
	display: block;
	width: clamp(150px, 16vw, 208px);
	height: auto;
}

.rvt-footer__tagline,
.rvt-footer__tagline p {
	margin: 0;
	max-width: 32ch;
	color: var(--ftr-muted);
	font-size: 14px;
	line-height: 1.6;
}

/* ============================================================
   5. DIVIDERS
   ============================================================ */

/*
 * The line itself is not drawn here. Both Divider widgets carry their own
 * colour, weight and gap settings in the template, so Elementor generates the
 * rule and it stays editable in the builder. Only the spacing is set here.
 */

.rvt-footer__rule {
	width: 100%;
	padding: clamp(44px, 5.2vw, 72px) 0 0;
}

/* ============================================================
   6. MIDDLE ROW - navigation and contact
   ============================================================ */

.rvt-footer__mid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	align-items: start;
	gap: var(--ftr-row-gap) var(--ftr-col-gap);
	width: 100%;
	padding: clamp(32px, 4vw, 56px) 0 0;
}

.rvt-footer__nav,
.rvt-footer__contact {
	padding: 0;
	width: 100%;
}

.rvt-footer__nav {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.rvt-footer__label .elementor-heading-title {
	margin: 0;
	color: var(--ftr-muted);
	font-family: var(--rvt-b, 'General Sans', sans-serif);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

/* --- Link columns -------------------------------------------- */

.rvt-footer__navcols {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px clamp(18px, 2.2vw, 36px);
	padding: 0;
	width: 100%;
}

/* The policy labels are the longest in the row, so they get a smaller size
   and are allowed to wrap rather than forcing the column wider. */
.rvt-footer__links--policy .elementor-icon-list-item > a {
	font-size: 15px;
	line-height: 1.4;
}

.rvt-footer__links {
	width: 100%;
}

.rvt-footer__links .elementor-icon-list-items {
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rvt-footer__links .elementor-icon-list-item {
	margin: 0;
	padding: 0;
}

.rvt-footer__links .elementor-icon-list-icon {
	display: none;
}

.rvt-footer__links .elementor-icon-list-item > a {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 0;
	color: var(--ftr-text);
	font-family: var(--rvt-h, 'Satoshi', sans-serif);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.35;
	text-decoration: none;
	transition: color 180ms ease;
}

.rvt-footer__links .elementor-icon-list-text {
	padding: 0;
	color: inherit;
}

/* A rule that grows out of the link on hover, instead of an underline. */
.rvt-footer__links .elementor-icon-list-item > a::after {
	width: 0;
	height: 1.5px;
	border-radius: 2px;
	background: var(--ftr-accent);
	content: "";
	transition: width 220ms ease;
}

.rvt-footer__links .elementor-icon-list-item > a:hover,
.rvt-footer__links .elementor-icon-list-item > a:focus-visible {
	color: var(--ftr-accent);
}

.rvt-footer__links .elementor-icon-list-item > a:hover::after,
.rvt-footer__links .elementor-icon-list-item > a:focus-visible::after {
	width: 20px;
}

/* --- Contact blocks ------------------------------------------ */

.rvt-footer__contact {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ftr-row-gap) clamp(20px, 2.5vw, 36px);
	align-items: start;
}

/*
 * A hairline tops each block and fills with the accent on hover. Three
 * identical bordered cards are ruled out by the design direction, so the
 * structure comes from the rule rather than from a box.
 */
.rvt-footer__block {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 11px;
	padding: 22px 0 0;
	width: 100%;
	border-top: 1px solid var(--ftr-rule-soft);
}

.rvt-footer__block::before {
	position: absolute;
	top: -1px;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--ftr-accent);
	content: "";
	transition: width 300ms ease;
}

.rvt-footer__block:hover::before,
.rvt-footer__block:focus-within::before {
	width: 48px;
}

.rvt-footer__blocktitle .elementor-heading-title {
	margin: 0;
	color: var(--ftr-cream);
	font-family: var(--rvt-h, 'Satoshi', sans-serif);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.rvt-footer__blocktext,
.rvt-footer__blocktext p {
	margin: 0;
	color: var(--ftr-muted);
	font-size: 14px;
	line-height: 1.62;
}

.rvt-footer__blocktext a {
	color: inherit;
	text-decoration: none;
}

.rvt-footer__blocktext a:hover {
	color: var(--ftr-accent);
}

/* --- Accent pill button -------------------------------------- */

.rvt-footer__pill {
	margin-top: 8px;
}

.rvt-footer__pill .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 22px;
	border: 0;
	border-radius: var(--ftr-pill);
	background: var(--ftr-accent);
	color: var(--ftr-ground);
	font-family: var(--rvt-b, 'General Sans', sans-serif);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	box-shadow: none;
	transition: background-color 200ms ease, transform 200ms ease;
}

.rvt-footer__pill .elementor-button:hover,
.rvt-footer__pill .elementor-button:focus-visible {
	background: var(--ftr-accent-hover);
	color: var(--ftr-cream);
	transform: translateY(-2px);
}

/* ============================================================
   7. BOTTOM BAR
   ============================================================ */

.rvt-footer__bottom {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 20px var(--ftr-col-gap);
	width: 100%;
	padding: clamp(22px, 2.6vw, 32px) 0 0;
}

.rvt-footer__mail,
.rvt-footer__mail p {
	margin: 0;
	font-size: 15px;
	line-height: 1.4;
}

.rvt-footer__mail a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--ftr-text);
	font-weight: 500;
	text-decoration: none;
	transition: color 180ms ease;
}

.rvt-footer__mail a::before {
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ftr-accent);
	content: "";
}

.rvt-footer__mail a:hover {
	color: var(--ftr-accent);
}

/* --- Social icons -------------------------------------------- */

.rvt-footer__social {
	width: auto;
}

.rvt-footer__social .elementor-grid {
	display: flex;
	gap: 10px;
	justify-content: center;
	margin: 0;
}

.rvt-footer__social .elementor-grid-item {
	margin: 0;
}

.rvt-footer__social .elementor-social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--ftr-rule);
	border-radius: 50%;
	background: transparent;
	color: var(--ftr-text);
	transition:
		background-color 200ms ease,
		color 200ms ease,
		border-color 200ms ease,
		transform 200ms ease;
}

.rvt-footer__social .elementor-social-icon i,
.rvt-footer__social .elementor-social-icon svg {
	width: 16px;
	height: 16px;
	font-size: 15px;
	fill: currentColor;
	color: currentColor;
}

.rvt-footer__social .elementor-social-icon:hover,
.rvt-footer__social .elementor-social-icon:focus-visible {
	border-color: var(--ftr-accent);
	background: var(--ftr-accent);
	color: var(--ftr-ground);
	transform: translateY(-2px);
}

/* --- Legal --------------------------------------------------- */

.rvt-footer__legal,
.rvt-footer__legal p {
	margin: 0;
	color: var(--ftr-muted);
	font-size: 13px;
	line-height: 1.5;
	text-align: right;
}

/* Policy links sit above the copyright line, spaced rather than separated by
   punctuation. */
.rvt-footer__policies {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 6px 20px;
	margin: 0 0 8px !important;
}

.rvt-footer__legal a {
	color: var(--ftr-muted);
	text-decoration: none;
	transition: color 180ms ease;
}

.rvt-footer__policies a {
	color: var(--ftr-text);
}

.rvt-footer__policies a:hover {
	color: var(--ftr-accent);
}

.rvt-footer__legal a:hover {
	color: var(--ftr-text);
}

/* ============================================================
   8. BRAND WORDMARK BAND
   ============================================================ */

/*
 * Decorative. The name is already carried by the logo and the copyright line,
 * so this adds scale, not information. Wide tracking lets the full name span
 * the measure without being cropped.
 */
.rvt-footer::after {
	display: block;
	max-width: 1240px;
	margin: clamp(34px, 4vw, 56px) auto 0;
	padding-top: clamp(22px, 2.6vw, 32px);
	border-top: 1px solid var(--ftr-rule-soft);
	content: "ROYAL VISION TRADERS";
	color: var(--ftr-wordmark);
	font-family: var(--rvt-h, 'Satoshi', sans-serif);
	font-size: clamp(17px, 3.7vw, 54px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.14em;
	text-align: center;
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
}

/* ============================================================
   9. FOCUS VISIBILITY
   ============================================================ */

.rvt-footer a:focus-visible,
.rvt-footer button:focus-visible,
.rvt-footer .elementor-social-icon:focus-visible {
	outline: 2px solid var(--ftr-accent);
	outline-offset: 3px;
}

/* ============================================================
   10. ELEMENTOR CONTAINER DISPLAY MODE
   ============================================================ */

/*
 * Elementor containers render as `display: var(--display)` and the builder
 * writes --display:flex for every container. The custom property is set here
 * alongside the direct `display` declaration above, so the intended layout
 * holds whichever of the two rules wins the cascade.
 */

.rvt-footer__top,
.rvt-footer__mid,
.rvt-footer__navcols,
.rvt-footer__contact,
.rvt-footer__bottom {
	--display: grid;
}

.rvt-footer__intro,
.rvt-footer__brand,
.rvt-footer__nav,
.rvt-footer__block {
	--display: flex;
}

/* ============================================================
   11. RESPONSIVE
   ============================================================ */

@media (max-width: 1200px) {
	.rvt-footer__contact {
		gap: var(--ftr-row-gap) 20px;
	}

	.rvt-footer__blocktext,
	.rvt-footer__blocktext p {
		font-size: 13.5px;
	}
}

/* --- Tablet --------------------------------------------------- */
@media (max-width: 1024px) {
	.rvt-footer__top,
	.rvt-footer__mid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Full width row, so the three link columns keep their own track. */
	.rvt-footer__navcols {
		gap: 22px clamp(20px, 4vw, 48px);
	}

	.rvt-footer__brand {
		align-items: flex-start;
		text-align: left;
	}

	.rvt-footer__tagline,
	.rvt-footer__tagline p {
		max-width: 46ch;
	}

	.rvt-footer__title .elementor-heading-title {
		max-width: 20ch;
	}
}

/* --- Large phone and small tablet ---------------------------- */
@media (max-width: 820px) {
	.rvt-footer__contact {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.rvt-footer__bottom {
		grid-template-columns: minmax(0, 1fr);
		justify-items: start;
		gap: 22px;
	}

	.rvt-footer__social .elementor-grid {
		justify-content: flex-start;
	}

	.rvt-footer__legal,
	.rvt-footer__legal p {
		text-align: left;
	}
}

/* --- Phone ---------------------------------------------------- */
@media (max-width: 600px) {
	.rvt-footer {
		padding-inline: 20px;
	}

	.rvt-footer__navcols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px 24px;
	}

	.rvt-footer__contact {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	/* The row wraps here, so the button takes the full width beneath. */
	.rvt-footer .rvt-footer__form .elementor-form-fields-wrapper {
		max-width: 100%;
	}

	.rvt-footer .rvt-footer__form .elementor-field-group {
		flex: 1 1 100%;
	}

	.rvt-footer .rvt-footer__form .elementor-field-type-submit {
		flex: 1 1 100%;
	}

	.rvt-footer__form .elementor-field-type-submit .elementor-button {
		width: 100%;
	}

	.rvt-footer__social .elementor-social-icon {
		width: 44px;
		height: 44px;
	}

	/* Tracking is reduced so the full name still fits one line. */
	.rvt-footer::after {
		font-size: clamp(13px, 4.1vw, 22px);
		letter-spacing: 0.1em;
	}
}

/* ============================================================
   12. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.rvt-footer *,
	.rvt-footer *::before,
	.rvt-footer *::after {
		transition-duration: 0.01ms !important;
	}

	.rvt-footer .elementor-button:hover,
	.rvt-footer .elementor-social-icon:hover {
		transform: none;
	}
}