/**
 * Footer component styles.
 *
 * Matches React Footer.tsx: dark background, inverted logo, social icons,
 * three nav columns, and copyright bar.
 *
 * All colors use CSS custom properties — zero hardcoded hex values.
 */

/* ---------------------------------------------------------------------
 * Container
 * ------------------------------------------------------------------ */

.rc-footer {
	background-color: var(--wp--preset--color--primary);
	color: color-mix(in srgb, var(--wp--preset--color--white) 80%, transparent);
	padding-top: var(--wp--preset--spacing--64);
	padding-bottom: var(--wp--preset--spacing--64);
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 10%, transparent);
}

.rc-footer__container {
	max-width: var(--wp--style--global--wide-size, 1280px);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--wp--preset--spacing--16);
	padding-right: var(--wp--preset--spacing--16);
}

@media (min-width: 640px) {

	.rc-footer__container {
		padding-left: var(--wp--preset--spacing--24);
		padding-right: var(--wp--preset--spacing--24);
	}
}

@media (min-width: 1024px) {

	.rc-footer__container {
		padding-left: var(--wp--preset--spacing--32);
		padding-right: var(--wp--preset--spacing--32);
	}
}

/* ---------------------------------------------------------------------
 * Grid layout
 * ------------------------------------------------------------------ */

.rc-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--48);
}

@media (min-width: 768px) {

	.rc-footer__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {

	.rc-footer__grid {
		grid-template-columns: 2fr 1fr 1fr 1fr;
	}
}

/* ---------------------------------------------------------------------
 * Brand column (logo + tagline + social)
 * ------------------------------------------------------------------ */

.rc-footer__brand {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--24);
}

.rc-footer__logo-img {
	height: 2rem;
	width: auto;
	filter: brightness(0) invert(1);
}

.rc-footer__tagline {
	font-size: var(--wp--preset--font-size--small);
	max-width: 24rem;
	line-height: 1.625;
	margin: 0;
}

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

.rc-footer__social {
	display: flex;
	gap: var(--wp--preset--spacing--16);
}

.rc-footer__social-link {
	color: color-mix(in srgb, var(--wp--preset--color--white) 60%, transparent);
	transition: color 0.15s ease;
	text-decoration: none;
	display: inline-flex;
}

.rc-footer__social-link:focus-visible {
	color: var(--wp--preset--color--accent);
}

/* ---------------------------------------------------------------------
 * Navigation columns
 * ------------------------------------------------------------------ */

.rc-footer__nav-heading {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	color: var(--wp--preset--color--white);
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--24);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.2;
}

.rc-footer__nav-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--16);
}

.rc-footer__nav-list a {
	font-size: var(--wp--preset--font-size--small);
	color: color-mix(in srgb, var(--wp--preset--color--white) 80%, transparent);
	text-decoration: none;
	transition: color 0.15s ease;
}

.rc-footer__nav-list a:focus-visible {
	color: var(--wp--preset--color--accent);
}

/* ---------------------------------------------------------------------
 * Hover states (pointer devices only)
 * ------------------------------------------------------------------ */

@media (hover: hover) {

	.rc-footer__social-link:hover {
		color: var(--wp--preset--color--accent);
	}

	.rc-footer__nav-list a:hover {
		color: var(--wp--preset--color--accent);
	}
}

/* ---------------------------------------------------------------------
 * Reduced motion
 * ------------------------------------------------------------------ */

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

	.rc-footer__social-link,
	.rc-footer__nav-list a {
		transition: none;
	}
}

/* ---------------------------------------------------------------------
 * Copyright bar
 * ------------------------------------------------------------------ */

.rc-footer__copyright-bar {
	margin-top: var(--wp--preset--spacing--64);
	padding-top: var(--wp--preset--spacing--32);
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 10%, transparent);
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: var(--wp--preset--font-size--small);
	color: color-mix(in srgb, var(--wp--preset--color--white) 50%, transparent);
	gap: var(--wp--preset--spacing--16);
}

@media (min-width: 768px) {

	.rc-footer__copyright-bar {
		flex-direction: row;
		justify-content: space-between;
		gap: 0;
	}
}

.rc-footer__copyright {
	margin: 0;
}

.rc-footer__tags {
	display: flex;
	gap: var(--wp--preset--spacing--24);
}