/*
 * category.css — TechAgro Category Page Styles
 * -----------------------------------------------
 * Reuses most of homepage.css (grid, cards, sidebar, load more).
 * This file only adds what's different: the category banner heading.
 */

/* ─── CATEGORY PAGE WRAPPER ───────────────────────────────────────────────── */

.techagro-category {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}


/* ─── CATEGORY HEADING (no background) ───────────────────────────────────── */

.ta-cat-heading {
    text-align: center;
    padding: var(--spacing-xl) 0 var(--spacing-lg);
}

.ta-cat-heading__title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text-dark);
    margin: 0 0 var(--spacing-sm) 0;
    line-height: 1.2;
}

.ta-cat-heading__desc {
    font-size: 0.92rem;
    color: var(--color-text-mid);
    margin: 0 auto;
    max-width: 480px;
    line-height: 1.7;
}

.ta-cat-heading__desc strong {
    color: var(--color-green-dark);
    font-weight: 600;
}


/* ─── ACTIVE CATEGORY IN SIDEBAR ──────────────────────────────────────────── */
/*
 * Highlights the currently viewed category in the sidebar list
 */

.ta-sidebar__categories ul li.current-cat a {
    color: var(--color-green-mid);
    font-weight: 700;
}

.ta-sidebar__categories ul li.current-cat a:hover {
    color: var(--color-green-dark);
}


/* ─── NO POSTS MESSAGE ────────────────────────────────────────────────────── */

.ta-no-posts {
    color: var(--color-text-mid);
    padding: var(--spacing-lg) 0;
    font-size: 0.95rem;
}


/* ─── CONTENT AREA + SIDEBAR ─────────────────────────────────────────────── */
/*
 * category.php reuses .ta-content-area, .ta-posts-section, .ta-sidebar,
 * .ta-posts-grid, .ta-post-card, .ta-load-more-wrap from homepage.css.
 * Those are already loaded globally — nothing to repeat here.
 */

/* ─── DARK MODE OVERRIDES ─────────────────────────────────────────────────── */

body.dark-mode .ta-cat-heading__title {
    color: var(--color-text-dark);
}

body.dark-mode .ta-cat-heading__desc {
    color: var(--color-text-mid);
}

body.dark-mode .ta-cat-heading__desc strong {
    color: var(--color-green-light);
}

body.dark-mode .ta-sidebar__categories ul li.current-cat a {
    color: var(--color-green-light);
}