footer {
	background-color: var(--brand-a-bg);
}

footer .columnsContainer {
	display: grid;
	grid-gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(calc(25% - 2rem), 1fr));

	padding: 3rem 1rem;
}

footer,
footer a,
footer p,
footer span {
	color: rgba(255, 255, 255, 0.792);
	font-size: 0.9rem;
	font-weight: 300;
}

footer .footer-title {
	text-transform: uppercase;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

footer a:hover {
	color: var(--brand-a-hover);
	text-decoration: none;
}

/************************ SOCIAL BUTTONS CONTAINER **********************/

.social-media-container {
	margin-top: 1.5rem;
	display: flex;
	gap: 1rem;
}

/* .fab is the social media icons in footer */
.fab {
	font-family: "Font Awesome 5 Brands";
	font-size: 1.6rem;
	transition: color .7s ease;
}

.fab:hover {
	color: var(--brand-a-hover);
	transition: color .7s ease;
}

/************************ SOCIAL BUTTONS CONTAINER **********************/


/************************ COPYRIGHT CONTAINER **********************/
footer .copyrightContainer {
    border-top: 1px solid rgba(255, 255, 255, 0.598);
	padding: 1rem;

	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .6rem;
}


/************************ COPYRIGHT CONTAINER **********************/

@media only screen and (max-width: 1024px) {

	footer .columnsContainer {
		grid-template-columns: repeat(auto-fit, minmax(calc(50% - 2rem), 1fr));
	}

}

@media only screen and (max-width: 500px) {

	footer .columnsContainer {
		grid-template-columns: repeat(auto-fit, minmax(calc(100% - 2rem), 1fr));
		justify-items: center;
	}

	footer .footer-col {
		text-align: center;
	}

	.social-media-container {
		margin-top: 1.5rem;
		display: flex;
		gap: 1rem;
		justify-content: center;
	}

	footer .copyrightContainer {
		justify-content: center;
		text-align: center;
	}
}

/* ==========================================================================
   Footer Claude
   ========================================================================== */
.site-footer {
    background: var(--ink);
    color: var(--text-light-muted);
    padding: 56px 0 0;
}

.footer-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 36px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--line-dark);
}

.footer-brand img {
    height: 30px;
    margin-bottom: 14px;
}

.footer-brand p {
    max-width: 30ch;
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.social-links {
    display: flex;
    gap: 14px;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--line-dark);
    transition: border-color 0.18s ease, background-color 0.18s ease;
}

.social-link:hover {
    border-color: var(--signal-cyan);
    background: rgba(41, 171, 226, 0.12);
}

.social-icon {
    width: 16px;
    height: 16px;
    background-color: var(--text-light-muted);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: background-color 0.18s ease;
}

.social-link:hover .social-icon {
    background-color: var(--signal-cyan);
}

.footer-nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 0.9rem;
}

.footer-nav a:hover {
    color: var(--signal-cyan);
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 0.9rem;
}

.footer-contact a:hover {
    color: var(--signal-cyan);
}

.footer-contact-link {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-contact-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 34ch;
}

.footer-contact-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-color: var(--text-light-muted);
    color: var(--text-light-muted);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    filter:
        drop-shadow(0.4px 0 0 currentColor) drop-shadow(-0.4px 0 0 currentColor) drop-shadow(0 0.4px 0 currentColor) drop-shadow(0 -0.4px 0 currentColor);
}

.footer-contact-row .footer-contact-icon {
    margin-top: 3px;
}

.footer-contact-link:hover .footer-contact-icon {
    background-color: var(--signal-cyan);
    color: var(--signal-cyan);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 20px 28px;
    font-size: 0.78rem;
}

@media (max-width: 600px) {
    .footer-inner {
        flex-direction: column;
    }
}

@media (max-width: 500px) {
    .footer-contact {
		align-items: center;
	}

	.footer-brand img {
		display: unset;
	}
}