/* =========================================================================
 * Raj Consultancy :: Single post
 *
 * Loaded on top of rc-blog.css, which carries the tokens, the container, the
 * date and the rail. Only what the post page adds is here.
 *
 * The design has no post page - it stops at the card - so this is the card's
 * own vocabulary at reading size: the display face for the headline, the
 * calendar date, the 20px corner on the picture, the gradient for anything that
 * acts, and #333 on #FFF for everything that is read.
 * ========================================================================= */

.rc-blog--single {
	/* The reading measure. 792 of column with type at 17/28 lands around 70
	   characters a line, which is where prose is easiest to read. */
	--rc-prose-fs: 17px;
	--rc-prose-lh: 1.7;
	--rc-prose: #333333;
	--rc-prose-gap: 22px;      /* between paragraphs */
	--rc-post-title-fs: 24px;
	--rc-post-radius: 20px;
	--rc-rule: #E5E5E5;
}

/* The single post has no centred headline block above it, so the body starts at
   the top of the section rather than under a heading. */
.rc-blog--single .rc-body { margin-top: 0; }

.rc-blog .rc-post { margin: 0; }

/* =========================================================================
 * The head
 * ========================================================================= */

/* The trail back to the grid, set as a quiet link rather than a second button:
   there is already one gradient on this page and it is not this. */
.rc-blog .rc-back,
.rc-blog .rc-back:link,
.rc-blog .rc-back:visited,
.rc-blog .rc-back:hover,
.rc-blog .rc-back:focus,
.rc-blog .rc-back:active {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 18px;
	color: var( --rc-btn-from );
	font-family: var( --rc-face );
	font-weight: 600;
	font-size: max( 13px, calc( 15px * var( --rc-bs ) ) );
	text-decoration: none;
	box-shadow: none;
	transition: gap .2s ease;
}
.rc-blog .rc-back:hover { gap: 12px; }
.rc-blog .rc-back:focus-visible {
	outline: 3px solid var( --rc-btn-from );
	outline-offset: 3px;
}

/*
 * The headline in the display face, at 34 rather than the section heading's 40,
 * and NOT uppercased.
 *
 * The section headings are three or four words. A post headline on this site is
 * "Dadra & Nagar Haveli and Daman & Diu (UT) MINIMUM WAGES W.E.F. 01-04-2026",
 * and forty words of that in caps is a wall. Same face, same weight, read as
 * written.
 */
.rc-blog .rc-post-title {
	font-family: var( --rc-display ) !important;
	font-weight: 600;
	line-height: 1.15;
	color: var( --rc-heading );
	font-size: max( 22px, calc( var( --rc-post-title-fs ) * var( --rc-hs ) ) );
}

.rc-post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 20px;
	margin-top: 14px;
	padding-bottom: 22px;
	border-bottom: 1px solid var( --rc-rule );
}

/* The categories, as the same quiet metadata as the date beside them. */
.rc-blog .rc-post-cats {
	font-family: var( --rc-face );
	color: var( --rc-date );
	font-size: max( 12px, calc( var( --rc-date-fs ) * var( --rc-bs ) ) );
}
.rc-blog .rc-post-cats a,
.rc-blog .rc-post-cats a:link,
.rc-blog .rc-post-cats a:visited {
	color: var( --rc-date );
	text-decoration: none;
	box-shadow: none;
}
.rc-blog .rc-post-cats a:hover { color: var( --rc-btn-from ); }

/* =========================================================================
 * The picture
 *
 * The card's 20px corner at full width. A height cap rather than a ratio: a
 * portrait upload would otherwise run to two screens before the text starts.
 * ========================================================================= */
.rc-post-media {
	margin: 26px 0 0;
	overflow: hidden;
	border-radius: var( --rc-post-radius );
	background: #EEF1F6;
}
.rc-post-media img {
	display: block;
	width: 100%;
	max-height: 520px;
	object-fit: cover;
}
.rc-blog .rc-post-media figcaption {
	padding: 10px 2px 0;
	color: var( --rc-date );
	font-family: var( --rc-face );
	font-size: max( 12px, calc( 14px * var( --rc-bs ) ) );
}

/* =========================================================================
 * The content
 *
 * Every rule here is scoped to .rc-post-content, so it reaches the post's own
 * blocks and nothing else on the page. Element selectors rather than block
 * classes: the editor's output changes name between WordPress versions, the
 * elements do not.
 * ========================================================================= */
.rc-post-content {
	margin-top: 30px;
	color: var( --rc-prose );
	font-family: var( --rc-face );
	font-size: max( 15px, calc( var( --rc-prose-fs ) * var( --rc-bs ) ) );
	line-height: var( --rc-prose-lh );
}

/* The gap between blocks, given as a top margin on everything but the first -
   so the content never opens with a blank line under the picture. */
.rc-post-content > * { margin-top: var( --rc-prose-gap ); }
.rc-post-content > *:first-child { margin-top: 0; }

.rc-post-content p { margin: 0; }

.rc-post-content h2,
.rc-post-content h3,
.rc-post-content h4 {
	font-family: var( --rc-display ) !important;
	font-weight: 700;
	line-height: 1.25;
	color: var( --rc-heading );
	margin-top: 34px;
}
.rc-post-content h2 { font-size: max( 19px, calc( 26px * var( --rc-hs ) ) ); }
.rc-post-content h3 { font-size: max( 17px, calc( 21px * var( --rc-hs ) ) ); }
.rc-post-content h4 { font-size: max( 15px, calc( 18px * var( --rc-hs ) ) ); }

.rc-post-content a,
.rc-post-content a:link,
.rc-post-content a:visited {
	color: var( --rc-btn-from );
	text-decoration: underline;
	text-underline-offset: 2px;
	box-shadow: none;
}
.rc-post-content a:hover { color: var( --rc-btn-to ); }

.rc-post-content ul,
.rc-post-content ol { padding-left: 22px; }
.rc-post-content li { margin-top: 8px; }
.rc-post-content li > ul,
.rc-post-content li > ol { margin-top: 8px; }

/* The gradient, reduced to the 3px edge of a quote - the one place on the page
   the brand colour appears without being something to click. */
.rc-post-content blockquote {
	margin-left: 0;
	margin-right: 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid var( --rc-btn-from );
	color: #555;
	font-style: italic;
}
.rc-post-content blockquote p + p { margin-top: 12px; }

.rc-post-content img,
.rc-post-content iframe,
.rc-post-content video {
	max-width: 100%;
	border-radius: 12px;
}
.rc-post-content figure { margin-left: 0; margin-right: 0; }
.rc-post-content figcaption {
	padding-top: 8px;
	color: var( --rc-date );
	font-size: max( 12px, calc( 14px * var( --rc-bs ) ) );
}

/* Anything wide scrolls in its own box rather than widening the page: a table
   of wage rates is the reason this page exists, and on a phone it will not fit. */
.rc-post-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: max( 13px, calc( 15px * var( --rc-bs ) ) );
}
.rc-post-content th,
.rc-post-content td {
	padding: 10px 12px;
	border: 1px solid var( --rc-rule );
	text-align: left;
	vertical-align: top;
}
.rc-post-content thead th {
	background: #F7F8FA;
	font-weight: 600;
	color: var( --rc-heading );
}
.rc-post-content .wp-block-table { overflow-x: auto; }

.rc-post-content pre {
	padding: 16px;
	overflow-x: auto;
	border-radius: 12px;
	background: #F7F8FA;
	font-size: 14px;
}
.rc-post-content hr {
	height: 1px;
	border: 0;
	background: var( --rc-rule );
}

/* The paged-post links, wearing the pager's numbers. */
.rc-post-pages {
	display: flex;
	flex-wrap: wrap;
	gap: var( --rc-pg-gap );
	margin-top: 32px;
}
.rc-blog .rc-post-pages a,
.rc-blog .rc-post-pages > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var( --rc-pg-size );
	height: var( --rc-pg-size );
	padding: 0 8px;
	border: 1px solid var( --rc-pg-bd );
	border-radius: var( --rc-pg-num-radius );
	color: var( --rc-pg );
	font-weight: 600;
	text-decoration: none;
}
.rc-blog .rc-post-pages > span {
	border-color: transparent;
	background-image: linear-gradient( 90deg, var( --rc-pg-on-from ) 0%, var( --rc-pg-on-to ) 100% );
	color: var( --rc-pg-on );
}

/* =========================================================================
 * Tags
 *
 * Small, quiet, outlined. They are navigation, not a call to action, so they
 * take the pager's edge rather than the button's fill.
 * ========================================================================= */
.rc-post-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 34px;
}
.rc-blog .rc-post-tags a,
.rc-blog .rc-post-tags a:link,
.rc-blog .rc-post-tags a:visited {
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 14px;
	border: 1px solid var( --rc-side-item-bd );
	border-radius: 17px;
	color: var( --rc-prose );
	font-family: var( --rc-face );
	font-size: max( 12px, calc( 14px * var( --rc-bs ) ) );
	text-decoration: none;
	box-shadow: none;
	transition: border-color .2s ease, color .2s ease;
}
.rc-blog .rc-post-tags a:hover {
	border-color: var( --rc-btn-from );
	color: var( --rc-btn-from );
}

/* =========================================================================
 * Previous / next
 *
 * The rail item's box, split across the row. Each side is only printed when
 * there is a post on it, and `is-next` is pushed to the right so a post with
 * only a previous - or only a next - keeps the arrow on the side it points to.
 * ========================================================================= */
.rc-post-nav {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: var( --rc-card-gap );
	margin-top: 40px;
	padding-top: 34px;
	border-top: 1px solid var( --rc-rule );
}
.rc-blog .rc-post-nav-item,
.rc-blog .rc-post-nav-item:link,
.rc-blog .rc-post-nav-item:visited {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px 19px;
	border: 1px solid var( --rc-side-item-bd );
	border-radius: var( --rc-side-item-r );
	background: var( --rc-side-item-bg );
	text-decoration: none;
	box-shadow: none;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.rc-blog .rc-post-nav-item:hover {
	transform: translateY( -2px );
	border-color: var( --rc-btn-from );
	box-shadow: 0 10px 24px rgba( 17, 24, 39, .08 );
}
.rc-blog .rc-post-nav-item:focus-visible {
	outline: 3px solid var( --rc-btn-from );
	outline-offset: 3px;
}
/* Only a next post: it takes the right-hand cell rather than the left. */
.rc-blog .rc-post-nav-item.is-next:first-child { grid-column: 2; }
.rc-blog .rc-post-nav-item.is-next { text-align: right; }

.rc-post-nav-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var( --rc-date );
	font-family: var( --rc-face );
	font-weight: 600;
	font-size: max( 11px, calc( 13px * var( --rc-bs ) ) );
	text-transform: uppercase;
	letter-spacing: .04em;
}
.rc-blog .rc-post-nav-item.is-next .rc-post-nav-label { justify-content: flex-end; }

.rc-blog .rc-post-nav-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var( --rc-card-title );
	font-family: var( --rc-face );
	font-weight: 500;
	line-height: 1.35;
	font-size: max( 13px, calc( 15px * var( --rc-bs ) ) );
}
.rc-blog .rc-post-nav-item:hover .rc-post-nav-title { color: var( --rc-btn-from ); }

/* =========================================================================
 * Comments
 *
 * Neve's comment markup, brought into this page's type and edges. Left light on
 * purpose - it is not part of the design, and it should not draw the eye away
 * from what is.
 * ========================================================================= */
.rc-post .comments-area {
	margin-top: 44px;
	padding-top: 34px;
	border-top: 1px solid var( --rc-rule );
	font-family: var( --rc-face );
	color: var( --rc-prose );
}
.rc-post .comments-area .comments-title,
.rc-post .comments-area .comment-reply-title {
	font-family: var( --rc-display ) !important;
	font-weight: 700;
	color: var( --rc-heading );
	font-size: max( 18px, calc( 24px * var( --rc-hs ) ) );
}
.rc-post .comments-area .comment-list { padding-left: 0; list-style: none; }
.rc-post .comments-area .comment-body {
	padding: 18px 19px;
	margin-top: 16px;
	border: 1px solid var( --rc-side-item-bd );
	border-radius: var( --rc-side-item-r );
}
.rc-post .comments-area input:not( [type="submit"] ),
.rc-post .comments-area textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var( --rc-side-item-bd );
	border-radius: 12px;
	font-family: var( --rc-face );
	font-size: 15px;
}
.rc-post .comments-area input[type="submit"] {
	min-width: var( --rc-btn-w );
	min-height: var( --rc-btn-h );
	padding: 0 16px;
	border: 0;
	border-radius: var( --rc-btn-radius );
	background-image: linear-gradient( 90deg, var( --rc-btn-from ) 0%, var( --rc-btn-to ) 100% );
	color: var( --rc-btn );
	font-family: var( --rc-face );
	font-weight: 600;
	font-size: max( 13px, calc( var( --rc-btn-fs ) * var( --rc-bs ) ) );
	cursor: pointer;
}

/* =========================================================================
 * Breakpoints
 * ========================================================================= */
@media ( max-width: 1024px ) {
	.rc-blog--single.rc-blog--single { --rc-post-title-fs: 30px; }
}

@media ( max-width: 620px ) {
	.rc-blog--single.rc-blog--single {
		--rc-post-title-fs: 26px;
		--rc-prose-fs: 16px;
		--rc-post-radius: 16px;
	}

	.rc-post-media img { max-height: 300px; }

	/* One above the other, and the next-post box goes back to the left. */
	.rc-post-nav { grid-template-columns: minmax( 0, 1fr ); }
	.rc-blog .rc-post-nav-item.is-next:first-child { grid-column: 1; }
	.rc-blog .rc-post-nav-item.is-next { text-align: left; }
	.rc-blog .rc-post-nav-item.is-next .rc-post-nav-label { justify-content: flex-start; }
}

/* =========================================================================
 * Neve's own vertical rhythm on a post
 *
 * Neve gives .neve-main a margin on single views when the Customizer's content
 * spacing is set. The section brings its own 60px top and bottom, so that
 * margin lands on top of ours as a double gap. Scoped to a single POST, so
 * pages and every other post type keep it.
 * ========================================================================= */
body.single-post .neve-main { margin-top: 0; margin-bottom: 0; }