/*
 * Woodmart's own woodmart_page_top_part() (called from header.php) wraps
 * everything between get_header() and get_footer() — this hero section
 * included — in <main class="... container">. Breaking out of that
 * max-width via the viewport-width trick below is the only way to get a
 * true full-bleed background without touching the parent theme.
 */
.trade-hub-hero {
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
	overflow: hidden;
	/* .whb-overcontent makes the site nav position:absolute over the page
	   (it takes ~no space in flow), so the top gap has to add the real
	   header height on top of the 34px design gap, or the nav overlaps us.
	   Horizontal: .trade-hub-hero__inner below is also `.container`, which
	   already contributes its own 15px padding-inline (base.min.css) — 25px
	   here + that 15px = 40px total, the actual target. */
	padding: calc(34px + var(--wd-header-h, 90px)) 25px 96px;
	color: #fff;
	background: radial-gradient(120% 120% at 80% 20%, rgba(0, 143, 174, .35), transparent 60%),
		linear-gradient(135deg, #081a1f 0%, #0b2830 55%, #0e3540 100%);
}

/* Uses the theme's own .container class for width/centering, so the hero
   content lines up with the header, footer and the rest of the page —
   only .trade-hub-hero (the background) stays full-bleed. */
.trade-hub-hero__inner.container {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 64px;
}

.trade-hub-hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 26px;
	max-width: 638px;
}

.trade-hub-hero__figure-wrap {
	flex: 1 1 auto;
	max-width: 537px;
}

.trade-hub-hero__figure {
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, .1);
	box-shadow: 0 0 80px -22px rgba(0, 143, 174, .5);
	overflow: hidden;
}

/*
 * Mobile-only, per design (Figma node 1882-1226) — desktop has no caption
 * row. Sits below .trade-hub-hero__figure as a plain sibling, on the hero's
 * own background — it's not part of the image's bordered/shadowed card.
 */
.trade-hub-hero__figure-caption {
	display: none;
}

.trade-hub-hero__figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.trade-hub-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 12px;
	border: 1px solid rgba(0, 143, 174, .3);
	border-radius: 999px;
	background: rgba(0, 143, 174, .1);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	color: #008fae;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 2.16px;
	text-transform: uppercase;
}

a.trade-hub-hero__badge {
	text-decoration: none;
	transition: background-color .2s ease, border-color .2s ease;
}

a.trade-hub-hero__badge:hover,
a.trade-hub-hero__badge:focus {
	color: #008fae;
	border-color: rgba(0, 143, 174, .6);
	background: rgba(0, 143, 174, .2);
}

.trade-hub-hero__dot {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: #008fae;
}

.trade-hub-hero__title {
	margin: 0;
	font-size: 52px;
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -1.04px;
	color: #fff;
}

.trade-hub-hero__excerpt {
	max-width: 576px;
	font-size: 18px;
	line-height: 1.625;
	color: rgba(255, 255, 255, .75);
}

.trade-hub-hero__meta-row {
	display: flex;
	flex-direction: column;
	gap: 33px;
	width: 100%;
}

.trade-hub-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	width: 100%;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, .1);
}

.trade-hub-hero__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: rgba(255, 255, 255, .7);
	white-space: nowrap;
}

.trade-hub-hero__meta-item svg {
	color: #008fae;
	flex: none;
}

.trade-hub-hero__share {
	display: flex;
	align-items: center;
	gap: 12px;
}

.trade-hub-hero__share-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.68px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
}

.trade-hub-hero__share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(255, 255, 255, .25) !important;
	border-radius: 999px;
	background: transparent !important;
	color: #fff !important;
	cursor: pointer;
	transition: border-color .2s ease, background-color .2s ease;
}

.trade-hub-hero__share-btn svg {
	color: inherit;
}

.trade-hub-hero__share-btn:hover {
	border-color: rgba(255, 255, 255, .6) !important;
	background: rgba(255, 255, 255, .08) !important;
}

.trade-hub-hero__copy-link.is-copied {
	border-color: #008fae !important;
	background: rgba(0, 143, 174, .2) !important;
}

/* ------------------------------------------------------------------ */
/* Article layout: sticky "In this article" TOC + content column      */
/* ------------------------------------------------------------------ */

.trade-hub-article-layout {
	display: flex;
	align-items: flex-start;
	gap: 64px;
	padding: 64px 40px;
}

.trade-hub-toc {
	flex: none;
	width: 280px;
	position: sticky;
	top: calc(var(--wd-header-h, 90px) + 24px);
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 24px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 1px 2px 0 rgba(15, 31, 48, .05), 0 10px 26px -18px rgba(15, 31, 48, .22);
}

.trade-hub-toc__title {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 1.68px;
	text-transform: uppercase;
	color: #0f1f30;
}

.trade-hub-toc__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.trade-hub-toc__item {
	margin: 0;
}

.trade-hub-toc__item a {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 14px;
	line-height: 22.75px;
	color: #545f71;
	text-decoration: none;
}

.trade-hub-toc__item a:hover {
	color: #008fae;
}

.trade-hub-toc__item svg {
	flex: none;
	margin-top: 3px;
}

.trade-hub-article-body {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 768px;
	text-align: left;
}

/* Typography inside the post content itself */

.trade-hub-article-body > p:first-child {
	font-size: 20px;
	font-weight: 500;
	line-height: 1.625;
	color: #0f1f30;
}

.trade-hub-article-body p {
	margin: 0 0 24px;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.625;
	color: #545f71;
}

.trade-hub-article-body h2 {
	margin: 45px 0 19px !important;
	font-size: 36px;
	font-weight: 600;
	line-height: 1.11;
	letter-spacing: -.72px;
	color: #0f1f30;
	text-align: left !important;
	scroll-margin-top: calc(var(--wd-header-h, 90px) + 24px);
}

.trade-hub-article-body h3 {
	margin: 37px 0 8px !important;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.33;
	letter-spacing: -.48px;
	color: #0f1f30;
	text-align: left !important;
	scroll-margin-top: calc(var(--wd-header-h, 90px) + 24px);
}

.trade-hub-article-body h4 {
	margin: 13px 0 8px !important;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.56;
	letter-spacing: -.36px;
	color: #0f1f30;
	text-align: left !important;
}

.trade-hub-article-body ul,
.trade-hub-article-body ol {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.trade-hub-article-body ul li {
	position: relative;
	margin: 0 0 12px;
	padding-left: 18px;
	font-size: 16px;
	line-height: 26px;
	color: #545f71;
}

.trade-hub-article-body ul li:before {
	content: '';
	position: absolute;
	left: 0;
	top: 10px;
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: #008fae;
}

.trade-hub-article-body ol {
	counter-reset: trade-hub-ol;
}

.trade-hub-article-body ol li {
	counter-increment: trade-hub-ol;
	position: relative;
	margin: 0 0 12px;
	padding-left: 24px;
	font-size: 16px;
	line-height: 26px;
	color: #545f71;
}

.trade-hub-article-body ol li:before {
	content: counter(trade-hub-ol) '.';
	position: absolute;
	left: 0;
	font-weight: 600;
	color: #008fae;
}

.trade-hub-article-body img {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
	margin: 8px 0 24px;
}

.trade-hub-article-body a {
	color: #008fae;
	text-decoration: underline;
}

.trade-hub-article-body blockquote {
	margin: 24px 0;
	padding: 32px;
	background: #f6f7fa;
	border: none;
	border-left: none;
	border-radius: 10px;
}

.trade-hub-article-body blockquote p {
	margin: 0 0 12px;
	font-size: 16px;
	line-height: 26px;
	color: #0f1f30;
}

.trade-hub-article-body blockquote > *:last-child,
.trade-hub-article-body blockquote p:last-child {
	margin-bottom: 0;
}

.trade-hub-article-body blockquote strong,
.trade-hub-article-body blockquote b {
	display: block;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 1.68px;
	text-transform: uppercase;
	color: #1a484e;
}

@media (max-width: 1024px) {
	.trade-hub-article-layout {
		flex-direction: column;
		gap: 30px;
	}

	.trade-hub-toc {
		position: static;
		width: 100%;
	}
}

@media (max-width: 640px) {
	/*
	 * Unlike .trade-hub-hero, this section doesn't break out of the theme's
	 * ambient <main class="... container">, so its own 15px padding-inline
	 * (base.min.css, `.container{padding-inline:15px}`) still applies on top
	 * of whatever we add here. 5px + that 15px = 20px total, matching the
	 * hero's own side padding at this breakpoint.
	 */
	.trade-hub-article-layout {
		padding: 40px 5px;
	}

	.trade-hub-article-body h2 {
		font-size: 28px;
	}

	.trade-hub-article-body h3 {
		font-size: 20px;
	}

	.trade-hub-article-body > p:first-child {
		font-size: 18px;
	}
}

@media (max-width: 1024px) {
	.trade-hub-hero__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 40px;
	}

	.trade-hub-hero__figure-wrap {
		max-width: 100%;
		width: 100%;
	}
}

@media (max-width: 640px) {
	/*
	 * Woodmart itself switches from --wd-header-h to a separate
	 * --wd-header-sm-h at this same breakpoint for its own equivalent
	 * overlap-compensation rules (header-base.min.css,
	 * `.whb-overcontent:not(.whb-custom-header){padding-top:var(--wd-header-sm-h)}`).
	 * --wd-header-h stays the (larger) desktop composite even here, which is
	 * why using it was adding far more padding than the header actually
	 * occupies on mobile.
	 */
	/* Horizontal: same 15px-from-.container stacking as above — 5px + 15px = 20px total. */
	.trade-hub-hero {
		padding: calc(18px + var(--wd-header-sm-h, 60px)) 5px 40px;
	}

	.trade-hub-hero__title {
		font-size: 32px;
	}

	.trade-hub-hero__excerpt {
		font-size: 16px;
	}

	.trade-hub-hero__figure-caption {
		display: block;
		margin: 12px 0 0;
		padding: 0 16px;
		font-size: 12px;
		font-weight: 400;
		line-height: 16px;
		text-align: center;
		color: rgba(255, 255, 255, .4);
	}
}

/* ------------------------------------------------------------------ */
/* Related articles (bottom of the single post)                       */
/* ------------------------------------------------------------------ */

.trade-hub-related {
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
	background: linear-gradient(180deg, var(--color-grey-97, #F6F7FA) 0%, var(--bg-quaternary-2, #FFF) 100%);
}

.trade-hub-related__inner.container {
	padding: 80px 40px;
}

.trade-hub-related__header {
	margin-bottom: 32px;
	text-align: center;
}

.trade-hub-related__title {
	margin: 0 0 12px;
	font-size: 36px;
	font-weight: 600;
	line-height: 1.11;
	letter-spacing: -.72px;
	color: #0f1f30;
}

.trade-hub-related__subtitle {
	margin: 0;
	font-size: 16px;
	line-height: 24px;
	color: #545f71;
}

@media (max-width: 1024px) {
	.trade-hub-related__inner.container {
		padding: 56px 20px;
	}

	.trade-hub-related__title {
		font-size: 28px;
	}
}