/* === STICKY FOOTER TABLE OF CONTENTS === */
@media only screen and (max-width: 1024px) { /* On mobile and tablet: Hide the accordion in the sticky sidebar */
	.sidebar-sticky .my-toc-accordion.accordeon-goto {
		display: none !important;
	}
}
@media (min-width: 1024.01px) { /* On mobile and tablet: Show the accordion in the sticky footer */
	.sticky-footer-table-of-contents {
		display: none !important;
	}	
}
.sticky-footer-table-of-contents {
	position: fixed;       			/* Fix the element relative to the viewport */
	bottom: 105px;            		/* Align it to the bottom of the viewport */
	left: 50%;            			/* Move the element's left edge to the center of the viewport */
	transform: translateX(-50%); 	/* Offset by half its width to center it horizontally */
	max-height: 200px;        		/* Maximum height */
	overflow-y: auto;         		/* Vertical scrollbar if content exceeds max height */
	width: 85vw;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	border-radius: var(--border-radius-m);
	z-index: 2000;
	/* Custom scrollbar styling for Webkit browsers */
	scrollbar-width: thin;  /* Firefox scrollbar width */ /* 'auto', 'thin', or 'none' */
	scrollbar-color: white transparent; /* scrollbar thumb and track colors for Firefox */
}
/* Webkit scrollbar customization */
.sticky-footer-table-of-contents::-webkit-scrollbar {
  width: 8px;             /* width of the scrollbar */
}
.sticky-footer-table-of-contents::-webkit-scrollbar-track {
  background: transparent; /* scrollbar track transparent */
  margin: 0 6px; /* top/bottom margin doesn't affect horizontal spacing */
}
.sticky-footer-table-of-contents::-webkit-scrollbar-thumb {
  background-color: white;                   /* thumb color */
  border-radius: 10px;                       /* rounded corners */
  border: 3px solid transparent;             /* transparent border adds padding around thumb */
  background-clip: padding-box;              /* clip background to padding box */
}

.site-footer {
	position: relative;
	z-index: 2500; /* needs to be a heigher value than .sticky-footer-menu, so the menu goes behind the footer */
}
.sticky-footer-table-of-contents .my-toc-accordion.accordeon-goto {
	margin-bottom: 0;
	/*background-color: var(--neutral-1000);*/
	background-color: hsl(from var(--neutral-1000) h s l / .7); /* transparant background */
	backdrop-filter: blur(8px); /*blur for a liquid glass effect */
	 border: 1px solid var(--neutral-900);
	opacity: 1;
}
.sticky-footer-table-of-contents > .my-toc-accordion > .my-toc-accordion__toggle {
	font-weight: 600;
	letter-spacing: 3%;
}
/* Arrow container in top summary toggle */
.sticky-footer-table-of-contents .my-toc-accordion.accordeon-goto > summary.my-toc-accordion__toggle,
.sticky-footer-table-of-contents .my-toc-accordion.accordeon-goto > summary.my-toc-accordion__toggle  > .my-toc-accordion__toggle-icon {
  color: var(--neutral-100);
}
.sticky-footer-table-of-contents .accordeon-goto details.my-toc-accordion__item > summary > .my-toc-accordion__toggle-icon {
  color: var(--neutral-100);
}
/* Summary toggle hover effect applies only when not hovering links */
.sticky-footer-table-of-contents .accordeon-goto .my-toc-accordion__item:not([open]) .my-toc-accordion__toggle:hover:not(:has(a.accordeon-h2:hover)) > .my-toc-accordion__toggle-icon > .my-toc-accordion__toggle-icon-open,
.sticky-footer-table-of-contents .accordeon-goto .my-toc-accordion__item[open] .my-toc-accordion__toggle:hover:not(:has(a.accordeon-h2:hover)) > .my-toc-accordion__toggle-icon > .my-toc-accordion__toggle-icon-close {
  background: hsl(from var(--neutral-50) h s l/30%);
  border: 1px solid var(--neutral-900);
}

/* === NESTED CONTENT INDENT & LINKS === */
/* Links styling */
.sticky-footer-table-of-contents .accordeon-goto .accordeon-content-container a {
  color: var(--brand-primary-l-4);
  color: var(--neutral-100);
}

/* Links hover/focus effect */
.sticky-footer-table-of-contents .accordeon-goto .my-toc-accordion__item a:hover,
.sticky-footer-table-of-contents .accordeon-goto .my-toc-accordion__item a:focus {
  /*color: hsla(from var(--brand-primary-l-4) h s l / 50%);
   background-color: hsl(from var(--neutral-50) h s l/30%);*/
	/*background-color: var(--neutral-700) !important;*/
	background-color: hsl(from var(--neutral-50) h s l/ 10%);
}

.sticky-footer-table-of-contents .accordeon-goto .my-toc-accordion__item,
.sticky-footer-table-of-contents .accordeon-goto .my-toc-accordion__item:hover, 
.sticky-footer-table-of-contents .accordeon-goto .my-toc-accordion__item:active,
.sticky-footer-table-of-contents .accordeon-goto .my-toc-accordion__item:focus {
	/*background-color: var(--neutral-1000);*/
	background-color: none;
	opacity: 1;
}
/* === ARROWS SVG STROKE THICKNESS === */
.sticky-footer-table-of-contents .accordeon-goto svg polyline {
  stroke-width: 32;
}
.sticky-footer-table-of-contents .my-toc-accordion.accordeon-goto[open] > .my-toc-accordion__content::after {
	opacity: 0.25; /* Increase the opacity to see the background image of the volcano */
}




.sticky-footer-table-of-contents > .my-toc-accordion {
  max-height: 200px;                  /* fixed max height */
  overflow-y: auto;                  /* enable vertical scrolling */
  -webkit-overflow-scrolling: touch; /* smooth scroll on iOS devices */
  scroll-behavior: smooth;            /* smooth scrolling on modern browsers */
}