/* Set global font to Figtree */
body {
  font-family: 'Figtree', sans-serif;
  font-weight: 400; /* Define a specific weight */
}

/* Set parameters for the map section of the page */
#map {
  position: absolute; 
  top: 60px; /* Added space here to match nav bar height */
  bottom: 0; 
  width: 100%;
}

#bdc-img{
  padding: 0px;
  margin-left: 30px;
  height: 55px;
}

/* Set max width, font style, and basic styling for the popup */
.mapboxgl-popup {
    font: 14px/20px 'Figtree', sans-serif;
    max-width: 450px !important; /* Override mapbox css which fixes max width to 240px */
}
  
  /* Style the popup content */
  .mapboxgl-popup-content {
    position: relative;
    background-color: #fffffff4; 
    color: #4c4c4c; /* Text color */
    padding: 10px;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }

  /* Style the legend container, which stacks legends vertically */
  #legend-container {
    position: absolute;
    top: 80px;       
    left: 30px;     
    padding: 0px;
    font-size: 14px;
    color: #333;
    display: flex;
    flex-direction: column; /* Stack items vertically */
    width: 210px; /* Fix width of all legends to leave more space for the map, sized to fit decarb pathway text on two lines */
  }

  /* Style the legend spacing*/
  .legend {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    gap: 5px; /* Space between buttons */
    margin-bottom: 0px; /* Space between the two legends */
    background-color: white;
    border-radius: 5px;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3);
  }

  .legend-spacer {
    margin-top: 20px;
    background-color: #ffffff00; /* transparent */

  }

    /* Style the legend title*/
  .legend h3 {
    margin: 0;
    font-size: 16px;
    display: flex;
    align-items: center;
    background-color:#4B505B;
    color: #ffffff;
    padding: 10px;
    margin-bottom: 0px;
    margin-top: 0px;
    position: relative; /* Needed for the help-container to position itself relative to the h3 */
    display: flex; /* Align items within the title */
    justify-content: space-between; /* Space between title text and help icon */
    align-items: center; /* Vertically align the text and help icon */
  }
  
  .legend-item {
    align-items: center; /* Center items vertically so the box and text align*/
    margin-bottom: 2px;
    margin-left: 10px;
  }

  .legend-item-label {
    cursor: pointer;
  }

  .legend-text {
    text-align: left; /* Left align wrapping text instead of centering*/
    
  }

  .legend-key {
    width: 20px;
    height: 20px;
    flex-shrink: 0; /* Prevent shrinking when text wraps */
    display: inline-block;
    margin-right: 8px;
  }

  .legend button {
    background-color: #78a6be00;
    border: none;
    padding: 0px 0px;
    margin-right: 10px;
    align-items: center; /* Center items vertically so the box and text align*/
    display: flex;
    cursor: pointer;
    font-family: 'Figtree', sans-serif;
    font-size: 14px;
    transition: background-color 0.3s ease;
  }

  .legend button.inactive {
    text-decoration: line-through;
    color: gray;
    opacity: 0.7;
  }

  .type-checkbox {
    margin-right: 8px; /* Space between checkbox and text */
    cursor: pointer;
  }

  .type-checkbox:checked {
  accent-color: #fff; /* Change color when checked */
  }

  /* Apply strike-through when checkbox is unchecked */
  .type-checkbox:not(:checked) ~ .legend-text {
  color: #999; /* Dim the text color */
}

  .help-container {
    position: relative; /* Allows tooltip to position itself relative to this container */
    display: inline-block; /* Keep help icon and tooltip inline */
  }

  .help-icon {
    font-size: 12px;
    color: #333;
    background-color: #ffffff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    cursor: pointer;
  }
  
/* Tooltip styling */
.tooltip {
  display: none; /* Hidden by default with "none" */
  position: absolute;
  top: 50%;
  left: 130%;
  white-space: normal; /* Manage text wrapping */
  width: 600px;
  background-color: white;
  color: #333;
  padding: 8px;
  border-radius: 5px;
  z-index: 10;
  font-size: 14px;
  font-weight: 300;
}

/* Tooltip title override*/
.tooltip h3 {
  font-size: 16px;
}

/* Style the header category before the definition in the help tooltip*/
.tooltip-header {
  font-weight: bold;
}
  
  .help-container:hover .tooltip {
    display: block; /* Show tooltip on hover */
  }

/* Page title bar*/
  .nav {
    background-color: #036E6D;  /* Background color for title bar */
    color: #fff;                /* Text color */
    padding: 0px;                 /* Padding inside the nav bar */
    display: flex;                /* Flexbox for horizontal alignment */
    align-items: center;          /* Center items vertically */
    height: 60px;
    z-index: 10;
  }
  
  .page-title {
    font-size: 24px;            /* Title font size */
    font-weight: bold;
    margin: 0;   
    margin-left: 20px;  
        
  }

  .bar-separator {              /* | between Titles and Project Stats (no longer used since we moved stats to stickies page) */
    font-size: 40px;            
    margin: 0;   
    margin-right: 30px;    
    margin-left: 30px;            
  }
  .stat-name {                  /* e.g. "Total Projects" */
    font-size: 24px;            
    margin: 0;   
    margin-right: 5px;           
  }
  .stats {                      /* Numbers */
    font-size: 24px;            
    font-weight: bold;
    margin: 0;   
    margin-right: 30px;           
  }

  .update-date {                      /* Last updated date in top-right */
    font-size: 14px;            
    position: fixed; 
    font-style: italic;
    right: 15px; 
  }


/* Style for the stats stickies */
.counter-container {
  display: flex;
  background-color: white; /* Adjust the color to match your design */
  width: 800px; /* Fixed width as per your requirement */
  margin: 0 auto; /* Center the container */
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  overflow-y: auto;
}

.counter-number {
  font: bold 2em "Figtree", sans-serif;
  line-height: 1.0;
  margin-top: 30px;
  margin-bottom: 10px;
  overflow: hidden; /* Ensuring that the text does not break the box boundaries */
  color: rgb(51, 51, 51);
}

.counter-label {
  line-height: 1.5;
  text-transform: uppercase;
  overflow: hidden; /* Hide overflow */
  color: rgb(51, 51, 51);
  margin-bottom: 40px;
}

.counter-box {
  position: relative;
  height: 140px;
  width: 180px; /* Fixed width for each counter box */
  text-align: center;
  /* padding: 10px; Add padding to ensure text doesn't touch the edges */
  box-sizing: border-box; /* Include padding and border in the element's width */
  margin-left: 10px;
  margin-right: 10px;
  overflow: hidden;
  background-color: rgb(255 218 69); /* Yellow background for odd boxes */
}

.counter-box::before {
  border-width: 0 20px 20px 0;
  border-style: solid;
  border-color: #fff #fff rgb(255 218 69) rgb(255 218 69);
  background-color: white;
  content: '';
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
}

/* Responsive adjustments if necessary */
@media (max-width: 768px) {
  .counter-container {
    flex-direction: column;
    width: auto; /* Reset width to auto for smaller screens */
  }
  .counter-box {
    /* width: auto; Allow the box to expand to container width */
    margin-bottom: 20px;
  }
}