/* [mgg_toc] table of contents. Brand tokens come from Elementor Site Settings (fallbacks = MGG brand).
   Selectors are prefixed with .mgg-toc so Elementor's global link/heading styles can't override them. */
.mgg-toc{
	--mgg-purple:var(--e-global-color-primary,#4D00A4);
	--mgg-yellow:var(--e-global-color-accent,#FFDE59);
	--mgg-ink:var(--e-global-color-text,#161B1B);
	--mgg-soft:var(--e-global-color-764183d,#F9FAFD);
	--mgg-line:var(--e-global-color-14ef391,#C8D5DC);
	--mgg-muted:#4A5257;
	font-family:var(--e-global-typography-text-font-family,"Poppins"),system-ui,sans-serif;
	color:var(--mgg-ink);
	margin:0 0 28px;
	max-width:100%;
}
.mgg-toc *{box-sizing:border-box}
.mgg-toc .mgg-toc__box{
	background:var(--mgg-soft);
	border:1px solid var(--mgg-line);
	border-left:4px solid var(--mgg-purple);
	border-radius:10px;
	padding:14px 18px;
}
.mgg-toc .mgg-toc__title{
	display:flex;align-items:center;justify-content:space-between;gap:12px;
	cursor:pointer;list-style:none;user-select:none;margin:0;
	font-family:var(--e-global-typography-primary-font-family,"Gellix"),var(--e-global-typography-text-font-family,"Poppins"),sans-serif;
	font-size:16px;font-weight:600;line-height:1.3;color:var(--mgg-purple);
}
.mgg-toc .mgg-toc__title::-webkit-details-marker{display:none}
.mgg-toc .mgg-toc__title::marker{content:""}
.mgg-toc .mgg-toc__chevron{flex:none;transition:transform .2s ease;color:var(--mgg-purple)}
.mgg-toc .mgg-toc__box:not([open]) .mgg-toc__chevron{transform:rotate(-90deg)}
.mgg-toc .mgg-toc__title:focus-visible,.mgg-toc .mgg-toc__link:focus-visible{outline:2px solid var(--mgg-purple);outline-offset:2px;border-radius:4px}

.mgg-toc .mgg-toc__list{list-style:none;margin:8px 0 0;padding:0}
.mgg-toc .mgg-toc__list--sub{margin:2px 0 2px 12px;padding-left:10px;border-left:1px solid var(--mgg-line)}
.mgg-toc .mgg-toc__item{margin:0;padding:0;break-inside:avoid}
.mgg-toc .mgg-toc__link{
	position:relative;display:block;padding:3px 0 3px 12px;
	font-family:inherit;font-size:14.5px;font-weight:400;line-height:1.4;color:var(--mgg-ink);
	text-decoration:none;transition:color .15s ease;
}
.mgg-toc .mgg-toc__link::before{
	content:"";position:absolute;left:0;top:5px;bottom:5px;width:3px;border-radius:3px;
	background:transparent;transition:background .15s ease;
}
.mgg-toc .mgg-toc__link:hover{color:var(--mgg-purple);text-decoration:none}
.mgg-toc .mgg-toc__link.is-active{color:var(--mgg-purple);font-weight:600}
.mgg-toc .mgg-toc__link.is-active::before{background:var(--mgg-yellow)}
.mgg-toc .mgg-toc__list--sub .mgg-toc__link{font-size:13.5px;color:var(--mgg-muted);padding-top:2px;padding-bottom:2px}
.mgg-toc .mgg-toc__list--sub .mgg-toc__link:hover,.mgg-toc .mgg-toc__list--sub .mgg-toc__link.is-active{color:var(--mgg-purple)}

/* numbered="yes": 1. / 1.1 */
.mgg-toc--numbered .mgg-toc__list{counter-reset:mggtoc}
.mgg-toc--numbered .mgg-toc__item{counter-increment:mggtoc}
.mgg-toc--numbered .mgg-toc__link{display:grid;grid-template-columns:auto 1fr;column-gap:8px}
.mgg-toc--numbered .mgg-toc__link::after{content:counters(mggtoc,".") ".";order:-1;color:var(--mgg-purple);font-weight:600}

/* position="top": two columns on wide screens so it stays short */
@media (min-width:768px){
	.mgg-toc--top .mgg-toc__list:not(.mgg-toc__list--sub){columns:2;column-gap:36px}
}

/* position="sidebar": sticky on desktop, scrolls inside itself when long */
@media (min-width:1025px){
	.mgg-toc--sidebar{position:sticky;top:var(--mgg-toc-offset,130px);margin-bottom:0}
	.mgg-toc--sidebar .mgg-toc__list:not(.mgg-toc__list--sub){max-height:calc(100vh - var(--mgg-toc-offset,130px) - 80px);overflow:auto;overscroll-behavior:contain;padding-right:4px}
}

/* headings land below the sticky header after a click (header is sticky on desktop only) */
h2[id],h3[id],h4[id]{scroll-margin-top:130px}
@media (max-width:1024px){
	h2[id],h3[id],h4[id]{scroll-margin-top:20px}
	.mgg-toc .mgg-toc__box{padding:12px 14px}
	.mgg-toc .mgg-toc__link{padding-top:6px;padding-bottom:6px} /* bigger tap targets */
}

.mgg-toc--placeholder .mgg-toc__box p{margin:6px 0 0;font-size:14px;color:var(--mgg-muted)}
.mgg-toc--placeholder .mgg-toc__title-text{font-weight:600;color:var(--mgg-purple)}

/* device="desktop" | device="mobile" (same 1024px breakpoint as Elementor tablet) */
@media (max-width:1024px){.mgg-toc.mgg-toc--only-desktop{display:none}}
@media (min-width:1025px){.mgg-toc.mgg-toc--only-mobile{display:none}}

@media (prefers-reduced-motion:reduce){.mgg-toc *{transition:none!important}}
@media print{.mgg-toc{display:none}}