/*
 * SVG icon system — replaces the FontAwesome <i> tags that lived in the theme
 * templates. Namespaced as `.svg-icon` to avoid colliding with the theme's
 * pre-existing `.icon` class (used on <img> feature icons site-wide).
 *
 * Masks are inlined as data-URIs so they can never 404, and use
 * `background-color: currentColor` so the existing `.blue` modifier still
 * recolors them.
 */

.svg-icon {
	display: inline-flex;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	vertical-align: -0.125em;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	        mask-size: contain;
}

.svg-icon-angle-right {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}

.svg-icon-arrow-up-right {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E");
}

/* Replaces FontAwesome's `fa-fade` pulsing-opacity animation. */
.svg-icon-fade {
	-webkit-animation: svg-icon-fade 1s infinite cubic-bezier(0.4, 0, 0.6, 1);
	        animation: svg-icon-fade 1s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

@-webkit-keyframes svg-icon-fade {
	50% { opacity: 0.4; }
}

@keyframes svg-icon-fade {
	50% { opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
	.svg-icon-fade {
		-webkit-animation: none;
		        animation: none;
	}
}

/* Center the arrow inside the button's circular badge (the legacy rule set
   justify-content but not align-items, so the icon rode high/left). */
.btn-theme span {
	align-items: center;
}

.btn-theme span .svg-icon {
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
}

/* Brand icons injected into the nav menu (icon-only LinkedIn/Instagram links).
   `flex: 0 0 auto` + `min-width: 0` keep them at 1.1em inside the flex nav. */
.nav-social-icon {
	display: inline-block;
	flex: 0 0 auto;
	width: 1.1em;
	height: 1.1em;
	min-width: 0;
	fill: currentColor;
	vertical-align: middle;
}

/* Visually hidden accessible label for the icon-only social links. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}