/* Aira Category Top Content — frontend styles
 * رنگ‌ها از تنظیمات افزونه به صورت متغیر CSS تزریق می‌شوند.
 * --aira-ctc-bg و --aira-ctc-text اختیاری‌اند؛ اگر تنظیم نشوند، مقدار پیش‌فرض هر استایل استفاده می‌شود.
 */
:root {
	--aira-ctc-accent: #0ea5e9;
	--aira-ctc-accent-rgb: 14, 165, 233;
	--aira-ctc-accent2: #6366f1;
	--aira-ctc-accent2-rgb: 99, 102, 241;
	--aira-ctc-angle: 135deg;
}

.aira-ctc {
	--aira-ctc-spectrum: linear-gradient(var(--aira-ctc-angle), var(--aira-ctc-accent), var(--aira-ctc-accent2));
	--aira-ctc-spectrum-x: linear-gradient(to left, var(--aira-ctc-accent), var(--aira-ctc-accent2));
	--aira-ctc-spectrum-y: linear-gradient(to bottom, var(--aira-ctc-accent), var(--aira-ctc-accent2));
	--aira-ctc-pad: 1.75em 2em;
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	flex: 1 1 100%; /* اگر والد flex بود، کل عرض را بگیرد */
	margin: 0 0 2em;
	clear: both;
}

.aira-ctc:not(.aira-ctc--none) {
	line-height: 1.9;
	font-size: 1em;
	color: var(--aira-ctc-text, inherit);
}

.aira-ctc *,
.aira-ctc *::before,
.aira-ctc *::after {
	box-sizing: border-box;
}

.aira-ctc__inner {
	display: block;
	position: relative;
	z-index: 1;
}

/* ---------- Typography ---------- */
.aira-ctc:not(.aira-ctc--none) :is(h1, h2, h3, h4, h5, h6, .aira-ctc-demo-title) {
	display: block;
	line-height: 1.5;
	font-weight: 700;
	margin: 1.3em 0 0.6em;
	color: var(--aira-ctc-text, inherit);
}

.aira-ctc:not(.aira-ctc--none) p {
	margin: 0 0 1em;
}

.aira-ctc:not(.aira-ctc--none) a {
	color: var(--aira-ctc-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
	transition: opacity 0.2s ease;
}

.aira-ctc:not(.aira-ctc--none) a:hover {
	opacity: 0.8;
}

.aira-ctc:not(.aira-ctc--none) :is(ul, ol) {
	margin: 0 0 1em;
	padding-inline-start: 1.4em;
}

.aira-ctc:not(.aira-ctc--none) li {
	margin-bottom: 0.35em;
}

.aira-ctc:not(.aira-ctc--none) li::marker {
	color: var(--aira-ctc-accent);
}

.aira-ctc:not(.aira-ctc--none) img {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
}

.aira-ctc:not(.aira-ctc--none) blockquote {
	margin: 0 0 1em;
	padding: 0.6em 1em;
	border-inline-start: 3px solid var(--aira-ctc-accent);
	background: rgba(var(--aira-ctc-accent-rgb), 0.06);
	border-radius: 8px;
}

/* حذف فاصله اضافه اول و آخر محتوا */
.aira-ctc .aira-ctc__inner > :first-child,
.aira-ctc:not(.aira-ctc--none) .aira-ctc__inner > :first-child {
	margin-top: 0;
}

.aira-ctc .aira-ctc__inner > :last-child,
.aira-ctc:not(.aira-ctc--none) .aira-ctc__inner > :last-child {
	margin-bottom: 0;
}

/* ---------- 1. Minimal ---------- */
.aira-ctc--minimal {
	position: relative;
	padding-bottom: 1.5em;
	background-color: var(--aira-ctc-bg, transparent);
}

.aira-ctc--minimal::after {
	content: "";
	position: absolute;
	bottom: 0;
	inset-inline: 0;
	height: 1px;
	background: var(--aira-ctc-spectrum-x);
	opacity: 0.35;
}

.aira-ctc--minimal .aira-ctc__inner > :is(h1, h2, h3, h4, .aira-ctc-demo-title):first-child {
	position: relative;
	padding-bottom: 0.45em;
}

.aira-ctc--minimal .aira-ctc__inner > :is(h1, h2, h3, h4, .aira-ctc-demo-title):first-child::after {
	content: "";
	position: absolute;
	bottom: 0;
	inset-inline-start: 0;
	width: 56px;
	height: 3px;
	border-radius: 3px;
	background: var(--aira-ctc-spectrum-x);
}

/* ---------- 2. Card ---------- */
.aira-ctc--card {
	background-color: var(--aira-ctc-bg, #fff);
	border: 1px solid rgba(16, 24, 40, 0.06);
	border-radius: 16px;
	padding: var(--aira-ctc-pad);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 30px rgba(16, 24, 40, 0.07);
}

/* ---------- 3. Accent bar ---------- */
.aira-ctc--accent {
	position: relative;
	overflow: hidden;
	background-color: var(--aira-ctc-bg, transparent);
	background-image: linear-gradient(var(--aira-ctc-angle), rgba(var(--aira-ctc-accent-rgb), 0.07), rgba(var(--aira-ctc-accent2-rgb), 0.05));
	border-radius: 12px;
	padding: 1.5em 1.75em;
	padding-inline-start: calc(1.75em + 4px);
}

.aira-ctc--accent::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	inset-inline-start: 0;
	width: 5px;
	background: var(--aira-ctc-spectrum-y);
}

/* ---------- 4. Gradient ---------- */
.aira-ctc--gradient {
	position: relative;
	overflow: hidden;
	background-color: var(--aira-ctc-bg, #fff);
	background-image: linear-gradient(var(--aira-ctc-angle), rgba(var(--aira-ctc-accent-rgb), 0.16) 0%, rgba(var(--aira-ctc-accent2-rgb), 0.12) 100%);
	border: 1px solid rgba(var(--aira-ctc-accent-rgb), 0.18);
	border-radius: 20px;
	padding: var(--aira-ctc-pad);
}

.aira-ctc--gradient::before,
.aira-ctc--gradient::after {
	content: "";
	position: absolute;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	pointer-events: none;
}

.aira-ctc--gradient::before {
	top: -80px;
	inset-inline-end: -60px;
	background: radial-gradient(circle, rgba(var(--aira-ctc-accent-rgb), 0.25), transparent 70%);
}

.aira-ctc--gradient::after {
	bottom: -90px;
	inset-inline-start: -60px;
	background: radial-gradient(circle, rgba(var(--aira-ctc-accent2-rgb), 0.22), transparent 70%);
}

/* ---------- 5. Glass ---------- */
.aira-ctc--glass {
	position: relative;
	background-color: var(--aira-ctc-bg, rgba(255, 255, 255, 0.6));
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	backdrop-filter: blur(14px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, 0.75);
	border-radius: 20px;
	padding: var(--aira-ctc-pad);
	box-shadow: -8px 10px 35px rgba(var(--aira-ctc-accent-rgb), 0.14), 8px 10px 35px rgba(var(--aira-ctc-accent2-rgb), 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* ---------- 6. Elegant ---------- */
.aira-ctc--elegant {
	position: relative;
	overflow: hidden;
	background-color: var(--aira-ctc-bg, #fcfcfd);
	border-radius: 14px;
	padding: var(--aira-ctc-pad);
	padding-top: calc(1.75em + 3px);
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.07);
}

.aira-ctc--elegant::before {
	content: "";
	position: absolute;
	top: 0;
	inset-inline: 0;
	height: 4px;
	background: var(--aira-ctc-spectrum-x);
}

.aira-ctc.aira-ctc--elegant :is(h1, h2, h3, h4, .aira-ctc-demo-title) {
	color: var(--aira-ctc-accent);
}

/* تیتر با طیف رنگ در مرورگرهایی که پشتیبانی می‌کنند */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.aira-ctc.aira-ctc--elegant :is(h1, h2, h3, h4, .aira-ctc-demo-title) {
		background: var(--aira-ctc-spectrum-x);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		width: fit-content;
	}
}

/* ---------- 7. Dark ---------- */
.aira-ctc--dark {
	position: relative;
	overflow: hidden;
	background-color: var(--aira-ctc-bg, #111827);
	border-radius: 18px;
	padding: var(--aira-ctc-pad);
	box-shadow: 0 12px 32px rgba(17, 24, 39, 0.25);
}

.aira-ctc--dark::before {
	content: "";
	position: absolute;
	top: 0;
	inset-inline: 0;
	height: 3px;
	background: var(--aira-ctc-spectrum-x);
}

.aira-ctc--dark::after {
	content: "";
	position: absolute;
	top: -120px;
	inset-inline-end: -80px;
	width: 280px;
	height: 280px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(var(--aira-ctc-accent-rgb), 0.28), rgba(var(--aira-ctc-accent2-rgb), 0.12) 45%, transparent 70%);
	pointer-events: none;
}

.aira-ctc.aira-ctc--dark {
	color: var(--aira-ctc-text, #d1d5db);
}

.aira-ctc.aira-ctc--dark :is(h1, h2, h3, h4, h5, h6, strong, b, .aira-ctc-demo-title) {
	color: var(--aira-ctc-text, #fff);
}

.aira-ctc.aira-ctc--dark a {
	color: var(--aira-ctc-text, #fff);
	text-decoration-color: var(--aira-ctc-accent);
	text-decoration-thickness: 2px;
}

.aira-ctc.aira-ctc--dark blockquote {
	background: rgba(255, 255, 255, 0.05);
}

/* ---------- None (بدون استایل) ---------- */
.aira-ctc--none {
	background-color: var(--aira-ctc-bg, transparent);
	color: var(--aira-ctc-text, inherit);
}

/* ---------- Width: تمام صفحه (لبه تا لبه) ---------- */
.aira-ctc.aira-ctc--w-full {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
	border-radius: 0;
	border-inline: 0;
	--aira-ctc-pad: 2.5em max(1.25em, calc(50vw - 50%)); /* درصد پدینگ نسبت به عرض والد است؛ متن دقیقاً هم‌تراز محتوای سایت می‌ماند */
}

.aira-ctc.aira-ctc--w-full.aira-ctc--accent {
	padding: var(--aira-ctc-pad);
}

.aira-ctc.aira-ctc--w-full.aira-ctc--minimal {
	padding-inline: max(1.25em, calc(50vw - 50%));
}

.aira-ctc.aira-ctc--w-full.aira-ctc--elegant {
	padding-top: calc(2.5em + 3px);
}

/* جلوگیری از اسکرول افقی ناشی از 100vw */
body:has(.aira-ctc--w-full) {
	overflow-x: clip;
}

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
	.aira-ctc {
		--aira-ctc-pad: 1.25em 1.25em;
	}

	.aira-ctc:is(.aira-ctc--card, .aira-ctc--gradient, .aira-ctc--glass, .aira-ctc--elegant, .aira-ctc--dark):not(.aira-ctc--w-full) {
		border-radius: 14px;
	}

	.aira-ctc.aira-ctc--accent {
		padding: 1.15em 1.25em;
		padding-inline-start: calc(1.25em + 4px);
	}

	.aira-ctc.aira-ctc--elegant {
		padding-top: calc(1.25em + 3px);
	}

	.aira-ctc.aira-ctc--w-full {
		--aira-ctc-pad: 1.75em 1.25em;
	}
}