/* ===================================
   Site footer: layout, links (with their underline motion), social icons, the entrance and the
   green strip at the bottom. Content comes from the Customizer (Appearance > Customize).
=================================== */
.call-action-footer {
	position: relative;
}
.site-footer {
	background-color: var(--wp--preset--color--white);
	margin: 0 auto;
}
.footer-top {
	padding: 95px 0 105px;
}

.footer-inner {
	margin: 0 auto;
}

.footer-top p {
	margin-top: 15px;
	margin-bottom: 0;
}

.footer-bottom-widget a {
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
	font-weight: 700;
}
@media (hover: hover) and (pointer: fine) {
	.footer-bottom-widget a:hover {
		color: var(--wp--preset--color--secondary);
		text-decoration: underline;
	}
}

.footer-bottom-widget .widget {
	margin: 0;
}

.footer-bottom-widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
}

.footer-bottom-widget ul li {
	list-style: none;
	margin: 0 0 0 24px;
	padding: 0;
	position: relative;
}

.footer-bottom-widget ul li::before {
	content: "|";
	position: relative;
	margin-left: -16px;
	margin-right: 7px;
}

.footer-bottom-widget ul li a {
	text-decoration: none;
}

.footer-bottom-widget ul li.current_page_item a,
.footer-bottom-widget ul li.current-menu-item a,
.footer-bottom-widget ul li.current_page_parent a {
	color: var(--wp--preset--color--primary);
}
@media (hover: hover) and (pointer: fine) {
	.footer-bottom-widget ul li a:hover {
		color: var(--wp--preset--color--primary);
	}
}

.footer-copyright .footer-bottom-widget {
	display: flex;
	align-items: center;
}

.footer-copyright p {
	margin: 0;
}

.footer-bot {
	color: var(--wp--preset--color--secondary);
	background-color: var(--wp--preset--color--white);
}

.footer-bot .footer-copyright {
	display: flex;
	justify-content: center;
	padding: 25px 0 25px 0;
	font-size: 12px;
	text-align: center;
}

.ftm_border {
	height: 10px;
}
.section_footer {
	display: flex;
	flex-wrap: nowrap;
	margin: 0 auto;
	gap: 10%;
}

.section_footer .footer_logo_col {
	width: 47%;
	font-size: 14px;
	font-style: normal;
	font-weight: 300;
	line-height: 21px;
	letter-spacing: -0.28px;
}

.section_footer .footer_logo {
	margin-bottom: 44px;
}
.section_footer .about_text {
	max-width: 460px;
	margin-left: auto;
}

.section_footer .footer_menu_contact_col {
	flex: 1;
	display: flex;
	flex-direction: column;
	font-size: 16px;
	font-weight: 300;
	padding-right: 70px;
	position: relative;
}
.section_footer .excellence_box {
	display: flex;
	align-items: center;
	gap: 28px;
	margin-bottom: 32px;
}
.section_footer .excellence_box .no_year_excellence {
	display: flex;
	width: 70px;
	height: 70px;
	aspect-ratio: 1;
	justify-content: center;
	align-items: center;
	background-color: var(--wp--preset--color--darkgreen);
	border-radius: 100%;
}
.section_footer .excellence_box .inner_year {
	letter-spacing: -2.64px;
	transform: translateY(-12%);
}
.section_footer .excellence_box .no_year_excellence .plus {
	margin-left: 3px;
}

.section_footer .excellence_box .excellence_text {
	text-transform: uppercase;
	letter-spacing: 2.8px;
	max-width: 320px;
	text-align: left;
}
.section_footer .footer_menu_contact_col .footer_col_inner {
	display: flex;
	gap: 20px;
}
.section_footer .footer_menu_contact_col .footer_col_inner.ftm_btm_box {
	margin-top: 50px;
}
.section_footer .footer_menu_contact_col .footer_col_inner .menu_col,
.section_footer .footer_menu_contact_col .footer_col_inner .privacy_col {
	width: 27%;
}
.footer_menu_col .site_address {
	margin-bottom: 26px;
	line-height: 23px;
}
.footer_menu_col .email_phone {
	display: flex;
	gap: 10px;
}

/* Links. Every footer link has a background-drawn underline that arrives from the left and leaves
   to the right (650ms in-out): at rest it's anchored right, while hovered left, and the anchor only
   switches while the line is empty or full, so it never jumps. The email keeps its underline at
   rest and redraws it on hover. */
.footer_menu_col ul.menu li a,
.privacy_col ul.menu li a,
.footer_menu_col .email a,
.footer_menu_col .phone a {
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 100% 100%;
	background-size: 0% 1px;
	transition:
		color var(--dur-short) var(--ease-out),
		background-size 650ms var(--ease-in-out);
}
.footer_menu_col ul.menu li a:focus-visible,
.privacy_col ul.menu li a:focus-visible,
.footer_menu_col .phone a:focus-visible {
	background-position: 0 100%;
	background-size: 100% 1px;
}
@media (hover: hover) and (pointer: fine) {
	.footer_menu_col ul.menu li a:hover,
	.privacy_col ul.menu li a:hover,
	.footer_menu_col .phone a:hover {
		background-position: 0 100%;
		background-size: 100% 1px;
	}
}
.footer_menu_col .email a {
	color: var(--wp--preset--color--black);
	font-weight: 600;
	background-size: 100% 1px;
}
/* assets/js/motion.js adds .is-sweeping on hover, until the redraw ends (keyboard focus: no redraw) */
.footer_menu_col .email a.is-sweeping {
	animation: ft-underline-redraw 650ms var(--ease-in-out);
}
@media (hover: hover) and (pointer: fine) {
	.footer_menu_col .email a:hover {
		color: var(--wp--preset--color--darkgreen);
	}
}
@keyframes ft-underline-redraw {
	0% {
		background-size: 100% 1px;
		background-position: 100% 100%;
	}
	45% {
		background-size: 0% 1px;
		background-position: 100% 100%;
	}
	46% {
		background-size: 0% 1px;
		background-position: 0 100%;
	}
	100% {
		background-size: 100% 1px;
		background-position: 0 100%;
	}
}
.footer_menu_col .phone a {
	color: var(--wp--preset--color--darkblue);
}
@media (hover: hover) and (pointer: fine) {
	.footer_menu_col .phone a:hover {
		color: var(--wp--preset--color--darkgreen);
	}
}

.footer_menu_col ul.menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer_menu_col ul.menu li {
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;
	position: relative;
}

.footer_menu_col ul.menu li a {
	color: var(--wp--preset--color--black);
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	line-height: 23px;
}

.footer_menu_col ul.menu li.current_page_item a,
.footer_menu_col ul.menu li.current-menu-item a,
.footer_menu_col ul.menu li.current_page_parent a {
	color: var(--wp--preset--color--darkgreen);
}
@media (hover: hover) and (pointer: fine) {
	.footer_menu_col ul.menu li a:hover {
		color: var(--wp--preset--color--darkgreen);
	}
}

.privacy_col ul.menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	position: relative;
}

.privacy_col ul.menu li a {
	color: var(--wp--preset--color--darkblue);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}
.privacy_col ul.menu li a:focus-visible {
	color: var(--wp--preset--color--darkgreen);
}
@media (hover: hover) and (pointer: fine) {
	.privacy_col ul.menu li a:hover {
		color: var(--wp--preset--color--darkgreen);
	}
}
.footer_social_col {
	display: flex;
	gap: 10px;
}
/* Social icons: on hover green ink fills the circle from the centre (500ms) and the icon lifts 2px.
   The lift uses `translate`, not `transform`: the footer entrance animates `transform` on the same
   links, and its more specific rule would cancel a hover transform. */
.footer_social_col a {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	width: 55px;
	aspect-ratio: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-decoration: none;
	align-items: center;
	background-color: var(--wp--preset--color--darkgrey);
	border-radius: 100%;
	color: var(--wp--preset--color--white);
	font-size: 27px;
	transition:
		translate var(--dur-short) var(--ease-out),
		background-color var(--dur-short) var(--ease-out);
}
.footer_social_col a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 50%;
	background: var(--wp--preset--color--darkgreen);
	clip-path: circle(0% at 50% 50%);
	transition: clip-path 500ms var(--ease-out);
}
.footer_social_col a:focus-visible {
	translate: 0 -2px;
}
.footer_social_col a:focus-visible::before {
	clip-path: circle(72% at 50% 50%);
}
@media (hover: hover) and (pointer: fine) {
	.footer_social_col a:hover {
		translate: 0 -2px;
	}
	.footer_social_col a:hover::before {
		clip-path: circle(72% at 50% 50%);
	}
}
.footer_social_col a .excentric-email-icon {
	font-size: 21px;
}
@media only screen and (min-width: 601px) {
	.footer_social_col {
		position: absolute;
		top: 0;
		right: 0;
		flex-direction: column;
	}
}
@media only screen and (max-width: 1200px) {
	.section_footer .footer_logo_col {
		width: 40%;
	}
	.section_footer {
		gap: 7%;
	}
	.section_footer .about_text {
		max-width: 100%;
		margin-left: 0;
	}
}

@media only screen and (max-width: 900px) {
	.section_footer {
		display: block;
	}
	.section_footer .footer_logo_col {
		max-width: 600px;
		width: 100%;
		margin: 0 auto 40px;
		text-align: center;
	}
	.section_footer .footer_menu_contact_col {
		max-width: 600px;
		margin: 0 auto;
	}
}

@media only screen and (max-width: 600px) {
	.section_footer .footer_logo img {
		width: 247px;
	}
	.section_footer {
		text-align: center;
	}
	.footer-top {
		padding: 40px 0;
	}
	.section_footer .footer_menu_contact_col {
		padding-right: 0;
	}
	.section_footer .footer_menu_contact_col .footer_col_inner {
		display: flex;
		gap: 30px;
		flex-direction: column;
	}
	/* the six links as an even 3 x 2 grid */
	.footer_menu_col ul.menu {
		display: grid;
		grid-template-columns: repeat(3, auto);
		justify-content: center;
		column-gap: 28px;
		row-gap: 10px;
	}
	.section_footer .excellence_box {
		max-width: 420px;
		margin: 0 auto 32px;
	}
	.section_footer .footer_menu_contact_col .footer_col_inner .menu_col,
	.section_footer .footer_menu_contact_col .footer_col_inner .privacy_col {
		width: auto;
	}
	.footer_menu_col .email_phone {
		justify-content: center;
	}
	.footer_social_col {
		justify-content: center;
		margin-top: 32px;
	}
	.section_footer .footer_menu_contact_col .footer_col_inner.ftm_btm_box {
		margin-top: 32px;
		flex-direction: row;
		justify-content: center;
	}
}

/* Entrance (assets/js/motion.js footerReveal): once 20% of the footer is in view (.is-in), its
   pieces rise in out of a soft blur, column by column, top to bottom (--fi per piece). The social
   icons also carry their hover transitions here, since this rule's transition list wins. */
.js-motion .footer-top .fi {
	opacity: 0;
	filter: blur(6px);
	transform: translate3d(0, 18px, 0);
}
.js-motion .footer-top.is-in .fi {
	opacity: 1;
	filter: none;
	transform: none;
	transition:
		opacity 800ms var(--ease-out),
		filter 900ms var(--ease-out),
		transform 1000ms var(--ease-out);
	transition-delay: calc(var(--fi, 0) * 45ms);
}
.js-motion .footer-top.is-in .footer_social_col a.fi {
	transition:
		opacity 800ms var(--ease-out) calc(var(--fi, 0) * 45ms),
		filter 900ms var(--ease-out) calc(var(--fi, 0) * 45ms),
		transform 1000ms var(--ease-out) calc(var(--fi, 0) * 45ms),
		translate var(--dur-short) var(--ease-out),
		background-color var(--dur-short) var(--ease-out);
}

/* the green strip at the very bottom shimmers slowly */
.ftm_border.bgcolor-green-gradient {
	background-size: 200% 100%;
	animation: ft-shimmer 14s var(--ease-in-out) infinite alternate;
}
@keyframes ft-shimmer {
	from {
		background-position: 0% 50%;
	}
	to {
		background-position: 100% 50%;
	}
}
