/* Shared components: buttons, logo, header, navigation, mobile menu, footer. */

/* Icons ------------------------------------------------------------------ */

.ae-icon {
	display: block;
	flex-shrink: 0;
}

/* Buttons ---------------------------------------------------------------- */

.ae-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px;
	padding: 8px 16px;
	border: 0;
	background: var(--ae-ink);
	color: var(--ae-white);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	text-transform: uppercase;
	white-space: nowrap;
	transition:
		background var(--ae-duration-base) var(--ae-ease),
		color var(--ae-duration-base) var(--ae-ease);
}

.ae-btn:hover {
	background: var(--ae-signal);
	color: var(--ae-ink);
}

.ae-btn--secondary {
	background: var(--ae-white);
	color: var(--ae-ink);
}

.ae-btn--outline {
	background: var(--ae-white);
	color: var(--ae-ink);
	box-shadow: var(--ae-shadow-ring-light);
}

.ae-btn--outline:hover {
	background: var(--ae-fog);
}

/* Outline on dark plates (hero "Call now"). */
.ae-btn--outline-inverse {
	background: transparent;
	color: var(--ae-white);
	box-shadow: inset 0 0 0 1px var(--ae-graphite);
}

.ae-btn--sm {
	height: 36px;
	padding: 8px 12px;
}

.ae-btn--cta {
	height: 56px;
	padding: 8px 36px;
}

.ae-btn--full {
	width: 100%;
}

/* Notch button: 242x56 accent CTA with a diagonal arrow. */
.ae-notch-btn {
	--ae-notch-cut-w: 19.95px;
	--ae-notch-cut-h: 25.6px;

	position: relative;
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: space-between;
	width: 242px;
	height: 56px;
	padding: 0 16px;
	background: var(--ae-signal);
	color: var(--ae-ink);
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: var(--ae-tracking-tight);
	text-transform: uppercase;
	transition:
		background var(--ae-duration-base) var(--ae-ease),
		color var(--ae-duration-base) var(--ae-ease);
}

.ae-notch-btn:hover {
	background: var(--ae-ink);
	color: var(--ae-white);
}

.ae-notch-btn__icon {
	display: inline-flex;
	margin-right: var(--ae-notch-cut-w);
	transform: rotate(-45deg);
}

.ae-notch-btn--cut {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--ae-notch-cut-h)), calc(100% - var(--ae-notch-cut-w)) 100%, 0 100%);
}

/* Form input: 56px, 8px radius, inset ring. */
.ae-input {
	width: 100%;
	min-width: 0;
	height: 56px;
	padding: 8px 16px;
	border: 0;
	border-radius: var(--ae-radius-input);
	background: var(--ae-white);
	box-shadow: var(--ae-shadow-ring-input);
	color: var(--ae-ink);
	font-size: 14px;
	line-height: 20px;
}

.ae-input::placeholder {
	color: var(--ae-steel-text);
	opacity: 1;
}

/* Logo: light artwork placed directly on the dark header and footer. */

.ae-logo {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	width: max-content;
	height: 44px;
}

.ae-header .ae-logo {
	padding-left: 12px;
}

.ae-logo__img {
	width: auto;
	height: 36px;
}

/* Header ------------------------------------------------------------------ */

.ae-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	padding-block: 12px;
	background: var(--ae-white);
}

@media (max-width: 600px) {
	.ae-header {
		top: 0;
	}
}

.ae-header__inner {
	display: flex;
	height: var(--ae-header-bar);
}

.ae-header__bar {
	position: relative;
	display: flex;
	flex: 1;
	align-items: center;
	gap: 12px;
	min-width: 0;
	padding: 6px;
	background: var(--ae-ink);
	color: var(--ae-white);
}

.ae-header__phone,
.ae-header__call {
	color: var(--ae-white);
	font-weight: 400;
	line-height: 1;
	letter-spacing: var(--ae-tracking-tight);
	text-transform: uppercase;
	white-space: nowrap;
}

.ae-header__phone {
	flex-shrink: 0;
	padding-right: 8px;
	font-size: 16px;
}

.ae-header__call {
	font-size: 14px;
}

.ae-header__compact {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	min-width: 0;
}

.ae-header__burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--ae-graphite);
	background: transparent;
	color: var(--ae-white);
}

.ae-header__burger:hover {
	color: var(--ae-signal);
}

.ae-header__burger-close,
.ae-header__burger[aria-expanded="true"] .ae-header__burger-open {
	display: none;
}

.ae-header__burger[aria-expanded="true"] .ae-header__burger-close {
	display: inline-flex;
}

/*
 * The full desktop bar (logo + 6 items + phone + CTA) needs ~1300px of content width,
 * so it switches on at 1440px; below that the compact bar with the menu panel is used. Below
 * 1760 the menu items sit closer together to keep the row on one line.
 */
.ae-nav,
.ae-header__phone,
.ae-header__apply {
	display: none;
}

@media (min-width: 1440px) {
	.ae-header__bar {
		gap: 24px;
	}

	.ae-nav {
		display: flex;
		flex: 1;
		align-items: center;
		min-width: 0;
	}

	.ae-header__phone,
	.ae-header__apply {
		display: inline-flex;
	}

	.ae-header__compact,
	.ae-mnav {
		display: none !important;
	}
}

@media (min-width: 1600px) {
	.ae-header__bar {
		gap: 48px;
	}
}

@media (max-width: 640px) {
	.ae-header__call {
		display: none;
	}
}

/* Desktop navigation */

.ae-nav__list {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ae-nav__item {
	position: relative;
	display: flex;
	align-items: center;
}

.ae-nav__link,
.ae-nav__sublink {
	color: var(--ae-white);
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: var(--ae-tracking-tight);
	text-transform: uppercase;
	white-space: nowrap;
}

.ae-nav__link {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 20px;
}

.ae-nav__item--has-sub .ae-nav__link {
	padding-right: 4px;
}

.ae-nav__toggle {
	display: inline-flex;
	align-items: center;
	height: 36px;
	margin-right: 14px;
	padding: 0 2px;
	border: 0;
	background: transparent;
	color: var(--ae-white);
}

.ae-nav__toggle .ae-icon {
	transition: transform var(--ae-duration-base) var(--ae-ease);
}

/* Below 1760 the six menu items only fit next to the phone and the CTA when their padding is
   tightened; below 1600 the CTA and the gaps in the bar get narrower as well. */
@media (max-width: 1759px) {
	.ae-nav__link {
		padding: 0 8px;
	}

	.ae-nav__item--has-sub .ae-nav__link {
		padding-right: 2px;
	}

	.ae-nav__toggle {
		margin-right: 6px;
	}
}

@media (min-width: 1440px) and (max-width: 1599px) {
	.ae-header__bar {
		gap: 16px;
	}

	.ae-header__apply {
		width: 164px;
	}

	/* A seventh item only fits at 1440 with tighter padding; six items keep the regular spacing. */
	.ae-nav__list:has(> li:nth-child(7)) .ae-nav__link {
		padding: 0 6px;
	}

	.ae-nav__list:has(> li:nth-child(7)) .ae-nav__item--has-sub .ae-nav__link {
		padding-right: 2px;
	}
}

.ae-nav__link.is-current,
.ae-nav__item.is-active > .ae-nav__link,
.ae-nav__toggle:hover,
.ae-nav__sublink.is-current {
	color: var(--ae-signal);
}

.ae-nav__sub {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 60;
	display: none;
	min-width: 300px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--ae-graphite);
	background: var(--ae-ink);
	list-style: none;
}

/* Bridge the 6px gap so the pointer can travel from the item to the dropdown. */
.ae-nav__sub::before {
	position: absolute;
	right: 0;
	bottom: 100%;
	left: 0;
	height: 8px;
	content: "";
}

.ae-nav__item--has-sub:hover .ae-nav__sub,
.ae-nav__item--has-sub:focus-within .ae-nav__sub,
.ae-nav__item--has-sub.is-open .ae-nav__sub {
	display: block;
}

.ae-nav__item--has-sub.is-dismissed .ae-nav__sub {
	display: none;
}

.ae-nav__item--has-sub:hover .ae-nav__toggle .ae-icon,
.ae-nav__item--has-sub:focus-within .ae-nav__toggle .ae-icon,
.ae-nav__item--has-sub.is-open .ae-nav__toggle .ae-icon {
	transform: rotate(180deg);
}

.ae-nav__item--has-sub.is-dismissed .ae-nav__toggle .ae-icon {
	transform: none;
}

.ae-nav__sub li + li {
	border-top: 1px solid var(--ae-graphite);
}

.ae-nav__sublink {
	display: flex;
	align-items: center;
	height: 52px;
	padding: 0 20px;
}

/* Mobile / tablet menu panel */

.ae-mnav {
	max-height: calc(100vh - var(--ae-header-height) - var(--wp-admin--admin-bar--height, 0px));
	max-height: calc(100dvh - var(--ae-header-height) - var(--wp-admin--admin-bar--height, 0px));
	margin-top: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--ae-ink);
	box-shadow: var(--ae-shadow-bar);
}

.js .ae-mnav:not(.is-open) {
	display: none;
}

/*
 * Without JS the panel cannot be toggled: render it as a plain list in the page flow
 * instead of a sticky full-height overlay, and drop the controls that do nothing.
 */
@media (max-width: 1439px) {
	.no-js .ae-header {
		position: static;
	}

	.no-js .ae-mnav {
		max-height: none;
		overflow: visible;
		box-shadow: none;
	}

	.no-js .ae-header__burger,
	.no-js .ae-mnav__icon-plus,
	.no-js .ae-mnav__icon-minus {
		display: none;
	}

	.no-js .ae-mnav__toggle {
		cursor: default;
	}
}

.ae-mnav__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ae-mnav__item {
	border-bottom: 1px solid var(--ae-graphite);
}

.ae-mnav__link,
.ae-mnav__sublink {
	display: flex;
	align-items: center;
	width: 100%;
	letter-spacing: var(--ae-tracking-tight);
	text-transform: uppercase;
}

.ae-mnav__link {
	justify-content: space-between;
	height: 56px;
	padding: 0 20px;
	border: 0;
	background: transparent;
	color: var(--ae-white);
	font-size: 16px;
	font-weight: 400;
	text-align: left;
}

.ae-mnav__icon-minus,
.ae-mnav__toggle[aria-expanded="true"] .ae-mnav__icon-plus {
	display: none;
}

.ae-mnav__toggle[aria-expanded="true"] .ae-mnav__icon-minus {
	display: inline-flex;
}

.ae-mnav__sub {
	margin: 0;
	padding: 0;
	background: var(--ae-black);
	list-style: none;
}

.js .ae-mnav__sub:not(.is-open) {
	display: none;
}

.ae-mnav__sub li {
	border-top: 1px solid var(--ae-graphite);
}

.ae-mnav__sublink {
	height: 48px;
	padding: 0 20px 0 36px;
	color: var(--ae-fog);
	font-size: 15px;
}

.ae-mnav__link.is-current,
.ae-mnav__sublink.is-current {
	color: var(--ae-signal);
}

.ae-mnav__cta {
	padding: 16px 20px 20px;
}

/* Low-key link under the CTA for existing borrowers. */
.ae-mnav__login {
	display: block;
	margin-top: 16px;
	color: var(--ae-fog);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: var(--ae-tracking-tight);
	text-align: center;
	text-transform: uppercase;
}

.ae-mnav__login:hover {
	color: var(--ae-signal);
}

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

.ae-footer {
	position: relative;
	overflow: hidden;
	padding: var(--ae-section-pad) 0 44px;
	background: var(--ae-surface-footer);
	color: var(--ae-white);
}

.ae-footer__watermark {
	position: absolute;
	bottom: -4%;
	left: var(--ae-gutter);
	font-size: var(--ae-fs-watermark);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 0.03;
	pointer-events: none;
	user-select: none;
}

.ae-footer .ae-wrap {
	position: relative;
}

.ae-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: 44px;
	padding-bottom: 64px;
	border-bottom: 1px solid var(--ae-graphite);
}

@media (max-width: 1279px) {
	.ae-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}
}

@media (max-width: 640px) {
	.ae-footer__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}
}

.ae-footer__brand {
	max-width: 520px;
}

.ae-footer__intro {
	margin-top: 36px;
	color: var(--ae-fog);
}

.ae-footer__intro p + p {
	margin-top: 16px;
}

.ae-footer__label {
	margin-bottom: 24px;
	color: var(--ae-steel);
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
	text-transform: uppercase;
}

.ae-footer__links,
.ae-footer__contacts,
.ae-footer__legal {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ae-footer__links,
.ae-footer__contacts {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ae-footer__link,
.ae-footer__contact {
	color: var(--ae-white);
	font-size: 16px;
	letter-spacing: var(--ae-tracking-tight);
}

.ae-footer__link {
	text-transform: uppercase;
}

.ae-footer__link.is-muted {
	color: var(--ae-steel);
}

.ae-footer__contact.is-muted {
	color: var(--ae-fog);
	line-height: 24px;
}

.ae-footer__link.is-current {
	color: var(--ae-signal);
}

.ae-footer__link:hover,
.ae-footer__contact:hover,
.ae-footer__legal-link:hover {
	color: var(--ae-signal);
}

.ae-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 24px;
}

.ae-footer__copy {
	color: var(--ae-steel);
	font-size: 14px;
	line-height: 20px;
}

/* Equal Housing Opportunity mark and statement, between the copyright and the legal links. */
.ae-footer__eho {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--ae-steel);
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: var(--ae-tracking-tight);
	text-transform: uppercase;
}

.ae-footer__eho-mark {
	flex-shrink: 0;
}

.ae-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
}

.ae-footer__legal-link {
	color: var(--ae-white);
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: var(--ae-tracking-tight);
	text-transform: uppercase;
}

.ae-footer__legal-link.is-muted {
	color: var(--ae-steel);
}

/* Privacy banner: fixed bottom panel, so it never shifts the layout (CLS 0). */

.ae-consent {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 900;
	padding: 20px 0;
	border-top: 1px solid var(--ae-graphite);
	background: var(--ae-ink);
	color: var(--ae-white);
}

.ae-consent[hidden] {
	display: none;
}

.ae-consent__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 32px;
}

.ae-consent__text {
	flex: 1 1 480px;
	margin: 0;
	color: var(--ae-fog);
	font-size: 14px;
	line-height: 20px;
}

.ae-consent__text p {
	margin: 0;
}

.ae-consent__text .ae-consent__title {
	margin-bottom: 4px;
	color: var(--ae-white);
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
	text-transform: uppercase;
}

.ae-consent__inner[hidden] {
	display: none;
}

.ae-consent__choices-icon {
	flex: 0 0 auto;
}

/* Inline icon, so the footer label keeps the baseline of the neighbouring text links. */
.ae-footer__choices-icon {
	display: inline-block;
	margin-right: 8px;
	vertical-align: -3px;
}

.ae-consent__text a {
	color: var(--ae-white);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ae-consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.ae-consent__actions .ae-btn {
	height: auto;
	min-height: 40px;
	white-space: normal;
	text-align: center;
}

@media (max-width: 640px) {
	.ae-consent__actions,
	.ae-consent__actions .ae-btn {
		width: 100%;
	}
}

.ae-footer__choices {
	padding: 0;
	white-space: nowrap;
	border: 0;
	background: none;
	cursor: pointer;
}

.ae-footer__choices[hidden] {
	display: none;
}

/* Sticky call to action (Brokers page): bottom right on desktop, full width on phones. */
.ae-sticky-cta {
	position: fixed;
	right: var(--ae-gutter);
	bottom: 24px;
	z-index: 40;
	box-shadow: var(--ae-shadow-bar);
}

.ae-sticky-cta[hidden] {
	display: none;
}

/* The accent focus ring would vanish on the accent button. */
.ae-sticky-cta__btn:focus-visible {
	outline: 2px solid var(--ae-ink);
	outline-offset: 2px;
}

@media (max-width: 640px) {
	.ae-sticky-cta {
		right: 16px;
		bottom: 16px;
		left: 16px;
	}

	.ae-sticky-cta__btn {
		width: 100%;
	}
}