/**
 * Moon Phase Display – Frontend Styles
 * Plugin: moon-phase-display
 * Author: Shawn DeWolfe / Web321 Marketing Ltd.
 */

/* ── Wrapper ─────────────────────────────────────────── */
.mpd-wrapper {
	display: block;
	line-height: 0; /* remove inline gap below SVG */
}

/* ── Background container ────────────────────────────── */
.mpd-container {
	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
	line-height: 0; /* prevent layout gaps */
}

/* ── SVG moon ────────────────────────────────────────── */
.mpd-moon-svg {
	display: block;
	max-width: 100%;
	height: auto;
	overflow: visible; /* allow glow filter to bleed outside */
}

/* ── Label row ───────────────────────────────────────── */
.mpd-label {
	display: block;
	line-height: 1.4;
	margin-top: 10px;
	font-family: inherit;
	text-align: center;
}

.mpd-emoji {
	font-size: 1.25em;
	margin-right: 4px;
	vertical-align: middle;
}

.mpd-name {
	font-size: 0.95em;
	font-weight: 600;
	letter-spacing: 0.03em;
	vertical-align: middle;
}

.mpd-age {
	display: block;
	font-size: 0.78em;
	opacity: 0.75;
	margin-top: 3px;
}

/* ── Responsive: never exceed container ──────────────── */
.mpd-container svg {
	max-width: 100%;
	height: auto;
}

/* ── Block editor preview ────────────────────────────── */
.wp-block-moon-phase-display-moon .mpd-wrapper {
	padding: 0;
}