/* ==========================================================================
   Writrox article layout
   Everything brand-specific lives in the :root block below. Change those
   eight values and the whole template follows.
   ========================================================================== */

:root {
	/* Brand */
	--wx-ink: #16233D;
	--wx-body: #2B3446;
	--wx-muted: #6B7688;
	--wx-link: #1B5FCE;
	--wx-link-hover: #12439A;
	--wx-rule: #E2E6EE;
	--wx-surface: #F5F7FB;
	--wx-white: #FFFFFF;

	/* Hero band tints */
	--wx-tint-slate: #D7E3F5;
	--wx-tint-sage: #D8E8DB;
	--wx-tint-lilac: #E2DEF4;
	--wx-tint-sand: #F3E5D6;
	--wx-tint-ink: #16233D;

	/* Card tints for the Keep reading grid */
	--wx-card-lilac: #E4DFF6;
	--wx-card-mist: #E6EDF7;
	--wx-card-indigo: #C9D6F5;
	--wx-card-mint: #D6EDE2;

	/* Type */
	/* Type - matches the rest of writrox.com. Poppins for headings and text. */
	--wx-font-heading: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--wx-font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* Layout */
	--wx-max: 1400px;
	--wx-read: 740px;
	--wx-gutter: 24px;
	--wx-side: 280px;
	--wx-radius: 14px;

	/* Distance from the top of the viewport the sticky TOC settles at.
	   Increase this if Astra's sticky header is switched on. */
	--wx-sticky-top: 100px;
}

/* --------------------------------------------------------------------------
   Unwrap Astra's content container so the hero band reaches the viewport edge
   -------------------------------------------------------------------------- */

.wx-article-page #content .ast-container,
.wx-article-page #primary {
	/* Astra makes .ast-container a flex row on desktop so content and sidebar
	   sit side by side. The template's hero, article and grid must stack. */
	display: block;
	max-width: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}

.wx-article-page #content {
	background: var(--wx-white);
}

/* Sticky vs. horizontal overflow.
   overflow:hidden on an ancestor creates a scroll container and silently kills
   position:sticky. But dropping to overflow:visible removes Astra's guard, and
   anything that pokes past the viewport (header top bar, off-canvas menu,
   floating buttons) turns into a sideways scroll on phones.
   overflow-x:clip gives both: it cuts off horizontal spill without creating a
   scroll container, so the sticky columns keep working. */
.wx-article-page,
.wx-article-page #page,
.wx-article-page .site-content,
.wx-article-page #content {
	overflow-x: hidden;   /* fallback for browsers without clip */
	overflow-x: clip;
	overflow-y: visible;
}

.wx-article-page #primary,
.wx-article-page .ast-container {
	overflow: visible;
}

/* Sticky needs the viewport to be the scroll container, not a fixed-height wrapper. */
.wx-article-page #page {
	height: auto;
	min-height: 0;
}

.wx-article-page .ast-single-post .entry-header,
.wx-article-page .ast-single-post .post-thumb,
.wx-article-page .ast-author-box,
.wx-article-page .ast-single-related-posts-container {
	display: none;
}

/* Every block in the template sits inside a .wx-shell. Set box-sizing here
   rather than trusting the theme's global reset: without it, width:100% plus
   the side padding makes each shell 48px wider than the screen, which is what
   causes the sideways scroll on phones. */
.wx-shell,
.wx-shell *,
.wx-shell *::before,
.wx-shell *::after {
	box-sizing: border-box;
}

.wx-shell {
	width: 100%;
	max-width: var(--wx-max);
	margin-inline: auto;
	padding-inline: var(--wx-gutter);
}

/* Astra applies text-transform: capitalize to headings in some presets, which
   turns sentence-case copy into Title Case. Headings render as written. */
.wx-article-page h1,
.wx-article-page h2,
.wx-article-page h3,
.wx-article-page h4,
.wx-hero__title,
.wx-signup__title,
.wx-more__title,
.wx-takeaways h2,
.wx-faq h2,
.wx-faq__item h3 {
	text-transform: none;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.wx-hero {
	background: var(--wx-tint-slate);
	padding-top: 56px;
	margin-bottom: 64px;
}

.wx-hero--slate { background: var(--wx-tint-slate); }
.wx-hero--sage  { background: var(--wx-tint-sage); }
.wx-hero--lilac { background: var(--wx-tint-lilac); }
.wx-hero--sand  { background: var(--wx-tint-sand); }
.wx-hero--ink   { background: var(--wx-tint-ink); }

.wx-hero__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 56px;
	position: relative;
	padding-bottom: 56px;
}

.wx-hero__text {
	flex: 1 1 auto;
	max-width: 620px;
}

/* The illustration sits inside the band with even space above and below it. */
.wx-hero__art {
	flex: 0 0 440px;
	margin: 0;
	border-radius: 10px;
	overflow: hidden;
	background: var(--wx-white);
}

/* Designed featured images carry text, so they must never be cropped.
   height:auto shows the whole image; max-height only letterboxes an
   unusually tall upload instead of cutting its edges off. */
.wx-hero__art img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 380px;
	object-fit: contain;
	background: var(--wx-white);
}

.wx-byline {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	font-family: var(--wx-font-heading);
	font-size: 15px;
	color: var(--wx-ink);
}

.wx-byline__avatar,
.wx-byline img {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: block;
	object-fit: cover;
}

.wx-byline__name {
	color: inherit;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.wx-byline__name:hover { border-bottom-color: currentColor; }

.wx-hero__title {
	font-family: var(--wx-font-heading);
	font-weight: 700;
	font-size: clamp(30px, 4.2vw, 46px);
	line-height: 1.18;
	letter-spacing: -0.015em;
	color: var(--wx-ink);
	margin: 0;
}

/* Spacing lives on the elements that follow, so removing the CTA does not
   leave a double gap above the date line. */
.wx-hero .wx-btn { margin-top: 36px; }

.wx-hero--ink .wx-hero__title,
.wx-hero--ink .wx-byline,
.wx-hero--ink .wx-hero__read {
	color: #F2F5FB;
}

.wx-hero--ink .wx-hero__date { color: rgba(242, 245, 251, .72); }

.wx-hero__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	margin: 40px 0 0;
}

.wx-hero__date {
	font-family: var(--wx-font-body);
	font-size: 15px;
	color: var(--wx-muted);
}

.wx-hero__read {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--wx-font-heading);
	font-size: 15px;
	font-weight: 500;
	color: var(--wx-ink);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.wx-btn {
	display: inline-block;
	background: var(--wx-link);
	color: #fff;
	font-family: var(--wx-font-heading);
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	padding: 16px 26px;
	border-radius: 8px;
	text-decoration: none;
	transition: background .18s ease;
}

.wx-btn:hover,
.wx-btn:focus {
	background: var(--wx-link-hover);
	color: #fff;
}

/* --------------------------------------------------------------------------
   Two-column grid
   -------------------------------------------------------------------------- */

.wx-grid {
	display: grid;
	grid-template-columns: 210px minmax(0, 1fr) var(--wx-side);
	gap: 56px;
	align-items: start;
	padding-bottom: 80px;
}

.wx-body {
	max-width: var(--wx-read);
}

/* --------------------------------------------------------------------------
   Table of contents
   -------------------------------------------------------------------------- */

/* Sticky sits on the grid item, not on an inner wrapper. A sticky child can only
   travel inside its parent's box, and with align-items:start the aside is exactly
   as tall as its own content — so on the wrapper it would never move at all. */
.wx-toc {
	position: sticky;
	top: var(--wx-sticky-top);
	align-self: start;
	z-index: 2;
}

/* Long contents lists scroll inside the sticky panel rather than overrunning
   the viewport and cutting off the last entries. */
.wx-toc__sticky {
	max-height: calc(100vh - var(--wx-sticky-top) - 40px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--wx-rule) transparent;
}

.wx-toc__sticky::-webkit-scrollbar { width: 4px; }
.wx-toc__sticky::-webkit-scrollbar-thumb {
	background: var(--wx-rule);
	border-radius: 4px;
}

.wx-toc__heading {
	font-family: var(--wx-font-heading);
	font-size: 15px;
	font-weight: 700;
	color: var(--wx-ink);
	margin: 0 0 14px;
}

.wx-toc__toggle { display: none; }

.wx-toc__nav ol {
	list-style: none;
	margin: 0;
	padding: 0;
	border-left: 2px solid var(--wx-rule);
}

.wx-toc__item { margin: 0; }

.wx-toc__item a {
	display: block;
	padding: 7px 0 7px 16px;
	margin-left: -2px;
	border-left: 2px solid transparent;
	font-family: var(--wx-font-heading);
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--wx-muted);
	text-decoration: none;
	transition: color .15s ease, border-color .15s ease;
}

.wx-toc__item--l3 a {
	padding-left: 28px;
	font-size: 13px;
}

.wx-toc__item a:hover { color: var(--wx-ink); }

.wx-toc__item.is-active a {
	color: var(--wx-link);
	border-left-color: var(--wx-link);
	font-weight: 600;
}

/* Grid children default to min-width:auto, so one long unbreakable string
   (a URL, a wide table) can push its column past the viewport. */
.wx-grid > * { min-width: 0; }

/* --------------------------------------------------------------------------
   Recent posts sidebar
   -------------------------------------------------------------------------- */

.wx-side {
	position: sticky;
	top: var(--wx-sticky-top);
	align-self: start;
	z-index: 1;
}

.wx-side__heading {
	font-family: var(--wx-font-heading);
	font-size: 15px;
	font-weight: 700;
	color: var(--wx-ink);
	margin: 0 0 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--wx-rule);
}

.wx-side__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wx-side__item + .wx-side__item {
	margin-top: 4px;
	padding-top: 16px;
	border-top: 1px solid var(--wx-rule);
}

.wx-side__item a {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	text-decoration: none;
	padding-bottom: 16px;
}

.wx-side__thumb {
	flex: 0 0 62px;
	height: 62px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--wx-surface);
}

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

.wx-side__text {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.wx-side__title {
	font-family: var(--wx-font-heading);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.38;
	color: var(--wx-ink);
	transition: color .15s ease;
}

.wx-side__item a:hover .wx-side__title { color: var(--wx-link); }

.wx-side__date {
	font-family: var(--wx-font-heading);
	font-size: 12.5px;
	color: var(--wx-muted);
}

/* --------------------------------------------------------------------------
   Article body - serif reading column
   -------------------------------------------------------------------------- */

/* The font must be set on the child elements, not just the wrapper. Astra and
   Elementor both emit bare `p {}` and `li {}` typography rules, and a direct
   rule always beats an inherited value no matter how low its specificity — so
   inheriting the font from .wx-body alone silently loses to the theme. */
.wx-body,
.wx-body p,
.wx-body li,
.wx-body blockquote,
.wx-body dd,
.wx-body dt {
	font-family: var(--wx-font-body);
	color: var(--wx-body);
}

.wx-body {
	font-size: 17px;
	line-height: 1.8;
}

.wx-body p,
.wx-body li,
.wx-body dd {
	font-size: 17px;
	line-height: 1.8;
}

.wx-body > p { margin: 0 0 22px; }

.wx-body {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.wx-body iframe,
.wx-body video,
.wx-body embed,
.wx-body object {
	max-width: 100%;
}

.wx-body pre {
	max-width: 100%;
	overflow-x: auto;
	white-space: pre;
}

/* Wide and full-width blocks from the block editor assume a page with no
   sidebars. Inside the reading column they must stay within it. */
.wx-body .alignwide,
.wx-body .alignfull {
	width: auto;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

.wx-body .wp-block-table,
.wx-body .wp-block-embed,
.wx-body .wp-block-image {
	max-width: 100%;
}

.wx-body h2,
.wx-body h3,
.wx-body h4 {
	font-family: var(--wx-font-heading);
	color: var(--wx-ink);
	letter-spacing: -0.01em;
	scroll-margin-top: calc(var(--wx-sticky-top) + 12px);
}

.wx-body h2 {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.3;
	margin: 56px 0 20px;
}

.wx-body h3 {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4;
	margin: 40px 0 14px;
}

.wx-body h4 {
	font-size: 18px;
	font-weight: 700;
	margin: 32px 0 12px;
}

.wx-body > :first-child { margin-top: 0; }

/* Scoped to unclassed links only — editor links. Without :not([class]) this
   rule outranks .wx-btn and paints the button label the same blue as its
   background, which reads as no label at all. */
.wx-body a:not([class]) {
	color: var(--wx-link);
	text-decoration: none;
	border-bottom: 1px solid rgba(27, 95, 206, .3);
	transition: border-color .15s ease;
}

.wx-body a:not([class]):hover { border-bottom-color: var(--wx-link); }

/* Belt and braces against Astra's global link colour. */
.wx-article-page .wx-btn,
.wx-article-page .wx-btn:hover,
.wx-article-page .wx-btn:focus {
	color: #fff;
	border-bottom: 0;
	text-decoration: none;
}

.wx-body ul,
.wx-body ol {
	margin: 0 0 24px;
	padding-left: 22px;
}

.wx-body li { margin-bottom: 12px; }

.wx-body ul li::marker { color: var(--wx-link); }
.wx-body ol li::marker { color: var(--wx-link); font-family: var(--wx-font-heading); font-weight: 700; }

/* The bold lead-in pattern: "Communication: writing clear emails..." */
.wx-body li > strong:first-child,
.wx-body li > b:first-child {
	font-family: var(--wx-font-heading);
	font-weight: 700;
	color: var(--wx-link);
}

.wx-body blockquote {
	margin: 32px 0;
	padding: 4px 0 4px 24px;
	border-left: 3px solid var(--wx-link);
	font-size: 19px;
	font-weight: 500;
	line-height: 1.65;
	color: var(--wx-ink);
}

.wx-body blockquote p:last-child { margin-bottom: 0; }

.wx-body img,
.wx-body figure {
	max-width: 100%;
	height: auto;
	border-radius: var(--wx-radius);
}

.wx-body figure { margin: 32px 0; }

.wx-body figcaption {
	font-family: var(--wx-font-heading);
	font-size: 13.5px;
	color: var(--wx-muted);
	margin-top: 10px;
}

/* Tables */
.wx-body table {
	width: 100%;
	border-collapse: collapse;
	margin: 32px 0;
	font-family: var(--wx-font-heading);
	font-size: 14.5px;
	line-height: 1.5;
}

.wx-body thead th {
	background: var(--wx-surface);
	text-align: left;
	font-weight: 700;
	color: var(--wx-ink);
}

.wx-body th,
.wx-body td {
	border: 1px solid var(--wx-rule);
	padding: 13px 16px;
	vertical-align: top;
}

.wx-body tbody th { font-weight: 700; color: var(--wx-ink); }

/* The generic .wx-body p / li rules above now outrank the single-class rules
   belonging to the blocks nested inside the article, so restate those here
   with the wrapper prefixed. Sans-faced UI text stays sans; the reading text
   inside takeaways and FAQ answers stays serif by design. */
.wx-body .wx-inline-card__title,
.wx-body .wx-inline-card__label,
.wx-body .wx-signup__title,
.wx-body .wx-rating__count,
.wx-body .wx-author__label,
.wx-body .wx-author__name,
.wx-body .wx-share__btn,
.wx-body .wx-btn {
	font-family: var(--wx-font-heading);
}

.wx-body .wx-signup__copy { font-size: 16px; line-height: 1.7; }
.wx-body .wx-author__bio  { font-size: 15.5px; line-height: 1.75; }
.wx-body .wx-rating__count { font-size: 13.5px; line-height: 1.4; }
.wx-body .wx-author__label { font-size: 11.5px; line-height: 1.4; }
.wx-body .wx-author__name  { font-size: 18px; line-height: 1.35; }
.wx-body .wx-faq__item p   { font-size: 16px; line-height: 1.75; }
.wx-body .wx-takeaways li  { font-size: 16px; line-height: 1.7; }

/* Same cause for colour: .wx-body p sets the body colour and outranks these. */
.wx-body .wx-author__name  { color: var(--wx-ink); }
.wx-body .wx-author__label,
.wx-body .wx-rating__count { color: var(--wx-muted); }

/* --------------------------------------------------------------------------
   Inline related-article card
   -------------------------------------------------------------------------- */

.wx-inline-card {
	display: flex;
	align-items: stretch;
	gap: 0;
	margin: 44px 0;
	background: var(--wx-surface);
	border-radius: var(--wx-radius);
	overflow: hidden;
	text-decoration: none;
	border-bottom: 0;
	transition: background .18s ease;
}

.wx-inline-card:hover { background: #ECF1F9; border-bottom: 0; }

.wx-inline-card__art {
	flex: 0 0 150px;
	background: var(--wx-card-mist);
}

.wx-inline-card__art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

.wx-inline-card__text {
	padding: 24px 28px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
}

.wx-inline-card__label {
	font-family: var(--wx-font-heading);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--wx-muted);
}

.wx-inline-card__title {
	font-family: var(--wx-font-heading);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--wx-ink);
}

/* --------------------------------------------------------------------------
   Key takeaways
   -------------------------------------------------------------------------- */

.wx-takeaways {
	margin: 56px 0 0;
}

.wx-takeaways h2 {
	font-family: var(--wx-font-heading);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--wx-ink);
	margin: 0 0 18px;
	scroll-margin-top: calc(var(--wx-sticky-top) + 12px);
}

.wx-takeaways ul {
	list-style: none;
	margin: 0;
	padding: 26px 30px;
	background: var(--wx-surface);
	border-radius: var(--wx-radius);
}

.wx-takeaways li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 14px;
	font-size: 17.5px;
	line-height: 1.55;
}

.wx-takeaways li:last-child { margin-bottom: 0; }

.wx-takeaways li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 11px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wx-link);
}

/* --------------------------------------------------------------------------
   FAQs
   -------------------------------------------------------------------------- */

.wx-faq { margin: 56px 0 0; }

.wx-faq h2 {
	font-family: var(--wx-font-heading);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--wx-ink);
	margin: 0 0 8px;
	scroll-margin-top: calc(var(--wx-sticky-top) + 12px);
}

.wx-faq__item {
	padding: 24px 0;
	border-bottom: 1px solid var(--wx-rule);
}

.wx-faq__item h3 {
	font-family: var(--wx-font-heading);
	font-size: 19px;
	font-weight: 700;
	color: var(--wx-ink);
	margin: 0 0 10px;
}

.wx-faq__item p { margin: 0; }

/* --------------------------------------------------------------------------
   Signup block
   -------------------------------------------------------------------------- */

.wx-signup {
	margin: 56px 0 0;
	padding: 34px 34px 38px;
	background: var(--wx-surface);
	border-top: 3px solid var(--wx-link);
	border-radius: 4px 4px var(--wx-radius) var(--wx-radius);
}

.wx-signup__title {
	font-family: var(--wx-font-heading);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--wx-ink);
	margin: 0 0 10px;
}

.wx-signup__copy {
	font-size: 17px;
	line-height: 1.55;
	color: var(--wx-body);
	margin: 0 0 22px;
	max-width: 52ch;
}

.wx-signup__form input[type="email"],
.wx-signup__form input[type="text"] {
	font-family: var(--wx-font-heading);
	font-size: 15px;
	padding: 14px 16px;
	border: 1px solid var(--wx-rule);
	border-radius: 8px;
	background: #fff;
	width: 100%;
	max-width: 320px;
	box-sizing: border-box;
}

.wx-signup__form input[type="submit"],
.wx-signup__form button[type="submit"] {
	background: var(--wx-link);
	color: #fff;
	font-family: var(--wx-font-heading);
	font-weight: 700;
	font-size: 15px;
	border: 0;
	border-radius: 8px;
	padding: 15px 26px;
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   Rating and share
   -------------------------------------------------------------------------- */

.wx-engage {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin: 48px 0 0;
	padding: 26px 0;
	border-top: 1px solid var(--wx-rule);
	border-bottom: 1px solid var(--wx-rule);
}

.wx-rating {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.wx-rating__score {
	font-family: var(--wx-font-heading);
	font-weight: 700;
	font-size: 20px;
	color: var(--wx-ink);
}

.wx-rating__stars { display: flex; gap: 2px; }

.wx-star {
	background: none;
	border: 0;
	padding: 2px;
	cursor: pointer;
	line-height: 0;
	color: var(--wx-rule);
	transition: color .12s ease, transform .12s ease;
}

.wx-star svg { width: 20px; height: 20px; fill: currentColor; }
.wx-star.is-on { color: #F5A623; }
.wx-star:hover { transform: scale(1.12); }
.wx-rating:not(.is-locked) .wx-rating__stars:hover .wx-star { color: #F5A623; }
.wx-rating:not(.is-locked) .wx-star:hover ~ .wx-star { color: var(--wx-rule); }
.wx-rating.is-locked .wx-star { cursor: default; }
.wx-rating.is-locked .wx-star:hover { transform: none; }

.wx-rating__count {
	font-family: var(--wx-font-heading);
	font-size: 13.5px;
	color: var(--wx-muted);
	margin: 0;
	flex-basis: 100%;
}

.wx-share { display: flex; gap: 10px; }

.wx-share__btn {
	font-family: var(--wx-font-heading);
	font-size: 14px;
	font-weight: 600;
	color: var(--wx-ink);
	text-decoration: none;
	padding: 10px 18px;
	border: 1px solid var(--wx-rule);
	border-radius: 8px;
	transition: border-color .15s ease, color .15s ease;
}

.wx-share__btn:hover {
	border-color: var(--wx-link);
	color: var(--wx-link);
}

/* --------------------------------------------------------------------------
   Author box
   -------------------------------------------------------------------------- */

.wx-author {
	display: flex;
	gap: 28px;
	align-items: flex-start;
	margin: 44px 0 0;
}

.wx-author__avatar { flex: 0 0 96px; }

.wx-author__avatar img {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	display: block;
	object-fit: cover;
}

.wx-author__label {
	font-family: var(--wx-font-heading);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--wx-muted);
	margin: 0 0 6px;
}

.wx-author__name {
	font-family: var(--wx-font-heading);
	font-size: 19px;
	font-weight: 700;
	color: var(--wx-ink);
	margin: 0 0 12px;
}

.wx-author__bio {
	font-size: 16.5px;
	line-height: 1.62;
	color: var(--wx-body);
	margin: 0;
}

/* --------------------------------------------------------------------------
   Keep reading
   -------------------------------------------------------------------------- */

.wx-more {
	background: var(--wx-white);
	padding: 8px 0 90px;
}

.wx-more__title {
	font-family: var(--wx-font-heading);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--wx-ink);
	margin: 0 0 26px;
}

.wx-more__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
}

.wx-more__card { border-radius: var(--wx-radius); overflow: hidden; }

.wx-more__card--lilac  { background: var(--wx-card-lilac); }
.wx-more__card--mist   { background: var(--wx-card-mist); }
.wx-more__card--indigo { background: var(--wx-card-indigo); }
.wx-more__card--mint   { background: var(--wx-card-mint); }

.wx-more__card a {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	min-height: 300px;
	padding: 26px 24px 0;
	text-decoration: none;
}

.wx-more__heading {
	font-family: var(--wx-font-heading);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.32;
	letter-spacing: -0.01em;
	color: var(--wx-ink);
}

.wx-more__art {
	margin: 22px -24px 0;
	display: block;
}

.wx-more__art img {
	width: 100%;
	height: 170px;
	object-fit: cover;
	display: block;
}

.wx-more__all {
	display: inline-block;
	margin-top: 26px;
	font-family: var(--wx-font-heading);
	font-size: 15px;
	font-weight: 600;
	color: var(--wx-link);
	text-decoration: none;
	border-bottom: 1px solid rgba(27, 95, 206, .35);
}

.wx-more__all:hover { border-bottom-color: var(--wx-link); }


/* --------------------------------------------------------------------------
   Theme-proofing
   Elementor's kit styles every <button> and <a> on the site with selectors like
   `.elementor-kit-12 button` (specificity 0,1,1). That outranks a single class,
   so the TOC toggle came out as a navy pill and the rating stars would render
   white. Everything below is scoped under the page class to win cleanly.
   -------------------------------------------------------------------------- */

.wx-article-page .wx-toc .wx-toc__toggle,
.wx-article-page .wx-toc .wx-toc__toggle:hover,
.wx-article-page .wx-toc .wx-toc__toggle:focus,
.wx-article-page .wx-toc .wx-toc__toggle:active {
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 14px 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--wx-ink);
	font-family: var(--wx-font-heading);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	text-align: left;
	cursor: pointer;
}

.wx-article-page .wx-rating .wx-star,
.wx-article-page .wx-rating .wx-star:hover,
.wx-article-page .wx-rating .wx-star:focus,
.wx-article-page .wx-rating .wx-star:active {
	min-height: 0;
	width: auto;
	margin: 0;
	padding: 2px;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	line-height: 0;
}

.wx-article-page .wx-rating .wx-star { color: var(--wx-rule); }
.wx-article-page .wx-rating .wx-star.is-on { color: #F5A623; }

.wx-article-page .wx-toc__item a { color: var(--wx-muted); }
.wx-article-page .wx-toc__item a:hover { color: var(--wx-ink); }
.wx-article-page .wx-toc__item.is-active a { color: var(--wx-link); }

.wx-article-page .wx-share__btn { color: var(--wx-ink); }
.wx-article-page .wx-share__btn:hover { color: var(--wx-link); }

.wx-article-page .wx-side__title { color: var(--wx-ink); }
.wx-article-page .wx-side__item a:hover .wx-side__title { color: var(--wx-link); }

.wx-article-page .wx-more__all,
.wx-article-page .wx-more__all:hover { color: var(--wx-link); }

.wx-article-page .wx-byline__name,
.wx-article-page .wx-byline__name:hover { color: inherit; }

.wx-article-page .wx-more__card a,
.wx-article-page .wx-inline-card,
.wx-article-page .wx-inline-card:hover { color: inherit; text-decoration: none; }

/* Posts built in Elementor carry stretched sections whose width and offset are
   written inline by JavaScript. Inside the reading column they must stay put,
   which is the one place !important is needed: it is the only way past an
   inline style attribute. */
.wx-body .elementor-section-stretched,
.wx-body .elementor-section,
.wx-body .e-con,
.wx-body .elementor {
	max-width: 100% !important;
	width: auto !important;
	left: auto !important;
}

/* --------------------------------------------------------------------------
   Focus states
   -------------------------------------------------------------------------- */

.wx-article-page a:focus-visible,
.wx-article-page button:focus-visible {
	outline: 2px solid var(--wx-link);
	outline-offset: 3px;
	border-radius: 3px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* Below this the third column stops earning its width, so recent posts move
   under the article and spread out instead of squeezing the reading measure. */
@media (max-width: 1280px) {
	.wx-grid {
		grid-template-columns: 210px minmax(0, 1fr);
		gap: 56px;
	}

	.wx-side {
		grid-column: 1 / -1;
		position: static;
		margin-top: 48px;
		padding-top: 36px;
		border-top: 1px solid var(--wx-rule);
	}

	.wx-side__list {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0 32px;
	}

	.wx-side__item + .wx-side__item {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}

	.wx-side__item:nth-child(n + 4) { display: none; }
}

@media (max-width: 1080px) {
	.wx-grid {
		grid-template-columns: 200px minmax(0, 1fr);
		gap: 44px;
	}

	.wx-hero__art { flex-basis: 360px; }
	.wx-hero__art img { max-height: 320px; }
}

@media (max-width: 900px) {
	.wx-more__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wx-side__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wx-side__item:nth-child(n + 3) { display: none; }
}

@media (max-width: 840px) {
	.wx-hero {
		padding-top: 40px;
		margin-bottom: 40px;
	}

	.wx-hero__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 32px;
		padding-bottom: 40px;
	}

	.wx-hero__text { max-width: none; }
	.wx-hero__art { flex: 1 1 auto; }
	.wx-hero__art img { max-height: 260px; }

	.wx-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		padding-bottom: 56px;
	}

	.wx-body { max-width: none; font-size: 16px; }
	.wx-body h2 { font-size: 23px; margin-top: 44px; }
	.wx-body p, .wx-body li, .wx-body dd { font-size: 16px; line-height: 1.75; }
	.wx-body h3 { font-size: 18.5px; }

	/* TOC collapses to an accordion. It stays sticky, so the jump-to control
	   rides along the top of the screen as the reader scrolls. */
	.wx-toc {
		--wx-sticky-top: 0px;
		margin-bottom: 36px;
		border: 1px solid var(--wx-rule);
		border-radius: var(--wx-radius);
		background: var(--wx-surface);
		box-shadow: 0 6px 18px -14px rgba(22, 35, 61, .5);
	}

	.wx-toc__sticky {
		max-height: min(60vh, 420px);
		padding: 6px 18px 4px;
	}

	.wx-toc__heading { display: none; }

	.wx-toc__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		background: none;
		border: 0;
		padding: 14px 0;
		font-family: var(--wx-font-heading);
		font-size: 15px;
		font-weight: 700;
		color: var(--wx-ink);
		cursor: pointer;
	}

	.wx-toc__toggle svg { transition: transform .2s ease; }
	.wx-toc__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

	.wx-toc__nav { display: none; padding-bottom: 12px; }
	.wx-toc__nav.is-open { display: block; }
	.wx-toc__item.is-active a { font-weight: 600; }

	.wx-body table {
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.wx-hero__title {
		overflow-wrap: break-word;
		hyphens: auto;
	}

	.wx-share { flex-wrap: wrap; }

	.wx-inline-card { flex-direction: column; }
	.wx-inline-card__art { flex-basis: auto; height: 150px; }

	.wx-engage { flex-direction: column; align-items: flex-start; }
	.wx-signup { padding: 26px 22px 30px; }

	.wx-side { margin-top: 40px; padding-top: 30px; }

	.wx-side__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.wx-side__item { display: block; }
	.wx-side__item:nth-child(n + 3) { display: block; }
	.wx-side__item:nth-child(n + 5) { display: none; }

	.wx-side__item + .wx-side__item {
		margin-top: 4px;
		padding-top: 16px;
		border-top: 1px solid var(--wx-rule);
	}

	/* Beside a 72px photo the bio gets roughly half the screen and reads as a
	   narrow ribbon. On phones the photo and name share a row and the bio runs
	   the full card width underneath. display:contents lets the existing
	   markup take part in the grid without restructuring the template. */
	.wx-author {
		display: grid;
		grid-template-columns: 64px minmax(0, 1fr);
		grid-template-areas:
			"avatar label"
			"avatar name"
			"bio    bio";
		column-gap: 16px;
		row-gap: 0;
		align-items: center;
		padding: 22px 20px 24px;
		background: var(--wx-surface);
		border-radius: var(--wx-radius);
	}

	.wx-author__text { display: contents; }

	.wx-author__avatar {
		grid-area: avatar;
		flex: none;
	}

	.wx-author__avatar img { width: 64px; height: 64px; }

	.wx-author .wx-author__label {
		grid-area: label;
		align-self: end;
		margin: 0 0 3px;
	}

	.wx-author .wx-author__name {
		grid-area: name;
		align-self: start;
		margin: 0;
	}

	.wx-author .wx-author__bio {
		grid-area: bio;
		margin: 16px 0 0;
		font-size: 15px;
		line-height: 1.75;
	}
}

@media (max-width: 560px) {
	:root { --wx-gutter: 18px; }

	/* Four full-width cards stacked is over a screen of scrolling. On phones
	   they become a swipeable row; the next card peeks in so it reads as
	   scrollable. The row scrolls inside itself, so the page stays put. */
	.wx-more__grid {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 78%;
		gap: 14px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		margin-inline: calc(var(--wx-gutter) * -1);
		padding-inline: var(--wx-gutter);
		scroll-padding-inline: var(--wx-gutter);
		padding-bottom: 4px;
	}

	.wx-more__grid::-webkit-scrollbar { display: none; }

	.wx-more__card { scroll-snap-align: start; }
	.wx-more__card a { min-height: 250px; padding: 20px 18px 0; }
	.wx-more__heading { font-size: 16px; }
	.wx-more__art { margin: 18px -18px 0; }
	.wx-more__art img { height: 140px; }
	.wx-share { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
	.wx-article-page * {
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}