/*
Theme Name: Insight AEM
Template: insight
Description: Insight with the thomsonreuters.com (AEM) page design. Child theme of Insight, which still provides the gate, Eloqua, resources and Customizer settings.
Author: Thomson Reuters
Version: 1.0.0
Text Domain: insight
*/

/**
 * Styles matched to the AEM AU blog template, loaded after assets/css/aem.css
 * (insight_aem_enqueue_assets() in functions.php).
 * #tr-blog-content wraps the_content() in partials/post-body.php.
 */

/* Icons (insight_icon()): sized and aligned like the Font Awesome font icons they replace. */
.insight-icon {
	flex-shrink: 0;
	width: auto;
	height: 1em;
	overflow: visible;
	vertical-align: -0.125em;
}

/* AEM text classes: same names and values as thomsonreuters.com's clientlib-site, so authors can copy
   them from AEM as they are, on a span (AEM's `<span class="variant headlineLarge">`,
   `<span class="color brand_color">`) or on the tag itself. The theme templates use them too, in place
   of their own font sizes, so component rules below set no font where an element has one of these. Sizes come from the --dcl-type-* tokens in
   aem.css, which step down at 1024px and 600px. :is() matches the specificity of AEM's base h1-h6/p
   rules, and the #tr-blog-content copies beat our post-content rules further down. */

/* Size */
:is(h1, h2, h3, h4, h5, h6, p, span, li, a, div, time).displayXL,
#tr-blog-content .displayXL {
	font: var(--dcl-type-display-default-xl-strong-standard);
}

:is(h1, h2, h3, h4, h5, h6, p, span, li, a, div, time).display,
#tr-blog-content .display {
	font: var(--dcl-type-display-default-lg-strong-standard);
}

@media (max-width: 340px) {
	:is(h1, h2, h3, h4, h5, h6, p, span, li, a, div, time).display,
	#tr-blog-content .display {
		font-size: 28px;
	}
}

:is(h1, h2, h3, h4, h5, h6, p, span, li, a, div, time).headlineXlarge,
#tr-blog-content .headlineXlarge {
	font: var(--dcl-type-heading-default-4xl-strong-standard);
}

:is(h1, h2, h3, h4, h5, h6, p, span, li, a, div, time).headlineLarge,
#tr-blog-content .headlineLarge {
	font: var(--dcl-type-heading-default-3xl-strong-standard);
}

:is(h1, h2, h3, h4, h5, h6, p, span, li, a, div, time).headlineMedium,
#tr-blog-content .headlineMedium {
	font: var(--dcl-type-heading-default-2xl-strong-standard);
}

:is(h1, h2, h3, h4, h5, h6, p, span, li, a, div, time).headlineSmall,
#tr-blog-content .headlineSmall {
	font: var(--dcl-type-heading-default-xl-strong-standard);
}

:is(h1, h2, h3, h4, h5, h6, p, span, li, a, div, time).subtitle,
#tr-blog-content .subtitle {
	font: var(--dcl-type-heading-default-lg-strong-standard);
}

:is(h1, h2, h3, h4, h5, h6, p, span, li, a, div, time).bodyLarge,
#tr-blog-content .bodyLarge {
	font: var(--dcl-type-body-default-lg-regular-standard);
}

:is(h1, h2, h3, h4, h5, h6, p, span, li, a, div, time).bodyMedium,
#tr-blog-content .bodyMedium {
	font: var(--dcl-type-body-default-md-regular-standard);
}

:is(h1, h2, h3, h4, h5, h6, p, span, li, a, div, time).bodySmall,
#tr-blog-content .bodySmall {
	font: var(--dcl-type-body-default-sm-regular-standard);
}

:is(h1, h2, h3, h4, h5, h6, p, span, li, a, div, time).eyebrow,
#tr-blog-content .eyebrow {
	font: var(--dcl-type-eyebrow-default-md-strong-standard);
}

/* Bold inside a heading size stays medium, as in AEM. */
:is(.displayXL, .display, .headlineXlarge, .headlineLarge, .headlineMedium, .headlineSmall, .subtitle) b {
	font-weight: 500;
}

/* Colour */
:is(h1, h2, h3, h4, h5, h6, p, span, li, a).primary_color,
#tr-blog-content .primary_color {
	color: #212223;
}

:is(h1, h2, h3, h4, h5, h6, p, span, li, a).secondary_color,
#tr-blog-content .secondary_color {
	color: #212223;
}

:is(h1, h2, h3, h4, h5, h6, p, span, li, a).tertiary_color,
#tr-blog-content .tertiary_color {
	color: #212223;
}

:is(h1, h2, h3, h4, h5, h6, p, span, li, a).heavy_color,
#tr-blog-content .heavy_color {
	color: #212223;
}

:is(h1, h2, h3, h4, h5, h6, p, span, li, a):is(.brand_color, .color-orange),
#tr-blog-content :is(.brand_color, .color-orange) {
	color: #d64000;
}

:is(h1, h2, h3, h4, h5, h6, p, span, li, a):is(.racing_green_color, .color-racing-green),
#tr-blog-content :is(.racing_green_color, .color-racing-green) {
	color: #123015;
}

:is(h1, h2, h3, h4, h5, h6, p, span, li, a):is(.inverse_color, .color-white),
#tr-blog-content :is(.inverse_color, .color-white) {
	color: #fff;
}

/* Hero title: between AEM headlineXlarge (40px) and display (56px) on desktop */
@media (min-width: 1024px) {
	#hero-module h1 .headlineXlarge {
		font-size: 52px;
	}
}

/* Author line: AEM bodyMedium (class in partials/post-hero.php) in one grey; the author link is semibold
   and only underlines on hover. */
#hero-module p .insight-byline {
	color: #212223;
}

/* Byline (insight_aem_byline(): post/resource hero, thank-you page). */
.insight-byline a,
.insight-byline a:link,
.insight-byline a:visited {
	display: inline;
	padding: 0;
	font: inherit;
	font-weight: 600;
	color: inherit;
	text-decoration: none;
}

.insight-byline a:hover,
.insight-byline a:focus {
	text-decoration: underline;
}

/* Resource type link: regular weight, as the plain label it replaces. */
.insight-byline a.insight-byline__type {
	font-weight: 400;
}

.insight-byline__sep {
	margin: 0 10px;
	color: #7a7a7a;
}

/* Hero text columns: drop AEM's 12px .aem-GridColumn gutter so they line up with the featured image and post body. */
#hero-module .richtext.aem-GridColumn {
	padding-left: 0;
	padding-right: 0;
}

/* Tighter hero so the featured image and post body sit higher: 30px above the breadcrumb (AEM 40px),
   8px under it (AEM 24px wrapper + 24px element margin) and 16px under the title. */
#hero-module .cmp-top-spacing-40 {
	margin-top: 30px;
}

#hero-module .richtext.cmp-bottom-spacing-24 {
	margin-bottom: 8px;
}

#hero-module .richtext.cmp-bottom-spacing-24 p.richtext--element-font,
#hero-module h1.richtext--element-font {
	margin-bottom: 0;
}

#hero-module .richtext.cmp-top-spacing-24 {
	margin-top: 16px;
}

/* 24px under the byline (AEM 24px element margin + 8px wrapper + 32px container = 64px). */
#hero-module .richtext.cmp-top-spacing-24 p.richtext--element-font,
#hero-module .richtext.cmp-bottom-spacing-8 {
	margin-bottom: 0;
}

#hero-module .cmp-bottom-spacing-32 {
	margin-bottom: 24px;
}

/* Breadcrumb links: keep the brand_color orange instead of AEM's blue/visited purple */
#hero-module .brand_color a,
#hero-module .brand_color a:link,
#hero-module .brand_color a:visited {
	color: inherit;
	text-decoration: none;
}

/* Breadcrumb links: AEM's `.richtext a` sets Source Sans 3, 2px padding and inline-flex;
   use the eyebrow's Clario 500 (16px, 14px on phones) like the separators. */
#hero-module .eyebrow a {
	display: inline;
	padding: 0;
	font: inherit;
}

#hero-module .brand_color a:hover,
#hero-module .brand_color a:focus {
	text-decoration: underline;
}

/* Base: body copy (lists, tables, quotes, captions) is Source Sans 3; headings are Clario. */
#tr-blog-content {
	font-size: 19px !important;
	font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", roboto, helvetica, arial, sans-serif;
	color: #212223;
}

#tr-blog-content :is(h1, h2, h3, h4, h5, h6) {
	font-family: Clario, "Helvetica Neue", arial, sans-serif;
}

/* Editors often bold whole headings; aem.css sets every strong to 700, so keep the heading's own weight. */
#tr-blog-content :is(h1, h2, h3, h4, h5, h6) :is(strong, b) {
	font-weight: inherit;
}

/* Paragraphs */
#tr-blog-content p {
	font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", roboto, helvetica, arial, sans-serif;
	font-size: 19px;
	font-weight: 400;
	line-height: 30px;
	letter-spacing: normal;
	color: #212223;
	margin: 0 0 24px;
}

/* Headings: h2s are secondary_color grey site-wide; post/resource content below keeps brand_color. */
h2 {
	color: #212223;
}

#tr-blog-content h2 {
	font-family: Clario, "Helvetica Neue", arial, sans-serif;
	font-size: 32px;
	font-weight: 500;
	line-height: 44px;
	letter-spacing: -0.1px;
	color: #d64000;
	margin: 40px 0 16px;
}

#tr-blog-content h3,
#tr-blog-content h4,
#tr-blog-content .schema-faq-question {
	font-family: Clario, "Helvetica Neue", arial, sans-serif;
	font-size: 19px;
	font-weight: 700;
	line-height: 36px;
	color: #212223;
	margin: 32px 0 12px;
}

/* Lists: markers sit inside the text column (on the paragraphs' left edge), text indented 28px. */
#tr-blog-content ul,
#tr-blog-content ol {
	font-size: 19px;
	font-weight: 400;
	line-height: 30px;
	color: #212223;
	margin: 0 0 24px;
	padding: 0 0 0 28px;
	list-style-position: outside;
}

#tr-blog-content ul {
	list-style-type: disc;
}

#tr-blog-content ol {
	list-style-type: decimal;
}

#tr-blog-content li {
	font-size: 19px;
	font-weight: 400;
	line-height: 30px;
	color: #212223;
	margin: 0 0 20px;
	padding: 0 0 0 4px;
}

#tr-blog-content li > ul,
#tr-blog-content li > ol {
	margin: 20px 0 0;
}

/* Mobile */
@media (max-width: 768px) {
	#tr-blog-content h1 {
		font-size: 36px;
		line-height: 42px;
	}

	#tr-blog-content h2 {
		font-size: 28px;
		line-height: 34px;
	}

	#tr-blog-content h3 {
		font-size: 24px;
		line-height: 30px;
	}

	#tr-blog-content p,
	#tr-blog-content ul,
	#tr-blog-content ol,
	#tr-blog-content li {
		font-size: 18px;
		line-height: 28px;
	}
}

/* Share row (Insight_Share_Buttons). ID selector to beat its inline <style>, printed after this file. */
#insight-share-row .insight-share {
	gap: 12px;
	margin: 40px 0 0;
	padding: 0;
	border-top: 0;
	border-bottom: 0;
}

#insight-share-row .insight-share-label {
	font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", roboto, helvetica, arial, sans-serif;
	font-size: 16px;
	color: #212223;
}

/* Under-post author box + tags (partials/post-footer.php). One divider, between the share row and the
   author box; none above the tags. */
.insight-post-footer {
	font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", roboto, helvetica, arial, sans-serif;
	margin: 40px 0 40px;
}

.insight-post-footer .insight-author {
	padding-top: 40px;
	border-top: 1px solid #e5e5e5;
}

.insight-author .cmp-image img {
	display: block;
	width: 100%;
	max-width: 105px;
	height: auto;
	aspect-ratio: 1;
	border-radius: 10px;
	object-fit: cover;
}

/* Size from AEM bodyMedium on the p (partials/post-footer.php). */
.insight-author p {
	color: #212223;
	margin: 0;
}

/* Inline, without AEM's .richtext a inline-flex and 2px padding, so the name lines up with the bio. */
.insight-author p a {
	display: inline;
	padding: 0;
	color: #123015;
	text-decoration: underline;
}

/* No photo: the text column starts on the share row's left edge, not after AEM's 12px column gutter. */
.insight-author--no-photo .aem-GridColumn {
	padding-left: 0;
}

.insight-author-role {
	font-weight: 600;
}

/* Topics block, matched to the thomsonreuters.com/en/institute report pages. */
.insight-tags {
	margin-top: 32px;
}

.insight-tags .cmp-container-flex {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0;
}

/* Plain-link copy of the AEM dig-button secondary look, no web component needed. */
.insight-tags a.insight-tag {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 4px 8px;
	border: 1px solid #212223;
	border-radius: 4px;
	background: #fff;
	color: #212223;
	font-size: 16px;
	font-weight: 600;
	line-height: 22px;
	text-decoration: none;
}

/* Hover matches the AEM secondary button: orange 2px border (inset shadow adds the 2nd px, no layout shift), light orange fill. */
.insight-tags a.insight-tag:hover,
.insight-tags a.insight-tag:focus {
	border-color: #d64000;
	box-shadow: inset 0 0 0 1px #d64000;
	background: #f9f7f5;
	color: #212223;
	text-decoration: none;
}

/* Right-column author avatar (partials/post-sidebar.php): keep it square, don't stretch to the img height attribute. */
#author-rightsidebar .cmp-image img {
	display: block;
	width: 100%;
	max-width: 64px;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
}

/* "You may also like" widget (Insight_Widget in functions.php), matched to the AEM mockup. */
#sidebar-primary .widget-title {
	margin: 0 0 20px;
	font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", roboto, helvetica, arial, sans-serif;
	font-size: 19px;
	font-weight: 700;
	line-height: 24px;
	color: #212223;
}

.insight-related-widget {
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", roboto, helvetica, arial, sans-serif;
}

.insight-related-item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin: 0 0 20px;
	padding: 0 0 20px;
}

.insight-related-thumb {
	flex: 0 0 80px;
	width: 80px;
	height: 80px;
	overflow: hidden;
	border-radius: 8px;
	background: #f9f7f5;
}

.insight-related-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.insight-related-text {
	min-width: 0;
}

/* Size from AEM bodyMedium (inc/class-related-widget.php). */
.insight-related-widget a.insight-related-title,
.insight-related-widget a.insight-related-title:visited {
	color: #212223;
	text-decoration: none;
}

.insight-related-widget a.insight-related-title:hover,
.insight-related-widget a.insight-related-title:focus {
	color: #d64000;
}

/* Promo card widget (insight-widgets plugin, class-promo-card-widget.php) */
.insight-promo-card {
	margin: 0 0 40px;
	overflow: hidden;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	background: #fff;
	font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", roboto, helvetica, arial, sans-serif;
}

.insight-promo-card__image {
	display: block;
	aspect-ratio: 16 / 9;
	background: #f9f7f5;
}

.insight-promo-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.insight-promo-card__body {
	padding: 24px;
}

/* Sizes from AEM classes in the plugin markup: subtitle title (headlineSmall on landscape cards), bodyMedium
   text and link. #tr-blog-content variants so the post-content p rules don't win when the card is in a post. */
.insight-promo-card p.insight-promo-card__title,
#tr-blog-content .insight-promo-card p.insight-promo-card__title {
	margin: 0 0 8px;
	color: #212223;
}

.insight-promo-card p.insight-promo-card__text,
#tr-blog-content .insight-promo-card p.insight-promo-card__text {
	margin: 0 0 8px;
	color: #212223;
}

.insight-promo-card a.insight-promo-card__link,
.insight-promo-card a.insight-promo-card__link:visited {
	color: #123015;
	text-decoration: underline;
}

.insight-promo-card a.insight-promo-card__link:hover,
.insight-promo-card a.insight-promo-card__link:focus {
	text-decoration: none;
}

/* Landscape: image left, text right (in-content promo). */
.insight-promo-card--landscape {
	display: flex;
	align-items: stretch;
	margin: 40px 0;
	border-color: #e5e5e5;
}

.insight-promo-card--landscape .insight-promo-card__image {
	flex: 0 0 30%;
	aspect-ratio: auto;
	min-height: 142px;
}

.insight-promo-card--landscape .insight-promo-card__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 24px;
}

@media (max-width: 600px) {
	.insight-promo-card--landscape {
		flex-direction: column;
	}

	.insight-promo-card--landscape .insight-promo-card__image {
		flex-basis: auto;
		aspect-ratio: 16 / 9;
	}
}

/* Topic mega menu (partials/topic-menu.php), styled like the AEM dig-sticky-nav bar (not sticky).
   Its hover panels sit over the page content, but under the AEM header's own dropdowns. */
.insight-topic-menu-wrap {
	position: relative;
	z-index: 50;
}

.site-specific-header {
	position: relative;
	z-index: 60;
}

/* aem.css gives each header experience fragment z-index 10, which wraps the whole site header in one
   stacking context below the topic menu (50), so the header's dropdowns (Discover Thomson Reuters)
   opened behind the topic bar. Lift the fragments above it. */
#container-756f2f0300 .experiencefragment,
#container-4043d357f5 .experiencefragment {
	z-index: 60;
}

/* Search box: no placeholder text, as production (emcm-ui always sets "Search"). */
.tr-SiteHeader .tr-SearchInput-input::placeholder {
	color: transparent;
}

.insight-topic-menu {
	position: relative;
	background: #fff;
	border-top: 1px solid #e5e5e5;
	border-bottom: 1px solid #9f9f9f;
	font-family: Clario, "Helvetica Neue", arial, sans-serif;
}

/* Desktop bar as on the production theme (.tr-menu): #f9f7f5, no rules, 51px tall. */
@media (min-width: 1200px) {
	.insight-topic-menu {
		background: #f9f7f5;
		border-top: 1px solid #e5e5e5;
		border-bottom: 0;
	}

	.insight-topic-menu .insight-topic-menu__bar {
		min-height: 0;
	}

	/* No rule between the header and the grey bar, as on production. */
	.tr-SiteHeader {
		border-bottom: 0;
	}

	/* Beats the base link rule further down. */
	.insight-topic-menu .insight-topic-menu__bar .insight-topic-menu__link {
		padding: 15px 0;
		font-size: 16px;
		font-weight: 400;
		line-height: 21px;
	}
}

/* Header rows on the page content's edges. AEM's header inners are 1200px wide with 18px
   padding, so their items sat 18px in from the content on wide screens and 4-6px out on
   narrower ones. The content (.module-container) is 1200px wide with 24px side padding from
   768px and 20px below, so: 1248px wide including the same padding. */
.tr-GlobalHeader .tr-GlobalHeader-inner,
.tr-SiteHeader .tr-SiteHeader-inner,
.insight-topic-menu__bar,
.insight-topic-menu__inner {
	box-sizing: border-box;
	width: 100%;
	max-width: 78rem;
	margin: 0 auto;
	padding-left: 24px;
	padding-right: 24px;
}

/* Phones: header spaced exactly as on the production theme (measured at 375px: global links,
   logo, menu/search icons, full-width site-name bar). */
@media (max-width: 767px) {
	.tr-GlobalHeader .tr-GlobalHeader-inner {
		padding-left: 18px;
		padding-right: 18px;
	}

	.tr-SiteHeader .tr-SiteHeader-inner {
		padding-left: 0;
		padding-right: 0;
	}

	.insight-topic-menu__bar,
	.insight-topic-menu__inner {
		padding-left: 0;
		padding-right: 0;
	}
}

/* AEM gives the logo its own 18px left margin on top of the inner padding, and the logo SVG
   (a background image) has 12px of empty space before the circle. Pull it back so the circle
   lines up with the text above and below it. */
.tr-SiteHeader .tr-SiteHeader-logo {
	margin-left: -12px;
	padding-left: 0;
}

.tr-SiteHeader .tr-SiteHeader-logoInner {
	background-position: left center;
}

@media (max-width: 767px) {
	.tr-SiteHeader .tr-SiteHeader-logo {
		margin: 0 0 0 6px;
	}

	/* Logo the same size as production's (187px wide): box scaled up from AEM's 196 x 48. */
	.tr-SiteHeader .tr-SiteHeader-logo {
		width: auto;
	}

	.tr-SiteHeader .tr-SiteHeader-logoInner {
		width: 224px;
		height: 55px;
	}

	/* Menu (and close) icon in production's position. */
	.tr-SiteHeader .tr-SiteHeader-toggleButton {
		margin-right: 14px;
	}
}

.insight-topic-menu__bar {
	display: flex;
	align-items: center;
	min-height: 74px;
}

.insight-topic-menu__items {
	display: flex;
	align-items: center;
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Site name and pipe before the topics (partials/topic-menu.php). */
.insight-topic-menu .insight-topic-menu__site {
	font-size: 16px;
	font-weight: 600;
	line-height: 22px;
	white-space: nowrap;
}

/* Pipe: a 1px rule, taller than the text, between the site name and the topics. */
.insight-topic-menu__sep {
	flex: none;
	width: 1px;
	height: 24px;
	margin: 0 28px 0 24px;
	background: #9f9f9f;
}

@media (max-width: 767px) {
	.insight-topic-menu .insight-topic-menu__site,
	.insight-topic-menu__sep {
		display: none;
	}
}

/* AEM sets a:link blue, a:visited purple and underlines; reset everything inside the menu. */
.insight-topic-menu a,
.insight-topic-menu a:link,
.insight-topic-menu a:visited {
	color: #212223;
	text-decoration: none;
}

.insight-topic-menu .insight-topic-menu__link {
	display: block;
	padding: 26px 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 22px;
	white-space: nowrap;
}

.insight-topic-menu .insight-topic-menu__item:hover > .insight-topic-menu__link,
.insight-topic-menu .insight-topic-menu__item:focus-within > .insight-topic-menu__link {
	color: #d64000;
}

/* Hover intent without JS: a panel shows 150ms after the pointer arrives and hides 250ms
   after it leaves, so passing over an item or briefly leaving the panel doesn't open or
   close it. No fade: a half-transparent panel lets the page behind show through. Moving
   between items, the new panel shows before the old one hides (and sits above it), so
   there's no gap. Keyboard focus shows it straight away. */
.insight-topic-menu__panel {
	visibility: hidden;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 1;
	background: #fff;
	border-bottom: 1px solid #e5e5e5;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
	transition: visibility 0s linear 0.25s;
}

.insight-topic-menu__item:hover > .insight-topic-menu__panel {
	visibility: visible;
	z-index: 2;
	transition-delay: 0.15s;
}

.insight-topic-menu__item:focus-within > .insight-topic-menu__panel {
	visibility: visible;
	z-index: 2;
	transition: none;
}

.insight-topic-menu .insight-topic-menu__inner {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 30px;
	padding-top: 36px;
	padding-bottom: 40px;
}

/* Pulled up by the link padding and line leading, so the first link's text lines up with the card images. */
.insight-topic-menu__children ul {
	margin: -14px 0 24px;
	padding: 0;
	list-style: none;
}

.insight-topic-menu .insight-topic-menu__children li a {
	display: block;
	padding: 8px 0;
	font-size: 16px;
	line-height: 23px;
}

.insight-topic-menu .insight-topic-menu__more {
	font-size: 16px;
	font-weight: 700;
}

.insight-topic-menu__more span {
	color: #d64000;
}

.insight-topic-menu .insight-topic-menu__children li a:hover,
.insight-topic-menu .insight-topic-menu__children li a:focus {
	color: #d64000;
}

/* Below-desktop parts: the chevron toggles and the Solutions menu items. */
.insight-topic-menu__toggle,
.insight-topic-menu__item--extra {
	display: none;
}

/* Below 1200px (where the AEM header shows its menu button), as in the previous theme: no
   bar. The menu button (html.insight-nav-open, assets/js/topic-menu.js) slides the
   topics open as a list that pushes the page down; each row expands in place with
   sub-categories and More (no cards, no hover). */
@media (max-width: 1199px) {
	.insight-topic-menu-wrap {
		display: none;
	}

	.insight-nav-open .insight-topic-menu-wrap {
		display: block;
	}

	/* Slide open/closed: 0.35s, as production's Bootstrap collapse. */
	.insight-topic-menu-wrap.is-sliding {
		overflow: hidden;
		transition: height 0.35s ease;
	}

	/* Open search, as production: no menu/close icon beside the logo (a tap elsewhere closes
	   it, insight-topic-menu.js). */
	.tr-SiteHeader.is-searching .tr-SiteHeader-buttons {
		visibility: hidden;
	}

	.insight-topic-menu__bar,
	.insight-topic-menu__inner {
		padding-left: 0;
		padding-right: 0;
	}

	/* Rows match the production theme: full width, 56px, Knowledge2017 16px at 19px in,
	   #9f9f9f rule under each row, orange chevron 20px from the right. */
	.insight-topic-menu {
		border-top: 0;
		border-bottom: 0;
	}

	.insight-topic-menu__bar {
		display: block;
		min-height: 0;
	}

	.insight-topic-menu__items {
		display: block;
	}

	.insight-topic-menu .insight-topic-menu__item {
		display: flex;
		flex-wrap: wrap;
	}

	.insight-topic-menu .insight-topic-menu__item--extra {
		display: flex;
	}

	.insight-topic-menu .insight-topic-menu__link,
	.insight-topic-menu .insight-topic-menu__item:hover > .insight-topic-menu__link,
	.insight-topic-menu .insight-topic-menu__item:focus-within > .insight-topic-menu__link {
		flex: 1 1 auto;
		min-width: 0;
		padding: 19px 0 19px 19px;
		border-bottom: 1px solid #9f9f9f;
		font-family: Knowledge2017, "Helvetica Neue", helvetica, arial, sans-serif;
		font-size: 16px;
		font-weight: 400;
		line-height: 17px;
		color: #212223;
		white-space: normal;
	}

	.insight-topic-menu__toggle {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex: 0 0 auto;
		width: 64px;
		padding: 0 20px 0 0;
		border: 0;
		border-bottom: 1px solid #9f9f9f;
		background: none;
		color: #d64000;
		cursor: pointer;
	}

	.insight-topic-menu__toggle svg {
		width: 10px;
		height: 6px;
		overflow: visible;
		transition: transform 0.3s;
	}

	.insight-topic-menu__toggle svg path {
		stroke-width: 1.5px;
		vector-effect: non-scaling-stroke;
	}

	.insight-topic-menu__item.is-open > .insight-topic-menu__toggle svg {
		transform: rotate(180deg);
	}

	/* Expanded topic: in the flow, no hover delay or shadow. */
	.insight-topic-menu__panel,
	.insight-topic-menu__item:hover > .insight-topic-menu__panel,
	.insight-topic-menu__item:focus-within > .insight-topic-menu__panel {
		display: none;
		position: static;
		flex: 0 0 100%;
		visibility: visible;
		border: 0;
		box-shadow: none;
		transition: none;
	}

	/* Expanded topic, as on production: 10px top/bottom, links 14px at 40px in, bold More,
	   #9f9f9f rule underneath. */
	.insight-topic-menu__item.is-open > .insight-topic-menu__panel {
		display: block;
		padding: 10px 0;
		border-bottom: 1px solid #9f9f9f;
	}

	.insight-topic-menu .insight-topic-menu__inner {
		display: block;
		padding: 0;
	}

	.insight-topic-menu__inner .insight-card {
		display: none;
	}

	.insight-topic-menu__children ul {
		margin: 0;
	}

	.insight-topic-menu .insight-topic-menu__children li a {
		padding: 10px 40px;
		font-family: Knowledge2017, "Helvetica Neue", helvetica, arial, sans-serif;
		font-size: 16px;
		line-height: 24px;
	}

	.insight-topic-menu .insight-topic-menu__more {
		display: block;
		padding: 12px 40px 10px;
		font-family: Knowledge2017, "Helvetica Neue", helvetica, arial, sans-serif;
		font-size: 16px;
		font-weight: 700;
		line-height: 21px;
	}

	/* Menu button shows a close (X) icon while the list is open. */
	.insight-nav-open .tr-SiteHeader-toggleButton .tr-Svg {
		visibility: hidden;
	}

	.insight-nav-open .tr-SiteHeader-toggleButton {
		position: relative;
	}

	.insight-nav-open .tr-SiteHeader-toggleButton::after {
		content: "";
		position: absolute;
		inset: 0;
		background-color: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 5L5 19M19 19L5 5' fill='none' stroke='%23000' stroke-linecap='square' stroke-width='2'/%3E%3C/svg%3E") center / 24px no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 5L5 19M19 19L5 5' fill='none' stroke='%23000' stroke-linecap='square' stroke-width='2'/%3E%3C/svg%3E") center / 24px no-repeat;
	}
}

/* Featured image */
img.attachment-featured-large,
.size-featured-large img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 0 40px;
	border-radius: 8px;
}

/* Post/resource hero: full column width, same shape as the cards (.insight-card__image) whatever the
   file's shape. Old-theme wide banners have their photo on the right (text sat on the left), so crop
   towards that side; no horizontal effect on images this shape or taller. */
img.insight-featured-image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 370 / 184;
	margin: 0 0 24px;
	border-radius: 8px;
	object-fit: cover;
	object-position: 80% 50%;
}

/* Background colours for any section (cards, tags, Explore by Topic, etc): add one class to the section's
   outer div (no class = white). */
.insight-bg--light-grey {
	background: #f9f7f5;
}

.insight-bg--light-blue {
	background: #e3f1fd;
}

.insight-bg--light-green {
	background: #e3f3ee;
}

.insight-bg--light-gold {
	background: #fcf2da;
}

/* Less than AEM's 84px bottom padding under the banner, before the next section. */
.front-primary.module-container > .cmp-container > .insight-card-grid {
	padding-bottom: 56px;
}

/* Category/tag archives (archive.php): breadcrumb and title as on posts (partials/post-hero.php), then the
   card grid. No bottom padding on the heading block, so the grid's own 48px is the gap. */
.insight-archive-head.module-container > .cmp-container > .insight-archive-head__inner {
	padding-bottom: 0;
}

/* Size from AEM eyebrow on the p. */
.insight-archive-head p.insight-archive-head__crumbs {
	margin: 0 0 24px;
	color: #d64000;
}

.insight-archive-head__crumbs a,
.insight-archive-head__crumbs a:link,
.insight-archive-head__crumbs a:visited {
	color: #d64000;
	text-decoration: none;
}

.insight-archive-head__crumbs a:hover,
.insight-archive-head__crumbs a:focus {
	text-decoration: underline;
}

.insight-archive-head h1.insight-archive-head__title {
	max-width: 83.333%;
	margin: 0;
	font-family: Clario, "Helvetica Neue", arial, sans-serif;
	font-size: 28px;
	font-weight: 500;
	line-height: 120%;
	color: #123015;
}

.insight-archive-head__text {
	max-width: 800px;
	margin-top: 16px;
	color: #212223;
}

/* Font from AEM's bodyLarge class on the element (16px/24px, 20px/30px from 1024px). */
/* Paragraphs inherit it: AEM's paragraph rule (:not([class|=...]) > p) would make it 16px/20px. */
.insight-archive-head .insight-archive-head__text p {
	margin: 0 0 16px;
	font-size: inherit;
	line-height: inherit;
}

/* Contributor pages (archive.php): photo (3 of 12 columns, AEM's cmp-image--rounded corners) beside
   name, role, bio and links. */
.insight-contributor {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

.insight-contributor__photo {
	flex: 0 0 200px;
}

.insight-contributor__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	border-radius: 10px;
	object-fit: cover;
}

.insight-contributor__text {
	flex: 1;
	min-width: 0;
}

.insight-contributor .insight-archive-head__title {
	max-width: none;
}

/* Sizes from AEM classes in archive.php: bodyLarge role, bodyMedium links. */
.insight-archive-head p.insight-contributor__role {
	margin: 12px 0 0;
	color: #212223;
}

.insight-archive-head p.insight-contributor__links {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin: 16px 0 0;
}

.insight-contributor__links a,
.insight-contributor__links a:visited {
	color: #123015;
	text-decoration: none;
}

.insight-contributor__links a:hover,
.insight-contributor__links a:focus {
	text-decoration: underline;
}

@media (max-width: 767px) {
	.insight-contributor {
		flex-direction: column;
		gap: 24px;
	}

	.insight-contributor__photo {
		flex-basis: auto;
		width: 140px;
	}
}

/* Search results (archive.php): search box like the gated form fields, orange button as AEM's primary button. */
.insight-search {
	display: flex;
	gap: 8px;
	max-width: 640px;
	margin-top: 32px;
}

.insight-search input.insight-search__input {
	flex: 1;
	min-width: 0;
	height: 48px;
	padding: 0 16px;
	border: 1px solid #7a7a7a;
	border-radius: 4px;
	background: #fff;
	font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", roboto, helvetica, arial, sans-serif;
	font-size: 18px;
	color: #212223;
}

.insight-search input.insight-search__input:focus {
	outline: 2px solid #123015;
	outline-offset: 1px;
}

/* Size from AEM bodyMedium. */
.insight-archive-head p.insight-archive-head__count {
	margin: 16px 0 0;
	color: #212223;
}

/* Resources page (archive-insight_resource.php): resource types as icon link rows, 1/2/3 columns. */
.insight-type-list {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.insight-type-list li {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #e5e5e5;
}

.insight-type-list li::before {
	content: none;
}

.insight-type-list a.insight-type-list__link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 28px 0;
	color: #212223;
	text-decoration: none;
}

.insight-type-list__icon,
.insight-type-list__arrow {
	color: #d64000;
	font-size: 24px;
}

.insight-type-list__icon {
	flex: 0 0 32px;
}

/* Size from AEM subtitle. */
.insight-type-list__name {
	flex: 1 1 auto;
}

.insight-type-list__arrow {
	flex: 0 0 auto;
	font-size: 20px;
}

.insight-type-list a.insight-type-list__link:hover .insight-type-list__name,
.insight-type-list a.insight-type-list__link:focus .insight-type-list__name {
	text-decoration: underline;
}

@media (min-width: 768px) {
	.insight-type-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.insight-type-list {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Pages (page.php): text at 8 of 12 columns; wide blocks such as the contributor grid use the full width. */
.insight-page__body > :not(.insight-people) {
	max-width: 800px;
}

.insight-page.module-container > .cmp-container > .insight-card-section__inner {
	padding-top: 40px;
}

#tr-blog-content.insight-page__body > :first-child {
	margin-top: 0;
}

/* AEM primary button: .insight-button (search button, resource form jump link) and the [insight-button]
   shortcode's a.btn. The :link/:visited/:hover colours match aem.css's link rules so they win here. */
a.insight-button,
button.insight-button,
#tr-blog-content a.btn {
	display: inline-block;
	padding: 12px 24px;
	border: 0;
	border-radius: 4px;
	background: #d64000;
	font-family: Clario, "Helvetica Neue", arial, sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
}

a.insight-button:link,
a.insight-button:visited,
#tr-blog-content a.btn:link,
#tr-blog-content a.btn:visited {
	color: #fff;
}

a.insight-button:hover,
a.insight-button:focus,
button.insight-button:hover,
button.insight-button:focus,
#tr-blog-content a.btn:hover,
#tr-blog-content a.btn:focus {
	color: #fff;
	text-decoration: underline;
}

/* [contributor-grid] (Contributors page): rounded square photos (or initials), name and role; 2/4/6 columns. */
#tr-blog-content ul.insight-people {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px 32px;
	margin: 48px 0 0;
	padding: 0;
	list-style: none;
}

#tr-blog-content li.insight-people__item {
	margin: 0;
	padding: 0;
}

.insight-people a.insight-people__link {
	display: block;
	color: #212223;
	text-decoration: none;
}

.insight-people__photo {
	display: block;
	aspect-ratio: 1;
	margin-bottom: 16px;
	overflow: hidden;
	border-radius: 10px;
}

.insight-people__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.insight-people__initials {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	background: #e3f3ee;
	color: #123015;
}

/* Sizes from AEM classes (insight_aem_people() in inc/template-tags.php): headlineXlarge initials,
   subtitle name, bodyMedium role. */
.insight-people__name {
	display: block;
}

.insight-people__role {
	display: block;
	margin-top: 4px;
	color: #212223;
}

.insight-people a.insight-people__link:hover .insight-people__name,
.insight-people a.insight-people__link:focus .insight-people__name {
	text-decoration: underline;
}

@media (min-width: 768px) {
	#tr-blog-content ul.insight-people {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	#tr-blog-content ul.insight-people {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 48px 56px;
	}

	.insight-people__photo {
		width: 85%;
	}
}

/* Download thank-you page (page-thanks.php): archive heading with type/date/author and an outline
   download button, resource cover on the right; then CTA card and related resources on light green. */
.insight-thanks-head__inner {
	display: flex;
	align-items: flex-start;
	gap: 48px;
}

.insight-thanks-head.module-container > .cmp-container > .insight-thanks-head__inner {
	padding-bottom: 64px;
}

.insight-thanks-head__text {
	flex: 1;
	min-width: 0;
}

.insight-thanks-head h1.insight-archive-head__title {
	max-width: none;
}

/* Size from AEM bodyMedium. */
.insight-archive-head p.insight-thanks-head__meta {
	margin: 16px 0 0;
	color: #212223;
}

/* Download CTA: AEM secondary button (--dcl-color-interactive-*-secondary-* on thomsonreuters.com). */
.insight-thanks-head a.insight-thanks-head__button,
.insight-thanks-head a.insight-thanks-head__button:visited {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 24px;
	padding: 11px 20px;
	border: 1px solid #212223;
	border-radius: 4px;
	background: #f9f7f5;
	font-family: Clario, "Helvetica Neue", arial, sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	color: #212223;
	text-decoration: none;
}

.insight-thanks-head a.insight-thanks-head__button:hover,
.insight-thanks-head a.insight-thanks-head__button:focus {
	border-color: #d64000;
	background: #f8eadd;
	color: #212223;
}

.insight-thanks-head a.insight-thanks-head__button:active {
	border-color: #d64000;
	background: #d64000;
	color: #fff;
}

/* Cover: sized by the image, at most 400px wide (landscape) or 400px tall (portrait), and 40% of the row. */
.insight-thanks-head__cover {
	flex: 0 0 auto;
	max-width: 40%;
}

.insight-thanks-head__cover img {
	display: block;
	width: auto;
	height: auto;
	max-width: min(400px, 100%);
	max-height: 400px;
	border: 1px solid #e5e5e5;
}

/* Product CTA banner, on white between the heading and the related cards. */
.insight-thanks-cta-section.module-container > .cmp-container > .insight-thanks-cta-section__inner {
	padding-top: 0;
	padding-bottom: 64px;
}

.insight-thanks-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding: 40px;
	border-radius: 4px;
	background: #123015;
}

/* Sizes from AEM classes in page-thanks.php: eyebrow product, headlineSmall title. */
.insight-thanks-cta p.insight-thanks-cta__product {
	margin: 0 0 8px;
	color: #fff;
}

.insight-thanks-cta p.insight-thanks-cta__title {
	margin: 0;
	color: #fff;
}

.insight-thanks-cta a.insight-thanks-cta__button,
.insight-thanks-cta a.insight-thanks-cta__button:visited {
	flex: 0 0 auto;
	padding: 12px 24px;
	border-radius: 4px;
	background: #d64000;
	font-family: Clario, "Helvetica Neue", arial, sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	color: #fff;
	text-decoration: none;
}

.insight-thanks-cta a.insight-thanks-cta__button:hover,
.insight-thanks-cta a.insight-thanks-cta__button:focus {
	text-decoration: underline;
}

@media (max-width: 767px) {
	.insight-thanks-head__inner {
		flex-direction: column-reverse;
		gap: 24px;
	}

	.insight-thanks-head__cover {
		max-width: 100%;
	}

	.insight-thanks-cta {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
		padding: 24px;
	}
}

/* Page not found (404.php): the archive heading only, so it keeps AEM's 84px bottom padding. */
.insight-not-found.module-container > .cmp-container > .insight-archive-head__inner {
	padding-bottom: 84px;
}

.insight-not-found .insight-archive-head__text p:last-child {
	margin-bottom: 0;
}

.insight-not-found .insight-search {
	margin-top: 16px;
}

.insight-not-found a.insight-not-found__home,
.insight-not-found a.insight-not-found__home:visited {
	display: inline-block;
	margin-top: 32px;
	color: #123015;
	text-decoration: none;
}

.insight-not-found a.insight-not-found__home:hover,
.insight-not-found a.insight-not-found__home:focus {
	text-decoration: underline;
}

/* Size from AEM bodyLarge. */
.insight-archive__empty {
	margin: 0;
}

/* Numbered pages under the grid: tag-button boxes, current page in racing green. */
.insight-archive .pagination {
	margin-top: 64px;
}

.insight-archive .pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.insight-archive .pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: 0 12px;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	/* AEM eyebrow type (the_posts_pagination() markup can't take the class). */
	font: var(--dcl-type-eyebrow-default-md-strong-standard);
	color: #212223;
	text-decoration: none;
}

.insight-archive .pagination a.page-numbers:hover,
.insight-archive .pagination a.page-numbers:focus {
	border-color: #d64000;
	box-shadow: inset 0 0 0 1px #d64000;
	background: #f9f7f5;
}

.insight-archive .pagination .page-numbers.current {
	border-color: #123015;
	background: #123015;
	color: #fff;
}

.insight-archive .pagination .page-numbers.dots {
	border-color: transparent;
}

@media (min-width: 768px) {
	.insight-archive-head h1.insight-archive-head__title {
		font-size: 32px;
	}
}

@media (min-width: 1024px) {
	.insight-archive-head h1.insight-archive-head__title {
		font-size: 52px;
	}
}

@media (max-width: 767px) {
	.insight-archive-head h1.insight-archive-head__title {
		max-width: none;
	}

	.insight-archive .pagination {
		margin-top: 48px;
	}
}

/* Sections get AEM's .module-container padding (48px top, 84px bottom, 1200px max).
   Size comes from the AEM type class on the h2 (headlineLarge, as thomsonreuters.com).
   Colour: secondary_color grey on every background, as the other h2s. */
.insight-card-section h2.insight-card-section__heading {
	margin: 0 0 48px;
	color: #212223;
}

.insight-card-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 48px;
}

/* Front-page banner: lead card over two of the three columns (16:9 image), the other two
   stacked in the third. Same columns and gap as the grids below. */
.insight-card--lead {
	grid-column: span 2;
}

.insight-card--lead .insight-card__image {
	aspect-ratio: 16 / 9;
}

.insight-card-grid__side {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.insight-card-grid__side .insight-card__image {
	margin-bottom: 16px;
}

.insight-card-grid__side .insight-card__title {
	margin-bottom: 12px;
}

.insight-card {
	display: flex;
	flex-direction: column;
	color: #212223;
}

/* Image, title and author are separate links; reset AEM's blue/visited purple and underline. */
.insight-card a,
.insight-card a:link,
.insight-card a:visited {
	color: #212223;
	text-decoration: none;
}

.insight-card__image {
	display: block;
	aspect-ratio: 370 / 184;
	margin-bottom: 24px;
	overflow: hidden;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	background: #f9f7f5;
}

/* Crop towards the right: old-theme wide banners have their photo there (as img.insight-featured-image). */
.insight-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 80% 50%;
}

/* Size from AEM eyebrow (partials/card.php). */
.insight-card__eyebrow {
	margin-bottom: 8px;
	/* Brand orange. */
	color: #d64000;
}

/* Category link: only the words are clickable, not the full card width. */
a.insight-card__eyebrow,
a.insight-card__eyebrow:link,
a.insight-card__eyebrow:visited {
	align-self: flex-start;
	color: #d64000;
	text-decoration: none;
}

a.insight-card__eyebrow:hover,
a.insight-card__eyebrow:focus {
	color: #d64000;
	text-decoration: underline;
}

/* Orange eyebrows are for white only: on the tinted sections they go back to grey (contrast). */
[class*="insight-bg--"] .insight-card__eyebrow,
[class*="insight-bg--"] a.insight-card__eyebrow,
[class*="insight-bg--"] a.insight-card__eyebrow:link,
[class*="insight-bg--"] a.insight-card__eyebrow:visited,
[class*="insight-bg--"] a.insight-card__eyebrow:hover,
[class*="insight-bg--"] a.insight-card__eyebrow:focus {
	color: #212223;
}

/* Clario Medium (500 in the emcm-ui @font-face set). */
/* One title size for every card (side, grid, compact, Explore by Topic); only the homepage lead is larger. */
.insight-card__title {
	margin-bottom: 16px;
	font-family: Clario, "Helvetica Neue", arial, sans-serif;
	font-size: 22px;
	font-weight: 500;
	line-height: 28px;
}

.insight-card--lead .insight-card__title {
	font-size: 36px;
	line-height: 44px;
}

/* Size from AEM bodyLarge. */
.insight-card p.insight-card__excerpt {
	margin: 0 0 16px;
	color: #212223;
}

/* Topic menu panels (partials/topic-menu.php): four narrow columns. */
.insight-card--compact .insight-card__image {
	margin-bottom: 16px;
}

.insight-card--compact .insight-card__title {
	margin-bottom: 8px;
}

/* Hovering the image underlines the title too, so the card still reads as one link. */
.insight-card a.insight-card__title:hover,
.insight-card a.insight-card__title:focus,
.insight-card__image:hover ~ .insight-card__title,
.insight-card__image:hover ~ .insight-card__heading .insight-card__title {
	text-decoration: underline;
}

/* Publish date under the title (archives): pulled up to sit 8px below it. Size from AEM bodyMedium. */
.insight-card__date {
	display: block;
	margin: -8px 0 16px;
	color: #212223;
}

/* "Read article" etc: a link to the post, underlined on hover. */
/* As AEM's text links: bodyMedium, always underlined. */
.insight-card__meta {
	align-self: flex-start;
}

.insight-card a.insight-card__meta,
.insight-card a.insight-card__meta:link,
.insight-card a.insight-card__meta:visited {
	/* TR Graphite on every background. */
	color: #212223;
	text-decoration: underline;
}

.insight-card a.insight-card__meta:hover,
.insight-card a.insight-card__meta:focus {
	text-decoration: none;
}

/* "Browse all" link under a card grid, like the topic menu's "More" link. */
.insight-card-section a.insight-card-section__more,
.insight-card-section a.insight-card-section__more:visited {
	display: inline-block;
	margin-top: 48px;
	font-family: Clario, "Helvetica Neue", arial, sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	color: #212223;
	text-decoration: none;
}

.insight-card-section a.insight-card-section__more span {
	color: #d64000;
}

.insight-card-section a.insight-card-section__more:hover,
.insight-card-section a.insight-card-section__more:focus {
	text-decoration: underline;
}

/* Tag buttons without the under-post Topics block's borders (front-page Popular Topics). */
.insight-tags.insight-tags--plain {
	margin: 0;
	padding: 0;
	border: 0;
}

/* Front-page Popular Topics: a slim band, less than AEM's 48px top / 84px bottom. */
.front-topics.module-container > .cmp-container > .front-popular-tags {
	padding-top: 40px;
	padding-bottom: 40px;
}

/* Heading inline before the first tag, as a label at the tags' scale; tags centred on it. */
.front-popular-tags .insight-tags .cmp-container-flex {
	align-items: center;
}

/* Keeps 16px between the heading and the first tag. Size from AEM subtitle. */
.front-popular-tags h2.front-popular-tags__heading {
	margin: 0 8px 0 0;
}

/* Front-page Explore by Topic: four topic columns of link lists, like the topic menu panels. */
.insight-explore {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px 48px;
}

.insight-explore__topic,
.insight-explore__body {
	display: flex;
	flex-direction: column;
}

/* Topic names that wrap would push their image down. Each topic spans two rows of the parent grid
   (name, then cards), so every name row is as tall as the tallest and the images start level; names
   sit at the top of their row. Older browsers keep the flex column above. */
@supports (grid-template-rows: subgrid) {
	.insight-explore__topic {
		display: grid;
		grid-row: span 2;
		grid-template-rows: subgrid;
		row-gap: 0;
	}

	.insight-card-section h3.insight-explore__heading {
		align-self: start;
	}
}

/* Topic name as the eyebrow, its latest post as an image card, then two more headlines in body type, with a
   rule under each; a plain underlined "Read more" (to the topic) under the list. */
/* Size from AEM subtitle. */
.insight-card-section h3.insight-explore__heading {
	margin: 0 0 18px;
}

.insight-explore .insight-explore__heading a,
.insight-explore .insight-explore__heading a:link,
.insight-explore .insight-explore__heading a:visited {
	/* Brand orange, as the card eyebrows. */
	color: #d64000;
	text-decoration: none;
}

.insight-explore .insight-explore__heading a:hover,
.insight-explore .insight-explore__heading a:focus {
	color: #d64000;
	text-decoration: underline;
}

.insight-explore .insight-card {
	padding-bottom: 20px;
	border-bottom: 1px solid #e5e5e5;
}

.insight-explore .insight-card + .insight-card {
	padding-top: 20px;
}

/* Titles smaller than the topic name above them (subtitle, 20px). */
.insight-explore .insight-card__title {
	margin: 0;
	font-size: 18px;
	line-height: 24px;
}

/* Text-only card titles: AEM bodyMedium here, not the card's bodyLarge (partials/card.php). "Read more" is bodyMedium. */
.insight-explore .insight-card--text .insight-card__title {
	font: var(--dcl-type-body-default-md-regular-standard);
}

.insight-explore a.insight-explore__more,
.insight-explore a.insight-explore__more:visited {
	padding-top: 20px;
	align-self: flex-start;
	color: #212223;
	text-decoration: underline;
}

.insight-explore a.insight-explore__more:hover,
.insight-explore a.insight-explore__more:focus {
	text-decoration: none;
}

/* Front-page Editor's Pick + Global Trends: one column and two of the card grid's three, each under the usual
   section heading. Span 2 + 48px gap keeps the trends cards the same width as the pick. */
.insight-picks {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 48px;
}

.insight-picks__group--trends {
	grid-column: span 2;
}

.insight-picks__group:only-child {
	grid-column: 1 / -1;
}

/* A size down from the other section headings (two sit side by side), and closer to the cards. */
.insight-card-section .insight-picks h2.insight-picks__heading {
	margin-bottom: 24px;
}

.insight-picks__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 48px;
}

.insight-picks__group--trends .insight-picks__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Only one of the two set: its cards across all three columns. */
.insight-picks__group:only-child .insight-picks__grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Front-page Browse All Categories: the old footer menus as columns of links, a rule under each and a brand
   orange arrow on the right (as thomsonreuters.com's category lists). */
/* Sizes from AEM classes: bodyLarge intro, subtitle headings, bodyMedium links. */
.insight-card-section .front-browse__intro {
	margin: -32px 0 40px;
	color: #212223;
}

.insight-browse {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px 48px;
}

.insight-card-section h3.insight-browse__heading {
	margin: 0 0 8px;
	color: #212223;
}

.insight-browse ul.insight-browse__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.insight-browse__list li {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #e5e5e5;
}

.insight-browse a.insight-browse__link,
.insight-browse a.insight-browse__link:link,
.insight-browse a.insight-browse__link:visited {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 0;
	color: #212223;
	text-decoration: none;
}

.insight-browse a.insight-browse__link:hover span,
.insight-browse a.insight-browse__link:focus span {
	text-decoration: underline;
}

.insight-browse__link .insight-icon {
	flex: none;
	width: auto;
	height: 20px;
	/* Brand orange. */
	color: #d64000;
	transition: transform 0.15s ease;
}

.insight-browse__link:hover .insight-icon,
.insight-browse__link:focus .insight-icon {
	transform: translateX(4px);
}

/* Tablet: featured banner goes lead full width, the other two side by side under it. */
@media (max-width: 1023px) {
	.insight-card-grid--featured,
	.insight-browse,
	.insight-explore {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Tablet: the two groups stacked, two cards a row in each. */
	.insight-picks {
		grid-template-columns: minmax(0, 1fr);
	}

	.insight-picks__group--trends {
		grid-column: auto;
	}

	.insight-picks .insight-picks__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.insight-card-grid__side {
		display: grid;
		grid-column: span 2;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 48px;
	}
}

@media (max-width: 767px) {
	.insight-card-section h2.insight-card-section__heading {
		margin-bottom: 32px;
	}

	.insight-card-grid,
	.insight-card-grid--featured,
	.insight-browse,
	.insight-explore {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.insight-card-section .front-browse__intro {
		margin-top: -16px;
	}

	.insight-picks,
	.insight-picks .insight-picks__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.insight-card--lead,
	.insight-card-grid__side {
		grid-column: auto;
	}

	.insight-card-grid__side {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.insight-card--lead .insight-card__title {
		font-size: 24px;
		line-height: 30px;
	}
}
/* Gated download / contact forms (.gform_wrapper from class-gate.php etc.), styled like AEM DCL form fields.
   Replaces the Bootstrap form styles that came from style.css. */
.gform_wrapper {
	font-family: "Source Sans 3", "Helvetica Neue", arial, sans-serif;
	color: #212223;
}

.gform_wrapper ul.gform_fields {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gform_wrapper .form-group {
	margin: 0;
}

/* Hidden fields, conditionally hidden fields and the honeypot. Gravity Forms' own CSS is off (parent's
   Bootstrap_Gravity_Forms), so without this each empty <li> still adds a 16px flex gap. */
.gform_wrapper input[type="hidden"],
.gform_wrapper .gform_hidden,
.gform_wrapper .gf_hidden,
.gform_wrapper .gform_validation_container {
	display: none !important;
}

/* Labels and fields copy the AEM DCL dig-form components (dig-input-text, dig-select) used on
   thomsonreuters.com.au forms, e.g. /en-au/products/cocounsel-legal/demo.html. */
.gform_wrapper .gfield_label {
	display: block;
	margin: 0 0 8px;
	font-family: "Source Sans 3", "Helvetica Neue", arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 18px;
	letter-spacing: 0;
	color: #212223;
}

.gform_wrapper .form-control {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid #7a7a7a;
	border-radius: 4px;
	background-color: #fff;
	font: 400 16px/20px "Source Sans 3", "Helvetica Neue", arial, sans-serif;
	letter-spacing: 0;
	color: #212223;
	box-shadow: none;
	outline: none;
	transition: 100ms;
}

.gform_wrapper .form-control::placeholder {
	color: #7a7a7a;
	opacity: 1;
}

/* Select: chevron in #7a7a7a, 16px from the right (dig-select--icon) */
.gform_wrapper select.form-control {
	padding-right: 48px;
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a7a7a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 16px;
	cursor: pointer;
}

/* "Select" prompt in placeholder grey until a value is chosen */
.gform_wrapper select.form-control:invalid {
	color: #7a7a7a;
}

.gform_wrapper select.form-control option {
	color: #212223;
}

.gform_wrapper .form-control:hover {
	border-color: #212223;
	box-shadow: 0 4px 6px #00467b29;
}

/* Focus and error use a 2px border; the inset shadow adds the 2nd px so the field doesn't shift */
.gform_wrapper .form-control:focus {
	border-color: #212223;
	box-shadow: inset 0 0 0 1px #212223;
}

.gform_wrapper .has-error .form-control,
.gform_wrapper .has-error .form-control:focus {
	border-color: #c20000;
	box-shadow: inset 0 0 0 1px #c20000;
}

.gform_wrapper .has-error .form-control::placeholder {
	color: #212223;
}

.gform_wrapper .field-error {
	margin: 8px 0 0;
	font-family: "Source Sans 3", "Helvetica Neue", arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 16px;
	color: #c20000;
}
.gform_wrapper .field-error:empty {
	display: none;
}

/* Gravity Forms' own validation markup (Gate form etc.): the top summary and the per-field message,
   styled like .field-error above. */
.gform_wrapper .gform_validation_errors {
	margin: 0 0 16px;
}

.gform_wrapper .gform_submission_error {
	margin: 0;
	font-family: "Source Sans 3", "Helvetica Neue", arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	color: #c20000;
}

.gform_wrapper .gfield_description.validation_message {
	margin: 8px 0 0;
	font-family: "Source Sans 3", "Helvetica Neue", arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 20px;
	color: #c20000;
}

/* Checkbox fields (e.g. newsletter opt-in) repeat the field label beside the box, so hide the top one.
   The parent hid every .gfield_label in sidebar forms; this theme keeps the rest. */
.gform_wrapper .gfield--type-checkbox > .gfield_label,
.gform_wrapper .gfield:has(.gfield_checkbox) > .gfield_label {
	display: none;
}

/* Name (and other multi-input) fields: "First name"/"Last name" sub-labels (functions.php) show above
   each input like the other field labels, so the field's own "Name" label is only kept for screen readers. */
.gform_wrapper .ginput_complex {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.gform_wrapper .ginput_complex label {
	display: block;
	margin: 0 0 8px;
	font-family: "Source Sans 3", "Helvetica Neue", arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 18px;
	letter-spacing: 0;
	color: #212223;
}

.gform_wrapper .gfield_contains_required .ginput_complex label::after {
	content: "*";
}

.gform_wrapper .gfield--type-name > .gfield_label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.gform_wrapper .collection_notice {
	margin-top: 8px;
	font-size: 16px;
	line-height: 24px;
	color: #212223;
}

.gform_wrapper .collection_notice a {
	color: #123015;
	text-decoration: underline;
}

/* Consent checkboxes / text (tr-gated-forms): no browser fieldset border (Bootstrap reset it in the old theme), text like the collection notice. */
.gform_wrapper fieldset.consents {
	min-width: 0;
	margin: 16px 0; /* the fields' 16px gap above and below (collapses with the notice's 8px margin-top) */
	padding: 0;
	border: 0;
}

.gform_wrapper .consents .consent-implicit p,
.gform_wrapper .consents .checkbox label {
	margin: 0;
	font-size: 16px;
	color: #212223;
}

.gform_wrapper .consents .checkbox {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	column-gap: 8px;
}

.gform_wrapper .consents .checkbox input[type="checkbox"] {
	flex: none;
	margin: 3px 0 0; /* centre on the label's first line */
}

.gform_wrapper .consents .checkbox label {
	flex: 1;
	min-width: 0;
}

.gform_wrapper .consents .checkbox .field-error {
	flex-basis: 100%;
}

.gform_wrapper .consents a {
	color: #123015;
	text-decoration: underline;
}

/* Submit: AEM DCL dig-button primary, medium (as on /en-au/products/cocounsel-legal/demo.html) */
.gform_wrapper .gform_footer button,
.gform_wrapper .gform_footer input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: auto;
	padding: 8px 16px;
	border: 1px solid #d64000;
	border-radius: 4px;
	background-color: #d64000;
	font: 500 16px/150% Clario, "Helvetica Neue", arial, sans-serif;
	color: #fff;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.gform_wrapper .gform_footer button:hover,
.gform_wrapper .gform_footer input[type="submit"]:hover {
	outline: 2px solid #d64000;
	outline-offset: -2px;
	background-color: #f8eadd;
	color: #212223;
}

.gform_wrapper .gform_footer button:active,
.gform_wrapper .gform_footer input[type="submit"]:active {
	border-color: #d64000;
	background-color: #d64000;
	color: #fff;
}

.gform_wrapper .gform_footer button:focus-visible,
.gform_wrapper .gform_footer input[type="submit"]:focus-visible {
	outline: 2px solid #212223;
	outline-offset: 2px;
}

.gform_wrapper .gform_footer button:disabled {
	border: none;
	background-color: #f9f7f5;
	color: #7a7a7a;
	outline: none;
	cursor: not-allowed;
}

/* GF inserts its AJAX spinner right after the submit button with no gap (GF CSS is disabled; the parent had padding-left: 10px). */
.gform_wrapper .gform_footer .gform_ajax_spinner,
.gform_wrapper .gform_footer .gform-loader {
	margin-left: 12px;
	vertical-align: middle;
}

/* Gate widget card in the right column */
/* Post side column (single-post.php): 4 grid columns, no empty offset column; with the
   sidebar's own 24px inset this leaves a 96px gap to the 8-column body. Stacked under the body below 1024px. */
@media (min-width: 1024px) {
	.insight-post-side {
		padding-left: 72px;
	}
}

/* Light green rgb(227, 243, 238) with rounded corners, as on the thomsonreuters.com forms. */
.sidebar .gate_widget {
	padding: 40px 32px;
	background: #e3f3ee;
	border-radius: 8px;
}

.sidebar .gate_widget .widget-title {
	margin-bottom: 32px;
	font-family: Clario, "Helvetica Neue", arial, sans-serif;
	font-size: 28px;
	font-weight: 700;
	line-height: 36px;
	color: #212223;
}

/* Resource template (single-insight_resource.php): copy in 7 cols, 1-col gap, gate form in 4 cols.
   The .insight-resource div gets AEM's .module-container width (1200px max) like the hero above it. */
.insight-resource {
	padding-bottom: 64px;
}

.insight-resource__main {
	min-width: 0;
}

@media (min-width: 1024px) {
	.insight-resource--gated {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: 24px;
		align-items: start;
	}

	/* Up to the form's column, less 72px: with the 24px grid gap that's the posts' 96px gap to the side column. */
	.insight-resource--gated .insight-resource__main {
		grid-column: 1 / span 8;
		padding-right: 72px;
	}

	.insight-resource--gated .insight-resource__form {
		grid-column: 9 / span 4;
	}

	/* Ungated: keep the copy at a readable width */
	.insight-resource:not(.insight-resource--gated) .insight-resource__main {
		max-width: 66.666%;
	}
}

/* Tablet/mobile: form under the article, before the share row. The main column's children become
   flex items (display: contents) so the form can go between them. */
@media (max-width: 1023px) {
	.insight-resource--gated {
		display: flex;
		flex-direction: column;
	}

	.insight-resource--gated .insight-resource__main {
		display: contents;
	}

	.insight-resource--gated .insight-resource__form {
		order: 1;
		margin-top: 40px;
	}

	.insight-resource--gated #insight-share-row,
	.insight-resource--gated .insight-post-footer {
		order: 2;
	}

	/* Jump link to the form (an .insight-button), at the top of the content. */
	.insight-resource .insight-resource__cta {
		align-self: flex-start;
		margin: 0 0 32px;
	}

	.insight-resource__form {
		scroll-margin-top: 24px;
	}
}

@media (min-width: 1024px) {
	.insight-resource .insight-resource__cta {
		display: none;
	}
}

/* Card title heading (partials/card.php): a plain wrapper, so the link inside keeps the title styles.
   Resets AEM's h3 sizes and the post content's heading margins (related cards sit in #tr-blog-content). */
.insight-card .insight-card__heading,
#tr-blog-content .insight-card .insight-card__heading {
	margin: 0;
	padding: 0;
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
}

/* Block, so its bottom margin still spaces the card as when it was a flex item. */
.insight-card__heading .insight-card__title {
	display: block;
}

/* Skip link (header.php): hidden until focused, then top left over the header. */
.insight-skip-link {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 1000;
	padding: 12px 16px;
	border: 2px solid #d64000;
	border-radius: 4px;
	background: #fff;
	font: 500 16px/24px Clario, "Helvetica Neue", arial, sans-serif;
	transform: translateY(-200%);
}

a.insight-skip-link,
a.insight-skip-link:visited {
	color: #212223;
	text-decoration: underline;
}

.insight-skip-link:focus {
	transform: none;
}

/* Skip link target: an empty focusable div (tabindex -1) after the header; no focus ring. */
#main-content:focus {
	outline: none;
}

/* Header dropdowns are <button>s now (inc/class-header-walker.php), not AEM's <a href="">: same look. */
button.tr-SiteHeaderMenu-link {
	margin: 0;
	font: inherit;
	font-weight: 500;
	text-align: inherit;
	cursor: pointer;
}