/*
Theme Name: MAQRO
Theme URI: https://www.maqro.com.mx
Author: SOLSIES
Author URI: https://solsies.mx
Description: Tema a medida para MAQRO. Conserva el diseño del sitio original en Laravel y lo lleva a WordPress nativo: páginas con el editor de bloques, catálogo de equipos como tipo de contenido propio y pie de página editable por widgets.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 7.4
License: Propietaria
Text Domain: maqro
*/

/* Los estilos del sitio viven en assets/css/main.css y assets/css/bootstrap.min.css,
   que se cargan desde functions.php. Este archivo solo declara el tema.
   Ajustes puntuales para WordPress van al final. */

/* El menú es position: relative, así que no necesita compensar la barra de
   administración. Desplazarlo abría una franja blanca arriba al estar con sesión. */

/* Pie: separación entre sucursales. La primera de cada columna va pegada, como en el sitio original. */
footer .info-dist + .info-dist {
    margin-top: 1rem;
}

/* Páginas convertidas a bloques: las imágenes no llevan el margen inferior
   que WordPress les da por defecto, porque el diseño original no lo tenía. */
.wp-block-group .wp-block-image {
    margin: 0;
}

/* Imagen dentro de un contenedor flex de Bootstrap (d-flex): el <figure> que
   agrega WordPress se vuelve el elemento flexible y la imagen colapsa a 0 px.
   Con display: contents la imagen vuelve a ser hija directa, como en el original. */
.d-flex > .wp-block-image {
    display: contents;
}

/* Alineaciones del editor de bloques */
.alignright {
    float: right;
    margin: 0 0 1em 1.5em;
}

.alignleft {
    float: left;
    margin: 0 1.5em 1em 0;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption {
    max-width: 100%;
}

.wp-caption-text,
.wp-block-image figcaption {
    font-size: 0.875rem;
    text-align: center;
}

.screen-reader-text {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #fff;
    clip-path: none;
    color: #111;
    display: block;
    font-size: 1rem;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* ---------- Aviso "¡No te dejes engañar!" de la portada ----------
   Sus estilos vienen escritos en el HTML (style="…"), por eso los !important.
   El original le daba al cuadro el 50% del ancho y al fondo el 100% del alto:
   en celular quedaba una columna de 187 px con el texto saliéndose sin poder
   desplazarse. Ahora el fondo cubre la pantalla, se desplaza por dentro si el
   aviso es más alto, y el cuadro usa el ancho disponible hasta 680 px. */
#alertBox {
	position: fixed !important;
	inset: 0;
	width: auto !important;
	height: auto !important;
	padding: 24px 16px;
	overflow-y: auto;
	overscroll-behavior: contain;
	align-items: flex-start !important;
	z-index: 1100 !important;
}

#alertBox > div {
	width: 100% !important;
	max-width: 680px;
	margin: auto;
}

#alertBox ul {
	padding-left: 1.2rem;
}

#alertBox ul ul {
	padding-left: .9rem;
}

@media (max-width: 575.98px) {
	#alertBox > div > div:nth-child(2) {
		font-size: 18px !important;
	}

	#alertBox > div > div:nth-child(3) {
		font-size: 15px !important;
		padding: 6px 18px 12px !important;
	}

	#alertBox > div > div:nth-child(4) {
		font-size: 14px !important;
	}
}

/* Fotos del catálogo (tarjetas de categoría y carrusel de la ficha): WordPress
   añade los atributos width/height de la imagen y el CSS original solo fija el
   ancho, así que el alto se quedaba en el de la imagen. */
.archive-products .equipo img,
.single-products .equipo img {
	height: auto;
}

/* Quiénes somos, "Nuestra Misión / Visión / Objetivos / Valores": el CSS
   original deja siempre 4 columnas del 24% con títulos de 30 px, y en celular
   (88 px por columna) los títulos se enciman. Ahí van 2 columnas y título de 22 px. */
@media (max-width: 767.98px) {
	.quienes-somos .sec-3 ul li {
		width: 49%;
	}

	.quienes-somos .sec-3 ul li .titulo h3 {
		font-size: 22px;
	}
}