/* =====================================================================
   RK Custom Footer — Figma node 983:3948, no Elementor dependency.
   Scoped under .rkf

   Every number below was measured off the 1:1 Figma render, not guessed:
     page gutter 80/1440 = 5.5556%   content box 1280px
     logo 193px wide (live SVG, alpha-masked to flat navy)
     headings 15px UPPERCASE / links 14px / body + legal 12px
     link pitch 33px (19px line + 14px gap) · heading->list 25px
     columns 140px wide, 24px apart · social icons 18px, 20px apart
     divider y=259 · copyright box y=273 · footer bottom pad 32px
     glow: 951px circle, centred, its centre 52px below the footer's
           bottom edge, peak #B5E2BF fading out by r=475px
   ===================================================================== */

.rkf,
.rkf *,
.rkf *::before,
.rkf *::after {
	box-sizing: border-box;
}

.rkf {
	/* --- palette (Figma variables) --- */
	--rkf-ink: #1e2e4c;          /* Primary/Primary Dark 90% — text, logo, divider */
	--rkf-icon: #233963;         /* Primary/Primary 100% — social icons */
	--rkf-glow: 181, 226, 191;   /* #B5E2BF, the glow's peak colour */

	/* Footer surface. The Figma frame itself has no fill and sits on a #F0F0F0
	   canvas; the live Elementor footer was #FFFFFF. #F0F0F0 matches the mock —
	   change this one value to #fff to sit flush with white page sections. */
	--rkf-bg: #f0f0f0;

	/* 80px gutter at the 1440 design width, fluid down, capped up */
	--rkf-pad-x: clamp(20px, 5.5556vw, 80px);
	--rkf-content: 1280px;

	position: relative;
	isolation: isolate;
	overflow: hidden;           /* clips the glow */
	width: 100%;
	background: var(--rkf-bg);
	font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: var(--rkf-ink);
	-webkit-font-smoothing: antialiased;
}

/* ---------- the green radial glow ---------- */
.rkf::after {
	content: "";
	position: absolute;
	z-index: -1;
	left: 50%;
	bottom: 0;
	width: clamp(420px, 66%, 951px);
	aspect-ratio: 1;
	/* centre sits 52px below the footer's bottom edge */
	transform: translate(-50%, calc(50% + 52px));
	border-radius: 50%;
	pointer-events: none;
	background: radial-gradient(circle closest-side,
		rgba(var(--rkf-glow), 1)    0%,
		rgba(var(--rkf-glow), .78) 20%,
		rgba(var(--rkf-glow), .60) 34%,
		rgba(var(--rkf-glow), .44) 45%,
		rgba(var(--rkf-glow), .30) 55%,
		rgba(var(--rkf-glow), .16) 68%,
		rgba(var(--rkf-glow), .07) 80%,
		rgba(var(--rkf-glow), .02) 90%,
		rgba(var(--rkf-glow), 0)  100%);
}

.rkf-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: calc(var(--rkf-content) + 2 * var(--rkf-pad-x));
	margin-inline: auto;
	padding: 33px var(--rkf-pad-x) 32px;
}

/* ---------- top: brand + nav ---------- */
/* Two-up needs brand 384 + gap 32 + nav ~643 = ~1059px of content box, which
   the 0.8889 gutter ratio only affords above ~1191px — hence the 1200px
   breakpoint below. nowrap so the brand shrinks rather than dropping a line. */
.rkf-top {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 40px 32px;
}

/* --- brand --- */
.rkf-brand {
	flex: 1 1 384px;
	max-width: 384px;
	min-width: 0;
}

/* Full-colour brand mark (navy wordmark + teal/green gradients).
   Rendered as a real <img>, so height:auto takes the aspect ratio from the
   SVG's own viewBox — swapping the logo file needs no change here. Do NOT
   reintroduce mask-image: it paints a single flat colour through the alpha
   and throws the gradients away. */
.rkf-logo {
	display: block;
	width: 186px;
	height: auto;
	max-width: 100%;       /* shrink only when the column is genuinely narrower */
}

.rkf-desc {
	margin: 16px 0 0;
	font-size: 12px;
	font-weight: 400;
	line-height: 24px;
	color: var(--rkf-ink);
}

/* --- nav columns --- */
.rkf-nav {
	display: grid;
	/* Figma's 140px column as the floor. The live labels are longer than the
	   mock's placeholders ("Compliance Monitoring" needs ~150px), so let a
	   column grow to its content rather than wrap mid-phrase. */
	grid-template-columns: repeat(4, minmax(140px, max-content));
	gap: 40px 24px;
	/* headings sit on the logo's baseline (nav top 53px vs logo top 33px) */
	padding-top: 20px;
}

.rkf-col {
	min-width: 0;
}

.rkf-col-heading {
	margin: 0;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 18px;
	letter-spacing: 0;
	/* text-transform: uppercase; */
	color: var(--rkf-ink);
}

.rkf-linklist {
	list-style: none;
	margin: 25px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.rkf-linklist a {
	/* block (not inline-block) so the li is exactly 19px tall and the pitch
	   lands on Figma's 33px; fit-content keeps the target on the text itself */
	display: block;
	width: fit-content;
	font-size: 14px;
	font-weight: 400;
	line-height: 19px;
	text-decoration: none;
	color: var(--rkf-ink);
	transition: opacity .25s ease;
}

.rkf-linklist a:hover,
.rkf-linklist a:focus-visible {
	opacity: .6;
}

/* --- social --- */
.rkf-social {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 20px;
}

.rkf-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--rkf-icon);
	transition: transform .25s ease, opacity .25s ease;
}

.rkf-social-link:hover,
.rkf-social-link:focus-visible {
	opacity: .7;
	transform: scale(1.12);
}

.rkf-social-ico {
	display: block;
	width: 18px;
	height: 18px;
}

/* ---------- bottom: divider + copyright/legal ---------- */
.rkf-bottom {
	margin-top: 45px;
}

/* Spec is 1px solid #1E2E4C; at 1:1 the mock reads ~1/3 strength because the
   line straddles two device rows. .35 alpha matches what the mock looks like. */
.rkf-divider {
	width: 100%;
	height: 1px;
	margin: 0;
	border: 0;
	background: rgba(30, 46, 76, .35);
}

.rkf-legal-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 26px;
	padding-top: 14px;
}

.rkf-copyright {
	margin: 0;
	font-size: 12px;
	font-weight: 400;
	line-height: 24px;
	color: var(--rkf-ink);
}

.rkf-legal-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 26px;
}

.rkf-legal-links a {
	font-size: 12px;
	font-weight: 400;
	line-height: 24px;
	text-decoration: none;
	color: var(--rkf-ink);
	transition: opacity .25s ease;
}

.rkf-legal-links a:hover,
.rkf-legal-links a:focus-visible {
	opacity: .6;
}

/* ---------- focus ring ---------- */
.rkf a:focus-visible {
	outline: 2px solid var(--rkf-icon);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ---------- screen-reader-only ---------- */
.rkf-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* =====================================================================
   Responsive. The Figma only specifies 1440; the breakpoints below keep
   its type scale and rhythm while reflowing the two blocks.
   ===================================================================== */

/* --- below the desktop two-up: stack brand over a 4-across nav --- */
@media (max-width: 1199px) {
	.rkf-top {
		display: block;
	}

	.rkf-brand {
		max-width: 560px;
	}

	/* Content-width columns spread across the row. Equal 1fr columns would be
	   ~153px at 768px wide and break "Compliance Monitoring" mid-phrase. */
	.rkf-nav {
		grid-template-columns: repeat(4, minmax(0, max-content));
		justify-content: space-between;
		gap: 40px 24px;
		padding-top: 0;
		margin-top: 40px;
	}
}

/* --- tablet / mobile: 2x2 nav --- */
@media (max-width: 767px) {
	.rkf-inner {
		padding-top: 40px;
	}

	/* 193px is ~half a phone's width — scale the mark back to the same
	   optical weight it has on desktop */
	.rkf-logo {
		width: 160px;
	}

	.rkf-nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		justify-content: normal;
		gap: 32px 24px;
		margin-top: 36px;
	}

	.rkf-linklist {
		gap: 16px;      /* a touch more room for tapping */
	}

	.rkf-bottom {
		margin-top: 36px;
	}

	/* Stack in reading order — copyright then legal links. (The live Elementor
	   footer inverted these on mobile, which made the order flip across the
	   767/768 boundary, since 768 wraps to copyright-first anyway.) */
	.rkf-legal-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.rkf-legal-links {
		gap: 6px 20px;
	}

	.rkf-copyright {
		line-height: 20px;
	}
}

/* --- very narrow phones --- */
@media (max-width: 400px) {
	.rkf-nav {
		gap: 28px 16px;
	}

	.rkf-col-heading {
		font-size: 14px;
	}

	.rkf-linklist a {
		font-size: 13px;
	}
}

/* ---------- motion / contrast preferences ---------- */
@media (prefers-reduced-motion: reduce) {
	.rkf-linklist a,
	.rkf-legal-links a,
	.rkf-social-link {
		transition: none;
	}

	.rkf-social-link:hover,
	.rkf-social-link:focus-visible {
		transform: none;
	}
}

@media (prefers-contrast: more) {
	.rkf-divider {
		background: var(--rkf-ink);
	}
}