/* ======================================== Global Variables ====================================== */

:root{
  --background: #3b4a3f;
  --cool-card: #e5d5c8;
  --text: #2c241d;
  --warm-card: #e6d5b8;
  --light-text: #f3eee7;
  --muted-text: #6b6b6b;
  --muted: #6a5c4e;
  --content-text-cool: #2a261f;
  --content-text-warm: #2c241d;
  --accent-text: #f0e5d8;
  --menu: #7da288;
  --sidebar: #0f1210;
  --green-link: #7da288;
  --blue-link: #1a73e8;
  --description-link: #ffe0cc;
  --maxw: 1200px;
  --radius: 16px;
  --shadow: 0 10px 24px rgba(0,0,0,.18);
  --navbar-offset: 72px;
  
  /* Jewel tones */
  --j-green: #009c7e;
  --j-plum: #754f72;
  --j-maroon: #952c42;
  --j-navy: #434c71;
  --j-copper: #c5925f;

  /* Lighter jewel variations */
  --j-green-light: #4dd7c3;
  --j-plum-light: #a888a5;
  --j-maroon-light: #d26a82;
  --j-navy-light: #7e88b6;
  --j-copper-light: #e0b88e;

  --star-top: 140px;
}

*{box-sizing: border-box}

/* ======================= Page Style ======================= */

body{
  margin: 0;
  position: relative;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: var(--background);
  color: var(--cool-card);

  line-height: 1.6;
  overflow-x: hidden; /* keep background from causing scroll */
  min-height: 100%;
  
  scroll-behavior: smooth;
}

.wrap{
  max-width: var(--maxw);
  margin: 32px auto;
  padding: 0 16px;
}

.page-wrap{
  max-width: var(--maxw);
  margin: calc(var(--navbar-offset) + 24px) auto 80px;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
}

/* back-to-top button */
.back-to-top{
  display: none;                     /* shown via JS past ~300px scroll */
  position: fixed; 
  right: 16px; 
  bottom: 16px; 
  z-index: 1000;
  padding: 12px 14px; 
  border-radius: 6px; 
  border: 0; 
  cursor: pointer;
  font-weight: 700;
  background: linear-gradient(
    135deg,
    var(--j-copper, #c5925f),
    var(--j-plum, #754f72)
  );
  color: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,.30);
  transition: filter .2s ease, transform .2s ease;
}
.back-to-top:hover{ filter: brightness(1.05); transform: translateY(-1px); }
.back-to-top:focus-visible{
  outline: 3px solid #fff; 
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(0,0,0,.35), 0 10px 28px rgba(0,0,0,.30);
}
/* Optional: honor reduced motion */
@media (prefers-reduced-motion: reduce){
  .back-to-top{ transition:none; }
}

/* CALLOUT */
.bd-callout {
  padding: 1.25rem;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid #e9ecef;
  border-left-width: 0.25rem;
  border-radius: 0.25rem;
}
.bd-callout h4 { margin-bottom: 0.25rem; }
.bd-callout p:last-child { margin-bottom: 0; }
.bd-callout code { border-radius: 0.25rem; }
.bd-callout + .bd-callout { margin-top: -0.25rem; }
.bd-callout-info { border-left-color: #5bc0de; }
.bd-callout-warning { border-left-color: #f0ad4e; }
.bd-callout-danger { border-left-color: #d9534f; }

header .bg-hero {
  position: relative;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 0 !important; /* remove the dark green strip */
  min-height: 275px;            /* restore banner height */
  padding: 100px 0;             /* vertical spacing inside banner */
}

/* ======================= Content Style ======================= */

.text {
  flex: 1;
  font-weight: bold;
  font-size: 1.2em;
  padding: 10px;
}

.description-link {
  font-size: 1.1em;
  color: var(--description-link);
  text-decoration: none;
  font-weight: bold;
}
.description-link:hover { text-decoration: underline; }

.image {
  flex: 1;
  padding: 10px;
  text-align: center;
}
.image img {
  max-width: 100%;
  height: auto;
}

/* content alignment */
.centered {
  text-align: center;
  margin-top: 40px;
}

.left-aligned {
  margin-left: auto;
}

.anchor-offset{
  scroll-margin-top: calc(var(--navbar-offset) + 24px);
}

/* Content cards */
.cardish{
  background: var(--cool-card);
  color: var(--text);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
  margin-bottom: 28px;
}
.cardish h2{
  margin: 0 0 12px;
  font-weight: 800;
}
.muted{ color: var(--muted) }

/* Optional: Fade-in animation */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s ease-out forwards;
}
@keyframes fadeInUp {
  to { opacity: 1; transform: none; }
}

/* ======================= Menu and Sidemenu ======================= */

/* Navbar */
.custom-navbar {
  background-color: var(--menu) !important;
  overflow: visible !important;

  /* ensure it doesn't pin to the top; it will sit where it's placed */
  position: static !important;
}

/* dropdown colors */
.dropdown-menu { 
  background-color: #E5D5C8; 
  border: none; 
  box-shadow: 0 18px 40px rgba(0,0,0,.24)
}
.dropdown-item { color: #2c241d; }
.dropdown-item:hover { background-color: #7DA288; color: #fff;}

/* make the hamburger visible on green background */
.navbar .navbar-toggler { border-color: rgba(255,255,255,.55); }
.navbar .navbar-toggler-icon { filter: invert(1) grayscale(1); }

/* LOGO - Independent sizing */
.navbar-brand {
  padding: 0 !important;
  position: relative;
  height: auto !important;
  display: inline-block;
  align-items: center;
  background-color: #ffffff;
  border-radius: 6px;
  line-height: 0;
  margin-top: 0px;
  margin-bottom: 0px;
}  
.navbar-brand img {
  height: 100px !important;  /* Make logo as big as you want */
  width: auto;
  display: block;
  position: relative;
  margin: 0;
}

/* RIGHT-align nav items (desktop & mobile when expanded) */
.navbar-nav {
  margin-left: auto;   /* push list to the right */
  text-align: left;    /* keep dropdown text aligned left */
  gap: 24px;           /* spacing between top-level items */
}

/* bigger menu text + spacing */
.nav-link {
  font-size: 1.2rem;   /* bigger text */
  font-weight: 600;    /* bold */
  padding: 0.25rem 0.25rem;
  white-space: nowrap;
  line-height: 1.2;
}

/* OPEN DROPDOWNS ON HOVER (desktop only) */
@media (min-width: 768px){
  .navbar .dropdown:hover > .dropdown-menu,
  .navbar .dropdown:focus-within > .dropdown-menu {
    display: block;
    margin-top: 0;
  }
  /* keep toggle styled as active when menu is visible via hover */
  .navbar .dropdown:hover > .nav-link,
  .navbar .dropdown:focus-within > .nav-link {
    color: #fff;
  }
}

.bg-hero {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

/* Sidebar */
.side{
  position: sticky;
  top: calc(var(--navbar-offset) + 16px);
  align-self: start;
  background: rgba(15,18,16,.7);
  backdrop-filter: blur(6px);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}
.side .nav-link{
  color: #cfe3d3;
  border-radius: 10px;
  padding: .55rem .75rem;
  font-weight: 600;
}
.side .nav-link:hover{ 
  background: rgba(255,255,255,.07); 
  color: #fff; 
}
.side .nav-link.active{
  background: var(--link);
  color: #0b1a12;
}
.side .section-title{
  color: #9fb7a3;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 6px 12px 8px;
}

/* Mobile */
@media (max-width: 992px){
  .page-wrap{ grid-template-columns: 1fr; }
  .side{ position: static; }
  .side-toggle{
    display: flex; 
    gap: 8px; 
    align-items: center; 
    justify-content: space-between;
    background: var(--sidebar);
    color: #e8f1ea; 
    border-radius: var(--radius); 
    padding: 12px 14px; 
    margin-bottom: 12px;
  }
  .side .nav{ display: none; }
  .side.open .nav{ display: block; }
}

/* ======================= Footer ======================= */

footer a {
  color: white;
  font-weight: bold;
  text-decoration: none;
}
footer a:hover {
  color: white;
  text-decoration: underline;
}

/* Sponsor grid */
.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: center;
  justify-items: center;
}
@media (max-width: 768px) {
  .sponsor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sponsor-grid a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  background: rgba(255,255,255,0.06);
  border-radius: 12px;
  transition: transform .15s ease, background .2s ease, filter .2s ease;
}
.sponsor-grid a:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.12);
}
.sponsor-grid img {
  max-width: 150px;
  max-height: 48px;
  width: auto;
  height: auto;
  filter: brightness(0) invert(1);
}
.sponsor-grid a:hover img { filter: none; }

.visually-hidden {
  position: absolute !important; 
  height: 1px; 
  width: 1px; 
  overflow: hidden;
  clip: rect(1px,1px,1px,1px); 
  white-space: nowrap;
}

/* ======================= Home ======================= */

/* --- HOMEPAGE FIXES (scoped to #home) --- */
#home {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 24px 96px;
}
#home .row {
  display: grid !important;
  grid-template-columns: minmax(360px,1fr) minmax(360px,1fr);
  gap: 32px;
  align-items: center;
  justify-content: center;
  margin: 32px auto 0;
  width: 100%;
  max-width: 1160px;
}
@media (max-width: 860px){
  #home .row { grid-template-columns: 1fr; }
}
#home .bigtext,
#home .how,
#home .goal,
#home .video,
#home .links {
  max-width: 1160px;
  margin: 32px auto 0;
}
#home .video .frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 12px;
}
#home .video iframe,
#home .video video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
}

/* Read-more pattern */
.readmore-card { position: relative; }
.readmore-content {
  overflow: hidden;
  transition: max-height .35s ease;
}

/* soft fade at the bottom when collapsed */
.readmore-fade {
  position: absolute;
  left: 0; right: 0;
  height: 80px;
  bottom: 56px; /* space for button */
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(229,213,200,0),
    rgba(229,213,200,1)
  );
}

.readmore-fade.use-var {
  background: linear-gradient(
    to bottom,
    color(from var(--cool-card) srgb r g b / 0),
    var(--cool-card)
  );
}
.readmore-hidden { display: none !important; }


/* ======================= Members ======================= */

/* Page heading — solid cream text, untouched background */
.page-heading{
  position: relative;
  z-index: 2; /* above stars */
  margin: 0;
  padding: 40px 16px 10px;
  text-align: center;
  font-weight: 800;
  color: var(--cool-card);
  background: transparent;
  font-size: clamp(32px, 6vw, 56px);
}

.section-title{
  position: relative;
  z-index: 2; /* above stars */
  font-size: 24px;
  text-align: center;
  margin: 40px auto 10px;
  color: var(--cool-card);
  max-width: var(--maxw);
}

/* Captains */
.captains-grid{
  display: flex;
  justify-content: center;
  gap: 30px;
  padding: 30px 0;
  max-width: 800px;
  margin: 0 auto;
  flex-wrap: wrap;
}

/* Members */
.member-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 240px)); /* fixed tracks preserve rows */
  justify-content: center;
  gap: 30px;
  padding: 40px 0;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2; /* above stars */
}

/* Cards */
.member-card{
  width: 240px;
  height: 320px;
  overflow: hidden;
  position: relative;
  z-index: 3; /* ensure cards are above everything */
  border-radius: 12px;
  background-color: var(--cool-card);
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
  cursor: pointer;
  transition: transform .3s ease;
}
.member-card:hover{ transform: translateY(-2px); }

.card-content{
  position: absolute; 
  inset: 0;
  height: 300%; /* 3 stacked panels */
  transition: transform .45s ease;
  display: flex; 
  flex-direction: column;
}
.card-front,
.card-back,
.card-funny{
  width: 100%;
  height: calc(100%/3);
  padding: 10px 12px;
  text-align: center;
  display: flex; 
  flex-direction: column; 
  align-items: center;
  background: var(--cool-card);
}
.card-front img,
.card-funny img funny-photo{
  width: 100%; 
  height: 200px; 
  object-fit: cover; 
  border-radius: 8px;
}
.card-front strong{ 
  display: block; 
  margin-top: 10px; 
  color: #1e4b26; 
  font-size: 16px 
}
.card-front .role{ font-size: 13px; color: #555 }
.card-back{ 
  color: #333; 
  padding: 14px 14px 8px; 
  line-height: 1.25; 
  font-size: 14px; 
  justify-content: center;
}
.card-funny{
  gap: 8px; 
  padding: 10px 12px 8px; 
  justify-content: flex-start;
}

.linkedin-link{ margin-top: 8px; display: inline-block }
.linkedin-icon{ 
  width: 28px; 
  height: 28px; 
  display: block; 
  object-fit: contain; 
  border-radius: 4px; 
  transition: transform .2s ease 
}
.linkedin-icon:hover{ transform: scale(1.15) }

.panel-arrow{ 
  margin-top: auto; 
  font-size: 18px; 
  color: #888; 
  animation: bounce 2s infinite; 
  user-select: none
}

@keyframes bounce{ 0%,100%{transform: translateY(0)} 50%{transform: translateY(4px)} }

/* ===== FULL-WIDTH STARFIELD BACKGROUND (behind all content) ===== */
#starfield{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  top: var(--star-top); /* set by JS to be just below the header */
  z-index: 0;           /* stays behind everything */
  pointer-events: none; /* never block clicks */
  overflow: hidden;
}

.star{
  position: absolute;
  width: 28px; height: 28px;
  background: linear-gradient(135deg,var(--j-plum),var(--j-maroon) 35%,var(--j-navy) 68%,var(--j-green));
  clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
  animation: twinkle 2.6s infinite alternate;
  opacity:.9;
}
.star.s{ width:18px; height:18px }
.star.m{ width:24px; height:24px }
.star.l{ width:34px; height:34px }

.star.light-green{  background: linear-gradient(135deg, var(--j-green-light),  #c9f6ee) }
.star.light-plum{   background: linear-gradient(135deg, var(--j-plum-light),   #eed8ea) }
.star.light-maroon{ background: linear-gradient(135deg, var(--j-maroon-light), #f4d1db) }
.star.light-navy{   background: linear-gradient(135deg, var(--j-navy-light),   #dfe5fb) }
.star.light-copper{ background: linear-gradient(135deg, var(--j-copper-light), #f3e3ce) }

@keyframes twinkle{
  from{ opacity:.6; transform:scale(.88) rotate(0deg) }
  to{   opacity:1;  transform:scale(1.12) rotate(180deg) }
}

/* Random-ish animation delays for variety */
.star:nth-child(odd){ animation-delay:.15s }
.star:nth-child(3n){ animation-delay:.35s }
.star:nth-child(5n){ animation-delay:.6s }

@media (max-width: 900px){
  #starfield{ display:none; }
}

html { background: var(--background); }
body { background: transparent; }
#starfield { z-index: -1; }

/* ===== Appear on scroll ===== */
.reveal{ 
  opacity: 0; 
  transform: translateY(18px) scale(.98); 
  filter: saturate(.9); 
}
.reveal.in{ opacity:1; transform:none; filter:none; transition: opacity .5s ease, transform .5s ease, filter .5s ease; }
.stagger > *{ opacity:0; transform: translateY(14px); }
.stagger.in > *{
  opacity:1; transform:none; transition: opacity .4s ease, transform .4s ease;
}
.stagger.in > *:nth-child(1){ transition-delay:.02s }
.stagger.in > *:nth-child(2){ transition-delay:.08s }
.stagger.in > *:nth-child(3){ transition-delay:.14s }
.stagger.in > *:nth-child(4){ transition-delay:.20s }
.stagger.in > *:nth-child(5){ transition-delay:.26s }

@media (prefers-reduced-motion: reduce){
  .reveal,.stagger > *{ opacity:1 !important; transform:none !important; filter:none !important; }
  .reveal.in,.stagger.in > *{ transition:none !important; }
  .blob{ display:none }
  .card::before{ animation: none }
}

/* ======================= Human Practices ======================= */

/* Make the stakeholder card form a stacking context */
.stakeholder {
  position: relative;
  z-index: 1;
}
.stakeholder .readmore-card {	      /* The collapsible area must be an opaque, clipping box */
  background: var(--card, #E5D5C8);   /* same cream as the card */
  border-radius: 14px;
  overflow: hidden;                   /* <-- clips hidden text */
  padding: 0 22px 16px;               /* optional: match your inner spacing */
}
.stakeholder .readmore-content {      /* Belt-and-suspenders: also clip the inner content */
  position: relative;
  overflow: hidden;
  transition: max-height .35s ease;
}
.stakeholder .readmore-fade {         /* Fade must blend with the same background as above */
  position: absolute;
  left: 0; right: 0;
  height: 80px;
  bottom: 56px;                       /* room for button */
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(229,213,200,0),
    var(--cool-card, #E5D5C8)
  );
}
.stakeholder .readmore-card{ /* --- Read-more inside .stakeholder: blend with parent gradient --- */
  background: transparent;   /* remove inner cream box */
  padding: 0;                /* let .stakeholder-content handle spacing */
  position: relative;
}
.stakeholder .readmore-content{
  overflow: hidden;          /* this does the clipping */
  transition: max-height .35s ease;
}
.stakeholder .readmore-fade{ /* fade from transparent -> very slight opaque to avoid hard edge */
  position: absolute;
  left: 0; right: 0;
  height: 80px;
  bottom: 56px;              /* room for the button */
  pointer-events: none;
  background: linear-gradient(/* blend with the parent's gradient; do NOT use a solid color */
    to bottom,
    rgba(237,226,215,0),     /* top color of your card gradient, transparent */
    rgba(229,213,200,0.96)   /* bottom color of your card gradient, ~opaque */
  );
  border-bottom-left-radius: 18px;  /* match the card bottom corners so the fade doesn't look like a strip */
  border-bottom-right-radius: 18px;   
}
.stakeholder .readmore-card .mt-3{ /* optional: keep the button from hugging the rounded edge */
  padding: 0 22px 12px;
}

/* ======================= Bioethics ======================= */

/* ---------- HERO ---------- */
.hero{
  background:
    radial-gradient(1200px 420px at -6% 0%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 42%),
    var(--brandGrad);
  color: #E6D7C8;
  padding: 32px 0 24px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.hero .inner{
  max-width: var(--maxw); 
  margin: 0 auto;
  padding:0 18px
}
.badge{display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(2px);
  font-weight:700
}
.hero h1{margin:12px 0 8px;font-size:40px;line-height:1.1;letter-spacing:.01em}
.hero p{max-width:920px;margin:10px 0 0;font-size:1.05rem;line-height:1.6;color:#fff9f1}

/* ---------- STICKY QUICK-NAV ---------- */
.quicknav{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(150%) blur(8px);
  background:linear-gradient(180deg,rgba(229,213,200,.96),rgba(229,213,200,.92));
  border-bottom:1px solid rgba(0,0,0,.08);
}
.quicknav .inner{
  max-width:none; width:100%; margin:0;
  display:flex; gap:10px; overflow:auto; padding:10px 18px;
}
.pill{
  flex:0 0 auto; padding:10px 14px; border-radius:999px;
  background:#fff4ea; color:#271f18; font-weight:700; text-decoration:none;
  border:1px solid #e0cdbb; transition:transform .08s ease, background .2s ease;
}
.pill:hover{transform:translateY(-1px)}
.pill.active{outline:2px solid #d1bca7;background:#ffffff}

/* ---------- SINGLE-COLUMN LAYOUT ---------- */
.wrap{max-width:var(--maxw);margin:24px auto 120px;padding:0 18px}