/* =============================================================================
   RKC Finserve - site footer
   Companion sheet for the Elementor Theme Builder template "RKC - Site Footer"
   (elementor_library post 652). Enqueued as 'rkc-footer' with a hard dependency
   on 'rkc', so it always loads after the design system. rkc.css is not touched.

   Rules of the house (identical to rkc.css)
   - No font-family anywhere. No brand hex anywhere. Colour arrives two ways:
     Elementor kit globals set on the widgets themselves (Deep Teal ground,
     Brass Light headings, Mist body) and the --rkc-* custom properties printed
     by RKC_Core::inline_tokens().
   - The only literal colours below are neutral black alphas used to darken the
     teal ground. rkc.css already uses exactly this technique for
     --rkc-line-dark and its shadows.
   - Font SIZE is set here in a few places. The kit deliberately carries no
     font-size on its Headings global and sets body copy at 17px, which is a
     reading size, not a footer size. Family, weight and colour still come from
     the kit; only the scale is footer-specific.
   - The four-column layout itself is authored in Elementor as a CSS Grid
     container (4 / 2 / 1 across desktop / tablet / mobile), so the client can
     re-arrange it in the editor without touching this file. What lives here is
     only the treatment Elementor has no control for.
   - Nothing may overflow horizontally at 360px.

   Contents
     01  Ground and safety
     02  Brand block
     03  Social row
     04  Column headings and link lists
     05  Get in touch
     06  Legal strip
     07  Responsive
     08  Reduced motion, forced colours, print
   ========================================================================== */


/* =============================================================================
   01  GROUND AND SAFETY
   ========================================================================== */

.rkc-foot {
	/* Layering neutral black over the kit's Deep Teal keeps the legal band tied
	   to the brand colour: re-theme Deep Teal in the kit and the band follows. */
	--rkc-foot-band: rgba(0, 0, 0, .24);
}

/* Grid and flex children default to min-width:auto, the usual cause of
   horizontal overflow on narrow phones. */
.rkc-foot .e-con-inner > *,
.rkc-foot__col > * {
	min-width: 0;
}

/* Long addresses and email addresses must wrap rather than push the page. */
.rkc-foot p,
.rkc-foot li {
	overflow-wrap: anywhere;
}

/* One focus ring for the whole footer, legible on the dark ground. */
.rkc-foot a:focus-visible {
	outline: 2px solid var(--rkc-brass-hi);
	outline-offset: 3px;
	border-radius: 3px;
}

/* Zero-specificity resets, so anything the client later sets in the Elementor
   UI still wins over them. */
.rkc-foot :where(a) {
	text-decoration: none;
}

.rkc-foot :where(ul) {
	list-style: none;
}

.rkc-foot :where(p):last-child {
	margin-block-end: 0;
}


/* =============================================================================
   02  BRAND BLOCK

   The wordmark is not an h-tag, so it inherits no size from the kit and the
   size is set here. The line-height override is not cosmetic: the kit's
   Headings global declares line-height in `em`, which computes to a fixed
   length on the widget wrapper (~20px at the 17px body size) and would then be
   inherited by the larger wordmark as that same 20px, crowding it. A unitless
   value re-derives from the wordmark's own size.
   ========================================================================== */

.rkc-foot__brand {
	font-size: clamp(21px, 1.7vw, 25px);
	line-height: 1.15;
	margin: 0;
}

.rkc-foot__arn {
	/* Size, weight, tracking and uppercase all come from the kit's Eyebrow/UI
	   global on the widget. */
	margin: 6px 0 0;
}

.rkc-foot__about {
	margin: 0;
	max-width: 42ch;
	font-size: 15px;
	line-height: 1.75;
}


/* =============================================================================
   03  SOCIAL ROW
   Rendered by [rkc_footer_social]. WhatsApp, email and telephone are always
   present and are read from RKC_Core::cfg(); network buttons appear only for
   URLs stored in the `rkc_social` option, so nothing is ever linked to a handle
   the client has not supplied.
   ========================================================================== */

.rkc-foot__soc {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
}

.rkc-foot__soc-a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--rkc-line-dark2);
	color: var(--rkc-mist);
	transition: color var(--rkc-t), border-color var(--rkc-t), background-color var(--rkc-t);
}

.rkc-foot__soc-a:hover,
.rkc-foot__soc-a:focus-visible {
	color: var(--rkc-brass-hi);
	border-color: var(--rkc-brass-30);
	background-color: var(--rkc-brass-08);
}

.rkc-foot__soc-a svg {
	width: 18px;
	height: 18px;
	display: block;
}


/* =============================================================================
   04  COLUMN HEADINGS AND LINK LISTS
   Colour and type for these come from the kit globals on the Elementor widgets
   (Eyebrow/UI typography, Brass Light). Only the brass rule under each heading,
   the link size and the hover motion are added here.
   ========================================================================== */

.rkc-foot__h .elementor-heading-title {
	position: relative;
	padding-block-end: 12px;
	margin: 0;
}

.rkc-foot__h .elementor-heading-title::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	width: 26px;
	height: 2px;
	background-color: var(--rkc-brass);
}

.rkc-foot__nav .elementor-icon-list-text {
	font-size: 15px;
}

.rkc-foot__nav .elementor-icon-list-item > a {
	display: inline-block;
	transition: transform var(--rkc-t);
}

.rkc-foot__nav .elementor-icon-list-item > a:hover {
	transform: translateX(3px);
}


/* =============================================================================
   05  GET IN TOUCH
   The four values are emitted by [rkc_contact field="..."], so Settings ->
   RKC Finserve changes them with no edit here and no edit to the Elementor
   template.

   Icons are the existing uploads/rkc/icons/*.svg files painted as CSS masks, so
   they take the brass token rather than a baked-in colour (those files draw
   with stroke="currentColor", which an <img> or background-image could not
   inherit). The whole block sits behind @supports: where masking is
   unavailable the labels simply sit flush, with no broken square.
   ========================================================================== */

.rkc-foot__ci {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.rkc-foot__ci-k {
	display: block;
	font-size: 11px;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: var(--rkc-brass-hi);
	margin-block-end: 2px;
}

.rkc-foot__ci-v {
	display: block;
	font-size: 15px;
	line-height: 1.55;
}

@supports (mask-image: url("icons/phone.svg")) or (-webkit-mask-image: url("icons/phone.svg")) {

	.rkc-foot__ci-i {
		position: relative;
		padding-inline-start: 28px;
	}

	.rkc-foot__ci-i::before {
		content: "";
		position: absolute;
		inset-block-start: 0;
		inset-inline-start: 0;
		width: 17px;
		height: 17px;
		background-color: var(--rkc-brass-hi);
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-position: center;
		mask-position: center;
		-webkit-mask-size: contain;
		mask-size: contain;
	}

	.rkc-foot__ci-i--phone::before {
		-webkit-mask-image: url("icons/phone.svg");
		mask-image: url("icons/phone.svg");
	}

	.rkc-foot__ci-i--mail::before {
		-webkit-mask-image: url("icons/mail.svg");
		mask-image: url("icons/mail.svg");
	}

	.rkc-foot__ci-i--location::before {
		-webkit-mask-image: url("icons/location.svg");
		mask-image: url("icons/location.svg");
	}

	.rkc-foot__ci-i--clock::before {
		-webkit-mask-image: url("icons/clock.svg");
		mask-image: url("icons/clock.svg");
	}
}

/* [rkc_wa_button] already carries .rkc-wa .rkc-wa--ghost from rkc.css. Only the
   footer's own spacing is added. */
.rkc-foot__wa .rkc-wa {
	margin-block-start: 2px;
}


/* =============================================================================
   06  LEGAL STRIP
   A darker band, produced by layering neutral black over the kit's Deep Teal
   rather than by inventing a second teal.
   ========================================================================== */

.rkc-foot__legal {
	background-color: var(--rkc-foot-band);
	border-block-start: 1px solid var(--rkc-line-dark);
}

.rkc-foot__disc {
	margin: 0;
	max-width: 108ch;
	font-size: 13px;
	line-height: 1.75;
}

.rkc-foot__bottom {
	border-block-start: 1px solid var(--rkc-line-dark);
}

.rkc-foot__copy {
	margin: 0;
	font-size: 13px;
}

.rkc-foot__legallinks .elementor-icon-list-text {
	font-size: 13px;
}


/* =============================================================================
   07  RESPONSIVE
   The column count itself is Elementor's (4 / 2 / 1). These rules only tidy up
   what falls out of that.
   ========================================================================== */

@media (max-width: 1024px) {

	.rkc-foot__about {
		max-width: 56ch;
	}
}

@media (max-width: 767px) {

	.rkc-foot__about {
		max-width: none;
	}

	.rkc-foot__soc {
		gap: 8px;
	}

	/* The bottom row switches to a column in Elementor; give the copyright a
	   little air above the legal links. */
	.rkc-foot__bottom {
		text-align: start;
	}
}


/* =============================================================================
   08  REDUCED MOTION, FORCED COLOURS, PRINT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	.rkc-foot__soc-a,
	.rkc-foot__nav .elementor-icon-list-item > a {
		transition: none;
	}

	.rkc-foot__nav .elementor-icon-list-item > a:hover {
		transform: none;
	}
}

@media (forced-colors: active) {

	.rkc-foot__soc-a {
		border-color: CanvasText;
	}

	.rkc-foot__ci-i::before {
		background-color: CanvasText;
	}
}

@media print {

	.rkc-foot__soc,
	.rkc-foot__wa {
		display: none;
	}
}