/**
 * Herb Whisperer — Blog Styles
 *
 * Archive and single post styling to match HW design system.
 * Enqueued on blog pages via functions.php.
 *
 * @package HerbWhisperer
 */


/* ══════════════════════════════════════════════
   BLOG ARCHIVE
   ══════════════════════════════════════════════ */

/* Page header */
.blog .page-header,
.archive .page-header {
    text-align: center;
    padding: var(--hw-space-xl) var(--hw-space-lg) var(--hw-space-lg);
}

.blog .page-header .page-title,
.archive .page-header .archive-title {
    font-family: var(--hw-font-heading) !important;
    color: var(--hw-brown) !important;
    font-size: 2rem !important;
}

/* Post grid layout */
.blog .site-main,
.archive .site-main {
    max-width: var(--hw-max-width);
    margin: 0 auto;
    padding: 0 var(--hw-space-lg) var(--hw-space-xl);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--hw-space-lg);
}

@media (max-width: 960px) {
    .blog .site-main,
    .archive .site-main {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .blog .site-main,
    .archive .site-main {
        grid-template-columns: 1fr;
    }
}

/* Post cards in archive */
.blog .site-main article,
.archive .site-main article {
    background: var(--hw-white);
    border-radius: var(--hw-radius-md);
    border: 0.5px solid rgba(117, 81, 38, 0.08);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog .site-main article:hover,
.archive .site-main article:hover {
    transform: translateY(-4px);
    box-shadow: var(--hw-shadow-hover);
}

/* Post thumbnail in archive */
.blog .site-main article .post-image,
.blog .site-main article .post-thumbnail,
.archive .site-main article .post-image,
.archive .site-main article .post-thumbnail {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.blog .site-main article .post-image img,
.blog .site-main article .post-thumbnail img,
.archive .site-main article .post-image img,
.archive .site-main article .post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog .site-main article:hover .post-image img,
.blog .site-main article:hover .post-thumbnail img,
.archive .site-main article:hover .post-image img,
.archive .site-main article:hover .post-thumbnail img {
    transform: scale(1.06);
}

/* Post content area in archive */
.blog .site-main article .inside-article,
.archive .site-main article .inside-article {
    padding: var(--hw-space-lg);
}

/* Post title in archive */
.blog .site-main article .entry-title,
.archive .site-main article .entry-title {
    font-family: var(--hw-font-heading) !important;
    font-size: 1.15rem !important;
    color: var(--hw-brown) !important;
    line-height: 1.3 !important;
    margin-bottom: var(--hw-space-sm) !important;
}

.blog .site-main article .entry-title a {
    color: inherit !important;
    text-decoration: none !important;
}

.blog .site-main article .entry-title a:hover {
    color: var(--hw-green) !important;
}

/* Post meta (date, author) */
.blog .site-main article .entry-meta,
.archive .site-main article .entry-meta {
    font-family: var(--hw-font-ui) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--hw-green) !important;
    margin-bottom: var(--hw-space-sm) !important;
}

.blog .site-main article .entry-meta a {
    color: var(--hw-green) !important;
    text-decoration: none !important;
}

/* Post excerpt */
.blog .site-main article .entry-summary p,
.archive .site-main article .entry-summary p {
    font-size: 0.9rem !important;
    color: var(--hw-text-light) !important;
    line-height: 1.6 !important;
}

/* Read more link */
.blog .site-main article .read-more,
.blog .site-main article .entry-summary a.more-link,
.archive .site-main article .read-more {
    font-family: var(--hw-font-ui) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: var(--hw-green) !important;
    text-decoration: none !important;
}

/* Pagination */
.blog .site-main .pagination,
.blog .site-main nav.navigation,
.archive .site-main .pagination,
.archive .site-main nav.navigation {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--hw-space-lg) 0;
}

.nav-links {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.nav-links .page-numbers {
    padding: 0.4rem 0.8rem;
    border-radius: var(--hw-radius-sm);
    font-family: var(--hw-font-ui);
    font-size: 0.9rem;
    color: var(--hw-text);
    text-decoration: none;
}

.nav-links .page-numbers.current {
    background: var(--hw-green);
    color: #fff;
}

.nav-links .page-numbers:hover:not(.current) {
    background: var(--hw-bg-cream);
}


/* ══════════════════════════════════════════════
   SINGLE POST
   ══════════════════════════════════════════════ */

.single-post .site-main {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--hw-space-xl) var(--hw-space-lg);
}

/* Single post title */
.single-post .entry-title {
    font-family: var(--hw-font-heading) !important;
    color: var(--hw-brown) !important;
    font-size: 2.25rem !important;
    line-height: 1.2 !important;
    margin-bottom: var(--hw-space-md) !important;
}

/* Single post meta */
.single-post .entry-meta {
    font-family: var(--hw-font-ui) !important;
    font-size: 0.8rem !important;
    color: var(--hw-text-muted) !important;
    margin-bottom: var(--hw-space-xl) !important;
    padding-bottom: var(--hw-space-md) !important;
    border-bottom: 1px solid var(--hw-border-light) !important;
}

.single-post .entry-meta a {
    color: var(--hw-green) !important;
    text-decoration: none !important;
}

/* Single post featured image */
.single-post .post-image img,
.single-post .wp-post-image {
    border-radius: var(--hw-radius-md) !important;
    margin-bottom: var(--hw-space-xl) !important;
}

/* Single post content */
.single-post .entry-content {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--hw-text);
}

.single-post .entry-content h2 {
    font-family: var(--hw-font-heading);
    color: var(--hw-brown);
    font-size: 1.5rem;
    margin-top: var(--hw-space-xl);
    margin-bottom: var(--hw-space-md);
}

.single-post .entry-content h3 {
    font-family: var(--hw-font-heading);
    color: var(--hw-brown);
    font-size: 1.25rem;
    margin-top: var(--hw-space-lg);
    margin-bottom: var(--hw-space-sm);
}

.single-post .entry-content p {
    margin-bottom: 1.25rem;
}

.single-post .entry-content a {
    color: var(--hw-green);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.single-post .entry-content a:hover {
    color: var(--hw-green-dark);
}

.single-post .entry-content blockquote {
    font-family: var(--hw-font-heading);
    font-style: italic;
    font-size: 1.15rem;
    color: var(--hw-brown);
    border-left: 3px solid var(--hw-green);
    padding-left: var(--hw-space-lg);
    margin: var(--hw-space-xl) 0;
}

.single-post .entry-content img {
    border-radius: var(--hw-radius-md);
    margin: var(--hw-space-lg) 0;
}

/* Post tags */
.single-post .post-tags,
.single-post .cat-links,
.single-post .tags-links {
    font-family: var(--hw-font-ui);
    font-size: 0.8rem;
    color: var(--hw-text-muted);
    margin-top: var(--hw-space-xl);
    padding-top: var(--hw-space-md);
    border-top: 1px solid var(--hw-border-light);
}

.single-post .tags-links a,
.single-post .cat-links a {
    color: var(--hw-green);
    text-decoration: none;
}

/* Post navigation (prev/next) */
.single-post .post-navigation {
    margin-top: var(--hw-space-xl);
    padding-top: var(--hw-space-lg);
    border-top: 1px solid var(--hw-border-light);
}

.single-post .post-navigation a {
    font-family: var(--hw-font-ui);
    font-size: 0.9rem;
    color: var(--hw-green);
    text-decoration: none;
    font-weight: 600;
}

/* Comments */
.single-post .comments-area {
    margin-top: var(--hw-space-xl);
    padding-top: var(--hw-space-lg);
    border-top: 1px solid var(--hw-border-light);
}

.single-post .comments-title {
    font-family: var(--hw-font-heading);
    color: var(--hw-brown);
    font-size: 1.5rem;
    margin-bottom: var(--hw-space-lg);
}

.single-post .comment-reply-title {
    font-family: var(--hw-font-heading);
    color: var(--hw-brown);
    font-size: 1.25rem;
}

.single-post .comment-form textarea,
.single-post .comment-form input[type="text"],
.single-post .comment-form input[type="email"],
.single-post .comment-form input[type="url"] {
    border-radius: var(--hw-radius-sm);
    border: 0.5px solid var(--hw-border-light);
    font-family: var(--hw-font-ui);
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    width: 100%;
}

.single-post .comment-form textarea:focus,
.single-post .comment-form input:focus {
    border-color: var(--hw-green);
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 145, 58, 0.15);
}

.single-post .comment-form .submit {
    background: var(--hw-green);
    color: var(--hw-white);
    border-radius: var(--hw-radius-pill);
    border: none;
    font-family: var(--hw-font-ui);
    font-weight: 600;
    padding: 0.65rem 2rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.single-post .comment-form .submit:hover {
    background: var(--hw-green-dark);
}