:root{
  --igem-bg: rgba(209, 250, 229, 0.90);      /* deeper mint glass */
  --igem-stroke: rgba(13, 148, 136, 0.35);   /* stronger turquoise border */
  --igem-shadow: 0 8px 30px rgba(16,24,40,.08);
  --igem-text: #0f172a;                       /* deep slate for contrast */
  --igem-accent: #0d9488;                     /* primary: deeper teal */
  --igem-accent-weak: rgba(13, 148, 136, 0.24);/* stronger hover */
  --igem-link: #0d9488;                       /* teal links */
  --igem-accent-2: #34d399;                   /* secondary: emerald */
  --igem-accent-2-weak: rgba(52, 211, 153, 0.32);
}

body{ padding-top: 0rem; }

/* Default offset so content is not hidden under fixed navbar */
main{ padding-top: calc(var(--navbar-h, 64px) + 16px); }

/* Exceptions: landing pages handle their own spacing */
.home-landing main, .team-landing main{ padding-top: 0; }

/* Global link color tuned to biology/medical theme */
a{ color: var(--igem-link); }
a:hover, a:focus{ color: #0a7a73; }

/* Framed page titles: green frame, white text */
.title-frame{
  display: inline-block;
  color: #fff;
  border: 2px solid var(--igem-accent);
  border-radius: .75rem;
  padding: .35rem .9rem;
  line-height: 1.1;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}

/* Optional subtle glow on dark/video backgrounds */
.title-frame.glow{
  box-shadow: 0 0 0 4px rgba(16,185,129,.18);
}

/* Green outline around letterforms, keeps white fill */
.text-outline-accent{
  -webkit-text-stroke: 1.25px var(--igem-accent);
  /* Fallback for Firefox and others without text-stroke */
  text-shadow:
    1px 0 0 var(--igem-accent),
    -1px 0 0 var(--igem-accent),
    0 1px 0 var(--igem-accent),
    0 -1px 0 var(--igem-accent);
}

.glass-card{
  background: rgba(255,255,255,.85);
  border: 1px solid var(--igem-stroke);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-radius: 1rem;
  box-shadow: var(--igem-shadow);
  color: var(--igem-text);
}

/* Section titles with subtle accent underline */
.section-title{
  position: relative;
  color: var(--igem-text);
  text-align: center;
}
.section-title::after{
  content: "";
  position: absolute;
  left: 50%; bottom: -0.35rem;
  width: 64px; height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--igem-accent), var(--igem-accent-2));
  transform: translateX(-50%);
}

/* Responsive video frame inside a glass card */
.video-frame{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: .75rem;
  background: #000;
}
.video-frame video, .video-frame iframe{
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  object-fit: cover;
}

/* Center headings by default inside main content */
main h1, main .h1,
main h2, main .h2,
main h3, main .h3{
  text-align: center;
}

.prose h1, .prose .h1,
.prose h2, .prose .h2,
.prose h3, .prose .h3{
  text-align: left;
}

#imageLightbox img{
  max-height: calc(100vh - 120px);
  width: auto;
  margin: 0 auto;
}

/* In-page section navigation for long documents */
.section-nav {
  position: sticky;
  top: 72px; /* below navbar */
  z-index: 1020;
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(160%) blur(8px);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  border: 1px solid var(--igem-stroke);
  border-radius: .85rem;
  padding: .4rem;
  box-shadow: var(--igem-shadow);
}
.section-nav .nav-link{
  color: var(--igem-text);
  border-radius: .65rem;
  padding: .45rem .75rem;
}
.section-nav .nav-link.active,
.section-nav .nav-link:hover,
.section-nav .nav-link:focus{
  background: var(--igem-accent-2-weak);
  color: var(--igem-text);
}

/* Vertical section nav (left sidebar) */
.section-nav-vertical{
  position: sticky;
  top: 84px; /* below navbar */
  z-index: 1020;
  padding: .5rem;
  border: 1px solid var(--igem-stroke);
  border-radius: .85rem;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(160%) blur(8px);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  box-shadow: var(--igem-shadow);
}
.section-nav-vertical .nav-link{
  display: block;
  color: var(--igem-text);
  border-radius: .65rem;
  padding: .5rem .75rem;
  margin: .15rem 0;
  transition: background-color .2s ease, color .2s ease, transform .25s ease;
}
.section-nav-vertical .nav-link:hover,
.section-nav-vertical .nav-link:focus{
  background: var(--igem-accent-2-weak);
  color: var(--igem-text);
}
.section-nav-vertical .nav-link.active{
  background: var(--igem-accent-2-weak);
  box-shadow: inset 3px 0 0 0 var(--igem-accent);
}

/* Section cards inside content */
.section-card{
  background: rgba(255,255,255,.88);
  border: 1px solid var(--igem-stroke);
  border-left: 4px solid var(--igem-accent);
  border-radius: .85rem;
  box-shadow: var(--igem-shadow);
  padding: 1rem 1.25rem;
  margin: 1rem 0;
  scroll-margin-top: 96px; /* anchor offset for sticky nav */
}
.section-card h2{
  text-align: left;
  margin-bottom: .75rem;
}
.section-card h3{
  text-align: left;
}

.lca-figure{
  height: 811px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

@media (max-width: 768px){
  .lca-figure{ height: 530px; }
}

.lca-text{
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 1rem;
}

.table-dark + .table-dark,
.table-dark + tr.table-dark,
tr.table-dark + tr.table-dark{
  border-top: 0!important;
}

.table-dark th,
.table-dark td{
  border-color: #212529!important;
  border-bottom-color: #212529!important;
}

/* Org chart controls overlay */
.orgchart-wrap { background: rgba(255,255,255,.5); }
.org-controls{
  position: absolute;
  top: .5rem;
  right: .5rem;
  display: grid;
  gap: .4rem;
  z-index: 5;
}
.org-controls .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: .65rem;
  border: 1px solid var(--igem-stroke);
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(160%) blur(6px);
  -webkit-backdrop-filter: saturate(160%) blur(6px);
}
.org-controls .btn .ti{ font-size: 1.1rem; }

/* CTA button using the new amber secondary */
.btn-cta{
  --btn-bg: var(--igem-accent);
  --btn-bg-hover: #0d9488; /* darker turquoise */
  --btn-shadow: 0 8px 24px rgba(20, 184, 166, .28);
  background: var(--btn-bg);
  color: #ffffff;
  border: none;
  box-shadow: var(--btn-shadow);
}
.btn-cta:hover, .btn-cta:focus{
  background: var(--btn-bg-hover);
  color: #ffffff;
}
.btn-cta:active{ transform: translateY(1px); }

/* Footer */
.site-footer{
  background: var(--igem-bg);
  border-top: 1px solid var(--igem-stroke);
  box-shadow: 0 -6px 24px rgba(16,24,40,.04);
}
.site-footer .footer-title{
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}
.site-footer .footer-links a{
  color: var(--igem-text);
  opacity: .86;
  text-decoration: none;
}
.site-footer .footer-links a:hover,
.site-footer .footer-links a:focus{
  opacity: 1;
  color: var(--igem-link);
}
.site-footer .footer-sep{ border-color: var(--igem-stroke); opacity: .8; }
.footer-social{
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: .65rem;
  border: 1px solid var(--igem-stroke);
  color: var(--igem-text);
  background: rgba(255,255,255,.85);
}
.footer-social:hover{ color: var(--igem-link); background: rgba(255,255,255,.95); }

.text-balance{
  text-wrap: balance;
}

/* Biosafety page enhancements */
.biosafety-page .biosafety-title{
  background: linear-gradient(90deg, var(--igem-accent), var(--igem-accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.biosafety-page .section-nav-vertical{
  border-left: 4px solid var(--igem-accent);
  background: rgba(255,255,255,.92);
}
.biosafety-page .section-card{
  position: relative;
  border-left: 6px solid var(--igem-accent);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86));
  padding: .85rem 1.1rem;
  margin: .75rem 0;
}
.biosafety-page .section-card::after{
  content: "";
  position: absolute; inset: 0 0 auto auto; width: 120px; height: 120px;
  background: radial-gradient(120px 120px at 100% 0%, rgba(20,184,166,.20), rgba(20,184,166,0));
  border-top-right-radius: .85rem;
  pointer-events: none;
}
.biosafety-page .section-card h2{ display: flex; align-items: center; gap: .5rem; }
.biosafety-page .section-card h2::before{
  content: "";
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--igem-accent);
  box-shadow: 0 0 0 6px var(--igem-accent-2-weak);
}
.biosafety-page .section-card ul li{ margin-bottom: .35rem; }
.biosafety-page .section-card ul li::marker{ color: var(--igem-accent); }

/* Systems Modelling page: similar vertical nav and cards */
.systems-page .section-nav-vertical{
  border-left: 4px solid var(--igem-accent);
  background: rgba(255,255,255,.92);
  border-radius: .85rem;
  padding: .6rem .8rem;
  box-shadow: var(--igem-shadow);
}
.systems-page .section-card{
  position: relative;
  border-left: 6px solid var(--igem-accent);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86));
  padding: .95rem 1.1rem;
  margin: .75rem 0;
  color: var(--igem-text);
}
.systems-page .section-card::after{
  content: "";
  position: absolute; inset: 0 0 auto auto; width: 120px; height: 120px;
  background: radial-gradient(120px 120px at 100% 0%, rgba(20,184,166,.20), rgba(20,184,166,0));
  border-top-right-radius: .85rem;
  pointer-events: none;
}
.systems-page .section-card h2{ display: flex; align-items: center; gap: .5rem; }
.systems-page .section-card ul li{ margin-bottom: .35rem; }
.systems-page .section-card ul li::marker{ color: var(--igem-accent); }

/* Gradient titles on all pages except Home and Team */
body:not(.home-landing):not(.team-landing) .section-title{
  background: linear-gradient(90deg, var(--igem-accent), var(--igem-accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Optional explicit hook for Systems title (same style as biosafety-title) */
.systems-page .systems-title{
  background: linear-gradient(90deg, var(--igem-accent), var(--igem-accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ODS (SDG) block styling */
.ods-scroll .ods-card{
  position: relative;
  margin-inline: auto;
  max-width: min(100%, 1100px);
}

.ods-block .ods-img{
  display: block;
  width: clamp(192px, 68vw, 308px);
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border: 1px solid var(--igem-stroke);
  background: rgba(255,255,255,.9);
  border-radius: .75rem;
}

.ods-img-wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

@media (min-width: 768px){
  .ods-scroll .ods-block{
    min-height: clamp(320px, 38vh, 480px);
    margin-inline: auto;
  }

  .ods-scroll .ods-img-col{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }

  .ods-scroll .ods-text-col{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
  }
}

@media (min-width: 992px){
  .ods-scroll{
    position: relative;
  }

  .ods-scroll .ods-card{
    overflow: visible;
    padding: clamp(2rem, 4vw, 3rem) clamp(2rem, 5vw, 4rem);
  }

  .ods-scroll .ods-block{
    min-height: clamp(420px, 62vh, 560px);
    align-items: stretch;
    max-width: 1040px;
    margin-inline: auto;
  }

  .ods-scroll .ods-img-col{
    position: sticky;
    top: clamp(96px, 15vh, 140px);
    align-self: flex-start;
    z-index: 1;
    padding-inline: clamp(0.5rem, 1.5vw, 1.5rem);
  }

  .ods-scroll .ods-text-col{
    padding: clamp(.75rem, 1.8vw, 1.5rem);
  }

  .ods-block .ods-img{
    width: clamp(268px, 31vw, 404px);
  }
}