/* ==========================================================================
   Apollo Custom Manufacturing
   Resources: index, evergreen sections and articles
   ========================================================================== */

/* --- Evergreen page hero ------------------------------------------------ */

.evergreenHero h1 {
	max-width: 22ch;
	margin-bottom: 0.9rem;
}

.evergreenHero p {
	max-width: 62ch;
	margin-bottom: 0;
	font-size: 1rem;
	line-height: 1.75;
	color: #c7c8d6;
}

/* --- Shared body wrapper ------------------------------------------------ */
/* Every evergreen page puts its content in this, so the gap under the hero
   and the rhythm between groups is the same on all of them. Not tied to a
   tag, because the CMS renders Our Story out of article elements. */

.resourceBody {
	margin-block: 3rem;
}

/* --- Content group ------------------------------------------------------ */

.resourceSection,
.evergreenGroup {
	margin-bottom: 3.5rem;
}

.resourceSection:last-child,
.evergreenGroup:last-child {
	margin-bottom: 0;
}

.resourceSection .sectionHead,
.evergreenGroup .sectionHead {
	padding-bottom: 0.8rem;
	margin-bottom: 1.5rem;
	border-bottom: 2px solid var(--navy);
}

.resourceSection .sectionHead > div,
.evergreenGroup .sectionHead > div {
	display: block;
}

/* --- File and document list --------------------------------------------- */

div.fileList {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--line);
}

a.fileItem {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding: 1rem 0.5rem;
	border-bottom: 1px solid var(--line);
	color: var(--body);
	transition: background-color 0.15s ease;
}

a.fileItem:hover {
	background-color: var(--panel);
	color: var(--body);
}

span.fileMeta {
	flex: 0 0 auto;
	width: 3.5rem;
	padding: 0.3em 0;
	text-align: center;
	background-color: var(--navy);
	color: var(--white);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

span.fileText {
	flex: 1 1 auto;
	min-width: 0;
}

span.fileTitle {
	display: block;
	flex: 1 1 auto;
	font-size: 0.98rem;
	font-weight: 700;
	color: var(--ink);
}

span.fileDesc {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.85rem;
	line-height: 1.55;
	color: var(--muted);
}

span.fileAction {
	flex: 0 0 auto;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--navy);
	white-space: nowrap;
}

a.fileItem:hover span.fileAction {
	color: var(--gold);
}

@media (max-width: 47rem) {
	a.fileItem {
		flex-wrap: wrap;
		gap: 0.6rem 1rem;
	}

	span.fileText {
		flex: 1 1 100%;
		order: 3;
	}
}

/* --- Press mentions ------------------------------------------------------ */

div.pressGrid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
}

a.pressItem {
	display: block;
	padding: 0.9rem 1rem;
	background-color: var(--white);
	border: 1px solid var(--line);
	border-left: 3px solid var(--gold);
	color: var(--body);
}

a.pressItem:hover {
	color: var(--navy);
}

span.pressPublisher {
	display: block;
	margin-bottom: 0.3rem;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--faint);
}

span.pressTitle {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.45;
	color: var(--ink);
}

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

@media (max-width: 47rem) {
	div.pressGrid {
		grid-template-columns: 1fr;
	}
}

/* --- Map ----------------------------------------------------------------- */
/* The one thing the evergreen pages had no equivalent for */

div.mapFrame {
	border: 1px solid var(--line);
	line-height: 0;
}

div.mapFrame iframe {
	display: block;
	width: 100%;
	height: 26rem;
	border: 0;
}

@media (max-width: 59.9rem) {
	div.mapFrame iframe {
		height: 18rem;
	}
}

/* --- Long form body ------------------------------------------------------ */

.evergreenBody {
	max-width: 62ch;
	margin-block: 2.5rem;
	font-size: 0.98rem;
	line-height: 1.8;
	color: var(--body);
}

.evergreenBody h2,
.evergreenBody h3,
.evergreenBody h4 {
	margin-top: 2rem;
	margin-bottom: 0.6rem;
}

.evergreenBody h2:first-child,
.evergreenBody h3:first-child {
	margin-top: 0;
}

.evergreenBody p {
	margin-bottom: 1.1em;
}

.evergreenBody ul,
.evergreenBody ol {
	list-style: disc;
	padding-left: 1.3rem;
	margin-bottom: 1.1em;
}

.evergreenBody ol {
	list-style: decimal;
}

.evergreenBody li {
	margin-bottom: 0.4rem;
}

.evergreenBody a {
	text-decoration: underline;
}

/* The CMS emits a flat list of articles rather than groups nested in a
   resourceBody, so a CMS group carries that spacing itself. 3rem top matches
   the gap under a hero, 3.5rem matches the gap between groups. */
.evergreenGroup.evergreenBody {
	margin-block: 3rem 3.5rem;
}

/* A group whose heading is written straight into the CMS, as Our Story is,
   gets the same treatment as a template built sectionHead. Sits after the
   body rules above so it wins on the shared headings. */
.evergreenGroup > h2,
.evergreenGroup > h3 {
	padding-bottom: 0.8rem;
	margin-top: 0;
	margin-bottom: 1.5rem;
	border-bottom: 2px solid var(--navy);
}

/* Intro copy above the questions */
.evergreenBody.faqIntro {
	margin-top: 0;
}

/* The accordion itself comes from default.css, this only widens it */
div.termsList.faqList {
	max-width: 62rem;
}

/* A resource_content row with no question in it reads as supporting copy */
div.faqAside {
	padding: 1.25rem 1.5rem;
	margin-block: 1.5rem;
	background-color: var(--panel);
	border-left: 3px solid var(--gold);
	font-size: 0.92rem;
	line-height: 1.7;
	color: var(--body);
}

div.faqAside p:last-child {
	margin-bottom: 0;
}

div.faqCta {
	text-align: center;
}

div.faqCta h2 {
	margin-bottom: 0.6rem;
}

div.faqCta p {
	max-width: 46rem;
	margin-inline: auto;
	margin-bottom: 1.5rem;
	color: var(--muted);
}

/* --- Empty states -------------------------------------------------------- */

p.emptyState {
	margin-block: 3rem;
	padding: 1.5rem;
	background-color: var(--panel);
	border: 1px solid var(--line);
	text-align: center;
	color: var(--muted);
}

/* --- Article page -------------------------------------------------------- */

/* The article's own photo carries the hero, darkened enough that the
   heading still reads over whatever the photo happens to be. */
section.articleHero {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding-block: 5rem;
}

section.articleHero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(17, 18, 37, 0.94) 0%, rgba(17, 18, 37, 0.82) 55%, rgba(17, 18, 37, 0.6) 100%);
}

section.articleHero .bandInner {
	position: relative;
}

/* The eyebrow is a link back to the category here, so it needs a hover */
section.articleHero a.sectionEyebrow:hover {
	color: var(--white);
}

p.articleMeta {
	margin-top: 1rem;
	margin-bottom: 0;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #a9abc0;
}

/* Intro copy sits a touch larger than the body that follows */
div.articleLead {
	margin-top: 0;
	font-size: 1.06rem;
}

/* --- Contents ------------------------------------------------------------ */
/* Only rendered on articles with three or more titled sections */

nav.articleToc {
	max-width: 62ch;
	margin-block: 2.5rem;
	padding: 1.25rem 1.5rem;
	background-color: var(--panel);
	border-left: 3px solid var(--navy);
}

span.articleTocLabel {
	display: block;
	margin-bottom: 0.7rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--faint);
}

nav.articleToc ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: toc;
}

nav.articleToc li {
	counter-increment: toc;
	padding: 0.3rem 0 0.3rem 2rem;
	position: relative;
	font-size: 0.92rem;
	line-height: 1.5;
}

nav.articleToc li::before {
	content: counter(toc);
	position: absolute;
	left: 0;
	top: 0.3rem;
	width: 1.35rem;
	text-align: center;
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--navy);
	background-color: var(--white);
	border: 1px solid var(--line);
	line-height: 1.35rem;
}

nav.articleToc a {
	font-weight: 600;
}

/* --- Sections ------------------------------------------------------------ */

section.articleSection {
	margin-bottom: 2.5rem;
	/* The header is fixed, so a contents jump needs clearance */
	scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

section.articleSection:last-child {
	margin-bottom: 0;
}

section.articleSection > h2 {
	max-width: 34ch;
	margin-bottom: 1rem;
	padding-bottom: 0.7rem;
	border-bottom: 2px solid var(--navy);
}

/* A section with no heading continues the one above it */
section.articleSectionPlain {
	margin-top: -1rem;
}

figure.articleFigure {
	margin-bottom: 1.5rem;
	background-color: var(--panel);
}

figure.articleFigure img {
	width: 100%;
	height: auto;
}

/* The one centre styled row in the content, used as a pull quote */
div.articleCallout {
	max-width: 52rem;
	margin-inline: auto;
	padding: 1.75rem 2rem;
	background-color: var(--navy-deep);
	color: #dcdde8;
	text-align: center;
	font-size: 1.02rem;
	line-height: 1.7;
}

div.articleCallout p:last-child {
	margin-bottom: 0;
}

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

/* --- Tables inside article copy ------------------------------------------ */
/* Written straight into the CMS with no classes, so this has to key off
   the element. Scrolls rather than squashing on a narrow screen. */

/* Prose wants 62ch, a three column table does not. Widen only the bodies
   that actually contain one. Where :has() is unsupported the table just
   keeps the prose measure and still reads, so this degrades quietly. */
div.evergreenBody:has(table) {
	max-width: 54rem;
}

div.evergreenBody table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.5rem;
	font-size: 0.9rem;
}

div.evergreenBody table th,
div.evergreenBody table td {
	padding: 0.6rem 0.8rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--line);
}

div.evergreenBody table th {
	font-family: var(--font-body);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--faint);
	border-bottom: 2px solid var(--navy);
}

/* Rows of prices read as data, so the last column right aligns */
div.evergreenBody table td:last-child {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
	font-weight: 600;
}

/* A row whose only cell is bold is a sub heading in these tables */
div.evergreenBody table tr td strong {
	color: var(--navy);
}

div.evergreenBody table tr:hover td {
	background-color: var(--panel);
}

div.evergreenBody img {
	height: auto;
	margin-block: 1rem;
}

div.evergreenBody iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	margin-block: 1rem;
	border: 0;
}

@media (max-width: 47rem) {

	section.articleHero {
		padding-block: 3.5rem;
	}

	/* Long tables get their own scroller rather than squashing the page */
	div.evergreenBody table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}

}

/* Category quick links on the listing pages */
nav.categoryNav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block: 1.5rem;
}

nav.categoryNav a {
	display: inline-block;
	padding: 0.55em 1.1em;
	border: 1px solid var(--line);
	background-color: var(--white);
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--body);
	white-space: nowrap;
}

nav.categoryNav a:hover,
nav.categoryNav li.selected a {
	background-color: var(--navy);
	border-color: var(--navy);
	color: var(--white);
}