/* styles for the footer */

.footer {
	/* border: 1px solid magenta; */
}

/* .footer__logo {
	color: var(--accent);
} */

.footer__upper-panel {
	/* min-height: var(--footer-upper-height); */
	/* padding-top: calc(var(--footer-upper-height) / 3); */
	padding-block: 2rem;
	padding-inline: 1rem;
	/* border: 1px solid aqua; */
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

@media (min-width: 992px) {
	.footer__upper-panel {
		padding: 1rem;
	}
}

.footer__social-links {
	display: flex;
	gap: 0.5rem;
	/* social links are img inside links which affects the default alignment (they align start not center) */
	align-items: center;

	/* border: 1px solid orange; */
}

.footer__social-links a {
	outline: none;
	color: hsl(var(--blue));
}

/* .footer__social-links a:focus-visible {
	color: hsl(var(--yellow));
} */

.footer__social-links a svg {
	fill: currentColor;
}

.footer__social-links--instagram {
	width: 2.5rem;
	aspect-ratio: 1;
	transition: scale 0.3s ease-in-out;
}

.footer__social-links--instagram:is(:focus-visible, :hover) {
	color: hsl(var(--yellow));
	/* color: hsl(var(--pink)); */
	/* outline: none; */
	/* scale: 87.5%; */
}

.footer__social-links--linkedin {
	width: 2.5rem;
	aspect-ratio: 1;
}

.footer__social-links--linkedin:is(:hover, :focus-visible) {
	color: hsl(var(--pink));

	/* scale: 100%; */
}

.footer__company-logos {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding-block-start: 2rem;
	/* logos are imgs so they align center by default */
	/* align-items: start; */
	/* border: 1px solid orangered; */
}

.footer__company-logos a {
	/* display: flex;
	/* do vertical and horizontal centering for now */
	/* might need to change flex direction for mobile / desktop */
	/* align-items: center;
	justify-content: center;
	border: 1px solid #f00; */
}

@media (min-width: 992px) {
	.footer__company-logos {
		/* display: flex;
		flex-direction: column; */
		gap: 0.7rem;
		/* logos are imgs so they align center by default */
		/* align-items: start; */
		/* border: 1px solid orangered; */
	}

	.footer__company-logos a {
		display: flex;
		/* do vertical and horizontal centering for now */
		/* might need to change flex direction for mobile / desktop */
		align-items: center;
		justify-content: center;
		/* border: 1px solid #f00; */
	}
}

.footer__company-logos img {
	/* border: 1px solid #00f; */
}

@media (min-width: 992px) {
	.footer__upper-panel {
		min-height: var(--footer-upper-height);
		padding-top: calc(var(--footer-upper-height) / 3);
		/* padding-inline: 6rem; */
		flex-direction: row;
	}

	.footer__social-links {
		/* social links are img inside links which affects the default alignment (they align start not center) */
		align-items: center;
		margin-left: 4rem;
	}

	.footer__company-logos {
		flex-direction: row;
		gap: 2rem;
		margin-left: auto;
		margin-right: 6rem;

		/* logos are imgs so they align center by default */
		/* align-items: start; */
	}

	.calderdyeing-logo {
		/* to push this down to sit level with the other logo otherwise it's vertically centered */
		padding-top: 1.7rem;
	}
}

.footer__lower-panel {
	/* try setting a min-height for the footer so we can make 
	the last section plus the footer plus the header equal 100vh 
	--footer-height is set in global.css */

	min-height: var(--footer-height);

	background-color: hsl(var(--navy));
	/* border: 1px solid yellow; */

	color: hsl(var(--white));

	display: flex;
	flex-direction: column;
	gap: 1rem;

	padding-block: 2rem;
	padding-inline: 1rem;
}

@media (min-width: 992px) {
	.footer__lower-panel {
		flex-direction: row;
		align-items: center;
		padding-inline: 2rem;
	}

	.footer__links {
		margin-left: auto;
		margin-right: 2.5rem;
	}

	.footer__designedby {
		margin-right: 2.5rem;
	}
}

.panel--logo {
	display: flex;
	justify-content: flex-end; /* flex-end as fallback */
	justify-content: end;
	background-color: hsl(var(--white));
	/* border: solid 1px hotpink; */

	/* try losing the logo completely */
	/* yeah, looks good */
	/* put the logo in a component just in case we need it and delete it */
}

/* hide logo panel on mobile */
/* match the bootstrap breakpoints */
/* https://getbootstrap.com/docs/5.0/layout/breakpoints/#max-width */
@media (max-width: 575.98px) {
	.panel--logo {
		display: none;
	}
}

/* panel--text is a modifier for footer__panel */
/* bg colour is on here because originally there was another modifier --logo
	that had a different bg colour */
.panel--text {
	background-color: var(--text);
	color: hsl(var(--white));
	/* border: solid 1px yellow; */
}

.footer__link,
.footer__dayeightagency-link {
	color: hsl(var(--white));
	text-decoration: none;
	/* position relative for the ::after positioning */
	position: relative;
}

/* bit of space for the privacy contact links */
/* they're a bit tight around the pipe fnarr fnarr */
.footer__link {
	margin-inline: 0.2rem;
}

.footer__dayeightagency-link {
	font-weight: bold;
}

.footer__link:hover,
.footer__dayeightagency-link:hover {
	color: hsl(var(--white));
}

.footer__link::after,
.footer__dayeightagency-link::after {
	content: "";
	position: absolute;
	/* background-color: var(--muted); */
	height: 1px;
	width: 100%;
	border-radius: 2px;
	bottom: -0.3rem;
	left: 0;

	transform: scaleX(0);
	transition: transform 200ms ease-in-out;
}

.footer__link:hover::after,
.footer__dayeightagency-link:hover::after,
.footer__link:focus-visible::after,
.footer__dayeightagency-link:focus-visible::after {
	transform: scaleX(1);
}

/* doing the background-color in separate ruleset in case we want different color underline for different links */
.footer__link::after,
.footer__dayeightagency-link::after {
	background-color: var(--muted);
}

.footer__link:focus-visible,
.footer__dayeightagency-link:focus-visible {
	outline: none;
	background-color: hsl(var(--white) / 0.25);
}

.footer__link::after {
	/* background-color: hsl(var(--white)); */
}