/* General Header Styling */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;          /* full viewport width */
  height: 80px;
  background-color: #f8f8f8 !important;
  color: white;
  display: flex;
  justify-content: center;  /* center the inner container horizontally */
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
  z-index: 10000;
}

/* Center container inside header, max width */
.header-center {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;             /* full width inside header */
  max-width: 1200px;       /* max width of content */
  gap: 20px;
}

/* Left section with logo only (hamburger removed) */
.header-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Accessibility: Visually hide content but keep it accessible for screen readers */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important; /* Modern method, equivalent to clip: rect(0,0,0,0) for hiding */
    border: 0 !important;
    white-space: nowrap !important;
}

/* Search Container */
.search-container {
    display: flex;
    align-items: center;
    background-color: white;
    padding: 5px; /* Adjust as needed, this determines the internal spacing of elements */
    border-radius: 5px;
    flex-grow: 1;
    max-width: 500px; /* Adjust as needed */
    position: relative; /* For dropdown positioning */
    border: 1px solid black; /* The black line around the container */
}

/* Search Input (more specific to target only the text input) */
.search-container input[type="text"] {
    flex-grow: 1; /* Allows the input to take up available space */
    padding: 8px; /* Adjusted padding for better visual alignment with button/select */
    font-size: 14px;
    border: none; /* Removes default input border */
    outline: none; /* Removes blue outline on focus */
}

/* Search Dropdown (select) */
.search-container select {
    background-color: transparent; /* Makes background transparent to show .search-container white bg */
    color: black;
    border: none; /* Removes default select border */
    padding: 8px; /* Adjusted padding for better visual alignment with input/button */
    font-size: 14px;
    cursor: pointer;
    outline: none; /* Removes blue outline on focus */
    margin-right: 5px; /* Space between select and input */
    border-right: 1px solid #ccc; /* A subtle grey line to separate from input */
    border-radius: 0; /* Ensures select corners don't clash with .search-container's border-radius */
}

/* Search Button */
.search-container button {
    padding: 5px 10px;        /* Your specified padding */
    border: none;             /* Your specified no border */
    cursor: pointer;          /* Your specified cursor style */
    font-size: 14px;          /* Your specified font size */

    /* Styles for icon display and alignment */
    display: flex;            /* Use flexbox for icon alignment */
    align-items: center;      /* Vertically center icon */
    justify-content: center;  /* Horizontally center icon */
    gap: 5px;                 /* Space between icon and text (if you added text back later) */
    margin-left: 5px;         /* Space between input and button */
    border-radius: 5px;       /* Keeps the rounded corners */
}

/* Style for the SVG icon within the button (its size is relative to button's font-size) */
.search-container button svg {
    width: 1em;   /* Icon width set to 1x button's font-size (14px) */
    height: 1em;  /* Icon height set to 1x button's font-size (14px) */
    vertical-align: middle; /* Helps align the icon */
}

/* Styling for the search dropdown results (if you have this element) */
.search-dropdown {
    position: absolute;
    top: 100%; /* Position below the search container */
    left: 0;
    right: 0;
    background-color: white;
    border: 1px solid #ddd;
    border-top: none; /* No top border, connects to search-container */
    border-radius: 0 0 5px 5px; /* Rounded bottom corners */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 1000; /* Ensure it appears above other content */
    max-height: 200px; /* Limit height and make scrollable */
    overflow-y: auto;
    display: none; /* Hide by default, show with JavaScript */
}

/* Logo */
.home-logo {
    height: 40px; /* Adjust height as needed */
    width: auto;  /* Maintain aspect ratio */
}

/* Remove #menu and related styles since menu is gone */

/* Search dropdown */
.search-dropdown {
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    width: 200px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
}

.search-item {
    padding: 10px;
    cursor: pointer;
    color: #333; /* Dark text for visibility */
}

.search-item:hover {
    background-color: #f0f0f0;
    color: #000; /* Darker text on hover */
}

/* Dropdown results container */
#search-results {
    position: absolute;
    top: 100%; /* Directly below input */
    left: 0;
    width: 100%;
    background-color: white;
    border: 1px solid #ccc;
    max-height: 200px;
    overflow-y: auto;
    z-index: 999;
    display: none; /* Hidden by default */
}

#search-results .search-item:hover {
    background-color: #f0f0f0;
}
/* --- Navigation Buttons --- */
.nav-buttons button {
    padding: 8px 15px;
    background-color: #f8f8f8; /* Matches your header's background-color */
    color: black;
    border: 1px solid #3d435c; /* A slightly lighter shade for a subtle border */
    border-radius: 4px;
    cursor: pointer;
    margin-left: 10px; /* Space between buttons */
    font-weight: bold;
    transition: background-color 0.2s ease, border-color 0.2s ease; /* Smooth transition */
}

.nav-buttons button:hover {
    background-color: #62707D; /* Yellow background on hover (matches your search button) */
    border-color: #62707D;     /* Yellow border on hover */
    color: white;              /* <--- ADD THIS LINE to change text color to white */
}