/* Footer High Contrast Styles */

/* Override footer background with a darker solid color for better contrast */
#footer {
    background: #1a1a1a !important; /* Dark solid background instead of gradient */
}

/* Improve text contrast in footer */
#footer h5 {
    color: #ffffff !important; /* White for headings */
    font-weight: 700 !important;
    margin-bottom: 1.25rem !important;
}

#footer p, 
#footer small {
    color: #f0f0f0 !important; /* Light gray for paragraphs */
    line-height: 1.6 !important;
}

/* Improve list items and links contrast */
#footer ul.list-unstyled li {
    margin-bottom: 0.75rem !important;
    line-height: 1.4 !important;
}

#footer a {
    color: #93c5fd !important; /* Light blue for links */
    text-decoration: underline !important;
    transition: color 0.2s ease-in-out !important;
}

#footer a:hover, 
#footer a:focus {
    color: #dbeafe !important; /* Lighter blue for hover/focus */
    text-decoration: underline !important;
}

/* Focus styles for keyboard navigation */
#footer a:focus-visible {
    outline: 2px solid #dbeafe !important;
    outline-offset: 3px !important;
}

/* Add more spacing between elements */
#footer .mb-4 {
    margin-bottom: 2rem !important;
}

/* Ensure horizontal rule has good contrast */
#footer hr {
    border-color: #4b5563 !important;
    margin: 2rem 0 !important;
}

/* Small text contrast improvement */
#footer small {
    color: #e0e0e0 !important;
}

/* For very small screens - improve readability */
@media (max-width: 575.98px) {
    #footer p, 
    #footer a,
    #footer small {
        font-size: 1.05rem !important;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    #footer {
        background: #000000 !important;
    }
    
    #footer h5 {
        color: #ffffff !important;
    }
    
    #footer p, 
    #footer small,
    #footer .text-muted {
        color: #ffffff !important;
    }
    
    #footer a {
        color: #ffffff !important;
        text-decoration: underline !important;
        background-color: #000000 !important;
    }
    
    #footer a:hover, 
    #footer a:focus {
        background-color: #ffffff !important;
        color: #000000 !important;
    }
}

/* Override .text-muted class in footer specifically */
#footer .text-muted {
    color: #e5e7eb !important;
}