/* src/styles/pages/blog.css */
.blog-page-main { padding: 4rem 0; background-color: var(--secondary-off-white); }
.page-title { text-align: center; font-size: 3rem; margin-bottom: 3rem; }
.blog-layout { display: grid; grid-template-columns: 2.5fr 1fr; gap: 3rem; }
.blog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
    align-content: start;
}
.sidebar-widget { margin-bottom: 2.5rem; }

/* The h4 title for categories on desktop */
.category-widget h4 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--accent-matte-gold);
    padding-bottom: 0.5rem;
}

.search-box {
    width: 100%; padding: 0.8rem; border: 1px solid #ccc;
    border-radius: 5px; font-size: 1rem; transition: all 0.2s ease;
}
.search-box:focus {
    outline: none; border-color: var(--accent-matte-gold);
    box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.2);
}

.category-list { list-style: none; padding: 0; margin: 0; }
.category-list li { padding: 0.6rem 0.2rem; cursor: pointer; border-bottom: 1px solid #eee; transition: all 0.2s ease; }
.category-list li:hover { color: var(--accent-matte-gold); }
.category-list li.active { color: var(--accent-matte-gold); font-weight: 700; }

/* Hide the toggle button by default (on desktop) */
.category-toggle { display: none; }

/* --- Device-Specific Layouts --- */
@media (max-width: 992px) {
    .blog-layout { grid-template-columns: 1fr; }
    .blog-sidebar { order: -1; margin-bottom: 2rem; }

    /* Hide the static h4 title on mobile */
    /* .category-widget h4 { display: none; } */

    /* Style and show the toggle button on mobile */
    .category-toggle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        background: none;
        border: none;
        border-bottom: 2px solid var(--accent-matte-gold);
        padding: 0 0 0.5rem 0;
        cursor: pointer;
        font-family: 'Lora', serif;
        font-size: 1.5rem;
        color: var(--text-headings-blue);
    }
    .toggle-icon { font-size: 1rem; transition: transform 0.3s ease-in-out; }
    .toggle-icon.expanded { transform: rotate(-180deg); }
    
    /* Control the visibility of the list on mobile */
    .category-list {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
        padding-top: 0;
    }
    .category-list.expanded { max-height: 500px; padding-top: 1rem; }
}
@media (max-width: 768px) {
    .blog-grid { grid-template-columns: 1fr; }
    .page-title { font-size: 2.2rem; margin-bottom: 2rem; }
    .blog-page-main { padding: 3rem 0; }
}

@media (max-width: 390px) {
    .page-title { font-size: 1.8rem; }
    .blog-page-main { padding: 2rem 0; }
}