body {
	font-family: var(--mn-font-body);
	font-size: var(--mn-text-base);
	line-height: 1.6;
	color: var(--mn-color-text);
	background-color: var(--mn-color-background);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--mn-font-heading);
	font-weight: 600;
	line-height: 1.25;
	color: var(--mn-color-text);
	margin-top: 0;
	margin-bottom: var(--mn-space-4);
}

h1 { font-size: var(--mn-text-4xl); }
h2 { font-size: var(--mn-text-3xl); }
h3 { font-size: var(--mn-text-2xl); }
h4 { font-size: var(--mn-text-xl); }
h5 { font-size: var(--mn-text-lg); }
h6 { font-size: var(--mn-text-base); }

a {
	color: var(--mn-color-primary);
	text-decoration: none;
	transition: color 0.2s ease-in-out;
}

a:hover, a:focus {
	color: var(--mn-color-secondary);
}

p {
	margin-top: 0;
	margin-bottom: var(--mn-space-4);
}

/* Text Utilities */
.text-muted { color: var(--mn-color-text-muted); }
.text-primary { color: var(--mn-color-primary); }
.text-secondary { color: var(--mn-color-secondary); }

/* ============================================================
   Content area guards
   Long words/URLs, embeds, code blocks and tables must never
   push the page wider than the viewport on small screens.
   ============================================================ */
.entry-content {
	overflow-wrap: break-word;
}

/* Embedded media shrinks to its container instead of overflowing. */
.entry-content iframe,
.entry-content embed,
.entry-content object,
.entry-content video,
.entry-content audio {
	max-width: 100%;
}

/* Code blocks scroll horizontally inside their own box. */
.entry-content pre {
	overflow-x: auto;
}

/* Wide tables scroll inside their own box instead of widening the page. */
.entry-content table {
	display: block;
	width: max-content;
	max-width: 100%;
	overflow-x: auto;
}

/* Same guards for widget areas (sidebar, footer, offcanvas). */
.widget iframe,
.widget embed,
.widget object {
	max-width: 100%;
}