/*
 * Articles and text pages: the post page and its prose, share links, request card
 * and related posts; the news listings; the plain prose pages (privacy, terms,
 * modern slavery); the client login; the 404.
 * The post card and pager are shared with the home page and live in theme.css.
 */

/* ------------------------------------------------------- Reading column */

/* An article runs about 1020px wide on a desktop, as on the live site: most posts
   from the old site float a photo or report cover beside their text, which leaves
   the text itself at a comfortable line. Text pages (privacy, terms, modern slavery)
   are prose only, so they keep a narrower column. Everything inside that follows the
   content width (head, text, share row, request card) inherits it from here; wide
   images and the related band still use the wide size. */
.nlc-article {
	--nlc-measure: 64rem;
	--wp--style--global--content-size: var(--nlc-measure);
}
.nlc-readable {
	--nlc-measure: 48rem;
	--wp--style--global--content-size: var(--nlc-measure);
}

/* ---------------------------------------------------------- Article head */

.nlc-article { padding-top: var(--wp--preset--spacing--50); }
.nlc-article__post { padding-bottom: var(--wp--preset--spacing--60); }

.nlc-article .nlc-article__head > * { margin-block: 0; }

.nlc-news .is-style-eyebrow a { color: var(--wp--preset--color--copper); text-decoration: none; }
.nlc-news .is-style-eyebrow a:hover { color: var(--wp--preset--color--copper-deep); text-decoration: underline; text-underline-offset: .2em; }

/* The headline in capitals and light weight, as on the live site. The size comes from
   the xx-large preset (25px on a phone up to 35px). */
.nlc-article__title {
	font-weight: 300;
	line-height: 1.35;
	letter-spacing: .01em;
	text-transform: uppercase;
	text-wrap: balance;
}

/* Date and time between two thin rules, each after a copper mark. */
.nlc-article .nlc-article__meta {
	gap: .5rem .875rem;
	margin-top: 1.5rem;
	padding-block: .875rem;
	border-block: 1px solid var(--nlc-line);
	color: var(--nlc-muted);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: .1em;
	line-height: 1.4;
	text-transform: uppercase;
}
.nlc-article__meta > * { display: inline-flex; align-items: center; gap: .5rem; margin: 0; }
.nlc-article__meta > * + * { padding-left: .875rem; border-left: 1px solid var(--wp--preset--color--silver); }
.nlc-article__meta .nlc-svg { flex: none; width: .875rem; height: .875rem; color: var(--wp--preset--color--copper); }

/* ----------------------------------------------------------------- Prose */

.nlc-prose {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.7;
	overflow-wrap: break-word;
}
.nlc-article .nlc-prose { display: flow-root; margin-top: var(--wp--preset--spacing--40); }
.nlc-prose.is-layout-constrained > * { margin-block: 0; }
.nlc-prose.is-layout-constrained > * + * { margin-top: 1.25em; }

/* Headings: a clear step between each level. Posts from the old site mostly use h4
   for their section titles, so it carries enough weight to be one. */
.nlc-prose :is(h2, h3, h4, h5, h6) { text-wrap: balance; }
/* Contents lists on the legal pages: each link is its own line, so give it a 24px+ target
   without moving the lines (the padding is cancelled by the margin). */
.nlc-prose :is(ul, ol) > li > a[href^="#"]:only-child { display: inline-block; padding-block: .3rem; margin-block: -.3rem; }
.nlc-prose.is-layout-constrained > :is(h2, h3, h4, h5, h6) { margin-bottom: 0; }
.nlc-prose.is-layout-constrained > h2 { margin-top: 2.5em; font-size: var(--wp--preset--font-size--xx-large); font-weight: 300; line-height: 1.2; letter-spacing: 0; text-transform: none; }
.nlc-prose.is-layout-constrained > h3 { margin-top: 2.25em; font-size: var(--wp--preset--font-size--x-large); font-weight: 500; line-height: 1.3; }
.nlc-prose.is-layout-constrained > h4 { margin-top: 2em; font-size: var(--wp--preset--font-size--large); font-weight: 600; line-height: 1.35; }
.nlc-prose.is-layout-constrained > h5 { margin-top: 1.75em; font-size: var(--wp--preset--font-size--medium); font-weight: 600; line-height: 1.4; }
.nlc-prose.is-layout-constrained > h6 { margin-top: 1.75em; color: var(--nlc-muted); font-size: var(--wp--preset--font-size--small); font-weight: 400; line-height: 1.5; letter-spacing: 0; text-transform: none; }
.nlc-prose.is-layout-constrained > :is(h2, h3, h4, h5, h6) + * { margin-top: .75em; }
.nlc-prose.is-layout-constrained > :first-child { margin-top: 0; }
.nlc-prose :is(h2, h3, h4, h5, h6) strong { font-weight: inherit; }
/* The old site put an image or a line break inside some headings. */
.nlc-prose :is(h2, h3, h4, h5, h6) img { display: block; max-width: 100%; height: auto; margin: 0 0 1rem; }
.nlc-prose li > :is(h2, h3, h4, h5, h6) { margin: 0; }

.nlc-prose :is(strong, b) { font-weight: 600; }
.nlc-prose :is(sup, sub) { line-height: 0; }

.nlc-prose a:not(.wp-element-button) {
	color: var(--wp--preset--color--copper);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
	transition: color var(--nlc-t), text-decoration-thickness var(--nlc-t);
}
.nlc-prose a:not(.wp-element-button):hover { color: var(--wp--preset--color--copper-deep); text-decoration-thickness: 2px; }

/* Lists: copper markers, room between items, nested lists tucked under their parent. */
.nlc-prose :is(ul, ol) { padding-inline-start: 1.5em; }
.nlc-prose li { padding-inline-start: .25em; }
.nlc-prose li + li { margin-top: .5em; }
.nlc-prose li > :is(ul, ol) { margin-top: .5em; }
/* Pasted legal text wraps each item in a paragraph; it should not add a gap of its own. */
.nlc-prose li > p { margin-block: 0; }
.nlc-prose li > p + p { margin-top: .75em; }
.nlc-prose li::marker { color: var(--wp--preset--color--copper); }
.nlc-prose ol > li::marker { font-weight: 600; }

/* Quotes: the copper rule and light type come from theme.json. */
.nlc-prose.is-layout-constrained > .wp-block-quote { margin-block: 2em; }
.nlc-prose .wp-block-quote > * { margin-block: 0; }
.nlc-prose .wp-block-quote > * + * { margin-top: .75em; }
.nlc-prose .wp-block-quote cite { display: block; color: var(--nlc-muted); font-size: var(--wp--preset--font-size--small); font-style: normal; font-weight: 600; }

/* Images, audio and embeds. */
.nlc-prose.is-layout-constrained > :is(.wp-block-image, .wp-block-gallery, .wp-block-audio, .wp-block-video, .wp-block-embed, .wp-block-table, .wp-block-separator, .wp-block-pullquote) { margin-block: 2em; }
.nlc-prose :is(.wp-block-image, .wp-block-gallery) img,
.nlc-prose p > img {
	max-width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--card);
	outline: 1px solid var(--nlc-outline);
	outline-offset: -1px;
}
.nlc-prose :is(figcaption, .wp-element-caption) { margin-top: .75rem; color: var(--nlc-muted); font-size: var(--wp--preset--font-size--x-small); line-height: 1.5; text-align: left; }
.nlc-prose .wp-block-audio audio,
.nlc-prose .wp-block-video video { display: block; width: 100%; }
.nlc-prose :is(iframe, video) { max-width: 100%; }
.nlc-prose .wp-block-separator { border-color: var(--nlc-line); }
.nlc-prose :is(code, kbd) { padding: .1em .35em; border-radius: var(--wp--custom--radius--control); background: var(--wp--preset--color--mist); font-size: .9em; }
.nlc-prose pre { overflow-x: auto; padding: 1rem; border-radius: var(--wp--custom--radius--control); background: var(--wp--preset--color--mist); font-size: var(--wp--preset--font-size--small); line-height: 1.6; }
.nlc-prose pre code { padding: 0; background: none; }
/* A floated image has no room beside it in a phone-width column. Wider, it keeps its
   float but takes at most 45% of the line, and sits on the text's edge rather than
   the edge of the wide column around it. */
@media (max-width: 599px) {
	.nlc-prose :is(.alignleft, .alignright) { float: none; margin: 2em 0; }
}
@media (min-width: 600px) {
	.nlc-prose.is-layout-constrained > :is(.alignleft, .alignright) { max-width: 45%; margin-block: .375rem 1.25rem; }
	.nlc-prose.is-layout-constrained > .alignright { margin-right: max(0px, (100% - var(--nlc-measure)) / 2); margin-left: 2rem; }
	.nlc-prose.is-layout-constrained > .alignleft { margin-left: max(0px, (100% - var(--nlc-measure)) / 2); margin-right: 2rem; }
	.nlc-prose.is-layout-constrained > :is(.alignleft, .alignright) img { max-width: 100%; }
}

/* Tables scroll inside their own box on narrow screens, with a shadow on the edge
   that has more to see, so the page itself never scrolls sideways. */
.nlc-prose .wp-block-table {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	background:
		linear-gradient(to right, #fff 30%, transparent) left / 2rem 100% no-repeat local,
		linear-gradient(to left, #fff 30%, transparent) right / 2rem 100% no-repeat local,
		linear-gradient(to right, rgb(35 31 32 / .16), transparent) left / .75rem 100% no-repeat scroll,
		linear-gradient(to left, rgb(35 31 32 / .16), transparent) right / .75rem 100% no-repeat scroll;
}
.nlc-prose .wp-block-table:focus-visible { outline-offset: 2px; }
.nlc-prose .wp-block-table table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: var(--wp--preset--font-size--small); line-height: 1.5; }
.nlc-prose .wp-block-table :is(th, td) { padding: .75rem 1rem; border: 0; border-bottom: 1px solid var(--nlc-line); text-align: left; vertical-align: top; }
.nlc-prose .wp-block-table :is(th, td):first-child { padding-inline-start: 0; }
.nlc-prose .wp-block-table thead th,
.nlc-prose .wp-block-table tr:first-child:has(> th) > th { border-bottom: 2px solid var(--wp--preset--color--ink); font-weight: 600; }
.nlc-prose .wp-block-table :is(th, td) > p { margin: 0; }
.nlc-prose .wp-block-table :is(th, td) > p + p { margin-top: .5em; }
.nlc-prose .wp-block-table figcaption { padding-top: .75rem; }

/* ------------------------------------------------------------ Share links */

/* "Share", then a tile for each network: the brand mark on a copper square joined to
   its name in a thin copper frame, as on the live site. The whole tile is the link,
   44px tall; it fills copper on hover. Two to a row on a phone. */
.nlc-article .nlc-article__share { margin-top: var(--wp--preset--spacing--50); padding-top: var(--wp--preset--spacing--40); border-top: 1px solid var(--nlc-line); }
.nlc-share { gap: .75rem 1.5rem; }
.nlc-share > * { margin: 0; }
.nlc-share__label {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
}
.nlc-share__links { gap: .5rem; }
.nlc-share .nlc-share__link > .wp-block-button__link {
	display: flex;
	align-items: stretch;
	min-height: 2.75rem;
	padding: 0;
	border-width: 1px;
	font-size: var(--wp--preset--font-size--x-small);
	text-align: left;
}
.nlc-share__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.75rem;
	margin: -1px 0 -1px -1px;
	border-radius: var(--wp--custom--radius--control) 0 0 var(--wp--custom--radius--control);
	background: var(--wp--preset--color--copper);
	color: var(--wp--preset--color--white);
	transition: background-color var(--nlc-t);
}
.nlc-share__icon .nlc-svg { width: 1rem; height: 1rem; }
.nlc-share__text { display: flex; flex: 1; align-items: center; padding-inline: 1rem 1.25rem; }
.nlc-share .nlc-share__link > .wp-block-button__link:hover .nlc-share__icon { background: var(--wp--preset--color--copper-deep); }
@media (max-width: 599px) {
	.nlc-share__label { flex-basis: 100%; }
	.nlc-share__links { flex: 1; }
	.nlc-share .nlc-share__link { flex: 1 1 calc(50% - .25rem); }
}
@media (min-width: 600px) {
	.nlc-share .nlc-share__link > .wp-block-button__link { min-width: 10rem; }
}

/* ------------------------------------------------------ Market reports */

/* A report opens with its cover, which sits beside the opening text from 782px at
   about 400px, as on the live site. Core centres every child of the column with
   !important margins, so the right margin is set to put the cover on the column's edge
   rather than the page's. Narrower, it sits above the text at no more than 20rem, so a
   tablet is not one tall cover. The request form follows the text, then the share row. */
.nlc-article--request .nlc-prose > .wp-block-image:first-child { max-width: 20rem; margin-left: 0 !important; }
@media (min-width: 782px) {
	.nlc-article--request .nlc-prose { display: flow-root; }
	.nlc-article--request .nlc-prose > .wp-block-image:first-child {
		float: right;
		width: min(25rem, 40%);
		max-width: none;
		margin: .375rem max(0px, (100% - var(--nlc-measure)) / 2) var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) !important;
	}
	.nlc-article--request .nlc-prose > .wp-block-image:first-child img { width: 100%; }
	.nlc-article--request .nlc-prose > .wp-block-image:first-child + * { margin-top: 0; }
}

/* -------------------------------------------------------- Request card */

.nlc-article .nlc-request { margin-top: var(--wp--preset--spacing--50); clear: both; padding: var(--wp--preset--spacing--40); border-radius: var(--wp--custom--radius--card); }
.nlc-request > * { margin-block: 0; }
.nlc-request > * + * { margin-top: .75rem; }
.nlc-request__login { color: var(--nlc-muted); font-size: var(--wp--preset--font-size--small); }
.nlc-request > .nlc-form { margin-top: 1.5rem; }

/* ------------------------------------------------------- Related posts */

.nlc-related { padding: var(--wp--preset--spacing--50) var(--nlc-gutter); }
.nlc-related__head { gap: 1rem 2rem; margin-bottom: var(--wp--preset--spacing--40); }
.nlc-related__head > * { margin-block: 0; }
.nlc-related__head > .nlc-title + * { margin-top: 0; }
.nlc-related__head .wp-block-buttons { margin: 0; }
/* "Back to news" points the other way from the shared text link. */
.wp-block-button.is-style-text-link.nlc-back > .wp-block-button__link { padding-block: .75rem; }
.wp-block-button.is-style-text-link.nlc-back > .wp-block-button__link::after { content: none; }
.wp-block-button.is-style-text-link.nlc-back > .wp-block-button__link::before { content: "«\00a0"; content: "«\00a0" / ""; }

/* ------------------------------------------------------ News listings */

/* Cards in the listings and under an article are white boxes that sit slightly off the
   page (live uses a heavy drop shadow; this is a softer, layered one). The whole card is
   the link (the title's link stretches over it) and it lifts a little more on hover. */
:is(.nlc-news, .nlc-related) .nlc-post-card {
	position: relative;
	padding: 1.5rem;
	border: 1px solid var(--nlc-line);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--card);
	overflow: hidden;
	transition: box-shadow var(--nlc-t), border-color var(--nlc-t);
}
/* The photo runs to the card's edges; the card's own radius and border clip it. */
:is(.nlc-news, .nlc-related) .nlc-post-card > .nlc-post-card__image { margin: -1.5rem -1.5rem .25rem; border-radius: 0; }
:is(.nlc-news, .nlc-related) .nlc-post-card:is(:hover, :focus-within) {
	border-color: var(--wp--preset--color--silver);
	box-shadow: 0 2px 4px rgb(35 31 32 / .06), 0 20px 36px -16px rgb(35 31 32 / .3);
}
:is(.nlc-news, .nlc-related) .nlc-post-card .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
:is(.nlc-news, .nlc-related) .nlc-post-card .wp-block-post-title a:focus-visible { outline: none; }
:is(.nlc-news, .nlc-related) .nlc-post-card:has(.wp-block-post-title a:focus-visible) { outline: 2px solid var(--wp--preset--color--copper); outline-offset: 3px; }
:is(.nlc-news, .nlc-related) .nlc-post-card .nlc-read-more { position: relative; }
.nlc-search__none { color: var(--nlc-muted); }

/* Pager. The shared rule lays out each link as a grid, which stacks "Next Page" and
   its arrow on two lines; these keep them on one. On a phone the previous and next
   links share the first row and the page numbers sit centred below. */
.nlc-pager :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	white-space: nowrap;
}
.nlc-pager .wp-block-query-pagination-numbers { display: flex; align-items: center; }
@media (max-width: 599px) {
	.wp-block-query-pagination.nlc-pager { justify-content: space-between; row-gap: 0; }
	.nlc-pager .wp-block-query-pagination-numbers { order: 3; flex-basis: 100%; justify-content: center; }
	.nlc-pager .wp-block-query-pagination-next { margin-left: auto; }
}

/* Search form (search results and 404). */
.nlc-search { margin-top: var(--wp--preset--spacing--40); }
.nlc-search .wp-block-search__inside-wrapper { gap: .5rem; }
.nlc-search .wp-block-search__input {
	min-height: 2.75rem;
	padding: .75rem .9rem;
	border: 1px solid var(--wp--preset--color--silver);
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-size: 1rem;
	transition: border-color var(--nlc-t);
}
.nlc-search .wp-block-search__input:hover { border-color: var(--wp--preset--color--stone); }
.nlc-search .wp-block-search__input:focus { outline: 2px solid var(--wp--preset--color--copper); outline-offset: 0; border-color: transparent; }
.nlc-search .wp-block-search__button { min-height: 2.75rem; margin-left: 0; cursor: pointer; }
.nlc-news .nlc-search { margin-bottom: var(--wp--preset--spacing--40); }

/* ---------------------------------------------------------- Text pages */

/* The privacy notice, terms and modern slavery statement are long legal texts read
   section by section, so they are set tighter than an article: section headings at
   about 20px in bold as on the live site (not the article's 35px light), less room
   above them, paragraphs a line apart and list items close together. The column stays
   at the comfortable measure set above. */
.nlc-readable .nlc-prose { margin-top: var(--wp--preset--spacing--40); line-height: 1.6; }
.nlc-readable .nlc-prose.is-layout-constrained > * + * { margin-top: 1em; }
.nlc-readable .nlc-prose.is-layout-constrained > h2 {
	margin-top: 2em;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: .02em;
}
.nlc-readable .nlc-prose.is-layout-constrained > :is(h3, h4) {
	margin-top: 1.75em;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.4;
}
.nlc-readable .nlc-prose.is-layout-constrained > :is(h5, h6) { margin-top: 1.5em; }
.nlc-readable .nlc-prose.is-layout-constrained > :is(h2, h3, h4, h5, h6) + * { margin-top: .5em; }
.nlc-readable .nlc-prose.is-layout-constrained > p + :is(ul, ol) { margin-top: .5em; }
.nlc-readable .nlc-prose.is-layout-constrained > :first-child { margin-top: 0; }
.nlc-readable .nlc-prose li + li,
.nlc-readable .nlc-prose li > :is(ul, ol) { margin-top: .25em; }

/* ----------------------------------------------------------------- 404 */

.nlc-notfound .wp-block-buttons { margin-top: var(--wp--preset--spacing--40); }

/* --------------------------------------------------------------- Login */

/* The form sits first on a phone and the photo follows as a strip; the shared split
   puts the photo on top. Core's own stacking rule (under 600px) is more specific than
   the shared split, so these selectors carry the extra classes to beat it, and the
   photo's min-height is cleared because with an aspect ratio it would widen the strip. */
.nlc-login > .wp-block-media-text__content > .wp-block-post-title { margin-bottom: 0; }
@media (max-width: 781px) {
	.wp-block-media-text.nlc-split.nlc-login > .wp-block-media-text__content { grid-row: 1; }
	.wp-block-media-text.nlc-split.nlc-login > .wp-block-media-text__media { grid-row: 2; aspect-ratio: 16 / 9; width: 100%; min-height: 0; }
}

/* ----------------------------------------- Featured articles (home page) */

/* Text-only cards, as on the live site, and "Load more" as the filled button. The link
   is the query's next-page link; assets/js/load-more.js adds the next cards in place. */
.nlc-load-more { margin-top: var(--wp--preset--spacing--40); }
.nlc-load-more .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	margin: 0;
	padding: .75rem 1.75rem;
	border: 2px solid var(--wp--preset--color--copper);
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--copper);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: .1em;
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color var(--nlc-t), border-color var(--nlc-t);
}
.nlc-load-more .wp-block-query-pagination-next:hover { border-color: var(--wp--preset--color--copper-deep); background: var(--wp--preset--color--copper-deep); color: var(--wp--preset--color--white); }
.nlc-load-more .wp-block-query-pagination-next:focus-visible { outline: 2px solid var(--wp--preset--color--copper); outline-offset: 3px; }
.nlc-load-more .wp-block-query-pagination-next[aria-disabled="true"] { cursor: progress; opacity: .75; }