/* ============================================================
   DARK THEME — palette sampled directly from reference screenshots
   (petase-lab.emergent.host). See conversation for pixel sampling.
   ============================================================ */
:root {
  --bg-page: #0A0A12;      /* page background — near-black navy */
  --bg-panel: #252529;     /* navbar / raised panel background */
  --bg-panel-2: #14141B;   /* slightly darker panel, e.g. dropdowns */
  --text-primary: #C5C5D8; /* headings / body text — cool off-white */
  --text-muted: #8C8C9C;   /* secondary / caption text */
  --border-subtle: #33333d;/* subtle dividing borders on dark bg */

  --accent-cyan: #6BF9FF;      /* primary accent */
  --accent-cyan-dim: #0A2730;  /* cyan tinted background (badges etc.) */
  --accent-purple: #A786F9;    /* secondary accent */
  --accent-purple-dim: #1A142E;
  --accent-amber: #F59E0B;     /* warm accent — used sparingly */
  --accent-amber-dim: #281D11;
  --accent-rust: #C4302B;      /* warm accent — used sparingly */
  --accent-rust-dim: #2A1210;
}

/* --- Custom typefaces ---
   Font files are NOT included here and must be self-hosted (no external CDNs
   are allowed on the iGEM wiki). Place the actual font files at the paths
   referenced below, or update the paths to match wherever you put them.
   IBM Plex Mono: SIL Open Font License, free for web embedding.
     Official source: https://github.com/IBM/plex
   Audiowide: SIL Open Font License, free for web embedding.
     Official source: https://fonts.google.com/specimen/Audiowide
*/
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/IBMPlexMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/IBMPlexMono-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Audiowide';
  src: url('fonts/Audiowide-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  background-color: var(--bg-page);
  color: var(--text-primary);
}

h1, h2 {
  font-family: 'Audiowide', 'IBM Plex Mono', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
}

body { padding-top: 56px; }
.left-aligned { margin-left: auto; }

/* Navbar + hero banner both use the dark panel color now, replacing the
   old light-navbar / green-hero look. */
.bg-dark { background-color: var(--bg-panel) !important; }
.bg-hero { background-color: var(--bg-panel); }

/* Body-copy links get the cyan accent. Nav links / dropdown items are more
   specific selectors and keep Bootstrap's navbar-dark treatment untouched. */
a { color: var(--accent-cyan); }
a:hover { color: var(--accent-cyan); text-decoration: underline; }

/* Dropdown menus default to a light Bootstrap background — override for
   the dark theme so they don't flash white against everything else. */
.dropdown-menu {
  background-color: var(--bg-panel-2);
  border-color: var(--border-subtle);
}
.dropdown-item {
  color: var(--text-primary);
}
.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--bg-panel);
  color: var(--accent-cyan);
}

/* Muted/secondary text utility, matches Bootstrap's .text-white-50 usage
   in header leads but tuned for the dark palette. */
.text-white-50 { color: var(--text-muted) !important; }

/* CALLOUT — recolored per accent, dark tinted backgrounds instead of white */
.bd-callout {
  padding: 1.25rem;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--border-subtle);
  border-left-width: .25rem;
  border-radius: .25rem;
  background-color: var(--bg-panel-2);
  color: var(--text-primary);
}
.bd-callout h4 { margin-bottom: 1.25rem; color: var(--text-primary); }
.bd-callout p:last-child { margin-bottom: 0 }
.bd-callout code { border-radius: .25rem }
.bd-callout+.bd-callout { margin-top: -.25rem }
.bd-callout-info { border-left-color: var(--accent-cyan); background-color: var(--accent-cyan-dim); }
.bd-callout-warning { border-left-color: var(--accent-amber); background-color: var(--accent-amber-dim); }
.bd-callout-danger { border-left-color: var(--accent-rust); background-color: var(--accent-rust-dim); }

/* --- Photo galleries (reusable across pages) ---
   Usage: <div class="photo-gallery" id="some-unique-id"> containing one
   <figure class="gallery-item"> per photo, each with an <img class="gallery-thumb">
   and a <figcaption class="gallery-caption"> (leave as a single space " " for
   photos with no caption yet, so the row height stays consistent).
   5 thumbnails per row on desktop, fewer on smaller screens.
*/
.photo-gallery {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin: 1.5rem 0;
}
@media (max-width: 992px) {
  .photo-gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 576px) {
  .photo-gallery { grid-template-columns: repeat(2, 1fr); }
}
.gallery-item {
  margin: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 0.4rem;
  background: var(--bg-panel-2);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.gallery-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
}
.gallery-caption {
  margin: 0.4rem 0 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
  min-height: 1.2em;
}

/* --- Section sidebar navigation (see static/sidebar-nav.js) ---
   NOTE: this same block is also embedded inline in members.html and
   description.html's <head> for reliability. If you change it here,
   change it there too, or they'll drift out of sync. */
#page-sidebar-col { position: sticky; align-self: flex-start; }
.page-sidebar-label {
  margin: 0 0 0.5rem 0;
  padding-left: 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
ul.page-sidebar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--border-subtle);
}
.page-sidebar-nav li { margin: 0; }
.page-sidebar-link {
  display: block;
  padding: 0.4rem 0 0.4rem 1rem;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.92rem;
  line-height: 1.3;
  border-left: 2px solid transparent;
  margin-left: -2px;
}
.page-sidebar-link:hover { color: var(--accent-cyan); }
.page-sidebar-nav li.page-sidebar-sub .page-sidebar-link { padding-left: 2rem; font-size: 0.85rem; }
.page-sidebar-link.active {
  color: var(--accent-cyan);
  font-weight: 600;
  border-left-color: var(--accent-cyan);
  background-color: var(--accent-cyan-dim);
}
.page-sidebar-nav li.page-sidebar-top {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-subtle);
}
.page-sidebar-nav li.page-sidebar-top .page-sidebar-link {
  border-left-color: transparent;
  font-weight: 500;
  color: var(--text-muted);
}
.page-sidebar-nav li.page-sidebar-top .page-sidebar-link:hover { color: var(--accent-cyan); }

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