/* ModelinginBiology "v2" style system — gradual site revamp, opt-in per page via layout: v2-page */

:root {
  --v2-navy: #002C5B;
  --v2-blue: #007BFF;
  --v2-gold: #c9971c;
  --v2-gold-bg-start: #fff9ec;
  --v2-gold-bg-end: #fdf0d5;
  --v2-text: #444;
  --v2-muted: #6c757d;
}

.v2-shell {
  /* Break out of the parent .container-fluid's 15px gutter without using 100vw, which can
     force a horizontal scrollbar (and eat into vertical viewport space) once any scrollbar
     is present. */
  margin-left: -15px;
  margin-right: -15px;
  width: calc(100% + 30px);
  /* .site-header (minima/_layout.scss) reserves a fixed 40px above this element for the nav
     bar, so a full 100vh here would always overshoot the viewport bottom by 40px. */
  min-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  background: #f4f6f9;
  box-sizing: border-box;
}

.v2-content {
  flex: 1 0 auto;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  padding: 24px 20px 40px;
  box-sizing: border-box;
}

.v2-card {
  background: #fff;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
  padding: 28px 32px;
  margin-bottom: 24px;
  box-sizing: border-box;
}

.v2-header-card { border-left: 5px solid var(--v2-blue); }
.v2-header-card h2 { color: var(--v2-navy); margin: 0 0 4px 0; font-weight: 700; font-size: 1.8rem; }
.v2-header-card p.v2-tagline { color: var(--v2-muted); margin: 0; font-size: 1em; }

.v2-content-card .v2-row { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.v2-content-card .v2-cover { flex: 0 0 160px; }
.v2-content-card .v2-cover img { width: 100%; height: auto; border-radius: 8px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); }
.v2-content-card .v2-text { flex: 1 1 300px; }
.v2-content-card p { color: var(--v2-text); line-height: 1.75; font-size: 0.95rem; }
.v2-content-card ul { color: var(--v2-text); line-height: 1.75; padding-left: 20px; margin-bottom: 1rem; font-size: 0.95rem; }
.v2-content-card ul li strong { color: var(--v2-navy); }

.v2-sister-card {
  background: linear-gradient(135deg, var(--v2-gold-bg-start), var(--v2-gold-bg-end));
  border-left: 5px solid var(--v2-gold);
  padding: 24px 28px;
  margin-top: 24px;
  box-sizing: border-box;
}
.v2-sister-card h5 { color: #7a5c12; margin: 0 0 6px 0; font-weight: 700; font-size: 1.05rem; }
.v2-sister-card p { color: var(--v2-text); margin: 0 0 16px 0; line-height: 1.6; font-size: 0.95rem; }
.v2-btn {
  display: inline-block;
  padding: 9px 20px;
  background: var(--v2-gold);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}
.v2-btn:hover { background: #a67c14; color: #fff; text-decoration: none; }

.v2-footer {
  margin-top: auto;
  background: var(--v2-navy);
  color: #cfd8e3;
  text-align: center;
  padding: 18px 20px;
  font-size: 0.85rem;
}
.v2-footer a { color: #fff; text-decoration: none; }
.v2-footer a:hover { text-decoration: underline; }

/* Full-bleed variant for use outside .v2-shell (e.g. pages not yet on the v2-page layout).
   Uses the parent .container-fluid's known 15px gutter instead of 100vw (see .v2-shell). */
.v2-footer-standalone {
  margin-left: -15px;
  margin-right: -15px;
  width: calc(100% + 30px);
}

/* Sticky-footer wrapper for pages not using .v2-shell (e.g. page.html) — scoped to its own
   elements only, so it never touches shared Bootstrap classes like .container/.container-fluid. */
.v2-sticky-wrap {
  /* Same 40px correction as .v2-shell — see comment there. */
  min-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
}
.v2-grow { flex: 1 0 auto; }

@media (max-width: 600px) {
  .v2-content-card .v2-row { flex-direction: column; text-align: center; }
  .v2-content-card .v2-cover { margin: 0 auto; }
}

/* --- Transitional overrides for legacy TOC pages (interactive-simulations.md, videos.md,
   biology.md) — until those pages are migrated to the new layout, this fixes the sidebar
   overlapping the new footer without editing _sass/custom.scss or biology.md's own inline
   <style> directly. "div." bumps specificity just enough to win over both of those (each a
   plain .myScrollspy/.mainlist class selector) regardless of stylesheet load order. */
div.myScrollspy {
  position: sticky;
  top: 40px;
  max-height: calc(100vh - 40px);
  overflow: auto;
}
div.mainlist {
  margin-left: 24px;
  flex: 1 1 0%;
  min-width: 0;
}

/* On narrow screens, hide the CONTENTS sidebar entirely so the list takes the full width,
   instead of squeezing both into narrow columns. */
@media (max-width: 800px) {
  div.myScrollspy {
    display: none;
  }
  div.mainlist {
    margin-left: 0;
    width: 100%;
  }
}