/* Full width by default: the inner blocks each supply their own site gutter
   (`padding-inline: grid-margin`), so constraining the wrapper here too would
   double the inline gutter below the desktop breakpoint. The max-width cap and
   centring are only needed for the two-column desktop layout and live in the
   `width >= 1400px` query. */
.ebn-anchored-content {
    width: 100%;
}

.ebn-anchored-content__link {
	--_padding-block: var(--wp--preset--spacing--s);
	--_padding-inline: var(--wp--preset--spacing--s);

	font-size: var(--wp--preset--font-size--2-xs);
}

/* The block configures the shared `ob-anchor-navigation` component and decides
   its placement; the sticky itself is the component's concern (it lives on
   `.ob-anchor-navigation__inner`). Selectors are scoped (0,2,0) to win over the
   component defaults, since the theme bundle loads after this block's inline
   styles. */
.ebn-anchored-content .ebn-anchored-content__navigation {
	--_sticky-offset: var(--site-header-height); /* configure the component, don't re-implement its sticky */
	--_padding-inline-start: 0; /* this block doesn't want the component's trailing inline padding */
	--_padding-inline-end: 0; /* this block doesn't want the component's trailing inline padding */

	display: none; /* the sidebar is desktop-only — a block layout decision */
}

/* Below the desktop breakpoint the navigation sidebar is hidden, so the content
   is a plain single column. The inner blocks supply their own site gutter, so
   the panel inset is a desktop-only concern — applying it here would add an
   inline gutter and vertical spacing the rest of the page doesn't have. */
.ebn-anchored-content__content {
	min-width: 0;
	color: var(--wp--preset--color--brand-primary-50);
}

/* Core WP blocks (heading, paragraph, list, table, quote…) dropped into the
   anchored content don't carry the site gutter or the project's heading scale
   the way the ebn-* blocks do, so on mobile they sit flush to the edge and
   headings fall back to browser defaults. Give core blocks the same site gutter
   and editorial heading scale used in `.content-editorial`.

   Inner blocks render inside ACF's `.acf-innerblocks-container`; scoping to its
   direct children (by element type) reaches the core blocks while leaving the
   ebn-* blocks — direct children too, but rendered as `div.wp-block-ebn-*`, and
   already gutter-aware — untouched. */
.ebn-anchored-content__content .acf-innerblocks-container > :is(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, pre, hr) {
	padding-inline: var(--wp--custom--grid--margin);
}

.ebn-anchored-content__content .acf-innerblocks-container > :is(figure) {
	padding-inline: 0;
}

/* Lists need room for their markers (bullets / numbers) on top of the block
   gutter — with only the gutter the markers render `outside` flush against the
   mobile edge. Extra start padding indents the marker inside the gutter; the
   end side keeps the plain gutter from the rule above. */
.ebn-anchored-content__content .acf-innerblocks-container > :is(ul, ol) {
	padding-inline-start: calc(var(--wp--custom--grid--margin) + 1.5em);
	color: var(--wp--preset--color--brand-primary-40);
}

.ebn-anchored-content__content .acf-innerblocks-container > :first-child {
	margin-block-start: 0;
}

.ebn-anchored-content__content .acf-innerblocks-container > :last-child {
	margin-block-end: 0;
}

.ebn-anchored-content__content .acf-innerblocks-container > h2 {
	font-family: var(--font-family--h2);
	font-size: var(--font-size--h2);
	font-weight: var(--font-weight--semibold);
	line-height: 1;
}

.ebn-anchored-content__content .acf-innerblocks-container > h3 {
	font-family: var(--font-family--h3);
	font-size: var(--font-size--h3);
	font-weight: var(--font-weight--semibold);
	line-height: 1;
}

.ebn-anchored-content__content .acf-innerblocks-container > h4 {
	font-family: var(--font-family--h4);
	font-size: var(--font-size--h4);
	font-weight: var(--font-weight--semibold);
	line-height: 1.2;
}

.ebn-anchored-content__content .acf-innerblocks-container > h5 {
	font-family: var(--font-family--h5);
	font-size: var(--font-size--h5);
	font-weight: var(--font-weight--semibold);
	line-height: 1.3;
}

.ebn-anchored-content__content .acf-innerblocks-container > h6 {
	font-family: var(--font-family--h6);
	font-size: var(--font-size--h6);
	font-weight: var(--font-weight--semibold);
	line-height: 1.4;
}

.ebn-anchored-content__content .acf-innerblocks-container em {
	font-style: italic;
	color: var(--wp--preset--color--brand-secondary-50);
}

.ebn-anchored-content__content .acf-innerblocks-container > p {
	color: var(--wp--preset--color--brand-primary-40);
}

/* Core table block: a plain, generic table (no per-column widths). The look
   follows `ebn-table-address` loosely — brand header row, thin cell separators —
   but stays column-agnostic. On narrow viewports a wide table scrolls inside
   its figure instead of breaking the layout. */
.ebn-anchored-content__content .acf-innerblocks-container > figure.wp-block-table {
	overflow-x: auto;
}

/* `.acf-innerblocks-container` is included to raise specificity above WordPress
   core's `.wp-block-table.has-fixed-layout table` (0,2,1), so `table-layout: auto`
   wins and columns size to content — a generic table, not fixed column widths. */
.ebn-anchored-content__content .acf-innerblocks-container .wp-block-table table {
	table-layout: auto;
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--2-xs);
}

.ebn-anchored-content__content .acf-innerblocks-container .wp-block-table :is(th, td) {
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--s);
	border-bottom: 1px solid var(--wp--preset--color--brand-primary-30);
	text-align: center;
	vertical-align: top;
}

.ebn-anchored-content__content .acf-innerblocks-container .wp-block-table th {
	color: var(--wp--preset--color--neutral-white);
	background-color: var(--wp--preset--color--brand-primary-50);
	border: 1px solid var(--wp--preset--color--brand-primary-50);
	font-weight: 600;
	text-align: center;
	text-transform: uppercase;
}

@media (width >= 1400px) {

	/* Constrain and centre only once the sidebar layout is active. */
	.ebn-anchored-content {
		width: min(100% - var(--wp--custom--grid--margin) * 2, var(--wp--custom--width--default));
		margin-inline: auto;
	}

	.ebn-anchored-content__container {
		--ebn-anchored-content-nav-width: 200px;
		--_width: calc(var(--ebn-anchored-content-nav-width) + var(--wp--preset--spacing--s) * 2);

		display: grid;
		grid-template-columns: calc(var(--wp--custom--grid--margin) + var(--wp--preset--spacing--m) + var(--_width)) minmax(0, 1fr);
	}

	.ebn-anchored-content .ebn-anchored-content__navigation {
		display: flex;
	}

	/* Panel inset alongside the sidebar — desktop layout only (see note above). */
	.ebn-anchored-content__content {
		padding-block: var(--wp--preset--spacing--m);
		padding-inline: var(--wp--preset--spacing--m);
	}

	.ebn-anchored-content__content .acf-innerblocks-container > :is(figure) {
		padding-inline: var(--wp--custom--grid--margin);
	}
}