/* breadcrumbs-styles.css */

/* Base styles for the breadcrumbs */
.breadcrumbs {
    font-family: Atkinson Hyperlegible, sans-serif; /* Change font, e.g., 'Helvetica', 'Georgia' */
    padding: 10px; /* Padding around breadcrumbs; change to adjust */
}

/* Style the unordered list */
.breadcrumbs ul {
    list-style: none; /* Remove default bullets */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
    display: flex; /* Horizontal layout on desktop */
    justify-content: center; /* Center breadcrumbs */
    gap: 10px; /* Space between buttons; change to adjust */
}

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

/* Style the links as individual buttons */
.breadcrumbs a {
    display: block; /* Full clickable area */
    padding: 12px 18px; /* Padding inside buttons; change to adjust */
    color: #386af7; /* Button text color (blue); change this to adjust */
    background-color: #00ff00; /* Button background color (green); change this 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; /* Border around each button; change color/thickness */
}

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

/* Responsive design: Stack vertically on mobile (screens <= 768px) */
@media (max-width: 768px) {
    .breadcrumbs ul {
        flex-direction: column; /* Stack items vertically */
        gap: 10px; /* Same spacing as desktop; change to adjust */
    }
    .breadcrumbs a {
        text-align: center; /* Center text on mobile */
        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 #386af7; /* Same button border as desktop */
    }
    .breadcrumbs a:hover {
        background-color: #6f42c1; /* Same hover background as desktop */
        color: #e09248; /* Same hover text color as desktop */
    }
}
