/**
 * KaushalBhavsar.com — Mermaid presentation wrapper
 *
 * Pair with assets/js/mermaid-theme.js (single Mermaid 11 ESM renderer).
 */

/* Raw Custom HTML / core content: chrome on .mermaid itself */
:where(.entry-content, .wp-block-post-content) .mermaid {
	box-sizing: border-box;
	background: #0c1628;
	color: #f5f5f0;
	border: 1px solid #29374a;
	border-radius: 16px;
	padding: clamp(16px, 3vw, 32px);
	margin: 24px 0;
	overflow-x: auto;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	line-height: 1.45;
}

:where(.entry-content, .wp-block-post-content) .mermaid svg {
	display: block;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
}

@media (max-width: 600px) {
	:where(.entry-content, .wp-block-post-content) .mermaid {
		padding: 12px;
		border-radius: 12px;
	}
}

/*
 * KB blog shortcode figure: same chrome on the outer figure so the inner
 * .mermaid (pre → rendered root) does not get a double border.
 */
.kb-blog-article__content .kb-mermaid {
	box-sizing: border-box;
	background: #0c1628;
	color: #f5f5f0;
	border: 1px solid #29374a;
	border-radius: 16px;
	padding: clamp(16px, 3vw, 32px);
	margin: 24px 0;
	overflow-x: auto;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	line-height: 1.45;
	max-width: 100%;
}

.kb-blog-article__content .kb-mermaid__frame {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	overflow: visible;
}

.kb-blog-article__content .kb-mermaid .mermaid,
.kb-blog-article__content .kb-mermaid pre.mermaid {
	box-sizing: border-box;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: inherit;
	font-family: inherit;
	line-height: inherit;
	overflow: visible;
	white-space: pre-wrap;
}

.kb-blog-article__content .kb-mermaid svg {
	display: block;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
}

@media (max-width: 600px) {
	.kb-blog-article__content .kb-mermaid {
		padding: 12px;
		border-radius: 12px;
	}
}