/**
 * Smart TOC - Base Foundation Styles
 * 
 * Core styles and CSS variables used by all templates
 * This file provides the foundation that templates build upon
 */

/* CSS Custom Properties - Define once in :root */
:root {
	/* Theme colors */
	--toc-main-theme-color: #1e293b;
	--toc-background-color: #ffffff;
	--toc-header-background-color: #1e293b;
	--toc-border-color: #cbd5e1;
	--toc-header-text-color: #ffffff;
	--toc-link-text-color: #475569;
	--toc-hover-background-color: #1e293b;
	--toc-hover-text-color: #ffffff;
	--toc-active-background-color: #f0f9ff;
	--toc-active-text-color: #0369a1;
	--toc-accent-color: #3b82f6;
	
	/* Layout properties */
	--toc-border-radius: 12px;
	--toc-font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--toc-max-height: none; /* No limit by default - can be overridden */
	--toc-transition-speed: 0.2s;
	--toc-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

[id^='smart-toc-wrapper'][id^='smart-toc-wrapper'][id^='smart-toc-wrapper'] {

	/* Base reset and container */
	&.smart-toc-wrapper {
		all: unset;
		display: block;
		box-sizing: border-box;
		font-family: var(--toc-font-family);
		line-height: 1.5;
		color: initial;
		margin: 25px 0;
		max-width: 100%;
		position: relative;
	}

	/* Reset all children */
	&.smart-toc-wrapper *,
	&.smart-toc-wrapper *::before,
	&.smart-toc-wrapper *::after {
		all: unset;
		box-sizing: border-box;
		font-family: inherit;
		line-height: inherit;
	}

	/* Essential display properties */
	&.smart-toc-wrapper {
		.smart-toc-container,
		.smart-toc-header,
		.smart-toc-content,
		.smart-toc-title,
		.smart-toc-list,
		.smart-toc-sublist,
		.smart-toc-item {
			display: block;
		}

		.smart-toc-link {
			display: flex;
			align-items: center;
		}

		.smart-toc-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}

	/* Base container structure */
	&.smart-toc-wrapper .smart-toc-container {
		overflow: hidden;
		position: relative;
	}

	/* Base header structure */
	&.smart-toc-wrapper .smart-toc-header {
		padding: 15px 20px;
		position: relative;
	}

	&.smart-toc-wrapper .smart-toc-title {
		margin: 0;
		flex: 1;
	}

	/* Content area with animation support */
	&.smart-toc-wrapper .smart-toc-content {
		transition: max-height var(--toc-transition-speed) var(--toc-transition-easing),
		            opacity var(--toc-transition-speed) ease,
		            padding var(--toc-transition-speed) ease;
		overflow: hidden;
		padding: 15px 0;
		background: var(--toc-background-color);
	}

	/* Default expanded state */
	&.smart-toc-wrapper .smart-toc-container:not(.smart-toc-collapsed) .smart-toc-content,
	&.smart-toc-wrapper .smart-toc-expanded .smart-toc-content {
		max-height: var(--toc-max-height);
		padding: 15px 0;
		opacity: 1;
		overflow: auto; /* Enable scrolling when expanded */
	}

	/* Collapsed state */
	&.smart-toc-wrapper .smart-toc-collapsed .smart-toc-content {
		max-height: 0;
		padding: 0 0;
		opacity: 0;
		overflow: hidden;
		pointer-events: none;
	}

	/* Toggle button base */
	&.smart-toc-wrapper .smart-toc-toggle {
		all: unset;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 24px;
		height: 24px;
		padding: 4px 8px;
		border-radius: 4px;
		transition: background var(--toc-transition-speed) ease,
		            border-color var(--toc-transition-speed) ease,
		            transform var(--toc-transition-speed) ease;
	}

	&.smart-toc-wrapper .smart-toc-toggle-icon {
		transition: transform var(--toc-transition-speed) ease;
		font-size: 10px;
		line-height: 1;
	}

	/* List base styles */
	&.smart-toc-wrapper .smart-toc-list,
	&.smart-toc-wrapper .smart-toc-sublist {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	&.smart-toc-wrapper .smart-toc-list {
		padding: 0 20px;
	}

	&.smart-toc-wrapper .smart-toc-item {
		margin: 0;
		line-height: 1.4;
		position: relative;
	}

	/* Link base styles */
	&.smart-toc-wrapper .smart-toc-link {
		padding: 8px 12px;
		border-radius: 6px;
		text-decoration: none;
		position: relative;
		font-weight: bold;
		margin: 1px 0;
		cursor: pointer;
		color: var(--toc-link-text-color);
		transition: background-color var(--toc-transition-speed) ease,
		            color var(--toc-transition-speed) ease,
		            transform var(--toc-transition-speed) ease
	}

	/* Sublist indentation */
	&.smart-toc-wrapper .smart-toc-sublist .smart-toc-sublist {
		padding-left: 25px;
	}

	&.smart-toc-wrapper .smart-toc-sublist .smart-toc-sublist .smart-toc-sublist {
		padding-left: 20px;
	}

	/* Focus management */
	&.smart-toc-wrapper .smart-toc-link:focus,
	&.smart-toc-wrapper .smart-toc-toggle:focus {
		outline: 2px solid var(--toc-accent-color);
		outline-offset: 2px;
	}

	/* Focus visible support */
	@supports selector(:focus-visible) {
		&.smart-toc-wrapper .smart-toc-link:focus:not(:focus-visible),
		&.smart-toc-wrapper .smart-toc-toggle:focus:not(:focus-visible) {
			outline: none;
		}

		&.smart-toc-wrapper .smart-toc-link:focus-visible,
		&.smart-toc-wrapper .smart-toc-toggle:focus-visible {
			outline: 2px solid var(--toc-accent-color);
			outline-offset: 2px;
		}
	}

	/* Anchor spans */
	.smart-toc-anchor {
		display: block;
		position: relative;
		top: 0;
		visibility: hidden;
	}

	/* Utility classes */
	.smart-toc-sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	/* Loading state */
	.smart-toc-loading {
		opacity: 0.6;
		pointer-events: none;
		position: relative;
	}

	.smart-toc-loading::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 20px;
		height: 20px;
		margin: -10px 0 0 -10px;
		border: 2px solid var(--toc-border-color);
		border-top-color: var(--toc-accent-color);
		border-radius: 50%;
		animation: toc-spin 1s linear infinite;
	}

	@keyframes toc-spin {
		to { transform: rotate(360deg); }
	}

	/* Responsive base adjustments */
	@media (max-width: 768px) {
		&.smart-toc-wrapper {
			margin: 20px 0;
		}

		&.smart-toc-wrapper .smart-toc-header {
			padding: 12px 16px;
		}

		&.smart-toc-wrapper .smart-toc-content {
			padding: 12px 0;
		}

		&.smart-toc-wrapper .smart-toc-expanded .smart-toc-content {
			padding: 12px 0;
		}

		&.smart-toc-wrapper .smart-toc-list {
			padding: 0 16px;
		}

		&.smart-toc-wrapper .smart-toc-link {
			padding: 6px 10px;
			font-size: 0.9em;
		}

		&.smart-toc-wrapper .smart-toc-sublist .smart-toc-sublist {
			padding-left: 20px;
		}

		&.smart-toc-wrapper .smart-toc-sublist .smart-toc-sublist .smart-toc-sublist {
			padding-left: 15px;
		}
	}

	/* Accessibility: Reduced motion */
	@media (prefers-reduced-motion: reduce) {
		&.smart-toc-wrapper *,
		&.smart-toc-wrapper *::before,
		&.smart-toc-wrapper *::after {
			transition: none !important;
			animation: none !important;
		}

		&.smart-toc-wrapper .smart-toc-link:hover {
			transform: none !important;
		}
	}

	/* Print styles */
	@media print {
		&.smart-toc-wrapper .smart-toc-content {
			max-height: none !important;
			overflow: visible !important;
		}

		&.smart-toc-wrapper .smart-toc-collapsed .smart-toc-content {
			max-height: none !important;
			padding: 15px 0 !important;
			opacity: 1 !important;
			pointer-events: auto !important;
		}

		&.smart-toc-wrapper .smart-toc-toggle {
			display: none !important;
		}
	}

	/* High contrast mode */
	@media (prefers-contrast: high) {
		&.smart-toc-wrapper {
			border: 2px solid;
		}

		&.smart-toc-wrapper .smart-toc-link {
			border: 1px solid transparent;
		}

		&.smart-toc-wrapper .smart-toc-link:hover,
		&.smart-toc-wrapper .smart-toc-link:focus {
			border-color: currentColor;
		}

		&.smart-toc-wrapper .smart-toc-toggle {
			border: 2px solid;
		}
	}
}