/* latest-articles-styles.css */

/* Base styles for the latest articles menu bar */
.latest-articles {
    font-family: Atkinson Hyperlegible, sans-serif; /* Change font, e.g., 'Helvetica', 'Georgia' */
    padding: 5px; /* Padding around menu bar; change to adjust */
    border: 2px solid #00FF00; /* Green border around all buttons; change color/thickness */
}

/* Style the heading as a button */
.latest-articles h2 {
    margin: 0 0 10px; /* Space below heading; change to adjust */
    font-size: 20px; /* Heading size; change to adjust */
    color: #ffc500; /* Yellow text color; change to adjust */
    background-color: #6F42c1; /* Purple button background; change to adjust */
    padding: 12px 18px; /* Same padding as buttons; change to adjust */
    border-radius: 5px; /* Rounded edges; set to 0px to disable, e.g., 10px for more rounding */
    border: 1px solid #e09248; /* Orange border; change color/thickness */
    text-align: center; /* Center heading */
}

/* Style the unordered list */
.latest-articles ul {
    list-style: none; /* Remove default bullets */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
    display: flex; /* Column layout */
    flex-direction: column; /* Stack items vertically */
    gap: 10px; /* Space between articles; change to adjust */
}

/* Style each list item */
.latest-articles li {
    margin: 0; /* No margin between items */
}

/* Style the linked titles as individual buttons */
.latest-articles a {
    display: block; /* Full clickable area */
    padding: 12px 18px; /* Padding inside buttons; change to adjust */
    color: #386af7; /* Button text color (blue); change to adjust */
    background-color: #00ff00; /* Button background color (green); change to adjust */
    text-decoration: none; /* Remove default underline */
    font-size: 16px; /* Font size; change to adjust */
    border-radius: 5px; /* Rounded edges; set to 0px to disable, e.g., 10px for more rounding */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth hover effect */
    border: 1px solid #e09248; /* Orange border around each button; change color/thickness */
    text-align: center; /* Center text */
}

/* Hover effect for buttons */
.latest-articles a:hover {
    background-color: #6f42c1; /* Hover background color (purple); change to adjust */
    color: #e09248; /* Hover text color (orange); change to adjust */
}

/* Style the non-linked date */
.latest-articles .date {
    display: block; /* Place date on new line */
    font-size: 14px; /* Smaller font for date; change to adjust */
    color: #ffc500; /* Yellow date color; change to adjust */
    text-align: center; /* Center date */
    margin-top: 5px; /* Space above date; change to adjust */
}

/* Responsive design: Adjust for mobile (screens <= 768px) */
@media (max-width: 768px) {
    .latest-articles ul {
        gap: 10px; /* Same spacing as desktop; change to adjust */
    }
    .latest-articles a {
        padding: 12px 18px; /* Same padding as desktop */
        color: #386af7; /* Same text color as desktop */
        background-color: #00ff00; /* Same background as desktop */
        border-radius: 5px; /* Same rounded edges as desktop */
        border: 1px solid #e09248; /* Same orange border as desktop */
    }
    .latest-articles a:hover {
        background-color: #6f42c1; /* Same hover background as desktop */
        color: #e09248; /* Same hover text color as desktop */
    }
    .latest-articles .date {
        font-size: 14px; /* Same date size as desktop */
        color: #ffc500; /* Same yellow date color as desktop */
        margin-top: 5px; /* Same spacing as desktop */
    }
}
