/* Custom social icons behavior for Spectral */
/* Remarks: keep comments in English */

#header .header-icons {
	display: none;
}

/* Desktop (>= 737px) */
@media screen and (min-width: 737px) {

	/* Show icons only when the header is visible (not .alt) */
	#header:not(.alt) .header-icons {
		display: flex;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		gap: 1em;
		margin: 0;
		padding: 0;
		list-style: none;
		align-items: center;
	}

	/* Hide mobile menu icon row on desktop */
	#menu .menu-icons {
		display: none;
	}
}

/* Mobile (<= 736px) */
@media screen and (max-width: 736px) {

	/* Never show header icons on mobile */
	#header .header-icons {
		display: none !important;
	}

	/* Reserve space so the icon row doesn't overlap menu links */
	#menu {
		padding-bottom: 6em;
	}

	/* Bottom icon row inside the hamburger menu */
	#menu .menu-icons {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 1.75em;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 1.2em;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	/* Remove the horizontal separators inherited from #menu ul > li */
	#menu .menu-icons > li {
		border-top: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	#menu .menu-icons a {
		border: 0;
	}

	/* Make icons larger for touch */
	#menu .menu-icons .icon:before {
		font-size: 1.35em;
	}
}