/**
 * VisualBlogger - Callout & code-tab block styling (front-end + editor).
 */

/* ---- Callouts / admonitions ---- */
.vb-callout {
	position: relative;
	margin: 1.5rem 0;
	padding: 1rem 1.25rem 1rem 3rem;
	border: 1px solid;
	border-left-width: 4px;
	border-radius: 6px;
	font-size: 15px;
}
.vb-callout > *:first-child {
	margin-top: 0;
}
.vb-callout > *:last-child {
	margin-bottom: 0;
}
.vb-callout::before {
	position: absolute;
	left: 0.9rem;
	top: 0.95rem;
	font-size: 1.1em;
	line-height: 1;
}

.vb-callout-note {
	background: #eef4ff;
	border-color: #58a6ff;
}
.vb-callout-note::before {
	content: "ℹ️";
}

.vb-callout-tip {
	background: #ecfdf3;
	border-color: #2ea043;
}
.vb-callout-tip::before {
	content: "💡";
}

.vb-callout-warning {
	background: #fff8e6;
	border-color: #f0a020;
}
.vb-callout-warning::before {
	content: "⚠️";
}

.vb-callout-danger {
	background: #fdecec;
	border-color: #e5484d;
}
.vb-callout-danger::before {
	content: "⛔";
}

/* ---- Code tabs ---- */
.vb-code-tabs .vb-tab-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	margin-bottom: -8px;
}
.vb-tab-btn {
	padding: 6px 16px;
	font-size: 13px;
	font-weight: 600;
	color: #c8c8d8;
	background: #2a2a3c;
	border: none;
	border-radius: 6px 6px 0 0;
	cursor: pointer;
}
.vb-tab-btn.is-active {
	color: #fff;
	background: #1e1e2e;
}
.vb-code-tabs.vb-tabs-ready .vb-tab {
	display: none;
}
.vb-code-tabs.vb-tabs-ready .vb-tab.is-active {
	display: block;
}
/* Inside tabs the per-block language badge is redundant. */
.vb-code-tabs .vb-code-lang {
	display: none;
}
.vb-code-tabs .vb-code-snippet {
	margin-top: 0;
}

/* ---- Code file (filename header) ---- */
.vb-code-file {
	margin: 1.5rem 0;
}
.vb-code-filename {
	display: inline-block;
	margin: 0;
	padding: 6px 14px;
	font-family: "SFMono-Regular", Consolas, Menlo, monospace;
	font-size: 12px;
	color: #c8c8d8;
	background: #2a2a3c;
	border-radius: 8px 8px 0 0;
}
.vb-code-file .vb-code-snippet,
.vb-code-file pre.wp-block-code {
	margin-top: 0;
	border-top-left-radius: 0;
}

/* ---- Terminal output ---- */
.vb-terminal {
	position: relative;
	margin: 1.5rem 0;
	padding: 2.4rem 1.1rem 1.1rem;
	background: #0c0c14;
	color: #d6d6e0;
	border-radius: 8px;
	font-family: "SFMono-Regular", Consolas, Menlo, monospace;
	font-size: 13.5px;
	line-height: 1.6;
	overflow-x: auto;
}
.vb-terminal::before {
	content: "● ● ●";
	position: absolute;
	top: 0.6rem;
	left: 1rem;
	letter-spacing: 3px;
	font-size: 11px;
	color: #ff5f56;
}

/* ---- File tree ---- */
.vb-filetree {
	margin: 1.5rem 0;
	padding: 1rem 1.25rem;
	background: #f7f9fc;
	border: 1px solid #e3e8ef;
	border-radius: 8px;
	font-family: "SFMono-Regular", Consolas, Menlo, monospace;
	font-size: 13.5px;
	line-height: 1.7;
	overflow-x: auto;
}

/* ---- Keyboard keys ---- */
kbd {
	display: inline-block;
	padding: 2px 7px;
	font-family: "SFMono-Regular", Consolas, Menlo, monospace;
	font-size: 0.82em;
	line-height: 1.3;
	color: #2a2a3c;
	background: #fafbfc;
	border: 1px solid #d0d7de;
	border-bottom-width: 2px;
	border-radius: 5px;
	box-shadow: inset 0 -1px 0 #d0d7de;
}

/* ---- FAQ accordion ---- */
.vb-faq {
	margin: 1.5rem 0;
}
.vb-faq-item {
	border: 1px solid #e3e8ef;
	border-radius: 8px;
	margin-bottom: 0.6rem;
	overflow: hidden;
}
.vb-faq-q {
	margin: 0;
	padding: 0.85rem 2.4rem 0.85rem 1.1rem;
	font-size: 1rem;
	cursor: pointer;
	position: relative;
	background: #f7f9fc;
}
.vb-faq-q::after {
	content: "+";
	position: absolute;
	right: 1.1rem;
	top: 50%;
	transform: translateY( -50% );
	font-weight: 700;
	color: #58a6ff;
}
.vb-faq-item.is-open .vb-faq-q::after {
	content: "−";
}
.vb-faq-a {
	padding: 0 1.1rem;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.25s ease, padding 0.25s ease;
}
.vb-faq-item.is-open .vb-faq-a {
	padding: 0.4rem 1.1rem 1rem;
	max-height: 1000px;
}

/* ---- How-To steps ---- */
.vb-howto {
	counter-reset: vb-step;
	margin: 1.5rem 0;
}
.vb-step {
	position: relative;
	padding: 0.25rem 0 1.25rem 3.2rem;
	border-left: 2px solid #e3e8ef;
	margin-left: 1rem;
}
.vb-step:last-child {
	border-left-color: transparent;
}
.vb-step::before {
	counter-increment: vb-step;
	content: counter( vb-step );
	position: absolute;
	left: -1rem;
	top: 0;
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	color: #fff;
	background: #58a6ff;
	border-radius: 50%;
}
.vb-step-title {
	margin-top: 0;
}

/* ---- Newsletter ---- */
.vb-newsletter {
	margin: 2rem 0;
	padding: 1.75rem 1.5rem;
	background: linear-gradient( 135deg, #eef4ff, #ecfdf3 );
	border: 1px solid #d8e6ff;
	border-radius: 12px;
}
.vb-newsletter-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin-top: 0.5rem;
}
.vb-newsletter-form input[type="email"] {
	flex: 1 1 240px;
	max-width: 320px;
	padding: 0.65rem 0.9rem;
	border: 1px solid #c3d4ee;
	border-radius: 8px;
	font-size: 15px;
}
.vb-newsletter-form button {
	padding: 0.65rem 1.4rem;
	font-weight: 700;
	color: #fff;
	background: #1a1a2e;
	border: none;
	border-radius: 8px;
	cursor: pointer;
}

/* ---- References ---- */
.vb-references {
	margin: 2rem 0;
	padding: 1.25rem 1.5rem;
	background: #f7f9fc;
	border-left: 4px solid #8a8a9e;
	border-radius: 8px;
	font-size: 0.95em;
}
.vb-references ol {
	margin-bottom: 0;
}

/* ---- Footnotes (core block) ---- */
.wp-block-footnotes {
	font-size: 0.9em;
	color: #555;
	border-top: 1px solid #e3e8ef;
	padding-top: 1rem;
	margin-top: 2rem;
}
a[id^="fn-"],
sup a[href^="#fn"] {
	text-decoration: none;
	font-weight: 600;
}