/**
 * LFBC Post Sidebar pattern
 *
 * "In this section" navigation widget — an eyebrow heading with a
 * colored left border above an auto-generated Table of Contents. The
 * pattern wraps the Table of Contents Block (essential-blocks /
 * `table-of-contents-block/table-of-contents-block`) in our own
 * `.lfbc-post-sidebar` aside so we keep one styling scope and the 296px
 * column width regardless of the block's own markup.
 *
 * Why we restyle the block's classes instead of using its options
 *   The TOC block is server-rendered: on the frontend it emits only
 *   structural HTML (`.eb-toc-title`, `.eb-toc__list`, …) and NONE of
 *   the per-instance "blockMeta" CSS the editor generates (the gray
 *   610px card). So the frontend block arrives essentially unstyled and
 *   we own its entire look from here. The link list is regenerated from
 *   the page's live H2–H6 headings at render time — no hardcoded
 *   anchors to maintain.
 *
 * Width
 *   The `.lfbc-post-sidebar` aside caps at 296px (Figma design width)
 *   and adds the 40px top offset; the TOC block fills it.
 *
 * Title
 *   `.eb-toc-title` is a plain <div>, so we replicate the
 *   `is-style-section-eyebrow` look here (uppercase Noto Sans label with
 *   an 8px nootka-rose left border — kept in sync with the block style
 *   in assets/css/typography.css) rather than relying on a heading block.
 *
 * List
 *   Each row gets 16px inset padding so the whole row reads as a click
 *   target, matching the legacy sidebar nav. Nested levels (H3+ under an
 *   H2) indent without changing the row treatment.
 *
 * Editor parity
 *   In the editor the block injects its own scoped "blockMeta" CSS (gray
 *   card, 610px cap, etc.). We neutralize the box-level bits with a
 *   slightly higher-specificity selector (0,3,0 — adding the block
 *   wrapper class) so the Site Editor preview matches the bare frontend.
 */

.lfbc-post-sidebar {
	max-width: 296px;
	padding-top: 40px;
}

/* Neutralize the block's editor-only "blockMeta" card so the editor
   preview matches the (unstyled) frontend. Specificity 0,3,0 beats the
   block's own `.eb-toc-<id>.eb-toc-container` (0,2,0). */
.lfbc-post-sidebar .wp-block-table-of-contents-block-table-of-contents-block .eb-toc-container {
	max-width: none;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* Title — mirrors .is-style-section-eyebrow (see typography.css). */
.lfbc-post-sidebar .eb-toc-title {
	margin: 0 0 20px;
	font-family: var(--wp--preset--font-family--noto-sans);
	font-weight: 800;
	font-size: 16px;
	line-height: 1.42;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--soft-black-500);
	border-left: 8px solid var(--wp--preset--color--nootka-rose-900);
	padding: 0 0 0 16px;
	cursor: default;
}

/* List — reset the block's spacing/markers; render as a menu stack. */
.lfbc-post-sidebar .eb-toc__list,
.lfbc-post-sidebar .eb-toc__list-wrap {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lfbc-post-sidebar .eb-toc__list li {
	margin: 0;
	padding: 0;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
	background: none;
	border-radius: 0;
}

.lfbc-post-sidebar .eb-toc__list li::marker {
	content: none;
}

.lfbc-post-sidebar .eb-toc__list a {
	display: block;
	padding: 16px 16px 2rem;
	font-family: var(--wp--preset--font-family--noto-sans);
	font-weight: 600;
	font-size: 16px;
	line-height: 1.4;
	color: var(--wp--preset--color--soft-black-500);
	text-decoration: none;
	background: none;
}

.lfbc-post-sidebar .eb-toc__list a:hover,
.lfbc-post-sidebar .eb-toc__list a:focus-visible {
	color: var(--wp--preset--color--poppy-500) !important;
	text-decoration: underline;
}

/* Top-level rows only (direct children of the list wrap, NOT the nested
   <ul> which also carries .eb-toc__list): drop the top padding. */
.lfbc-post-sidebar .eb-toc__list-wrap > .eb-toc__list > li > a {
	padding-top: 0;
}

/* Nested levels (e.g. H3s under an H2): indent the row, keep the same
   treatment, and sit on an oatmeal panel to group them under the parent.
   The nested <ul> sits inside its parent <li>.

   `!important` is required: the block's own frontend stylesheet
   (`create-block-table-of-content-block`) sets nested `.eb-toc__list`
   to `background:#fff` and loads after ours, so equal specificity loses
   on source order without it. Don't tidy the `!important` away. */
.lfbc-post-sidebar .eb-toc__list .eb-toc__list {
	background: var(--wp--preset--color--oatmeal-700) !important;
}

/* Flatten nested rows so they read the same as top-level rows: flush-left
   (match the parent's 16px) and without the block's nested "return arrow"
   marker icon. `!important` for the same source-order reason as the nested
   background rule above — the block's frontend stylesheet sets a 20px indent
   and the icon on these links and loads after ours. */
.lfbc-post-sidebar .eb-toc__list .eb-toc__list,
.lfbc-post-sidebar .eb-toc__list .eb-toc__list li {
	margin: 0 !important;
	padding: 0 !important;
}

/* The block forces nested links to `display:inline` (and out-specifies our
   base `display:block`), so padding-bottom paints but adds no layout height —
   the row never grows. Force them back to block so the 2rem pushes the <li>
   down. */
.lfbc-post-sidebar .eb-toc__list .eb-toc__list a {
	display: block !important;
	padding: 0 0 2rem 16px !important;
}

.lfbc-post-sidebar .eb-toc__list-wrap > .eb-toc__list > li > .eb-toc__list li a::before {
	content: none !important;
}