/* Family-font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

* {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
}

/* html and body code */

html, body {
  margin: 0;
  padding: 0;
}

/* images */

.centered-images {
  display: block;
  margin: 20px 356px;
  max-width: 500px;
  max-height: 300px;
}

/* navigation code */

#sticky-nav img {
    width: 110px;
    height: auto;
    margin-left: 100px;
    margin-right: 80px;
    transform: translateX(-90px);
}

#sticky-nav {
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  background-image:
  linear-gradient(#FDB813, #FDCB6E),
  url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48cGF0dGVybiBpZD0iaG9uZXljb21iIiB3aWR0aD0iNDAiIGhlaWdodD0iMzQuNjQiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiPjxyZWN0IHdpZHRoPSI0MCIgaGVpZ2h0PSIzNC42NCIgZmlsbD0idHJhbnNwYXJlbnQiLz48cGF0aCBkPSJNMCwxNy4zMnYxNy4zMmgxNy4zMkwzNC42NCwxNy4zMloiIGZpbGw9IiNGRkQ4MTMiIG9wYWNpdHk9IjAuNCIvPjxwYXRoIGQ9Ik0xNywzNC42NEgwdjE3LjMySDIweiIgZmlsbD0iI0ZGRDgxMyIgb3BhY2l0eT0iMC40Ii8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2hvbmV5Y29tYikiLz48L3N2Zz4=");
  color: #3B2F2F;
  padding: 10px 0;
  text-align: center;
  font-family: Arial, sans-serif;
  font-weight: bold;
  border-bottom: 5px solid #E8B923;
  box-sizing: border-box;
}

#sticky-nav a {
  color: #3B2F2F;
  text-decoration: none;
  margin: 0 10px;
  font-size: 16px;
  font-weight: 700;
}
/* work with media queries for different screens / devices */
#div-2 {
  max-width: 80%;
  margin: 0 auto;
  background: #FFFFFF;
  padding: 25px 30px;
  border-radius: 12px;
  border: 3px solid #FDB813;
  position: relative;
  left: 50px;
  transform: translateX(-220px);
}

/* home - table code */

#table-1 {
  border-collapse: collapse;
  width: 70%;
  font-family: Arial, sans-serif;
}

#table-1 .tr-1 {
  background-color: #667eea;
  color: white;
}

#table-1 th {
  border: 2px solid #333;
  padding: 10px;
  text-align: center;
}

#table-1 .not-centered {
  border: 2px solid #333;
  padding: 8px;
}

#table-1 .centered {
  border: 2px solid #333;
  padding: 8px;
  text-align: center;
}

/* Guide Table 1/3 */

#table-2 {
  border-collapse: collapse;
  width: 70%;
  font-family: Arial, sans-serif;
}

#table-2 .tr-2 {
  background-color: #667eea;
  color: white;
}

#table-2 th {
  border: 2px solid #333;
  padding: 10px;
  text-align: center;
}

#table-2 .not-centered-2 {
  border: 2px solid #333;
  padding: 8px;
}

#table-2 .centered-2 {
  border: 2px solid #333;
  padding: 8px;
  text-align: center;
}

/* Guide Table 2/3 */

#table-3 {
  border-collapse: collapse;
  width: 70%;
  font-family: Arial, sans-serif;
}

#table-3 .tr-3 {
  background-color: #667eea;
  color: white;
}

#table-3 th {
  border: 2px solid #333;
  padding: 10px;
  text-align: center;
}

#table-3 .not-centered-3 {
  border: 2px solid #333;
  padding: 8px;
}

#table-3 .centered-3 {
  border: 2px solid #333;
  padding: 8px;
  text-align: center;
}

/* Guide Table 3/3 */

#table-4 {
  border-collapse: collapse;
  width: 70%;
  font-family: Arial, sans-serif;
}

#table-4 .tr-4 {
  background-color: #667eea;
  color: white;
}

#table-4 th {
  border: 2px solid #333;
  padding: 10px;
  text-align: center;
}

#table-4 .not-centered-4 {
  border: 2px solid #333;
  padding: 8px;
}

#table-4 .centered-4 {
  border: 2px solid #333;
  padding: 8px;
  text-align: center;
}

/* HERO IMAGE */

.hero-image {
  height: 555px;
  background-image: url("../images/home-image.jpg");
  background-size: cover;
  background-position: top center;
  background-attachment: fixed;
  position: relative;
  z-index: 1;
}

p, h1, h2, h3, h4, h5, h6, table, ul {
  position: relative;
  z-index: 5;
  margin: 20px auto;
  max-width: 800px;
}

/* Bee Forage Map Code */

.content {
  padding: 20px;
  max-width: none;
}

#map {
  height: 70vh;
  width: 100vw;
  position: relative;
  margin: 20px -20px;
}

#search {
  width: 300px;
  padding: 10px;
  font-size: 16px;
}

.info {
  background: #fff;
  padding: 15px;
  border-radius: 5px;
  margin: 10px 0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

div .info-1 {
  display: flex;
  align-items: center;
  gap: 15px;
}

.info-left {
  margin-left: 0 !important;
  margin-right: auto !important;
  max-width: none !important;
  width: 100% !important;
}

.info-left .info-text h3,
.info-left .info-text p {
  margin-left: 0 !important;
  margin-right: auto !important;
  max-width: none !important;
  text-align: left !important;
  width: 100% !important;
}

.english-bar {
  background: #4CAF50;
  color: white;
  padding: 15px;
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 20px;
  border-radius: 5px;
}

h1.map-h1 {
  margin: 20px 0 !important;
  max-width: none !important;
  text-align: left !important;        /* ← LEFT side instead of right */
  padding-left: 10px !important;      /* ← LEFT padding instead of right */
  width: 100% !important;
  display: block !important;
}

.bee-warning {
  background-color: #fff3cd; /* soft orange/yellow */
  color: #856404; /* dark amber text */
  padding: 12px 20px;
  border-left: 6px solid #ffcc00;   /* left accent */
  border-right: 6px solid #ffcc00;  /* right accent */
  border-radius: 6px;
  font-size: 16px;
  font-family: Arial, sans-serif;
  margin: 10px 0; /* space above and below */
  text-align: center;
}

.bee-warning a {
  color: #856404;
  font-weight: bold;
  text-decoration: underline;
}

/* Affiliation page */

.affiliation-link {
  display: flex;
  position: relative;
  background-color: #fff3cd;
  color: #856404;
  padding: 20px 25px;
  border-left: 6px solid #ffcc00;
  border-radius: 20px;
  font-size: 18px;
  font-family: Arial, sans-serif;
  margin: 30px auto;
  max-width: 750px;
  height: 120px;
  overflow: hidden;
  cursor: pointer;
}

.affiliation-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 100%;
  background-color: #ffcc00;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  z-index: 2;
}

.affiliation-link a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
  z-index: 3;
  display: flex;
  align-items: center;
  padding-left: 20px;
  font-size: 18px;
  font-family: inherit;
  transform: translateY(-25px);
}

.affiliation-link img {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 20px 20px 0;
  z-index: 1;
}

.affiliation-description {
  position: absolute;
  left: 20px;              /* same as link’s padding-left */
  top: 50px;               /* sits neatly below the title */
  font-size: 14px;
  color: #a27a03;
  width: 45%;
  line-height: 1.4;
  z-index: 5;
  background: transparent;
  pointer-events: none;
}

.affiliation-text a {
  font-weight: bold;
}

/* Contact Page */

.social-title {
  text-align: center;
  text-decoration: underline;
  text-decoration-color: orange;
  text-decoration-thickness: 5px;
}

/* links at bottom page */

.black-box {
  padding: 30px;
  background-color: navy;
  text-align: left;
}

.white-text {
  color: white;
  padding-right: 10px;
  padding-left: 10px;
}

.separator-line {
  width: 100%;           /* Full width of content area */
  height: 2px;
  background-color: white;
  border: none;
  margin: 20px -50px;    /* Negative margins push it to container edges */
}

.not-centered-text {
  text-align: left;
  margin: 20px 20px 0px 10px;
  color: white;
}

/* FAQ page */

/* Main FAQ container */
.faq {
  max-width: 700px;          /* Limits width so it doesn’t stretch too wide */
  margin: 0 auto;  /* Centers the FAQ on the page */
}

/* Each collapsible item */
details {
  background: #f8f8f8;       /* Light gray background */
  margin-bottom: 10px;       /* Space between questions */
  border-radius: 6px;        /* Rounded corners */
  padding: 10px 15px;        /* Inner spacing */
  border: 1px solid #ddd;    /* Subtle border */
  transition: 0.3s ease;     /* Smooth hover effect */
}

/* Hover effect */
details:hover {
  background: #fff;       /* Slightly darker when hovering */
}

/* Question text (clickable part) */
summary {
  font-weight: bold;         /* Makes question bold */
  cursor: pointer;           /* Changes mouse to pointer */
  list-style: none;          /* Removes default arrow (we add custom one below) */
}

/* Remove default triangle in some browsers */
summary::-webkit-details-marker {
  display: none;
}

/* Add custom arrow before question */
summary::before {
  content: "▶";              /* Arrow icon */
  margin-right: 8px;         /* Space between arrow and text */
  transition: 0.3s;          /* Smooth rotation */
}

/* Rotate arrow when open */
details[open] summary::before {
  transform: rotate(90deg);  /* Rotates arrow downward */
}

/* Answer paragraph */
details p {
  margin-top: 10px;          /* Space between question and answer */
  line-height: 1.6;          /* Improves readability */
}

.faq-section {
  display: none;
}

.faq-section.active {
  display: block;
}

.faq-categories {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-bottom: 40px;
}

.faq-tab {
  padding: 10px 22px;
  border-radius: 25px;
  background: #eee;
  border: none;
  cursor: pointer;
  font-weight: 600;
  transition: 0.3s;
}

.faq-tab.active {
  background: #f4c542;
}

.faq-centered {
  text-align: center;
  text-decoration-line: underline;
  text-decoration-color: orange;
  text-decoration-thickness: 5px;
  text-underline-offset: 4px;
  text-decoration-skip-ink: none;
}

.contact-page-bottom {
  padding: 114px;
}

.faq-contact-link {
  text-align: center;
  padding: 50px;
  background-color: skyblue;
  border: 6px solid orange;
  border-radius: 12px;
}

.margin-1 {
  margin-bottom: 31px;
}

.margin-3 {
  margin-bottom: 31px;
}

.margin-5 {
  margin-bottom: 134px;
}

.faq-contact-link a::hover {
  color: blue;
}

.faq-contact-link a:focus {
  color: blue;
}

/* Disable scrolling for Bees and Safety pages */
#bees.active,
#safety.active {
  max-height: 100vh;  /* Prevent content from exceeding viewport height */
  overflow: hidden;   /* Hide overflowing content */
}

@media screen and (min-width: 768px) and (max-width: 1024px) {

  #sticky-nav {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
  }

  #sticky-nav img {
    width: 90px;
    margin: 0;
    transform: none;
  }

  #sticky-nav a {
    margin: 8px;
    font-size: 15px;
  }

  #div-2 {
    max-width: 95%;
    left: 0;
    transform: none;
    padding: 20px;
  }

  .centered-images {
    display: block;
    width: 100%;
    max-width: 450px;
    height: auto;
    margin: 20px auto;
  }

  .hero-image {
    height: 350px;
    background-attachment: scroll;
  }

  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  table,
  ul {
    max-width: 90%;
  }

  #table-1,
  #table-2,
  #table-3,
  #table-4 {
    width: 100%;
  }

  #map {
    width: 100%;
    margin: 20px 0;
    height: 60vh;
  }

  #search {
    width: 100%;
    max-width: 350px;
  }

  .affiliation-link {
    max-width: 95%;
  }

  .affiliation-description {
    width: 40%;
  }

  .faq {
    width: 95%;
  }

  .faq-categories {
    flex-wrap: wrap;
    gap: 10px;
  }

  .contact-page-bottom {
    padding: 60px;
  }

}

@media screen and (max-width: 767px) {
  #sticky-nav {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15px;
    flex-wrap: nowrap;
  }

  #sticky-nav img {
    width: 80px;
    margin-bottom: 15px;
    transform: none;
  }

  #sticky-nav a {
    display: block;
    margin: 8px 0;
    font-size: 15px;
  }

  #div-2 {
    max-width: none;
    box-sizing: border-box;

    left: 0;
    transform: none;
    padding: 15px;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 12px;
  }

  .centered-images {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 20px auto;
  }

  .hero-image {
    height: 240px;
    background-attachment: scroll;
    background-position: center;
  }

  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  table,
  ul {
    width: 95%;
    max-width: none;
  }

  #table-1,
  #table-2,
  #table-3,
  #table-4 {
    width: 100%;
    font-size: 14px;
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  #map {
    width: 100%;
    height: 50vh;
    margin: 20px 0;
  }

  #search {
    width: 100%;
    box-sizing: border-box;
  }

  div .info-1 {
    flex-direction: column;
    align-items: flex-start;
  }

  .affiliation-link {
    display: block;
    height: auto;
    max-width: 95%;
    padding: 20px;
    overflow: visible;
  }

  .affiliation-link img {
    position: static;
    width: 100%;
    height: 180px;
    border-radius: 12px;
    margin-top: 20px;
  }

  .affiliation-link a {
    position: static;
    transform: none;
    display: block;
    padding: 0;
    margin-bottom: 15px;
  }

  .affiliation-description {
    position: static;
    width: 100%;
    margin-top: 10px;
  }

  .faq {
    width: 95%;
  }

  .faq-categories {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .faq-tab {
    width: 100%;
  }

  .contact-page-bottom {
    padding: 30px;
  }

  .faq-contact-link {
    padding: 25px;
  }

  .black-box {
    padding: 20px;
  }

  .separator-line {
    margin: 20px 0;
  }

}