/*  Global theme – iGEM Macquarie 2025 “MethaNO”   ★ PATCH 2025-05-15d ★ */
:root{
  --color-primary:#188283;            --color-primary-dark:#0f5752;
  --color-secondary:#88a0b5;
  --color-dark:#2f3539;               --color-dark-90:rgba(47,53,57,.9);
  --color-light:#fff;                 --color-light-80:rgba(243,242,231,.8);
  --radius-lg:.75rem;
  --shadow-sm:0 2px 4px  rgba(0,0,0,.08);
  --shadow-md:0 4px 12px rgba(0,0,0,.12);
  --navbar-height:64px;
}

/* ---------- Base layout ---------- */
html,body{height:100%}
body{
  display:flex;flex-direction:column;min-height:100vh;
  padding-top:var(--navbar-height);
  background:var(--color-light);color:var(--color-dark);
  font-family:"Inter","Helvetica Neue",Arial,sans-serif;
}
.container{flex:1 0 auto}
footer.footer{background:var(--color-dark);flex-shrink:0}
footer.footer a{color:var(--color-secondary)}
footer.footer a:hover{text-decoration:none;color:var(--color-primary)}

/* ---------- Fixed banner ---------- */
#scroll-banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--navbar-height);
  overflow: visible;
  z-index: 1040;
  background: transparent !important;
}

/* remove the teaser strip entirely */
#scroll-banner::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
  background: transparent !important;
}

/* walking mascot icon */
.scroll-icon {
  position: absolute;
  bottom: 8px;
  height: 52px;
  width: auto;
  pointer-events: none;
  transform: translateX(-50%);
  image-rendering: auto;
}

/* slide the nav bar completely up */
#scroll-banner nav {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  transform: translateY(-100%);
  transition: transform .25s ease;
  overflow: visible;
  background: transparent !important;
}

/* slide back down on hover */
#scroll-banner:hover nav {
  transform: translateY(0);
}

#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  width: 0;
  background: var(--color-primary);
  z-index: 1050; /* Must be above everything */
  transition: width 0.1s linear;
}

/* ---------- Hero header ---------- */
header.bg-hero {
  padding-top: 5rem;
  background: none !important; 
  color: #fff;
}

/* ---------- Typography ---------- */
h1,h2,h3,h4,h5,h6{font-weight:700;color:var(--color-dark)}

/* =========================================================================
   Global transparent navbar (site-wide)
   - removes any background/border/shadow on the menu bar on ALL pages
   - keeps dropdown menus solid/legible
   ======================================================================= */
#scroll-banner,
#scroll-banner .navbar,
#igem-navbar,
#igem-navbar .navbar,
.navbar,
.navbar.navbar-expand,
.navbar-light,
.navbar-dark {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* If any template toggles a "solid" class, keep it transparent anyway */
#scroll-banner.banner-solid,
#scroll-banner.banner-solid .navbar,
#igem-navbar.banner-solid,
#igem-navbar.banner-solid .navbar {
  background: transparent !important;
}

/* Make the toggler icon visible on any background */
#scroll-banner .navbar-toggler,
#igem-navbar .navbar-toggler,
.navbar .navbar-toggler { border-color: transparent !important; }
#scroll-banner .navbar-toggler-icon,
#igem-navbar .navbar-toggler-icon,
.navbar .navbar-toggler-icon {
  filter: invert(1) grayscale(100%) contrast(200%);
}

/* Keep dropdowns readable (solid surface with a soft shadow) */
#scroll-banner .dropdown-menu,
#igem-navbar .dropdown-menu,
.navbar .dropdown-menu {
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  margin-top: .5rem;
  font-size: .95rem;
}

/* ---------- Navigation links ---------- */
/* Use a general .navbar scope so it works for both .navbar-light and .navbar-dark */
.navbar .nav-link {
  color: #2f3539; /* Font Colour */
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif; /* font */
  font-size: 1rem;    
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: color 0.2s ease;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active {
  color: #188283; /* hover/active colour */
}

/* ---------- Buttons ---------- */
.btn-primary{
  --bs-btn-bg:var(--color-primary);
  --bs-btn-border-color:var(--color-primary);
  --bs-btn-hover-bg:var(--color-primary-dark);
  --bs-btn-hover-border-color:var(--color-primary-dark);
  --bs-btn-active-bg:var(--color-primary-dark);
  --bs-btn-active-border-color:var(--color-primary-dark);
  --bs-btn-disabled-bg:var(--color-secondary);
  --bs-btn-disabled-border-color:var(--color-secondary);
}

/* ---------- Callouts ---------- */
.bd-callout{
  padding:1.25rem;border-left-width:.4rem;
  border-radius:var(--radius-lg);
  background:#fff;box-shadow:var(--shadow-sm);
}
.bd-callout-info   {border-left-color:var(--color-secondary)}
.bd-callout-warning{border-left-color:#fab95b}
.bd-callout-danger {border-left-color:#e05d57}

/* ---------- Notebook accordions ---------- */
.notebook-accordion .accordion-button{
  background:var(--color-dark-90);color:var(--color-light);
}
.notebook-accordion .accordion-button:not(.collapsed){
  background:var(--color-primary);color:#fff;
}
.notebook-accordion .accordion-body{
  background:var(--color-dark);color:var(--color-light);
}

/* ---------- Utilities ---------- */
.rounded-lg{border-radius:var(--radius-lg)!important}
.shadow-sm {box-shadow:var(--shadow-sm)!important}
.shadow-md {box-shadow:var(--shadow-md)!important}