.page-template-template-journal{
    position: relative;
    background-color: black !important;
}

.page-template-template-journal::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: white;
    clip-path: polygon(-11% 0%, 120% 0%, 90% 66%, 113% 100%, -53% 100%, 9% 20%);
    z-index: -1;
}

/* Style for the post grid container */
.journal-grid-container {
    font-family: 'Open Sans', sans-serif;
    color: #212529;
}

/* Ensure all anchor tags in the Journal template have the specified color and no underline */
.journal-grid-container a {
    color: #212529;
    text-decoration: none;
}

/* Change anchor tag color on hover within the Journal template */
.journal-grid-container a:hover {
    color: #F2BE4E;
}

/* Style for the post's date and category name within the Journal template */
.journal-grid-container .post-meta .post-date, 
.journal-grid-container .post-meta .post-category {
    color: rgba(0, 0, 0, 0.5);
}

/* Icons color within the Journal template */
.journal-grid-container .far, 
.journal-grid-container .fas {
    color: #F2BE4E;
}

/* Margins for the Journal template */
.journal-grid-container {
    margin-left: 16.4vw;
    margin-right: 16.4vw;
}

.journal-grid-container .grid-item {
    border: none;  /* Remove any existing border */
    box-shadow: 0px 0px 10px 0px rgba(49.99999999999993, 49.99999999999993, 49.99999999999993, 0.25);
}

.journal-grid-container .grid-item img {
    width: 100%; /* Image will scale to the width of its container */
    height: auto; /* This will maintain the image's aspect ratio */
    display: block; /* Remove any unwanted spacing */
    aspect-ratio: 3/2; /* This ensures a 3:2 ratio for the image */
    object-fit: cover; /* Ensure the image covers the container */
}
/* Title styles */
.journal-grid-container .grid-item .card-title {
    font-size: 20px;
    font-weight: 500;
}

/* Content and "lire la suite" link styles */
.journal-grid-container .grid-item .card-text {
    font-size: 15px;
}

.journal-grid-container .grid-item .card-content a {
    font-size: 15px;
    text-decoration: none; /* Remove underline */
    transition: color 0.3s ease; /* Smooth transition for hover effects */
}

.journal-grid-container .grid-item .card-content a:hover {
    color: #F2BE4E;
}

/* Date and category name styles */
.journal-grid-container .grid-item .card-date,
.journal-grid-container .grid-item .card-category {
    font-size: 16px;
    color: rgba(0, 0, 0, 0.5);
}

/* Icons color */
.journal-grid-container .grid-item .card-date i,
.journal-grid-container .grid-item .card-category i {
    color: #F2BE4E;
}

/* Pagination Styles */
.journal-grid-container .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;  /* Adds vertical padding to the pagination container */
    font-family: 'Open Sans', sans-serif;
}

.journal-grid-container .pagination a {
    color: #212529;
    margin: 0 10px;  /* Provides spacing between the pagination numbers */
    padding: 5px 10px;  /* Adds padding to each pagination link */
    text-decoration: none;  /* Removes underline from the links */
    border-radius: 5px;  /* Slightly rounded corners for aesthetics */
    transition: background-color 0.3s, color 0.3s;  /* Smooth transition for hover effects */
}

.journal-grid-container .pagination a:hover {
    background-color: #F2BE4E;
    color: #212529;
}

.journal-grid-container .pagination a.active {
    background-color: #212529;
    color: #F2BE4E;
}

.journal-grid-container a {
    color: #212529;
    text-decoration: none;
}

.journal-grid-container a:hover {
    color: #F2BE4E;
}

/* Input focus style */
.journal-grid-container input[type="search"]:focus {
    border-color: #F2BE4E;
    box-shadow: 0 0 0 0.2rem rgba(242, 190, 78, 0.25); /* Optional: adds a glow effect */
}

/* Dropdown focus style */
.journal-grid-container select:focus {
    border-color: #F2BE4E;
    box-shadow: 0 0 0 0.2rem rgba(242, 190, 78, 0.25); /* Optional: adds a glow effect */
}

/* Search button style */
.journal-grid-container input[type="submit"] {
    background-color: #4B23C0;
    color: #ffffff; /* Text color - set to white for better contrast against the purple background */
    border: none; /* Removes any default border */
    cursor: pointer; /* Changes the cursor to a hand when hovering over the button */
}

/* Search button hover style */
.journal-grid-container input[type="submit"]:hover {
    background-color: #5a2ed2; /* A slightly lighter shade of purple for hover effect */
}

.current-page {
    color: #4B23C0;
    font-weight: 700;
}