/**
 * Redesign 2026 — single post (mockup NOWORR_1).
 *
 * The article shell becomes a three track grid (share rail / article / aside).
 * The rail lives inside `.main-box-single-wrap` so every post appended by the
 * infinite scroll keeps its own share buttons.
 */

body.single .main {
	background: var(--nw-card);
}

body.single .main > .container {
	background: transparent;
	padding-top: 26px;
	padding-bottom: 56px;
}

/* --- Article / sidebar shell -------------------------------------------- */

/* child.css styles this with (0,3,0) and its columns with (0,4,0) — the
   selectors below have to outrank those to replace the flex layout. */
body.single .main-box.main-box-single.main-box-single-row {
	display: grid;
	grid-template-columns: 60px minmax(0, 1fr) 300px;
	column-gap: 36px;
	row-gap: 0;
	align-items: start;
	margin: 0;
	padding: 0;
	background: transparent;
}

body.single .main-box.main-box-single.main-box-single-row .main-box-single-content-col,
body.single .main-box.main-box-single.main-box-single-row .main-box-single-sidebar-col {
	width: auto;
	max-width: none;
	flex: none;
	padding: 0;
	margin: 0;
}

body.single .main-box-spinner-wrap {
	grid-column: 1 / -1;
}

/* --- Breadcrumbs -------------------------------------------------------- */

body.single .main-box.main-box-single.main-box-single-row > #breadcrumbs {
	grid-column: 1 / -1;
	grid-row: 1;
}

body.single .main-box.main-box-single.main-box-single-row > .main-box-single-footer,
body.single .main-box.main-box-single.main-box-single-row > .main-box-single-content-col,
body.single .main-box.main-box-single.main-box-single-row > .main-box-single-sidebar-col {
	grid-row: 2;
}

body.single #breadcrumbs {
	font-size: 13px;
	line-height: 1.5;
	color: var(--nw-meta);
	margin: 0 0 26px;
}

body.single #breadcrumbs a {
	color: var(--nw-accent);
}

body.single #breadcrumbs a:hover {
	color: var(--nw-accent-hover);
}

/* --- Post block: share rail + article ----------------------------------- */

/* Single rail, pinned for the whole column — it is a sibling of the article
   column, so the infinite scroll never duplicates it. */
body.single .main-box.main-box-single.main-box-single-row > .main-box-single-footer {
	grid-column: 1;
	grid-row: 2;
	position: sticky;
	top: calc(var(--nw-bar-h) + 24px);
	align-self: start;
	width: 60px;
	margin: 0;
	padding: 0;
	border: 0;
}

body.single .main-box.main-box-single.main-box-single-row > .main-box-single-content-col {
	grid-column: 2;
	grid-row: 2;
}

body.single .main-box.main-box-single.main-box-single-row > .main-box-single-sidebar-col {
	grid-column: 3;
	grid-row: 2;
}

/* Spacing between consecutive posts pulled in by the infinite scroll. The
   loader block above already draws a rule, so a border here doubles it. */
body.single .main-box-single-wrap + .main-box-single-wrap {
	margin-top: 48px;
	padding-top: 40px;
}

body.single .main-box-single-share {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
}

body.single .main-box-single-share > a,
body.single .main-box-single-share > span {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--nw-surface);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	cursor: pointer;
	transition: background 0.18s ease, transform 0.18s ease;
}

body.single .main-box-single-share > a:hover,
body.single .main-box-single-share > span:hover {
	background: #e3defc;
	transform: translateY(-2px);
}

/* Legacy centres the link-share glyph with an asymmetric padding. */
body.single .main-box-single-share svg {
	width: 22px;
	height: 22px;
	padding: 0;
}

body.single .main-box-single-share svg path,
body.single .main-box-single-share svg g {
	fill: var(--nw-deep);
}

/* --- Article header ----------------------------------------------------- */

body.single .main-box-single-header {
	display: flex;
	flex-direction: column;
	max-width: none;
	margin: 0 0 26px;
	font-size: inherit;
	line-height: inherit;
	letter-spacing: normal;
}

body.single .main-box-single-header-title-wrap {
	display: block;
}

body.single .main-box-single-header-title {
	margin: 0 0 20px;
	font-size: 44px;
	line-height: 1.07;
	font-weight: 900;
	letter-spacing: -0.025em;
	color: var(--nw-ink);
	text-wrap: pretty;
}

body.single .main-box-single-header-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--nw-hairline);
	color: var(--nw-meta);
	font-size: 14px;
}

body.single .main-box-single-header-read {
	background: var(--nw-surface);
	color: #5a5878;
	font-weight: 600;
	padding: 7px 13px;
	border-radius: 999px;
}

body.single .main-box-single-header-read::before {
	content: '⏱ ';
}

/* child.css fades this to `opacity: .5`, which washed the badge out. */
body.single .main-box-single-header-cat {
	margin: 0 0 16px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--nw-indigo);
	border-radius: 6px;
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
	opacity: 1;
}

/* child.css hangs a 6px black dot off the right edge of the category. */
body.single .main-box-single-header-cat::before,
body.single .main-box-single-header-cat::after {
	display: none;
	content: none;
}

body.single .main-box-single-header-cat a {
	color: #fff;
}

body.single .main-box-single-header-cat a:hover {
	color: #fff;
	text-decoration: underline;
}

/* Floated into the opening paragraphs, as in the mockup. */
body.single .main-box-single-header-thumb-wrap {
	float: left;
	width: 280px;
	margin: 4px 24px 16px 0;
	border-radius: var(--nw-radius-sm);
	overflow: hidden;
	border: 1px solid var(--nw-hairline);
	box-shadow: 0 8px 20px rgba(15, 10, 50, 0.08);
}

body.single .main-box-single-header-thumb {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
}

@media (max-width: 576px) {
	body.single .main-box-single-header-thumb-wrap {
		float: none;
		width: 100%;
		margin: 0 0 22px;
	}
}

/* --- Article body ------------------------------------------------------- */

/* The legacy sheet caps this at 650px; the article column drives the width
   now. Both the outer and the nested wrapper carry the class. */
body.single .main-box-single-content,
body.single .main-box-single-content .main-box-single-content {
	max-width: none;
}

/* Alegreya, declared locally in style.css with cyrillic+latin subsets — the
   serif the theme already used here. See inc/assets.php for why the mockup's
   Newsreader was not adopted. */
body.single .main-box-single-wrap > .main-box-single-content {
	font-family: 'Alegreya', Georgia, 'Times New Roman', serif;
	color: var(--nw-ink-soft);
}

body.single .main-box-single-content p {
	font-size: 20px;
	line-height: 1.30;
	color: var(--nw-ink-soft);
	margin: 0 0 22px;
}

body.single .main-box-single-content h2,
body.single .main-box-single-content h3,
body.single .main-box-single-content h4 {
	font-family: 'Inter', system-ui, sans-serif;
	color: var(--nw-ink);
	font-weight: 800;
	letter-spacing: -0.015em;
	margin: 34px 0 14px;
}

body.single .main-box-single-content h2 {
	font-size: 30px;
	line-height: 1.2;
}

body.single .main-box-single-content h3 {
	font-size: 24px;
	line-height: 1.25;
}

body.single .main-box-single-content h4 {
	font-size: 20px;
	line-height: 1.3;
}

body.single .main-box-single-content a {
	color: var(--nw-accent);
}

body.single .main-box-single-content a:hover {
	color: var(--nw-accent-hover);
}

body.single .main-box-single-content ul,
body.single .main-box-single-content ol {
	font-size: 20px;
	line-height: 1.30;
	color: var(--nw-ink-soft);
	margin: 0 0 22px;
	padding-left: 24px;
}

body.single .main-box-single-content li + li {
	margin-top: 8px;
}

body.single .main-box-single-content blockquote {
	margin: 0 0 28px;
	padding: 6px 0 6px 26px;
	border-left: 4px solid var(--nw-accent);
	font-size: 26px;
	line-height: 1.4;
	font-weight: 600;
	font-style: italic;
	color: var(--nw-deep);
	background: none;
}

body.single .main-box-single-content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--nw-radius-sm);
}

body.single .main-box-single-content figcaption {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 13px;
	color: var(--nw-meta);
	margin-top: 8px;
}

/* Tables get the bordered card treatment from the mockup. */
body.single .main-box-single-content table {
	width: 100%;
	margin: 0 0 30px;
	border: 1px solid #e6e3f0;
	border-radius: var(--nw-radius-sm);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 15px;
}

body.single .main-box-single-content table th {
	background: var(--nw-surface-2);
	color: #5a5878;
	font-size: 14px;
	font-weight: 700;
	text-align: left;
	padding: 13px 18px;
	border: 0;
}

body.single .main-box-single-content table td {
	padding: 13px 18px;
	border: 0;
	border-top: 1px solid #eeecf5;
	color: var(--nw-ink-soft);
}

/* --- Sidebar ------------------------------------------------------------ */

/* Layout belongs to the desktop aside only — the mobile copy is kept hidden
   by child.css above 992px, and setting `display` here would reveal it. */
body.single .main-box-single-sidebar {
	position: sticky;
	top: calc(var(--nw-bar-h) + 24px);
	display: flex;
	flex-direction: column;
	gap: 24px;
}

body.single .main-box-single-sidebar .widget ,
body.single .main-box-single-sidebar-col-mobile .widget {
	background: var(--nw-deep);
	border-radius: var(--nw-radius);
	padding: 24px;
	margin: 0;
}

body.single .main-box-single-sidebar .widget-title,
body.single .main-box-single-sidebar-col-mobile .widget-title,
body.single .main-box-single-sidebar .popular-posts-title ,
body.single .main-box-single-sidebar-col-mobile .popular-posts-title {
	font-size: 14px;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--nw-gold);
	margin: 0 0 18px;
}

/* The plugin renders a div list of bare `<a class="post-box">` links — no
   list items — each on a white card. The mockup keeps the whole block on the
   dark surface with hairline separators. */
body.single .main-box-single-sidebar .wpp-list ,
body.single .main-box-single-sidebar-col-mobile .wpp-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
}

body.single .main-box-single-sidebar .wpp-list .post-box ,
body.single .main-box-single-sidebar-col-mobile .wpp-list .post-box {
	display: block;
	background: transparent;
	margin: 0;
	padding: 16px 0;
	border-bottom: 1px solid var(--nw-hairline-dark);
}

body.single .main-box-single-sidebar .wpp-list .post-box:first-child ,
body.single .main-box-single-sidebar-col-mobile .wpp-list .post-box:first-child {
	padding-top: 0;
}

body.single .main-box-single-sidebar .wpp-list .post-box:last-child ,
body.single .main-box-single-sidebar-col-mobile .wpp-list .post-box:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

body.single .main-box-single-sidebar .wpp-list .post-box__title ,
body.single .main-box-single-sidebar-col-mobile .wpp-list .post-box__title {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.35;
	font-weight: 600;
	color: var(--nw-on-dark);
	text-wrap: pretty;
}

body.single .main-box-single-sidebar .wpp-list .post-box:hover .post-box__title ,
body.single .main-box-single-sidebar-col-mobile .wpp-list .post-box:hover .post-box__title {
	color: #fff;
}

body.single .main-box-single-sidebar .wpp-list .post-box__time ,
body.single .main-box-single-sidebar-col-mobile .wpp-list .post-box__time {
	margin-top: 6px;
	font-size: 12px;
	color: #7c79a6;
}

body.single .main-box-single-sidebar .widget ul ,
body.single .main-box-single-sidebar-col-mobile .widget ul {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.single .main-box-single-sidebar .widget li ,
body.single .main-box-single-sidebar-col-mobile .widget li {
	border-bottom: 1px solid var(--nw-hairline-dark);
	padding: 0 0 16px;
	margin: 0;
}

body.single .main-box-single-sidebar .widget li:last-child ,
body.single .main-box-single-sidebar-col-mobile .widget li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

body.single .main-box-single-sidebar .widget a ,
body.single .main-box-single-sidebar-col-mobile .widget a {
	color: var(--nw-on-dark);
	font-size: 14px;
	line-height: 1.35;
	font-weight: 600;
	text-wrap: pretty;
}

body.single .main-box-single-sidebar .widget a:hover ,
body.single .main-box-single-sidebar-col-mobile .widget a:hover {
	color: #fff;
}

body.single .main-box-single-sidebar .widget .post-stats,
body.single .main-box-single-sidebar-col-mobile .widget .post-stats,
body.single .main-box-single-sidebar .widget time ,
body.single .main-box-single-sidebar-col-mobile .widget time {
	display: block;
	color: #7c79a6;
	font-size: 12px;
	margin-top: 6px;
}

/* Related posts are absent from the mockup but stay in the markup so the
   internal links survive for crawlers. Visually hidden, not removed. */
body.single .main-box-single-content-box.sp-related {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- Next-post loader --------------------------------------------------- */

/* Grid items shrink to content here, so the dashed rule has to be told to
   span the full container width. */
body.single .main-box-spinner-wrap {
	width: 100%;
	justify-self: stretch;
	margin: 48px 0 0;
	border-top: 2px dashed #e2dfee;
	padding-top: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--nw-meta);
	font-size: 14px;
	font-weight: 600;
}

/* InfiniteScroll shows and hides the status element with an inline `display`,
   which beats anything set here — so the row is centred with text-align and
   inline-block children rather than flex, and no longer drifts left. */
body.single .main-box-spinner-wrap,
body.single .main-box-spinner-wrap .infinite-scroll-request {
	text-align: center;
}

body.single .main-box-spinner,
body.single .main-box-spinner-label {
	display: inline-block;
	vertical-align: middle;
}

body.single .main-box-spinner-label {
	margin-left: 12px;
}

/* The legacy three-bar pulse becomes the mockup's ring spinner. */
body.single .main-box-spinner {
	width: 26px;
	height: 26px;
	border: 3px solid #ddd8ee;
	border-top-color: var(--nw-accent);
	border-radius: 50%;
	animation: nw-spin 0.8s linear infinite;
	background: none;
	margin: 0;
	padding: 0;
}

body.single .main-box-spinner > div {
	display: none;
}

body.single .main-box-spinner-label {
	font-family: 'Inter', system-ui, sans-serif;
}

@keyframes nw-spin {
	to {
		transform: rotate(360deg);
	}
}

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

@media (max-width: 992px) {
	/* One column, so the row gap only ever showed up as dead space between the
	   breadcrumbs and the article — spacing is carried by the items instead. */
	body.single .main-box.main-box-single.main-box-single-row {
		grid-template-columns: minmax(0, 1fr);
		column-gap: 0;
		row-gap: 0;
	}

	body.single .main-box.main-box-single.main-box-single-row > .main-box-single-footer {
		margin-top: 28px;
	}

	body.single .main-box.main-box-single.main-box-single-row > .main-box-single-content-col,
	body.single .main-box.main-box-single.main-box-single-row > .main-box-single-sidebar-col {
		grid-column: 1;
		grid-row: auto;
	}

	/* Explicit placement would beat `order`, so everything is auto-placed and
	   ordered instead: the share row drops below the article — and below the
	   "TOP NEWS" block that closes it — rather than sitting under the
	   breadcrumbs. Desktop keeps the sticky left rail. */
	body.single .main-box.main-box-single.main-box-single-row > #breadcrumbs {
		grid-column: 1;
		grid-row: auto;
		order: 1;
	}

	body.single .main-box.main-box-single.main-box-single-row > .main-box-single-content-col {
		order: 2;
	}

	body.single .main-box.main-box-single.main-box-single-row > .main-box-single-sidebar-col {
		order: 3;
	}

	body.single .main-box.main-box-single.main-box-single-row > .main-box-single-footer {
		grid-column: 1;
		grid-row: auto;
		order: 4;
		position: static;
		width: auto;
	}

	body.single .main-box-spinner-wrap {
		order: 5;
	}

	body.single .main-box-single-share {
		flex-direction: row;
	}

	body.single .main-box-single-sidebar {
		position: static;
	}

	body.single .main-box-single-header-title {
		font-size: 30px;
	}

	body.single .main-box-single-content p,
	body.single .main-box-single-content ul,
	body.single .main-box-single-content ol {
		font-size: 18px;
	}

	body.single .main-box-single-content blockquote {
		font-size: 21px;
	}
}

@media (max-width: 576px) {
	body.single .main > .container {
		padding-bottom: 40px;
	}

	body.single .main-box-single-header-title {
		font-size: 26px;
	}

	body.single .main-box-single-content table {
		display: block;
		overflow-x: auto;
	}
}

/* --- Mobile ------------------------------------------------------------- */

@media (max-width: 992px) {
	/* The floating telegram button already covers this call to action. */
	body.single .main-box-telegram-mobile {
		display: none;
	}

	body.single .main > .container {
		padding-top: 16px;
		padding-bottom: 32px;
	}

	body.single #breadcrumbs {
		margin-bottom: 16px;
	}

	body.single .main-box-single-header {
		margin-bottom: 18px;
	}

	body.single .main-box-single-header-meta {
		gap: 10px;
		padding-bottom: 16px;
	}

	body.single .main-box-single-header-read {
		padding: 5px 11px;
		font-size: 13px;
	}

	body.single .main-box-single-share {
		gap: 10px;
	}

	/* Reading progress sits at the bottom edge of the fixed header. */
	body.single .post-status-bar,
	body.single .post-status-bar.active {
		height: 3px;
		background: rgba(233, 231, 246, 0.16);
	}

	body.single .post-status-bar-active {
		height: 100%;
		background: var(--nw-accent);
	}

	/* Mobile copy of the aside sits inside the article column. */
	body.single .main-box-single-sidebar-col-mobile {
		margin: 28px 0 0;
	}

	body.single .main-box-single-sidebar-col-mobile .widget {
		padding: 20px;
	}
}