@import url("https://fonts.googleapis.com/css2?family=Avenir+Next:wght@400;500;600;700&display=swap");
.header {
     width: 100%;
     height: 80px;
     /* Matches the rendered shade of the frosted dark pills on the home page */
     background-color: #161616;
     font-family:
          "Avenir Next",
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          Roboto,
          sans-serif;
     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
     position: fixed;
     top: 0;
     left: 0;
     z-index: 1000;
}
.header__content {
     display: flex;
     align-items: center;
     height: 100%;
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 20px;
}
.header__logo {
     display: flex;
     align-items: center;
     margin-right: 60px;
}
/* Placeholder holding the space the lab logo will occupy. Painted the same
   shade as .header above so it reads as empty header, not a missing image.
   Replace the div with an <img> once real artwork exists. */
.header__logo-circle {
     width: 60px;
     height: 60px;
     background: #161616;
     box-sizing: border-box;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-right: 20px;
}
.header__logo-text h1 {
     font-size: 28px;
     font-weight: 600;
     color: #fff;
     margin: 0;
     line-height: 1.2;
}
.header__logo-text .subtitle {
     font-size: 18px;
     color: #b9b9b9;
     margin: 0;
     font-weight: 400;
}
.header__nav {
     display: flex;
     align-items: center;
     flex-grow: 1;
}
.header__nav-list {
     display: flex;
     list-style: none;
     margin: 0;
     padding: 0;
     gap: 30px;
}
.header__nav-list li {
     position: relative;
}
.header__nav-list a {
     text-decoration: none;
     color: #e8e8e8;
     font-size: 18px;
     font-weight: 500;
     padding: 8px 16px;
     border-radius: 8px;
     transition: all 0.3s ease;
     display: flex;
     align-items: center;
}

/* Icon (either inline SVG or image path) placed to the left of text */
.nav-icon,
.header__nav-list a .nav-icon {
     margin-right: 12px;
     flex-shrink: 0;
     display: inline-block;
     vertical-align: middle;
     width: 20px;
     height: 20px;
}
/* Force icon artwork to white so dark-filled SVGs stay legible on the dark bar */
.header__nav-list a .nav-icon {
     filter: brightness(0) invert(1);
}
.header__nav-list a:hover {
     background-color: rgba(255, 255, 255, 0.14);
     color: #fff;
     transform: translateY(-2px);
}
.header__join-button {
     margin-left: auto;
}
.header__join-button .join-btn {
     background-color: #ff6b6b;
     color: white;
     padding: 12px 24px;
     border: none;
     border-radius: 8px;
     font-size: 16px;
     font-weight: 600;
     font-family: "Avenir Next", sans-serif;
     cursor: pointer;
     transition: all 0.3s ease;
     text-decoration: none;
     display: flex;
     align-items: center;
     justify-content: center;
}

.header__join-button .join-btn .nav-icon {
     margin-right: 12px;
     flex-shrink: 0;
}
.header__join-button .join-btn:hover {
     background-color: #ff5252;
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
}
.header__join-button .join-btn:active {
     transform: translateY(0);
}

/* Mobile Menu Toggle */
.header__toggle {
     display: none;
     flex-direction: column;
     cursor: pointer;
     gap: 5px;
     z-index: 1001;
     padding: 10px;
}

.header__toggle span {
     width: 25px;
     height: 3px;
     background-color: #e8e8e8;
     transition: all 0.3s ease;
     border-radius: 2px;
}

/* Animation for hamburger to X */
.header__toggle.active span:nth-child(1) {
     transform: rotate(45deg) translate(5px, 6px);
}

.header__toggle.active span:nth-child(2) {
     opacity: 0;
}

.header__toggle.active span:nth-child(3) {
     transform: rotate(-45deg) translate(5px, -6px);
}

@media (max-width: 768px) {
     .header__content {
          padding: 0 15px;
          justify-content: space-between;
     }
     .header__logo {
          margin-right: auto; /* Allow logo to take available space */
     }
     .header__logo-circle {
          width: 40px;
          height: 40px;
          margin-right: 10px;
     }
     .header__logo-text h1 {
          font-size: 20px;
     }
     .header__logo-text .subtitle {
          font-size: 12px;
     }
     
     .header__toggle {
          display: flex;
          margin-left: 15px;
     }

     .header__nav {
          position: fixed;
          top: 80px;
          left: 0;
          width: 100%;
          background-color: #161616;
          flex-direction: column;
          padding: 0;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.3s ease-out;
          display: block; /* Override flex */
     }

     .header__nav.active {
          max-height: 400px; /* Adjust based on content */
     }

     .header__nav-list {
          flex-direction: column;
          gap: 0;
          width: 100%;
     }

     .header__nav-list li {
          width: 100%;
          text-align: center;
     }

     .header__nav-list a {
          padding: 15px;
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
          border-radius: 0;
          width: 100%;
          box-sizing: border-box;
     }

     .header__join-button {
          display: none; /* Hide from header strip */
     }
}
.main-content {
     margin-top: 80px;
     padding: 20px;
}

.container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 20px;
}

html {
     scroll-behavior: smooth;
}

/* Site footer
   Shared by every page so the required Accessibility link (and the contact
   details beside it) cannot drift between them. Dark band matching the
   header, which reads correctly on both the black home page and the light
   research/about/publications pages. */
.footer {
     background: #161616;
     color: #fff;
     padding: 3rem 6vw 2rem;
     font-family:
          "Avenir Next",
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          Roboto,
          sans-serif;
}

.footer-container {
     max-width: 1200px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 2rem;
}

.footer-section h3 {
     margin-bottom: 1rem;
     color: #fff;
}

.footer-section p,
.footer-section a {
     color: #ccc;
     text-decoration: none;
     margin-bottom: 0.5rem;
     display: block;
}

.footer-section a:hover {
     color: #fff;
}

.footer-bottom {
     max-width: 1200px;
     margin: 2rem auto 0;
     padding-top: 2rem;
     border-top: 1px solid #333;
     text-align: center;
     color: #888;
}

.footer-bottom a {
     color: #ccc;
     text-decoration: none;
}

.footer-bottom a:hover {
     color: #fff;
     text-decoration: underline;
}

.footer-bottom .footer-sep {
     margin: 0 0.5rem;
     color: #555;
}

@media (max-width: 768px) {
     .footer-container {
          grid-template-columns: 1fr;
          text-align: center;
     }
}

/*# sourceMappingURL=header.css.map */