/* ============================================================
   Knowledge Center - hub grid + article reading view
   ============================================================ */

.bvfh-knowledge-hero { padding-bottom: 24px; }

.bvfh-knowledge-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	max-width: 900px;
	margin: 0 auto 8px;
	padding: 0 24px;
}
.bvfh-knowledge-filters__count {
	display: inline-block;
	margin-left: 6px;
	font-size: 11px;
	opacity: 0.75;
}

.bvfh-knowledge-grid {
	max-width: 1180px;
	margin: 28px auto 60px;
	padding: 0 24px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}
@media (max-width: 900px) {
	.bvfh-knowledge-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.bvfh-knowledge-grid { grid-template-columns: 1fr; }
}

.bvfh-knowledge-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--bvfh-card, #fff);
	border: 1.5px solid var(--bvfh-border, rgba(4,26,111,0.14));
	border-radius: 16px;
	padding: 22px;
	text-decoration: none;
	color: inherit;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.bvfh-knowledge-card:hover {
	transform: translateY(-3px);
	border-color: var(--bvfh-accent, #00AEEF);
	box-shadow: 0 16px 40px rgba(16, 24, 40, 0.10);
}
.bvfh-knowledge-card h3 { font-size: 17.5px; font-weight: 800; margin: 0; line-height: 1.35; color: var(--bvfh-text, #071A52); }
.bvfh-knowledge-card p { font-size: 14px; color: var(--bvfh-muted, #64748B); margin: 0; flex: 1; line-height: 1.55; }
.bvfh-knowledge-card__meta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	color: var(--bvfh-muted, #64748B);
	font-weight: 600;
}

.bvfh-article__level {
	display: inline-block;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 4px 10px;
	border-radius: 999px;
	width: fit-content;
}
.bvfh-article__level--basics       { background: #E6F7EE; color: #12924F; }
.bvfh-article__level--intermediate { background: #FFF3E0; color: #B5670A; }
.bvfh-article__level--advanced     { background: #FDE8E8; color: #C0392B; }

/* ---------- Single article ---------- */

.bvfh-article {
	max-width: 760px;
	margin: 44px auto 70px;
	padding: 0 24px;
}
.bvfh-article__crumbs {
	display: flex;
	gap: 8px;
	align-items: center;
	font-size: 13px;
	color: var(--bvfh-muted, #64748B);
	margin-bottom: 18px;
}
.bvfh-article__crumbs a { color: var(--bvfh-muted, #64748B); text-decoration: none; }
.bvfh-article__crumbs a:hover { color: var(--bvfh-primary, #041A6F); }

.bvfh-article h1 {
	font-size: 32px;
	line-height: 1.25;
	font-weight: 800;
	color: var(--bvfh-primary, #041A6F);
	margin: 14px 0 10px;
}
.bvfh-article__meta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	color: var(--bvfh-muted, #64748B);
	font-weight: 600;
}
.bvfh-article__meta-row {
	display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.bvfh-article__actions { display: flex; gap: 8px; }
.bvfh-article .bvfh-engagement-bar { margin-bottom: 30px; }
@media print {
	.bvfh-article__actions { display: none !important; }
}

/* A4-page-like reading typography: generous line-height and measure,
   sized so a printed copy reads like a real document, not a web
   snippet - this is deliberately roomier than the calculator UI type
   scale, matching the "full page" length the articles are written at. */
.bvfh-article__body {
	font-size: 16.5px;
	line-height: 1.8;
	color: var(--bvfh-text, #071A52);
}
.bvfh-article__body h2 {
	font-size: 23px;
	font-weight: 800;
	color: var(--bvfh-primary, #041A6F);
	margin: 40px 0 14px;
}
.bvfh-article__body h3 {
	font-size: 18.5px;
	font-weight: 800;
	margin: 28px 0 10px;
}
.bvfh-article__body p { margin: 0 0 18px; }
.bvfh-article__body ul, .bvfh-article__body ol { margin: 0 0 20px; padding-left: 22px; }
.bvfh-article__body li { margin-bottom: 9px; line-height: 1.7; }
.bvfh-article__body strong { color: var(--bvfh-primary, #041A6F); }

.bvfh-article__body .bvfh-callout {
	background: rgba(4, 26, 111, 0.04);
	border: 1.5px solid var(--bvfh-border, rgba(4,26,111,0.14));
	border-left: 4px solid var(--bvfh-accent, #00AEEF);
	border-radius: 10px;
	padding: 18px 22px;
	margin: 24px 0;
	font-size: 15.5px;
}
.bvfh-article__body .bvfh-callout ul { margin-top: 10px; margin-bottom: 6px; }
.bvfh-article__body .bvfh-callout p:last-child { margin-bottom: 0; }

.bvfh-article__body .bvfh-formula {
	display: block;
	background: #0F1E4D;
	color: #fff;
	font-family: 'SFMono-Regular', Consolas, monospace;
	font-size: 14.5px;
	padding: 14px 18px;
	border-radius: 10px;
	margin: 18px 0 24px;
	overflow-x: auto;
}

.bvfh-article__body .bvfh-article-table {
	width: 100%;
	border-collapse: collapse;
	margin: 20px 0 28px;
	font-size: 14.5px;
}
.bvfh-article__body .bvfh-article-table th,
.bvfh-article__body .bvfh-article-table td {
	border: 1px solid var(--bvfh-border, rgba(4,26,111,0.14));
	padding: 10px 12px;
	text-align: left;
}
.bvfh-article__body .bvfh-article-table th {
	background: rgba(4, 26, 111, 0.05);
	font-weight: 800;
	color: var(--bvfh-primary, #041A6F);
}

.bvfh-article__related {
	margin-top: 44px;
	padding-top: 28px;
	border-top: 1.5px dashed var(--bvfh-border, rgba(4,26,111,0.14));
}
.bvfh-article__related h3 { font-size: 16px; margin: 0 0 14px; }
.bvfh-article__related-links { display: flex; flex-wrap: wrap; gap: 10px; }

.bvfh-article__disclaimer {
	margin-top: 30px;
	font-size: 12.5px;
	color: var(--bvfh-muted, #64748B);
	font-style: italic;
	line-height: 1.6;
}

.bvfh-article > .bvfh-btn { margin-top: 26px; }

/* AdSense zones inside the Knowledge templates get the same generous
   vertical rhythm as the article text around them. */
.bvfh-knowledge .bvfh-banner-ad-zone { margin: 30px 0; text-align: center; }

@media (max-width: 640px) {
	.bvfh-article h1 { font-size: 25px; }
	.bvfh-article__body { font-size: 15.5px; }
	.bvfh-article__body h2 { font-size: 20px; }
	.bvfh-article-table { font-size: 13px; }
}