/*
 * Site footer: office addresses, the legal line and social links.
 *
 * The address grid and the bottom row are a fixed 980px from 768px up, as
 * before, so between 768px and roughly 1000px they run past the screen edges.
 */

.site-footer { position: relative; display: flex; flex-direction: column; margin-top: 60px; background-color: var(--c-dark); }
.site-footer__inner { display: flex; flex-direction: column; align-items: center; gap: 65px; width: 100%; max-width: 1200px; margin: 0 auto; padding: 60px 0; }

.site-footer__offices { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; justify-content: start; width: 980px; }
.office { position: relative; display: flex; flex-direction: column; gap: 20px; }
.lemonade .office h2 { margin: 0; padding: 0; font-family: "Oxygen", Sans-serif; font-size: 18px; font-weight: 700; line-height: 1; color: var(--c-white); }
.office p { margin: 0; font-family: "Oxygen", Sans-serif; font-size: 15px; font-weight: 400; color: var(--c-white); }

.site-footer__bottom { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; width: 980px; }
.site-footer__legal { position: relative; display: flex; justify-content: center; gap: 20px; width: 100%; }
.site-footer__copyright { position: relative; align-self: flex-start; max-width: 100%; margin: 0; padding: 0; font-family: "Oxygen", Sans-serif; font-size: 12px; font-weight: 400; line-height: 1; color: var(--c-white); }
.site-footer__social { position: relative; display: flex; flex-direction: row-reverse; justify-content: center; gap: 20px; width: 100%; }

.social-links { display: flex; justify-content: center; gap: 15px; }
.social-links a { display: inline-flex; align-items: center; justify-content: center; width: 33px; height: 33px; border-radius: 50%; background-color: transparent; font-size: 33px; line-height: 33px; cursor: pointer; }
.social-links a:hover { opacity: .9; }
.social-links svg { display: block; width: 1em; height: 1em; }

@media (max-width: 767px) {
	.site-footer { padding: 0 30px; }
	.site-footer__inner { flex-wrap: wrap; gap: 30px 0; padding: 30px 0; }
	.site-footer__offices { grid-template-columns: 1fr; width: 100%; }
	.office, .site-footer__bottom { flex-wrap: wrap; }
	.site-footer__bottom { width: 100%; }
	.site-footer__legal { flex-direction: column; flex-wrap: wrap; }
	.site-footer__copyright { text-align: center; line-height: 1.7em; }
	.site-footer__social { flex-direction: row; flex-wrap: wrap; }
}