/* gf6 content-generator — front-end styling for generated article boxes.
 * Loaded on the live site so callout boxes have a clear, visible border
 * on white backgrounds (independent of the theme). */

.practical-note,
.av_textblock_section .practical-note,
.gf6-article-body .practical-note,
.entry-content .practical-note {
	background: #fbf8f2 !important;
	border: 3px solid #b07d2e !important;
	border-left: 8px solid #8a5e1c !important;
	border-radius: 8px !important;
	padding: 16px 20px !important;
	margin: 24px 0 !important;
	font-size: 16px !important;
	line-height: 1.65 !important;
	color: #2a2a2a !important;
	box-shadow: 0 2px 10px rgba(17, 32, 42, 0.15) !important;
	display: block !important;
}

.practical-note strong,
.av_textblock_section .practical-note strong,
.gf6-article-body .practical-note strong {
	color: #11202a !important;
}

/* ── Larger article body text for generated articles ─────────────────── */
.gf6-article-body,
.gf6-article-body p,
.gf6-article-body li {
	font-size: 18px !important;
	line-height: 1.75 !important;
}
.gf6-article-body h2 {
	font-size: 26px !important;
	line-height: 1.3 !important;
}
/* Narrow, centred reading column (replaces the old empty 1/5 side columns).
 * Applies to ALL article elements — heading, metadata, divider, body — so the
 * H1/H2 don't run full-width while the text sits narrow. */
.single-post .gf6-article-body,
.single-post .av_textblock_section .gf6-article-body,
.single-post .main_color .av-special-heading,
.single-post .av-special-heading,
.single-post .post-entry .av_textblock,
.single-post .av-post-metadata-container,
.single-post .av_hr {
	max-width: 760px;
	margin-left: auto !important;
	margin-right: auto !important;
}
/* Centre the metadata CONTAINER (same 760px column as H1/text), but keep the
 * text inside it LEFT-aligned so it lines up with the H1 and body, not floating
 * in the page centre. Enfold's align-left already does left; we only need to
 * constrain the width and centre the block. */
#top .single-post .av-post-metadata-container,
#top .av-post-metadata-container.av-metadata-container-align-left,
.single-post .av-post-metadata-container.av-metadata-container-align-left {
	text-align: left !important;
	max-width: 760px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
/* Heading (H1) into the same narrow centred column, text left-aligned. */
#top .single-post .av-special-heading {
	max-width: 760px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: left !important;
}
#top .single-post .av-special-heading .av-special-heading-tag {
	text-align: left !important;
}

/* ── Article tables: clear, visible borders on white ─────────────────── */
.gf6-article-body table,
.single-post .av_textblock_section table {
	border-collapse: collapse !important;
	width: 100% !important;
	margin: 20px 0 !important;
	border: 2px solid #b07d2e !important;
}
.gf6-article-body table th,
.gf6-article-body table td,
.single-post .av_textblock_section table th,
.single-post .av_textblock_section table td {
	border: 1px solid #c79a52 !important;
	padding: 10px 14px !important;
}
.gf6-article-body table th,
.single-post .av_textblock_section table th {
	background: #fbf8f2 !important;
	color: #11202a !important;
	font-weight: 700 !important;
}
.gf6-article-body table tr:nth-child(even) td,
.single-post .av_textblock_section table tr:nth-child(even) td {
	background: #faf8f4 !important;
}

/* ── CSS bar chart (rendered from ranking tables) ────────────────────── */
.gf6-bar-chart {
	margin: 20px 0 28px;
	max-width: 760px;
}
.gf6-bar-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 6px 0;
	font-size: 15px;
}
.gf6-bar-label {
	flex: 0 0 34%;
	text-align: right;
	color: #11202a;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.gf6-bar-track {
	flex: 1 1 auto;
	background: #efe7d6;
	border-radius: 4px;
	height: 20px;
	overflow: hidden;
}
.gf6-bar-fill {
	display: block;
	height: 20px;
	background: linear-gradient(90deg, #c79a52, #b07d2e);
	border-radius: 4px;
}
.gf6-bar-val {
	flex: 0 0 auto;
	color: #55606e;
	font-variant-numeric: tabular-nums;
	min-width: 64px;
}