/*!
Context — Custom overrides
Loaded last, after every other theme stylesheet.

Origin
------
These rules were migrated out of Appearance > Customize > Additional CSS, so
they live in version control instead of the database. The order is the order
they had there, and some of them depend on it: see "Video carousel thumbnail"
below for the clearest case. Do not reorganise the file without checking what
the reordering changes.

What was dropped during the migration
-------------------------------------
- The "Block gutters" section. It cancelled the inline padding on the root of
  the custom blocks and restored 16px below 900px. The page gutter now comes
  from the .wp-block-columns wrapper alone (pattern-styles.css) and the four
  blocks that carried their own inline padding declare 0. Three of its ten
  selectors never matched anything: .ctx-focus-areas (the block renders as
  .ctx-fa), .ctx-video-hero (it renders as .ctx-vhero, ctx-video-hero is only
  a data attribute) and the roots of hot topics, promo, most read and in
  focus, which have no inline padding to cancel.
- The legacy single video page design, from .video-hero to .video-card-title
  plus its two responsive blocks and the .video-card hover rule. It styled the
  previous video template; single-video.php uses the ctx-video-* namespace and
  none of those classes appear in the markup any more.
- .nav-max-width and .member img. Neither class is emitted anywhere.
- .site-footer, which set a background, a colour and a 114px top padding. It
  never applied: footer.php renders <footer class="site-footer">, so
  footer.site-footer in footer.css outranks it on all three declarations.

What moved into the stylesheet that owns it
-------------------------------------------
- .article-latest__item padding and margin, 20px, now the value in article.css.
- .rail-module--go-deeper, hidden in article.css.
- .ctx-fa__foot margin, 2rem, now the value in the focus areas block.
- The heading band colour, #005e93, now the --ctx-heading-band-bg default.
- .ctx-newsletters-btn, hidden in header.css.
- .news-main .news-image, now in the news featured block.

What stays here for good
------------------------
Rules that hang off classes typed into the editor or set on a menu item, and
the rules for spotlight-card, search.php and single-custom.php, none of which
has a stylesheet of its own in the theme.

>>> TABLE OF CONTENTS
# Content lists
# Separator
# Statement banner
# Mobile utility
# Single custom: hero
# Video carousel thumbnail
# Spotlight card
# Home carousel
# Home topics
# Pre-footer
# Palette colour links
# Legacy submenu
# Video thumbnail play button
# Post carousel play button
# Legacy menu search icon
# Search results
# Social sharing
# Newsletter side
# Latest posts widget
# Related articles
# Single custom: hero and sidebar
# Long read captions
# Per-post overrides
*/

/*--------------------------------------------------------------
# Content lists
--------------------------------------------------------------*/

.entry-content ul:not(.no-list) {
	margin-bottom: 30px;
}

/*--------------------------------------------------------------
# Separator
--------------------------------------------------------------*/

.wp-block-separator {
	border-top: 1px solid currentColor;
}

/*--------------------------------------------------------------
# Statement banner
--------------------------------------------------------------*/

.statement-banner {
	padding: 10px 20px;
	text-align: center;
	background-color: #1a2b4c;
	border-bottom: 3px solid #0d1a30;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.statement {
	margin: 0;
	color: #fff;
	font-size: 16px;
}

.statement-link {
	margin-left: 5px;
	color: #fff;
	text-decoration: underline !important;
}

.statement-link:hover {
	color: #cfd8e8;
}

/*--------------------------------------------------------------
# Mobile utility
--------------------------------------------------------------*/

@media (max-width: 768px) {
	.hide-mobile {
		display: none !important;
	}
}

/*--------------------------------------------------------------
# Single custom: hero
--------------------------------------------------------------*/

.post-title {
	margin-bottom: 0.75rem;
}

/* Author and date, under the title. */
.post-meta {
	margin-top: 0.5rem;
	margin-bottom: 1.5rem;
}

/* Positioning context for the overlaid caption. */
.post-featured-image {
	position: relative;
	display: block;
	margin-bottom: 1.25rem;
}

/* display:block removes the phantom gap under the image. */
.post-featured-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* Caption overlaid at the bottom of the image. The top padding gives the
   gradient room to fade. */
.post-image-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 2rem 1rem 0.6rem;
	font-size: 0.8em;
	font-style: italic;
	line-height: 1.4;
	color: #fff;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
}

/* Standfirst, below the photo. */
.post-excerpt {
	margin-top: 0;
	margin-bottom: 1rem;
	font-size: 1.15em;
	line-height: 1.5;
	color: #333;
}

/*--------------------------------------------------------------
# Video carousel thumbnail
--------------------------------------------------------------*/

/* This pair must stay above the play button section further down. The
   unscoped .video-thumb::after here sets display:none, and the rule that
   draws the circle below never restores display, so the circle stays hidden.
   Moving either block changes what the carousel looks like. */
.trf-video-carousel .video-thumb::before,
.video-thumb::after {
	display: none;
}

.trf-video-carousel .video-thumb:hover {
	opacity: 0.9;
}

/*--------------------------------------------------------------
# Spotlight card
--------------------------------------------------------------*/

@media (max-width: 768px) {
	.spotlight-card {
		display: flex;
		flex-direction: column;
		overflow: visible;
	}

	.spotlight-image-wrap {
		width: 100%;
		height: 240px;
	}

	.spotlight-image-wrap img {
		display: block;
		width: 100%;
		height: 200px;
	}

	.spotlight-content-wrap {
		width: 100%;
		padding: 16px;
	}
}

/*--------------------------------------------------------------
# Home carousel
--------------------------------------------------------------*/

.home .carousel-tag-wrap {
	display: none;
}

/*--------------------------------------------------------------
# Home topics
--------------------------------------------------------------*/

.hometopics .image-wrap img {
	height: 180px;
}

.hometopics .posts-grid p.large.nomargin {
	display: none;
}

/*--------------------------------------------------------------
# Pre-footer
--------------------------------------------------------------*/

.pre-footer-global li {
	list-style: none !important;
	display: block !important;
}

.pre-footer-global .widget {
	margin: 0;
}

.pre-footer-global {
	width: 100%;
	display: flex;
	justify-content: center;
	margin-top: 40px;
	margin-bottom: -50px;
}

.pre-footer-global .max-width {
	max-width: 1000px !important;
	width: 100%;
	margin: 0 auto;
}

/*--------------------------------------------------------------
# Palette colour links
--------------------------------------------------------------*/

.has-white-color a,
.has-white-color h2,
.has-white-color h3 {
	color: #ffffff !important;
}

/*--------------------------------------------------------------
# Legacy submenu
--------------------------------------------------------------*/

.menu-item-has-children > .sub-menu {
	display: block !important;
}

.menu-item-has-children > .sub-menu > li {
	display: block !important;
	width: 100% !important;
}

.sub-menu {
	z-index: 2;
	width: 170px !important;
	background: #ffffff;
}

.sub-menu a {
	width: 170px !important;
	padding: 17px 0;
}

/*--------------------------------------------------------------
# Video thumbnail play button
--------------------------------------------------------------*/

.video-thumb {
	position: relative;
	overflow: hidden;
}

/* Play circle. Held hidden by the display:none declared further up. */
.video-thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.65);
	z-index: 2;
	transition: transform 0.25s ease, background 0.25s ease;
}

/* Play triangle. */
.video-thumb::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 0;
	height: 0;
	border-left: 18px solid #ffffff;
	border-top: 12px solid transparent;
	border-bottom: 12px solid transparent;
	transform: translateX(4px);
	z-index: 3;
}

/*--------------------------------------------------------------
# Post carousel play button
--------------------------------------------------------------*/

/* Only for cards that link to a /video/ URL. */
.post-carousel-item a[href*="/video/"] .image-wrap {
	position: relative;
}

.post-carousel-item a[href*="/video/"] .image-wrap::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.65);
	z-index: 2;
	pointer-events: none;
}

.post-carousel-item a[href*="/video/"] .image-wrap::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 0;
	height: 0;
	border-left: 18px solid #ffffff;
	border-top: 12px solid transparent;
	border-bottom: 12px solid transparent;
	transform: translateX(4px);
	z-index: 3;
	pointer-events: none;
}

/*--------------------------------------------------------------
# Legacy menu search icon
--------------------------------------------------------------*/

/* Driven by a CSS class set on a WordPress menu item, so whether it is still
   in use depends on the menu configuration rather than on the theme files.
   The current header renders its own search icon as .ctx-search-icon. */
.menu-search-icon {
	display: flex;
	align-items: center;
	overflow: visible !important;
	border: none !important;
}

.menu-search-icon > a {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0 !important;
	border: none !important;
	border-radius: 50%;
	font-size: 0;
	line-height: 1;
}

.menu-search-icon > a::before {
	content: "";
	display: block;
	width: 18px;
	height: 18px;
	border: none !important;
	background-image: url("https://contextarchstg.wpenginepowered.com/wp-content/uploads/2025/12/search-icon.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/*--------------------------------------------------------------
# Search results
--------------------------------------------------------------*/

.search-results-page {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}

.search-results-grid {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 30px;
	margin-bottom: 50px;
}

.search-item {
	display: flex;
	flex-direction: column;
	padding: 20px;
	border: 1px solid #eeeeee;
	background: #ffffff;
}

.search-thumb img {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: 15px;
}

.search-title {
	margin: 0 0 10px;
}

.search-excerpt {
	margin-bottom: 15px;
}

.search-read-more {
	display: inline-block;
	margin-top: auto;
	font-weight: 600;
	text-decoration: none;
}

@media (max-width: 1024px) {
	.search-results-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.search-results-grid {
		grid-template-columns: 1fr;
	}
}

/*--------------------------------------------------------------
# Social sharing
--------------------------------------------------------------*/

.social-sharing {
	margin-top: -40px;
}

/*--------------------------------------------------------------
# Newsletter side
--------------------------------------------------------------*/

.single-post-custom .block.newsletter-side .inner {
	gap: 0;
	margin-top: -30px;
}

/*--------------------------------------------------------------
# Latest posts widget
--------------------------------------------------------------*/

.wp-block-latest-posts.wp-block-latest-posts__list li {
	clear: both;
	overflow-wrap: break-word;
	margin-bottom: 10px;
}

/*--------------------------------------------------------------
# Related articles
--------------------------------------------------------------*/

.single-post-custom .post-related {
	margin-top: 20px !important;
	padding-top: 60px;
	border-top: 1px solid #eeeeee;
}

.single-post-custom .related-title {
	margin-bottom: 24px;
	font-size: 1.8rem;
	text-align: center;
}

.single-post-custom .related-content .related-widget {
	margin-bottom: 24px;
}

.related-posts {
	margin: 0;
	padding-top: 0;
}

.related-posts-title {
	text-align: center;
}

/*--------------------------------------------------------------
# Single custom: hero and sidebar
--------------------------------------------------------------*/

.single-post-custom .post-hero {
	width: 100%;
	padding: 60px 20px;
	background: #f7f7f7;
}

.single-post-custom .post-hero-inner {
	max-width: 1200px;
	margin: 0 auto;
}

.single-post-custom .post-title {
	margin-bottom: 24px;
	font-size: 2.6rem;
	line-height: 1.2;
}

.single-post-custom .post-featured-image img {
	width: 100%;
	height: auto;
	margin-bottom: 24px;
}

.single-post-custom .post-meta {
	font-size: 16px;
	color: #666666;
}

.single-post-custom .post-author {
	margin-bottom: 4px;
}

.single-post-custom .post-body {
	padding: 60px 20px;
}

.single-post-custom .post-body-inner {
	display: grid;
	grid-template-columns: 1fr 3fr;
	gap: 60px;
	max-width: 1200px;
	margin: 0 auto;
}

.single-post-custom .post-sidebar {
	position: sticky;
	top: 120px;
}

.sidebar-widget {
	margin-bottom: 32px;
}

.single-post-custom .post-content {
	font-size: 1rem;
	line-height: 1.7;
}

.single-post-custom .post-bottom {
	padding: 20px;
	border-top: 0 solid #eeeeee;
}

.single-post-custom .post-bottom-inner {
	max-width: 1200px;
	margin: 0 auto;
}

.single-post-custom .customtitle {
	position: relative;
	margin-bottom: 16px;
	padding-left: 20px;
	font-size: 22px;
	font-weight: 600;
	line-height: 40px;
}

.single-post-custom .customtitle::before {
	content: "";
	position: absolute;
	top: 0.6rem;
	left: 0;
	width: 0.8rem;
	height: 1.3rem;
	background-color: #fe7e01;
}

.single-post-custom .topic-item {
	display: inline-block;
	margin: 0 8px 8px 0;
	padding: 6px 12px;
	border: 1px solid #fe7e01;
	border-radius: 3px;
	font-size: 13px;
}

.single-post-custom .post-topics {
	margin-top: 40px;
}

/* Wins over the related articles rule above, which is the order the two had
   in the Customizer. */
.single-post-custom .post-related {
	margin-top: 64px;
}

.single-post-custom .related-title {
	margin-bottom: 24px;
	font-size: 1.8rem;
}

/* Content first, sidebar after. */
@media (max-width: 992px) {
	.single-post-custom .post-body-inner {
		grid-template-columns: 1fr;
	}

	.single-post-custom .post-title {
		font-size: 1.9rem;
	}

	.single-post-custom .post-content {
		order: 1;
	}

	/* The Customizer declared this twice in two separate media blocks. Both
	   margins survived the cascade there, so both are kept here. */
	.single-post-custom .post-sidebar {
		order: 2;
		position: static;
		margin-top: 48px;
		margin-bottom: 48px;
	}
}

/*--------------------------------------------------------------
# Long read captions
--------------------------------------------------------------*/

p.trf-image-caption {
	margin-top: 6px;
	margin-bottom: 28px;
	font-size: 14px;
	font-style: italic;
	line-height: 1.45;
	color: #666666;
}

/*--------------------------------------------------------------
# Per-post overrides
--------------------------------------------------------------*/

/* Urban humans: horizontal image sequence. */
body.postid-85952 .trf-legacy-image-sequence {
	display: flex;
	gap: 20px;
	margin: 30px 0;
	padding-bottom: 10px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

body.postid-85952 .trf-legacy-image-sequence > figure {
	flex: 0 0 100%;
	margin: 0;
	scroll-snap-align: start;
}

body.postid-85952 .trf-legacy-image-sequence img {
	display: block;
	width: 100%;
	height: auto;
}