/* ================================================================
   Sovushkeen — article / page / archive layer
   Brings the inner pages onto the same tokens as the home page.
   ================================================================ */

body.single,
body.page,
body.archive,
body.search {
	background: var(--sov-bg);
	color: var(--sov-text);
}

body.single .container,
body.page .container,
body.archive .container,
body.search .container {
	background: var(--sov-bg) !important;
}

body.single .container-inner,
body.page .container-inner,
body.archive .container-inner,
body.search .container-inner {
	max-width: var(--sov-wrap);
	margin: 0 auto;
	padding-left: var(--sov-gutter);
	padding-right: var(--sov-gutter);
	box-sizing: border-box;
	border: 0;
	background: none;
	box-shadow: none;
}

body.single .main-inner,
body.page .main-inner,
body.archive .main-inner,
body.search .main-inner {
	padding-top: 26px;
}

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

body.single .post-wrapper,
body.page .post-wrapper {
	background: var(--sov-white);
	border: 1px solid var(--sov-border);
	border-radius: var(--sov-radius-lg);
	box-shadow: var(--sov-shadow-xs);
	padding: 34px 40px 40px;
	box-sizing: border-box;
}

/* breadcrumbs */
.rb-breadcrumbs,
.breadcrumbs {
	margin-bottom: 16px;
	font-size: 13px;
	color: var(--sov-muted);
}

.rb-breadcrumbs a,
.breadcrumbs a { color: var(--sov-muted); text-decoration: none; }
.rb-breadcrumbs a:hover,
.breadcrumbs a:hover { color: var(--sov-blue); }

/* header */
.entry-header { margin-bottom: 22px; }

.entry-header .entry-category a,
.entry-category a {
	display: inline-block;
	margin: 0 6px 10px 0;
	padding: 5px 11px;
	border-radius: 7px;
	background: var(--sov-blue-soft);
	color: var(--sov-blue);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
}

.entry-title,
h1.entry-title {
	margin: 6px 0 0;
	color: var(--sov-text);
	font-size: clamp(27px, 3.4vw, 40px);
	font-weight: 750;
	line-height: 1.14;
	letter-spacing: -.03em;
	text-wrap: balance;
}

.entry-meta-single {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--sov-border);
	color: var(--sov-muted);
	font-size: 13px;
}

.entry-meta-single .entry-meta-left {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	align-items: center;
}

.entry-meta-single span { display: inline-flex; align-items: center; gap: 6px; }
.entry-meta-single i { opacity: .65; }
.entry-meta-single a { color: var(--sov-muted); text-decoration: none; }
.entry-meta-single a:hover { color: var(--sov-blue); }

/* featured image inside content */
.entry-content .wp-post-image,
.entry img {
	border-radius: var(--sov-radius);
	max-width: 100%;
	height: auto;
}

/* ----------------------------------------------------------------
   Article typography
   ---------------------------------------------------------------- */

.entry {
	color: var(--sov-text);
	font-size: 17px;
	line-height: 1.72;
	letter-spacing: -.003em;
}

.entry p { margin: 0 0 20px; }

.entry h2,
.entry h3,
.entry h4 {
	color: var(--sov-text);
	font-weight: 700;
	line-height: 1.24;
	letter-spacing: -.02em;
	text-wrap: balance;
}

.entry h2 { margin: 38px 0 14px; font-size: clamp(22px, 2.2vw, 27px); }
.entry h3 { margin: 30px 0 12px; font-size: clamp(19px, 1.8vw, 22px); }
.entry h4 { margin: 24px 0 10px; font-size: 18px; }

.entry a {
	color: var(--sov-blue);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in srgb, var(--sov-blue) 40%, transparent);
}

.entry a:hover { text-decoration-color: currentColor; }

.entry ul,
.entry ol { margin: 0 0 20px; padding-left: 24px; }
.entry li { margin-bottom: 8px; }

.entry blockquote {
	margin: 26px 0;
	padding: 18px 22px;
	border: 0;
	border-left: 3px solid var(--sov-blue);
	border-radius: 0 var(--sov-radius) var(--sov-radius) 0;
	background: var(--sov-blue-soft);
	color: var(--sov-text);
	font-style: normal;
}

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

.entry code,
.entry kbd {
	padding: 2px 6px;
	border-radius: 6px;
	background: var(--sov-surface-2);
	border: 1px solid var(--sov-border);
	font-size: .9em;
}

.entry pre {
	padding: 16px 18px;
	border-radius: var(--sov-radius);
	background: var(--sov-blue-dark);
	color: #e8edf6;
	overflow-x: auto;
}

.entry pre code { background: none; border: 0; padding: 0; color: inherit; }

.entry hr {
	margin: 32px 0;
	border: 0;
	border-top: 1px solid var(--sov-border);
}

.entry table {
	width: 100%;
	margin: 0 0 24px;
	border-collapse: collapse;
	font-size: 15px;
	display: block;
	overflow-x: auto;
}

.entry th,
.entry td {
	padding: 11px 14px;
	border: 1px solid var(--sov-border);
	text-align: left;
}

.entry th {
	background: var(--sov-surface-2);
	font-weight: 650;
}

/* ----------------------------------------------------------------
   Footer: share, likes, comments
   ---------------------------------------------------------------- */

.entry-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: 30px;
	padding-top: 22px;
	border-top: 1px solid var(--sov-border);
}

.post-comments-wrapper {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--sov-border);
}

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

#sidebar .widget,
.widget-area .widget {
	margin-bottom: 18px;
	padding: 20px;
	background: var(--sov-white);
	border: 1px solid var(--sov-border);
	border-radius: var(--sov-radius);
	box-shadow: var(--sov-shadow-xs);
	box-sizing: border-box;
}

#sidebar .widget-title,
.widget-area .widget-title {
	margin: 0 0 14px;
	color: var(--sov-text);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -.015em;
	text-transform: none;
}

#sidebar .widget ul,
.widget-area .widget ul { margin: 0; padding: 0; list-style: none; }

#sidebar .widget li,
.widget-area .widget li {
	padding: 9px 0;
	border-bottom: 1px solid var(--sov-border);
	font-size: 14.5px;
	line-height: 1.4;
}

#sidebar .widget li:last-child,
.widget-area .widget li:last-child { border-bottom: 0; padding-bottom: 0; }

#sidebar a,
.widget-area a { color: var(--sov-text); text-decoration: none; }
#sidebar a:hover,
.widget-area a:hover { color: var(--sov-blue); }

/* ----------------------------------------------------------------
   Reading progress (element created by sov-ui.js)
   ---------------------------------------------------------------- */

.sov-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 2.5px;
	width: 100%;
	transform: scaleX(0);
	transform-origin: left;
	background: var(--sov-blue);
	z-index: 700;
	pointer-events: none;
}

/* ----------------------------------------------------------------
   Archive / search headings
   ---------------------------------------------------------------- */

.archive-header,
.page-title {
	color: var(--sov-text);
	letter-spacing: -.025em;
}

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

@media (max-width: 860px) {
	body.single .container-inner,
	body.page .container-inner,
	body.archive .container-inner,
	body.search .container-inner {
		padding-left: 16px;
		padding-right: 16px;
	}
	body.single .post-wrapper,
	body.page .post-wrapper {
		padding: 24px 20px 28px;
		border-radius: var(--sov-radius);
	}
	.entry { font-size: 16.5px; }
}

@media (max-width: 580px) {
	body.single .container-inner,
	body.page .container-inner,
	body.archive .container-inner,
	body.search .container-inner {
		padding-left: 12px;
		padding-right: 12px;
	}
	body.single .post-wrapper,
	body.page .post-wrapper { padding: 20px 16px 24px; }

	/* the parent theme stacks two more padding layers inside the card
	   (.content 16px + .entry-content 20px); on a 390px phone that left the
	   text column at 260px, so drop them and let the card own the gutter */
	body.single .content,
	body.page .content,
	body.archive .content,
	body.search .content {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	body.single .entry-content,
	body.page .entry-content {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* tables already scroll, but they were clipped at the card edge with no
	   hint; run them to the card edge and shade the scrollable sides */
	body.single .entry-content .entry table,
	body.page .entry-content .entry table,
	.entry table {
		width: auto !important;
		max-width: none;
		margin-left: -16px !important;
		margin-right: -16px !important;
		padding-left: 16px;
		padding-right: 16px;
		font-size: 14px;
		background:
			linear-gradient(to right, var(--sov-white) 30%, rgba(255, 255, 255, 0)) left center / 28px 100% no-repeat,
			linear-gradient(to left, var(--sov-white) 30%, rgba(255, 255, 255, 0)) right center / 28px 100% no-repeat,
			radial-gradient(farthest-side at 0 50%, rgba(15, 23, 42, .16), rgba(15, 23, 42, 0)) left center / 12px 100% no-repeat,
			radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, .16), rgba(15, 23, 42, 0)) right center / 12px 100% no-repeat;
		background-attachment: local, local, scroll, scroll;
	}

	.entry-content .entry th,
	.entry-content .entry td,
	.entry th,
	.entry td { padding: 9px 10px; }

	/* balance + auto hyphens chopped words on a phone; greedy wrapping reads
	   better in a narrow column */
	.entry-title,
	h1.entry-title {
		font-size: clamp(23px, 6.6vw, 28px);
		hyphens: manual;
		text-wrap: wrap;
		overflow-wrap: break-word;
	}
}