/*
 * Lake Auburn Legal -- the footer: the three columns on the pale blue band and the blue colophon
 * under them. Section C of the component system, kept in its own sheet and loaded straight after
 * lake-auburn-legal.css, so it sits in the cascade where the section used to.
 */

/* --- Footer ---------------------------------------------------------------- */

.lal-footer {
	background-color: #dce8f4;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: cover;
}

/* Three 347.1px columns 21.7px apart on the row, 72px above and below them. */
.lal-footer__cols {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 347.1px));
	gap: 21.7px;
	padding: 72px 0;
}

/* Regular weight: the original asks for 300 and gets the lightest EB Garamond there is, which is
   400. */
.lal-footer__title {
	margin: 0 0 10px;
	font-family: var(--lal-serif);
	font-size: 17px;
	font-weight: 400;
	line-height: 2;
	text-transform: uppercase;
	color: var(--lal-ink);
}

/* The rule under each column title: 121.5px, 2px thick, blue fading to nothing, 14px clear above
   and below. */
.lal-footer .lal-rule {
	width: 121.5px;
	height: 2px;
	margin: 14px 0;
	border: 0;
	background: linear-gradient(to right, var(--lal-blue), transparent);
}

.lal-footer__links {
	display: flex;
	flex-direction: column;
}

/* 37px per link: a 32px line and 5px beneath it, the last one included. Tracked like the menu. */
.lal-footer__links a {
	padding-bottom: 5px;
	font-family: var(--lal-serif);
	font-size: 16px;
	font-weight: 700;
	line-height: 2;
	letter-spacing: 0.48px;
	/* Ink, like the menu: blue is for the page you are on, and none of these is. */
	color: var(--lal-ink);
	text-decoration: none;
}

.lal-footer__links a:hover {
	color: var(--lal-gold);
}

/* The client portal link under the quick links: the button's pill, filled blue so it stands out on
   the pale band, gold on hover like the other buttons. Scoped through .lal-footer to beat the
   footer's own link colour. */
.lal-footer .lal-footer__portal {
	display: inline-block;
	margin-top: 16px;
	padding: 10px 28px;
	border: 1px solid var(--lal-blue);
	border-radius: 45px;
	background: var(--lal-blue);
	color: var(--lal-white);
	font-family: var(--lal-serif);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.48px;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.lal-footer .lal-footer__portal:hover,
.lal-footer .lal-footer__portal:focus-visible {
	border-color: var(--lal-gold);
	background: var(--lal-gold);
	color: var(--lal-ink);
}

.lal-footer p {
	margin: 0 0 10px;
	font-size: 15px;
	line-height: 2;
}

/* The contact column's paragraphs run on a 282.5px measure, which is what wraps the address. */
.lal-footer__cols > div:nth-child(2) p {
	max-width: 282.5px;
}

.lal-footer a {
	color: var(--lal-blue);
}

/* The telephone number is semi-bold blue and the email address bold black, as published. */
.lal-footer a[href^='tel:'] {
	font-weight: 600;
}

.lal-footer a[href^='tel:'] strong {
	font-weight: inherit;
}

.lal-footer a[href^='mailto:'] {
	color: #000;
}

/* Bold means 700 here: left to itself a <strong> in this light-weight copy only reaches 400. */
.lal-footer strong {
	font-weight: 700;
}

/* The same row as the masthead's, hung 7px into the column's margin as the original places it. */
.lal-footer__social {
	display: flex;
	gap: 5px;
	margin-left: -6.9px;
}

.lal-footer__social a {
	display: inline-flex;
	box-sizing: border-box;
	width: 28px;
	height: 33px;
	padding-bottom: 5px;
	align-items: center;
	justify-content: center;
}

.lal-footer__social svg {
	width: 19px;
	height: 19px;
	fill: currentColor;
}

/* The blue bar under the columns: breadcrumb, copyright, terms. */
.lal-colophon {
	padding: 28.8px 0;
	font-weight: 400;
	background: var(--lal-blue);
	color: var(--lal-white);
	text-align: center;
}

.lal-colophon a {
	color: var(--lal-white);
	font-weight: 700;
	text-decoration: none;
}

.lal-colophon a:hover {
	text-decoration: underline;
}

/* Both carry the block's class as well as the tag so they outrank the footer's own paragraph
   rule, which would otherwise size them. */
.lal-colophon p.lal-colophon__crumb {
	margin-bottom: 10px;
	font-family: var(--lal-serif);
	font-size: 16px;
	font-weight: 700;
	line-height: 2;
}

/* A full-width hairline, 14px below the breadcrumb and 15px above the notice. */
.lal-colophon hr {
	width: 100%;
	margin: 14px 0 15px;
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.5);
}

.lal-colophon p.lal-colophon__legal {
	margin: 0 auto;
	font-size: 12px;
	line-height: 2;
}