/**
 * Article Details page (single post). Values confirmed from Design
 * Refrance's TSI Article Details.html.
 *
 * .ad-rail/.rlbl/.rbox (skyscraper rails) live in ad-rail.css (shared
 * with the Article Listing sidebar). .side-box/.side-h/.mr (Most Read)
 * and .more-wrap/.more-kick/.more-grid/.more-card (More Like This) live
 * in article-listing.css — reused verbatim here, not redefined.
 */

/* 3-column shell: left ad | article | right ad */
.art-shell {
	display: grid;
	grid-template-columns: 160px minmax(0, 1fr) 160px;
	gap: 48px;
	padding: var(--spacing-article_shell-top) var(--spacing-article_shell-side) var(--spacing-article_shell-bottom);
	align-items: start;
}

/* Ads disabled site-wide (MALASIYA_ADS_ENABLED) — single.php drops this
   modifier class the moment ads are re-enabled, no other change needed. */
.art-shell.no-ads {
	grid-template-columns: minmax(0, 1fr);
}

.art-shell .ad-rail {
	position: sticky;
	top: 24px;
}

/* dedicated narrow reading column — deliberately NOT the listing page's
   --container-max; a comfortable reading measure is a different design
   decision than a content+sidebar grid's overall width. */
.article {
	max-width: 760px;
	margin: 0 auto;
	min-width: 0;
}

.crumb {
	font-size: 12px;
	color: var(--color-ink-soft);
	letter-spacing: .3px;
	margin-bottom: 22px;
}

/* Explicit :link/:visited reset — without this, browsers apply their
   own default visited-link color (usually purple) once "Home" has been
   clicked once, since .crumb only set a base color on the wrapper, not
   the anchors themselves. Hover/focus (green) stays exactly as-is. */
.crumb a,
.crumb a:link,
.crumb a:visited {
	color: inherit;
}

.crumb a:hover,
.crumb a:focus {
	color: var(--color-primary-deep);
}

.crumb .sep {
	margin: 0 8px;
	color: var(--color-line-mid);
}

.art-cat {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: 14px;
}

.art-title {
	font-family: var(--font-secondary);
	font-weight: 900;
	font-size: 52px;
	line-height: 1.05;
	letter-spacing: -1.2px;
	color: var(--color-ink);
	margin: 0;
}

.art-dek {
	font-family: var(--font-secondary);
	font-style: italic;
	font-size: 22px;
	line-height: 1.45;
	color: var(--color-ink-mid);
	margin-top: 20px;
}

/* byline */
.art-meta {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 26px 0 0;
	padding: 20px 0;
	border-top: 1px solid var(--color-line);
	border-bottom: 1px solid var(--color-line);
}

.art-meta .av {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--color-primary-wash);
	border: 1px solid var(--color-line);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-secondary);
	font-weight: 900;
	font-size: 18px;
	color: var(--color-primary-deep);
	flex: none;
}

.art-meta .who {
	flex: 1;
	min-width: 0;
}

.art-meta .who .by {
	font-size: 14px;
	font-weight: 600;
	color: var(--color-ink);
	transition: .15s;
}

.art-meta .who a.by:hover,
.art-meta .who a.by:focus {
	color: var(--color-primary-deep);
	text-decoration: underline;
}

.art-meta .who .tm {
	font-size: 12.5px;
	color: var(--color-ink-soft);
	margin-top: 2px;
}

/* hero image */
.art-hero {
	margin: 32px 0 8px;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-thumb);
	overflow: hidden;
	background: var(--color-primary-wash);
	aspect-ratio: 16 / 9;
}

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

.art-cap {
	font-size: 12px;
	color: var(--color-ink-soft);
	margin: 10px 2px 0;
	line-height: 1.5;
}

/* engagement stats bar */
.art-stats {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-top: 18px;
	padding: 15px 0;
	border-bottom: 1px solid var(--color-line);
	flex-wrap: wrap;
}

.art-stats .stat {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 13.5px;
	color: var(--color-ink-mid);
	text-decoration: none;
}

.art-stats .stat svg {
	color: var(--color-ink-soft);
	flex: none;
}

.art-stats .stat b {
	color: var(--color-ink);
	font-weight: 700;
}

.art-stats .ssp {
	flex: 1;
}

/* One flex item wrapping "Share" + the icons together — see
   article-stats.php's comment for why (keeps them from wrapping onto
   separate lines independently on small screens). 20px matches
   .art-stats's own gap, so this reads exactly like two separate flex
   children still would on a single line. */
.art-stats .share-group {
	display: flex;
	align-items: center;
	gap: 20px;
}

.art-stats .shlbl {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--color-ink-soft);
}

.art-stats .share {
	display: flex;
	gap: 8px;
}

.art-stats .share a,
.art-stats .share button {
	width: 34px;
	height: 34px;
	border: 1.5px solid var(--color-line-mid);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-ink-mid);
	background: transparent;
	cursor: pointer;
	transition: .15s;
}

/* Explicit size, not left to the SVG's own width/height HTML attributes:
   a <button> (unlike an <a>) as a flex container can collapse a replaced
   child element (img/svg) to 0 computed width in Chromium once the
   base reset's `svg { max-width: 100% }` is in play — confirmed via
   direct inspection (Copy Link's icon measured 0px wide despite
   width="15" in its markup, while the X/LinkedIn <a> icons next to it
   were unaffected). Forcing the size in CSS sidesteps that collapse
   entirely regardless of element type. */
.art-stats .share svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

/* The Copy Link <button>'s icon-wrap span exists ONLY to fix the bug
   above — a <span> between the <button> and <svg> gives the browser a
   normal box to size against, breaking whatever internal layout path a
   bare <button><svg> pair was hitting. */
.art-stats .share .icon-wrap {
	display: flex;
	width: 14px;
	height: 14px;
}

.art-stats .share a:hover,
.art-stats .share a:focus,
.art-stats .share button:hover,
.art-stats .share button:focus {
	background: var(--color-primary-deep);
	border-color: var(--color-primary-deep);
	color: var(--color-white);
}

/* body copy */
.art-body {
	margin-top: 30px;
}

.art-body p {
	font-size: 17.5px;
	line-height: 1.8;
	color: #2c352f;
	margin-bottom: 22px;
}

/* Theme Setting: Malasiya Theme Settings → Article Listing & Article
   Details → "Large drop-cap first letter" (malasiya_dropcap_enabled,
   default on). body.no-dropcap is added by malasiya_body_classes()
   (inc/template-functions.php) when the admin turns it off. */
body:not(.no-dropcap) .art-body > p:first-of-type::first-letter {
	font-family: var(--font-secondary);
	font-weight: 900;
	font-size: 70px;
	line-height: .8;
	float: left;
	padding: 6px 12px 0 0;
	color: var(--color-primary-deep);
}

.art-body h2 {
	font-family: var(--font-secondary);
	font-weight: 700;
	font-size: 28px;
	letter-spacing: -.4px;
	color: var(--color-ink);
	margin: 40px 0 16px;
}

.art-body a {
	color: var(--color-primary-deep);
	border-bottom: 1px solid var(--color-line-mid);
}

.art-body a:hover,
.art-body a:focus {
	border-color: var(--color-primary-deep);
}

.art-body blockquote {
	margin: 36px 0;
	padding: 8px 0 8px 28px;
	border-left: 3px solid var(--color-primary);
}

.art-body blockquote p {
	font-family: var(--font-secondary);
	font-style: italic;
	font-weight: 700;
	font-size: 26px;
	line-height: 1.4;
	color: var(--color-ink);
	margin: 0;
}

.art-body blockquote cite {
	display: block;
	font-family: var(--font-primary);
	font-style: normal;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .3px;
	color: var(--color-ink-soft);
	margin-top: 14px;
}

.art-body ul,
.art-body ol {
	margin: 0 0 22px;
	padding-left: 0;
	list-style: none;
}

.art-body li {
	font-size: 17px;
	line-height: 1.75;
	color: #2c352f;
	padding-left: 26px;
	position: relative;
	margin-bottom: 12px;
}

.art-body li::before {
	content: '';
	position: absolute;
	left: 4px;
	top: 12px;
	width: 6px;
	height: 6px;
	background: var(--color-primary);
	border-radius: 50%;
}

.art-body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-thumb);
}

.art-body table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 22px;
	font-size: 15px;
}

.art-body table th,
.art-body table td {
	border: 1px solid var(--color-line);
	padding: 10px 12px;
	text-align: left;
}

.art-body table th {
	background: var(--color-primary-wash);
	font-weight: 700;
}

/* Code blocks — not present in Design Refrance (this article has none),
   but the brief asks for them to render correctly; a genuine styling
   gap otherwise (unstyled <pre>/<code> would inherit the serif body
   font and wrap badly). Values follow this file's existing tokens, not
   invented from a separate source. */
.art-body code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
	background: var(--color-primary-wash);
	padding: 2px 6px;
	border-radius: 4px;
}

.art-body pre {
	margin: 0 0 22px;
	padding: 18px 20px;
	background: var(--color-ink);
	border-radius: var(--radius-thumb);
	overflow-x: auto;
}

.art-body pre code {
	background: none;
	padding: 0;
	color: var(--color-white);
	font-size: 14px;
	line-height: 1.6;
}

/* tags */
.art-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 40px;
	padding-top: 26px;
	border-top: 1px solid var(--color-line);
}

.art-tags a {
	font-size: 12.5px;
	color: var(--color-ink-mid);
	border: 1px solid var(--color-line-mid);
	border-radius: var(--radius-pill);
	padding: 6px 15px;
	background: var(--color-paper);
	transition: .15s;
}

.art-tags a:hover,
.art-tags a:focus {
	background: var(--color-primary);
	color: var(--color-white);
	border-color: var(--color-primary);
}

/* comments */
.comments {
	margin-top: 46px;
	padding-top: 30px;
	border-top: 2px solid var(--color-ink);
}

.comments h2 {
	font-family: var(--font-secondary);
	font-weight: 700;
	font-size: 26px;
	letter-spacing: -.4px;
	color: var(--color-ink);
	margin-bottom: 6px;
}

.comments h2 .ccount {
	color: var(--color-ink-soft);
	font-weight: 400;
}

.comments .csub {
	font-size: 13px;
	color: var(--color-ink-soft);
	margin-bottom: 24px;
}

/* "Replying to X" indicator shown above the form while a reply is in
   progress — not in Design Refrance (that demo never solved this UI
   state at all), styled to match the rest of this section. */
.reply-indicator {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--color-ink-mid);
	background: var(--color-primary-wash);
	border: 1px solid var(--color-line);
	border-radius: 8px;
	padding: 10px 16px;
	margin-bottom: 12px;
}

/* REAL BUG, confirmed: the browser's own default stylesheet hides
   [hidden] elements via `[hidden]{display:none}` — but that's a
   User-Agent-origin rule, and `.reply-indicator{display:flex}` above is
   an Author-origin rule of EQUAL specificity (one class = one
   attribute), so ours was winning the tie and overriding `hidden`
   completely — the indicator was showing on every page load regardless
   of the `hidden` attribute JS/HTML actually set. This selector is more
   specific (class + attribute) than either of those, so it always wins
   correctly when the attribute is present. */
.reply-indicator[hidden] {
	display: none;
}

.reply-indicator-name {
	color: var(--color-primary-deep);
}

.reply-indicator button {
	margin-left: auto;
	font-family: var(--font-primary);
	font-size: 12px;
	font-weight: 600;
	color: var(--color-ink-soft);
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0;
}

.reply-indicator button:hover,
.reply-indicator button:focus {
	color: var(--color-primary-deep);
}

.cbox {
	background: var(--color-wash);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-card);
	padding: 20px;
	margin-bottom: 32px;
}

.cbox .crow {
	display: flex;
	gap: 12px;
	margin-bottom: 12px;
}

.cbox input {
	flex: 1;
	min-width: 0;
	font-family: var(--font-primary);
	font-size: 14px;
	color: var(--color-ink);
	background: var(--color-paper);
	border: 1.5px solid var(--color-line-mid);
	border-radius: 8px;
	padding: 11px 13px;
	outline: 0;
	transition: .15s;
}

.cbox textarea {
	width: 100%;
	font-family: var(--font-primary);
	font-size: 14px;
	color: var(--color-ink);
	background: var(--color-paper);
	border: 1.5px solid var(--color-line-mid);
	border-radius: 8px;
	padding: 12px 13px;
	outline: 0;
	resize: vertical;
	min-height: 90px;
	line-height: 1.55;
	transition: .15s;
}

.cbox input:focus,
.cbox textarea:focus {
	border-color: var(--color-primary);
}

.cbox .cfoot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: 12px;
	flex-wrap: wrap;
}

.cbox .chint {
	font-size: 12px;
	color: var(--color-ink-soft);
}

.cbox .cpost {
	font-family: var(--font-primary);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	background: var(--color-primary-deep);
	color: var(--color-white);
	border: 0;
	border-radius: var(--radius-pill);
	padding: 12px 26px;
	cursor: pointer;
	transition: .15s;
	flex: none;
}

.cbox .cpost:hover,
.cbox .cpost:focus {
	background: var(--color-primary);
}

.clist {
	display: flex;
	flex-direction: column;
	gap: 24px;
	list-style: none;
	padding-left: 0;
}

.clist .children {
	list-style: none;
	margin: 20px 0 0;
	padding-left: 56px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* "View N more replies" — sits right after a comment's .children list,
   indented to match it. Not in Design Refrance (that demo shows every
   reply at once, no pagination at all) — styled to read as a natural
   extension of .cact's Like/Reply buttons rather than a heavier
   standalone control. */
.view-more {
	display: block;
	margin: 12px 0 0 56px;
	background: none;
	border: 0;
	font-family: var(--font-primary);
	font-size: 12.5px;
	font-weight: 700;
	color: var(--color-primary-deep);
	cursor: pointer;
	padding: 0;
}

.view-more:hover,
.view-more:focus {
	text-decoration: underline;
}

.view-more:disabled {
	opacity: .6;
	cursor: wait;
	text-decoration: none;
}

/* "Load N more comments" reuses .load-more's existing pill styling
   (article-listing.css's counterpart isn't loaded on this page — see
   functions.php — so the same rule is defined once, here). */
.comments .load-more {
	display: block;
	width: max-content;
	margin: 24px auto 0;
	font-family: var(--font-primary);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	background: transparent;
	color: var(--color-primary-deep);
	border: 1.5px solid var(--color-primary-deep);
	border-radius: var(--radius-pill);
	padding: 13px 34px;
	cursor: pointer;
	transition: .15s;
}

.comments .load-more:hover,
.comments .load-more:focus {
	background: var(--color-primary-deep);
	color: var(--color-white);
}

.comments .load-more:disabled {
	opacity: .6;
	cursor: wait;
}

.citem {
	display: flex;
	gap: 14px;
}

.citem .cav {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--color-primary-wash);
	border: 1px solid var(--color-line);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-secondary);
	font-weight: 900;
	font-size: 17px;
	color: var(--color-primary-deep);
	flex: none;
}

.citem .cbody {
	flex: 1;
	min-width: 0;
}

.citem .chead {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 5px;
	flex-wrap: wrap;
}

.citem .cname {
	font-size: 14px;
	font-weight: 700;
	color: var(--color-ink);
}

.citem .cwhen {
	font-size: 12px;
	color: var(--color-ink-soft);
}

.citem p {
	font-size: 14.5px;
	line-height: 1.65;
	color: #2c352f;
	margin: 0 0 9px;
}

.citem .cact {
	display: flex;
	gap: 18px;
}

.citem .cact a,
.citem .cact button {
	background: none;
	border: 0;
	font-family: var(--font-primary);
	font-size: 12px;
	font-weight: 600;
	color: var(--color-ink-soft);
	cursor: pointer;
	padding: 0;
	transition: .15s;
}

.citem .cact a:hover,
.citem .cact a:focus,
.citem .cact button:hover,
.citem .cact button:focus {
	color: var(--color-primary-deep);
}

.citem .cact button.liked {
	color: var(--color-primary-deep);
}

.citem .cact button:disabled {
	opacity: .6;
	cursor: wait;
}

.no-comments {
	font-size: 14px;
	color: var(--color-ink-soft);
}

@media (max-width: 768px) {
	/* REAL BUG, confirmed against the reference directly: .art-shell's
	   SIDE padding never got a mobile override anywhere in this file — it
	   was still resolving to the desktop 56px var value even at phone
	   widths (reference uses 16px here), same convention already used
	   for .cat-shell on the listing page. Verified via computed styles:
	   was "16px 56px 48px", should be "16px 16px 48px". */
	.art-shell {
		grid-template-columns: 1fr;
		gap: 32px;
		padding-inline: 16px;
	}

	.art-shell .ad-rail {
		position: static;
		display: flex;
		flex-direction: column;
		align-items: center;
		order: 2;
	}

	.art-shell .ad-rail.left {
		order: 0;
	}

	.article {
		order: 1;
		max-width: 100%;
	}

	.art-title {
		font-size: 34px;
		letter-spacing: -.6px;
	}

	.art-dek {
		font-size: 18px;
	}

	.art-body p {
		font-size: 16.5px;
	}

	.art-stats {
		gap: 14px 18px;
	}

	/* .ssp's flex:1 exists to push "Share" + the icons to the far right
	   on ONE line (desktop) — on mobile, once the stats bar wraps to a
	   second line, that same flex:1 spacer claims the entire second line
	   for itself (a lone flex item with no siblings on that line yet),
	   shoving "Share" and the icons apart instead of keeping them
	   together at the start of that bottom line. Hidden here so wrapped
	   content just flows in order instead. */
	.art-stats .ssp {
		display: none;
	}

	.cbox .crow {
		flex-direction: column;
	}

	.clist .children {
		padding-left: 28px;
	}
}