/* AECA -- editorial views
====================================================================================================

Everything a post, a page, an archive or a search result needs in order to look designed. Loaded
last, after aeca-custom.css, and namespaced under `.aeca-editorial*` so it cannot reach the
hand-built top-level pages, the sub-pages (`.aeca-sub`) or contact (`.aeca-page`).

Why this file exists at all: these views render whatever an editor typed into WordPress. Every other
page on this site is hand-authored markup with its own classes, so it can be styled shape by shape.
Here there are no classes to hook -- just h2, p, ul, blockquote, table, figure -- and the entire
design has to come from element selectors inside one wrapper. That is a different job from the rest
of the CSS and it earns its own file.

Contents

	1. Tokens
	2. Hero additions (breadcrumb, meta line, search field)
	3. Lead image
	4. Article body -- the measure, and every element the editor can emit
	5. Article footer -- tags, share
	6. Previous / next
	7. Related posts
	8. Archive and search additions

==================================================================================================== */


/* 1. Tokens
----------------------------------------------------------------------------------------------------

The article body is the one place on the site where somebody reads several hundred words in a row,
and the site-wide on-light colour is AECA blue (`--aeca-on-light: var(--aeca-blue)` in
aeca-custom.css). Blue is right for a headline and for a card's two lines of summary. It is not
right for a full article: at 17px over several screens it vibrates, and it takes emphasis away from
the headings, which are the same colour.

So running text here is the slate the cards already use for their body copy (#405266), and blue is
kept for the things that should stand out -- headings, links, pull quotes. Nothing else on the site
changes; the override is scoped to `.aeca-editorial-body` and the blocks around it. */

:root {
	--aeca-ed-ink: #405266;          /* running text */
	--aeca-ed-ink-strong: #22303d;   /* bold, table headers */
	--aeca-ed-blue: #024da1;
	--aeca-ed-blue-deep: #012d61;
	--aeca-ed-cyan: #16adee;
	--aeca-ed-line: #dce7ef;
	--aeca-ed-wash: #f1f6fa;
	--aeca-ed-measure: 43rem;        /* ~72 characters at the body size below */
}


/* 2. Hero additions
----------------------------------------------------------------------------------------------------

`.aeca-page-hero` supplies the gradient band, the ring motif, the h1 and the lead. Only the three
pieces that are new to editorial views are declared here. */

.aeca-editorial-hero .container {
	max-width: 1080px;
}

.aeca-editorial-hero__crumbs {
	margin-bottom: 1.35rem;
}

.aeca-editorial-hero__crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 .55rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .82rem;
	line-height: 1.5;
}

.aeca-editorial-hero__crumbs li + li::before {
	content: "/";
	margin-right: .55rem;
	color: rgba(255, 255, 255, .45);
}

.aeca-editorial-hero__crumbs a {
	color: rgba(255, 255, 255, .78);
	text-decoration: none;
}

.aeca-editorial-hero__crumbs a:hover,
.aeca-editorial-hero__crumbs a:focus-visible {
	color: #fff;
	text-decoration: underline;
}

/* The last step is the headline, and a headline can be sixty characters long. Clipping it keeps the
   trail to one line at any width instead of letting it wrap into a paragraph. */
.aeca-editorial-hero__crumbs li[aria-current] {
	overflow: hidden;
	max-width: min(28ch, 100%);
	color: rgba(255, 255, 255, .55);
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Date, author, reading time. Sits on a hairline so it reads as an attribution block rather than as
   a third line of the standfirst. */
.aeca-editorial-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .1rem .7rem;
	max-width: 750px;
	margin: 1.6rem 0 0;
	padding-top: 1.2rem;
	border-top: 1px solid rgba(255, 255, 255, .22);
	color: rgba(255, 255, 255, .8);
	font-size: .93rem;
	letter-spacing: .01em;
}

.aeca-editorial-hero__meta span[aria-hidden] {
	color: rgba(255, 255, 255, .45);
}

.aeca-editorial-hero__form {
	max-width: 620px;
	margin-top: 1.9rem;
}

.aeca-editorial-hero__form .aeca-search-form {
	display: flex;
	flex-wrap: nowrap;
	gap: .6rem;
}

/* `width: auto` matters: Bootstrap's .form-control is width:100%, and with `flex-basis: auto` that
   width becomes the basis, so the field claims the whole row and pushes the button onto a second
   line. Sizing from the basis instead keeps field and button on one row. */
.aeca-editorial-hero__form .form-control {
	min-width: 0;
	width: auto;
	flex: 1 1 12rem;
	padding: .8rem 1.1rem;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 0;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	font-size: 1rem;
}

.aeca-editorial-hero__form .form-control::placeholder {
	color: rgba(255, 255, 255, .6);
}

.aeca-editorial-hero__form .form-control:focus {
	border-color: #fff;
	background: rgba(255, 255, 255, .18);
	color: #fff;
	box-shadow: none;
	outline: none;
}

.aeca-editorial-hero__form .btn {
	flex: 0 0 auto;
}


/* 3. Lead image
----------------------------------------------------------------------------------------------------

Pulled up into the bottom of the hero so the band and the picture read as one opening. The overlap
is a negative margin on the wrapper with matching bottom padding on the section that follows, rather
than absolute positioning, so the image can be any height and nothing below it has to be nudged.

A post with no featured image gets `--flush` on the body wrapper instead, which restores ordinary
top padding. Both cases are one rule apart, which is what stops the two from drifting. */

.aeca-editorial-lead-media {
	position: relative;
	z-index: 2;
	margin-top: clamp(-96px, -7vw, -48px);
}

.aeca-editorial-lead-media .container {
	max-width: 1080px;
}

.aeca-editorial-lead-media figure {
	margin: 0;
}

.aeca-editorial-lead-media img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 620px;
	object-fit: cover;
	box-shadow: 0 26px 60px rgba(1, 45, 97, .22);
}

.aeca-editorial-lead-media figcaption {
	margin-top: .85rem;
	color: #6b7f92;
	font-size: .88rem;
	line-height: 1.55;
}

.aeca-editorial-main {
	padding: clamp(46px, 6vw, 78px) 0 clamp(52px, 7vw, 90px);
	background: #fff;
}

.aeca-editorial-main--flush {
	padding-top: clamp(52px, 7vw, 92px);
}

.aeca-editorial-main > .container {
	max-width: 1080px;
}


/* 4. Article body
----------------------------------------------------------------------------------------------------

The measure comes first because it is the whole reason this section works. Editor output was
previously running the full width of a `col-lg-8`, which is around 100 characters at laptop width --
long enough that the eye loses the line it is on when it returns to the left edge. 43rem lands at
roughly 72 characters, which is the range long-form text is comfortable in.

The measure is set against the left edge of the container, not centred in it. Centred was the first
attempt and it was visibly wrong: the breadcrumb, the headline, the standfirst and the lead image
all start at the container's left edge, and a centred text block starts 196px further in, so the
left rail broke exactly where the reading starts. Left-aligned, every element on the page hangs off
one line down the whole scroll. */

.aeca-editorial-body {
	max-width: var(--aeca-ed-measure);
	color: var(--aeca-ed-ink);
	font-size: 1.075rem;
	line-height: 1.75;
	overflow-wrap: break-word;
}

/* The override that matters. `.bloc:not(.d-bloc) :is(h1,...,p,li,...)` in aeca-custom.css paints
   every light-background element AECA blue; these views are not inside a `.bloc`, but the body,
   card and default colours still need pinning or the editor's output inherits from wherever it
   happens to sit. */
.aeca-editorial-body p,
.aeca-editorial-body li,
.aeca-editorial-body dd,
.aeca-editorial-body dt,
.aeca-editorial-body td,
.aeca-editorial-body th,
.aeca-editorial-body figcaption,
.aeca-editorial-body address {
	color: var(--aeca-ed-ink);
}

.aeca-editorial-body > * + * {
	margin-top: 1.35em;
}

/* The opening paragraph carries the reader in from the standfirst, so it is set a step larger. Only
   when it genuinely opens the article -- a post that starts on a heading or an image should not
   have some paragraph further down suddenly grow. */
.aeca-editorial-body > p:first-child {
	color: var(--aeca-ed-ink-strong);
	font-size: 1.2rem;
	line-height: 1.68;
}

.aeca-editorial-body strong,
.aeca-editorial-body b {
	color: var(--aeca-ed-ink-strong);
	font-weight: 700;
}


/* Headings. Outfit, blue, and tighter than the body, matching `.aeca-section-heading h2`. The rule
   above an h2 is the one piece of decoration in the body: it gives a long article a visible
   structure when skimmed, which a size change alone does not. */

.aeca-editorial-body h1,
.aeca-editorial-body h2,
.aeca-editorial-body h3,
.aeca-editorial-body h4,
.aeca-editorial-body h5,
.aeca-editorial-body h6 {
	color: var(--aeca-ed-blue);
	font-family: var(--aeca-heading-font, "Outfit", sans-serif);
	line-height: 1.12;
	letter-spacing: -.015em;
}

.aeca-editorial-body h2 {
	position: relative;
	margin-top: 2.9em;
	padding-top: 1.5rem;
	font-size: clamp(1.65rem, 3vw, 2.15rem);
}

.aeca-editorial-body h2::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 46px;
	height: 3px;
	background: var(--aeca-ed-cyan);
}

.aeca-editorial-body h3 {
	margin-top: 2.3em;
	font-size: clamp(1.3rem, 2.2vw, 1.55rem);
}

.aeca-editorial-body h4 {
	margin-top: 2em;
	color: var(--aeca-ed-ink-strong);
	font-size: 1.15rem;
	letter-spacing: 0;
}

.aeca-editorial-body h2 + *,
.aeca-editorial-body h3 + *,
.aeca-editorial-body h4 + * {
	margin-top: .75em;
}


/* Links. Underlined in the body, because a colour change alone is not enough to mark a link inside
   a paragraph -- and here the surrounding text is a different colour from the link anyway, so the
   underline is doing the accessible work. */

.aeca-editorial-body a:not(.btn) {
	color: var(--aeca-ed-blue);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgba(2, 77, 161, .35);
	text-underline-offset: .18em;
}

.aeca-editorial-body a:not(.btn):hover,
.aeca-editorial-body a:not(.btn):focus-visible {
	color: var(--aeca-ed-cyan);
	text-decoration-color: currentColor;
}


/* Lists. Custom markers: the default disc is grey and sits too close to the text. A cyan square for
   bullets and a blue number for ordered items tie the list to the rest of the palette. */

.aeca-editorial-body ul,
.aeca-editorial-body ol {
	padding-left: 0;
	list-style: none;
	counter-reset: aeca-ed-count;
}

.aeca-editorial-body li {
	position: relative;
	padding-left: 1.85rem;
}

.aeca-editorial-body li + li {
	margin-top: .6em;
}

.aeca-editorial-body ul > li::before {
	content: "";
	position: absolute;
	top: .62em;
	left: .1rem;
	width: 8px;
	height: 8px;
	background: var(--aeca-ed-cyan);
}

.aeca-editorial-body ol > li {
	counter-increment: aeca-ed-count;
}

.aeca-editorial-body ol > li::before {
	content: counter(aeca-ed-count) ".";
	position: absolute;
	left: 0;
	color: var(--aeca-ed-blue);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.aeca-editorial-body li > ul,
.aeca-editorial-body li > ol {
	margin-top: .6em;
}


/* Quotes. The pull quote is the one place an editor can raise their voice, so it is set in blue at
   display size against a cyan rule, not as indented grey italics. */

.aeca-editorial-body blockquote {
	margin: 2.4em 0;
	padding: .3rem 0 .3rem 1.9rem;
	border-left: 3px solid var(--aeca-ed-cyan);
	color: var(--aeca-ed-blue);
	font-size: 1.32rem;
	font-style: normal;
	line-height: 1.5;
}

.aeca-editorial-body blockquote p {
	color: inherit;
}

.aeca-editorial-body blockquote cite,
.aeca-editorial-body blockquote footer {
	display: block;
	margin-top: .9rem;
	color: #6b7f92;
	font-size: .92rem;
	font-style: normal;
	letter-spacing: .04em;
	text-transform: uppercase;
}


/* Media. Images and figures break out past the measure at wide widths: a screenshot or a map is
   unreadable at 43rem, and the article has 1080px of container to give it. */

.aeca-editorial-body img,
.aeca-editorial-body iframe,
.aeca-editorial-body video {
	display: block;
	max-width: 100%;
	height: auto;
}

.aeca-editorial-body figure {
	margin: 2.4em 0;
}

.aeca-editorial-body figcaption,
.aeca-editorial-body .wp-caption-text {
	margin-top: .8rem;
	color: #6b7f92;
	font-size: .88rem;
	line-height: 1.55;
}

/* A screenshot, a map or a specification table is unreadable at 43rem, and the article has 1080px of
   container to give it. They break out to the right only: breaking out both ways would push them
   past the left rail every other element on the page hangs off. 55rem still sits inside the
   container at every width this applies to. */
@media (min-width: 992px) {

	.aeca-editorial-body figure,
	.aeca-editorial-body .wp-block-image,
	.aeca-editorial-body .wp-block-embed,
	.aeca-editorial-body .wp-block-table {
		width: 55rem;
		max-width: calc(100vw - 3rem);
	}

	.aeca-editorial-body figure img,
	.aeca-editorial-body .wp-block-image img {
		width: 100%;
	}
}

.aeca-editorial-body .alignleft,
.aeca-editorial-body .alignright,
.aeca-editorial-body .aligncenter {
	width: auto;
	margin-inline: auto;
}


/* Tables. Header row in the wash, hairline grid, and a scroll container so a wide table does not
   push the page sideways on a phone.

   The scroll lives on the wrapper, not on the table. `display: block; overflow-x: auto` directly on
   a table is the usual shortcut and it is wrong: a block-level table shrink-wraps its columns, so a
   three-column table sits at two thirds of the width it was given with a ragged edge where the
   fourth column should be. Keeping the table a table and scrolling its parent gives full width when
   there is room and a scroll when there is not. */

.aeca-editorial-body table {
	width: 100%;
	border-collapse: collapse;
	font-size: .97rem;
}

.aeca-editorial-body .wp-block-table,
.aeca-editorial-body figure:has(table) {
	overflow-x: auto;
}

.aeca-editorial-body .wp-block-table table,
.aeca-editorial-body figure:has(table) table {
	min-width: 32rem;
}

.aeca-editorial-body th,
.aeca-editorial-body td {
	padding: .8rem 1rem;
	border: 1px solid var(--aeca-ed-line);
	text-align: left;
	vertical-align: top;
}

.aeca-editorial-body thead th {
	background: var(--aeca-ed-wash);
	color: var(--aeca-ed-blue);
	font-weight: 700;
}


/* Code and preformatted text. */

.aeca-editorial-body code,
.aeca-editorial-body kbd,
.aeca-editorial-body samp {
	padding: .12em .38em;
	border: 1px solid var(--aeca-ed-line);
	background: var(--aeca-ed-wash);
	color: var(--aeca-ed-blue-deep);
	font-size: .92em;
}

.aeca-editorial-body pre {
	overflow-x: auto;
	padding: 1.2rem 1.35rem;
	border: 1px solid var(--aeca-ed-line);
	border-left: 3px solid var(--aeca-ed-cyan);
	background: var(--aeca-ed-wash);
	color: var(--aeca-ed-ink-strong);
	font-size: .92rem;
	line-height: 1.65;
}

.aeca-editorial-body pre code {
	padding: 0;
	border: 0;
	background: none;
	font-size: inherit;
}

.aeca-editorial-body hr {
	margin: 3em 0;
	border: 0;
	border-top: 1px solid var(--aeca-ed-line);
	opacity: 1;
}

/* WordPress' own button block, so a call to action typed into the editor is the site's button. */
.aeca-editorial-body .wp-block-button__link {
	display: inline-block;
	padding: .8rem 1.6rem;
	border-radius: 0;
	background: var(--aeca-ed-blue);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

.aeca-editorial-body .wp-block-button__link:hover {
	background: var(--aeca-ed-blue-deep);
	color: #fff;
}

.aeca-editorial-pagelinks {
	max-width: var(--aeca-ed-measure);
	margin: 2.5rem 0 0;
	color: var(--aeca-ed-ink);
	font-weight: 600;
}

.aeca-editorial-pagelinks a {
	color: var(--aeca-ed-blue);
}


/* 5. Article footer
----------------------------------------------------------------------------------------------------

Tags and share, on one row at desktop and stacked on a phone. Both are chip lists rather than
comma-separated links: they are navigation, and at the end of an article they need to be visibly
tappable rather than looking like a trailing sentence. */

.aeca-editorial-foot {
	display: flex;
	flex-wrap: wrap;
	gap: 1.8rem 3rem;
	justify-content: space-between;
	max-width: 55rem;
	margin: clamp(38px, 5vw, 58px) 0 0;
	padding-top: 1.7rem;
	border-top: 1px solid var(--aeca-ed-line);
}

.aeca-editorial-foot .aeca-eyebrow {
	display: block;
	margin-bottom: .7rem;
}

.aeca-editorial-foot ul {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aeca-editorial-foot a {
	display: inline-block;
	padding: .38rem .85rem;
	border: 1px solid var(--aeca-ed-line);
	background: #fff;
	color: var(--aeca-ed-blue);
	font-size: .88rem;
	font-weight: 600;
	text-decoration: none;
	transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.aeca-editorial-foot a:hover,
.aeca-editorial-foot a:focus-visible {
	border-color: var(--aeca-ed-blue);
	background: var(--aeca-ed-blue);
	color: #fff;
}

.aeca-editorial-share ul {
	justify-content: flex-end;
}


/* 6. Previous / next
----------------------------------------------------------------------------------------------------

Two cards rather than two underlined links. The arrow is on the eyebrow row, so the titles start on
the same baseline whichever direction they point. `--next` is pushed to the right edge and stays
there when it is the only one of the pair, which is what happens on the newest and oldest post. */

.aeca-editorial-nav {
	padding: 0 0 clamp(52px, 7vw, 88px);
	background: #fff;
}

.aeca-editorial-nav > .container {
	max-width: 1080px;
}

.aeca-editorial-nav__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
	padding-top: clamp(30px, 4vw, 46px);
	border-top: 1px solid var(--aeca-ed-line);
}

.aeca-editorial-nav__item {
	display: block;
	padding: clamp(20px, 2.6vw, 30px);
	border: 1px solid var(--aeca-ed-line);
	background: #fff;
	text-decoration: none;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.aeca-editorial-nav__item:hover,
.aeca-editorial-nav__item:focus-visible {
	border-color: #b9d3e6;
	box-shadow: 0 14px 36px rgba(2, 77, 161, .12);
	transform: translateY(-2px);
}

.aeca-editorial-nav__item--next {
	grid-column: 2;
	text-align: right;
}

.aeca-editorial-nav__item .aeca-eyebrow {
	display: block;
	margin-bottom: .55rem;
}

.aeca-editorial-nav__item--prev .aeca-eyebrow::before {
	content: "\2190  ";
}

.aeca-editorial-nav__item--next .aeca-eyebrow::after {
	content: "  \2192";
}

.aeca-editorial-nav__title {
	display: block;
	color: var(--aeca-ed-blue);
	font-family: var(--aeca-heading-font, "Outfit", sans-serif);
	font-size: clamp(1.15rem, 2vw, 1.4rem);
	font-weight: 600;
	line-height: 1.22;
}

.aeca-editorial-nav__item:hover .aeca-editorial-nav__title {
	color: var(--aeca-ed-cyan);
}


/* 7. Related posts
----------------------------------------------------------------------------------------------------

Straight reuse of `.aeca-story-card` from aeca-custom.css -- the card the Blog, News and Events
listings show. Only the section's ground is set here, so the block reads as a change of subject
after the article. */

.aeca-editorial-related {
	padding: clamp(56px, 8vw, 104px) 0;
	background: var(--aeca-ed-wash);
}

.aeca-editorial-related .aeca-story-card img {
	height: 190px;
}

.aeca-editorial-related .aeca-story-card h2 {
	font-size: clamp(1.25rem, 1.9vw, 1.5rem);
}


/* 8. Archive and search additions
---------------------------------------------------------------------------------------------------- */

.aeca-editorial-intro {
	color: var(--aeca-ed-ink);
	line-height: 1.65;
}

.aeca-editorial-intro p {
	margin: 0;
	color: var(--aeca-ed-ink);
}

.aeca-editorial-intro p + p {
	margin-top: .9rem;
}


/* Small screens
---------------------------------------------------------------------------------------------------- */

@media (max-width: 767.98px) {

	.aeca-editorial-lead-media {
		margin-top: clamp(-56px, -8vw, -30px);
	}

	.aeca-editorial-lead-media img {
		max-height: 320px;
	}

	.aeca-editorial-body {
		font-size: 1.03rem;
	}

	.aeca-editorial-body > p:first-child {
		font-size: 1.1rem;
	}

	.aeca-editorial-foot {
		gap: 1.5rem;
	}

	.aeca-editorial-share ul {
		justify-content: flex-start;
	}

	.aeca-editorial-nav__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.aeca-editorial-nav__item--next {
		grid-column: 1;
		text-align: left;
	}

	.aeca-editorial-nav__item--next .aeca-eyebrow::after {
		content: "";
	}

	.aeca-editorial-nav__item--next .aeca-eyebrow::before {
		content: "\2192  ";
	}

	.aeca-editorial-hero__form .aeca-search-form {
		flex-wrap: wrap;
	}

	.aeca-editorial-hero__form .form-control {
		flex-basis: 100%;
	}

	.aeca-editorial-hero__form .btn {
		width: 100%;
	}
}