/**
 * AgriBio readability layer.
 *
 * The theme previously named Source Sans/Serif without shipping their files,
 * so browsers mixed system UI fonts with Georgia. This final layer deliberately
 * uses one Vietnamese-safe system stack for all human-readable interface and
 * editorial text while leaving code and icon fonts alone.
 */

:root {
	--font-readable: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
	--font-sans: var(--font-readable);
	--font-serif: var(--font-readable);
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	font-family: var(--font-readable) !important;
	font-size: 16px;
	line-height: 1.7;
	letter-spacing: 0;
	font-kerning: normal;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/*
 * IDs in :is() give this final layer enough specificity to beat the theme's
 * earlier !important typography rules without touching icon-only spans.
 */
:is(#masthead, #main-content, .academic-context-bar, .site-footer) :where(
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	a,
	li,
	dt,
	dd,
	blockquote,
	figcaption,
	th,
	td,
	label,
	button,
	input,
	textarea,
	select,
	option,
	summary,
	address,
	cite,
	time,
	small,
	strong,
	em
),
.skip-link,
#back-to-top,
.wordmark,
.entry-content,
.post-entry-content {
	font-family: var(--font-readable) !important;
}

#main-content :where(h1, h2, h3, h4, h5, h6) {
	font-weight: 700 !important;
	letter-spacing: -0.012em !important;
	text-wrap: balance;
}

#main-content :where(h1, h2) {
	line-height: 1.22 !important;
}

#main-content :where(h3, h4, h5, h6) {
	line-height: 1.35 !important;
}

#main-content :where(p, li, dd, blockquote, figcaption, td) {
	line-height: 1.68;
}

.entry-content,
.post-entry-content {
	font-size: 17px !important;
	line-height: 1.75 !important;
}

#main-content .entry-content :where(p, li, dd, blockquote),
#main-content .post-entry-content :where(p, li, dd, blockquote) {
	font-size: 17px !important;
	line-height: 1.75 !important;
}

/* Utility text was as small as 10–12px in several layouts. */
.academic-context-bar__inner,
.academic-context-bar__text,
.academic-context-bar__link,
.breadcrumb,
.archive-hero .breadcrumb,
.guide-wiki .breadcrumb,
.glossary-hero .breadcrumb {
	font-size: 13px !important;
	line-height: 1.55 !important;
}

.section-kicker,
.eyebrow,
.toc-box-kicker,
.archive-toolbar-label,
.card-date,
.featured-grid .card-date {
	font-size: 12.5px !important;
	line-height: 1.5 !important;
}

.quick-panel-desc,
.quick-link-meta,
.card-read-more,
.footer-bottom {
	font-size: 13.5px !important;
	line-height: 1.6 !important;
}

.site-footer :where(p, li, a) {
	font-size: 14px;
	line-height: 1.65;
}

.plant-card dt,
.info-panel dt,
.severity {
	font-size: 12px !important;
	line-height: 1.5 !important;
}

.plant-card dd,
.info-panel dd,
.disease-card small {
	font-size: 13.5px !important;
	line-height: 1.55 !important;
}

@media (max-width: 767px) {
	body {
		font-size: 16px !important;
		line-height: 1.68;
	}

	.entry-content,
	.post-entry-content {
		font-size: 16px !important;
		line-height: 1.72 !important;
	}

	#main-content .entry-content :where(p, li, dd, blockquote),
	#main-content .post-entry-content :where(p, li, dd, blockquote) {
		font-size: 16px !important;
		line-height: 1.72 !important;
	}

	.main-navigation a {
		font-size: 16px !important;
	}

	:is(#masthead, #main-content) :where(input, textarea, select) {
		font-size: 16px !important;
	}

	.breadcrumb,
	.archive-hero .breadcrumb,
	.guide-wiki .breadcrumb,
	.glossary-hero .breadcrumb {
		font-size: 13px !important;
	}

	.featured-grid .card-body p,
	.quick-panel-desc,
	.quick-link-meta {
		font-size: 14px !important;
	}
}