/* Base reset for all elements */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Ensures padding and borders are included in element's total dimensions */
}

/* HTML and body setup */
html {
    height: 100%;
}


body {
    background-color: #f0fff0; /* A very light green, known as honeydew */
    /* Keep the other properties as they are */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    padding: 20px;
}



/* General styling for main layout elements */
header, footer, aside, main {
    padding: 20px; /* Default padding */
}

/* Header and footer specific styling */
header, footer {
    text-align: center;
    background-color: #f0f0f0; /* Light grey background */
}

main {
    flex: 1; /* Allows main content to expand and fill available space, pushing footer down */
}

/* Flex container for center alignment */
.center-container {
    display: flex;
    justify-content: center;
    padding: 10px; /* Padding around content */
    width: 100%; /* Full width */
}

/* Search container specific adjustments */
.search-container {
    width: 100%; /* Full width to match banner */
    padding: 0 10px; /* Padding for internal spacing */
    margin: 0 auto; /* Auto margins for horizontal centering */
    text-align: center; /* Center text elements */
}

/* Styling for business directory components */
.business-directory {
    width: 105%; /* Slightly less than full for better edge spacing */
    max-width: 1200px; /* Maximum width control */
    margin: 0 auto; /* Center alignment */
    padding: 0 10px; /* Padding for internal spacing */
}

/* Unordered list adjustments in the business directory */
.business-directory ul, .business-list ul, .business-details {
    list-style-type: none; /* No bullets */
    padding-left: 0; /* No padding on the left */
    margin-top: 10px; /* Top margin for spacing */
    border-top: 1px solid #ccc; /* Visual separation */
    padding-top: 10px; /* Padding after border */
}

/* List item and detail toggle adjustments */
.business-directory li, .business-details {
    margin-bottom: 5px; /* Bottom margin for spacing */
}

.toggle-details {
    cursor: pointer; /* Pointer cursor for interactivity */
    margin-left: 10px; /* Left margin for spacing from text */
}

.business-details, .business-details-display {
    display: none; /* Initially hidden */
    padding: 10px; /* Padding for content */
    background-color: #f0f0f0; /* Light grey background */
    border-radius: 5px; /* Rounded corners for aesthetics */
    position: relative; /* Needed to position the link absolutely within it */
}


.business-details-table {
    width: 100%; /* Use full width up to the max-width */
    max-width: 800px; /* Maximum width of the table */
    margin: 0 auto; /* Center the table horizontally */
}


.business-details-table td:first-child {
    width: 20%; /* Adjust as needed, controls the width of the first column (titles) */
}

.more-details-link {
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: #007bff; /* Example link color, adjust as needed */
    text-decoration: none; /* Optional: removes underline */
}




header {
    position: relative;
    text-align: center;
    background-color: #f0f0f0;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: start; /* Aligns items to the start of the flex container */
    width: 100%;
}

.banner {
    font-size: 140%; /* Adjusted to make the font size larger */
    text-align: center;
    padding: 10px 0;
    background-color: #f0f0f0;
    width: 100%;
    box-sizing: border-box;
}

.header-home-btn {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 5px 10px;
    background-color: #f0f0f0;
    color: black;
    border-radius: 5px;
    font-size: 0.9em; /* No change to ensure the button size remains the same */
    text-decoration: none;
}

.banner-clickable {
    cursor: pointer; /* Changes cursor to pointer when banner is clickable */
}

.contact-section {
    padding: 20px;
    text-align: center;
}

.contact-details p, .contact-instructions p {
    margin: 10px 0;
    font-size: 1.0em;
}

.contact-details a {
    color: #007bff;
    text-decoration: none;
}

.contact-details a:hover {
    text-decoration: underline;
}

.disclaimer-section h3 {
    font-size: 1.5em; /* Smaller than default h1 size */
    margin-top: 20px; /* Space above each heading */
    margin-bottom: 10px; /* Space below each heading */
}

.disclaimer-section p {
    margin-bottom: 20px; /* Adds more space between paragraphs */
    line-height: 1.6; /* Improves readability */
    text-align: justify; /* Aligns text for better presentation */
}



/* Footer menu styling */
.footer-menu {
    text-align: center;
    margin-top: 20px;
    padding: 10px 0;
    background-color: #f0f0f0;
}

.footer-link {
    margin: 0 10px;
    padding: 8px 12px;
    font-size: 120%;
    color: #333;
    text-decoration: none;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 5px;
    display: inline-block;
}

.district-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    padding: 20px;
}

.district-link {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    padding: 10px 15px;
    margin: 10px;
    text-decoration: none;
    color: black;
    border-radius: 5px;
    display: inline-block; /* Allows wrapping in flex container */
    box-sizing: border-box;
    text-align: center;
    width: calc(33% - 20px); /* Adjust based on how many you want per row */
}

.business-details-container table {
    width: 100%; /* Ensures tables use full available width */
    border-collapse: collapse; /* Optional: for border styling */
    margin-bottom: 20px; /* Adds space between tables */
}

.business-details-container td {
    padding: 8px; /* Adds padding inside cells for readability */
    border-bottom: 1px solid #f0f0f0; /* Adds a light bottom border to each row for definition */
}

.business-details-container td:first-child {
    font-weight: bold; /* Makes labels bold */
    width: 30%; /* Adjusts width of label column */
}


/* Responsive adjustments for smaller screens */
@media (max-width: 767px) {
    .district-select, .search-input, .search-button {
        width: 100%; /* Full width for form elements */
        font-size: 150%; /* Increased font size for readability and accessibility */
        padding: 10px 12px; /* Adjust padding for larger text */
        margin-bottom: 10px; /* Vertical spacing between elements */
    }

    .search-button {
        padding: 12px 14px; /* Larger padding for button */
        margin-bottom: 0; /* Remove bottom margin */
    }

    .footer-link {
        display: block; /* Stack links vertically */
        width: 80%; /* Narrower width for better fit */
        margin: 10px auto; /* Center and add vertical spacing */
        padding: 10px; /* Larger padding for easier interaction */
    }
    
    .district-link {
        width: calc(100% - 20px); /* Full width for mobile devices */
    }
   
}