/**
 * Pie del sitio.
 *
 * Cierra la página con la misma tinta con la que se abre la banda de la revista, así que
 * el blanco del periodismo queda enmarcado arriba y abajo. Tres columnas —marca+redes,
 * secciones, suscripción— y debajo el cintillo legal.
 *
 * Depende de assets/css/base.css.
 */

/*
 * La línea del espectro corona el pie igual que corona la página en el header: el blanco
 * del periodismo queda enmarcado por el degradado de la marca, arriba y abajo. Va en el
 * borde con dos fondos apilados —tinta sobre degradado— para no meter un pseudo ni afectar
 * al modelo de caja.
 */
.radiowp-footer {
	background-color: var(--radiowp-color-ink);
	color: var(--radiowp-color-on-ink);
	border-top: 3px solid transparent;
	background-image:
		linear-gradient(var(--radiowp-color-ink), var(--radiowp-color-ink)),
		linear-gradient(90deg, var(--radiowp-color-spectrum-start), var(--radiowp-color-spectrum-end));
	background-origin: border-box;
	background-clip: padding-box, border-box;
}

.radiowp-footer__inner {
	display: grid;
	gap: clamp(1.75rem, 4vw, 2.5rem);
	max-width: var(--radiowp-container);
	margin-inline: auto;
	padding: calc(var(--radiowp-section-space) * 1.35) var(--radiowp-gutter);
}

/* --- Marca (con las redes debajo) -------------------------------------------- */

.radiowp-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.875rem;
}

.radiowp-footer__home {
	display: inline-block;
	text-decoration: none;
}

/* El alto manda; el ancho lo dicta la proporción del monograma. */
.radiowp-footer .radiowp-footer__logo {
	display: block;
	width: auto;
	height: var(--radiowp-footer-logo-height, 3rem);
}

.radiowp-footer__wordmark {
	color: var(--radiowp-color-on-ink);
	font-family: var(--radiowp-font-display);
	font-size: 1.25rem;
	font-weight: 600;
}

.radiowp-footer__tagline {
	margin: 0;
	max-width: 32ch;
	color: var(--radiowp-color-on-ink-muted);
	font-size: 0.875rem;
	line-height: var(--radiowp-line-height-body);
}

/* --- Columnas ----------------------------------------------------------------- */

.radiowp-footer__column {
	min-width: 0;
}

/* El rojo de marca sobre tinta da 4.29:1, insuficiente para un texto de este tamaño. */
.radiowp-footer__title {
	margin: 0 0 1rem;
	color: var(--radiowp-color-accent-on-dark);
	--radiowp-heading-color: var(--radiowp-color-accent-on-dark);
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.11em;
	line-height: 1;
	text-transform: uppercase;
}

/* Secciones: en móvil una columna; en escritorio, dos. */
.radiowp-footer__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.55rem 1.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.radiowp-footer__list a {
	color: var(--radiowp-color-on-ink-muted);
	font-size: 0.875rem;
	text-decoration: none;
	transition: color var(--radiowp-transition);
}

/* Solo el color en los estados: el tema pone `a:visited` y `a:hover` oscuros. Va aparte
   porque una regla con estado pesa más que las de escritorio y les pisaría el tamaño. */
.radiowp-footer__list a:visited,
.radiowp-footer__list a:hover,
.radiowp-footer__list a:focus,
.radiowp-footer__list a:active {
	color: var(--radiowp-color-on-ink-muted);
}

.radiowp-footer__list a:hover {
	color: var(--radiowp-color-on-ink);
}

/* --- Suscripción -------------------------------------------------------------- */

.radiowp-footer__text {
	margin: 0 0 1.15rem;
	max-width: 34ch;
	color: var(--radiowp-color-on-ink-muted);
	font-size: 0.875rem;
	line-height: var(--radiowp-line-height-body);
}

.radiowp-footer__subscribe {
	display: inline-flex;
	align-items: center;
	background-color: var(--radiowp-color-accent-ink);
	border-radius: var(--radiowp-radius);
	color: var(--radiowp-color-accent-contrast);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1;
	padding: 0.8125rem 1.375rem;
	text-decoration: none;
	transition: background-color var(--radiowp-transition);
	white-space: nowrap;
}

/* Solo el color en los estados: el tema pone `a:visited` y `a:hover` oscuros. Va aparte
   porque una regla con estado pesa más que las de escritorio y les pisaría el tamaño. */
.radiowp-footer__subscribe:visited,
.radiowp-footer__subscribe:hover,
.radiowp-footer__subscribe:focus,
.radiowp-footer__subscribe:active {
	color: var(--radiowp-color-accent-contrast);
}

.radiowp-footer__subscribe:hover,
.radiowp-footer__subscribe:focus-visible {
	background-color: var(--radiowp-color-accent-hover);
	color: var(--radiowp-color-accent-contrast);
}

/* --- Redes (debajo de la marca) ---------------------------------------------- */

.radiowp-footer__socials {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0.35rem 0 0;
	padding: 0;
}

.radiowp-footer__social {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 50%;
	color: var(--radiowp-color-on-ink-muted);
	transition: color var(--radiowp-transition), border-color var(--radiowp-transition);
}

/* Solo el color en los estados: el tema pone `a:visited` oscuro, que en modo oscuro
   dejaba este texto gris sobre negro. */
.radiowp-footer__social:visited,
.radiowp-footer__social:hover,
.radiowp-footer__social:focus,
.radiowp-footer__social:active {
	color: var(--radiowp-color-on-ink-muted);
}

.radiowp-footer__social:hover {
	border-color: var(--radiowp-color-on-ink);
	color: var(--radiowp-color-on-ink);
}

/* --- Cintillo legal ----------------------------------------------------------- */

/* Fila del selector de tema, encima del cintillo legal, alineada a la derecha. */
.radiowp-footer__theme {
	display: none;
}

html[data-radiowp-themeable] .radiowp-footer__theme {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.75rem;
	max-width: var(--radiowp-container);
	margin-inline: auto;
	padding: 0 var(--radiowp-gutter) 1.25rem;
	color: var(--radiowp-color-on-ink);
}

.radiowp-footer__theme-label {
	color: var(--radiowp-color-on-ink-muted);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

@media (max-width: 30rem) {
	html[data-radiowp-themeable] .radiowp-footer__theme {
		justify-content: center;
	}
}

.radiowp-footer__legal {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	max-width: var(--radiowp-container);
	margin-inline: auto;
	padding: 1.5rem var(--radiowp-gutter) 1.75rem;
	color: var(--radiowp-color-on-ink-muted);
}

/* Letra pequeña y justificada: es el pie de imprenta, se lee si se busca, no grita. */
.radiowp-footer__legal-notice {
	margin: 0;
	font-size: 0.72rem;
	line-height: 1.55;
	text-align: justify;
	hyphens: auto;
}

.radiowp-footer__legal-disclaimer {
	margin: 0.6rem 0 0;
	font-size: 0.72rem;
	line-height: 1.55;
	font-style: italic;
}

.radiowp-footer__hint {
	margin: 0;
	color: var(--radiowp-color-on-ink-muted);
	font-size: 0.8125rem;
}

.radiowp-footer a:focus-visible,
.radiowp-footer button:focus-visible {
	outline: 2px solid var(--radiowp-color-accent-on-dark);
	outline-offset: 3px;
	border-radius: var(--radiowp-radius);
}

/* --- Rejilla de columnas ------------------------------------------------------ */

@media (min-width: 48rem) {
	.radiowp-footer__inner {
		grid-template-columns: 1.3fr 1fr 1fr;
		grid-template-areas: "brand menu subscribe";
		align-content: start;
		gap: 2rem clamp(2rem, 4vw, 3.5rem);
	}

	.radiowp-footer__brand {
		grid-area: brand;
	}

	.radiowp-footer__column--menu {
		grid-area: menu;
	}

	.radiowp-footer__column--subscribe {
		grid-area: subscribe;
	}

	/* Secciones en dos sub-columnas cuando hay ancho. */
	.radiowp-footer__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/*
	 * Sin el bloque de suscripción, dos columnas: la tercera se retira, no se reparte su
	 * ancho. Va después de la regla de tres y con la misma especificidad, así que gana por
	 * orden.
	 */
	.radiowp-footer__inner--no-subscribe {
		grid-template-columns: 1.4fr 1fr;
		grid-template-areas: "brand menu";
	}
}