/* =============================================================================
   FILE: blog.css
   WHAT: Styling specific to a SINGLE post or page -- the single-post
         layout, the post header/meta row, the related-posts grid, the
         author box, post navigation, and comments. (The blog ARCHIVE/
         index "grid of cards" look doesn't need anything from this file --
         it's built entirely from layout.css's .grid-cards and
         components.css's .card/.archive-header, both loaded on every
         page already.)
   WHY conditionally loaded: this file is only enqueued on an actual
         single post or page (see the is_singular( array( 'post', 'page' ) )
         check in inc/enqueue.php, which also excludes WooCommerce pages,
         since a single PRODUCT is "singular" too but has nothing to do
         with this file). A plain archive/search/404 page, or a shop page,
         never downloads this CSS, keeping those pages a little lighter.
   LOAD ORDER: sixth, after components.css, ONLY on single posts/pages.
   ============================================================================= */

/* -----------------------------------------------------------------------
   SINGLE POST LAYOUT
   No sidebar (see inc/widgets.php for that decision) -- the article gets
   the full content width, capped for readability by .container plus the
   70ch max-width already set on <p> in base.css.
   ----------------------------------------------------------------------- */
.single-post {
	padding-block: var(--space-8);
}

.single-post__header {
	margin-bottom: var(--space-6);
}

.single-post__title {
	margin-bottom: var(--space-4);
}

.single-post__thumb {
	width: 100%;
	aspect-ratio: 16 / 9; /* reserves image space up-front to avoid layout shift,
	                          same technique as .card__thumb in components.css */
	object-fit: cover;
	border-radius: var(--radius-md);
	margin-bottom: var(--space-6);
}

/* The actual post body content, as saved by the editor. We give it extra
   breathing room between block-level elements (images, headings dropped
   into the middle of an article, embedded videos) beyond the base <p>
   margin, since long technical posts often mix many content types. */
.single-post__content > * + * {
	margin-top: var(--space-4);
}

.single-post__content img {
	border-radius: var(--radius-sm);
}

.single-post__footer {
	margin-top: var(--space-8);
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-gray-200);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

@media (min-width: 768px) {
	.single-post__footer {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

/* -----------------------------------------------------------------------
   AUTHOR BOX
   A short "about the author" card shown at the end of a post -- builds
   trust/credibility, which matters a lot for security/technical content
   where readers want to know who's giving the advice.
   ----------------------------------------------------------------------- */
.author-box {
	display: flex;
	gap: var(--space-4);
	align-items: flex-start;
	padding: var(--space-4);
	background-color: var(--color-gray-50);
	border-radius: var(--radius-md);
	margin-top: var(--space-8);
}

.author-box__avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	flex-shrink: 0;
}

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

.author-box__bio {
	color: var(--color-gray-600);
	font-size: var(--text-caption); /* short bio blurb = meta text, not article body copy */
	margin-bottom: 0;
}

/* -----------------------------------------------------------------------
   SHARE ROW (label + share icons + copy-link button -- see
   template-parts/post/share.php)
   ----------------------------------------------------------------------- */
.post-share {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.post-share__label {
	font-size: var(--text-caption); /* "Share:" label = meta text */
	color: var(--color-gray-600);
	font-weight: 600;
}

.copy-link-button {
	background: none;
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-sm);
	padding: var(--space-2) var(--space-3);
	font-size: var(--text-caption);
	cursor: pointer;
}
.copy-link-button:hover {
	background-color: var(--color-blue-100);
}

/* -----------------------------------------------------------------------
   RELATED POSTS
   ----------------------------------------------------------------------- */
.related-posts {
	margin-top: var(--space-12);
}

.related-posts__title {
	margin-bottom: var(--space-6);
}

/* -----------------------------------------------------------------------
   BLOG INDEX / ARCHIVE POST GRID
   The "grid of post cards" look shared by archive.php, home.php, and
   search.php (see template-parts/post/card.php). NOTE: the page's title/
   breadcrumb BANNER above this grid (.archive-header, used by
   template-parts/content/page-header.php) is styled in components.css,
   not here -- that banner is shared with WooCommerce's shop/product
   archive pages too, so it needs to live somewhere that loads on BOTH
   blog and shop pages, unlike this file (see inc/enqueue.php).
   ----------------------------------------------------------------------- */

/* -----------------------------------------------------------------------
   PAGE-LINKS (multi-page posts, wp_link_pages()) AND POST NAVIGATION
   (previous/next post links, the_post_navigation())
   ----------------------------------------------------------------------- */
.page-links {
	margin-top: var(--space-6);
	font-size: var(--text-caption);
}

.nav-links {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	margin-block: var(--space-12);
}

@media (min-width: 768px) {
	.nav-links {
		flex-direction: row;
		justify-content: space-between;
	}
}

.nav-previous,
.nav-next {
	padding: var(--space-4);
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-md);
	flex: 1;
}

.post-nav__label {
	display: block;
	font-size: var(--text-caption); /* "Previous"/"Next" label = meta text */
	color: var(--color-gray-600);
	margin-bottom: var(--space-1);
}

/* -----------------------------------------------------------------------
   COMMENTS
   ----------------------------------------------------------------------- */
.comment-list {
	list-style: none;
	padding: 0;
	margin-top: var(--space-6);
}

.comment {
	padding: var(--space-4) 0;
	border-bottom: 1px solid var(--color-gray-200);
}

.comment__meta {
	font-size: var(--text-caption); /* commenter name + date = meta text */
	color: var(--color-gray-600);
	margin-bottom: var(--space-2);
}

.comment-respond {
	margin-top: var(--space-8);
}

/* Nested/threaded replies are indented so the conversation structure is
   visually clear -- but only a LITTLE on mobile (deep indentation on a
   narrow phone screen quickly eats all the available width). */
.children {
	list-style: none;
	padding-left: var(--space-4);
}

@media (min-width: 768px) {
	.children {
		padding-left: var(--space-8);
	}
}