/**
 * FS2 footer port — styles for footer-fs2.php.
 *
 * Ported from free-style-2 css/4yl-footer.css. Changes:
 *  - #footer-menu id selectors converted to the .footer-menu class
 *    (the nav renders once per column).
 *  - Dead commented blocks dropped.
 * Loads with header-fs2.css under the same fs2-header condition, which
 * provides the shared Barlow Condensed @font-face.
 */

.site-footer,
#colophon {
	background-color: #333645;
	color: #fff;
}
.site-footer,
.footer-wrapper {
	display: flex;
	flex-flow: column wrap;
	width: 98%;
	align-self: center;
	padding-bottom: 12px;
}
.footer-col-wrapper {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
	margin: 8px 0px 16px 0px;
	gap: 8px;
}
.footer-wrapper a {
	color: white;
	text-decoration: none;
}
.footer-wrapper ul li a:hover {
	color: #00ADEE;
}
.footer-article .footer-blog-posts a.footer-blog-linking:hover .footer-blog-post .footer-blog-readmore {
	color: #00ADEE;
}
.footer-links-mobile-row {
	display: none;
}
.footer-menu ul {
	list-style-type: none;
	font-size: 18px;
	display: flex;
	flex-flow: column nowrap;
	margin: 0px;
	padding: 0px 0px 8px 16px;
	max-width: 350px;
}
.footer-menu ul li {
	display: flex;
	font-size: 18px;
	padding: 2px 0px;
	flex-grow: 1;
	width: 100%;
	align-items: center;
	font-weight: 400;
	letter-spacing: 1.1px;
}
.footer-menu ul li a {
	color: #ffffff;
	text-decoration: none;
	width: 100%;
	height: 100%;
	align-self: center;
	align-content: center;
}

/* ___________FOOTER MENU ITEMS________________________ */
.footer-links-wrapper {
	width: 60%;
	display: flex;
	flex-direction: row;
}
.footer-links-row {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
}
.footer-links-col {
	width: 20%;
	flex-grow: 1;
	padding-left: 8px;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	max-width: 350px;
}
.footer-header {
	margin: 10px 0px 5px 0px;
	font-size: 20px;
	font-family: "Barlow Condensed", sans-serif;
	line-height: 30px;
	font-weight: 700;
	max-width: 350px;
}
.footer-nav {
	display: flex;
	flex-flow: column nowrap;
	height: 100%;
	max-width: 350px;
}
.footer-menu {
	display: flex;
	flex-flow: column nowrap;
	height: 100%;
	max-width: 350px;
}
.footer-menu > div {
	display: flex;
	flex-flow: column nowrap;
	height: 100%;
	max-width: 350px;
}
.footer-menu > div > ul {
	height: 100%;
}

/* ___________FOOTER ARTICLE________________________ */
.footer-article {
	display: flex;
	width: 20%;
	margin: 10px 0px 5px 0px;
	padding: 0px 8px;
	max-width: 350px;
}
.footer-blog-posts {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex-grow: 1;
}
.footer-blog-linking {
	color: white;
	text-decoration: none;
	display: flex;
	flex-flow: column nowrap;
	flex-grow: 1;
	max-height: 92px;
	height: 30%;
}
.footer-blog-post {
	display: flex;
	flex-direction: column;
	margin: 4px 0px;
	padding-bottom: 5px;
	border-bottom: 3px solid #fff;
	justify-content: space-between;
	flex-grow: 1;
}
.footer-blog-title {
	-webkit-box-orient: vertical;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	text-overflow: ellipsis;
	margin: 0px;
}
.footer-blog-title a,
.footer-blog-title a:visited {
	color: white;
}
.footer-blog-date {
	margin: 4px 0px;
}
.footer-blog-category {
	margin: 4px 0px;
	-webkit-box-orient: vertical;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	line-clamp: 1;
	text-overflow: ellipsis;
}
.footer-blog-linking:hover .footer-blog-readmore {
	text-decoration: underline;
}
.footer-blog-readmore {
	margin: 0px;
	color: #00adee;
}
.footer-blog-readmore a,
.footer-blog-readmore a:visited {
	color: #00adee;
}
.footer-blog-post-date-link-wrapper {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
}

/* ___________FOOTER PROMOS COL________________________ */
.footer-promos-col {
	width: 20%;
	max-width: 500px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 8px;
}
.footer-promos-col > .site-logo {
	width: 50%;
	max-width: 180px;
	height: auto;
}
.site-pmt-logo {
	width: 50%;
	max-width: 150px;
	height: auto;
}
.site-review-logo {
	width: 100%;
	max-width: 175px;
	height: auto;
}
.footer-promos-col > a {
	display: flex;
	width: 60%;
	max-width: 175px;
	justify-content: center;
}

/* ___________FOOTER LOWER INFO________________________ */
.footer-info-wrapper {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	column-gap: 16px;
	margin: 0px;
	padding: 8px 0px;
}
.footer-info-col {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	font-size: 18px;
	text-align: center;
	align-items: center;
	row-gap: 16px;
	column-gap: 8px;
}
.footer-info-col-last {
	justify-content: center;
}
.footer-info-wrapper .footer-info-col:first-child {
	flex-grow: 1;
}
.footer-info-col:nth-child(2) {
	flex-grow: 1;
	justify-content: flex-end;
}
.footer-info-wrapper .footer-info-col:first-child a {
	display: flex;
	flex-flow: column nowrap;
	flex-grow: 2;
}
.footer-info-wrapper .footer-info-col a .footer-icon-info-wrap {
	justify-content: center;
	align-items: center;
}
.footer-icon-info-wrap {
	display: flex;
	flex-direction: row;
	align-content: center;
	align-items: center;
	column-gap: 10px;
}
.footer-icon-info-wrap:hover .footer-info-icons {
	filter: invert(62%) sepia(11%) saturate(2511%) hue-rotate(81deg) brightness(95%) contrast(107%);
}
.footer-socials {
	display: flex;
	flex-direction: row;
	flex-grow: 1;
	justify-content: space-evenly;
	align-items: center;
	align-self: center;
	gap: 8px;
}
.footer-info-icons {
	width: 24px;
}
.footer-info-icons:hover {
	filter: invert(62%) sepia(11%) saturate(2511%) hue-rotate(81deg) brightness(95%) contrast(107%);
}
.footer-social-icons {
	width: 24px;
	align-self: center;
}
.footer-social-icons:hover {
	filter: invert(62%) sepia(11%) saturate(2511%) hue-rotate(81deg) brightness(95%) contrast(107%);
}
.footer-info-col .footer-info-rights {
	margin: 0px;
}

/* ---------------------------------------------------------------- */
/* MEDIA QUERIES                                                    */
/* ---------------------------------------------------------------- */
@media only screen and (max-width: 1050px) {
	.footer-promos-col {
		width: 15%;
	}
	.footer-promos-col .site-logo {
		width: 100%;
	}
	.footer-promos-col .site-pmt-logo {
		width: 100%;
	}
	.footer-promos-col > a {
		width: 100%;
	}
	.footer-links-wrapper {
		width: 70%;
	}
}
@media only screen and (max-width: 980px) {
	.footer-info-col {
		font-size: 16px;
	}
	.footer-info-wrapper {
		flex-flow: column nowrap;
	}
	.footer-col-wrapper {
		flex-flow: row wrap;
	}
	.footer-col-wrapper .footer-links-wrapper {
		flex-basis: 100%;
	}
	.footer-col-wrapper .footer-article {
		flex-basis: 50%;
	}
	.footer-col-wrapper .footer-promos-col {
		flex-basis: 50%;
	}
}
@media only screen and (max-width: 751px) {
	.footer-links-wrapper {
		display: none;
	}
	.footer-article {
		display: none;
	}
	.footer-col-wrapper {
		height: 100%;
		width: 100%;
	}
	.footer-promos-col {
		flex-flow: column wrap;
		max-height: 150px;
	}
}
@media only screen and (max-width: 520px) {
	.site-footer .footer-wrapper .footer-col-wrapper .footer-promos-col {
		flex-basis: 100%;
	}
	.site-footer .footer-wrapper .footer-info-wrapper {
		gap: 8px;
	}
}
