/**
 * single-post.css
 * Extends blog-layout.css — enqueue AFTER it in functions.php.
 * Shares all CSS variables defined in blog-layout.css.
 *
 * ADD TO functions.php enqueue:
 *
 * wp_enqueue_style(
 *     'single-post',
 *     get_stylesheet_directory_uri() . '/single-post.css',
 *     [ 'blog-layout' ],   // depends on blog-layout.css
 *     '1.0.0'
 * );
 */

/* =============================================
   SINGLE PAGE LAYOUT WRAPPER
   Reuses .blog-wrap grid from blog-layout.css
   but needs its own class for single-specific
   max-width on the content column.
   ============================================= */
.single-wrap {
	display               : grid;
	grid-template-columns : 1fr var(--blog-sidebar-w);
	gap                   : var(--blog-gap);
	max-width             : 1200px;
	margin                : 0 auto;
	padding               : clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 2rem);
	align-items           : start;
	font-family           : var(--blog-font-body);
}

@media (max-width: 900px) {
	.single-wrap {
		grid-template-columns: 1fr;
	}
	.single-wrap .blog-sidebar {
		order: 2;
	}
	.single-wrap .single-main {
		order: 1;
	}
}

/* =============================================
   ARTICLE HEADER
   ============================================= */
.article-header {
    margin-bottom: 2rem;
    max-width: none;
}

.article-cat {
	display        : inline-block;
	font-size      : .7rem;
	font-weight    : 600;
	letter-spacing : .1em;
	text-transform : uppercase;
	color          : var(--blog-accent);
	background     : var(--blog-accent-light);
	padding        : .2em .7em;
	border-radius  : 999px;
	text-decoration: none;
	margin-bottom  : 1rem;
}

.article-cat:hover {
	background: var(--blog-accent);
	color     : #fff;
}

.article-title {
	font-family : var(--blog-font-display);
	font-size   : clamp(1.8rem, 5vw, 3rem);
	line-height : 1.2;
	color       : var(--blog-ink) !important;
	margin      : 0 0 1.25rem;
	letter-spacing: -.01em;
}

/* Meta row */
.article-meta {
	display    : flex;
	align-items: center;
	flex-wrap  : wrap;
	gap        : .75rem 1.25rem;
	padding    : 1rem 0;
	border-top : 1px solid var(--blog-border);
	border-bottom: 1px solid var(--blog-border);
	max-width: none;
}

.article-meta__author {
	display    : flex;
	align-items: center;
	gap        : .65rem;
}

.article-meta__author img {
	border-radius: 50%;
	width        : 40px;
	height       : 40px;
	object-fit   : cover;
}

.article-meta__author-info {
	display       : flex;
	flex-direction: column;
	gap           : .1rem;
}

.article-meta__author-name {
	font-size  : .88rem;
	font-weight: 600;
	color      : var(--blog-ink);
}

.article-meta__date {
	font-size: .78rem;
	color    : var(--blog-ink-muted);
}

.article-meta__divider {
	display   : block;
	width     : 1px;
	height    : 28px;
	background: var(--blog-border);
}

.article-meta__read-time {
	font-size: .82rem;
	color    : var(--blog-ink-muted);
}

/* =============================================
   HERO IMAGE
   ============================================= */
.article-hero {
	margin        : 2rem 0;
	border-radius : var(--blog-radius);
	overflow      : hidden;
	box-shadow    : var(--blog-shadow);
}

.article-hero img {
	width     : 100%;
	height    : auto;
	display   : block;
	max-height: 520px;
	object-fit: cover;
}

.article-hero__caption {
	font-size  : .78rem;
	color      : var(--blog-ink-muted);
	text-align : center;
	padding    : .6rem 1rem;
	background : var(--blog-bg);
	border-top : 1px solid var(--blog-border);
	font-style : italic;
}

/* =============================================
   ARTICLE CONTENT TYPOGRAPHY
   ============================================= */
.article-content {
	font-size  : 1.05rem;
	line-height: 1.8;
	color      : var(--blog-ink);
	max-width  : none;
	
}

.article-content h2,
.article-content h3,
.article-content h4 {
	font-family   : var(--blog-font-display);
	color         : var(--blog-ink);
	margin        : 2rem 0 .75rem;
	line-height   : 1.25;
}

.article-content h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); }
.article-content h3 { font-size: clamp(1.1rem, 2.5vw, 1.35rem); }
.article-content h4 { font-size: 1.05rem; }

.article-content p {
	margin: 0 0 1.4rem;
}

.article-content a {
	color          : var(--blog-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.article-content a:hover {
	color: var(--blog-ink);
}

.article-content ul,
.article-content ol {
	padding-left : 1.5rem;
	margin-bottom: 1.4rem;
}

.article-content li {
	margin-bottom: .4rem;
}

.article-content blockquote {
	margin        : 2rem 0;
	padding       : 1.2rem 1.5rem;
	border-left   : 4px solid var(--blog-accent);
	background    : var(--blog-accent-light);
	border-radius : 0 var(--blog-radius) var(--blog-radius) 0;
	font-family   : var(--blog-font-display);
	font-style    : italic;
	font-size     : 1.1rem;
	color         : var(--blog-ink);
}

.article-content blockquote p {
	margin: 0;
}

.article-content img {
	max-width    : 100%;
	height       : auto;
	border-radius: var(--blog-radius);
	margin       : 1.5rem 0;
}

.article-content pre,
.article-content code {
	font-family: 'Courier New', monospace;
	font-size  : .88em;
	background : var(--blog-bg);
	border     : 1px solid var(--blog-border);
	border-radius: 4px;
}

.article-content code {
	padding: .15em .4em;
}

.article-content pre {
	padding   : 1rem 1.2rem;
	overflow-x: auto;
	margin    : 1.5rem 0;
}

.article-content pre code {
	background   : transparent;
	border       : none;
	padding      : 0;
}

.article-content hr {
	border     : none;
	border-top : 2px solid var(--blog-border);
	margin     : 2.5rem 0;
}

/* =============================================
   TAGS
   ============================================= */
.article-tags {
	display    : flex;
	flex-wrap  : wrap;
	align-items: center;
	gap        : .5rem;
	margin-top : 2.5rem;
	padding-top: 1.5rem;
	border-top : 1px solid var(--blog-border);
}

.article-tags__label {
	font-size  : .78rem;
	font-weight: 600;
	color      : var(--blog-ink-muted);
	text-transform: uppercase;
	letter-spacing: .08em;
}

.article-tags__tag {
	font-size      : .78rem;
	color          : var(--blog-ink-muted);
	border         : 1px solid var(--blog-border);
	border-radius  : 999px;
	padding        : .2em .75em;
	text-decoration: none;
	transition     : border-color .2s, color .2s, background .2s;
}

.article-tags__tag:hover {
	border-color: var(--blog-accent);
	color       : var(--blog-accent);
	background  : var(--blog-accent-light);
}

/* =============================================
   AUTHOR BIO
   ============================================= */
.author-bio {
	display      : flex;
	align-items  : flex-start;
	gap          : 1.2rem;
	margin-top   : 2.5rem;
	padding      : 1.5rem;
	background   : var(--blog-surface);
	border       : 1px solid var(--blog-border);
	border-radius: var(--blog-radius);
	box-shadow   : var(--blog-shadow);
}

.author-bio img {
	border-radius: 50%;
	width        : 72px;
	height       : 72px;
	object-fit   : cover;
	flex-shrink  : 0;
}

.author-bio__info {
	display       : flex;
	flex-direction: column;
	gap           : .25rem;
}

.author-bio__label {
	font-size     : .7rem;
	font-weight   : 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color         : var(--blog-ink-muted);
}

.author-bio__name {
	font-family: var(--blog-font-display);
	font-size  : 1.05rem;
	color      : var(--blog-ink);
}

.author-bio__desc {
	font-size  : .88rem;
	color      : var(--blog-ink-muted);
	line-height: 1.6;
	margin     : .25rem 0 0;
}

/* =============================================
   POST NAVIGATION
   ============================================= */
.post-nav {
	display              : grid;
	grid-template-columns: 1fr 1fr;
	gap                  : 1rem;
	margin-top           : 2.5rem;
}

.post-nav__item {
	display        : flex;
	flex-direction : column;
	gap            : .35rem;
	padding        : 1rem 1.2rem;
	background     : var(--blog-surface);
	border         : 1px solid var(--blog-border);
	border-radius  : var(--blog-radius);
	text-decoration: none;
	transition     : border-color .2s, box-shadow .2s, transform .2s;
}

.post-nav__item:hover {
	border-color: var(--blog-accent);
	box-shadow  : var(--blog-shadow-hover);
	transform   : translateY(-2px);
}

.post-nav__item--next {
	text-align: right;
}

.post-nav__dir {
	font-size     : .72rem;
	font-weight   : 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color         : var(--blog-accent);
}

.post-nav__title {
	font-family: var(--blog-font-display);
	font-size  : .92rem;
	color      : var(--blog-ink);
	line-height: 1.3;
}

@media (max-width: 600px) {
	.post-nav {
		grid-template-columns: 1fr;
	}
}

/* =============================================
   COMMENTS
   ============================================= */
.article-comments {
	margin-top : 3rem;
	padding-top: 2rem;
	border-top : 2px solid var(--blog-ink);
}

/* Style WP default comment form to match */
.article-comments .comment-reply-title,
.article-comments .comments-title {
	font-family: var(--blog-font-display);
	font-size  : 1.4rem;
	color      : var(--blog-ink);
	margin     : 0 0 1.25rem;
}

.article-comments .comment-form input[type="text"],
.article-comments .comment-form input[type="email"],
.article-comments .comment-form input[type="url"],
.article-comments .comment-form textarea {
	width        : 100%;
	border       : 1.5px solid var(--blog-border);
	border-radius: var(--blog-radius);
	padding      : .6rem .9rem;
	font-family  : var(--blog-font-body);
	font-size    : .9rem;
	color        : var(--blog-ink);
	background   : var(--blog-surface);
	transition   : border-color .2s;
	box-sizing   : border-box;
}

.article-comments .comment-form input:focus,
.article-comments .comment-form textarea:focus {
	outline     : none;
	border-color: var(--blog-accent);
}

.article-comments .comment-form .submit,
.article-comments .form-submit input {
	background    : var(--blog-accent);
	color         : #fff;
	border        : none;
	border-radius : var(--blog-radius);
	padding       : .65rem 1.5rem;
	font-family   : var(--blog-font-body);
	font-size     : .9rem;
	font-weight   : 600;
	cursor        : pointer;
	transition    : background .2s;
}

.article-comments .comment-form .submit:hover,
.article-comments .form-submit input:hover {
	background: var(--blog-ink);
}

/* =============================================
   RELATED POSTS SIDEBAR WIDGET
   ============================================= */
.related-list {
	list-style    : none;
	margin        : 0;
	padding       : 0;
	display       : flex;
	flex-direction: column;
	gap           : 1rem;
}

.related-list__item {
	display    : flex;
	gap        : .75rem;
	align-items: flex-start;
}

.related-list__thumb {
	display      : block;
	width        : 60px;
	height       : 60px;
	border-radius: 4px;
	overflow     : hidden;
	flex-shrink  : 0;
}

.related-list__thumb img {
	width     : 100%;
	height    : 100%;
	object-fit: cover;
	display   : block;
	transition: transform .3s;
}

.related-list__thumb:hover img {
	transform: scale(1.07);
}

.related-list__title {
	display        : block;
	font-size      : .85rem;
	font-weight    : 500;
	color          : var(--blog-ink);
	text-decoration: none;
	line-height    : 1.35;
	margin-bottom  : .25rem;
}

.related-list__title:hover {
	color: var(--blog-accent);
}

.related-list__date {
	font-size: .73rem;
	color    : var(--blog-ink-muted);
}

.no-related {
	font-size: .85rem;
	color    : var(--blog-ink-muted);
}

.social-share {
    display    : flex;
    align-items: center;
    flex-wrap  : wrap;
    gap        : .6rem;
    margin-top : 2rem;
    padding-top: 1.5rem;
    border-top : 1px solid var(--blog-border);
}

.social-share__label {
    font-size     : .75rem;
    font-weight   : 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color         : var(--blog-ink-muted);
    margin-right  : .25rem;
}

.social-share__btn {
    display        : inline-flex;
    align-items    : center;
    gap            : .4rem;
    font-size      : .82rem;
    font-weight    : 500;
    text-decoration: none;
    padding        : .45rem .9rem;
    border-radius  : var(--blog-radius);
    border         : 1px solid var(--blog-border);
    color          : var(--blog-ink);
    background     : var(--blog-surface);
    transition     : background .2s, color .2s, border-color .2s;
}

.social-share__btn:hover { 
    border-color: var(--blog-accent);
    color       : var(--blog-accent);
}

/* =============================================
   ELEMENTOR OVERRIDE — keep consistent with blog listing
   ============================================= */
.single-wrap .post-card__title a,
.single-wrap .popular-list__title,
.single-wrap .related-list__title,
.elementor-kit-3210 .single-wrap a.popular-list__title,
.elementor-kit-3210 .single-wrap a.related-list__title {
	color: var(--blog-ink) !important;
}

.single-wrap .article-title,
.elementor-kit-3210 .article-title {
	color: var(--blog-ink) !important;
}