/*
 * Logo ParkRadar — estilos del shortcode [parkradar_logo]
 *
 * El marcador (círculo) reutiliza exactamente el mismo lenguaje de
 * animación que los pines del mapa del plugin ParkRadar: un aro que se
 * expande y se desvanece en bucle alrededor de un punto verde pequeño
 * (efecto "radar"/zoom). Ver referencia original: .pr-marker / .pr-ring
 * / @keyframes pr-pulse en parkradar/assets/css/parkradar-app.css
 * (mismo timing: 2.2s, cubic-bezier(.4,0,.5,1), scale .55 -> 1.9,
 * opacity .55 -> 0).
 *
 * Todo va namespaced con el prefijo "prlogo-" para no chocar con las
 * clases "pr-" del plugin ParkRadar principal si ambos están activos
 * a la vez.
 *
 * El tamaño es responsivo pero controlado a mano por el usuario: cada
 * instancia del shortcode imprime su propia media query (ver
 * parkradar-logo.php) que fija --prlogo-size-max al valor de "size" en
 * PC y lo cambia al valor de "size_mobile" por debajo de "breakpoint".
 * Aquí solo se define el valor por defecto y cómo se usa esa variable.
 */

.prlogo {
	--prlogo-green: #2EAE71;
	--prlogo-ink: #0a0a0a;
	--prlogo-size-max: 42px;
	--prlogo-size: var(--prlogo-size-max);

	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	line-height: 1;
	vertical-align: middle;
	max-width: 100%;

	/* Centrado vertical dentro del contenedor donde se coloque (p. ej.
	   el header del tema). Si ese contenedor es flex, "align-self" y los
	   márgenes automáticos lo centran en el eje vertical aunque el resto
	   de elementos del header no estén centrados. Si el contenedor no es
	   flex, estas reglas no molestan (no tienen efecto) y "vertical-align:
	   middle" de arriba se encarga del caso inline/tabla. */
	height: 100%;
	align-self: center;
	margin-top: auto;
	margin-bottom: auto;

	/* Por encima del mapa del plugin ParkRadar (admin de parkings).
	   z-index solo funciona en elementos posicionados, por eso se fuerza
	   "position:relative" aquí. El mapa (#pr-map) usa z-index:1, y en
	   móvil el visor a pantalla completa llega hasta z-index:999999
	   !important, así que se deja un margen bien por encima de ambos. */
	position: relative;
	z-index: 999999999;
}

.prlogo--align-center {
	display: flex;
	justify-content: center;
	width: 100%;
}

.prlogo--align-right {
	display: flex;
	justify-content: flex-end;
	width: 100%;
}

.prlogo-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	text-decoration: none;
	color: inherit;
	max-width: 100%;
	height: 100%;
}

/* ---- Icono / marcador ---- */

.prlogo-marker {
	position: relative;
	width: var(--prlogo-size);
	height: var(--prlogo-size);
	flex: none;
	display: inline-block;
}

/* Único círculo: el punto verde pequeño del centro */
.prlogo-core {
	position: absolute;
	top: 24%;
	right: 24%;
	bottom: 24%;
	left: 24%;
	border-radius: 50%;
	background: var(--prlogo-green);
	box-shadow: 0 2px 6px rgba(20, 22, 30, 0.18);
}

/* Aro animado: el mismo "zoom" que usan los marcadores del mapa */
.prlogo-pulse {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: 50%;
	background: var(--prlogo-green);
	animation: prlogo-pulse 2.2s cubic-bezier(0.4, 0, 0.5, 1) infinite;
}

@keyframes prlogo-pulse {
	0% {
		transform: scale(0.55);
		opacity: 0.55;
	}
	70% {
		transform: scale(1.9);
		opacity: 0;
	}
	100% {
		transform: scale(1.9);
		opacity: 0;
	}
}

.prlogo--no-pulse .prlogo-pulse {
	animation: none;
	display: none;
}

/* Respeta preferencia de "reducir movimiento" del usuario */
@media (prefers-reduced-motion: reduce) {
	.prlogo-pulse {
		animation: none;
		display: none;
	}
}

/* ---- Texto "ParkRadar" ---- */

.prlogo-text {
	font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
	font-weight: 700;
	font-size: calc(var(--prlogo-size) * 0.8);
	letter-spacing: -0.01em;
	color: var(--prlogo-ink);
	white-space: nowrap;
}

.prlogo-text-strong {
	font-weight: 700;
}

/* Ajuste fino en pantallas muy pequeñas */
@media (max-width: 380px) {
	.prlogo {
		gap: 0.4em;
	}
}

/* ---- Compatibilidad con widgets de header (p. ej. Astra) ---- */
/*
 * El centrado de ".prlogo" (height:100% + align-self:center) solo
 * funciona si su contenedor directo tiene una altura definida (por
 * ejemplo, si es un flex item de la fila del header). Pero cuando el
 * shortcode se coloca en un widget de texto dentro del header (como en
 * Astra: fila del header -> .ast-builder-layout-element -> .widget ->
 * .textwidget -> shortcode), esos contenedores intermedios son cajas de
 * bloque normales con altura "auto": el porcentaje no tiene de dónde
 * heredar altura y el logo queda pegado arriba en vez de centrado.
 *
 * Con ":has()" subimos SOLO hasta el widget concreto que envuelve el
 * logo (".widget" / ".textwidget", solo cuando contienen el logo) y lo
 * convertimos en flex con altura completa. A propósito NO se tocan
 * contenedores más generales de la fila del header (los que también
 * agrupan el menú u otros elementos), porque esos son compartidos con
 * el resto del header: forzarles el centrado ahí descuadraría el menú
 * y demás elementos, no solo el logo. Compatible con navegadores
 * actuales (2026); en los muy antiguos sin soporte de :has() el logo
 * simplemente vuelve al comportamiento anterior (pegado arriba/abajo
 * según el tema), sin romper nada.
 */
:where(.widget, .textwidget):has(.prlogo) {
	display: flex;
	align-items: center;
	height: 100%;
}

/* Quita el margen que WordPress añade al <p> que envuelve el contenido
   de un widget de texto, que también desplazaba el logo hacia arriba. */
p:has(.prlogo) {
	margin: 0;
	height: 100%;
	display: flex;
	align-items: center;
}