/* General styles */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  background: #fdfdfd;
  color: #333;
}
header {
  background: #4CAF50;
  color: #fff;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Keep the header fixed at the top as you scroll */
  position: sticky;
  top: 0;
  /* Ensure the header stays above other UI elements like dropdown menus */
  z-index: 2000;
}

/* Branding: logo and title side by side */
header .brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Make the brand (logo and title) a link back to the home page */
.brand-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}
.brand-link:hover {
  text-decoration: none;
}

/* Site logo styling */
/* Display the logo larger and invert colors to white */
.site-logo {
  height: 60px;
  width: auto;
  /* no filter needed now that the SVG itself is white */
  filter: none;
}

/* Hide the text portion of the site name in the branding */
header .brand h1 {
  display: none;
}

@media (max-width: 768px) {
  .site-logo {
    height: 50px;
  }
}
header h1 {
  margin: 0;
  font-size: 1.5em;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  /* Allow nav items to wrap when there isn't enough horizontal space */
  flex-wrap: wrap;
}
nav li {
  margin-left: 15px;
}
nav a {
  color: #fff;
  text-decoration: none;
}
nav a:hover {
  text-decoration: underline;
}
nav a.active {
  text-decoration: underline;
  font-weight: bold;
}
main {
  padding: 15px;
}
h2 {
  color: #4CAF50;
  margin-top: 0;
}

/* Search box styling */
.search-box {
  margin: 10px 0;
}
.search-box input[type="text"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* ============================================================
 * Filter dropdown styles (need.html and volunteer.html)
 *
 * To declutter the results pages, most filter checkboxes are hidden
 * inside a dropdown menu. Only the sort selector remains visible.
 */
/*
 * Filter controls contain the sort selector and the Filters button.  Stack
 * them vertically so the filters row appears below the sorting options.
 */
.filter-controls {
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.filter-dropdown {
  position: relative;
  display: inline-block;
  margin: 5px 0;
}
.filter-dropdown button {
  padding: 5px 10px;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}
/*
 * Dropdown menu styling.  The menu is absolutely positioned relative to its
 * parent dropdown.  A high z-index ensures it appears above the card grid
 * but still below the fixed header (z-index: 2000).  The scrollbar is
 * always visible to avoid disappearing scrollbars on some platforms.
 */
/*
 * Dropdown menu styling.  The menu is absolutely positioned relative to its
 * parent dropdown.  A high z-index ensures it appears above the card grid
 * but still below the fixed header (z-index: 2000).  The scrollbar is
 * always visible to avoid disappearing scrollbars on some platforms.  We
 * increase the z-index here to 1900 to ensure the menu floats above the
 * resource cards, even if those cards are assigned a lower stacking context.
 */
.filter-menu {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 1900; /* sits above nav column and cards but below header */
  min-width: 220px;
  max-height: 300px;
  overflow-y: scroll;
}
.filter-menu.show {
  display: block;
}
.filter-menu .filter-group {
  margin-bottom: 10px;
}
.filter-menu .filter-group + .filter-group {
  border-top: 1px solid #eee;
  padding-top: 10px;
}
.filter-menu label {
  display: block;
  margin: 4px 0;
}
/* Card actions (bookmark, share, directions) */
.card-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.card-actions button {
  background: #e7e7e7;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 0.85rem;
  cursor: pointer;
}
.card-actions button:hover {
  background: #ddd;
}

/* Make cards clickable with pointer cursor */
.card {
  cursor: pointer;
}
/* Location & filter controls */
.location-filter {
  margin: 10px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.location-filter span {
  margin: 5px;
  font-weight: bold;
}
.location-filter input {
  padding: 5px;
  margin-left: 5px;
}
.location-filter button {
  padding: 5px 10px;
  margin-left: 5px;
}
/* Multi‑select dropdown styling */
.location-filter select[multiple] {
  padding: 5px;
  margin-left: 5px;
  min-width: 180px;
  min-height: 2.2em;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
}
.filters {
  margin: 10px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
/* Adjust spacing on individual filter elements */
.filters > label {
  margin-right: 15px;
  margin-bottom: 5px;
}
.filters > select {
  margin-right: 10px;
  margin-bottom: 5px;
}

/* Accessibility filters wrap onto multiple lines with small gaps */
.accessibility-filters {
  margin-top: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.accessibility-filters label {
  margin: 0;
}
/* Layout for list and map sections */
.content {
  display: flex;
  flex-wrap: wrap;
}
.list-section {
  flex: 1 1 400px;
  padding-right: 10px;
}
.map-section {
  flex: 1 1 400px;
  height: 400px;
}
#map {
  width: 100%;
  height: 100%;
  background: #eee;
}
/* Resource cards */
#resource-list {
  
}
.card {
  background: #fafafa;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.card img.logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  float: right;
  margin-left: 10px;
}
.card h3 {
  margin: 0 0 5px;
}
.card p {
  margin: 0;
}
.card .distance {
  font-style: italic;
  color: #555;
}
/* Home page option cards */
.options {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.option-card {
  flex: 1 1 250px;
  background: #f9f9f9;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 15px;
  margin: 10px 0;
}
.option-card h3 {
  margin-top: 0;
}
.option-card .button {
  display: inline-block;
  margin-top: 10px;
}
/* Button style for links styled as buttons */
.button {
  background: #4CAF50;
  color: #fff;
  text-decoration: none;
  padding: 8px 15px;
  border-radius: 4px;
}
.button:hover {
  background: #45a047;
}
/* Footer style */
footer {
  background: #f0f0f0;
  text-align: center;
  padding: 10px;
  font-size: 0.9em;
  color: #555;
  margin-top: 20px;
}

/*============================================================
 * Layout adjustments for the resource results (need.html)
 *
 * On wider screens (desktop), the results page is arranged in
 * three columns: a fixed navigation column on the left with
 * filters and the map, and two columns of cards on the right.
 * On smaller screens, these sections stack vertically.
 */

/* Base styles for the content grid on need.html */
.content-grid {
  display: flex;
  flex-direction: column;
}

/* Navigation column containing filters and map */
.nav-column {
  width: 100%;
  box-sizing: border-box;
}

/* Cards container on need.html */
/*
 * Cards container wraps the resource cards.  Assign a relative position
 * and low z-index so that dropdown menus anchored to the nav column can
 * float above it.  Without an explicit positioning context, the cards
 * could overlap dropdown menus due to DOM stacking order.  A relative
 * position establishes a stacking context while keeping normal flow.
 */
.cards-container {
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 1200;
}

/* Map container ensures the map fills its parent in the nav column */
.map-container #map {
  width: 100%;
  height: 300px;
  background: #eee;
}

/* Ensure the volunteer map is visible on desktop. The volunteer page uses
 * a separate map element with id "volMap". Without an explicit height,
 * Leaflet collapses the map container to zero height. Set a default
 * height just like the resource map. On narrower screens, a separate
 * rule (see @media max-width: 899px) overrides this to use an aspect
 * ratio instead. */
.map-container #volMap {
  width: 100%;
  height: 300px;
  background: #eee;
}

/*============================================================
 * Responsive layout rules for the resource results (need.html)
 *
 * On large screens, the page is arranged as three columns: a fixed
 * navigation column on the left containing the filters and map,
 * and two columns of resource cards on the right. The card list
 * itself is the grid container so that cards flow directly into
 * the two columns.
 *
 * On narrower screens (< 900px), the navigation column stacks above
 * the cards but still spans the full width, and the cards are
 * displayed in a two‑column grid to maximize use of space. If the
 * screen becomes extremely narrow, the two columns will wrap based
 * on available width via auto sizing.
 */

/* Large screens (three‑column layout) */
@media (min-width: 900px) {
  /* Arrange nav and cards side by side */
  .content-grid {
    flex-direction: row;
    align-items: flex-start;
  }
  /* Sticky navigation column */
  .nav-column {
    flex: 0 0 320px;
    position: sticky;
    top: 80px; /* account for header height */
    height: calc(100vh - 80px);
    /* Allow dropdown menus to extend outside of the nav column without being clipped.
       Do not constrain vertical overflow here; the page scroll will handle overflow. */
    overflow: visible;
    padding-right: 20px;
    box-sizing: border-box;
    /* Raise the z-index so the nav and its dropdown menus sit above the cards but below the header */
    z-index: 1700;
  }
  /* Card list: two columns */
  #resource-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(320px, 1fr));
    gap: 15px;
  }
  #resource-list .card {
    margin: 0;
  }
}

/* Medium screens (stack nav above cards but keep two columns of cards) */
@media (max-width: 899px) {
  /* Base column layout (already column by default) */
  .content-grid {
    flex-direction: column;
  }
  /* Navigation column occupies full width and is not sticky */
  .nav-column {
    width: 100%;
    position: static;
    height: auto;
    overflow: visible;
    padding-right: 0;
    box-sizing: border-box;
    margin-bottom: 15px;
  }
  /* Display cards in a single column on smaller widths to avoid layout breakage */
  #resource-list {
    display: block;
  }
  #resource-list .card {
    margin-bottom: 15px;
  }
  /* Maintain a 16:10 aspect ratio for the map by using the aspect-ratio property */
  .nav-column .map-container #map {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
  }

  /* Maintain a 16:10 aspect ratio for the volunteer map as well */
  .nav-column .map-container #volMap {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
  }
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  /* Adjust header and navigation layout on small screens */
  header {
    flex-direction: row;
    align-items: center;
  }
  nav ul {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: 10px;
  }
  nav li {
    /* reduce margin for wrapped items */
    margin: 5px 0 0 10px;
  }
}

/* ============================================================
 * Layout rules for the volunteer results (volunteer.html)
 *
 * The volunteer page shares similar layout requirements to the resource
 * results page: a sticky navigation column on larger screens containing
 * category/city filters and a map, and a two‑column grid of volunteer
 * cards to the right. On narrower screens the nav column stacks above
 * the cards, and the cards fall back to a single column.
 */

/* Large screens: display volunteer cards in a two‑column grid */
@media (min-width: 900px) {
  #volunteer-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(320px, 1fr));
    gap: 15px;
  }
  #volunteer-list .card {
    margin: 0;
  }
}

/* Medium screens and below: stack volunteer cards into one column */
@media (max-width: 899px) {
  #volunteer-list {
    display: block;
  }
  #volunteer-list .card {
    margin-bottom: 15px;
  }
}