/**
 * Table of Contents Block (the "Table of Contents Block" plugin — `eb-toc`).
 *
 * Skins the plugin's default output to the 2026 LFBC design (Figma node
 * 11701:13209): an Oatmeal-500 rounded card holding a Noto-Sans SemiBold
 * title above a decimal list of Poppy-900 bold underlined links, with
 * Soft-black-400 number markers.
 *
 * Per design direction the collapse / scroll-to-top chevron icon is NOT
 * shown — the header is title-only (we hide any Font Awesome <i> / <svg>
 * the plugin's JS injects into the header).
 *
 * SCOPE: this card skin is for the TOC block when it sits *inline in a
 * narrow post/page body* (`.lfbc-content--narrow`, set by templates
 * single.html and page-narrow.html). The TOC also appears in the post
 * sidebar widget, which has its own, different design — that lives in
 * `assets/css/patterns/post-sidebar.css` under `.lfbc-post-sidebar`. Every
 * rule below is therefore prefixed with `.lfbc-content--narrow` so it can
 * never leak into the sidebar.
 *
 * All rules are further scoped to (and out-specify the plugin's single-class
 * rules via) the block wrapper class
 * `.wp-block-table-of-contents-block-table-of-contents-block`.
 *
 * Enqueued frontend + editor in functions.php (handle: lfbc-toc).
 */

/* Card */
.lfbc-content--narrow .wp-block-table-of-contents-block-table-of-contents-block .eb-parent-wrapper .eb-toc-container {
	max-width: 99% !important;
	background-color: var(--wp--preset--color--oatmeal-500);
	border: 0;
	border-radius: 8px;
	padding: 20px 40px 40px 20px;
}

/* Title row — clickable accordion toggle (see assets/js/toc-accordion.js). */
.lfbc-content--narrow .wp-block-table-of-contents-block-table-of-contents-block .eb-parent-wrapper .eb-toc-header {
	margin-bottom: 20px;
	cursor: pointer;
	user-select: none;
}

/* Collapse the bottom gap when the list is hidden. */
.lfbc-content--narrow .wp-block-table-of-contents-block-table-of-contents-block .eb-parent-wrapper .eb-toc-container.lfbc-toc-collapsed .eb-toc-header {
	margin-bottom: 0;
}

/* Title carries the chevron pill before its text. */
.lfbc-content--narrow .wp-block-table-of-contents-block-table-of-contents-block .eb-parent-wrapper .eb-toc-title {
	display: flex;
	align-items: center;
	gap: 20px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp--preset--color--soft-black-500);
}

/* Chevron marker: white pill (28×28) + centered poppy chevron SVG — matches
 * the core-accordion skin. Points up when expanded; rotates down when
 * collapsed. SVG inlined so the icon color stays in CSS. */
.lfbc-content--narrow .wp-block-table-of-contents-block-table-of-contents-block .eb-parent-wrapper .eb-toc-title::before {
	content: "";
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-color: #ffffff;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23e8506f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 8 10 12.5 14 8'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
	transform: rotate(180deg);
	transition: transform 0.2s ease;
}

.lfbc-content--narrow .wp-block-table-of-contents-block-table-of-contents-block .eb-parent-wrapper .eb-toc-container.lfbc-toc-collapsed .eb-toc-title::before {
	transform: rotate(0deg);
}

/* Collapsed: hide the list. */
.lfbc-content--narrow .wp-block-table-of-contents-block-table-of-contents-block .eb-parent-wrapper .eb-toc-container.lfbc-toc-collapsed .eb-toc-wrapper {
	display: none;
}

/* Kill any FA glyph / SVG the plugin injects into the header (we supply our
 * own chevron above). */
.lfbc-content--narrow .wp-block-table-of-contents-block-table-of-contents-block .eb-parent-wrapper .eb-toc-header i,
.lfbc-content--narrow .wp-block-table-of-contents-block-table-of-contents-block .eb-parent-wrapper .eb-toc-header svg {
	display: none !important;
}

/* List */
.lfbc-content--narrow .wp-block-table-of-contents-block-table-of-contents-block .eb-parent-wrapper .eb-toc__list {
	margin: 0;
	padding-left: 28px;
	list-style: decimal;
}

.lfbc-content--narrow .wp-block-table-of-contents-block-table-of-contents-block .eb-parent-wrapper .eb-toc__list li {
	margin: 0 0 12px;
	padding: 0;
}

.lfbc-content--narrow .wp-block-table-of-contents-block-table-of-contents-block .eb-parent-wrapper .eb-toc__list li:last-child {
	margin-bottom: 0;
}

.lfbc-content--narrow .wp-block-table-of-contents-block-table-of-contents-block .eb-parent-wrapper .eb-toc__list li::marker {
	color: var(--wp--preset--color--soft-black-400);
	font-size: 16px;
	font-weight: 400;
}

/* Nested sub-lists (h3/h4 under an h2) get their own decimal sequence + indent. */
.lfbc-content--narrow .wp-block-table-of-contents-block-table-of-contents-block .eb-parent-wrapper .eb-toc__list .eb-toc__list {
	margin-top: 12px;
	padding-left: 24px;
}

/* Links */
.lfbc-content--narrow .wp-block-table-of-contents-block-table-of-contents-block .eb-parent-wrapper .eb-toc__list a {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--wp--preset--color--poppy-900) !important;
	text-decoration: underline !important;
}

.lfbc-content--narrow .wp-block-table-of-contents-block-table-of-contents-block .eb-parent-wrapper .eb-toc__list a:hover,
.lfbc-content--narrow .wp-block-table-of-contents-block-table-of-contents-block .eb-parent-wrapper .eb-toc__list a:focus {
	color: var(--wp--preset--color--poppy-900) !important;
	text-decoration: none !important;
}

.lfbc-content--narrow .eb-toc-container .eb-toc-title {
	border: none !important;
}

.lfbc-content--narrow .eb-toc-container.style-2:not(.list-style-none) .eb-toc__list-wrap>ol.eb-toc__list li ol li:after {
	background: none !important;
}

.lfbc-content--narrow .eb-toc-container.style-2:not(.list-style-none) .eb-toc__list-wrap>ol.eb-toc__list li ol li {
	padding-left: 20px !important;
}

.lfbc-content--narrow .eb-toc-container .eb-toc-wrapper li a {
	padding-left: 7px !important;
}
.lfbc-content--narrow .eb-toc-container.style-2:not(.list-style-none) .eb-toc__list-wrap>ol.eb-toc__list li ol li a {
	padding-left: 30px !important;
}