/*
 * ReaderX footer -- visible footer styling only.
 *
 * Scoped entirely to .readerx-footer and its children so nothing here can
 * affect any other page or component. Reuses the parent's existing
 * .site-footer / .footer-bottom / .footer-links / .footer-copyright-main
 * class names where the parent's own base rules (background, base text
 * color, link hover states) already apply correctly -- only the new
 * ReaderX-specific layout (brand block, description, menu row) is styled
 * here, not a full re-styling of the footer's colors from scratch.
 */

.readerx-footer-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px 32px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
}

.readerx-footer-brand {
	max-width: 560px;
}

.readerx-footer-logo {
	font-size: 20px;
	font-weight: 700;
	color: #FFFFFF;
	letter-spacing: -0.01em;
	margin-bottom: 10px;
}

.readerx-footer-description {
	font-size: 13px;
	line-height: 1.6;
	color: #9CA3AF;
	margin: 0;
}

.readerx-footer-menu .footer-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.readerx-footer-menu .footer-links li {
	margin: 0;
}

.readerx-footer-menu .footer-links a {
	font-size: 13px;
	color: #CFCFCF;
	text-decoration: none;
}

.readerx-footer-menu .footer-links a:hover {
	color: #FFFFFF;
	text-decoration: underline;
}

@media (max-width: 599px) {
	.readerx-footer-inner {
		padding: 0 16px 24px;
		gap: 16px;
	}

	.readerx-footer-menu .footer-links {
		flex-direction: column;
		gap: 12px;
	}
}