/*
 * El pie.
 *
 * Cuatro composiciones de las que MDB enseña en su documentación, escritas
 * aquí porque MDB no trae componente de pie: lo suyo son utilidades sueltas
 * —un contenedor, una rejilla, un color— y no un bloque que se pueda encender.
 *
 * El reparto de la rejilla lo hace WordPress con sus bloques de columnas, que
 * ya saben apilarse en móvil. Aquí solo va lo que el bloque no sabe: el color,
 * el tratamiento de los enlaces, los títulos de columna y los iconos.
 *
 * Los tokens vacíos no se escriben, así que sin tocar nada el pie sigue al modo
 * claro u oscuro de la página por su cuenta.
 */

/* ──────────────────────────── 1 · La parte de plantilla ── */

.owari-pie {
	background-color: var(--owari-pie-fondo, transparent);
	color: var(--owari-pie-sobre-fondo, inherit);
}

/*
 * La línea de arriba se pone en la PARTE y no en el grupo de la composición.
 *
 * Con fondo propio sobra —el cambio de color ya separa— y dibujarla dejaría un
 * filo más oscuro encima del bloque. Por eso se apaga sola.
 */
.owari-pie--con-linea:not(.owari-pie--con-fondo) {
	border-top: 1px solid var(--mdb-border-color);
}

/*
 * Los enlaces del pie van del color del texto, no del de los enlaces del sitio.
 *
 * Es lo que hace MDB y tiene su motivo: un pie es una lista larga de enlaces, y
 * pintarlos todos del color de acento convierte el bloque en una mancha. Se
 * distinguen al pasar el cursor, que es cuando hace falta.
 */
.owari-pie a:where(:not(.wp-element-button)) {
	color: var(--owari-pie-texto, currentColor);
	text-decoration: none;
	opacity: 0.85;
	transition: opacity 0.2s ease, color 0.2s ease;
}

.owari-pie a:where(:not(.wp-element-button)):hover,
.owari-pie a:where(:not(.wp-element-button)):focus-visible {
	opacity: 1;
	text-decoration: underline;
}

/* ─────────────────────────── 2 · Piezas compartidas ── */

/*
 * Título de columna. El subrayado corto es el gesto de MDB en sus pies: una
 * barra de 3rem bajo el rótulo, no una línea de lado a lado.
 */
.owari-pie-titulo {
	font-size: var(--wp--preset--font-size--pequeno, 0.875rem);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 1.25rem;
	position: relative;
	padding-bottom: 0.75rem;
}

.owari-pie-titulo::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	bottom: 0;
	width: 3rem;
	height: 2px;
	background-color: var(--owari-pie-texto, var(--mdb-primary));
	opacity: 0.7;
}

/* Las listas de enlaces son listas: sin viñeta y con aire entre renglones. */
.owari-pie .wp-block-list,
.owari-pie .wp-block-navigation__container {
	list-style: none;
	padding-inline-start: 0;
	margin: 0;
}

.owari-pie .wp-block-list li + li {
	margin-top: 0.6rem;
}

/*
 * Los iconos sociales, redondos como los botones de MDB.
 *
 * Se viste `core/social-links` en vez de dibujar los iconos a mano: ese bloque
 * ya trae cada servicio con su marca y deja elegirlos y ordenarlos en el editor
 * del sitio, que es justo donde se quieren tocar.
 */
.owari-pie .wp-block-social-links .wp-social-link {
	background-color: color-mix(in srgb, currentColor 12%, transparent);
	color: inherit;
	border-radius: 50%;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.owari-pie .wp-block-social-links .wp-social-link:hover {
	background-color: color-mix(in srgb, currentColor 24%, transparent);
	transform: translateY(-2px);
}

/*
 * El aviso de copyright: una franja tenue, separada por una línea que se dibuja
 * con el color de delante y no con uno fijo, para que valga igual sobre fondo
 * claro que sobre oscuro.
 */
.owari-pie-aviso {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
	font-size: var(--wp--preset--font-size--pequeno, 0.875rem);
	opacity: 0.75;
	text-align: center;
}

/* ───────────────────────── 3 · Básico con columnas ── */

/*
 * Marca y descripción a un lado, columnas de enlaces al otro. La rejilla la
 * pone el bloque de columnas; aquí solo se le da aire a la primera, que lleva
 * texto corrido y no una lista.
 */
.owari-pie-columnas .wp-block-column:first-child {
	padding-inline-end: 1.5rem;
}

@media (max-width: 781px) {
	.owari-pie-columnas .wp-block-column:first-child {
		padding-inline-end: 0;
		margin-bottom: 1rem;
	}
}

/* ──────────────────────── 4 · Centrado con sociales ── */

.owari-pie-centrado {
	text-align: center;
}

.owari-pie-centrado .wp-block-social-links,
.owari-pie-centrado .wp-block-navigation__container {
	justify-content: center;
}

.owari-pie-centrado .wp-block-navigation {
	justify-content: center;
}

/* ─────────────────── 5 · Franja de sociales arriba ── */

/*
 * La franja sale del ancho de lectura a propósito: es el remate superior del
 * pie y, encajada dentro, parecería una tarjeta suelta en vez de una banda.
 *
 * El color es el de acento, y el texto lo decide el contraste que ya calcula el
 * Personalizador para los botones, así que no hace falta elegirlo aparte.
 */
.owari-pie-franja {
	background-color: var(--mdb-primary);
	color: var(--owari-sobre-primary, #fff);
	padding-block: 1.25rem;
	margin-bottom: 2.5rem;
}

.owari-pie-franja a:where(:not(.wp-element-button)) {
	color: inherit;
	opacity: 1;
}

.owari-pie-franja .wp-block-social-links .wp-social-link {
	background-color: transparent;
}

.owari-pie-franja .wp-block-social-links .wp-social-link:hover {
	background-color: color-mix(in srgb, currentColor 20%, transparent);
}

/* ──────────────────── 6 · Con formulario de correo ── */

/*
 * El tema pone la superficie y nada más: el formulario no lleva `action`, así
 * que sin un plugin que lo recoja no va a ninguna parte. Es la regla de siempre
 * —la lógica de negocio vive en los plugins—, y `data-owari-boletin` es el
 * asidero para que uno lo encuentre.
 *
 * El campo lleva `data-owari-mdb` para que el convertidor de formularios del
 * tema lo transforme en un campo de MDB con su etiqueta flotante, igual que los
 * de WooCommerce. No hay nada que escribir para eso.
 */
.owari-pie-boletin {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0.75rem;
}

.owari-pie-boletin .form-outline,
.owari-pie-boletin input[type="email"] {
	flex: 1 1 14rem;
	min-width: 0;
}

/* Sin margen arriba: el campo de MDB no lo lleva y el botón se descolgaría. */
.owari-pie-boletin .btn,
.owari-pie-boletin button {
	margin-top: 0;
	flex: 0 0 auto;
}

/*
 * Un campo de MDB dentro de un pie con fondo propio.
 *
 * MDB pinta el texto, la etiqueta y el trazo con los colores del modo claro sin
 * mirar sobre qué está. En un pie oscuro eso deja el texto escrito en 1,83:1
 * contra el fondo —medido— cuando lo legible empieza en 4,5. Aquí siguen al
 * color del pie, que ya lo decide el contraste del Personalizador, así que
 * valen igual sobre un pie claro que sobre uno oscuro.
 *
 * Las clases se repiten a proposito. No es contra MDB —eso seria (0,2,0)—
 * sino contra una escalera NUESTRA: woocommerce.css fija el color del campo con
 *
 *     body .form-outline.form-outline .form-control.form-control
 *
 * que es un elemento y cuatro clases, (0,4,1). Con la clase del pie delante y
 * sin repetir se queda en (0,3,0) y pierde; repetidas suman (0,5,0), y cinco
 * clases le ganan a cuatro aunque la otra traiga un elemento.
 */
.owari-pie--con-fondo .form-outline.form-outline .form-control.form-control {
	color: currentColor;
}

.owari-pie--con-fondo .form-outline.form-outline .form-label.form-label {
	color: color-mix(in srgb, currentColor 70%, transparent);
}

.owari-pie--con-fondo .form-outline.form-outline .form-notch div {
	border-color: color-mix(in srgb, currentColor 42%, transparent);
}