/* Category Navigation Styles */
.nav-link {
    position: relative;
    text-align: center;
    width: 100%;
    display: inline-block;
}

/* Maintenance Tips - Split into two lines */
.nav-link:has(span:contains("Maintenance Tips")) {
    font-size: 0; /* Hide original text */
}

.nav-link:has(span:contains("Maintenance Tips"))::before {
    content: "Maintenance";
    display: block;
    font-size: 1rem;
    font-weight: inherit;
    margin-bottom: 0.2em;
    text-align: center;
}

.nav-link:has(span:contains("Maintenance Tips"))::after {
    content: "Tips";
    display: block;
    font-size: 1rem;
    font-weight: inherit;
    text-align: center;
}

/* Tires & Parts - Split into three lines with centered & */
.nav-link:has(span:contains("Tires & Parts")) {
    font-size: 0; /* Hide original text */
}

.nav-link:has(span:contains("Tires & Parts"))::before {
    content: "Tires";
    display: block;
    font-size: 1rem;
    font-weight: inherit;
    margin-bottom: 0.2em;
    text-align: center;
}

.nav-link:has(span:contains("Tires & Parts"))::after {
    content: "Parts";
    display: block;
    font-size: 1rem;
    font-weight: inherit;
    text-align: center;
}

.nav-link:has(span:contains("Tires & Parts"))::before {
    content: "Tires\00a0\0026\00a0Parts";
    white-space: pre-wrap;
    font-size: 1rem;
}

/* Car Reviews - Split into three lines */
.nav-link:has(span:contains("Car Reviews")) {
    font-size: 0; /* Hide original text */
}

.nav-link:has(span:contains("Car Reviews"))::before {
    content: "Car";
    display: block;
    font-size: 1rem;
    font-weight: inherit;
    margin-bottom: 0.2em;
    text-align: center;
}

.nav-link:has(span:contains("Car Reviews"))::after {
    content: "Reviews";
    display: block;
    font-size: 1rem;
    font-weight: inherit;
    text-align: center;
}

/* Tires & Parts - Three lines with centered & symbol */
.category-title.tires-parts {
    margin-bottom: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

.category-title.tires-parts .line1 {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
}

.category-title.tires-parts .symbol {
    display: block;
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    transform: translateY(-1px); /* Fine-tune vertical alignment */
}

.category-title.tires-parts .line2 {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
}

/* Car Reviews - Two lines with perfect centering */
.category-title.car-reviews {
    margin-bottom: 0.5rem;
}

.category-title.car-reviews .line1 {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
    text-align: center;
}

.category-title.car-reviews .line2 {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* --------------------------------------------------
   Spacing fixes: increase distance between blog cards
   and ensure pagination doesn't collide with the last row
   -------------------------------------------------- */

/* Increase grid gap and add safe bottom spacing */
.articles-grid,
.posts-grid {
    gap: 2.5rem !important;          /* larger row + column gap */
    margin-bottom: 2.5rem !important;/* outer spacing before pagination */
    box-sizing: border-box !important;
}

/* Ensure individual cards have breathing room if additional spacing is needed */
.article-card,
.post-card,
.blog-card {
    margin-bottom: 0 !important;     /* grid gap handles vertical spacing */
}

/* Add a safe spacer at the end of the grid so pagination always sits below cards */
.articles-grid::after,
.posts-grid::after {
    content: "";
    display: block;
    height: 6rem;                     /* ensures pagination clears and doesn't overlap */
    width: 100%;
}

/* If theme wraps pagination directly after container, ensure clear */
.container > .pagination,
.container > .posts-pagination,
.container > nav.pagination {
    clear: both !important;
    margin-top: 2.5rem !important;
}

/* Responsive tweaks */
@media (max-width: 1024px) {
    .articles-grid::after,
    .posts-grid::after {
        height: 5rem;
    }
}

@media (max-width: 480px) {
    .articles-grid,
    .posts-grid {
        gap: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .articles-grid::after,
    .posts-grid::after {
        height: 3.5rem;
    }
}

/* End spacing fixes */

/* First-page adjustment: bring pagination closer on page 1
   WordPress adds `.paged` to <body> on paginated pages (page 2+).
   This rule applies only when NOT paged (first page), making
   the extra spacer smaller and reducing top margin for pagination. */
body:not(.paged) .articles-grid::after,
body:not(.paged) .posts-grid::after {
    height: 2.25rem !important;
}

body:not(.paged) .container > .pagination,
body:not(.paged) .container > .posts-pagination,
body:not(.paged) .container > nav.pagination {
    margin-top: 1rem !important;
    padding-top: 0.5rem !important;
}

@media (max-width: 768px) {
    body:not(.paged) .articles-grid::after,
    body:not(.paged) .posts-grid::after {
        height: 1.75rem !important;
    }
    body:not(.paged) .container > .pagination {
        margin-top: 0.75rem !important;
    }
}