/*
Theme Name: Restauración Moto Clásica
Description: Tema hijo de Twenty Twenty-Five con la tipografía, los colores, la cabecera y el pie de la web de Restauración Moto Clásica.
Template: twentytwentyfive
Version: 1.0.3
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rmc-moto-clasica
*/

/* Elemento del menú de la página actual, en rojo (como en la web original). */
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .current-menu-item > a {
	color: var(--wp--preset--color--accent-1);
}

/* Estilo de párrafo «Subtítulo» (p. ej. «RESTAURACIÓN DE», «MOTOS CLÁSICAS»). */
.is-style-rmc-subtitulo {
	font-family: var(--wp--preset--font-family--cabin-condensed);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.3;
	letter-spacing: 3.7px;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-4);
	margin-bottom: 0.3em;
}

/* Estilo de título «Con línea roja» (línea de 100 × 4 px bajo el título). */
.is-style-rmc-con-linea::after {
	content: "";
	display: block;
	width: 100px;
	height: 4px;
	margin-top: 0.55em;
	background: var(--wp--preset--color--accent-1);
}
.has-text-align-center.is-style-rmc-con-linea::after {
	margin-left: auto;
	margin-right: auto;
}
.has-text-align-right.is-style-rmc-con-linea::after {
	margin-left: auto;
}

/* Cabecera de la portada: el título grande no debe romper en móvil. */
.rmc-portada-titulo {
	overflow-wrap: anywhere;
}

/* Galerías: la última fila no se estira (mismas medidas que el resto de fotos). */
.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
	flex-grow: 0;
}

/* Franja de logos de marcas. */
.rmc-logos {
	gap: 24px;
}
@media (max-width: 600px) {
	.rmc-logos img {
		width: 46px;
		height: auto;
	}
}

/* Cuadrículas de restauraciones: 3 columnas en tableta y 2 en móvil. */
@media (max-width: 600px) {
	.rmc-ultimas .wp-block-post-template.is-layout-grid,
	.rmc-rejilla .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}
@media (min-width: 601px) and (max-width: 1024px) {
	.rmc-rejilla .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}
.rmc-rejilla .wp-block-post-featured-image {
	margin-bottom: 0;
}

/* Cuadrícula con el título encima de la foto al pasar el ratón (Imágenes, Vídeos). */
.rmc-rejilla-hover .wp-block-post {
	position: relative;
	overflow: hidden;
}
.rmc-rejilla-hover .wp-block-post-title {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 18px;
	line-height: 1.2;
	background: rgba(0, 0, 0, 0.7);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}
.rmc-rejilla-hover .wp-block-post-title a,
.rmc-rejilla-hover .wp-block-post-title a:hover {
	color: #ffffff;
}
.rmc-rejilla-hover .wp-block-post:hover .wp-block-post-title,
.rmc-rejilla-hover .wp-block-post:focus-within .wp-block-post-title {
	opacity: 1;
}
/* En pantallas táctiles (sin ratón) el título se ve siempre, abajo. */
@media (hover: none) {
	.rmc-rejilla-hover .wp-block-post-title {
		opacity: 1;
		inset: auto 0 0 0;
		align-items: flex-end;
		font-size: 13px;
		padding: 24px 6px 6px;
		background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
	}
}

/* Navegación anterior / siguiente en las fichas. */
.wp-block-post-navigation-link a {
	font-family: var(--wp--preset--font-family--fjalla-one);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}
.wp-block-post-navigation-link a:hover {
	color: var(--wp--preset--color--accent-1);
}

/* Datos de contacto. */
.rmc-contacto-datos p {
	margin: 0;
	padding: 14px 0;
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
}
.rmc-contacto-datos p:last-child {
	border-bottom: 0;
}
.rmc-contacto-datos strong {
	font-family: var(--wp--preset--font-family--fjalla-one);
	font-weight: 400;
	color: var(--wp--preset--color--contrast);
	letter-spacing: 0.7px;
	margin-right: 0.4em;
}
.rmc-contacto-datos a {
	color: var(--wp--preset--color--accent-4);
	text-decoration: none;
}
.rmc-contacto-datos a:hover {
	color: var(--wp--preset--color--accent-1);
}

/* Formulario (Contact Form 7). */
.wpcf7 form p {
	margin: 0 0 1.2em;
}
.wpcf7 label {
	display: block;
	color: var(--wp--preset--color--contrast);
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 select,
.wpcf7 textarea {
	box-sizing: border-box;
	width: 100%;
	margin-top: 6px;
	padding: 12px 14px;
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 0;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: 16px;
}
.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 0;
	border-color: var(--wp--preset--color--accent-1);
}
.wpcf7 input[type="submit"] {
	padding: 14px 36px;
	border: 0;
	border-radius: 0;
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--fjalla-one);
	font-size: 15px;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	cursor: pointer;
}
.wpcf7 input[type="submit"]:hover,
.wpcf7 input[type="submit"]:focus {
	background: var(--wp--preset--color--contrast);
}