/*
 * Baharlink — content-level styles (singular, archive content, components).
 * Loaded only on singular/archive/search views (enqueued conditionally).
 */

/* ==========================================================================
   1) Article typography
   ========================================================================== */
.entry-content h2 {
	font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.55rem);
	margin: 2em 0 0.8em;
	padding-top: 0.2em;
	scroll-margin-top: calc(var(--bl-header-h) + 24px);
}
.entry-content h3 {
	font-size: clamp(1.1rem, 1.05rem + 0.4vw, 1.3rem);
	margin: 1.6em 0 0.7em;
	scroll-margin-top: calc(var(--bl-header-h) + 24px);
}
.entry-content p { margin-bottom: 1.1em; }
.entry-content a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--bl-primary) 40%, transparent); text-underline-offset: 3px; }
.entry-content a:hover { text-decoration-color: currentColor; }
.entry-content ul,
.entry-content ol { margin: 0 0 1.2em; }
.entry-content li { margin-bottom: 0.4em; }
.entry-content li > ul,
.entry-content li > ol { margin-top: 0.4em; }
.entry-content blockquote {
	margin: 1.5em 0;
	padding: 0.8em 1.2em;
	border-inline-start: 3px solid var(--bl-primary);
	background: var(--bl-bg-soft);
	border-radius: 0 var(--bl-r) var(--bl-r) 0;
	color: var(--bl-text-2);
}
.entry-content blockquote p:last-child { margin-bottom: 0; }
.entry-content img { border-radius: var(--bl-r-lg); }
.entry-content hr {
	border: 0;
	border-top: 1px solid var(--bl-border);
	margin: 2em auto;
}

/* Inline code islands (always LTR, isolated) */
.entry-content code {
	direction: ltr;
	unicode-bidi: isolate;
	background: var(--bl-surface-2);
	border: 1px solid var(--bl-border);
	border-radius: 6px;
	padding: 0.1em 0.4em;
	font-size: 0.88em;
	color: var(--bl-deep);
}
[data-theme="dark"] .entry-content code { color: var(--bl-primary-strong); }

/* ==========================================================================
   2) Code blocks (copy button is progressive enhancement)
   ========================================================================== */
.bl-code,
.entry-content pre {
	direction: ltr;
	text-align: left;
	unicode-bidi: isolate;
	background: #0B1220;
	color: #E2E8F0;
	border: 1px solid #1E293B;
	border-radius: var(--bl-r-lg);
	margin: 1.5em 0;
	overflow: hidden;
}
[data-theme="dark"] .bl-code,
[data-theme="dark"] .entry-content pre {
	background: #0A0F1A;
}
.bl-code__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.45rem 0.9rem;
	background: rgba(255, 255, 255, 0.04);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.bl-code__lang {
	color: #94A3B8;
	font-family: var(--bl-mono);
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.bl-code__copy {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-block-size: 32px;
	padding: 0.15rem 0.6rem;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 6px;
	background: transparent;
	color: #CBD5E1;
	font: inherit;
	font-size: 0.75rem;
	cursor: pointer;
}
.bl-code__copy:hover { color: #ffffff; border-color: rgba(255, 255, 255, 0.4); }
.bl-code__copy.is-copied { color: #4ADE80; border-color: #4ADE80; }
.entry-content pre {
	padding: 1rem 1.2rem;
	font-size: 0.88rem;
	line-height: 1.9;
	overflow-x: auto;
	scrollbar-width: thin;
	scrollbar-color: #334155 transparent;
}
.entry-content pre code {
	direction: ltr;
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
	font-size: inherit;
	white-space: pre;
}
.bl-code pre {
	margin: 0;
	padding: 1rem 1.2rem;
	font-size: 0.88rem;
	line-height: 1.9;
	overflow-x: auto;
	scrollbar-width: thin;
}
.bl-code pre code {
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
	white-space: pre;
}

/* ==========================================================================
   3) Callouts (icon + label: never color-only)
   ========================================================================== */
.bl-callout {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		'icon label'
		'icon body';
	gap: 0.2rem 0.75rem;
	margin: 1.5em 0;
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--bl-border);
	border-inline-start: 4px solid var(--bl-primary);
	border-radius: var(--bl-r);
	background: var(--bl-info-soft);
}
.bl-callout__icon {
	grid-area: icon;
	align-self: start;
	color: var(--bl-primary);
	padding-top: 0.3rem;
}
.bl-callout__label {
	grid-area: label;
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--bl-text);
	margin: 0;
}
.bl-callout__body { grid-area: body; }
.bl-callout__body p:last-child { margin-bottom: 0; }

.bl-callout--info { background: var(--bl-info-soft); border-inline-start-color: #0284C7; }
.bl-callout--info .bl-callout__icon { color: #0284C7; }
.bl-callout--tip { background: var(--bl-success-soft); border-inline-start-color: var(--bl-success); }
.bl-callout--tip .bl-callout__icon { color: var(--bl-success); }
.bl-callout--warning { background: var(--bl-accent-soft); border-inline-start-color: var(--bl-accent); }
.bl-callout--warning .bl-callout__icon { color: var(--bl-accent); }
.bl-callout--danger { background: var(--bl-danger-soft); border-inline-start-color: var(--bl-danger); }
.bl-callout--danger .bl-callout__icon { color: var(--bl-danger); }

/* ==========================================================================
   4) Troubleshooting matrix (علامت ← علت ← راه‌حل)
   ========================================================================== */
.bl-matrix {
	display: grid;
	gap: 0.75rem;
	margin: 1.5em 0;
}
.bl-matrix__head {
	display: none;
	grid-template-columns: 1fr 1fr 1.4fr;
	gap: 0.75rem;
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--bl-text-2);
}
.bl-matrix__row {
	display: grid;
	gap: 0.5rem;
	background: var(--bl-surface);
	border: 1px solid var(--bl-border);
	border-radius: var(--bl-r-lg);
	padding: 0.9rem 1rem;
}
.bl-matrix__cell {
	display: grid;
	gap: 0.1rem;
}
.bl-matrix__label {
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--bl-primary);
}
.bl-matrix__cell p { margin: 0; font-size: 0.92rem; }
@media (min-width: 780px) {
	.bl-matrix__head { display: grid; }
	.bl-matrix__row { grid-template-columns: 1fr 1fr 1.4fr; gap: 0.75rem; }
	.bl-matrix__label { display: none; }
	.bl-matrix__row { border-inline-start: 4px solid var(--bl-primary-soft); }
}

/* ==========================================================================
   5) Anchor tabs — all panels visible in raw HTML
   ========================================================================== */
.bl-tabs { margin: 1.5em 0; }
.bl-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid var(--bl-border);
}
.bl-tabs__nav a {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	padding: 0.3rem 1rem;
	border-radius: var(--bl-r);
	color: var(--bl-text-2);
	font-weight: 500;
	font-size: 0.92rem;
	border: 1px solid transparent;
}
.bl-tabs__nav a:hover { background: var(--bl-bg-soft); color: var(--bl-primary); text-decoration: none; }
.bl-tabs__nav a.is-active {
	background: var(--bl-primary-soft);
	color: var(--bl-primary);
	border-color: var(--bl-primary);
}
.bl-tabs__panel {
	padding-block: 0.75rem;
	border-bottom: 1px dashed var(--bl-border);
	scroll-margin-top: calc(var(--bl-header-h) + 24px);
}
.bl-tabs__panel:last-child { border-bottom: 0; }
.bl-tabs__panel h3 { font-size: 1.05rem; }

/* ==========================================================================
   6) Visible FAQ (details/summary)
   ========================================================================== */
.bl-faq { margin: 1.5em 0; }
.bl-faq h2 { font-size: 1.25rem; }
.bl-faq__item {
	border: 1px solid var(--bl-border);
	border-radius: var(--bl-r-lg);
	background: var(--bl-surface);
	margin-bottom: 0.6rem;
	overflow: hidden;
}
.bl-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	min-block-size: 52px;
	padding: 0.7rem 1.1rem;
	font-weight: 500;
	cursor: pointer;
	list-style: none;
}
.bl-faq__item summary::-webkit-details-marker { display: none; }
.bl-faq__item summary::after {
	content: '+';
	font-size: 1.3rem;
	color: var(--bl-primary);
	line-height: 1;
	flex: none;
}
.bl-faq__item[open] summary::after { content: '−'; }
.bl-faq__item summary:hover { background: var(--bl-bg-soft); }
.bl-faq__answer { padding: 0 1.1rem 1rem; color: var(--bl-text-2); }
.bl-faq__answer p:last-child { margin-bottom: 0; }

/* ==========================================================================
   7) Tables: horizontal scroll inside the container
   ========================================================================== */
.entry-content table {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
	margin: 1.5em 0;
}
.entry-content th,
.entry-content td {
	border: 1px solid var(--bl-border);
	padding: 0.55rem 0.9rem;
	text-align: start;
	vertical-align: top;
}
.entry-content th { background: var(--bl-bg-soft); font-weight: 700; }
.entry-content tr:nth-child(even) td { background: color-mix(in srgb, var(--bl-bg-soft) 55%, transparent); }
@media (max-width: 768px) {
	.entry-content table,
	.entry-content .wp-block-table table {
		display: block;
		max-inline-size: fit-content;
		overflow-x: auto;
	}
}

/* ==========================================================================
   8) Featured media, wp block extras
   ========================================================================== */
.entry-content .wp-block-image img { border-radius: var(--bl-r-lg); }
.entry-content figcaption { text-align: center; color: var(--bl-text-2); font-size: 0.8rem; }
.entry-content .wp-block-embed { margin: 1.5em 0; }
.entry-content .wp-block-file { margin: 1.2em 0; }