/* ==========================================================================
   BioEHS shared page styles (loaded on every page by templates/base.html).
   Change fonts, heading sizes and colors HERE, not with inline style="".
   ========================================================================== */

:root {
  --bioehs-navy: #003262;
  --bioehs-navy-dark: #002145;
  --bioehs-gold: #FDB515;
  --bioehs-text: #495057;
  --bioehs-muted: #6c757d;
  --bioehs-card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* --- Page hero: the dark skyline banner at the top of every page --------- */
.jumbotron-header {
  text-align: center;
  padding: 3.5rem 1rem !important;
  margin-bottom: 0;
}
.site-content .jumbotron-header h1 {
  font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
  margin: 0;
}
.site-content .jumbotron-header h5,
.site-content .jumbotron-header p,
.page-hero-sub {
  font-size: 1.15rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
  margin: 0.75rem 0 0;
}
.site-content .jumbotron-header h2::after { display: none; }

/* Home page full-screen banner (.jumbotron): white text, bold society name */
.site-content .jumbotron h1,
.site-content .jumbotron h3,
.site-content .jumbotron p,
.site-content .jumbotron li { color: #fff; }
.site-content .jumbotron h1 { font-weight: 700; }

/* --- Headings and body text ---------------------------------------------- */
.site-content h2 {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--bioehs-navy);
  line-height: 1.25;
  margin-bottom: 1.25rem;
}
/* gold underline under every section title */
.site-content h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  margin-top: 0.75rem;
  background: var(--bioehs-gold);
  border-radius: 2px;
}
.site-content .text-center h2::after,
.site-content h2.text-center::after,
.site-content h2[style*="text-align: center"]::after {
  margin-left: auto;
  margin-right: auto;
}
.site-content h3 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--bioehs-navy);
  line-height: 1.3;
  margin-bottom: 0.75rem;
}
.site-content h4 { font-size: 1.2rem; font-weight: 700; color: var(--bioehs-navy); }
.site-content h5 { font-size: 1.05rem; font-weight: 700; color: var(--bioehs-navy); }
.site-content p,
.site-content li {
  color: var(--bioehs-text);
  line-height: 1.7;
  font-size: 1rem;
}

/* --- White content card --------------------------------------------------- */
.card-panel {
  background: #fff;
  padding: 35px;
  border-radius: 12px;
  box-shadow: var(--bioehs-card-shadow);
  margin-bottom: 30px;
}
.card-panel::after { content: ""; display: table; clear: both; }  /* contain floated images */
.page-body { padding-top: 40px; padding-bottom: 20px; }

/* --- Links inside page text ----------------------------------------------- */
.site-content .links,
.card-panel a:not(.btn) {
  color: var(--bioehs-navy);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid var(--bioehs-gold);
}
.card-panel a:not(.btn):hover { color: var(--bioehs-navy-dark); border-bottom-color: var(--bioehs-navy); }

/* --- Section tab bar (used by BioEHSC pages) ------------------------------ */
.subnav {
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  position: sticky;
  top: 56px;               /* sits under the fixed site navbar */
  z-index: 10;
}
.subnav .container {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.subnav .container::-webkit-scrollbar { display: none; }
@media (min-width: 992px) {
  .subnav .container { flex-wrap: wrap; justify-content: center; overflow: visible; }
}
.subnav a {
  flex: 0 0 auto;
  padding: 0.9rem 1rem;
  color: var(--bioehs-muted);
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.subnav a:hover { color: var(--bioehs-navy); text-decoration: none; }
.subnav a.active { color: var(--bioehs-navy); border-bottom-color: var(--bioehs-gold); }

/* --- Bits carried over from the old bioehsc.css --------------------------- */
.line { width: 100%; height: 1px; border-bottom: 1px dashed #ddd; margin: 32px 0; }
.content-quote { font-style: italic; color: var(--bioehs-navy); }

@media (max-width: 768px) {
  .card-panel { padding: 24px; }
  .site-content h2 { font-size: 1.5rem; }
  .site-content h3 { font-size: 1.25rem; }
  .jumbotron-header { padding: 2.5rem 1rem !important; }
}