/**
 * Shared inner-page header and title banner.
 *
 * The homepage is intentionally excluded by the inner-page-standard body class.
 */

:root {
	/* Change this single value to update every inner-page banner image. */
	--inner-page-hero-image: url("https://dev.orbitwebx.com/wp-content/uploads/2026/04/About-us.webp");
}

.inner-page-standard .site-header:not(.is-sticky) {
	background: transparent;
	border-bottom-color: rgba(255, 255, 255, .18);
	box-shadow: none;
}

.inner-page-standard .site-header:not(.is-sticky) .header-nav a,
.inner-page-standard .site-header:not(.is-sticky) .header-phone,
.inner-page-standard .site-header:not(.is-sticky) .header-search {
	color: #fff;
}

.inner-page-standard .site-header:not(.is-sticky) .header-phone,
.inner-page-standard .site-header:not(.is-sticky) .header-search,
.inner-page-standard .site-header:not(.is-sticky) .menu-toggle {
	border-color: rgba(255, 255, 255, .38);
}

.inner-page-standard .site-header:not(.is-sticky) .menu-toggle span {
	background: #fff;
}

.inner-page-standard .site-header:not(.is-sticky) .header-phone {
	display: none;
}

.inner-page-standard :is(
	.about-page-banner,
	.application-hero,
	.faq-hero,
	.contact-hero,
	.scenarios-hero,
	.privacy-hero,
	.terms-hero,
	.accessibility-hero,
	.licensing-hero,
	.mortgage-hero,
	.loan-program-hero,
	.blog-hero,
	.testimonials-hero,
	.search-page-hero
) {
	min-height: 520px;
	display: flex;
	position: relative;
	align-items: flex-end;
	overflow: hidden;
	padding: 185px 0 82px;
	background:
		linear-gradient(90deg, rgba(3, 27, 28, .91), rgba(3, 38, 39, .69)),
		var(--inner-page-hero-image) center 42%/cover no-repeat;
	color: #fff;
}

.inner-page-standard :is(
	.about-page-banner,
	.application-hero,
	.faq-hero,
	.contact-hero,
	.scenarios-hero,
	.privacy-hero,
	.terms-hero,
	.accessibility-hero,
	.licensing-hero,
	.mortgage-hero,
	.loan-program-hero,
	.blog-hero,
	.testimonials-hero,
	.search-page-hero
)::before {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(180deg, rgba(3, 33, 33, .06), rgba(3, 33, 33, .28));
	content: "";
	pointer-events: none;
}

.inner-page-standard :is(
	.about-page-banner,
	.application-hero,
	.faq-hero,
	.contact-hero,
	.scenarios-hero,
	.privacy-hero,
	.terms-hero,
	.accessibility-hero,
	.licensing-hero,
	.mortgage-hero,
	.loan-program-hero,
	.blog-hero,
	.testimonials-hero,
	.search-page-hero
)::after {
	width: 420px;
	height: 420px;
	position: absolute;
	right: -180px;
	bottom: -285px;
	z-index: 0;
	border: 64px solid rgba(251, 177, 47, .09);
	border-radius: 50%;
	content: "";
	pointer-events: none;
}

.inner-page-standard :is(
	.about-page-banner,
	.application-hero,
	.faq-hero,
	.contact-hero,
	.scenarios-hero,
	.privacy-hero,
	.terms-hero,
	.accessibility-hero,
	.licensing-hero,
	.mortgage-hero,
	.loan-program-hero,
	.blog-hero,
	.testimonials-hero,
	.search-page-hero
) > .container {
	width: min(calc(100% - 48px), 1200px);
	position: relative;
	z-index: 1;
	margin-right: auto;
	margin-left: auto;
}

.inner-page-standard :is(
	.about-banner-content,
	.application-hero-content,
	.faq-hero-content,
	.contact-hero-content,
	.scenarios-hero-content,
	.privacy-hero-content,
	.terms-hero-content,
	.accessibility-hero-content,
	.licensing-hero-content,
	.mortgage-hero-content,
	.loan-program-hero-content,
	.blog-hero-content,
	.blog-single-heading,
	.testimonials-hero-content,
	.search-page-hero > .container
) {
	max-width: 1000px;
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	padding: 0;
	border: 0;
}

.inner-page-standard :is(
	.about-page-banner,
	.application-hero,
	.faq-hero,
	.contact-hero,
	.scenarios-hero,
	.privacy-hero,
	.terms-hero,
	.accessibility-hero,
	.licensing-hero,
	.mortgage-hero,
	.loan-program-hero,
	.blog-hero,
	.testimonials-hero,
	.search-page-hero
) h1 {
	order: 1;
	max-width: 1000px;
	margin: 0 0 24px;
	color: #fff;
	font-size: clamp(2.8rem, 4vw, 3.75rem);
	font-weight: 750;
	line-height: 1.08;
	letter-spacing: -.035em;
	text-wrap: balance;
}

.inner-page-standard :is(
	.about-breadcrumb,
	.application-breadcrumb,
	.faq-breadcrumb,
	.contact-breadcrumb,
	.scenarios-breadcrumb,
	.privacy-breadcrumb,
	.terms-breadcrumb,
	.accessibility-breadcrumb,
	.licensing-breadcrumb,
	.mortgage-breadcrumb,
	.loan-program-breadcrumb,
	.blog-breadcrumb,
	.testimonials-breadcrumb,
	.search-page-breadcrumb
) {
	order: 2;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	color: rgba(255, 255, 255, .8);
	font-size: .94rem;
	font-weight: 650;
}

.inner-page-standard :is(
	.about-breadcrumb,
	.application-breadcrumb,
	.faq-breadcrumb,
	.contact-breadcrumb,
	.scenarios-breadcrumb,
	.privacy-breadcrumb,
	.terms-breadcrumb,
	.accessibility-breadcrumb,
	.licensing-breadcrumb,
	.mortgage-breadcrumb,
	.loan-program-breadcrumb,
	.blog-breadcrumb,
	.testimonials-breadcrumb,
	.search-page-breadcrumb
) a {
	color: #fff;
	font-weight: 750;
}

.inner-page-standard :is(
	.about-breadcrumb,
	.application-breadcrumb,
	.faq-breadcrumb,
	.contact-breadcrumb,
	.scenarios-breadcrumb,
	.privacy-breadcrumb,
	.terms-breadcrumb,
	.accessibility-breadcrumb,
	.licensing-breadcrumb,
	.mortgage-breadcrumb,
	.loan-program-breadcrumb,
	.blog-breadcrumb,
	.testimonials-breadcrumb,
	.search-page-breadcrumb
) a:hover {
	color: #fbb12f;
}

/* One breadcrumb pattern: Home > parent section > current page. */
.inner-page-standard :is(
	.about-page-banner,
	.application-hero,
	.faq-hero,
	.contact-hero,
	.scenarios-hero,
	.privacy-hero,
	.terms-hero,
	.accessibility-hero,
	.licensing-hero,
	.mortgage-hero,
	.loan-program-hero,
	.blog-hero,
	.testimonials-hero,
	.search-page-hero
) nav[class*="breadcrumb"] > [aria-hidden="true"] {
	display: none;
}

.inner-page-standard :is(
	.about-page-banner,
	.application-hero,
	.faq-hero,
	.contact-hero,
	.scenarios-hero,
	.privacy-hero,
	.terms-hero,
	.accessibility-hero,
	.licensing-hero,
	.mortgage-hero,
	.loan-program-hero,
	.blog-hero,
	.testimonials-hero,
	.search-page-hero
) nav[class*="breadcrumb"] > :not([aria-hidden="true"]):not(:first-child)::before {
	margin-right: 10px;
	color: #fbb12f;
	content: "\f054";
	font-family: "Font Awesome 6 Free";
	font-size: .62rem;
	font-weight: 900;
	line-height: 1;
}

.inner-page-standard nav[class*="breadcrumb"] > [aria-current="page"] {
	color: rgba(255, 255, 255, .8);
}

/* Keep every inner title banner limited to title and breadcrumb. */
.inner-page-standard :is(
	.application-kicker,
	.application-hero-kicker,
	.faq-kicker,
	.faq-hero-kicker,
	.contact-kicker,
	.contact-hero-kicker,
	.scenarios-kicker,
	.scenarios-hero-kicker,
	.privacy-kicker,
	.terms-kicker,
	.accessibility-kicker,
	.licensing-kicker,
	.mortgage-hero-kicker,
	.loan-program-kicker,
	.blog-hero-kicker,
	.blog-hero-label,
	.mortgage-hero-summary,
	.loan-program-summary,
	.blog-hero-summary,
	.blog-category-pill,
	.blog-single-meta,
	.scenarios-hero-facts,
	.testimonials-kicker,
	.search-page-label,
	.search-page-summary
) {
	display: none;
}

.inner-page-standard .search-page-hero > .container > h1 {
	order: 1;
}

.inner-page-standard .search-page-hero > .container > .search-page-breadcrumb {
	order: 2;
	margin: 0;
}

.inner-page-standard .scenarios-hero-content > p:not(.scenarios-kicker) {
	display: none;
}

@media (max-width: 1100px) {
	.inner-page-standard .site-header:not(.is-sticky) .container-wide {
		width: calc(100% - 48px);
	}
}

@media (max-width: 1199px) {
	/* The header stays transparent, while the white responsive drawer remains readable. */
	.inner-page-standard .site-header:not(.is-sticky) .header-nav,
	.inner-page-standard .site-header.is-sticky .header-nav {
		background: #fff;
	}

	.inner-page-standard .site-header:not(.is-sticky) .header-nav a,
	.inner-page-standard .site-header.is-sticky .header-nav a,
	.inner-page-standard .site-header:not(.is-sticky) .header-nav .sub-menu a {
		color: #163f40;
	}

	.inner-page-standard .site-header:not(.is-sticky) .header-nav a:hover,
	.inner-page-standard .site-header:not(.is-sticky) .header-nav .current-menu-item > a,
	.inner-page-standard .site-header:not(.is-sticky) .header-nav .current-menu-ancestor > a {
		color: #b76d00;
	}

	.inner-page-standard .site-header:not(.is-sticky) .menu-toggle.is-open span {
		background: #163f40;
	}
}

@media (max-width: 1380px) and (min-width: 1101px) {
	.inner-page-standard .site-header:not(.is-sticky) .header-inner {
		gap: 24px;
	}

	.inner-page-standard .site-header:not(.is-sticky) .header-nav ul {
		gap: clamp(18px, 2vw, 30px);
	}

	.inner-page-standard .site-header:not(.is-sticky) .header-apply {
		padding-right: 22px;
		padding-left: 22px;
	}
}

@media (max-width: 767px) {
	.inner-page-standard :is(
		.about-page-banner,
		.application-hero,
		.faq-hero,
		.contact-hero,
		.scenarios-hero,
		.privacy-hero,
		.terms-hero,
		.accessibility-hero,
		.licensing-hero,
		.mortgage-hero,
		.loan-program-hero,
		.blog-hero,
		.testimonials-hero,
		.search-page-hero
	) {
		min-height: 390px;
		padding: 135px 0 58px;
		background-position: 58% center;
	}

	.inner-page-standard :is(
		.about-page-banner,
		.application-hero,
		.faq-hero,
		.contact-hero,
		.scenarios-hero,
		.privacy-hero,
		.terms-hero,
		.accessibility-hero,
		.licensing-hero,
		.mortgage-hero,
		.loan-program-hero,
		.blog-hero,
		.testimonials-hero,
		.search-page-hero
	) h1 {
		margin-bottom: 18px;
		font-size: clamp(2.25rem, 10vw, 3.1rem);
	}

	.inner-page-standard .site-header:not(.is-sticky) .container-wide {
		width: calc(100% - 32px);
	}

	.inner-page-standard :is(
		.about-page-banner,
		.application-hero,
		.faq-hero,
		.contact-hero,
		.scenarios-hero,
		.privacy-hero,
		.terms-hero,
		.accessibility-hero,
		.licensing-hero,
		.mortgage-hero,
		.loan-program-hero,
		.blog-hero,
		.testimonials-hero,
		.search-page-hero
	) > .container {
		width: min(calc(100% - 32px), 1200px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.inner-page-standard .site-header {
		transition: none;
	}
}