/* Content Manager Pro — Enterprise Smart Knowledge Box Engine (PHASE 15A5)
 * + Enterprise Enhancement Layer (PHASE 15A7)
 *
 * Purely additive: everything here is scoped under .hpcm-kbox so it can
 * never affect the Study Layout, TOC, Hero, Study Flow, archive pages, or
 * theme markup. A knowledge box can sit inside a Study Flow card or in
 * plain content — either way it only styles itself. Loads after
 * hpcm-frontend.css. No JavaScript — every box is static, server-rendered
 * HTML, so there is zero layout-shift risk.
 *
 * PHASE 15A7 additions (all additive, none remove or override a 15A5
 * rule): .hpcm-kbox--combined + .hpcm-kbox-secondary for cross-type
 * combined cards; .hpcm-kbox--compact / --roomy for adaptive spacing;
 * .hpcm-kbox-subject--* for the subtle per-subject corner accent.
 */

.hpcm-kbox {
	--hpcm-kbox-bg: #faf7f1;
	--hpcm-kbox-border: #e6ddc9;
	--hpcm-kbox-text: #1c2b22;
	--hpcm-kbox-muted: #5c6b60;
	--hpcm-kbox-accent: #1f6b4a;

	box-sizing: border-box;
	background: var(--hpcm-kbox-bg);
	border: 1px solid var(--hpcm-kbox-border);
	border-left: 4px solid var(--hpcm-kbox-accent);
	border-radius: 12px;
	padding: clamp(14px, 3vw, 20px);
	margin: clamp(12px, 2.5vw, 18px) 0;
	max-width: 72ch;
	font-family: 'Poppins', 'Noto Sans Devanagari', sans-serif;
}


.hpcm-kbox * { box-sizing: border-box; }

/* Two knowledge boxes back-to-back keep a touch less gap than a box
 * sitting between ordinary paragraphs — enough separation to read as
 * distinct callouts without adding extra scroll length. */
.hpcm-kbox + .hpcm-kbox { margin-top: clamp(8px, 1.5vw, 12px); }

/* High-contrast, keyboard-visible focus ring — each box is tabbable
 * (tabindex="0") so screen-reader and keyboard users can jump straight
 * to it instead of tabbing through every sentence around it. */
.hpcm-kbox:focus-visible {
	outline: 3px solid var(--hpcm-kbox-accent);
	outline-offset: 2px;
}

/* ---------------- Header: icon + label + optional badge ---------------- */

.hpcm-kbox-header {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: .78rem !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--hpcm-kbox-muted) !important;
	margin-bottom: 10px;
}

.hpcm-kbox-icon { font-size: 1rem; }

.hpcm-kbox-badge {
	margin-left: auto;
	font-size: .68rem !important;
	font-weight: 800;
	letter-spacing: .04em;
	color: #fff !important;
	background: var(--hpcm-kbox-accent);
	border-radius: 999px;
	padding: 2px 9px;
}

/* ---------------- Body: the article's own content, untouched ---------------- */

.hpcm-kbox-body {
	color: var(--hpcm-kbox-text) !important;
	font-size: clamp(1rem, .95rem + .2vw, 1.1rem) !important;
	line-height: 1.75;
}

.hpcm-kbox-body > *:first-child { margin-top: 0; }
.hpcm-kbox-body > *:last-child { margin-bottom: 0; }
.hpcm-kbox-body p { margin: 0 0 .8em; }
.hpcm-kbox-body p:last-child { margin-bottom: 0; }
.hpcm-kbox-body ul,
.hpcm-kbox-body ol { margin: 0 0 .8em; padding-left: 1.3em; }
.hpcm-kbox-body li { margin-bottom: .35em; }

/* A merged run of list items renders as one list inside one box body —
 * no bullet or spacing changes needed beyond the rules above. */

/* ---------------- Per-type accent colors — visual distinction, not just text labels ---------------- */

.hpcm-kbox--important { border-left-color: #f59e0b; }
.hpcm-kbox--important .hpcm-kbox-badge { background: #f59e0b; }
.hpcm-kbox--definition { border-left-color: #7c3aed; }
.hpcm-kbox--key-fact { border-left-color: #0d9488; }
.hpcm-kbox--exam-tip { border-left-color: #ea580c; }
.hpcm-kbox--exam-tip .hpcm-kbox-badge { background: #ea580c; }
.hpcm-kbox--remember { border-left-color: #0891b2; }
.hpcm-kbox--warning { border-left-color: #dc2626; }
.hpcm-kbox--did-you-know { border-left-color: #d946ef; }
.hpcm-kbox--example { border-left-color: #16a34a; }
.hpcm-kbox--formula { border-left-color: #4338ca; }
.hpcm-kbox--shortcut { border-left-color: #eab308; }
.hpcm-kbox--revision { border-left-color: #4f46e5; }
.hpcm-kbox--law { border-left-color: #334155; }
.hpcm-kbox--article { border-left-color: #334155; }
.hpcm-kbox--constitution { border-left-color: #334155; }
.hpcm-kbox--committee { border-left-color: #64748b; }
.hpcm-kbox--timeline-reference { border-left-color: #0e7490; }
.hpcm-kbox--government-scheme { border-left-color: #15803d; }
.hpcm-kbox--government-scheme .hpcm-kbox-badge { background: #15803d; }
.hpcm-kbox--current-affairs-link { border-left-color: #db2777; }
.hpcm-kbox--hp-special { border-left-color: #b45309; }
.hpcm-kbox--hp-special .hpcm-kbox-badge { background: #b45309; }
.hpcm-kbox--previous-year-focus { border-left-color: #9333ea; }
.hpcm-kbox--previous-year-focus .hpcm-kbox-badge { background: #9333ea; }
.hpcm-kbox--frequently-confused { border-left-color: #be123c; }

/* ---------------- PHASE 15A8: new type accents, same pattern as above ---------------- */

.hpcm-kbox--concept-alert { border-left-color: #f97316; }
.hpcm-kbox--case-study { border-left-color: #0369a1; }
.hpcm-kbox--case-study .hpcm-kbox-badge { background: #0369a1; }
.hpcm-kbox--mnemonic { border-left-color: #c026d3; }
.hpcm-kbox--national-context { border-left-color: #ea580c; }
.hpcm-kbox--international-context { border-left-color: #0891b2; }
.hpcm-kbox--practice-tip { border-left-color: #65a30d; }
.hpcm-kbox--key-takeaway { border-left-color: #7c2d12; }

/* ---------------- Mobile: touch-friendly, no horizontal scroll ---------------- */

@media (max-width: 600px) {
	.hpcm-kbox { max-width: 100%; }
	.hpcm-kbox-header { flex-wrap: wrap; row-gap: 4px; }
}

/* =====================================================================
 * PHASE 15A7 — Enterprise Enhancement Layer
 * ===================================================================== */

/* ---------------- Combined cards: primary type leads, others chip in ---------------- */

.hpcm-kbox--combined .hpcm-kbox-label { margin-right: 2px; }

.hpcm-kbox-secondary {
	font-size: .72rem !important;
	font-weight: 700;
	letter-spacing: .01em;
	text-transform: none;
	color: var(--hpcm-kbox-muted) !important;
	background: rgba(0, 0, 0, .05);
	border-radius: 999px;
	padding: 2px 8px;
}


/* Badge (if the primary type has one) always reads first, secondary
 * chips follow, and margin-left:auto only applies to the badge — so a
 * combined card's chips sit right after the label instead of being
 * pushed to the far edge. */
.hpcm-kbox--combined .hpcm-kbox-badge { margin-left: 0; }

/* ---------------- Adaptive spacing: card padding scales with its own content ---------------- */

.hpcm-kbox--compact {
	padding: clamp(10px, 2vw, 14px);
}
.hpcm-kbox--compact .hpcm-kbox-header { margin-bottom: 6px; }
.hpcm-kbox--compact .hpcm-kbox-body { font-size: clamp(.95rem, .9rem + .2vw, 1.05rem); line-height: 1.6; }

.hpcm-kbox--roomy {
	padding: clamp(18px, 4vw, 26px);
}
.hpcm-kbox--roomy .hpcm-kbox-header { margin-bottom: 14px; }
.hpcm-kbox--roomy .hpcm-kbox-body { line-height: 1.8; }
/* A long, merged body reads better as visually separated paragraphs/
 * list items than one dense block — never a "wall of text". */
.hpcm-kbox--roomy .hpcm-kbox-body p,
.hpcm-kbox--roomy .hpcm-kbox-body li { margin-bottom: 1em; }

/* ---------------- Subject accent: subtle corner tint, never a design change ---------------- */

.hpcm-kbox[class*="hpcm-kbox-subject--"] { position: relative; overflow: hidden; }

.hpcm-kbox[class*="hpcm-kbox-subject--"]::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 46px;
	height: 46px;
	opacity: .08;
	pointer-events: none;
	border-radius: 0 12px 0 100%;
}

.hpcm-kbox-subject--history::after { background: #b45309; }
.hpcm-kbox-subject--geography::after { background: #0d9488; }
.hpcm-kbox-subject--polity::after { background: #4338ca; }
.hpcm-kbox-subject--science::after { background: #16a34a; }
.hpcm-kbox-subject--computer::after { background: #2563eb; }
.hpcm-kbox-subject--current-affairs::after { background: #db2777; }
.hpcm-kbox-subject--economics::after { background: #ca8a04; }


/* ---------------- Mobile refinements (PHASE 15A7) ---------------- */

@media (max-width: 600px) {
	/* Body copy never drops below 16px on mobile, even in a compact
	 * card — the clamp() floor above already guarantees this; this rule
	 * only tightens the OUTER spacing, never the type scale. */
	.hpcm-kbox--roomy { padding: clamp(14px, 4vw, 20px); }
	.hpcm-kbox-secondary { padding: 3px 9px; } /* slightly larger tap target on touch */
}

@media (max-width: 400px) {
	/* Very narrow devices: a combined card's chips stack under the
	 * label instead of crowding a single line. */
	.hpcm-kbox--combined .hpcm-kbox-header {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 4px 8px;
	}
	.hpcm-kbox--combined .hpcm-kbox-icon,
	.hpcm-kbox--combined .hpcm-kbox-label { grid-column: 1 / 2; }
	.hpcm-kbox--combined .hpcm-kbox-secondary,
	.hpcm-kbox--combined .hpcm-kbox-badge {
		grid-column: 1 / -1;
		justify-self: start;
		margin-left: 0;
	}
}