/* ================================================================
   ECTO SUMÁRIO (TOC) — ecto-toc.css
   Todas as classes usam o prefixo .ecto-toc- para não colidir
   com o tema, com o Elementor ou com outros plugins.
   ================================================================ */

.ecto-toc-wrap {
	/* --- caixa --- */
	--ecto-toc-card-bg:            #ffffff;
	--ecto-toc-radius:             24px;
	--ecto-toc-pad:                32px;
	--ecto-toc-gap:                24px;   /* cabeçalho → lista */

	/* --- lista --- */
	--ecto-toc-item-gap:           8px;
	--ecto-toc-sub-gap:            0px;
	--ecto-toc-indent:             18px;
	--ecto-toc-item-pad-y:         4px;
	--ecto-toc-item-pad-x:         0px;
	--ecto-toc-item-radius:        6px;
	--ecto-toc-num-gap:            8px;
	--ecto-toc-num-width:          auto;

	/* --- trilho dos sub-itens --- */
	--ecto-toc-rail-x:             5px;
	--ecto-toc-rail-w:             1px;
	--ecto-toc-rail-color:         #f4f4f5;
	--ecto-toc-dot-size:           9px;
	--ecto-toc-dot-bg:             #fafafa;
	--ecto-toc-dot-border:         #f4f4f5;
	--ecto-toc-dot-active-bg:      #2f6af7;
	--ecto-toc-dot-active-border:  #2f6af7;

	/* --- cores por nível --- */
	--ecto-toc-title-color:        #717179;
	--ecto-toc-count-color:        #717179;
	--ecto-toc-count-bg:           #f4f4f5;

	--ecto-toc-l1-color:           #52525a;
	--ecto-toc-l1-hover:           #18181b;
	--ecto-toc-l1-active:          #2f6af7;
	--ecto-toc-l1-bg:              transparent;
	--ecto-toc-l1-hover-bg:        transparent;
	--ecto-toc-l1-active-bg:       transparent;

	--ecto-toc-l2-color:           #717179;
	--ecto-toc-l2-hover:           #18181b;
	--ecto-toc-l2-active:          #2f6af7;
	--ecto-toc-l2-bg:              transparent;
	--ecto-toc-l2-hover-bg:        transparent;
	--ecto-toc-l2-active-bg:       transparent;

	--ecto-toc-l3-color:           #a1a1aa;
	--ecto-toc-l3-hover:           #18181b;
	--ecto-toc-l3-active:          #2f6af7;
	--ecto-toc-l3-bg:              transparent;
	--ecto-toc-l3-hover-bg:        transparent;
	--ecto-toc-l3-active-bg:       transparent;

	/* --- indicador lateral do item ativo --- */
	--ecto-toc-marker-w:           0px;
	--ecto-toc-marker-color:       #2f6af7;
	--ecto-toc-marker-offset:      8px;

	/* --- ver mais / voltar ao topo --- */
	--ecto-toc-more-color:         #2f6af7;
	--ecto-toc-more-hover:         #18181b;
	--ecto-toc-fade-color:         #ffffff;
	--ecto-toc-fade-height:        40px;

	/* --- progresso --- */
	--ecto-toc-progress:           0;
	--ecto-toc-progress-color:     #2f6af7;
	--ecto-toc-progress-track:     #f4f4f5;
	--ecto-toc-progress-size:      3px;

	/* --- comportamento --- */
	--ecto-toc-scroll-offset:      100px;
	--ecto-toc-limit:              5;
	--ecto-toc-max-h:              none;
	--ecto-toc-duration:           320ms;
	--ecto-toc-scrollbar:          4px;

	position: relative;
	display: block;
}

/* Enquanto o JS ainda não montou a lista (parse do servidor vazio). */
.ecto-toc-wrap--js-pending,
.ecto-toc-wrap--empty {
	display: none !important;
}

/* ================================================================
   CARD
   ================================================================ */

.ecto-toc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--ecto-toc-gap);
	background-color: var(--ecto-toc-card-bg);
	border: 1px solid #f4f4f5;
	border-radius: var(--ecto-toc-radius);
	padding: var(--ecto-toc-pad);
	overflow: hidden;
	transition: gap var(--ecto-toc-duration) ease;
}

/* ================================================================
   CABEÇALHO
   ================================================================ */

/* Reset forte: temas e kits do Elementor estilizam <button> genérico
   (fundo, padding, radius, cor). Especificidade alta de propósito. */
.ecto-toc-wrap button.ecto-toc-header,
.ecto-toc-wrap button.ecto-toc-more,
.ecto-toc-wrap button.ecto-toc-caret {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	padding: 0;
	background: none transparent;
	background-color: transparent;
	border: 0 none;
	border-radius: 0;
	box-shadow: none;
	text-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	min-width: 0;
	min-height: 0;
	width: auto;
	height: auto;
	cursor: pointer;
}

.ecto-toc-wrap button.ecto-toc-header:hover,
.ecto-toc-wrap button.ecto-toc-more:hover,
.ecto-toc-wrap button.ecto-toc-caret:hover,
.ecto-toc-wrap button.ecto-toc-header:focus,
.ecto-toc-wrap button.ecto-toc-more:focus,
.ecto-toc-wrap button.ecto-toc-caret:focus {
	background: none transparent;
	background-color: transparent;
	box-shadow: none;
}

.ecto-toc-wrap .ecto-toc-header {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: left;
	color: var(--ecto-toc-title-color);
	font: inherit;
}

.ecto-toc-wrap .ecto-toc-title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 24px;
	color: var(--ecto-toc-title-color);
}

.ecto-toc-header-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	color: var(--ecto-toc-title-color);
}

.ecto-toc-header-icon svg,
.ecto-toc-header-icon i {
	width: 1em;
	height: 1em;
	font-size: inherit;
}

.ecto-toc-wrap .ecto-toc-count {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background-color: var(--ecto-toc-count-bg);
	color: var(--ecto-toc-count-color);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
}

.ecto-toc-wrap .ecto-toc-header-arrow {
	flex: 0 0 auto;
	display: inline-flex;
	width: 18px;
	height: 18px;
	color: var(--ecto-toc-title-color);
	transition: transform var(--ecto-toc-duration) ease;
}

.ecto-toc-wrap .ecto-toc-header-arrow svg {
	width: 100%;
	height: 100%;
}

.ecto-toc-wrap--collapsed .ecto-toc-header-arrow {
	transform: rotate(-90deg);
}

.ecto-toc-header--divider {
	padding-bottom: 16px;
	border-bottom: 1px solid var(--ecto-toc-rail-color);
}

/* ================================================================
   CORPO / COLAPSO GERAL
   ================================================================ */

.ecto-toc-body {
	position: relative;
	overflow: hidden;
	transition: max-height var(--ecto-toc-duration) ease, opacity var(--ecto-toc-duration) ease;
}

.ecto-toc-wrap--collapsed .ecto-toc-body {
	max-height: 0 !important;
	opacity: 0;
}

.ecto-toc-wrap--collapsed .ecto-toc-card {
	gap: 0;
}

/* Rolagem interna (útil com o sumário fixo) */
.ecto-toc-scroll {
	max-height: var(--ecto-toc-max-h);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--ecto-toc-rail-color) transparent;
}

.ecto-toc-scroll::-webkit-scrollbar {
	width: var(--ecto-toc-scrollbar);
}

.ecto-toc-scroll::-webkit-scrollbar-track {
	background: transparent;
}

.ecto-toc-scroll::-webkit-scrollbar-thumb {
	background-color: var(--ecto-toc-rail-color);
	border-radius: 999px;
}

/* Recorte do "ver mais" */
.ecto-toc-clip {
	position: relative;
	transition: max-height var(--ecto-toc-duration) ease;
}

.ecto-toc-wrap--clipped .ecto-toc-clip {
	overflow: hidden;
}

.ecto-toc-wrap--clipped.ecto-toc-wrap--fade .ecto-toc-clip::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--ecto-toc-fade-height);
	pointer-events: none;
	background: linear-gradient(to bottom, transparent, var(--ecto-toc-fade-color));
}

/* ================================================================
   LISTA
   ================================================================ */

.ecto-toc-wrap .ecto-toc-list {
	display: flex;
	flex-direction: column;
	gap: var(--ecto-toc-item-gap);
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: ecto-toc-counter;
}

.ecto-toc-wrap .ecto-toc-sublist {
	gap: var(--ecto-toc-sub-gap);
	margin-top: var(--ecto-toc-sub-gap);
	padding-left: var(--ecto-toc-indent);
}

.ecto-toc-wrap .ecto-toc-item {
	position: relative;
	margin: 0;
	padding: 0;
}

.ecto-toc-wrap .ecto-toc-item::marker {
	content: "";
}

.ecto-toc-row {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 4px;
}

.ecto-toc-wrap .ecto-toc-link {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: flex-start;
	gap: var(--ecto-toc-num-gap);
	padding: var(--ecto-toc-item-pad-y) var(--ecto-toc-item-pad-x);
	border-radius: var(--ecto-toc-item-radius);
	font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	text-decoration: none;
	box-shadow: none;
	transition: color 0.18s ease, background-color 0.18s ease;
}

.ecto-toc-wrap .ecto-toc-text {
	display: block;
	min-width: 0;
	word-break: break-word;
}

/* Truncar em N linhas */
.ecto-toc-wrap[data-clamp] .ecto-toc-text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--ecto-toc-clamp, 2);
	line-clamp: var(--ecto-toc-clamp, 2);
	overflow: hidden;
}

.ecto-toc-wrap .ecto-toc-link:hover .ecto-toc-text,
.ecto-toc-wrap .ecto-toc-link:focus-visible .ecto-toc-text {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ecto-toc-wrap .ecto-toc-link:focus-visible {
	outline: 2px solid var(--ecto-toc-l1-active);
	outline-offset: 2px;
}

/* --- cores por nível --- */
.ecto-toc-wrap .ecto-toc-item--lvl1 > .ecto-toc-row > .ecto-toc-link {
	color: var(--ecto-toc-l1-color);
	background-color: var(--ecto-toc-l1-bg);
}
.ecto-toc-wrap .ecto-toc-item--lvl1 > .ecto-toc-row > .ecto-toc-link:hover {
	color: var(--ecto-toc-l1-hover);
	background-color: var(--ecto-toc-l1-hover-bg);
}
.ecto-toc-wrap .ecto-toc-item--lvl1.ecto-toc-item--active > .ecto-toc-row > .ecto-toc-link {
	color: var(--ecto-toc-l1-active);
	background-color: var(--ecto-toc-l1-active-bg);
}

.ecto-toc-wrap .ecto-toc-item--lvl2 > .ecto-toc-row > .ecto-toc-link {
	color: var(--ecto-toc-l2-color);
	background-color: var(--ecto-toc-l2-bg);
}
.ecto-toc-wrap .ecto-toc-item--lvl2 > .ecto-toc-row > .ecto-toc-link:hover {
	color: var(--ecto-toc-l2-hover);
	background-color: var(--ecto-toc-l2-hover-bg);
}
.ecto-toc-wrap .ecto-toc-item--lvl2.ecto-toc-item--active > .ecto-toc-row > .ecto-toc-link {
	color: var(--ecto-toc-l2-active);
	background-color: var(--ecto-toc-l2-active-bg);
}

.ecto-toc-wrap .ecto-toc-item--lvl3 > .ecto-toc-row > .ecto-toc-link,
.ecto-toc-wrap .ecto-toc-item--lvl4 > .ecto-toc-row > .ecto-toc-link,
.ecto-toc-wrap .ecto-toc-item--lvl5 > .ecto-toc-row > .ecto-toc-link,
.ecto-toc-wrap .ecto-toc-item--lvl6 > .ecto-toc-row > .ecto-toc-link {
	color: var(--ecto-toc-l3-color);
	background-color: var(--ecto-toc-l3-bg);
}
.ecto-toc-wrap .ecto-toc-item--lvl3 > .ecto-toc-row > .ecto-toc-link:hover,
.ecto-toc-wrap .ecto-toc-item--lvl4 > .ecto-toc-row > .ecto-toc-link:hover,
.ecto-toc-wrap .ecto-toc-item--lvl5 > .ecto-toc-row > .ecto-toc-link:hover,
.ecto-toc-wrap .ecto-toc-item--lvl6 > .ecto-toc-row > .ecto-toc-link:hover {
	color: var(--ecto-toc-l3-hover);
	background-color: var(--ecto-toc-l3-hover-bg);
}
.ecto-toc-wrap .ecto-toc-item--lvl3.ecto-toc-item--active > .ecto-toc-row > .ecto-toc-link,
.ecto-toc-wrap .ecto-toc-item--lvl4.ecto-toc-item--active > .ecto-toc-row > .ecto-toc-link,
.ecto-toc-wrap .ecto-toc-item--lvl5.ecto-toc-item--active > .ecto-toc-row > .ecto-toc-link,
.ecto-toc-wrap .ecto-toc-item--lvl6.ecto-toc-item--active > .ecto-toc-row > .ecto-toc-link {
	color: var(--ecto-toc-l3-active);
	background-color: var(--ecto-toc-l3-active-bg);
}

/* --- indicador lateral do item ativo --- */
.ecto-toc-item--active > .ecto-toc-row::before {
	content: "";
	position: absolute;
	left: calc(var(--ecto-toc-marker-offset) * -1);
	top: var(--ecto-toc-item-pad-y);
	bottom: var(--ecto-toc-item-pad-y);
	width: var(--ecto-toc-marker-w);
	border-radius: 999px;
	background-color: var(--ecto-toc-marker-color);
}

/* ================================================================
   TRILHO + DOT DOS SUB-ITENS (spec do Figma)
   ================================================================ */

.ecto-toc-wrap--rail .ecto-toc-sublist {
	position: relative;
}

.ecto-toc-wrap--rail .ecto-toc-sublist::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--ecto-toc-rail-x) - var(--ecto-toc-rail-w) / 2);
	width: var(--ecto-toc-rail-w);
	background-color: var(--ecto-toc-rail-color);
}

.ecto-toc-wrap--rail .ecto-toc-sublist > .ecto-toc-item::before {
	content: "";
	position: absolute;
	left: calc(var(--ecto-toc-indent) * -1 + var(--ecto-toc-rail-x));
	top: calc(var(--ecto-toc-item-pad-y) + 0.75em);
	width: var(--ecto-toc-dot-size);
	height: var(--ecto-toc-dot-size);
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background-color: var(--ecto-toc-dot-bg);
	border: 1px solid var(--ecto-toc-dot-border);
	box-sizing: border-box;
	transition: background-color 0.18s ease, border-color 0.18s ease;
	z-index: 1;
}

.ecto-toc-wrap--rail .ecto-toc-sublist > .ecto-toc-item--active::before {
	background-color: var(--ecto-toc-dot-active-bg);
	border-color: var(--ecto-toc-dot-active-border);
}

/* ================================================================
   NUMERAÇÃO / MARCADORES
   ================================================================ */

.ecto-toc-wrap .ecto-toc-num {
	flex: 0 0 auto;
	display: none;
	min-width: var(--ecto-toc-num-width);
	color: inherit;
	opacity: 0.65;
	font-variant-numeric: tabular-nums;
}

.ecto-toc-wrap .ecto-toc-num > svg,
.ecto-toc-wrap .ecto-toc-num > i {
	width: 1em;
	height: 1em;
	font-size: inherit;
	display: block;
}

.ecto-toc-wrap:not([data-numbering="none"]) .ecto-toc-num {
	display: block;
}

.ecto-toc-wrap:not([data-numbering="none"]) .ecto-toc-link {
	counter-increment: ecto-toc-counter;
}

.ecto-toc-wrap[data-numbering="decimal"] .ecto-toc-num::before {
	content: counter(ecto-toc-counter) ".";
}

.ecto-toc-wrap[data-numbering="nested"] .ecto-toc-num::before {
	content: counters(ecto-toc-counter, ".") ".";
}

.ecto-toc-wrap[data-numbering="bullet"] .ecto-toc-num::before {
	content: "•";
}

/* ================================================================
   CARET (sub-níveis recolhíveis manualmente)
   ================================================================ */

.ecto-toc-wrap .ecto-toc-caret {
	display: none;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 32px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: currentColor;
	opacity: 0.6;
	transition: transform var(--ecto-toc-duration) ease, opacity 0.18s ease;
}

.ecto-toc-wrap .ecto-toc-caret:hover {
	opacity: 1;
}

.ecto-toc-wrap .ecto-toc-caret svg {
	width: 14px;
	height: 14px;
}

.ecto-toc-wrap[data-nested="manual"] .ecto-toc-item--has-children > .ecto-toc-row > .ecto-toc-caret {
	display: inline-flex;
}

.ecto-toc-item--expanded > .ecto-toc-row > .ecto-toc-caret {
	transform: rotate(90deg);
}

/* Sub-níveis recolhidos */
.ecto-toc-wrap[data-nested="manual"] .ecto-toc-sublist,
.ecto-toc-wrap[data-nested="active"] .ecto-toc-sublist {
	overflow: hidden;
	transition: max-height var(--ecto-toc-duration) ease, opacity var(--ecto-toc-duration) ease;
}

.ecto-toc-wrap[data-nested="manual"] .ecto-toc-item--has-children:not(.ecto-toc-item--expanded) > .ecto-toc-sublist,
.ecto-toc-wrap[data-nested="active"] .ecto-toc-item--has-children:not(.ecto-toc-item--expanded) > .ecto-toc-sublist {
	max-height: 0;
	opacity: 0;
	margin-top: 0;
}

/* ================================================================
   VER MAIS / VOLTAR AO TOPO
   ================================================================ */

.ecto-toc-wrap .ecto-toc-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 16px;
}

.ecto-toc-wrap .ecto-toc-actions:empty,
.ecto-toc-wrap .ecto-toc-actions[hidden] {
	display: none;
}

.ecto-toc-wrap .ecto-toc-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--ecto-toc-more-color);
	font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 24px;
	transition: color 0.18s ease;
}

.ecto-toc-wrap .ecto-toc-more:hover {
	color: var(--ecto-toc-more-hover);
}

.ecto-toc-more-icon {
	display: inline-flex;
	width: 16px;
	height: 16px;
	transition: transform var(--ecto-toc-duration) ease;
}

.ecto-toc-more-icon svg {
	width: 100%;
	height: 100%;
}

.ecto-toc-wrap--expanded .ecto-toc-more-icon {
	transform: rotate(180deg);
}

.ecto-toc-wrap .ecto-toc-more[hidden] {
	display: none;
}

.ecto-toc-wrap .ecto-toc-top {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--ecto-toc-more-color);
	font-size: 14px;
	line-height: 24px;
	text-decoration: none;
}

.ecto-toc-wrap .ecto-toc-top:hover {
	color: var(--ecto-toc-more-hover);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ================================================================
   PROGRESSO DE LEITURA
   ================================================================ */

.ecto-toc-bar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: var(--ecto-toc-progress-size);
	background-color: var(--ecto-toc-progress-track);
	overflow: hidden;
	z-index: 2;
}

.ecto-toc-bar::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--ecto-toc-progress-color);
	transform: scaleX(var(--ecto-toc-progress));
	transform-origin: left center;
	transition: transform 0.12s linear;
}

.ecto-toc-wrap--progress-rail .ecto-toc-list--root {
	padding-left: calc(var(--ecto-toc-progress-size) + 16px);
}

.ecto-toc-rail {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: var(--ecto-toc-progress-size);
	border-radius: 999px;
	background-color: var(--ecto-toc-progress-track);
	overflow: hidden;
}

.ecto-toc-rail::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--ecto-toc-progress-color);
	transform: scaleY(var(--ecto-toc-progress));
	transform-origin: center top;
	transition: transform 0.12s linear;
}

/* ================================================================
   ACESSIBILIDADE / MOVIMENTO
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
	.ecto-toc-body,
	.ecto-toc-clip,
	.ecto-toc-sublist,
	.ecto-toc-wrap .ecto-toc-header-arrow,
	.ecto-toc-more-icon,
	.ecto-toc-wrap .ecto-toc-caret {
		transition: none !important;
	}
}