/* =============================================================================
   04-footer.css
   Site footer, including the shared social icons.

   Split out of style.css, which had grown to 3,647 lines. Loaded via
   wp_enqueue_style() in inc/enqueue.php - the load ORDER there matches the
   numeric filename order, and matches the order these rules appeared in the
   original file, so the cascade is unchanged.
   ============================================================================= */
/* ==========================================================================
   || FOOTER 
   footer.php is a template part: every page template ends with get_footer(),
   which pastes this file in. 
   Layout is a 4-column grid that collapses to 2 columns on tablet and 1 on
   phones. Column widths are set by grid-template-columns, so everything lines
   up on the same left edge instead of relying on floats.
   ========================================================================== */

footer {
	padding: 60px 0 30px;
	background-color: var(--js-beige);
	/* The separator, sitting exactly where the beige starts.
	   A border on <footer> spans the full window width, because <footer> is a
	   full-width block — the same box the background colour fills. */
	border-top: 1px solid #d9d2c6;
}
.footer_grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
	gap: 40px;
	align-items: start;
	padding-bottom: 40px;
}
/* Wordmark, standing in for a heading in column 1.
   Only `height` is set — the SVG's viewBox keeps the width proportional, so
   the logo can never stretch or squash. Change this one number to resize it.
   The `height="14px"` attribute was removed from the markup; a presentation
   attribute like that is beaten by any CSS rule, but removing it keeps things
   honest. `fill: currentColor` makes it follow the colour set below. */
.footer_logo {
	display: block;
	height: 30px;
	width: auto;
	margin: 0 0 16px;
	color: var(--js-grey);
	overflow: visible;
}
.footer_logo path,
.footer_logo .st1 {
	fill: currentColor;
}
.footer_col h3 {
	font-family: "effrabold";
	font-size: 17pt;
	line-height: 21pt;
	margin: 0 0 12px;
	color: var(--js-black);
}
.footer_col h4 {
	font-family: "effrabold";
	font-size: 10pt;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--js-grey);
	margin: 0 0 16px;
}
.footer_about p {
	font-size: 11pt;
	line-height: 17pt;
	color: var(--js-grey);
	margin: 0;
	max-width: 320px;
}
.footer_links {
	list-style: none;
	margin: 0;
	padding: 0;
}
.footer_links li {
	list-style: none;
	background-image: none;
	padding-left: 0;
	margin: 0 0 10px;
	font-size: 11pt;
	line-height: 16pt;
}
.footer_links a {
	color: var(--js-grey);
	text-decoration: none;
	font-family: "effraregular";
	font-size: 11pt;
	line-height: 16pt;
	border-bottom: 1px solid transparent;
	transition: all 0.15s ease-in-out;
}
.footer_links a:hover,
.footer_links a:focus-visible {
	color: var(--js-purple);
	border-bottom-color: var(--js-purple);
}
/* Bottom bar */
.footer_bottom {
	border-top: 1px solid #e4e0d9;
	padding-top: 22px;
}
.footer_bottom p {
	margin: 0;
	font-size: 10pt;
	line-height: 15pt;
	color: var(--js-grey);
}

body.page-template-template_homepage .st1 { /* footer logo colour */
	fill: var(--js-purple)
}
body.page-template-template_employer .st1 { /* footer logo colour */
	fill: var(--js-blue);
}
body.page-template-template_contact .st1 { /* footer logo colour */
	fill: var(--js-yellow);
}
body.page-template-template_about .st1 { /* footer logo colour */
	fill: var(--js-blue);
}
body.page-template-template_agency .st1 { /* footer logo colour */
	fill: var(--js-purple);
}
body.page-template-template_signup .st1 { /* footer logo colour */
	fill: var(--js-purple);
}
body.page-template-template_events_workshops .st1 { /* footer logo colour */
	fill: var(--js-orange);
}
body.page-template-template_advice_and_resources .st1 { /*footer logo colour*/
	fill: var(--js-blue);
}
/* Footer responsive */
@media only screen and (max-width: 950px) {
	.footer_grid {
		grid-template-columns: 1fr 1fr;
		gap: 34px 30px;
	}
}
@media only screen and (max-width: 600px) {
	footer {
		padding: 45px 0 25px;
	}
	.footer_grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}
	.footer_about p {
		max-width: none;
	}
}

/* --- Social icons - Shared anywhere they appear. 
   In the footer they sit under the contact column, left-aligned with it.
-------------------------------------------------------------------------- */

.social_links { /* LINKS shared anywhere */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}

.footer_col .social_links { /* LINKS in the footer */
	justify-content: flex-start;
	gap: 10px;
	margin-top: 20px;
}

.footer_col .social_link { /* SOCIAL ONE LINK in footyer: Icon-only, square buttons, no text label */
	padding: 0;
	width: 38px;
	height: 38px;
	justify-content: center;
	border-radius: 8px;
}
.footer_col .social_link svg {
	height: 17px;
}

.social_link { /* SOCIAL ONE LINK: Shared anywhere they appear. */
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: "effrabold";
	font-size: 9pt;
	text-decoration: none;
	color: var(--js-grey);
	background-color: var(--js-white);
	border: 1px solid #e4e0d9;
	border-radius: 5px;
	padding: 7px 12px;
	transition: all 0.2s ease-in-out;
}
.social_link svg {
	height: 20px;
	width: auto;
	fill: currentColor;
}

.social_link:hover,
.social_link:focus-visible {
	color: var(--js-white);
	transform: translateY(-3px);
}
.social_instagram:hover,
.social_instagram:focus-visible {
	background-color: var(--js-purple);
	border-color: var(--js-purple);
}
.social_linkedin:hover,
.social_linkedin:focus-visible {
	background-color: var(--js-blue);
	border-color: var(--js-blue);
}
.social_facebook:hover,
.social_facebook:focus-visible {
	background-color: var(--js-orange);
	border-color: var(--js-orange);
}
.social_twitter:hover,
.social_twitter:focus-visible {
	background-color: var(--js-black);
	border-color: var(--js-black);
}


/* || GLOBAL 
=== BODY CLASSES === */
.container {
	margin: 0 auto;
	padding: 0 30px;
	position: relative;
	z-index: 99;
}
.container .column {
	display: inline-block;
	width: 100%;
}
.container .column .left {
	width: 50%;
	padding-right: 25px;
}
.container .column .right {
	width: 50%;
	padding-left: 25px;
}