/**
 * Footer — the R3 design, rendered by the child override of Salient's
 * includes/partials/footer/main-widgets.php.
 *
 * Loads after the parent stylesheet and depends on the AOR token layer
 * (aor-wpb-tokens). Figma measurements from the 1728px comp are mapped to
 * the tokens' 1440px desktop endpoints, per the token-system rules.
 */

/* Salient's dynamic CSS paints the footer from the old theme options with
 * !important flags of its own (#232324 background, #CCCCCC on every link,
 * brand-red on hover) — matching flags plus the body prefix win the tie. */
body #footer-outer {
	background-color: var(--aor-color-surface-dark) !important;
	color: var(--aor-color-text-inverse) !important;
}

.aor-footer {
	font-family: var(--aor-font-body);
}

/* Every piece of footer text is white in the R3 comp, hover included (the
 * hover affordance is underline/opacity, never a colour change). One blanket
 * rule beats all of Salient's !important link colours at once. */
body #footer-outer .aor-footer,
body #footer-outer .aor-footer a,
body #footer-outer .aor-footer a:hover,
body #footer-outer .aor-footer a:focus {
	color: var(--aor-color-text-inverse) !important;
}

/* Same container recipe as the header override: the AOR 1440px cap plus
 * breakout edge padding. */
.aor-footer__container {
	width: 100%;
	max-width: calc(var(--aor-container-max) + 2 * var(--aor-space-md));
	margin-inline: auto;
	padding-inline: var(--aor-space-md);
}

/* --------------------------------------------------------------------------
 * Main area — brand column + three menu columns.
 * Comp: 345px brand column, natural-width nav columns, space distributed
 * between (105/196/196 at 1728px).
 * ------------------------------------------------------------------------ */

.aor-footer__main {
	display: grid;
	grid-template-columns: minmax(280px, 345px) repeat(3, auto);
	justify-content: space-between;
	column-gap: var(--aor-space-4xl);
	row-gap: var(--aor-space-3xl);
	padding-block: var(--aor-space-5xl);
}

/* Brand column */

.aor-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--aor-space-md);
}

.aor-footer__logo {
	display: block;
	line-height: 0;
}

/* Salient's .row .col img sizing leak does not reach here (no .col), but the
 * theme's global img rules do — pin the drawn size. */
.aor-footer__logo img {
	width: 170px;
	height: auto;
	max-width: 100%;
}

.aor-footer__contact {
	display: grid;
	gap: var(--aor-space-5xs);
	font-size: var(--aor-text-p-md);
	font-style: normal;
	line-height: 1.3;
}

.aor-footer__contact a {
	color: inherit;
	text-decoration: none;
}

.aor-footer__contact a:hover,
.aor-footer__contact a:focus {
	text-decoration: underline;
}

/* Social icons — 18px stroke marks, comp gap 24. Salient decorates list
 * items site-wide (::before dot, ::marker) — neutralize both. */
.aor-footer__social {
	display: flex;
	gap: var(--aor-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.aor-footer__social li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.aor-footer__social li::before,
.aor-footer__social li::marker {
	content: none;
}

.aor-footer__social a {
	display: block;
	color: var(--aor-color-text-inverse);
	line-height: 0;
	transition: opacity 0.2s ease;
}

.aor-footer__social a:hover,
.aor-footer__social a:focus {
	opacity: 0.7;
}

/* Newsletter signup. Comp: 56px above the block, 16px between its rows. */

.aor-footer__signup {
	margin-top: var(--aor-space-sm);
	width: 100%;
}

.aor-footer__signup-heading {
	margin: 0 0 var(--aor-space-4xs);
	padding-bottom: 0;
	color: var(--aor-color-text-inverse);
	font-family: var(--aor-font-heading);
	font-size: var(--aor-font-size-lg);
	font-weight: var(--aor-weight-heading);
	line-height: 1.3;
}

.aor-footer__form {
	display: grid;
	gap: var(--aor-space-4xs);
	justify-items: start;
	margin: 0;
}

/* Salient styles bare email inputs (light background, its own border and
 * radius) — the id-weight prefix outranks those, and every declaration the
 * theme sets gets restated here. */
body #footer-outer .aor-footer__email {
	width: 100%;
	margin: 0;
	padding: var(--aor-space-5xs) var(--aor-space-4xs);
	background-color: transparent;
	border: 1px solid var(--aor-color-text-inverse);
	border-radius: var(--aor-radius-input);
	color: var(--aor-color-text-inverse);
	font-family: var(--aor-font-body);
	font-size: var(--aor-text-p-md);
	line-height: 1.3;
}

body #footer-outer .aor-footer__email::placeholder {
	color: var(--aor-color-text-inverse);
	opacity: 1;
}

body #footer-outer .aor-footer__email:focus {
	outline: 2px solid var(--aor-color-text-inverse);
	outline-offset: 2px;
}

.aor-footer__signup-note {
	margin: 0;
	/* Salient gives every p a 27px padding-bottom; the grid gap owns this. */
	padding-bottom: 0;
	font-size: var(--aor-text-p-xs);
	line-height: var(--aor-leading-body);
}

.aor-footer__signup-note a {
	color: inherit;
	text-decoration: underline;
}

/* Same recipe as .aor-btn/--primary in components.css, restated because that
 * sheet only loads on pages using an AOR shortcode and the footer is
 * site-wide. The id-weight prefix outranks Salient's
 * body[data-form-submit] button[type=submit] styling. */
body #footer-outer .aor-footer__submit {
	display: inline-block;
	padding: var(--aor-space-4xs) var(--aor-space-md);
	background-color: var(--aor-color-btn-bg);
	border: 1px solid var(--aor-color-btn-bg);
	border-radius: var(--aor-radius-pill);
	color: var(--aor-color-btn-text);
	font-family: var(--aor-font-heading);
	font-size: var(--aor-text-p-md);
	font-weight: var(--aor-weight-heading);
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

body #footer-outer .aor-footer__submit:hover,
body #footer-outer .aor-footer__submit:focus {
	background-color: var(--aor-color-btn-bg-hover);
	border-color: var(--aor-color-btn-bg-hover);
}

/* Menu columns */

.aor-footer__heading {
	margin: 0 0 var(--aor-space-md);
	padding-bottom: 0;
	color: var(--aor-color-text-inverse);
	font-family: var(--aor-font-heading);
	font-size: var(--aor-text-p-md);
	font-weight: var(--aor-weight-heading);
	line-height: 1.3;
}

.aor-footer__menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Line-height is pinned on the li as well as the a — otherwise the li's
 * inherited Salient line-height sets a taller strut and inflates the gap. */
.aor-footer__menu li {
	margin: 0 0 var(--aor-space-xs);
	padding: 0;
	line-height: 1.3;
	list-style: none;
}

.aor-footer__menu li:last-child {
	margin-bottom: 0;
}

.aor-footer__menu li::before,
.aor-footer__menu li::marker {
	content: none;
}

.aor-footer__menu a {
	color: var(--aor-color-text-inverse);
	font-size: var(--aor-text-p-md);
	line-height: 1.3;
	text-decoration: none;
}

.aor-footer__menu a:hover,
.aor-footer__menu a:focus {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
 * Bottom bar — brand-red rule, legal links left, sign-in right.
 * ------------------------------------------------------------------------ */

.aor-footer__bottom {
	border-top: 1px solid var(--aor-color-brand);
}

.aor-footer__bottom-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--aor-space-4xs) var(--aor-space-lg);
	padding-block: var(--aor-space-4xs);
}

.aor-footer__legal {
	margin: 0;
	padding-bottom: 0;
	font-size: var(--aor-text-p-xs);
	line-height: var(--aor-leading-body);
}

.aor-footer__legal a {
	color: inherit;
	text-decoration: none;
}

.aor-footer__legal a:hover,
.aor-footer__legal a:focus {
	text-decoration: underline;
}

.aor-footer__sep {
	padding-inline: var(--aor-space-6xs);
	color: var(--aor-color-brand);
}

.aor-footer__signin {
	display: inline-flex;
	align-items: center;
	gap: var(--aor-space-5xs);
	color: var(--aor-color-text-inverse);
	font-size: var(--aor-text-p-xs);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

.aor-footer__signin:hover,
.aor-footer__signin:focus {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
 * Responsive — no mobile comp exists; standard AOR breakpoints.
 * ------------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.aor-footer__main {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Brand column reads first at full width; menus pair up beneath. */
	.aor-footer__brand {
		grid-column: 1 / -1;
	}

	.aor-footer__signup {
		max-width: 345px;
	}
}

@media (max-width: 767px) {
	.aor-footer__main {
		grid-template-columns: minmax(0, 1fr);
	}

	.aor-footer__signup {
		max-width: none;
	}

	.aor-footer__bottom-inner {
		flex-direction: column;
		align-items: flex-start;
	}
}