/*
.footer {
	.footer-navs-wrapper {
		.footer-nav-wrapper [xyz]-nav-wrapper {}
			h2.heading { span {} }
			.footer-nav [xyz]-nav {
				li {
					a {}
				}
			}
		.footer-nav-wrapper.social-media-nav-wrapper {
			h2 { span {} }
			.footer-nav.social-media-nav {
				.footer-nav-li.footer-nav-li-facebook {
					a {[ social media icons are bg on the <a>]}
				}
			}
		}
	}
}
*/

/*
	================================================================================================
	APP (SHARED) .footer{} RULES ARE IN B2B/wwwroot/components/footer/css/footer.css;
	DO NOT ADD .footer{} rules here, only .footer-nav{}
	================================================================================================
*/

.footer-navs-wrapper {
	display: flex;
	width: 100%;
	flex-flow: column nowrap;
	justify-content: flex-start;
}

/* div.footer-nav-wrapper: parent of .heading + ul.footer-nav */
.footer-nav-wrapper {
	display: flex;
	flex-flow: column nowrap;
	margin-bottom: 3rem; /* INIT, i.e., pre-MQ/landscape */
}

 /* TODO: update all .footer-nav h2 => to .footer-nav .heading { span {} } */
 .footer-nav-wrapper h2,
 .footer-nav-wrapper .heading {
	 margin-bottom: .6rem;
	 color: var(--footer-color);
	 font-size: .99rem;
	 text-transform: uppercase;
 }
 
/*
.footer-nav-wrapper h2 span,
.footer-nav-wrapper .heading span {}
*/
/* .footer-nav-wrapper h2 span { border-bottom: 1px solid var(--theme-color-2); } */


/* ============  ============ */
/* ul.footer-nav */
.footer-nav {
	width: 100%;
	display: flex;
	flex-flow: column nowrap; 
	justify-content: space-between;
	font-size: .9rem;
}

.footer-nav li {
	width: 100%;
	margin-bottom: .3rem;
	text-transform: capitalize;
	white-space: nowrap;
}

/* .footer a {} in B2B footer.css handles all by default; if necessary, add .footer-nav a {} per tenant */

/* 2024.05.17 TODO: confirm this is NIS */
.footer-nav .fancy:before,
.footer-nav .fancy:after { background: #fff; }


/* ============ SOCIAL MEDIA LINKS (ICONS) ARE A SPECIAL CASE ============ */
/* ul.social-media-nav */
.social-media-nav {
	flex-flow: row nowrap;
	justify-content: flex-start;
	gap: 0 .9rem;
}

.social-media-nav li {
	text-indent: -999rem;
	flex: 0 1 30px;
}

.social-media-nav li a {
	display: block;
	width: 30px;
	aspect-ratio: 1/1;
	border: 0;
}
.social-media-nav li a:hover { border: 0; }

/*
.footer-nav-li-facebook {}
.footer-nav-li-instagram {}
*/

/* ============ DEFAULT: ROUNDED-SQUARE ICONS ============ */
.footer-nav-li-facebook > a {
	background: transparent url("https://jiecosystem.s3.us-east-1.amazonaws.com/b2bcommonimages/social_media_icons/icon-facebook.webp") 0 0 / contain no-repeat;
}
.footer-nav-li-instagram a {
	background: transparent url("https://jiecosystem.s3.us-east-1.amazonaws.com/b2bcommonimages/social_media_icons/icon-instagram.webp") 0 0 / contain no-repeat;
}
.footer-nav-li-linkedin a {
	background: transparent url("https://jiecosystem.s3.us-east-1.amazonaws.com/b2bcommonimages/social_media_icons/icon-linkedin.webp") 0 0 / contain no-repeat;
}
.footer-nav-li-youtube a {
	background: transparent url("https://jiecosystem.s3.us-east-1.amazonaws.com/b2bcommonimages/social_media_icons/icon-youtube.webp") 0 0 / contain no-repeat;
}
.footer-nav-li-pinterest a {
	background: transparent url("https://jiecosystem.s3.us-east-1.amazonaws.com/b2bcommonimages/social_media_icons/icon-pinterest.webp") 0 0 / contain no-repeat;
}
/* ============ ALT: ROUND ICONS ============ */
.footer-nav-li-facebook.footer-nav-li-facebook-round > a {
	background: transparent url("https://jiecosystem.s3.us-east-1.amazonaws.com/b2bcommonimages/social_media_icons/icon-facebook-round.webp") 0 0 / contain no-repeat;
}
.footer-nav-li-instagram.footer-nav-li-instagram-round a {
	background: transparent url("https://jiecosystem.s3.us-east-1.amazonaws.com/b2bcommonimages/social_media_icons/icon-instagram-round.webp") 0 0 / contain no-repeat;
}
.footer-nav-li-linkedin.footer-nav-li-linkedin-round a {
	background: transparent url("https://jiecosystem.s3.us-east-1.amazonaws.com/b2bcommonimages/social_media_icons/icon-linkedin-round.webp") 0 0 / contain no-repeat;
}
.footer-nav-li-youtube.footer-nav-li-youtube-round a {
	background: transparent url("https://jiecosystem.s3.us-east-1.amazonaws.com/b2bcommonimages/social_media_icons/icon-youtube-round.webp") 0 0 / contain no-repeat;
}
.footer-nav-li-pinterest.footer-nav-li-pinterest-round a {
	background: transparent url("https://jiecosystem.s3.us-east-1.amazonaws.com/b2bcommonimages/social_media_icons/icon-pinterest-round.webp") 0 0 / contain no-repeat;
}

.footer .copyright {
	width: 100%;
	margin-top: 1.5rem;
	font-size: .78rem;
	text-align: right;
}

/*
	MEDIA QUERIES APPLYING TO FOOTER ELEMENTS/LAYOUT BELONG IN [tenant]_footer.css:
	
	B2B footer.css is imported via app.css,
	ERGO it loads before both [tenant]_footer.css and [tenant]-overrides.css (if one exists),
	ERGO [tenant]_footer.css *overrides* B2B footer.css; i.e., the cascade is not problematic;

	HOWEVER, what *IS* problematic is where a tenant's footer MQ breakpoint value is greater than
	what the B2B footer breakpoint value might be (if we maintained one B2B footer.css), in which case
	rules within the MQ in B2B footer.css 	would trigger at too small a viewport width,
	until the viewport is wide enought to trigger the [tenant]_footer.css footer breakpoint value.

	ERGO, since we cannot use a css variable for a breakpoint value,
	we must move all tenants' footer media query rules to their own [tenant]_footer.css
*/


/*
	btw all .lang-selector-wrapper rules could likely move from [tenant]_footer.css into B2B footer.css
*/