/* === STICKY FOOTER MENU === */
@media only screen and (min-width: 1025px) {
	.sticky-footer-menu {
		display: none !important;
	}	
}
.sticky-footer-menu {
	position: fixed;
	width: 100%;
	bottom: 0;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	z-index: 2000;
	/*column-gap: 5%;*/
	padding-left: 12px;
  	padding-right: 12px;
	  background-color: var(--bg-color,var(--neutral-0)) !important;
	  background-image: linear-gradient(to right,var(--01dp) 0%,var(--01dp) 100%) !important;
	box-shadow: rgba(0, 0, 0, 0.75) 0px 5px 15px;
	border-top: 1px solid var(--navigation-border-top-color);
}
.sticky-footer-menu--item {
	min-height: 58px;
	margin-bottom: 20px; /* to reserve space for the bottom home bar on mobile devices, recommended 34px */
  	padding-top: 5px;
}
.site-footer {
	position: relative;
	z-index: 2500; /* needs to be a heigher value than .sticky-footer-menu, so the menu goes behind the footer */
}


/* Highlight the menu item (link & icon) when you are already on the page it is linking to */
/* Target the container if it contains the current page link */
body.home .stretch-link.sticky-footer-menu--item:has(p > a[href="/"]),  /* Home */
body.postid-52205 .stretch-link.sticky-footer-menu--item:has(p > a[href="/vulkanen/"]),  /* Vulkanen */
body.postid-53142 .stretch-link.sticky-footer-menu--item:has(p > a[href="/geologie/"]),  /* Geologie */
body.postid-50553 .stretch-link.sticky-footer-menu--item:has(p > a[href="/begrippenlijst/"]) {   /* Begrippenlijst */
    color: var(--text-color,var(--neutral-50)); /* affects text and SVG with currentColor */
}
/* Target the link itself */
body.home .stretch-link.sticky-footer-menu--item:has(p > a[href="/"]) a,
body.postid-52205 .stretch-link.sticky-footer-menu--item:has(p > a[href="/vulkanen/"]) a,
body.postid-53142 .stretch-link.sticky-footer-menu--item:has(p > a[href="/geologie/"]) a,
body.postid-50553 .stretch-link.sticky-footer-menu--item:has(p > a[href="/begrippenlijst/"]) a {
    color: var(--text-color,var(--neutral-50));
}
/* Target the SVG icon inside the container */
body.home .stretch-link.sticky-footer-menu--item:has(p > a[href="/"]) .sticky-footer-menu--icon svg,
body.postid-52205 .stretch-link.sticky-footer-menu--item:has(p > a[href="/vulkanen/"]) .sticky-footer-menu--icon svg,
body.postid-53142 .stretch-link.sticky-footer-menu--item:has(p > a[href="/geologie/"]) .sticky-footer-menu--icon svg,
body.postid-50553 .stretch-link.sticky-footer-menu--item:has(p > a[href="/begrippenlijst/"]) .sticky-footer-menu--icon svg {
    color: var(--text-color,var(--neutral-50)); /* works because path uses fill="currentColor" */
}