/* Additional styling for table of contents feature on select LSU E. J. Ourso College of Business pages */
/* Built by Cullen Sadler and Mark Plaisance, last updated November 2025 */
	
/* TOC Toggle Button */
#toggle-toc-btn {
	/* Positioning */
	position: fixed; /* Keeps it in place during scroll */
	top: 113px; /* Offset to avoid crashing into LSU nav elements */
	right: 40px; /* Offset to bring in from margins */
	z-index: 1029; /* LSU main nav is set to a z of 1030, so we go right below that */
	cursor: pointer;
	/* Styling */
	background: white;
	border: 2px solid #502e81;
	border-width: 2px;
	border-radius: 2px;
	width: 60px;
	height: 60px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Animation Behavior */
	opacity: 0; /* Make it invisible by default */
	visibility: hidden; /* Hide it from screen readers and clicks */
	transform: scale(0.8); /* Subtle pop-in effect */
	transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, top 0.3s ease-in-out; /* Animate the change */
}

#toggle-toc-btn:focus {
	outline-color: #feca35;
	}
	
/* Book Icon */
#toggle-toc-btn img {
    width: 40px;  /* Set the icon's width */
    height: 40px; /* Set the icon's height */
}
	
#toggle-toc-btn .icon-open {
    display: none;
}
	
#toggle-toc-btn .icon-closed {
    display: block;
}

#toggle-toc-btn.toc-btn-active .icon-open {
    display: block;
}
#toggle-toc-btn.toc-btn-active .icon-closed {
    display: none;
}

/* TOC Panel */
#slide-out-toc {
	position: fixed; /* Keeps it in place */
	top: 112px; /* Offset to avoid LSU nav elements */
	right: 40px;
	width: 300px;
	height: auto; /* Using auto for now */
	background: #f9f9f9;
	box-shadow: -2px 0 5px rgba(0,0,0,0.2); /* Slight shadow effect */
	z-index: 1028; /* Set to 1 less than the button */
	box-sizing: border-box; /* Ensures padding is included in the element's total height */
	padding: 20px 60px 20px 20px; /* Top, Right, Bottom, Left */
	opacity: 0; /* Make it invisible by default */
	visibility: hidden; /* Hide it from screen readers and clicks */
	transition: opacity 0.3s ease-in-out; /* Animate the change */
}
	
/* Visibility Classes */	
#toggle-toc-btn.btn-visible {
	opacity: 1;
	visibility: visible;
}

#slide-out-toc.toc-visible {
	opacity: 1;
	visibility: visible;
}

/* Panel Content Styles */
#slide-out-toc h3 {
	margin-top: 10px;
}

#slide-out-toc ul {
	font-family: "proxima-nova", sans-serif;
	list-style: none;
	padding: 0;
}

#slide-out-toc ul li a {
	display: block;
	font-weight: 400;
	padding: 5px 0;
	text-decoration: none;
	color: #000000;
	transition: color .3s ease-in-out, padding .3s ease-in-out, box-shadow .3s ease-in-out; 
}

#slide-out-toc ul li a:hover {
	color: #feca35;
	font-weight: 600;
}
	
#slide-out-toc ul li a.toc-link-active {
	color: #502e81;
	box-shadow: inset 3px 0 0 0 #5f3b97;
	font-weight: 600;
	padding: 10px
}
	
	
/* Media query for resizing Table of Contents panel and button for mobile */
@media (max-width: 600px) {
    /* TOC Panel */
    #slide-out-toc {
        width: 100%;
        right: 0;
        left: 0;
        top: 90px;
        height: auto;
		box-shadow: -2px 0 5px rgba(0, 0, 0, .75);
    }

    /* Toggle Button */
    #toggle-toc-btn {
        top: 103px;
        bottom: 20px;
        right: 20px;
        width: 60px;
        height: 60px;
		z-index: 1030;
    }
	
	#slide-out-toc ul li a {
	padding: 2px 0;
}
	
}

/* Secondary query which hides subsection items when screen size is insufficient */
@media (max-width: 800px) {
	
	#slide-out-toc li.subsection {
	display: none;
}
	
}