/* ==========================================================================
   Apollo Custom Manufacturing
   Shell: header, navigation, footers
   ========================================================================== */

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

body > header#topNav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--header-h);
	z-index: 100;
	background-color: var(--navy);
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding: 2rem var(--gutter) 0;
}

/* Utility strip pinned across the very top of the header */
div.utilityBar {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2rem;
	background-color: var(--navy-deep);
	color: #c7c8d6;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0 var(--gutter);
	font-size: 0.75rem;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
}

header#topNav figure {
	flex: 0 0 auto;
}

header#topNav figure img {
	max-height: 3.4rem;
	width: auto;
}

header#topNav div.tagLine {
	flex: 1 1 auto;
}

/* --- Primary navigation ----------------------------------------------- */

header#topNav nav > ul {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

header#topNav nav > ul > li {
	position: relative;
}

header#topNav nav > ul > li > a {
	display: block;
	padding: 0.6em 0.75em;
	font-family: var(--font-body);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--white);
	white-space: nowrap;
}

header#topNav nav > ul > li > a:hover,
header#topNav nav > ul > li.selected > a {
	color: var(--gold);
}

/* Gold underline on hover and for the current section */
header#topNav nav > ul > li > a::after {
	content: "";
	display: block;
	height: 2px;
	margin-top: 0.35em;
	background-color: transparent;
	transition: background-color 0.15s ease;
}

header#topNav nav > ul > li:hover > a::after,
header#topNav nav > ul > li.selected > a::after {
	background-color: var(--gold);
}

/* Dropdowns */
header#topNav nav ul.submenu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 15rem;
	background-color: var(--navy-deep);
	padding: 0.6rem 0;
	z-index: 120;
}

header#topNav nav > ul > li:hover ul.submenu {
	display: block;
}

header#topNav nav ul.submenu li a {
	display: block;
	padding: 0.5em 1.1em;
	font-size: 0.82rem;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	color: #c7c8d6;
	white-space: nowrap;
}

header#topNav nav ul.submenu li a:hover {
	color: var(--white);
	background-color: rgba(255, 255, 255, 0.06);
}

/* --- Header call to action -------------------------------------------- */

header#topNav div.cta {
	flex: 0 0 auto;
	display: flex;
	align-items: stretch;
}

header#topNav div.cta a.btn {
	padding: 0.7em 1.2em;
	font-size: 0.8rem;
}

header#topNav div.cta a.btn.phoneNumber {
	border-left-width: 1px;
	padding-inline: 0.9em;
}

header#topNav div.mobile-menu-button {
	display: none;
}

/* --- Header: mobile --------------------------------------------------- */

@media (max-width: 59.9rem) {

	body > header#topNav {
		gap: 0.75rem;
		padding-inline: 1rem;
	}

	header#topNav figure img {
		max-height: 2.6rem;
	}

	header#topNav div.mobile-menu-button {
		display: block;
		flex: 0 0 auto;
		order: 3;
		width: 2.75rem;
		height: 2.75rem;
		padding: 0.6rem;
		cursor: pointer;
	}

	header#topNav div.cta {
		order: 2;
		margin-left: auto;
	}

	header#topNav div.cta a.btn {
		padding: 0.65em 0.9em;
		font-size: 0.75rem;
	}

	/* Slide-in panel. JS only toggles .shown; movement is defined here. */
	header#topNav nav {
		position: fixed;
		top: var(--header-h);
		right: -100%;
		width: 100%;
		height: calc(100vh - var(--header-h));
		background-color: var(--navy-deep);
		overflow-y: auto;
		padding: 1.5rem;
		z-index: 500;
		transition: right 0.25s ease;
	}

	header#topNav nav.shown {
		right: 0;
	}

	header#topNav nav > ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	header#topNav nav > ul > li > a {
		font-size: 1.1rem;
		padding: 0.8em 0;
		color: var(--white);
	}

	header#topNav nav > ul > li > a::after {
		display: none;
	}

	header#topNav nav ul.submenu {
		display: block;
		position: static;
		min-width: 0;
		background: none;
		padding: 0 0 0.6rem 1rem;
		border-left: 2px solid rgba(255, 255, 255, 0.18);
	}

	header#topNav nav ul.submenu li a {
		padding: 0.4em 0;
		font-size: 0.9rem;
	}
}

/* --- Content offset --------------------------------------------------- */

/* The header is fixed, so the first block after it carries the offset. */
div#subHeader {
	margin-top: var(--header-h);
}

div#subHeader:empty {
	margin-top: 0;
}

div#subHeader:empty + div#mainContent {
	margin-top: var(--header-h);
}

div#mainContent {
	width: 100%;
	max-width: var(--shell);
	margin-inline: auto;
	padding-inline: var(--gutter);
	padding-bottom: 4rem;
}

/* Content container. Several templates close mainContent early to let a band
   run full width, then reopen a .wrapper for the content that follows. */
div.wrapper {
	width: 100%;
	max-width: var(--shell);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* --- Breadcrumbs ------------------------------------------------------ */

/* A pale wash of the header navy rather than the warm grey panel, so the
   bar reads as part of the header block. Deliberately stays light: most
   pages open with a dark hero directly below, and a dark breadcrumb would
   merge the navy header, the bar and the hero into one slab.

   Literal hexes because these are one tint family used only here, the same
   way p.noticeBar carries its own status colours. */
nav.breadcrumbs {
	background-color: #eef0f8;
	border-bottom: 1px solid #ced5ea;
	font-size: 0.78rem;
	padding: 0.8rem var(--gutter);
}

nav.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	max-width: var(--shell);
	margin-inline: auto;
}

nav.breadcrumbs li:not(:first-of-type)::before {
	content: "/";
	display: inline-block;
	padding: 0 0.5em;
	color: #8286ab;
}

/* Navy leaning grey. The usual --muted lands at 4.4 against this wash,
   just under the 4.5 it clears on white. */
nav.breadcrumbs a {
	color: #5a5c7d;
}

/* Gold is the site wide link hover, but it sits at 1.5 against a
   background this light and all but vanishes. Navy instead. */
nav.breadcrumbs a:hover {
	color: var(--navy);
}

nav.breadcrumbs li:last-of-type a {
	color: var(--navy);
	font-weight: 600;
}

/* --- Shared band: image left, navy panel right ------------------------ */

div.categoryHeader {
	display: flex;
	flex-wrap: wrap;
	width: 100vw;
	position: relative;
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	margin-block: 4rem;
	min-height: 22rem;
}

/* Without a photo the panel runs the full width instead of leaving a gap */
div.categoryHeader.noImage {
	min-height: 0;
}

div.categoryHeader.noImage div.categoryHeaderTextWrapper {
	flex: 1 1 100%;
}

div.categoryHeader.noImage div.categoryHeaderText {
	align-items: center;
	text-align: center;
	padding-block: 3.5rem;
}

div.categoryHeader.noImage div.categoryHeaderText h3,
div.categoryHeader.noImage div.categoryDescription {
	max-width: 46rem;
}

div.categoryHeaderImageWrapper {
	flex: 1 1 50%;
	min-height: 18rem;
}

div.categoryHeaderImage {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

div.categoryHeaderTextWrapper {
	flex: 1 1 50%;
	display: flex;
}

div.categoryHeaderText {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	padding: 3rem;
	background-color: var(--navy);
	color: var(--white);
}

div.categoryHeaderText h3 {
	color: var(--white);
	margin-bottom: 0.8rem;
}

div.categoryDescription {
	color: #c7c8d6;
	font-size: 0.95rem;
	line-height: 1.7;
}

div.categoryDescription a:not(.btn) {
	color: var(--gold);
	text-decoration: underline;
}

div.categoryDescription a.btn {
	margin-top: 1.2rem;
}

@media (max-width: 59.9rem) {
	div.categoryHeader {
		margin-block: 2.5rem;
	}

	div.categoryHeaderImageWrapper,
	div.categoryHeaderTextWrapper {
		flex: 1 1 100%;
	}

	div.categoryHeaderText {
		padding: 2rem 1.5rem;
	}
}

/* --- Shared: video band ----------------------------------------------- */

div.videoBand {
	width: 100vw;
	position: relative;
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	background-color: var(--navy-deep);
	padding: 3rem var(--gutter);
}

div.videoWrapper {
	position: relative;
	width: 100%;
	max-width: 56rem;
	margin-inline: auto;
	aspect-ratio: 16 / 9;
}

div.videoWrapper iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* --- Footer: client logos --------------------------------------------- */

footer#otherSites {
	background-color: var(--navy);
	color: var(--white);
	padding: 3.5rem var(--gutter);
	text-align: center;
}

footer#otherSites h3 {
	color: var(--white);
	font-size: 1rem;
	letter-spacing: 0.14em;
	margin-bottom: 2rem;
}

footer#otherSites div#corporateClients {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 2.5rem;
	max-width: var(--shell);
	margin-inline: auto;
}

footer#otherSites div.client {
	width: 6rem;
	height: 3.5rem;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	filter: brightness(0) invert(1);
	opacity: 0.75;
	transition: opacity 0.15s ease;
}

footer#otherSites a:hover div.client {
	opacity: 1;
}

/* --- Footer: learn more ----------------------------------------------- */

footer#learnMore {
	display: block;
	color: var(--white);
	text-align: center;
}

footer#learnMore div.learnMoreBG {
	background-image: url('/images/optimized/1635125432-dscf3897.webp');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

footer#learnMore div.learnMoreOverlay {
	background-color: rgba(17, 18, 37, 0.82);
	padding: 4.5rem var(--gutter);
}

footer#learnMore div.wrapper {
	max-width: 46rem;
	margin-inline: auto;
}

footer#learnMore h2 {
	color: var(--white);
	margin-bottom: 0.8rem;
}

footer#learnMore p#lmText {
	font-family: var(--font-display);
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--white);
	margin-bottom: 1.5rem;
}

footer#learnMore p#lmText a {
	color: var(--gold);
}

footer#learnMore p:last-of-type {
	margin-top: 2rem;
	font-size: 0.8rem;
	color: #9a9cb2;
	line-height: 1.8;
}

/* --- Footer: main ----------------------------------------------------- */

footer#expandedFooter {
	background-color: var(--navy);
	color: #c7c8d6;
	padding: 3.5rem var(--gutter) 1.5rem;
	font-size: 0.875rem;
}

footer#expandedFooter div.footerPanel {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 2.5rem;
	max-width: var(--shell);
	margin-inline: auto;
}

/* Brand column: wordmark plus what we build and where we ship */
footer#expandedFooter div.brand span.footerWordmark {
	display: block;
	font-family: var(--font-display);
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--white);
}

footer#expandedFooter div.brand p {
	max-width: 18rem;
	margin: 0.9rem 0 0;
	font-size: 0.8rem;
	line-height: 1.7;
	color: #a9abc0;
}

footer#expandedFooter h4 {
	color: var(--gold);
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	margin-bottom: 1.1rem;
}

footer#expandedFooter a {
	color: #c7c8d6;
}

footer#expandedFooter a:hover {
	color: var(--white);
}

footer#expandedFooter div.links ul,
footer#expandedFooter div.socialIcons ul {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

footer#expandedFooter div.contact p {
	margin-bottom: 0.9rem;
}

footer#expandedFooter div.absoluteBottom {
	grid-column: 1 / -1;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	padding-top: 1.4rem;
	margin-top: 1.25rem;
	font-size: 0.75rem;
	color: #8688a0;
}

footer#expandedFooter div.absoluteBottom a {
	color: #8688a0;
}

footer#expandedFooter div.absoluteBottom a:hover {
	color: var(--white);
}

@media (max-width: 74rem) {
	footer#expandedFooter div.footerPanel {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	footer#expandedFooter div.brand {
		grid-column: 1 / -1;
	}

	footer#expandedFooter div.brand p {
		max-width: 34rem;
	}
}

@media (max-width: 59.9rem) {
	footer#expandedFooter div.footerPanel {
		grid-template-columns: 1fr;
		gap: 2rem;
		text-align: center;
	}

	footer#expandedFooter div.brand p {
		margin-inline: auto;
	}

	footer#expandedFooter div.absoluteBottom {
		text-align: center;
	}
}