/**
 * پایهٔ مشترکِ عناصر ویرایشیِ سیمرغ.
 *
 * سه بخش:
 *   ۱) توکن‌های طراحی روی :root — همهٔ استایل بلوک‌ها با var(--smg-e-*, fallback)
 *      از این‌ها استفاده می‌کنند، پس اگر این فایل لود نشود هم چیزی نمی‌شکند.
 *   ۲) قالب‌های متنی درون‌خطی (هایلایت / ماژیک / اصطلاح / کلید).
 *   ۳) سبک‌های بصری روی بلوک‌های هستهٔ وردپرس (لید، حرف‌اول‌بزرگ، سرتیتر
 *      شماره‌دار/نواردار، جداکنندهٔ تزئینی، چک‌لیست).
 *
 * فایلِ کوچکی است و در هر دو بافت (فرانت + ویرایشگر) لود می‌شود، چون این
 * موارد می‌توانند در هر صفحه‌ای باشند.
 */

:root {
	--smg-e-accent: #667eea;
	--smg-e-accent-2: #764ba2;
	--smg-e-ink: #1a202c;
	--smg-e-muted: #6a7385;
	--smg-e-surface: #f6f6fb;
	--smg-e-border: #e6e6f2;
	--smg-e-radius: 14px;
	--smg-e-note: #3b82f6;
	--smg-e-warning: #d97706;
	--smg-e-important: #dc2626;
	--smg-e-tip: #7c3aed;
	--smg-e-success: #16a34a;
}

/* ============ ۲) قالب‌های متنی درون‌خطی ============ */

.smg-highlight {
	background-color: rgba(102, 126, 234, 0.18);
	background-image: linear-gradient(120deg, rgba(102, 126, 234, 0.22), rgba(118, 75, 162, 0.22));
	color: inherit;
	border-radius: 0.25em;
	padding: 0 0.15em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.smg-marker {
	background-image: linear-gradient(transparent 58%, rgba(102, 126, 234, 0.38) 58%);
	background-repeat: no-repeat;
	color: inherit;
	padding: 0 0.05em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.smg-term {
	border-bottom: 1px dashed var(--smg-e-accent, #667eea);
	cursor: help;
	text-decoration: none;
}

.smg-kbd {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.85em;
	padding: 0.15em 0.45em;
	border: 1px solid var(--smg-e-border, #e6e6f2);
	border-bottom-width: 2px;
	border-radius: 6px;
	background: #fafafe;
	color: var(--smg-e-ink, #1a202c);
	white-space: nowrap;
}

/* ============ ۳) سبک‌های بلوک‌های هسته ============ */

/* لید بزرگ — پاراگراف مقدمه */
.wp-block-paragraph.is-style-smg-lead {
	font-size: 1.25rem;
	line-height: 2;
	font-weight: 500;
	color: var(--smg-e-muted, #6a7385);
}

/* حرف اول بزرگ */
.wp-block-paragraph.is-style-smg-dropcap::first-letter {
	float: right;
	margin: 0.05em 0 0 0.12em;
	font-size: 3.4em;
	font-weight: 700;
	line-height: 0.82;
	color: var(--smg-e-accent, #667eea);
}

.wp-block-paragraph.is-style-smg-dropcap:dir(ltr)::first-letter {
	float: left;
	margin: 0.05em 0.12em 0 0;
}

/* سرتیتر شماره‌دار — شمارندهٔ CSS روی کلِ محتوا */
.entry-content,
.wp-block-post-content {
	counter-reset: smg-h;
}

.is-style-smg-numbered {
	counter-increment: smg-h;
	display: flex;
	align-items: baseline;
	gap: 0.5em;
}

.is-style-smg-numbered::before {
	content: counter(smg-h);
	flex: 0 0 auto;
	min-width: 1.7em;
	height: 1.7em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.62em;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(135deg, var(--smg-e-accent, #667eea), var(--smg-e-accent-2, #764ba2));
	border-radius: 50%;
}

/* سرتیتر با نوار رنگی کناری */
.is-style-smg-accent {
	padding-inline-start: 0.7em;
	border-inline-start: 4px solid var(--smg-e-accent, #667eea);
}

/* جداکنندهٔ تزئینی */
.wp-block-separator.is-style-smg-ornament {
	max-width: 8rem;
	height: auto;
	border: 0;
	opacity: 1;
	text-align: center;
	overflow: visible;
}

.wp-block-separator.is-style-smg-ornament::before {
	content: "❖";
	color: var(--smg-e-accent, #667eea);
	font-size: 1.1rem;
	background: transparent;
}

/* چک‌لیست */
.wp-block-list.is-style-smg-check {
	list-style: none;
	padding-inline-start: 0;
}

.wp-block-list.is-style-smg-check > li {
	position: relative;
	padding-inline-start: 1.8em;
	margin-block: 0.4em;
}

.wp-block-list.is-style-smg-check > li::before {
	content: "✓";
	position: absolute;
	inset-inline-start: 0;
	top: 0.05em;
	width: 1.25em;
	height: 1.25em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8em;
	font-weight: 700;
	color: #fff;
	background: var(--smg-e-success, #16a34a);
	border-radius: 50%;
}

/* فاصلهٔ امن هنگام پرش به سرتیتر از «نقشهٔ مطلب» (زیر هدرِ چسبانِ قالب نرود)
   نکته: عمداً از :where() استفاده نمی‌شود — پارسر CSS افزونه‌ی AMP روی
   :where() با فهرست سلکتور می‌شکند و خطای «CSS syntax error in tag style amp-custom» می‌دهد. */
h1[id],
h2[id],
h3[id],
h4[id],
h5[id],
h6[id] {
	scroll-margin-top: 6rem;
}

@media (prefers-reduced-motion: reduce) {
	.smg-highlight,
	.smg-marker {
		transition: none !important;
	}
}