/* map — Leaflet over OpenStreetMap, contact page only.
 *
 * Loaded lazily: the map must not weigh on the first render of the contact
 * page. Leaflet's default styling ships blue links and a rounded popup, so
 * everything visible is overridden here.
 *
 * The tile layer needs referrerPolicy: "origin" or OpenStreetMap blocks the
 * requests — that is set in assets/js/map.js, not here.
 */

/* 520 de alto y el filete alrededor: medido en la pantalla 05. El fondo en
 * color de borde es lo que se ve mientras cargan las teselas — gris de la
 * paleta, no el blanco que deja Leaflet. */
.tci-map {
	height: 520px;
	border: var(--tci-hairline) solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--border);
}

/* Sin coordenadas no hay caja gris vacía: sale la dirección y una nota que
 * dice dónde se ponen. Un hueco vacío parece roto; esto parece pendiente. */
.tci-map--empty {
	height: auto;
	background: var(--wp--preset--color--bone);
	padding: 40px 32px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	justify-content: center;
	min-height: 240px;
}

.leaflet-container {
	font-family: var(--wp--preset--font-family--space-grotesk);
	background: var(--wp--preset--color--border);
}

.leaflet-container a {
	color: var(--wp--preset--color--red);
}

.leaflet-control-zoom a {
	background: var(--wp--preset--color--graphite);
	color: var(--wp--preset--color--bone);
	border: 0;
	font-family: var(--wp--preset--font-family--rajdhani);
	font-weight: 700;
}

.leaflet-control-zoom a:hover {
	background: var(--wp--preset--color--red);
	color: var(--wp--preset--color--bone);
}

.leaflet-control-attribution {
	background: var(--wp--preset--color--bone);
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: 10px;
	color: var(--wp--preset--color--text-muted);
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: var(--wp--preset--color--graphite);
	color: var(--wp--preset--color--bone);
	box-shadow: none;
}

.leaflet-popup-content {
	font-size: var(--wp--preset--font-size--md, 15px);
	margin: 16px 20px;
}

.leaflet-popup-content strong {
	font-family: var(--wp--preset--font-family--rajdhani);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.leaflet-popup-close-button {
	color: var(--wp--preset--color--bone) !important;
}

/* ---- Marker --------------------------------------------------------------
 *
 * Placa roja con «TCI» y una punta que baja al sitio exacto. Dibujada en CSS:
 * ni una petición más y toma los colores de la paleta.
 *
 * El diseño la resuelve con un círculo y una sombra. Las dos cosas están
 * prohibidas en la marca —y `border-radius: 0 !important` de base.css se
 * llevaría el círculo por delante—, así que se queda la idea, que es la buena:
 * texto y no logotipo, porque el escudo a 40px es una mancha.
 *
 * Un cuadrado suelto no se lee como marcador, se lee como un fallo de render.
 * Lo que lo convierte en pin es la punta, y por eso el ancla en map.js está en
 * los 52px de abajo y no en el centro.
 */

.tci-map-pin {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: var(--wp--preset--color--red);
	border: 2px solid var(--wp--preset--color--bone);
	font-family: var(--wp--preset--font-family--rajdhani);
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--bone);
}

/* La punta son dos triángulos, uno detrás del otro: el de hueso hace de borde
 * y el rojo va encima, un pelo más pequeño. Un solo triángulo dejaría la placa
 * perfilada y el pico a pelo. */
.tci-map-pin::before,
.tci-map-pin::after {
	content: "";
	position: absolute;
	left: 50%;
	width: 0;
	height: 0;
	border-left: 9px solid transparent;
	border-right: 9px solid transparent;
}

.tci-map-pin::before {
	top: calc(100% + 2px);
	margin-left: -9px;
	border-top: 12px solid var(--wp--preset--color--bone);
}

.tci-map-pin::after {
	top: 100%;
	margin-left: -7px;
	border-left-width: 7px;
	border-right-width: 7px;
	border-top: 9px solid var(--wp--preset--color--red);
}

@media (max-width: 1024px) {
	.tci-map { height: 420px; }
}

@media (max-width: 640px) {
	.tci-map { height: 300px; }
}