/* ============================================================
   Optivro ISPU — Numbered Action List / Index List (`.tk-index-list`)
   Counter-numbered rows: white card + navy circular number badge
   (CSS counter) + rich text. Static; reveals on the frontend only.
   Scoped under `.oiw-indexlist`. Values verbatim; 820px narrow column.
   ============================================================ */
.oiw-indexlist {
	padding: 0 40px; /* horizontal gutter matches source `.tk-section` */
}
.oiw-indexlist .oiw-inner {
	max-width: 820px; /* source `.tk-narrow` */
	margin: 0 auto;
	width: 100%;
}
/* Scoped under .oiw-indexlist so `margin-top` OUTRANKS core.css
   `.oiw-scope ol {margin:0}` (0,1,1) — a bare `.oiw-indexlist-ol` (0,1,0) would
   lose the reset and the list's 32px top gap would collapse. */
.oiw-indexlist .oiw-indexlist-ol {
	list-style: none;
	counter-reset: idx;
	display: flex;
	flex-direction: column;
	gap: 14px;
	/* Vertical rhythm from the section container's flex_gap (list_margin_top
	   control overrides per-instance). */
}
.oiw-indexlist-ol > li {
	counter-increment: idx;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 22px 26px 22px 68px;
	position: relative;
	font-size: 16px;
	line-height: 25px;
	color: #001D3A;
	opacity: .9;
}
.oiw-indexlist-ol > li::before {
	content: counter(idx);
	position: absolute;
	left: 22px;
	top: 50%;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	background: var(--navy);
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "OrpheusPro Regular", 'orpheus pro', orpheus, Georgia, serif;
	font-weight: 600;
	font-size: 15px;
}
/* Content links (light bg), verbatim. */
.oiw-indexlist-ol li a {
	color: #003377;
	text-decoration: underline;
	text-decoration-color: rgba(0, 51, 119, 0.4);
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
	font-weight: 600;
	transition: color 0.2s, text-decoration-color 0.2s;
}
.oiw-indexlist-ol li a:hover {
	color: #001D3A;
	text-decoration-color: #001D3A;
}
/* ── Sub-bullets inside a numbered action item ────────────────────────────────
   Client request (Interfaith, "Islamophobia in Black Christian communities"):
   bullet points under each numbered recommendation, matching the original
   report. The card / counter / navy badge rules above are scoped to `> li` so a
   nested item never inherits them.

   Two traps handled here:
   1. core.css resets `.oiw-scope ul {margin:0; padding:0; list-style:none}`
      (0,1,1), so the nested list needs its indent and markers restored from a
      selector that outranks it — hence everything below is scoped under
      `.oiw-indexlist` (CLAUDE.md #18).
   2. The marker is drawn with ::before rather than list-style, matching the
      toolkit's existing bullet treatment in wins.css (faint 5px navy dot).
   -------------------------------------------------------------------------- */
.oiw-indexlist .oiw-indexlist-ol > li ul {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.oiw-indexlist .oiw-indexlist-ol > li ul li {
	counter-increment: none;
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0 0 0 22px;
	position: relative;
	font-size: 15px;
	line-height: 23px;
	color: #001D3A;
	opacity: .82;
	overflow-wrap: anywhere;
}
/* Faint navy dot — same treatment as the toolkit's other bullet lists. */
.oiw-indexlist .oiw-indexlist-ol > li ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 9px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--navy);
	color: transparent;
	opacity: .4;
	transform: none;
	display: block;
}

/* When an item carries sub-bullets the card becomes tall, and the source's
   vertically-centred badge (`top:50%`) drifts down beside the bullets instead of
   sitting with the title. The source has no rule for this case - it never had
   nested lists - so per CLAUDE.md 3 this is an adaptation where the source is
   silent: align the badge to the title line, but ONLY for items that actually
   contain a nested list. Browsers without :has() simply keep the centred badge,
   so this degrades safely and no existing instance is affected. */
.oiw-indexlist .oiw-indexlist-ol > li:has(ul)::before {
	top: 22px;
	transform: none;
}

@media (max-width: 900px) {
	.oiw-indexlist {
		padding: 0 24px;
	}
}