:root {
	/* Default Fallbacks - overridden by inline PHP styles */
	--ftoc-bg: #f9f9f9;
	--ftoc-border: #e2e2e2;
	--ftoc-radius: 4px;
	--ftoc-width: fit-content;
	--ftoc-shadow: none;

	--ftoc-header-bg: transparent;
	--ftoc-header-text: #333;
	--ftoc-header-hover: transparent;
	--ftoc-icon: #333;

	--ftoc-link: #0073aa;
	--ftoc-link-hover: #005177;
	--ftoc-link-active: #000;
}

/* Container */
.fluent-toc-container {
	background: var(--ftoc-bg);
	border: 1px solid var(--ftoc-border);
	border-radius: var(--ftoc-radius);
	width: var(--ftoc-width);
	box-shadow: var(--ftoc-shadow);
	
	min-width: 250px;
	max-width: 100%;
	box-sizing: border-box;
	font-size: 1rem;
	line-height: 1.5;
	color: #333;
	margin-bottom: 20px;
	
	/* Ensure header background respects border radius */
	overflow: hidden; 
}

/* Header (Clickable Area) */
.fluent-toc-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--ftoc-header-bg);
	color: var(--ftoc-header-text);
	padding: 12px 15px;
	cursor: pointer;
	transition: background 0.2s ease;
	user-select: none; /* Prevent text selection on double click */
}

/* Hover effect on the whole header */
.fluent-toc-header:hover {
	background: var(--ftoc-header-hover);
}

/* Separator line (only visible when open) */
.fluent-toc-container:not(.is-collapsed) .fluent-toc-header {
	border-bottom: 1px solid var(--ftoc-border);
}

/* Title Styling */
.fluent-toc-title {
	font-weight: 600;
	font-size: 1.1em;
	margin: 0;
	color: inherit;
}

/* Toggle Button Container */
.fluent-toc-toggle {
	background: none;
	border: none;
	padding: 0;
	margin-left: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: inherit;
	cursor: pointer;
}

/* RTL Support for Toggle Margin */
[dir="rtl"] .fluent-toc-toggle {
	margin-left: 0;
	margin-right: 10px;
}

/* Icon (Chevron) */
.fluent-toc-icon {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--ftoc-icon);
	border-bottom: 2px solid var(--ftoc-icon);
	transform: rotate(45deg); /* Pointing Down (Open) */
	transition: transform 0.3s ease;
	margin-bottom: 3px;
}

/* Collapsed State Logic */
.fluent-toc-container.is-collapsed .fluent-toc-icon {
	transform: rotate(-135deg); /* Pointing Up/Closed */
	margin-bottom: -2px;
}

.fluent-toc-container.is-collapsed .fluent-toc-body {
	display: none;
}

.fluent-toc-container.is-collapsed .fluent-toc-header {
	border-bottom: none;
}

/* Body & List */
.fluent-toc-body {
	padding: 15px;
}

.fluent-toc-list,
.fluent-toc-sublist {
	margin: 0;
	padding: 0;
}

/* List Styles */
.fluent-toc-list.style-none,
.fluent-toc-list.style-none .fluent-toc-sublist {
	list-style: none;
}

.fluent-toc-list.style-disc {
	list-style: disc;
	padding-inline-start: 1.2em;
}

.fluent-toc-list.style-decimal {
	list-style: decimal;
	padding-inline-start: 1.2em;
}

/* Nested Indentation */
.fluent-toc-sublist {
	margin-top: 5px;
	padding-inline-start: 1.5em;
}

/* Items & Links */
.fluent-toc-item {
	margin-bottom: 5px;
}

.fluent-toc-link {
	text-decoration: none;
	color: var(--ftoc-link);
	box-shadow: none;
	transition: color 0.2s;
	display: inline-block;
}

.fluent-toc-link:hover {
	color: var(--ftoc-link-hover);
	text-decoration: underline;
}

.fluent-toc-link.is-active {
	font-weight: 700;
	color: var(--ftoc-link-active);
}

/* Native Smooth Scroll Fallback */
html {
	scroll-behavior: smooth;
}

/* Print Styles - Clean up for printing */
@media print {
	.fluent-toc-toggle {
		display: none;
	}
	.fluent-toc-container {
		border: none;
		background: none;
		box-shadow: none;
		width: 100%;
		margin-bottom: 10px;
	}
	.fluent-toc-header {
		padding: 0;
		border: none;
		background: none;
		margin-bottom: 10px;
	}
	.fluent-toc-body {
		padding: 0;
	}
	.fluent-toc-link {
		color: #000;
		text-decoration: none;
	}
}