/**
 * Typography — sans-serif hệ thống, tối ưu khả năng đọc tiếng Việt.
 */

: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);
}

body,
button,
input,
textarea,
select {
	font-family: var(--font-sans) !important;
}

body {
	font-size: 17px;
	line-height: 1.72;
	letter-spacing: 0.005em;
}

h1,
h2,
h3,
h4,
.wordmark,
.hero h1,
.section-heading h2,
.page-hero h1,
.article-header h1,
.record-header h1,
.entry-content,
.post-entry-content,
.article-lead,
.scientific-name,
.hero-description,
.page-hero > p,
.topic-card p,
.card-body p,
.plant-card dd,
.disease-card p,
.nutrient-card p,
.knowledge-list p,
.term-list p,
.quick-summary li,
.faq-box p,
.reference-box p,
.info-panel dd {
	font-family: var(--font-serif) !important;
}

h1,
h2,
h3,
h4,
.wordmark {
	font-weight: 700 !important;
}

h1 { font-size: clamp(2rem, 4vw, 3.25rem); }
h2 { font-size: clamp(1.55rem, 2.7vw, 2.15rem); }
h3 { font-size: clamp(1.1rem, 1.8vw, 1.32rem); }

p { line-height: 1.78; }

.main-navigation a,
.site-tagline,
.site-header,
.button,
.search-form-large input,
.search-form-large button,
.section-kicker,
.eyebrow,
.breadcrumb,
.article-meta,
.article-meta-row,
.card-date,
.filter-tabs button,
.chip,
.share-block,
.toc-box,
.toc-toggle,
.footer-grid,
.site-footer,
.directory-filters select,
.filter-search input {
	font-family: var(--font-sans) !important;
}

.main-navigation a { font-size: 14px; }
.site-tagline { font-size: 11px; }
.button,
.search-form-large button { font-size: 15px; }
.section-kicker,
.eyebrow { font-size: 12px; }
.page-hero p,
.hero-description { font-size: 17px; }
.entry-content,
.post-entry-content { font-size: 17px; line-height: 1.82; }
.entry-content h2,
.post-entry-content h2 { font-size: clamp(1.5rem, 2.4vw, 1.95rem); }
.entry-content h3,
.post-entry-content h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }
.article-meta,
.card-date { font-size: 13px; }
.breadcrumb { font-size: 13px; }
.footer-grid p,
.footer-grid li,
.footer-bottom { font-size: 14px; }

@media (min-width: 861px) {
	.header-inner { min-height: 72px; }
	.main-navigation a { font-size: 14px; padding-block: 24px 21px; }
	.site-tagline { font-size: 11px; }
	.wordmark { font-size: 24px; }
	.hero h1 { font-size: clamp(2.5rem, 4vw, 3.65rem); }
	.hero-description { font-size: 18px; }
	.search-form-large input { font-size: 15px; }
	.search-form-large button { font-size: 14px; }
	.suggestions,
	.suggestions > a { font-size: 12px; }
	.section-kicker { font-size: 11px; }
	.section-heading h2 { font-size: 30px; }
	.section-heading > p { font-size: 15px; }
	.topic-card h3 { font-size: 19px; }
	.topic-card p { font-size: 14px; line-height: 1.68; }
	.topic-card > a { font-size: 14px; }
	.filter-tabs button { font-size: 13px; }
	.card-body h3 { font-size: 18px; }
	.card-body p { font-size: 14px; line-height: 1.65; }
	.card-date { font-size: 12px; }
	.quick-box h3 { font-size: 17px; }
	.chip { font-size: 13px; }
	.page-hero h1 { font-size: clamp(2.1rem, 3.4vw, 2.85rem); }
	.page-hero p { font-size: 16px; }
	.directory-filters select,
	.filter-search input { font-size: 14px; }
	.plant-card h2,
	.disease-card h2 { font-size: 18px; }
	.plant-card em,
	.plant-card dd,
	.disease-card p { font-size: 13px; }
	.nutrient-card h2,
	.knowledge-list h2 { font-size: 18px; }
	.nutrient-card p,
	.knowledge-list p { font-size: 14px; }
	.term-list h2 { font-size: 19px; }
	.term-list p { font-size: 14px; }
	.article-header h1 { font-size: clamp(2.1rem, 3.5vw, 3rem); }
	.article-lead,
	.scientific-name { font-size: 17px; }
	.article-meta { font-size: 13px; }
	.quick-summary h2,
	.faq-box h2,
	.key-points h2,
	.reference-box h2 { font-size: 20px; }
	.quick-summary li,
	.faq-box p,
	.reference-box p { font-size: 15px; }
	.article-tabs a { font-size: 13px; }
	.info-panel h2 { font-size: 18px; }
	.info-panel dt { font-size: 12px; }
	.info-panel dd { font-size: 14px; }
}

@media (max-width: 767px) {
	body { font-size: 16px; }
	h1 { font-size: clamp(1.9rem, 9vw, 2.55rem); }
	h2 { font-size: clamp(1.5rem, 7vw, 1.95rem); }
	.hero h1 { font-size: clamp(2.15rem, 10vw, 2.85rem); }
	.hero-description,
	.page-hero p { font-size: 16px; }
	.entry-content,
	.post-entry-content { font-size: 16px; }
	.entry-content h2,
	.post-entry-content h2 { font-size: 1.45rem; }
	.entry-content h3,
	.post-entry-content h3 { font-size: 1.2rem; }
	.main-navigation a { font-size: 16px; }
	.topic-card h3 { font-size: 18px; }
	.topic-card p,
	.card-body p { font-size: 15px; }
	.card-body h3 { font-size: 19px; }
	.footer-grid p,
	.footer-grid li { font-size: 14px; }
}