/* Single post.

   The theme renders an article with its own markup — .re-theme-post and its
   parts — and none of the site's design reaches it: the title comes out in the
   system font, the body runs the full width of the window, and the featured
   image is printed at whatever size it happens to be. This brings that template
   into the same design as the pages without touching the theme.

   The arrangement follows the reading layout the client asked for: one centred
   column and no sidebar, in the order title, byline, image, article, with the
   other articles as a row of cards at the end rather than a panel alongside.
   The type, colour and rules stay the site's own — it is the structure that is
   borrowed, not the identity.

   Everything is scoped under .re-theme-post or .main-container, both of which
   exist only on the theme's single template, so nothing here can reach a page
   built in Elementor. */

.main-container {
	width: min(100% - 48px, 1200px);
	margin-inline: auto;
	padding-block: 40px 100px;
}

/* The reading column. One number, used by everything that is part of the
   article itself; the card row at the end deliberately ignores it. */
.re-theme-post {
	--sx-post-column: 700px;
}

/* The theme prints the image first and the title after it. Ordering here puts
   the title at the top, where the reader starts, without editing the theme —
   which would be overwritten by its next update. */
.re-theme-post {
	display: flex;
	flex-direction: column;
}

.re-theme-post > * {
	order: 9;
}

/* .post-content gives up its own box so the three things the plugin appends —
   the action bar, the article, the card list — become items of this same flex
   order. That is what lets the bar sit under the byline and above the picture
   while still being appended after the content, which is the only place a
   filter can put it. */
.re-theme-post .post-content {
	display: contents;
}

.re-theme-post .post-header   { order: 1; }
.re-theme-post .sx-post-actions { order: 2; }
.re-theme-post .post-media    { order: 3; }
.re-theme-post .sx-post-body  { order: 4; }
.re-theme-post .sx-related    { order: 5; }
.re-theme-post .post-footer   { order: 6; }

/* --------------------------------------------------------- the header */

.re-theme-post .post-header {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: var(--sx-post-column);
	margin-inline: auto;
	margin-bottom: 34px;
}

/* The label belongs above the heading here as it does on every page. */
.re-theme-post .post-categories { order: 1; }
.re-theme-post .post-title      { order: 2; }
.re-theme-post .post-meta       { order: 3; }

.re-theme-post .post-title {
	margin: 0 0 18px;
	font-family: "Barlow", system-ui, sans-serif;
	font-size: clamp(32px, 4vw, 44px);
	font-weight: 600;
	line-height: 1.15;
	color: #222222;
	text-wrap: balance;
}

/* The category reads as the section label does everywhere else: green, with
   the gold rule on its leading edge. */
.re-theme-post .post-categories {
	margin-bottom: 14px;
	padding-inline-start: 10px;
	border-inline-start: 3px solid var(--e-global-color-secondary, #CCB58B);
	font-family: "Barlow", system-ui, sans-serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.2;
}

.re-theme-post .post-categories a {
	color: var(--e-global-color-text, #087D40);
	text-decoration: none;
}

.re-theme-post .post-categories a:hover {
	text-decoration: underline;
}

/* The date and the action bar form one band between two hairlines — a rule
   between them as well would make three lines in eighty pixels. */
.re-theme-post .post-meta {
	padding-block: 14px 10px;
	border-block-start: 1px solid #E7E7E7;
	font-family: "Barlow", system-ui, sans-serif;
	font-size: 14px;
	color: #5C6E64;
}

.re-theme-post .post-meta .meta-sep {
	margin: 0 8px;
	color: #E7E7E7;
}

.re-theme-post .post-meta a {
	color: inherit;
}

/* ------------------------------------------------------ the action bar */

.re-theme-post .sx-post-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	max-width: var(--sx-post-column);
	margin-inline: auto;
	margin-bottom: 34px;
	padding-block: 2px 8px;
	border-block-end: 1px solid #E7E7E7;
}

.re-theme-post .sx-post-actions__group {
	display: flex;
	align-items: center;
	gap: 4px;
	min-width: 0;
}

/* One shape for every control in the bar, whether it is a button or a link, so
   the row reads as a single set rather than a mix. */
.re-theme-post .post-content .sx-post-action {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 10px;
	border: 0;
	border-radius: 6px;
	background: none;
	font-family: "Barlow", system-ui, sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	color: #5C6E64;
	text-decoration: none;
	cursor: pointer;
	transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1),
		background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.re-theme-post .post-content .sx-post-action:hover {
	background: #F3F6F4;
	color: #0B6E4F;
	border-bottom: 0;
}

.re-theme-post .post-content .sx-post-action:focus-visible {
	outline: 2px solid #0B6E4F;
	outline-offset: 2px;
}

/* The reading time is a fact, not a control. */
.re-theme-post .post-content .sx-post-action--static,
.re-theme-post .post-content .sx-post-action--static:hover {
	background: none;
	color: #5C6E64;
	cursor: default;
}

.re-theme-post .sx-post-action svg {
	width: 19px;
	height: 19px;
	flex: none;
}

.re-theme-post .sx-post-action__count {
	font-variant-numeric: tabular-nums;
}

.re-theme-post .post-content .sx-post-action--like.is-on {
	color: #0B6E4F;
}

.re-theme-post .sx-post-action--like.is-on svg {
	fill: currentColor;
	stroke: currentColor;
}

.re-theme-post .post-content .sx-post-action[data-sx-listen].is-on {
	color: #0B6E4F;
	background: #EAF5F0;
}

/* The copy button says so itself rather than through a toast. */
.re-theme-post .sx-post-action[data-sx-copy] {
	position: relative;
}

.re-theme-post .sx-post-action[data-sx-copy].is-done::after {
	content: "Link copied";
	position: absolute;
	inset-inline-end: 0;
	bottom: calc(100% + 8px);
	padding: 5px 9px;
	border-radius: 5px;
	background: #0F1A15;
	color: #FFFFFF;
	font-size: 12px;
	white-space: nowrap;
	pointer-events: none;
}

/* --------------------------------------------------- the progress rail */

/* A map of the article: one line per section with its name beside it, the ones
   behind you filled in, the one you are in drawn out and darkened. It is built
   by the script from the headings actually rendered, so it can never disagree
   with the article.

   It stays pinned to the edge of the window, where it was. The names run
   leftwards from the lines into the empty half of the page beside the 700px
   reading column, and the width is capped at whatever is actually clear there:
   the rail's own left edge is 50vw - 376px from the right, so it can never
   reach the article however wide or narrow the window is. The script removes it
   entirely below 1200px, where there is no clear space at all. */
.sx-rail {
	position: fixed;
	inset-inline-end: 26px;
	top: 50%;
	transform: translateY(-50%);
	width: min(230px, calc(50vw - 376px));
	z-index: 40;
}

.sx-rail__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sx-rail__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* row-reverse, not a reordering in the script: the lines stay against the edge
   of the window where they were, and the name reads inwards from them. In a
   right-to-left page the flex direction mirrors itself and so does this. */
.sx-rail__tick {
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 10px;
	text-decoration: none;
	border: 0;
}

.sx-rail__tick:focus-visible {
	outline: 2px solid #0B6E4F;
	outline-offset: 3px;
	border-radius: 3px;
}

/* Sits on the first line of the label rather than in the middle of a name that
   has wrapped. */
.sx-rail__line {
	flex: none;
	width: 14px;
	height: 2px;
	margin-top: 7px;
	border-radius: 2px;
	background: #D6DCD8;
	transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1),
		background-color 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.sx-rail__label {
	font-family: "Barlow", system-ui, sans-serif;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.35;
	/* Ragged edge away from the lines, straight edge against them. */
	text-align: end;
	color: #8A9A92;
	transition: color 220ms cubic-bezier(0.4, 0, 0.2, 1);
	/* A long heading gives its first two lines and no more — the rail is a map,
	   not a second copy of the article. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sx-rail__tick.is-read .sx-rail__line {
	background: #A9D7C6;
}

.sx-rail__tick.is-read .sx-rail__label {
	color: #5C6E64;
}

.sx-rail__tick.is-current .sx-rail__line {
	width: 22px;
	background: #0B6E4F;
}

.sx-rail__tick.is-current .sx-rail__label {
	color: #0B6E4F;
	font-weight: 500;
}

.sx-rail__tick:hover .sx-rail__line {
	background: #0B6E4F;
}

.sx-rail__tick:hover .sx-rail__label {
	color: #0F1A15;
}

.sx-rail--still .sx-rail__line,
.sx-rail--still .sx-rail__label {
	transition: none;
}

/* --------------------------------------------------------- the image */

.re-theme-post .post-media {
	width: 100%;
	max-width: var(--sx-post-column);
	margin-inline: auto;
	margin-bottom: 40px;
}

.re-theme-post .post-media img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 420px;
	object-fit: cover;
	border-radius: 8px;
}

/* -------------------------------------------------------- the article */

.re-theme-post .post-content {
	font-family: "Barlow", system-ui, sans-serif;
	font-size: 19px;
	line-height: 1.8;
	color: #3A4A42;
}

/* The article keeps to the column; the card row at the end does not, so the
   width lives on the body rather than on .post-content. */
.re-theme-post .sx-post-body {
	max-width: var(--sx-post-column);
	margin-inline: auto;
}

/* Only the article's own children. `.post-content > *` used to be here too, and
   once .post-content became `display: contents` that selector started matching
   the action bar and the card list — at (0,3,0) it beat their own max-width
   rules and stretched the bar to the full 1200px. */
.re-theme-post .sx-post-body > * {
	max-width: 100%;
}

.re-theme-post .post-content p {
	margin: 0 0 26px;
}

.re-theme-post .post-content h2,
.re-theme-post .post-content h3,
.re-theme-post .post-content h4 {
	font-family: "Barlow", system-ui, sans-serif;
	font-weight: 600;
	line-height: 1.25;
	color: #222222;
	margin: 46px 0 16px;
}

.re-theme-post .post-content h2 { font-size: 30px; }
.re-theme-post .post-content h3 { font-size: 24px; }
.re-theme-post .post-content h4 { font-size: 20px; }

.re-theme-post .post-content ul,
.re-theme-post .post-content ol {
	margin: 0 0 26px;
	padding-inline-start: 24px;
}

.re-theme-post .post-content li {
	margin-bottom: 10px;
}

.re-theme-post .post-content li::marker {
	color: var(--e-global-color-primary, #0B6E4F);
}

.re-theme-post .post-content a {
	color: #0B6E4F;
	text-decoration: none;
	border-bottom: 1px solid rgba(11, 110, 79, 0.35);
	transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.re-theme-post .post-content a:hover {
	border-bottom-color: #0B6E4F;
}

.re-theme-post .post-content blockquote {
	margin: 32px 0;
	padding-inline-start: 20px;
	border-inline-start: 3px solid var(--e-global-color-secondary, #CCB58B);
	font-size: 22px;
	font-weight: 600;
	color: #222222;
}

.re-theme-post .post-content img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

.re-theme-post .post-content table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 26px;
}

.re-theme-post .post-content th,
.re-theme-post .post-content td {
	padding: 10px 12px;
	border: 1px solid #E7E7E7;
	text-align: start;
}

/* Wide things get their own scroller rather than pushing the page sideways. */
.re-theme-post .post-content pre,
.re-theme-post .post-content .wp-block-table {
	max-width: 100%;
	overflow-x: auto;
}

/* The theme signs every article off with "By <username>". The account name is
   not a byline, and the article already carries its date and section, so the
   footer is taken out rather than dressed up. */
.re-theme-post .post-footer {
	display: none;
}

/* ------------------------------------------------------- other articles */

/* Full width, below the article, where the reader has finished rather than
   beside them while they are still reading. */
.re-theme-post .sx-related {
	margin: 70px 0 0;
	padding-block-start: 40px;
	border-block-start: 1px solid #E7E7E7;
}

.re-theme-post .sx-related__title {
	margin: 0 0 24px;
	padding-inline-start: 10px;
	border-inline-start: 3px solid var(--e-global-color-secondary, #CCB58B);
	font-family: "Barlow", system-ui, sans-serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--e-global-color-text, #087D40);
}

.re-theme-post .sx-related__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.re-theme-post .sx-related__item {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

/* The card links sit inside .post-content, where `.post-content a` gives every
   link a green underline at specificity (0,2,1). A rule on the class alone is
   (0,2,0) and loses, which put a hairline under each card title and along the
   bottom of each thumbnail. Naming .post-content as well takes it to (0,3,0). */
.re-theme-post .post-content .sx-related__thumb {
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: 8px;
	overflow: hidden;
	border-bottom: 0;
}

.re-theme-post .sx-related__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
	transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.re-theme-post .sx-related__item:hover .sx-related__thumb img {
	transform: scale(1.04);
}

.re-theme-post .sx-related__text {
	min-width: 0;
}

.re-theme-post .post-content .sx-related__link {
	display: block;
	font-family: "Barlow", system-ui, sans-serif;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	color: #222222;
	text-decoration: none;
	border-bottom: 0;
}

.re-theme-post .post-content .sx-related__link:hover {
	color: #0B6E4F;
}

.re-theme-post .sx-related__date {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	color: #5C6E64;
}

/* This one keeps its underline, so it only needs to win on the colour. */
.re-theme-post .post-content .sx-related__all {
	display: inline-block;
	margin-top: 30px;
	font-size: 15px;
	font-weight: 500;
	color: #0B6E4F;
	text-decoration: none;
	border-bottom: 1px solid rgba(11, 110, 79, 0.35);
}

.re-theme-post .post-content .sx-related__all:hover {
	border-bottom-color: #0B6E4F;
}

@media (max-width: 1024px) {
	.re-theme-post .sx-related__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.main-container {
		width: min(100% - 36px, 1200px);
		padding-block: 24px 100px;
	}

	.re-theme-post .post-media img {
		max-height: 260px;
	}

	.re-theme-post .post-content {
		font-size: 17px;
		line-height: 1.75;
	}

	.re-theme-post .post-content h2 { font-size: 25px; }
	.re-theme-post .post-content h3 { font-size: 21px; }
	.re-theme-post .post-content h4 { font-size: 18px; }

	.re-theme-post .sx-related__list {
		grid-template-columns: minmax(0, 1fr);
	}

	/* The bar wraps rather than squeezing the controls together. */
	.re-theme-post .sx-post-actions {
		flex-wrap: wrap;
		row-gap: 4px;
	}

	.re-theme-post .post-content .sx-post-action {
		padding-inline: 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.re-theme-post .post-content a,
	.re-theme-post .post-content .sx-post-action,
	.re-theme-post .sx-related__thumb img {
		transition: none;
	}
}