/*
 * Glossary — shared styling for hand-authored glossary HTML.
 *
 * Used primarily by the per-language Glossary side panel on the
 * translations.odsites.org single-post view (rendered by
 * od_translations_single_glossary_panel() in inc/translations/
 * translations-single.php), where the available width is narrow
 * (40% of the viewport, min 360px) and lives next to the article.
 *
 * Class names are fixed by the source HTML files in
 * translation/glossary/glossary_{lang}.html and MUST NOT be renamed
 * here — the authoring side is the source of truth.
 *
 * Design tenets:
 *   - Stacked rows (term above translation) so two columns never
 *     squeeze illegibly in the narrow panel. Stacking also degrades
 *     gracefully if the same HTML is pasted into a regular post.
 *   - Quiet typography. The glossary is a reference table, not a
 *     hero element. No outer borders, no shadows, no chrome.
 *   - Group headings act as scan anchors, intentionally tight.
 *
 * Enqueued site-wide (frontend + admin + block editor) by
 * od_register_add_styles / od_register_add_admin_styles in
 * func/od-register-enqueue.php so the same markup renders
 * consistently if it ever appears outside the dedicated panel.
 */

.od-glossary-section {
	font-size: 1rem;
	line-height: 1.4;
	color: #222;
}

.od-glossary-title {
	margin: 0 0 0.5rem;
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--od-color-purple);
}

.od-glossary-intro {
	margin: 0 0 1.25rem;
	font-size: 0.8rem;
	font-style: italic;
	color: #555;
}

/* Table is a container only; rows do the visual work. Reset any
   theme/browser defaults that would add outer borders or spacing. */
.od-glossary-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: none;
}

/* Stack term + translation vertically. This avoids two-column
   cramping in narrow contexts and keeps long translations readable. */
.od-glossary-row {
	display: block;
	padding: 0.2rem 0;
	border-bottom: 1px solid #eee;
}

.od-glossary-row:last-child {
	border-bottom: 0;
}

.od-glossary-term,
.od-glossary-translation {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.od-glossary-term {
	font-weight: 600;
	color: #000;
	margin-bottom: 0.05rem;
}

.od-glossary-translation {
	color: #333;
}

.od-glossary-note {
	display: block;
	margin-left: 0.25rem;
	font-size: 0.75rem;
	font-style: italic;
	color: #777;
}