/* =========================================================
   Net Pay Advance — Single Post Template Styles
   Scope: all rules prefixed .npa- to avoid clashing with
   Astra / astra-child theme styles. Reuses the same color
   tokens and .npa-blog-card / .npa-blog-grid rules from
   blog-listing.css for the Recommended Reading grid — load
   that file alongside this one, not instead of it.

   Values below come straight from the Figma redline spec
   (colors, sizes, weights, radii) pulled from the design file.
   ========================================================= */

/* ---------- Site-specific overrides (added directly on the live site) ---------- */

.ast-container {
	margin-top: 120px !important;
}
.npa-single-body {
	padding: 0 !important;
}
@media (min-width: 993px) {
	.ast-separate-container #primary, .ast-separate-container.ast-left-sidebar #primary, .ast-separate-container.ast-right-sidebar #primary {
		margin: 0 !important;
		padding: 0;
	}
}
.npa-single-content ul, .npa-single-content ol {
	margin: 0 0 20px;
	padding-left: 24px !important;
}
span.npa-single-breadcrumb__sep {
	color: #555555;
}
aside#block-26 {
	display: none;
}
div#secondary {
	margin: 0 !important;
	padding-top: 0 !important;
}
.npa-single-post {
	padding-right: 0 !important;
	padding-left: 0 !important;
}
section.npa-related {
	background-color: #F3F4F6;
}
/* old author box */
.wp-block-coblocks-author.authorbiobox {
	display: none;
}

/* body.single-post — WordPress core's automatic class on every single
   post, so these variables/resets need no PHP snippet to apply. Used
   instead of .npa-single-post because the hero sits BEFORE #primary,
   outside it, and needs to see these vars too. */
body.single-post {
	--npa-cerulean: #036;
	--npa-primary: #004699;
	--npa-primary-text: #333;
	--npa-secondary-text: #555;
	--npa-stroke: #DFE4EA;
	--npa-gray-2: #F3F4F6;
	--npa-white: #FFFFFF;
	--npa-black: #000000;
	--npa-green: #0A7F53;
	--npa-hyperlink: #00F;
	--npa-active-bg: #E6F0FF;
	--npa-radius: 12px;
	--npa-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.10);
}

body.single-post .npa-single-header,
body.single-post .npa-single-post,
body.single-post .npa-related {
	color: var(--npa-primary-text);
	font-family: 'Inter', sans-serif;
}

body.single-post .npa-single-header *,
body.single-post .npa-single-post *,
body.single-post .npa-related * {
	box-sizing: border-box;
}

/* Hero: full-bleed breakout. It's a sibling of #primary/#secondary
   (prints before the 2-column row), */
body.single-post .npa-single-header {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	float: none !important;
	box-sizing: border-box;
}

/* ---------- 2-column layout (content + sidebar) ---------- */

   aside#block-55, aside#block-68 {
    display: none;
}
/* .npa-two-col wraps #secondary + #primary (see single.php). It's the
   sticky boundary: #secondary sticks only while this row is on screen,
   so it starts after the hero and releases before Recommended Reading. */
body.single-post .npa-two-col {
	display: flex;
	align-items: flex-start;
	gap: 40px;
}

body.single-post .npa-two-col #secondary {
	order: 1;
	flex: 0 0 29%;
	width: 29%;
	box-sizing: border-box;
	padding-left: 0 !important;
}

body.single-post .npa-two-col #primary {
	order: 2;
	flex: 1 1 0;
	width: 70%;
	min-width: 0;
	box-sizing: border-box;
}

body.single-post #secondary .lwptoc-light .lwptoc_i {
	border-radius: 8px !important;
	background-color: #F3F4F6 !important;
}

/* Sticky sidebar — desktop only. top clears the fixed header; adjust if
   the header height changes. Scrolls internally if taller than the
   viewport. */
@media (min-width: 922px) {
	body.single-post .npa-two-col #secondary {
		position: sticky;
		top: 128px;
		max-height: calc(100vh - 148px);
		overflow-y: auto;
	}
}

/* The plugin's .lwptoc-left class floats the TOC, which would collapse
   #secondary's height — keep it in normal flow inside the sidebar. */
body.single-post #secondary .lwptoc {
	float: none !important;
	margin-right: 0 !important;
	margin-bottom: 0 !important;
}

/* TOC item hover/active state (LuckyWP Table of Contents widget).
   LuckyWP's free version has no built-in scrollspy — it only has
   click-to-scroll — so the "currently reading" highlight is applied by
   our own script (single-post.js) via the .npa-toc-active class, not a
   class the plugin adds itself. */
body.single-post #secondary .lwptoc_item > a {
	display: block;
	border-radius: 8px;
	padding: 2px 12px;
	color: var(--npa-primary-text) !important;
	text-decoration: none !important;
	transition: background-color .15s ease, color .15s ease;
	line-height: 24px;
}
.npa-single-content [id] {
	scroll-margin-top: 150px;
}
body.single-post #secondary .lwptoc_item > a:hover {
	background-color: var(--npa-active-bg);
	color: var(--npa-primary) !important;
}

body.single-post #secondary .lwptoc_item.npa-toc-active > a {
	background-color: var(--npa-active-bg);
	color: var(--npa-primary) !important;
	font-weight: 700;
}

@media (max-width: 921px) {
	body.single-post .npa-two-col {
		flex-direction: column;
	}

	body.single-post .npa-two-col #primary,
	body.single-post .npa-two-col #secondary {
		order: 0;
		flex: 0 0 auto;
		width: 100%;
		padding-right: 0 !important;
	}
}

.npa-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 10px;
}

/* LuckyWP TOC's own "Float: Left" class, when the widget sets it */
body.single-post .lwptoc-left {
	float: left;
	margin-top: 0 !important;
	margin-right: 0 !important;
}

aside#lpwtoc_widget-3 {
    margin-bottom: 0 !important;
}

@media (min-width: 922px) {
	body.single-post .site-content > .ast-container {
		max-width: 1200px;
		padding: 0 10px !important;
	}
}

/* ---------- Header ---------- */

.npa-single-header {
	background: var(--npa-gray-2);
	padding: 48px 0 36px;
}

.npa-single-breadcrumb {
	color: var(--npa-secondary-text);
	font-size: 13px;
	font-weight: 400;
	margin-bottom: 16px;
}

.npa-single-breadcrumb a {
	color: var(--npa-secondary-text);
	text-decoration: none;
}

.npa-single-breadcrumb a:hover {
	text-decoration: underline;
}

.npa-single-breadcrumb__sep {
	margin: 0 8px;
	color: var(--npa-stroke);
}

.npa-single-breadcrumb__current {
	color: var(--npa-cerulean);
	font-weight: 600;
}

.npa-single-title {
	color: var(--npa-cerulean);
	font-size: 42px;
	font-weight: 700;
	line-height: 52px;
	letter-spacing: -0.42px;
	margin: 0 0 24px;
}

.npa-single-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 24px;
	justify-content: space-between;
	border-top: 1px solid var(--npa-stroke);
	padding-top: 20px;
}

.npa-single-meta__info {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 40px;
}

.npa-single-meta__author {
	display: flex;
	align-items: center;
	gap: 12px;
}

.npa-single-meta__avatar {
	border-radius: 50%;
	width: 40px;
	height: 40px;
	object-fit: cover;
}

.npa-single-meta__author-info {
	display: flex;
	flex-direction: column;
}

.npa-single-meta__author-name {
	color: var(--npa-primary-text);
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
}

.npa-single-meta__author-name:hover {
	text-decoration: underline;
}

.npa-single-meta__author-role {
	color: var(--npa-secondary-text);
	font-size: 13px;
	font-weight: 400;
}

.npa-single-meta__date {
	display: flex;
	flex-direction: column;
}

.npa-single-meta__date-label {
	color: var(--npa-primary-text);
	text-transform: uppercase;
	letter-spacing: 0.3px;
	font-size: 10px;
	font-weight: 500;
	margin-bottom: 0px;
}

.npa-single-meta__date-value {
	color: var(--npa-primary-text);
	font-size: 14px;
	font-weight: 600;
}

.npa-single-share {
	display: flex;
	align-items: center;
	gap: 10px;
}

.npa-single-share__label {
	color: var(--npa-secondary-text);
	font-size: 13px;
	font-weight: 700;
	margin-right: 2px;
}

.npa-single-share a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--npa-white);
	border: 1px solid var(--npa-stroke);
	color: var(--npa-cerulean);
}

.npa-single-share a:hover {
	background: var(--npa-stroke);
}

/* Google's "Add to Preferred Sources" script renders the button into
   the mount point in single.php — look is set by data-theme there. */
.npa-single-preferred {
	margin-top: 24px;
}

/* ---------- Body content (WordPress block editor output) ---------- */

.npa-single-body {
	padding: 40px 0;
}

.npa-single-content {
	max-width: 870px;
	margin: 0 auto;
	font-size: 16px;
	line-height: 26px;
}

/* Featured image — same column width as the article content, sitting
   above it, next to the TOC sidebar (not full-bleed like the hero). */
.npa-single-featured__img {
	display: block;
	width: 100%;
	max-width: 870px;
	margin: 0 auto 24px;
	height: auto;
	border-radius: var(--npa-radius);
	object-fit: cover;
}

.npa-single-content p {
	color: var(--npa-primary-text);
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
	margin: 0 0 20px;
}

.npa-single-content h2 {
	color: var(--npa-cerulean);
	font-size: 24px;
	font-weight: 700;
	line-height: normal;
	margin: 40px 0 16px;
}

.npa-single-content h3 {
	color: var(--npa-cerulean);
	font-size: 20px;
	font-weight: 700;
	line-height: normal;
	margin: 32px 0 14px;
}

.npa-single-content ul,
.npa-single-content ol {
	margin: 0 0 20px;
	padding-left: 24px;
}

.npa-single-content li {
	color: var(--npa-primary-text);
	font-size: 16px;
	line-height: 26px;
	margin-bottom: 8px;
}

.npa-single-content a {
	color: var(--npa-hyperlink);
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
	text-decoration: underline;
	text-underline-offset: auto;
}

.npa-single-content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--npa-radius);
}

.npa-single-content blockquote {
	margin: 24px 0;
	padding: 16px 20px;
	border-left: 4px solid var(--npa-primary);
	background: var(--npa-gray-2);
	color: var(--npa-cerulean);
	font-weight: 600;
}

/* WP core/button block used inline in content, e.g. "Apply Today" */
.npa-single-content .wp-block-button__link,
.npa-single-content .npa-btn-apply {
	display: inline-block;
	border-radius: 6px;
	border: 1px solid var(--npa-green);
	background: var(--npa-green);
	padding: 12px 28px;
	color: var(--npa-white);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.npa-single-content .wp-block-button__link:hover,
.npa-single-content .npa-btn-apply:hover {
	opacity: 0.9;
}

/* ---------- Tagged in ---------- */

.npa-single-tags {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 24px 0;
	border-top: 1px solid var(--npa-stroke);
}

.npa-single-tags__label {
	color: var(--npa-cerulean);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	margin-right: 4px;
}

.npa-single-tags a.npa-blog-card__badge {
	border-radius: 100px;
	border: 1px solid var(--npa-stroke);
	background: var(--npa-gray-2);
	padding: 8px 16px;
	color: var(--npa-cerulean);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
}

.npa-single-tags a.npa-blog-card__badge:hover {
	border-color: var(--npa-primary);
}

/* ---------- Author box ---------- */

.npa-author-box {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px 32px;
	border-radius: var(--npa-radius);
	background: var(--npa-gray-2);
}

.npa-author-box__top {
	display: flex;
	align-items: center;
	gap: 16px;
}

.npa-author-box__avatar {
	flex: 0 0 auto;
	width: 65px;
	height: 65px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	object-fit: cover;
}

.npa-author-box__identity {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.npa-author-box__name {
	color: var(--npa-primary-text);
	font-size: 20px;
	font-weight: 700;
	margin: 0;
}

.npa-author-box__role {
	color: var(--npa-secondary-text);
	font-size: 14px;
	font-weight: 400;
	margin: 0 !important;
}

.npa-author-box__linkedin {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	line-height: 0;
}

.npa-author-box__linkedin svg {
	width: 100%;
	height: 100%;
}

.npa-author-box__bio {
	color: var(--npa-primary-text);
	font-size: 15px;
	font-weight: 400;
	line-height: 24px;
	margin: 0;
}

.npa-author-box__link {
	align-self: flex-end;
	color: var(--npa-cerulean);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	width: fit-content;
}

.npa-author-box__link:hover {
	text-decoration: underline;
}

/* ---------- Recommended Reading ---------- */

body.single-post .npa-related {
	clear: both;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	float: none !important;
	box-sizing: border-box;
}

.npa-related {
	padding: 40px 0;
}

.npa-related .npa-container {
	max-width: 1200px;
}

.npa-related__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 32px;
}

.npa-related .npa-latest__title {
	color: var(--npa-cerulean);
	font-size: 24px;
	font-weight: 600;
	margin: 0;
}

.npa-related__see-all {
	color: var(--npa-cerulean);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.npa-related__see-all:hover {
	text-decoration: underline;
}

.npa-related .npa-blog-card {
	border-radius: var(--npa-radius);
	border: 1px solid var(--npa-stroke);
	background: var(--npa-white);
	box-shadow: var(--npa-shadow);
}

.npa-related .npa-blog-card__body {
	padding: 20px;
	gap: 12px;
}

.npa-related .npa-blog-card__badge {
	color: var(--npa-green);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	background: none;
	border: none;
	padding: 0;
}

.npa-related .npa-blog-card__title {
	overflow: hidden;
	color: var(--npa-cerulean);
	text-overflow: ellipsis;
	font-size: 16px;
	font-weight: 700;
	line-height: 22px;
}

.npa-related .npa-blog-card__date {
	color: var(--npa-secondary-text);
	font-size: 13px;
	font-weight: 400;
}

.npa-related .npa-blog-card__link {
	color: var(--npa-cerulean);
	font-size: 14px;
	font-weight: 600;
}

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

@media (min-width: 1024px) {
	body.single-post .npa-related {
		margin-top: 48px;
	}
	body.single-post .npa-single-header, .npa-author-box {
		margin-bottom: 48px;
	}
	.npa-related {
		padding: 64px 0;
	}
}

@media (max-width: 640px) {
	.npa-single-title {
		font-size: 1.6rem;
		line-height: 1.3;
	}
	.ast-separate-container #content .ast-container, .npa-single-header .npa-container, .npa-related .npa-container 
	{
		padding-left: 20px;
        padding-right: 20px;
	}
	body.single-post .npa-two-col {
		gap: 0;
	}
	.npa-single-meta {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: 16px;
	}
	p.npa-author-box__bio {
		margin-top: 0 !important;
	}
	.lwptoc_header {
		margin-bottom: 0px;
	}
	.npa-single-meta__info {
		display: contents;
	}
	html body .npa-single-post .npa-container:nth-child(2), .ast-separate-container .ast-article-single {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.npa-single-meta__author {
		grid-column: 1 / -1;
	}
	body.single-post .npa-two-col #secondary {
		margin-top: 32px !important;
	}
	.npa-author-box__top {
		flex-wrap: wrap;
	}
	.npa-single-title {
		text-align: left;
	}
	.npa-related__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}

@media (max-width: 921px) {
    .ast-separate-container #primary {
		padding: 0 !important;
	}
}