/*Ensure Text Contrast: High contrast between text and background is crucial for visually impaired users.*/

body {
    color: #000000; /* Black text */
    background-color: #ffffff; /* White background */
}

h1, h2, h3, h4, h5, h6 {
    color: #333333; /* Darker heading color */
}

/*Font Size and Line Height: Make text legible by setting a minimum font size and appropriate line height.*/
body {
    font-size: 16px; /* Minimum readable font size */
    line-height: 1.5; /* Improve readability */
}

/*Focus Styles for Keyboard Navigation: Ensure users can navigate using the keyboard, especially tabbing.*/
a:focus, button:focus, input:focus {
    outline: 3px solid #f90; /* Orange outline to show focus */
    outline-offset: 2px; /* Offset the outline to make it more visible */
}


/*Avoid Using Fixed Layouts: Avoid absolute positioning and fixed widths. Allow the layout to adapt to different screen sizes and user preferences.*/
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/*Text Resizing: Allow users to resize text without breaking the layout. This is critical for people with low vision.*/
html {
    font-size: 100%; /* Allow resizing */
}

/*Accessible Links: Make links visually distinct from regular text and ensure they are underlined or styled in a way that they stand out.*/

a {
    color: #007bff; /* Accessible blue color */
    text-decoration: underline; /* Make links underlined */
}

    a:hover, a:focus {
        color: #0056b3; /* Darker blue on hover/focus */
    }

/*Ensure No Hidden Text or Content: Content hidden for visual effects (like tooltips or modal windows) should still be available to screen readers.*/
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    clip: rect(0, 0, 0, 0);
    overflow: hidden;
}

/*Accessible Form Elements: Style form elements to make them easy to use and navigate.*/
input, select, textarea, button {
    padding: 10px;
    font-size: 16px;
}

    input:focus, select:focus, textarea:focus, button:focus {
        outline: 2px solid #0056b3; /* Blue outline on focus */
    }

label {
    display: inline-block;
    margin-bottom: 5px;
    font-weight: bold;
}

@charset "UTF-8";
/* Styles/Site.css */

/*
body { 
    font-family: sans-serif; 
    margin: 0; 
    padding: 0; 
} 
*/


#header {
        background-color: #f0f0f0;
        padding: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
}

    #header .logo img {
            max-height: 60px;
    }

    #header nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
    }

        #header nav ul li {
                display: inline;
                margin-left: 20px;
        }

            #header nav ul li a {
                    text-decoration: none;
                    color: #333;
            }

#content {
        padding: 20px;
        min-height: 600px; /* Adjust as needed */
}

#footer {
        background-color: #f0f0f0;
        padding: 20px;
        text-align: center;
}

#countylogo {
    margin-right: 1em;
    justify-content: space-between;
}
/* Add more styles as needed */