/* Archive Page Custom Styles */
.title{
    color: var(--white-color);
}
.archive-list-link .title {
    color: var(--white-color);
    transition: color 0.2s;
}
.archive-list-link:hover .title,
.archive-list-link:focus .title {
    color: var(--primary-color);
}




.archive-list-item {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid #e0e0e0;
}
.archive-list-item:last-child {
    border-bottom: none;
}
/* Image container for archive pages */
.archive-list-image {
    display: inline-block;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all .3s cubic-bezier(.645,.045,.355,1);
    padding-bottom: 4px;
    height: 100%;
    /* Removed background: #f3f3f3; to eliminate persistent white border */
}

.archive-list-image::after {
    content: "";
    width: 0; /* Default width is 0 */
    height: 4px;
    bottom: 0;
    position: absolute;
    left: auto;
    right: 0;
    z-index: 9; /* Ensure border is above image */
    transition: width .6s cubic-bezier(.25,.8,.25,1) 0s;
    background: #198754; /* Default color, can be overridden */
}

/* Yellow border for warning state */
.archive-image-hover-warning::after {
    background: #ffc107;
}

/* Hover effect for the entire link */
.archive-list-link:hover .archive-list-image.archive-image-hover::after {
    width: 100%;
    left: 0;
    right: auto;
}

/* Image scaling effect on hover */
.archive-list-link:hover .archive-list-image img {
    transform: scale(1.02);
}
.archive-list-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.3s ease-in-out; /*for smooth transition*/
}
.archive-list-content {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.archive-list-title {
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: #222;
}
.archive-list-excerpt {
    color: #555;
    font-size: 1rem;
}
/* Pagination styles */
.d-flex.justify-content-center.mt-4 {
    gap: 0.5rem;
    flex-wrap: wrap;
}
.d-flex.justify-content-center.mt-4 .page-numbers,
.d-flex.justify-content-center.mt-4 .current {
    display: inline-block;
    min-width: 38px;
    padding: 8px 14px;
    margin: 0 2px;
    border-radius: 6px;
    background: #f6f6f6;
    color: var(--dark-blue-color);
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    border: 1px solid #e0e0e0;
    text-align: center;
}
.d-flex.justify-content-center.mt-4 .page-numbers:hover,
.d-flex.justify-content-center.mt-4 .page-numbers:focus {
    background: #e0e0e0;
    color: #111;
    border-color:var(--primary-color);
}
.d-flex.justify-content-center.mt-4 .current {
    background: var(--dark-blue-color);
    color: #fff;
    border-color: #fff;
    cursor: default;
}
.d-flex.justify-content-center.mt-4 .prev,
.d-flex.justify-content-center.mt-4 .next {
    font-weight: bold;
    background: #f0f0f0;
    color: var(--dark-blue-color);
    border: 1px solid #e0e0e0;
}
.d-flex.justify-content-center.mt-4 .prev:hover,
.d-flex.justify-content-center.mt-4 .next:hover {
    background: #e0e0e0;
    color: var(--primary-color);
}




/*When .archive-list-link element is hovered (:hover), image gets a yellow bottom border.*/
.archive-list-image.archive-image-hover {
    display: inline-block;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all .3s cubic-bezier(.645,.045,.355,1);
    padding-bottom: 4px;
    /*height: 100%;*/
    width:100%;height:auto;
}
.archive-list-image.archive-image-hover::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    width: 0;
    background: #ffc107;
    transition: width .6s cubic-bezier(.25,.8,.25,1) 0s;
    pointer-events: none;
}
.archive-list-link:hover .archive-list-image.archive-image-hover::after {
    width: 100%;
}

/* If you want a specific warning color for this hover effect, you can add: */
.archive-list-image.archive-image-hover-warning::after {
    background: #ffc107; /* Yellow color */
}

/* You can add other colors if needed, e.g., for primary or success */
.archive-list-image.archive-image-hover-primary::after {
    background: #0d6efd; /* Blue color */
}
.archive-list-image.archive-image-hover-success::after {
    background: #198754; /* Green color */
}
/*end*/