/* Custom Styles for Blog Layout */

/* Body Styles */
body {
    user-select: none;
}

/* Navbar Styles */
.navbar-light .navbar-nav .nav-link {
    color: #fff !important;
}

.navbar-nav .nav-link {
    font-size: 0.94rem;
    transition: all 0.3s ease;
}

.navbar-nav .nav-link:hover {
    background-color: #f8f9fa;
    border-radius: 20px;
    color: #007bff !important;
}

/* Fix hamburger menu color to white - Higher specificity to override Bootstrap */
.navbar-light .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.1);
}

.navbar-light .navbar-toggler:focus {
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
}

.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.navbar-nav .nav-link.active,
.navbar-nav .show>.nav-link {
    color: #894bc8 !important;
}

/* Custom Pagination Styling */
.pagination .page-link {
    /* background-color: #330066 !important;
    border: 1px solid #330066 !important; */
    color: white !important;
    border-radius: 8px !important;
    margin: 0 2px !important;
    padding: 8px 12px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

.pagination .page-link:hover {
    /* background-color: #440077 !important;
    border-color: #440077 !important; */
    color: white !important;
    transform: translateY(-1px) !important;
}

.pagination .page-item.active .page-link {
    background-color: #330066 !important;
    /* border: 2px solid rgb(119, 0, 255) !important; */
    color: white !important;
    font-weight: 600 !important;
}

.pagination .page-item.disabled .page-link {
    background-color: #220044 !important;
    border-color: #220044 !important;
    color: #888 !important;
    opacity: 0.6 !important;
}

/* Card Post Styles */
.card-post {
    transition: transform 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.card-post:hover {
    transform: translateY(-5px);
}

.card-post .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

.card-post .card-body h5 {
    height: 70px;
    /* Fixed height for 2 lines */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

.card-post .card-body p {
    height: 50px;
    /* Fixed height for content */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    line-height: 1.2;
    margin-bottom: 0;
}

.card-post .d-grid {
    margin-top: auto;
}

/* Image Styles */
.img-post {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 0.375rem 0.375rem 0 0;
}

.lazy {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Read More Button Styles */
.read-more {
    background-color: #340A49;
    color: #fff;
}

.read-more:hover {
    background-color: #220630;
    color: #fff;
}

.read-more:focus {
    background-color: #340A49 !important;
    color: #fff !important;
    box-shadow: none;
}

.page-link-custom {
    background-color: #340A49;
    border: none;
}

.page-link-custom:hover {
    background-color: #220630;
}

.page-link-custom:focus {
    background-color: #340A49;
    box-shadow: none;
}

/* Responsive Design */
@media (max-width: 768px) {
    .card-post .card-body h5 {
        height: 50px;
        -webkit-line-clamp: 2;
    }
    
    .card-post .card-body p {
        height: 50px;
        -webkit-line-clamp: 4;
    }
    
    .img-post {
        height: 150px;
    }
}

@media (max-width: 576px) {
    .card-post .card-body h5 {
        height: 50px;
        -webkit-line-clamp: 2;
    }
    
    .card-post .card-body p {
        height: 45px;
        -webkit-line-clamp: 3;
    }
    
    .img-post {
        height: 120px;
    }
}