/*
 * WarMapLive Embed — front end.
 *
 * Scoped entirely under .warmaplive-embed. A plugin stylesheet that touches bare element
 * selectors will collide with somebody's theme sooner or later, and the person who has to work
 * that out is a site owner who has never heard of us.
 */

.warmaplive-embed {
	margin: 0 0 1.5em;
	/* Set inline from the `width` setting; this is the fallback if that is ever dropped. */
	max-width: 100%;
}

.warmaplive-embed__frame {
	display: block;
	width: 100%;
	/* Height comes from an inline style so the setting can control it per embed. */
	min-height: 320px;
	border: 0;
	border-radius: 10px;
	/*
	 * A dark placeholder while the frame loads. The map itself is dark, so a white box that
	 * flashes to near-black is a visible jolt on every page load; this makes the swap invisible.
	 */
	background: #0d1117;
}

.warmaplive-embed__credit {
	margin: 8px 0 0;
	font-size: 12px;
	line-height: 1.5;
	/*
	 * `currentColor` at reduced opacity rather than a fixed grey: this line sits in someone
	 * else's theme, and a hard-coded #666 is invisible on a dark theme and heavy on a light one.
	 */
	color: inherit;
	opacity: 0.7;
}

.warmaplive-embed__credit a {
	color: inherit;
	text-decoration: underline;
}

/* Admin-only "no key yet" notice. Never shown to visitors — see no_key_notice(). */
.warmaplive-embed--setup {
	padding: 14px 16px;
	border: 1px dashed #c3c4c7;
	border-radius: 10px;
	background: #fbfbfc;
	color: #1d2327;
	font-size: 14px;
}

.warmaplive-embed--setup p {
	margin: 0;
}

/*
 * Very small screens: a 600px map on a 320px-wide phone is most of the viewport. Cap it at a
 * proportion of the screen instead, so the page around it stays usable.
 *
 * ⚠️ max-height, not height — it must only ever SHRINK the author's value. Setting height here
 * would override a deliberately short 300px embed and make it taller.
 */
@media (max-width: 480px) {
	.warmaplive-embed__frame {
		max-height: 70vh;
	}
}