/* Fanki — blog index & single post. Depends on tokens.css + base.css. */

.fanki-blog-layout {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: var(--fanki-space-6);
	align-items: start;
	padding-bottom: var(--fanki-space-9);
}

/* Category filter pill bar (page-templates/page-blog.php) — links to
   ?blog_cat={slug} on this same page (filters in place), not a category
   archive URL. The sidebar's own Categories list below points at the
   exact same links, so either one filters the same way. */

.fanki-blog-filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fanki-space-2);
	margin-bottom: var(--fanki-space-6);
}

.fanki-blog-filter__link {
	display: inline-flex;
	align-items: center;
	padding: var(--fanki-space-2) var(--fanki-space-4);
	border: 1px solid var(--fanki-color-border);
	border-radius: var(--fanki-button-radius);
	font-size: var(--fanki-font-size-sm);
	font-weight: var(--fanki-font-weight-medium);
	color: var(--fanki-color-text-muted);
	transition: background-color var(--fanki-transition-fast), border-color var(--fanki-transition-fast), color var(--fanki-transition-fast);
}

.fanki-blog-filter__link:hover {
	border-color: var(--fanki-color-primary);
	color: var(--fanki-color-primary);
}

.fanki-blog-filter__link.is-active {
	background: var(--fanki-color-primary);
	border-color: var(--fanki-color-primary);
	color: var(--fanki-color-primary-contrast);
}

/* .fanki-post-grid / .fanki-post-card__* live in base.css — shared with
   single.php's related-posts block (fanki_related_posts()) and the
   homepage Sections repeater's "Blog Posts" section (fanki_render_section_
   blog_posts(), both in inc/template-tags.php), neither of which loads
   this stylesheet. */

.fanki-blog-sidebar > * + * {
	margin-top: var(--fanki-space-6);
}

.fanki-sidebar-widget {
	border: 1px solid var(--fanki-color-border);
	border-radius: var(--fanki-radius-md);
	padding: var(--fanki-space-5);
}

.fanki-sidebar-widget__title {
	font-size: var(--fanki-font-size-sm);
	text-transform: uppercase;
	letter-spacing: var(--fanki-letter-spacing-wide);
	color: var(--fanki-color-text-muted);
	margin-bottom: var(--fanki-space-4);
}

.fanki-sidebar-widget__list li {
	display: flex;
	justify-content: space-between;
	font-size: var(--fanki-font-size-sm);
	padding-block: var(--fanki-space-2);
	border-bottom: 1px solid var(--fanki-color-border);
}

.fanki-sidebar-widget__list li:last-child {
	border-bottom: 0;
}

.fanki-sidebar-widget__list li a {
	transition: color var(--fanki-transition-fast);
}

.fanki-sidebar-widget__list li a:hover,
.fanki-sidebar-widget__list li a.is-active {
	color: var(--fanki-color-primary);
	font-weight: var(--fanki-font-weight-medium);
}

.fanki-sidebar-widget__count {
	color: var(--fanki-color-text-subtle);
	font-size: var(--fanki-font-size-xs);
}

.fanki-recent-post {
	display: flex;
	gap: var(--fanki-space-3);
	padding-block: var(--fanki-space-3);
	border-bottom: 1px solid var(--fanki-color-border);
}

.fanki-recent-post:last-child {
	border-bottom: 0;
}

.fanki-recent-post__image {
	width: 64px;
	height: 64px;
	border-radius: var(--fanki-radius-sm);
	overflow: hidden;
	flex-shrink: 0;
	background: var(--fanki-color-surface);
}

.fanki-recent-post__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fanki-recent-post__title {
	font-size: var(--fanki-font-size-sm);
	font-weight: var(--fanki-font-weight-medium);
}

.fanki-recent-post__date {
	font-size: var(--fanki-font-size-xs);
	color: var(--fanki-color-text-subtle);
}

/* Single post */

.fanki-post-header {
	max-width: 760px;
	margin-inline: auto;
	text-align: center;
	padding-block: var(--fanki-space-6);
}

/* 2xl, matching .fanki-page-title (base.css) — the same "main page
   heading" role every other page uses, previously at 3xl for no
   documented reason (2026-08-29 font-size review). */
.fanki-post-header__title {
	font-size: var(--fanki-font-size-2xl);
	margin-block: var(--fanki-space-3);
}

/* .fanki-post-cover / .fanki-post-content live in base.css
   (shared with page.php, which doesn't load blog.css) */

/* Share row — fanki_post_share_buttons() (inc/template-tags.php), right
   after the post content and before the author box. Facebook/X/WhatsApp
   icons use their own brand color at rest, filling solid with a white
   icon on hover — same convention already established for the product
   page's WhatsApp/Messenger buttons (2026-08-29 button-color follow-up).
   Copy Link isn't a brand icon, so it follows the theme's generic
   bordered-icon-button hover convention instead (border/icon shift to
   Primary), matching .fanki-quick-view-btn/.fanki-wishlist-btn. */

.fanki-post-share {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--fanki-space-3);
	max-width: 760px;
	margin: var(--fanki-space-8) auto 0;
	padding-top: var(--fanki-space-6);
	border-top: 1px solid var(--fanki-color-border);
}

.fanki-post-share__label {
	font-size: var(--fanki-font-size-sm);
	font-weight: var(--fanki-font-weight-medium);
	color: var(--fanki-color-text-muted);
}

.fanki-post-share__list {
	display: flex;
	align-items: center;
	gap: var(--fanki-space-2);
}

.fanki-post-share__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--fanki-radius-full);
	border: 1px solid var(--fanki-color-border);
	background: var(--fanki-color-bg);
	cursor: pointer;
	transition: background-color var(--fanki-transition-fast), border-color var(--fanki-transition-fast), color var(--fanki-transition-fast);
}

.fanki-post-share__btn--facebook {
	border-color: var(--fanki-color-facebook);
	color: var(--fanki-color-facebook);
}

.fanki-post-share__btn--facebook:hover {
	background: var(--fanki-color-facebook);
	color: #fff;
}

.fanki-post-share__btn--x {
	border-color: var(--fanki-color-x);
	color: var(--fanki-color-x);
}

/* color: var(--fanki-color-bg), not a literal white — --fanki-color-x
   flips black (light mode) / white (dark mode, tokens.css) specifically so
   it stays visible either way; using --fanki-color-bg for the hover icon
   self-corrects to the opposite contrast in both modes automatically
   (dark icon on the token's white dark-mode value, light icon on its
   black light-mode value) with no separate dark-mode override needed here. */
.fanki-post-share__btn--x:hover {
	background: var(--fanki-color-x);
	color: var(--fanki-color-bg);
}

.fanki-post-share__btn--whatsapp {
	border-color: var(--fanki-color-whatsapp);
	color: var(--fanki-color-whatsapp);
}

.fanki-post-share__btn--whatsapp:hover {
	background: var(--fanki-color-whatsapp);
	color: #fff;
}

.fanki-post-share__btn--copy:hover {
	border-color: var(--fanki-color-primary);
	color: var(--fanki-color-primary);
	background: var(--fanki-color-surface);
}

/* sm, not xs — a real confirmation message the user needs to actually
   read after clicking, same "actionable, not decorative" rule that
   already promoted .coupon-error-notice/.checkout-inline-error-message/
   .footer__newsletter-message to sm (2026-08-26 audit). */
.fanki-post-share__feedback {
	font-size: var(--fanki-font-size-sm);
	color: var(--fanki-color-success);
}

.fanki-author-box {
	display: flex;
	gap: var(--fanki-space-4);
	max-width: 760px;
	margin: var(--fanki-space-8) auto 0;
	padding: var(--fanki-space-5);
	border: 1px solid var(--fanki-color-border);
	border-radius: var(--fanki-radius-md);
}

.fanki-author-box__avatar {
	width: 64px;
	height: 64px;
	border-radius: var(--fanki-radius-full);
	flex-shrink: 0;
}

.fanki-author-box__name {
	font-weight: var(--fanki-font-weight-semibold);
	margin-bottom: var(--fanki-space-1);
}

.fanki-author-box__bio {
	color: var(--fanki-color-text-muted);
	font-size: var(--fanki-font-size-sm);
	line-height: var(--fanki-line-height-relaxed);
}

.fanki-related-posts {
	padding-block: var(--fanki-space-9);
	border-top: 1px solid var(--fanki-color-border);
}

/* xl, deliberately one step below .fanki-page-title/.fanki-post-header__
   title (2xl) — unlike .fanki-section__title (also 2xl, used on the
   homepage/shop, where each section IS effectively that page's own main
   heading), "Related Posts" is a subordinate block sitting below the
   post's own already-present H1, not a second page title competing with
   it. Same reasoning applies to .fanki-comments__title below. Reviewed
   2026-08-29 as a possible inconsistency against .fanki-section__title;
   kept as-is and documented rather than bumped to 2xl, since matching
   would remove the intentional page-title > subsection-heading hierarchy. */
.fanki-related-posts__title {
	font-size: var(--fanki-font-size-xl);
	margin-bottom: var(--fanki-space-5);
}

@media (max-width: 1024px) {
	.fanki-blog-layout {
		grid-template-columns: 1fr;
	}
}

/* ---------- Comments ----------
   comments.php wraps WordPress's own default comment_form()/
   wp_list_comments() output (HTML5 walker, enabled via add_theme_support(
   'html5', array('comment-form','comment-list')) in inc/setup.php) — the
   .comment-body/.comment-meta/.comment-author/.comment-content/.children/
   etc. selectors below are WordPress core's real, long-stable class names,
   not custom markup. */

.fanki-comments {
	max-width: 760px;
	margin-inline: auto;
	padding-block: var(--fanki-space-9);
}

/* xl, same "subsection below the post's own H1" reasoning as
   .fanki-related-posts__title above. */
.fanki-comments__title {
	font-size: var(--fanki-font-size-xl);
	margin-bottom: var(--fanki-space-5);
}

.fanki-comment-list,
.fanki-comment-list .children {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fanki-comment-list .children {
	margin-left: var(--fanki-space-6);
}

.fanki-comment-list > li {
	border-bottom: 1px solid var(--fanki-color-border);
	padding-block: var(--fanki-space-5);
}

.fanki-comment-list > li:first-child {
	padding-top: 0;
}

.comment-body .comment-meta {
	display: flex;
	align-items: center;
	gap: var(--fanki-space-3);
	margin-bottom: var(--fanki-space-2);
}

.comment-author.vcard {
	display: flex;
	align-items: center;
	gap: var(--fanki-space-3);
}

.comment-author .avatar {
	width: 40px;
	height: 40px;
	border-radius: var(--fanki-radius-full);
}

.comment-author .fn {
	font-style: normal;
	font-weight: var(--fanki-font-weight-semibold);
	font-size: var(--fanki-font-size-sm);
}

.comment-metadata {
	font-size: var(--fanki-font-size-xs);
	color: var(--fanki-color-text-muted);
}

.comment-metadata a {
	color: inherit;
}

.comment-content {
	color: var(--fanki-color-text-muted);
	font-size: var(--fanki-font-size-sm);
	line-height: var(--fanki-line-height-relaxed);
}

.comment-content p:last-child {
	margin-bottom: 0;
}

/* sm, not xs — a real actionable status notice ("your comment is awaiting
   moderation"), the same category already promoted to sm site-wide for
   every other inline alert (2026-08-26 audit) — this file wasn't part of
   that pass, so it was missed at the time. */
.comment-awaiting-moderation {
	font-size: var(--fanki-font-size-sm);
	color: var(--fanki-color-warning);
	margin-block: var(--fanki-space-2);
}

.comment-reply-link {
	display: inline-block;
	margin-top: var(--fanki-space-2);
	font-size: var(--fanki-font-size-xs);
	font-weight: var(--fanki-font-weight-semibold);
	color: var(--fanki-color-primary);
}

.fanki-comments__closed {
	color: var(--fanki-color-text-muted);
	font-size: var(--fanki-font-size-sm);
}

#respond {
	margin-top: var(--fanki-space-6);
}

.comment-reply-title {
	font-size: var(--fanki-font-size-lg);
	margin-bottom: var(--fanki-space-4);
}

.comment-reply-title small a {
	font-size: var(--fanki-font-size-xs);
	color: var(--fanki-color-text-muted);
	margin-left: var(--fanki-space-2);
}

.fanki-comment-form .comment-notes,
.fanki-comment-form .logged-in-as {
	font-size: var(--fanki-font-size-sm);
	color: var(--fanki-color-text-muted);
	margin-bottom: var(--fanki-space-4);
}

.fanki-comment-form .comment-form-cookies-consent {
	display: flex;
	align-items: center;
	gap: var(--fanki-space-2);
	font-size: var(--fanki-font-size-sm);
	margin-bottom: var(--fanki-space-4);
}