/* ==========================================================================
   CareLine Blog Archive Styles (V4 - Final Stable Version)
   ========================================================================== */

/* --------------------------------------------------------------------------
   HEADER & LAYOUT
   -------------------------------------------------------------------------- */
.blog-page-header {
    text-align: center;
    padding-top: 160px; /* Pushes title down away from sticky header */
    padding-bottom: 60px;
}

.blog-layout-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    gap: 40px;
    align-items: flex-start; /* Crucial for sticky sidebar to work correctly */
}

.blog-main-content {
    flex: 1;
    min-width: 0;
}

/* --------------------------------------------------------------------------
   BLOG POSTS (STYLES ARE SCOPED TO PREVENT LEAKING)
   -------------------------------------------------------------------------- */
main#primary .blog-grid-archive {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

main#primary .blog-card-archive {
    flex: 1 1 350px;
    background-color: #1a1a1a;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

main#primary .blog-card-archive:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(178, 48, 255, 0.1);
}

main#primary .card-image a { display: block; height: 220px; }
main#primary .card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
main#primary .blog-card-archive:hover .card-image img { transform: scale(1.05); }
main#primary .card-content { padding: 30px; display: flex; flex-direction: column; flex-grow: 1; }
main#primary .card-category a { background-color: #b230ff; color: #ffffff; font-size: 11px; font-weight: 600; padding: 5px 12px; border-radius: 20px; text-decoration: none; text-transform: uppercase; letter-spacing: 0.5px; margin-right: 5px; transition: background-color 0.3s ease; }
main#primary .card-category a:hover { background-color: #9a28db; }
main#primary .card-title { font-size: 1.5rem; margin: 20px 0 15px 0; line-height: 1.3; }
main#primary .card-title a { color: #ffffff; text-decoration: none; transition: color 0.3s ease; }
main#primary .card-title a:hover { color: #b230ff; }
main#primary .card-excerpt { color: #cccccc; line-height: 1.6; flex-grow: 1; margin-bottom: 20px; }
main#primary .card-meta { font-size: 0.8rem; color: #888888; margin-bottom: 25px; border-top: 1px solid #333333; padding-top: 15px; }
main#primary .card-meta .card-date { margin-left: 15px; }
main#primary .card-read-more { color: #b230ff; font-weight: 700; text-decoration: none; letter-spacing: 0.5px; }
main#primary .card-read-more:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   SIDEBAR & WIDGETS (STYLES ARE SCOPED)
   -------------------------------------------------------------------------- */
.blog-sidebar {
    flex-basis: 320px;
    flex-shrink: 0;
}

/* =================================================================
   FINAL STICKY SIDEBAR (Based on working sample)
   ================================================================= */

/* 1. The Kadence theme override (This is essential) */
/* This forces the main theme wrappers to allow sticky positioning. */
.blog #wrapper,
.blog #inner-wrap {
    overflow: visible !important;
}

/* 2. The Sidebar itself (using your working logic) */
/* We apply sticky directly to the main sidebar column. */
.blog-sidebar {
    flex-basis: 320px;
    flex-shrink: 0;
    
    /* --- The Sticky Properties --- */
    position: sticky;
    top: 120px; /* Offset from the top to clear your header */
    
    /* --- Crucial property for sticky in a flex container --- */
    /* This tells the sidebar to align to the top of the container, which is needed for stickiness to work. */
    align-self: flex-start; 
}

/* 3. The widgets inside the sidebar (no changes, just for completeness) */
main#primary .sidebar-widget {
    background-color: #1a1a1a;
    padding: 30px;
    border-radius: 8px;
    margin-bottom: 30px;
}

main#primary .sidebar-widget-help {
    background-color: #1a1a1a;
    padding: 15px 20px;
    border-radius: 8px;
}
main#primary .sidebar-widget {
    background-color: #1a1a1a;
    padding: 30px;
    border-radius: 8px;
    margin-bottom: 30px;
}

main#primary .sidebar-widget-help {
    background-color: #1a1a1a;
    padding: 15px 20px;
    border-radius: 8px;
}

main#primary .widget-title {
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 25px;
    border-bottom: 1px solid #333;
    padding-bottom: 15px;
    color: #ffffff; /* Sets "Posts" to white */
}

main#primary .sidebar-widget ul { list-style: none; padding: 0; margin: 0; }
main#primary .sidebar-widget ul li { margin-bottom: 15px; border-bottom: 1px solid #2a2a2a; padding-bottom: 15px; }
main#primary .sidebar-widget ul li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
main#primary .sidebar-widget ul li a { color: #cccccc; text-decoration: none; transition: color 0.3s ease; }
main#primary .sidebar-widget ul li a:hover { color: #b230ff; }

.contact-button-sidebar { display: flex; align-items: center; text-decoration: none; color: #ffffff; font-weight: 600; transition: opacity 0.3s ease; }
.contact-button-sidebar:hover { opacity: 0.8; }
.question-mark { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background-color: #b230ff; border-radius: 50%; font-size: 1.5rem; margin-right: 15px; }
.button-text { font-size: 1.1rem; }


/* --------------------------------------------------------------------------
   PAGINATION (STYLED AS REQUESTED)
   -------------------------------------------------------------------------- */
.blog-pagination-container {
    padding: 40px 0 80px 0; /* Adds spacing around pagination */
}

.blog-pagination-container .nav-links {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.blog-pagination-container .page-numbers {
    color: #b230ff; /* Purple numbers and arrows */
    background-color: #000000; /* Black background */
    border: 1px solid #333333;
    font-weight: 700;
    padding: 12px 20px;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.blog-pagination-container .page-numbers:hover,
.blog-pagination-container .page-numbers.current {
    background-color: #b230ff; /* On hover/current, bg becomes purple */
    border-color: #b230ff;
    color: #ffffff; /* On hover/current, number becomes white */
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
    .blog-layout-container { flex-direction: column; }
    .blog-sidebar { flex-basis: auto; }
    .sidebar-inner-sticky { position: static; } /* Disables sticky on mobile */
}

@media (max-width: 576px) {
    .blog-layout-container { padding: 0 20px; }
}