/**
 * Cresset TOC — default look is the Family Office guide accordion skin
 * (kit #17525: #414042 text, #005172 navy, #EEEEEE box, #D5D8DC rule).
 *
 * IMPORTANT: every rule below uses a single class selector (e.g.
 * `.cresset-toc__title`, not `.cresset-toc .cresset-toc__title`). That's
 * intentional, not an oversight — the widget's Style tab controls render at
 * `{{WRAPPER}} .cresset-toc__title` (two-class specificity), so keeping this
 * file at one-class specificity guarantees the Style tab always wins, on any
 * page, regardless of enqueue order. If you add a new default-look rule here,
 * keep it flat for the same reason. Rules that key off widget *state*
 * (.is-collapsed) are the exception — they legitimately need the ancestor.
 */

:root {
	--cresset-toc-offset: 100px;
}

.cresset-toc {
	box-sizing: border-box;
	background: #EEEEEE;
	padding: 0;
	font-size: 12px;
	line-height: 1.4;
}

/* Header bar / title: 16px pad, 1px bottom divider, navy circular chevron badge. */
.cresset-toc__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 16px;
	border-bottom: 1px solid #D5D8DC;
	color: #414042;
	font-size: 19px;
	font-weight: 500;
	line-height: 1.3;
}

/* Clickable/focusable only when the widget is set to Collapsible. */
.cresset-toc[data-collapsible="1"] .cresset-toc__title {
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}

.cresset-toc__title::after {
	content: "";
	display: none;
	flex: 0 0 auto;
	width: var( --cresset-toc-icon-size, 40px );
	height: var( --cresset-toc-icon-size, 40px );
	border-radius: 50%;
	background-color: #005172;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23ffffff' d='M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l211.5 211.5c4.7 4.7 12.3 4.7 17 0l211.5-211.5c4.7-4.7 4.7-12.3 0-17z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	/* Chevron glyph scales with the badge instead of staying fixed —
	   0.35/0.4 preserves the original 14px/16px-at-40px-badge ratio, so the
	   "Toggle icon size" control resizes both together proportionally. */
	background-size: calc( var( --cresset-toc-icon-size, 40px ) * 0.35 ) calc( var( --cresset-toc-icon-size, 40px ) * 0.4 );
	transition: transform .3s ease;
}

/* Only show the chevron badge when the widget is actually collapsible. */
.cresset-toc[data-collapsible="1"] .cresset-toc__title::after {
	display: block;
}

.cresset-toc[data-collapsible="1"]:not(.is-collapsed) .cresset-toc__title::after {
	transform: rotate(180deg);
}

/* Collapsible panel — margin (not padding) for the gap so it clips to 0 when collapsed. */
.cresset-toc__list {
	box-sizing: border-box;
	margin: 16px;
	padding: 0;
	list-style: none;
	overflow: hidden;
	transition: max-height .4s ease, margin .3s ease;
}

.cresset-toc.is-collapsed .cresset-toc__list {
	margin-block: 0;
}

.cresset-toc__sublist {
	margin: 0;
	padding: 0 0 0 var( --cresset-toc-indent, 13px );
	list-style: none;
}

/* "Indent top level too" — shifts the entire top-level list rightward by
   one indent step (on top of its existing 16px base margin), rather than
   padding just the top-level anchors. That matters: padding on an anchor
   only moves that anchor's own text — it does nothing to the sibling
   .cresset-toc__sublist inside the same <li>, so an anchor-only version of
   this rule left sub-items sitting at the same x-position as their
   now-indented parent, flattening the hierarchy. Shifting the whole list
   moves every descendant together, so .cresset-toc__sublist's own
   --cresset-toc-indent padding still stacks on top for the next level. */
.cresset-toc--indent-top > .cresset-toc__list {
	margin-left: calc( 16px + var( --cresset-toc-indent, 13px ) );
}

.cresset-toc.is-collapsed .cresset-toc__empty {
	display: none;
}

.cresset-toc__item {
	margin: 0;
}

.cresset-toc__link {
	display: block;
	width: fit-content;
	box-sizing: border-box;
	color: #414042;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
	opacity: 1;
	text-decoration: none;
	border-style: solid;
	border-width: 0;
	border-color: transparent;
	margin-bottom: 10px;
	/* Same var-with-fallback pattern as the vertical menu widget's
	   --dd-vmenu-transition: the widget's "Transition speed" control writes
	   --cresset-toc-transition on the .cresset-toc wrapper; this falls back
	   to 200ms when that control hasn't been touched. Border starts
	   transparent/0-width above so turning on a Style-tab border (any
	   state) reveals via this transition instead of popping in, and
	   box-sizing: border-box means that reveal doesn't shift layout. */
	transition: border-color var( --cresset-toc-transition, 200ms ) ease, color var( --cresset-toc-transition, 200ms ) ease;
}

.cresset-toc__list > .cresset-toc__item:last-child > .cresset-toc__link {
	margin-bottom: 0;
}

.cresset-toc__link:hover,
.cresset-toc__link:focus {
	color: #005172;
}

.cresset-toc__link.is-active {
	color: #005172;
	font-weight: 500;
}

/* Optional numbering (top-level items only). */
.cresset-toc--numbered > .cresset-toc__list {
	counter-reset: cressettoc;
}

.cresset-toc--numbered > .cresset-toc__list > .cresset-toc__item > .cresset-toc__link::before {
	counter-increment: cressettoc;
	content: counter( cressettoc ) ". ";
}

/* Sticky position; the top value is set inline by the widget's style control. */
.cresset-toc--sticky {
	position: sticky;
}

/* Keep jumped-to headings clear of the sticky header. */
.cresset-toc-target {
	scroll-margin-top: var( --cresset-toc-offset, 100px );
}