/* CSS reset 
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*/
p,ul,li,h1,h2,h3,h4,h5,h6,pre,ol,dl,dt,dd {
  margin: 0;
}

h1 {
  color: #000;
}

h2 {
  /*color: #000;*/
  margin-bottom: 5px;
}

h3 {
  /*color: #000;*/
  margin-bottom: 5px;
}

h4 {
  /*color: #000;*/
  margin-bottom: 5px;
}

html, body {
  /*font-family: "Helvetica", Trebuchet MS, Geneva, Arial, SunSans-Regular, sans-serif;*/
  font-family: 'Open Sans', sans-serif;
  /*font-family: 'Lato', sans-serif;*/
  background: linear-gradient(to right, #fffff0, #fffff6); /* Light gradient */
  text-align: center;
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  position: relative;
  height: 100%;
  margin: 0;
  padding: 0;
  color: #000; /* Text color to stand out against the overlay */
  z-index: 1;
}

/* Add background image as pseudo-element */
body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('img/outsidewhole.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  opacity: 0.2; /* Make the image more faint */
  z-index: -1; /* Keeps the image behind the text */
  width: 100%;
  height: 100%;
}
  
.overlay {
  position: absolute; /* To position it on top of the background */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 0, 0.02); /* Semi-transparent black overlay (adjust alpha value) */
  z-index: -1; /* Ensures the overlay stays behind the content */
}

#outer {
  width: 80%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px;
  display: block;
  z-index: 1;
}
  
#header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #bbbbbb;
}

#headertxt {
  display: flex;
  text-align: center;
}

#guidelogo {
  width: 190px;
  display: inline;
  padding-top: 10px;
  padding-left: 10px;
}

#guidelogo img {
  border: none;
  max-width: 100%;
  max-height: 100%;
}

#scoutlogo {
  width: 190px;
  display: inline;
  padding-top: 10px;
  padding-right: 10px;
}

#scoutlogo img {
  border: none;
  max-width: 100%;
  max-height: 100%;
}

#topmenu {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
  
#topmenu ul {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  background-color: #0056B3;
  margin: 0;
}

#topmenu ul li {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 10px;
}

#topmenu ul li a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  padding: 5px;
  display: block;
}

#topmenu ul li a:hover {
  background-color: #003D82;
  border-radius: 4px;
}

#topmenu ul li .pipe {
  margin: 0 10px;  /* Add margin around the pipe to separate it from the links */
}

/* Hamburger menu - hide it on normal size browser screen */
#hamburger {
  display: none;
}

#content {
  padding-top: 20px;
  padding-left: 25px;
  padding-right: 25px;
  text-align: left;
}

#content p {
  padding-bottom: 10px;
  font-weight: 501;
}

/* Add some spacing and padding to improve layout */
.address-section {
  
}

/* Add some spacing and padding to improve layout */
.contact-section {
  margin-bottom: 30px;
}

/* Container for Address and Map */
.address-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* Align the address and map at the top */
  gap: 20px; /* Add space between the address and map */
  width: 100%;
  margin-bottom: 30px;
}

.address-info {
  width: 30%;
}

/* Style the address section */
address {
  font-style: normal;
  line-height: 1.5;
  width: 100%; /* Control width of address */
  margin: 0;
  word-wrap: break-word;
  font-weight: 501;
}

.map-container {
  width: 65%;  /* Adjust width of the map */
  height: 350px;  /* Adjust height as needed */
}

.map-container iframe {
  width: 100%; /* Make map full width of its container */
  height: 100%;
  border: none; /* Remove border */
}

/* Improve the layout of the contact table */
.contact_table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.contact_table th, .contact_table td {
  padding: 8px 12px;
  border: 1px solid #ddd;
  text-align: left;
}

/* Styling for Table Headers */
.contact_table th {
  background-color: #f1f1f1; /* Lighter background color */
  color: #333;               /* Dark text color for contrast */
  font-weight: bold;         /* Keep the font bold for emphasis */
  text-align: left;          /* Align text to the left */
  padding: 10px 12px;        /* Add padding to make it more spacious */
  border-bottom: 2px solid #ccc; /* Light border at the bottom */
}

.contact_table td {
  font-weight: 501;
}

iframe {
  width: 100%; /* Makes the iframe take up the full width of its parent container */
  height: 80vh; /* Adjust the height to 80% of the viewport height, or use another value like 60vh */
  max-width: 100%; /* Prevents the iframe from growing beyond its parent container */
}

/* Style for the thumbnail image */
.thumbnail {
    width: 200px; /* Smaller size */
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}

/* When you hover over the image, it slightly enlarges */
.thumbnail:hover {
    transform: scale(1.1);
}

/* Style for the modal (full-screen) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Sticks to the screen */
    z-index: 1; /* Sit on top of other content */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Dark overlay */
    overflow: auto;
    padding-top: 60px; /* Adjust for content positioning */
}

/* Full-screen image inside the modal */
.modal-content {
    margin: auto;
    display: block;
    width: 80%; /* Adjust size */
    max-width: 700px; /* Maximum width */
}

/* Close the modal when clicking anywhere */
.modal:active {
    display: none;
}


/* Media Query for Mobile Devices */
@media (max-width: 768px) {
  body {
    background-image: none;
  }
  
  body::before {
    background-image: none; /* Remove background image from pseudo-element */
  }
  
  .overlay {
    display: none; /* Hide the overlay on smaller screens */
  }
  
  #outer {
    width: 100%; /* Ensures the container takes up the full width on small screens */
    padding: 0; /* Adjust padding if necessary */
  }

  h1 {
    font-size: 1em;
  }
  
  h2 {
    font-size: 1.1em;
    text-align: left;
  }
  
  h3 {
    font-size: 1em;
  }
  
  h4 {
    font-size: 0.9em;
  }
  
  p {
    font-size: 0.9em;
    font-weight: 400;
  }

  #topmenu {
    width: 40%;
    margin: 10px;
    align-items: left;
  }
  
  #topmenu ul {
    display: none; /* Hide the menu by default on mobile */
    padding: 0;
    align-items: center;
  }
  
  /* When the hamburger is clicked, display the menu */
  #topmenu.active ul {
    display: block; /* Show the menu */
    text-align: center;
  }
 
  #topmenu ul li {
    padding: 0;
    text-align: center;
    margin: 10px 0;
  }
  
  #topmenu ul li a {
    font-size: 16px;
    /*padding: 8px 0;*/
  }
    /* Hide the pipe character on mobile */
  #topmenu ul li .pipe {
    display: none; /* Hide the pipe on mobile */
  }

  #hamburger {
    display: block;
    cursor: pointer;
    width: 30px;
    height: 25px;
    margin: 10px;
    position: relative;
    z-index: 20; /* Ensure it stays on top */
  }
  
  /* Hamburger bars (3 lines) */
  #hamburger span {
    display: block;
    width: 100%;
    height: 5px;
    background: #000;  /* Dark color (e.g., dark gray or black) */
    margin: 5px 0;
  }
  
  /* When the hamburger is clicked, change its appearance */
  #hamburger.active span {
    background-color: #000; /* Or any color you prefer */
    /*transform: rotate(45deg); /* Optional: You can add a rotate effect */
  }
  
  .address-container {
    flex-direction: column; /* Stack address and map vertically on small screens */
    align-items: left; /* Center-align on small screens */
    width: 100%;
    /*padding: 10px;*/
  }

  .address-info {
    width: 100%;
    text-align: left;
    /*padding: 10px;*/
  }
  
  address {
    font-size: 1em;  /* Adjust font size for smaller screens */
    line-height: 1.5;
    width: 100%;  /* Ensure address takes the full width */
    margin: 0;
    word-wrap: break-word;  /* Ensure long words break into multiple lines */
  }

   /* Map Container Styling on Mobile */
  .map-container {
    width: 100%;  /* Make map container full width */
    height: 300px;  /* You can adjust this based on your preference */
    padding-top: 10px;  /* Add spacing between the address and map */
  }

  .map-container iframe {
    width: 100%;  /* Make the map take full width on smaller screens */
    height: 300px; /* Adjust the height accordingly */
  }
  
  /* Make the table responsive on mobile by converting it into a block format */
  .contact_table {
    display: block;
    width: 100%;
    overflow-x: auto;  /* Allow horizontal scrolling */
    white-space: nowrap;  /* Prevent text wrapping */
  }

  /* Style the table rows as blocks for smaller screens */
  .contact_table thead {
    display: none;  /* Hide table header on mobile */
  }

  .contact_table tr {
    display: block;
    margin-bottom: 20px;  /* Add space between rows */
    border: 1px solid #aaa;
  }

  .contact_table td {
    display: block;
    text-align: center;
    position: relative;
    /*padding-left: 50%;  /* Add space to the left for labels */
  }
  
  .contact_table td.status {
     font-weight: bold; 
  }
  
  contact_table td:empty {
    display: none;  /* Hide empty cells */
  }
  
  /* Optional: Hide cells containing just a hyphen (-) */
  contact_table td:contains("-") {
    display: none;
  }

  .contact_table td:before {
    content: attr(data-label);  /* Add custom label for each cell */
    position: absolute;
    left: 0;
    top: 0;
    padding-left: 10px;
    font-weight: bold;
    text-align: left;
  }

  .contact_table td a {
    word-wrap: break-word;  /* Break long email addresses or links */
  }
}