/* =========================================================================
   mefi Cuprins — Table of Contents (design system mefi)
   Tokens: brand #252299 · CTA #fc7010 · text tare #060613 · slab #77778c
           mai slab #9d9db2 · border #dadae5 · radius 12px
   ========================================================================= */

.mefi-toc{
	background:#fff;
	border:1px solid #dadae5;
	border-radius:12px;
	box-shadow:0 1px 2px -1px rgba(10,13,18,.10),0 1px 3px 0 rgba(10,13,18,.10);
	padding:16px 18px;
	font-family:"Mona Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	box-sizing:border-box;
}
.mefi-toc *{box-sizing:border-box;}

.mefi-toc__title{
	display:flex;align-items:center;justify-content:space-between;gap:8px;
	color:#060613;font-weight:600;font-size:16px;line-height:24px;
	margin:0 0 12px;letter-spacing:-.01em;
}
.mefi-toc__titletext{display:inline-block;}

/* Buton collapse */
.mefi-toc__toggle{
	display:inline-flex;align-items:center;justify-content:center;
	width:28px;height:28px;padding:0;margin:-4px -6px -4px 0;
	background:transparent;border:0;border-radius:8px;color:#77778c;cursor:pointer;
	transition:background-color .12s,color .12s;
}
.mefi-toc__toggle:hover{background:#f4f4f7;color:#252299;}
.mefi-toc__toggle:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #252299;}
.mefi-toc__chev{display:block;transition:transform .18s ease;}
.mefi-toc.is-collapsed .mefi-toc__chev{transform:rotate(-90deg);}
.mefi-toc.is-collapsed .mefi-toc__list{display:none;}

/* Listă */
.mefi-toc__list,.mefi-toc__list ul{list-style:none;margin:0;padding:0;}
.mefi-toc__list ul{margin:4px 0 0;padding-left:12px;}
.mefi-toc__item{margin:6px 0;line-height:1.4;}

.mefi-toc__link{
	display:block;color:#252299;text-decoration:none;font-weight:500;font-size:14px;
	border-left:2px solid transparent;padding-left:10px;
	transition:color .12s,border-color .12s;
}
.mefi-toc__link:hover{color:#fc7010;}
.mefi-toc__sublink{color:#77778c;font-weight:400;font-size:13px;}
.mefi-toc__link.is-active{color:#252299;border-left-color:#fc7010;font-weight:600;}
.mefi-toc__sublink.is-active{color:#fc7010;border-left-color:#fc7010;}
.mefi-toc__link:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #252299;border-radius:4px;}

/* Ancore: compensează header-ul sticky al temei la aterizarea pe secțiune */
h2[id],h3[id]{scroll-margin-top:100px;}

/* Coloana de conținut nu trebuie să depășească grid-ul */
.mefi-toc-main{min-width:0;}

/* -------------------------------------------------------------------------
   Desktop (>=1400px): rail-ul sticky stă în GUTTER-ul liber din STÂNGA (breakout),
   ca să NU fure spațiu din articol. Coloana de conținut rămâne exact pe poziția ei
   originală; rail-ul e împins în marginea liberă. Urmărește scroll-ul și se oprește
   la finalul articolului. Se aplică DOAR în .mefi-toc-wrap (rail), nu la [mefi_toc] inline.
   NOTĂ mefi.ro: 900px = lățimea containerului de articol al temei. Dacă se schimbă,
   actualizează valoarea din calc() de mai jos. ------------------------------------ */
@media(min-width:1400px){
	/* FIX sticky: tema pune overflow-x:hidden pe main.site-main, ceea ce face
	   overflow-y să devină `auto` → main devine „scroll container" și rupe
	   position:sticky (rail-ul nu mai urmărește scroll-ul). Pe articolele cu cuprins
	   trecem overflow-x pe `clip` (taie la fel orizontal, dar NU creează scroll
	   container). Necesită :has() (fallback grațios: rail static). Dacă tema
	   redenumește `main.site-main`, actualizează selectorul de mai jos. */
	main.site-main:has(.mefi-toc-wrap){overflow-x:clip;overflow-y:visible;}

	.mefi-toc-wrap{
		/* cât împingem rail-ul spre stânga: max 290px (rail 250 + gap 40),
		   dar niciodată mai mult decât permite gutter-ul → fără clipping pe ecrane înguste */
		--mefi-pull:min(290px, calc((100vw - 900px) / 2 - 8px));
		display:grid;
		grid-template-columns:250px minmax(0,1fr);
		gap:40px;
		align-items:start;
		width:calc(100% + var(--mefi-pull));
		margin-left:calc(-1 * var(--mefi-pull));
	}
	.mefi-toc-wrap > .mefi-toc{
		position:sticky;
		top:104px;
		max-height:calc(100vh - 140px);
		overflow-y:auto;
		scrollbar-width:thin;scrollbar-color:#dadae5 transparent;
	}
	.mefi-toc-wrap > .mefi-toc::-webkit-scrollbar{width:8px;}
	.mefi-toc-wrap > .mefi-toc::-webkit-scrollbar-thumb{background:#dadae5;border-radius:8px;}

	/* În rail-ul îngust: titluri pe UN SINGUR rând cu „…"; textul complet apare
	   în tooltip (atributul title= pus din PHP). */
	.mefi-toc-wrap > .mefi-toc .mefi-toc__link{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
}

/* <1400px: card inline în fluxul conținutului (JS îl mută sub intro) */
@media(max-width:1399px){
	.mefi-toc{margin:0 0 24px;}
}

@media (prefers-reduced-motion: reduce){
	.mefi-toc__link,.mefi-toc__toggle,.mefi-toc__chev{transition:none;}
	html{scroll-behavior:auto;}
}