/**
 * Site footer. Global (every page). Values verified against the exact
 * literal CSS in Design Refrance's TSI About.html (grepped directly)
 * after a user spot-check caught the first version was approximated.
 */

 
.ui-ft {
	display: flex;
	align-items: center;
	gap: 22px;
	padding: var(--spacing-footer-top) var(--spacing-footer-side) var(--spacing-footer-bottom);
	background: var(--color-bar);
	color: var(--color-white);
}

.ui-ft .fl-wrap {
	display: flex;
	flex-direction: column;
}

.ui-ft .fl {
	font-family: var(--font-secondary);
	font-weight: 900;
	font-size: 32px;
	line-height: 1;
	letter-spacing: -0.5px;
	color: var(--color-white);
}

/**
 * Corrected per a real reference screenshot: this is a full sentence
 * ("A publication by Inovatif Media Asia Sdn Bhd..."), not a short label
 * — plain sentence case, not uppercase/letter-spaced like the header's
 * short tagline, and closer to white than muted grey.
 */
.ui-ft .fl-wrap small {
	font-family: var(--font-primary);
	font-size: 12px;
	font-weight: 400;
	color: #dfe7dd;
	margin-top: 6px;
	max-width: 320px;
}

.ui-ft .fl-legal {
	font-size: 12px;
	color: #bcc7b7;
}

.ui-ft .fsp {
	flex: 1;
}

.fnav {
	display: flex;
	gap: 22px;
}

.fnav-list {
	list-style: none;
	display: flex;
	gap: 22px;
	margin: 0;
	padding: 0;
	line-height: 1;
}

/**
 * Reverted back to the literal Design Refrance values — a previous
 * request had made nav items match the copyright text exactly (both
 * #BCC7B7 at 12px); on request, restored to the reference's real
 * distinction instead: nav links are the lighter, larger, near-white
 * #DFE7DD at 13px (14px on mobile — see the media query below), while
 * .cp (copyright) stays the more muted #BCC7B7 at 12px. Same footer
 * markup/CSS file loads globally on every page (front page, listing,
 * single, etc.) — nothing page-specific to separately keep in sync.
 */
.fnav-list a {
	font-size: 13px;
	color: #DFE7DD;
	transition: 0.15s;
}

/* No underline here — explicitly not wanted in the footer, unlike the
   nav overlay's links (see nav-menu.css). */
.fnav-list a:hover,
.fnav-list a:focus-visible {
	color: var(--color-accent);
}

.ui-ft .cp {
	font-size: 12px;
	color: #BCC7B7;
	white-space: nowrap;
}

@media (max-width: 768px) {
	.ui-ft {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
		padding-top: var(--spacing-footer-top);
		padding-bottom: var(--spacing-footer-bottom);
		padding-inline: 16px;
	}

	.ui-ft .fsp {
		display: none;
	}

	.fnav-list {
		flex-direction: column;
		align-items: flex-start;
		gap: 13px;
		width: 100%;
	}

	.fnav-list a {
		font-size: 14px;
	}
}