/* ==========================================================================
   کپل پا — توضیحات دسته‌بندی محصولات
   مسیر: wp-content/themes/karigari-child/css/category-description.css
   ========================================================================== */

.kp-term-desc{
	--kp-accent:      #cc6833;
	--kp-accent-dark: #a94f22;
	--kp-gold:        #c6a87d;
	--kp-ink:         #22252b;
	--kp-ink-2:       #4d5058;
	--kp-muted:       #86867f;
	--kp-line:        #e9e2d4;
	--kp-line-2:      #f2ede2;
	--kp-surface:     #ffffff;
	--kp-cream:       #faf7f0;
	--kp-cream-2:     #f4efe3;
	--kp-r:    20px;
	--kp-r-md: 12px;
	--kp-shadow: 0 1px 2px rgba(34,37,43,.04), 0 14px 34px -20px rgba(34,37,43,.30);

	/* این بلوک به‌عنوان آیتم فلکس داخل .row می‌نشیند، پس باید کل عرض را بگیرد.
	   پدینگ ۱۲px لبه‌اش را با شبکه‌ی محصولات هم‌تراز می‌کند. */
	flex: 0 0 100%;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding-inline: 12px;
	margin: 48px 0 8px;
	clear: both;
}

.kp-term-desc__inner{
	background: var(--kp-surface);
	border: 1px solid var(--kp-line);
	border-radius: var(--kp-r);
	box-shadow: var(--kp-shadow);
	padding: 30px 32px;
}

/* --- عنوان --- */
.kp-term-desc__title{
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.7;
	color: var(--kp-ink);
	margin: 0 0 20px;
	padding: 0 0 16px;
	border-bottom: 1px solid var(--kp-line);
}
.kp-term-desc__title::before{
	content: "";
	flex: none;
	width: 4px;
	height: 22px;
	border-radius: 999px;
	background: var(--kp-accent);
}

/* --- بدنه‌ی متن --- */
.kp-term-desc__body{
	position: relative;
	font-size: 15px;
	line-height: 2.15;
	color: var(--kp-ink-2);
	overflow-wrap: break-word;
}

.kp-term-desc__body > :first-child{ margin-top: 0; }
.kp-term-desc__body > :last-child{ margin-bottom: 0; }

.kp-term-desc__body p{ margin: 0 0 16px; }

.kp-term-desc__body h1,
.kp-term-desc__body h2,
.kp-term-desc__body h3,
.kp-term-desc__body h4,
.kp-term-desc__body h5,
.kp-term-desc__body h6{
	color: var(--kp-ink);
	font-weight: 700;
	line-height: 1.75;
	margin: 30px 0 12px;
}
.kp-term-desc__body h1,
.kp-term-desc__body h2{ font-size: 19px; }
.kp-term-desc__body h3{ font-size: 17px; }
.kp-term-desc__body h4,
.kp-term-desc__body h5,
.kp-term-desc__body h6{ font-size: 15.5px; }

.kp-term-desc__body ul,
.kp-term-desc__body ol{
	margin: 0 0 16px;
	padding-inline-start: 22px;
}
.kp-term-desc__body li{ margin-bottom: 8px; }
.kp-term-desc__body ul li::marker{ color: var(--kp-accent); }
.kp-term-desc__body ol li::marker{ color: var(--kp-accent); font-weight: 700; }

.kp-term-desc__body a{
	color: var(--kp-accent);
	text-decoration: none;
	border-bottom: 1px solid rgba(204,104,51,.35);
	transition: border-color .2s ease, color .2s ease;
}
.kp-term-desc__body a:hover{
	color: var(--kp-accent-dark);
	border-bottom-color: var(--kp-accent-dark);
}

.kp-term-desc__body strong,
.kp-term-desc__body b{ color: var(--kp-ink); font-weight: 700; }

.kp-term-desc__body blockquote{
	margin: 20px 0;
	padding: 14px 18px;
	background: var(--kp-cream);
	border: 1px solid var(--kp-line-2);
	border-inline-start: 3px solid var(--kp-gold);
	border-radius: var(--kp-r-md);
}
.kp-term-desc__body blockquote p:last-child{ margin-bottom: 0; }

.kp-term-desc__body img{
	max-width: 100%;
	height: auto;
	border-radius: var(--kp-r-md);
}

/* جدول‌های داخل متن سئو */
.kp-term-desc__body table{
	width: 100%;
	margin: 0 0 18px;
	border: 1px solid var(--kp-line);
	border-radius: var(--kp-r-md);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	table-layout: fixed;
	font-size: 14.5px;
}
.kp-term-desc__body table tr > *{
	padding: 12px 15px;
	border: 0;
	border-bottom: 1px solid var(--kp-line-2);
	text-align: start;
	vertical-align: middle;
	overflow-wrap: break-word;
}
.kp-term-desc__body table tr:last-child > *{ border-bottom: 0; }
.kp-term-desc__body table tr > :first-child{
	background: var(--kp-cream);
	border-inline-end: 1px solid var(--kp-line-2);
	font-weight: 600;
	color: var(--kp-ink);
}
.kp-term-desc__body table tr > th:nth-child(n+2){
	background: var(--kp-cream-2);
	font-weight: 700;
	color: var(--kp-ink);
}

/* --- جمع‌شدن متن‌های بلند --- */
.kp-term-desc--clamped:not(.is-open) .kp-term-desc__body{
	max-height: 260px;
	overflow: hidden;
}
.kp-term-desc--clamped:not(.is-open) .kp-term-desc__body::after{
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 110px;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(255,255,255,0), var(--kp-surface) 92%);
}

/* --- دکمه --- */
.kp-term-desc__toggle{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	padding: 11px 20px;
	border: 1px solid var(--kp-line);
	border-radius: 999px;
	background: var(--kp-cream);
	color: var(--kp-ink);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.kp-term-desc__toggle:hover{
	background: var(--kp-accent);
	border-color: var(--kp-accent);
	color: #fff;
}
/* دو آیکون و جابه‌جایی با display — روی این سایت transform روی svg اعمال
   نمی‌شود، پس به چرخش تکیه نمی‌کنیم. */
.kp-term-desc__chev{
	display: inline-flex;
	flex: none;
}
.kp-term-desc__chev svg{
	width: 15px;
	height: 15px;
	display: block;
}
.kp-term-desc__chev--up{ display: none; }
.kp-term-desc.is-open .kp-term-desc__chev--down{ display: none; }
.kp-term-desc.is-open .kp-term-desc__chev--up{ display: inline-flex; }

/* برچسب دکمه بسته به حالت */
.kp-term-desc__label-less{ display: none; }
.kp-term-desc.is-open .kp-term-desc__label-more{ display: none; }
.kp-term-desc.is-open .kp-term-desc__label-less{ display: inline; }

.kp-term-desc__toggle:focus-visible{
	outline: 2px solid var(--kp-accent);
	outline-offset: 2px;
}

/* --- ریسپانسیو --- */
@media (max-width: 991px){
	.kp-term-desc{ margin-top: 36px; }
	.kp-term-desc__inner{ padding: 24px 22px; }
}

@media (max-width: 767px){
	/* ۲۴px و نه ۱۶px: والد (.row) حاشیه‌ی منفی ۱۲px دارد، پس برای هم‌تراز
	   شدن با شبکه‌ی محصولات باید همان ۱۲ را هم جبران کنیم. */
	.kp-term-desc{ padding-inline: 24px; margin-top: 30px; }
	.kp-term-desc__inner{
		padding: 20px 18px;
		border-radius: var(--kp-r-md);
	}
	.kp-term-desc__title{ font-size: 17.5px; margin-bottom: 16px; padding-bottom: 13px; }
	.kp-term-desc__body{ font-size: 14.5px; line-height: 2.05; }
	.kp-term-desc__body h1,
	.kp-term-desc__body h2{ font-size: 17px; }
	.kp-term-desc__body h3{ font-size: 15.5px; }
	.kp-term-desc--clamped:not(.is-open) .kp-term-desc__body{ max-height: 210px; }
	.kp-term-desc__body table{ font-size: 13.5px; }
	.kp-term-desc__body table tr > *{ padding: 10px 12px; }
}

@media (prefers-reduced-motion: reduce){
	.kp-term-desc *{ transition-duration: .01ms !important; }
}