/* Content Manager Pro — Premium Section Intelligence Engine (PHASE 15A9)
 *
 * Purely additive: every selector below is scoped under .hpcm-section-*
 * or .hpcm-related-concept / .hpcm-micro-recap / .hpcm-focus-term, so
 * this file can never affect the Study Layout container, TOC, Hero,
 * Study Flow cards, or Knowledge Boxes themselves — it only styles the
 * new elements HPCM_Section_Enhancer/HPCM_Focus_Term_Highlighter add.
 * Loads after hpcm-frontend.css. No JavaScript, no animation — every
 * element is static server-rendered HTML (zero layout-shift risk),
 * matching Feature 10's "Elegant. Minimal. Professional." directive:
 * neutral ink/slate palette only, reusing the same accent blue already
 * used across the plugin (see --hpcm-kbox-accent in hpcm-knowledge-box.css)
 * rather than introducing a new color language.
 */

.hpcm-section-meta,
.hpcm-section-intro,
.hpcm-section-summary,
.hpcm-related-concept,
.hpcm-micro-recap {
	--hpcm-si-bg: #faf7f1;
	--hpcm-si-border: #e6ddc9;
	--hpcm-si-text: #1c2b22;
	--hpcm-si-muted: #5c6b60;
	--hpcm-si-accent: #1f6b4a;

	box-sizing: border-box;
	max-width: 72ch;
	font-family: 'Poppins', 'Noto Sans Devanagari', sans-serif;
}


/* ---------------- Feature 4: Section counter badge ---------------- */

.hpcm-section-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 4px 0 clamp(10px, 2vw, 16px) 0;
}

.hpcm-section-counter {
	display: inline-block;
	font-size: .78em !important;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--hpcm-si-muted) !important;
	background: var(--hpcm-si-bg);
	border: 1px solid var(--hpcm-si-border);
	border-radius: 999px;
	padding: 3px 12px;
}

/* ---------------- Feature 1: Smart Section Intro ---------------- */

.hpcm-section-intro {
	background: var(--hpcm-si-bg);
	border: 1px solid var(--hpcm-si-border);
	border-left: 3px solid var(--hpcm-si-accent);
	border-radius: 10px;
	padding: clamp(12px, 2.5vw, 16px) clamp(14px, 3vw, 18px);
	margin: 0 0 clamp(14px, 2.5vw, 20px) 0;
}

.hpcm-section-intro-label,
.hpcm-section-summary-label,
.hpcm-related-concept-label,
.hpcm-micro-recap-label {
	display: block;
	font-size: .82em !important;
	font-weight: 700;
	color: var(--hpcm-si-accent) !important;
	margin-bottom: 6px;
}

.hpcm-section-intro-list,
.hpcm-section-summary-list,
.hpcm-micro-recap-list {
	margin: 0;
	padding-left: 1.2em;
	color: var(--hpcm-si-text) !important;
}

.hpcm-section-intro-list li,
.hpcm-section-summary-list li,
.hpcm-micro-recap-list li {
	margin: 3px 0;
	line-height: 1.55;
}

/* ---------------- Feature 2: Section End Summary ---------------- */

.hpcm-section-summary {
	background: var(--hpcm-si-bg);
	border: 1px solid var(--hpcm-si-border);
	border-radius: 10px;
	padding: clamp(12px, 2.5vw, 16px) clamp(14px, 3vw, 18px);
	margin: clamp(16px, 3vw, 24px) 0 clamp(10px, 2vw, 14px) 0;
}

/* ---------------- Feature 6: Related Concept ---------------- */

.hpcm-related-concept {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
	border-top: 1px dashed var(--hpcm-si-border);
	padding-top: clamp(8px, 1.5vw, 12px);
	margin: clamp(10px, 2vw, 14px) 0 0 0;
	font-size: .92em !important;
}

.hpcm-related-concept-label {
	margin: 0;
	color: var(--hpcm-si-muted) !important;
	font-weight: 600;
	font-size: 1em !important;
}

.hpcm-related-concept-link {
	color: var(--hpcm-si-accent) !important;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.hpcm-related-concept-link:hover,
.hpcm-related-concept-link:focus-visible {
	border-bottom-color: currentColor;
}

/* ---------------- Feature 8: Micro Recap ---------------- */

.hpcm-micro-recap {
	background: var(--hpcm-si-bg);
	border: 1px dashed var(--hpcm-si-border);
	border-radius: 10px;
	padding: clamp(12px, 2.5vw, 16px) clamp(14px, 3vw, 18px);
	margin: clamp(18px, 3vw, 26px) 0;
}

/* ---------------- Feature 7: Smart Breaks ---------------- */

.hpcm-section-break {
	height: clamp(20px, 4vw, 36px);
}

/* ---------------- Feature 5: Focus Blocks (inline term highlighting) ---------------- */

.hpcm-focus-term {
	font-weight: 600;
	border-bottom: 1.5px solid var(--hpcm-si-accent, #2563eb);
	padding-bottom: 1px;
}

.hpcm-focus-term--year { color: #b45309; border-bottom-color: #b45309; }
.hpcm-focus-term--article { color: #1d4ed8; border-bottom-color: #1d4ed8; }
.hpcm-focus-term--act { color: #7c3aed; border-bottom-color: #7c3aed; }
.hpcm-focus-term--committee { color: #0f766e; border-bottom-color: #0f766e; }
.hpcm-focus-term--scheme { color: #b91c1c; border-bottom-color: #b91c1c; }


/* ---------------- Mobile: 360 / 390 / 412 / 480 — no horizontal scroll, no oversized cards ---------------- */

@media (max-width: 480px) {
	.hpcm-section-intro,
	.hpcm-section-summary,
	.hpcm-micro-recap {
		padding: 12px 14px;
		border-radius: 8px;
	}

	.hpcm-section-meta {
		gap: 8px;
	}

	.hpcm-related-concept {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
}

@media (max-width: 360px) {
	.hpcm-section-counter {
		font-size: .72em !important;
		padding: 3px 10px;
	}
}