body {
  overflow-x: hidden;
  /* when the content in the right column doesn't fit given the fixed size of the map this will stop the columns from overlapping */
  font-family: 'Montserrat';
  /* use nucleus' font for content in the body */
  font-size: 22px;
}

/* styling for the header */
#header-id {
  position: relative;
  padding: 1%;
  /* creates a small gap background and text */
  background-color: rgb(212, 212, 212);
  color: black;
  /* text colour*/
  height: 7vh;
  /* 7 % of the viewport height  */
  margin-bottom: 1vh;
  /* creates a small gap between header and body */
}

#title {
  font-weight: 700;
  /* Extra-bold */
}

#h1 {
  /* everything in the HTML with h1 will be bold */
  font-weight: bold;
}

.container-fluid2 {
  height: 91vh;
  /* Make the entire container take full viewport height after we account for 2vh for margin and 7 for header */
}

.row {
  height: 100%;
  /* Ensure the row fills the full height */
}

#my-map {
  height: 100%;
  /* Make the map fill its container */
  width: 100%;
  overflow: hidden;
  /* Cut off any parts outside the 9-column width */
}

/* styling for the filters colum  */
#filters-col {
  background-color: rgb(212, 212, 212);
  margin-left: 1.5%;
  padding: 0.1%;
  margin-bottom: 2vh;
  width: fit-content;

}


/* styling for the details colum  */
#details-col {
  margin-right: 1.5%;
  overflow-x: auto;
}

#program-row {
  height: fit-content;
  /* Modern browsers */
  min-height: fit-content;
  /* Alternative */
  background-color: rgb(212, 212, 212);
  margin-top: 0;
  margin-bottom: 2vh;
  /* creates a gap between the program details box and the legend box  */
}

#legend-row {
  height: fit-content;
  /* makes the box adapt size to fit the content  */
  min-height: fit-content;
  background-color: rgb(212, 212, 212);
  margin-top: 0%;
  margin-bottom: 1.5%;
  font-size: 16px;
  display: none;

}

#food-program-details {
  height: fit-content;
  /* makes the box adapt size vertically to fit the content */
  min-height: fit-content;
  background-color: rgb(212, 212, 212);
  margin-top: 0;
  margin-bottom: 1vh;
  padding-left: 2%;
  padding-top: 2%;
  max-width: 100%;
  /* creates a slider when the content is bigger than the container */
  overflow-x: auto;
}

/* styling for the title  */
#food-program-details h2 {
  font-size: 16px;
  margin-bottom: 5px;
  font-weight: 600;
  /* makes the title bolder for better readability */
}

/* styling for the details text  */
#food-program-details p {
  font-size: 14px;
  margin: 5px 0;
}

#food-program-details {
  padding-left: 5%;
  padding-top: 2%;
}

.legend span {
  display: inline-block;
  width: 14px;
  height: 12px;
  /* Height for the hexagon */
  margin-right: 5px;
  position: relative;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  /* changes the legend shape from circles to hexagons */
  -webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

/* colors for legend based on the hexgrid */

#walk_legend div:nth-child(2) span {
  background-color: #063b00;
}

#walk_legend div:nth-child(3) span {
  background-color: #089000;
}

#walk_legend div:nth-child(4) span {
  background-color: #0eff00;
}

#pt_legend div:nth-child(2) span {
  background-color: #4c00a4;
}

#pt_legend div:nth-child(3) span {
  background-color: #00bbd1;
}

#pt_legend div:nth-child(4) span {
  background-color: #00fff3;
}

/* styling for dropdown  buttons*/
.dropdown-toggle {
  padding: 10px;
  /* space between text and box */
  cursor: pointer;
  text-align: left;
  margin: 5px;
  /* Space between dropdown buttons */
}

/* makes dropdown box darker when you hover over it */
.dropdown-toggle:hover {
  background-color: #ddd;
}

/* Style for the dropdown menu */
.dropdown-menu {
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #fff;
  max-height: 200px;
  overflow-y: auto;
}

/* Style for dropdown items */
.dropdown-item {
  display: block;
  padding: 5px 10px;
  cursor: pointer;
}

.dropdown-item:hover {
  background-color: #f0f0f0;
}

/* Style for checkboxes */
.dropdown-item input[type="checkbox"] {
  margin-right: 10px;
}

#network-toshow .form-check-label {
  font-size: 15px;
}

/* style for total coverage buttons*/
#show-all-pt,
#show-all-walk {
  font-size: 12px;
  margin: 5px;
}

/* Style for the reset button */
#reset-filters {
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: 5px;
  padding: 10px;
  background-color: #f70606;
  border: 1px solid #ff9999;
  cursor: pointer;
}

/* makes dropdown box darker when you hover over it */
#reset-filters:hover {
  background-color: #ff9999;
}

/* styling for when screen is smaller (and items stack) */
@media (max-width: 1100px) {

  .row {
    flex-direction: column;
    /* Stack elements */
  }

  #my-map {
    height: 50vh;
    /* Adjust map height when stacked */
  }

  #details-col {
    margin-top: 2vh;
    /* Add space between elements when stacked */
    margin-left: 2vh;
    width: fit-content;
    overflow-x: auto;
    /* This allows scrolling if content overflows */
    max-height: 100vh;
    /* Limit height so it doesn’t grow infinitely */
  }

}


#walk_legend,
#pt_legend {
  font-size: 14px;
}

/* styling for popup */
#popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);/* dim background */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.popup-content {
  background: white;
  padding: 2rem;
  border-radius: 10px;
  width: 90%;
  max-width: 600px;
  text-align: center;
  position: relative;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* positions the x to close the popup at the top right */
.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 20px;
  cursor: pointer;
  border: none;
  background: none;
}

#web-credits {
  position: absolute;
  font-size: 12px;
  color: #555;
  font-family: 'Montserrat', sans-serif;
  display: flex;
  flex-direction: column; /* Stack items vertically */
  position: absolute;
  right: 1%;
  top: 10%;
  line-height: 1.2;
}