/* Iconnic Table of Contents
   Everything here is a default that Elementor's own style controls can override, so the widget
   looks finished the moment it is dropped in, without locking the client out of restyling it. */

.ic-toc {
	--ic-toc-indent: 16px;
	box-sizing: border-box;
	font-size: 15px;
	line-height: 1.45;
}

.ic-toc *,
.ic-toc *::before,
.ic-toc *::after { box-sizing: inherit; }

/* ------------------------------------------------------------------ heading row */
.ic-toc__head { margin-bottom: 14px; }

.ic-toc__title {
	display: block;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	font-size: .8125rem;
}

.ic-toc__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.ic-toc__toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.ic-toc__chev {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .2s ease;
}

.ic-toc__toggle[aria-expanded="false"] .ic-toc__chev {
	transform: rotate(-45deg) translate(-2px, 2px);
}

/* An optional hairline under the heading, switched on by the "Rule under the heading" control. */
.ic-toc-rule-yes .ic-toc__head {
	padding-bottom: 12px;
	border-bottom: 1px solid currentColor;
	opacity: 1;
}

/* ------------------------------------------------------------------------ lists */
.ic-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Numbered mode keeps real <ol> semantics, so the numbers come from the list itself. */
.ic-toc ol.ic-toc__list {
	list-style: decimal;
	padding-left: 1.4em;
}
.ic-toc ol.ic-toc__list .ic-toc__list { list-style: lower-alpha; }

.ic-toc__item { margin: 0; }
.ic-toc__item + .ic-toc__item { margin-top: 10px; }

/* Nested levels indent by one step each. */
.ic-toc__list--2 { margin-top: 10px; padding-left: var(--ic-toc-indent); }
.ic-toc__list--3 { margin-top: 8px;  padding-left: var(--ic-toc-indent); }
.ic-toc__list--4 { margin-top: 8px;  padding-left: var(--ic-toc-indent); }

.ic-toc ol.ic-toc__list--2,
.ic-toc ol.ic-toc__list--3,
.ic-toc ol.ic-toc__list--4 { padding-left: calc(var(--ic-toc-indent) + 1.4em); }

/* A filler item exists only to carry a nested list when a post skips a level
   (H2 straight to H4). It must not take vertical space of its own. */
.ic-toc__item--filler { margin: 0 !important; list-style: none; }
.ic-toc__item--filler > .ic-toc__list { margin-top: 0; }

/* ------------------------------------------------------------------------ links */
.ic-toc__link {
	position: relative;
	display: block;
	text-decoration: none;
	color: inherit;
	transition: color .18s ease;
}

.ic-toc__link:hover,
.ic-toc__link:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.ic-toc__link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* Deeper levels read as secondary without needing a second colour control. */
.ic-toc__item--2 > .ic-toc__link,
.ic-toc__item--3 > .ic-toc__link,
.ic-toc__item--4 > .ic-toc__link { font-size: .95em; opacity: .85; }

/* The section currently being read. */
.ic-toc__link.is-current { font-weight: 700; opacity: 1; }

.ic-toc__link.is-current::before {
	content: "";
	position: absolute;
	left: calc(var(--ic-toc-indent) * -1 + 4px);
	top: .35em;
	width: 3px;
	height: 1em;
	border-radius: 2px;
	background: currentColor;
}

/* In numbered mode the marker column already carries the eye, so drop the bar. */
.ic-toc ol.ic-toc__list .ic-toc__link.is-current::before { content: none; }

/* --------------------------------------------------------------------- sticky */
.ic-toc--sticky { position: sticky; top: 96px; }

/* --------------------------------------------------------------- editor notice */
.ic-toc--notice {
	padding: 14px 16px;
	border: 1px dashed currentColor;
	border-radius: 8px;
	opacity: .7;
	font-size: 13px;
}

/* ------------------------------------------------- landing offset for anchors */
/* Without this every jump lands underneath the sticky site header. The value is written onto
   the document element by toc.js from the widget's own Scroll offset control. */
:where(h2, h3, h4, h5, h6)[id] {
	scroll-margin-top: var(--ic-toc-scroll-offset, 96px);
}

@media (prefers-reduced-motion: reduce) {
	.ic-toc__chev { transition: none; }
	.ic-toc__link { transition: none; }
}