/* layout/footer.css
   Site footer.

   Part of assets/css/. The load order lives in
   inc/setup.php - add new files there, not with @import. */

/* Footer social rows: glyph plus label. */
.footer-social { display: inline-flex; align-items: center; gap: 9px; }

.footer-social .social-glyph { flex: none; opacity: 0.75; }

.footer-social:hover .social-glyph { opacity: 1; }

.site-footer { background: var(--night); color: #fff; }

.footer-grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1.2fr 1fr;
	gap: 50px;
	padding-top: 70px;
	padding-bottom: 34px;
}

.footer-brand { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }

/* The anchor is the flex item now, so it must not stretch. */
.footer-logo-link {
	align-self: flex-start;
	display: inline-block;
	line-height: 0;
	transition: opacity 0.18s ease;
}

.footer-logo-link:hover,
.footer-logo-link:focus-visible { opacity: 0.8; }

.footer-logo-link:focus-visible { outline: 2px solid var(--lav); outline-offset: 6px; }

.footer-logo { width: 210px; max-width: 100%; height: auto; display: block; }

.footer-blurb {
	font-size: 14px;
	font-weight: 300;
	line-height: 1.6;
	color: #9AA6C6;
	max-width: 34ch;
}

.footer-col { display: flex; flex-direction: column; gap: 14px; }

.footer-head { font-size: 11px; letter-spacing: 0.16em; font-weight: 600; }

.footer-col a,
.footer-muted {
	font-size: 13.5px;
	font-weight: 300;
	color: rgba(255, 255, 255, 0.75);
}

.footer-col a:hover { color: #fff; }

/* 0.35 blended to #626478 over --night, a 3.18:1 ratio that fails WCAG AA. 0.55
   clears it at 6.1:1 and still reads as muted next to the 0.75 links. */
.footer-muted { color: rgba(255, 255, 255, 0.55); }

.footer-address {
	font-style: normal;
	font-size: 13.5px;
	font-weight: 300;
	color: rgba(255, 255, 255, 0.75);
	line-height: 1.8;
}

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	padding: 22px 0 40px;
	display: flex;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	font-size: 12px;
	/* 0.45 landed at 4.49:1 - under AA by a hair. 0.52 clears it. */
	color: rgba(255, 255, 255, 0.52);
}

/* Footer sits on navy, so the default navy link colour would vanish. */
.site-footer .directions-link { color: var(--lav); }

.site-footer .directions-link:hover { color: #fff; }

/* Not .contact-link: those sit inline with a " / " separator between them, and
   blockifying them pushed the separator onto a line of its own. Their padding
   already carries the hit area. */
.footer-col a:not(.contact-link) {
	display: flex;
	align-items: center;
	min-height: 24px;
}

@media (max-width: 980px) {
	.footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; padding-top: 56px; }
}

@media (max-width: 680px) {
	.footer-grid { grid-template-columns: 1fr; padding-top: 46px; }
}