/**
 * Table of Content Block Styles
 * Styles for the Table of Content custom block
 *
 * @package made-to-thrive-2026-base
 * @since 1.0.0
 */

/* Main Container */
.table-of-content-block {
	width: 100%;
	margin: 0 auto;
	position: relative;
	padding: 2rem 0 3.2rem;
}

.table-of-content-container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
	border-radius: 25px;
	background: var(--Yolk, #FFC856);
	padding: 25px 79px 5px 25px;
}

/* Title */
.table-of-content-title {
	color: #5C3A1F!important; /* Dark brown - will be overridden by WP core color settings */
	margin: 0 0 14px;
	text-transform: none;
	font-family: "Perfectly Nineties";
	font-size: 26px;
	font-style: normal;
	font-weight: 300;
	line-height: 120%; /* 31.2px */
	letter-spacing: 0px!important;
}

/* List Container */
.table-of-content-list {
	list-style: none;
	margin: 0;
	padding: 0 0 0;
}

/* List Items */
.table-of-content-item {
	margin: 0 0 5px;
	padding: 0;
	position: relative!important;
	padding-left: 0!important;
}

.table-of-content-item:last-child {
	margin-bottom: 0;
}

/* Bullet Points */
.table-of-content-item::before {
	content: '';
	position: absolute;
	left: 7px;
	top: 0.6em;
	width: 5px;
	height: 5px;
	background-color: #5C3A1F; /* Dark brown - will be overridden by WP core color settings */
	border-radius: 50%;
	display: block;
}

/* Links */
.table-of-content-link {
	color: #5C3A1F; /* Dark brown - will be overridden by WP core color settings */
	text-decoration: none;
	display: inline-block;
	transition: opacity 0.2s ease, color 0.2s ease;
	font-family: "Google Sans Flex";
	font-size: 15px;
	font-style: normal;
	font-weight: 800;
	line-height: 140%; /* 21px */
	letter-spacing: 0.15rem;
	text-transform: uppercase;
}

.table-of-content-link:hover,
.table-of-content-link:focus {
	opacity: 0.8;
	text-decoration: underline;
	outline: none;
}

.table-of-content-link:focus-visible {
	outline: 3px solid var(--wp--preset--color--cornflower, #5B66C6);
	outline-offset: 3px;
	border-radius: 3px;
}

/* Heading Level Indentation (for nested structure visual hierarchy) */
.table-of-content-item--h3 {
	margin-left: 30px;
}

.table-of-content-item--h4 {
	margin-left: 50px;
}


@media (max-width: 500px) {
	.table-of-content-block {
		padding:20px 0;
	}
	.table-of-content-link {
		font-size:13px;
	}
		.table-of-content-container {
				padding: 25px 37px 5px 20px;s
		}
}

/* Accessibility: Focus States */
.table-of-content-link:focus-visible {
	outline: 3px solid var(--wp--preset--color--cornflower, #5B66C6);
	outline-offset: 3px;
	border-radius: 3px;
	background-color: rgba(91, 102, 198, 0.1);
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
	.table-of-content-container {
		border: 2px solid currentColor;
	}
	
	.table-of-content-item::before {
		border: 1px solid currentColor;
	}
	
	.table-of-content-link {
		text-decoration: underline;
	}
	
	.table-of-content-link:hover,
	.table-of-content-link:focus {
		text-decoration-thickness: 2px;
	}
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
	.table-of-content-link {
		transition: none;
	}
}

/* Focus state for target headings when scrolled to */
h2.toc-target-focused,
h3.toc-target-focused,
h4.toc-target-focused,
h5.toc-target-focused,
h6.toc-target-focused {
	outline: 3px solid var(--wp--preset--color--cornflower, #5B66C6);
	outline-offset: 3px;
	border-radius: 3px;
	transition: outline 0.2s ease;
}

/* Editor Styles - Ensure proper sizing in block editor */
.block-editor-block-preview__container .table-of-content-container,
.editor-styles-wrapper .table-of-content-container,
.wp-block .table-of-content-container,
.block-editor-block-list__block .table-of-content-container,
.acf-block-preview .table-of-content-container {
	max-width: 1200px !important;
	width: 100% !important;
	margin: 0 auto !important;
	padding: 1.5rem 2rem !important;
	box-sizing: border-box !important;
	border-radius: 15px !important;
}

.block-editor-block-preview__container .table-of-content-list,
.editor-styles-wrapper .table-of-content-list,
.wp-block .table-of-content-list,
.block-editor-block-list__block .table-of-content-list,
.acf-block-preview .table-of-content-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.block-editor-block-preview__container .table-of-content-item,
.editor-styles-wrapper .table-of-content-item,
.wp-block .table-of-content-item,
.block-editor-block-list__block .table-of-content-item,
.acf-block-preview .table-of-content-item {
	margin: 0 0 0.75rem 0 !important;
	padding-left: 1.5rem !important;
	position: relative !important;
}

/* Ensure block wrapper doesn't overflow in editor */
.block-editor-block-preview__container .table-of-content-block,
.editor-styles-wrapper .table-of-content-block,
.wp-block[data-type="cwp/table-of-content"],
.acf-block-preview .table-of-content-block {
	max-width: 100% !important;
	width: 100% !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
}