/* =========================================================
   Timothy M. Jones — sage theme
   Bootstrap (CSS only, vendored in vendor/bootstrap.min.css) provides
   layout/grid/components. This file only: (1) retunes Bootstrap's CSS
   custom properties to the brand palette/fonts, (2) adds the handful of
   sizes Bootstrap has no utility for, and (3) replaces the interactive
   behaviour Bootstrap normally drives with JS (navbar collapse, dropdowns,
   tabs) with pure-CSS equivalents — no JavaScript is used anywhere.
   ========================================================= */

:root {
  --serif: "Newsreader", Georgia, "Times New Roman", serif;

  --bs-body-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --bs-body-font-size: 17px;
  --bs-body-color: #1b2a22;
  --bs-body-bg: #ffffff;
  --bs-emphasis-color: #1b2a22;
  --bs-secondary-color: #5c6b62;
  --bs-secondary-rgb: 92, 107, 98;
  --bs-border-color: #e7eceb;
  --bs-border-color-translucent: #e7eceb;

  --bs-primary: #2e9e44;
  --bs-primary-rgb: 46, 158, 68;
  --bs-primary-text-emphasis: #1f7a31;
  --bs-primary-bg-subtle: #eaf6ec;
  --bs-primary-border-subtle: #cbe8d1;

  --bs-link-color: #1f7a31;
  --bs-link-color-rgb: 31, 122, 49;
  --bs-link-hover-color: #2e9e44;
  --bs-link-hover-color-rgb: 46, 158, 68;

  --bs-nav-tabs-link-active-color: #1b2a22;
  --bs-nav-tabs-link-active-bg: #ffffff;
  --bs-nav-tabs-link-active-border-color: #e7eceb #e7eceb #ffffff;
}

/* .btn-*-primary bakes its colour into local --bs-btn-* custom properties
   at Bootstrap's Sass build time rather than reading the root --bs-primary
   variable, so it needs its own override to pick up the brand colour. */
.btn-outline-primary {
  --bs-btn-color: var(--bs-primary-text-emphasis);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 80px; }

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
}

/* Bootstrap's default inline-code colour (#d63384, pink/red) clashes with
   the green theme; use a quiet green highlight instead. */
code {
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
  padding: 0.1em 0.35em;
  border-radius: 0.3rem;
}
pre code {
  background: none;
  padding: 0;
}
pre {
  padding-left: 1.25rem;
  border-left: 3px solid var(--bs-border-color);
}

blockquote {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
  border-left: 3px solid var(--bs-border-color);
  font-style: italic;
}
blockquote p:last-child {
  margin-bottom: 0;
}

/* Narrower reading column than Bootstrap's default container at lg+ */
@media (min-width: 992px) {
  .container { max-width: 860px; }
}

/* =========================================================
   Navbar — Bootstrap's navbar/dropdown components, styled and
   made to open/collapse with pure CSS instead of its JS plugin.
   ========================================================= */
.navbar.sticky-top {
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
}

.nav-toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.navbar-toggler { cursor: pointer; }

.nav-item.dropdown:hover > .dropdown-menu,
.nav-item.dropdown:focus-within > .dropdown-menu {
  display: block;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
}
/* .navbar re-pins --bs-nav-link-hover-color to its own --bs-navbar-hover-color
   (a fixed rgba(), not our --bs-link-hover-color), so hover needs a direct
   rule rather than a custom-property override. */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link.active {
  color: var(--bs-primary-text-emphasis);
}

/* Small dot between top-level items so they read as a set of separate
   links rather than a single run of text (desktop only — a vertical list
   doesn't need it). Sits inside the link's own ::after so it doesn't need
   extra markup, but keeps a fixed colour rather than currentColor so it
   doesn't itself light up green on hover. */
@media (min-width: 992px) {
  .navbar-nav .nav-item:not(:last-child) .nav-link::after {
    content: "\00b7";
    display: inline-block;
    margin-left: 0.6rem;
    color: var(--bs-border-color);
  }
}

@media (max-width: 991.98px) {
  .nav-toggle-input:checked ~ .navbar-collapse { display: block; }

  .dropdown-menu {
    position: static;
    display: block;
    border: 0;
    box-shadow: none;
    background: transparent;
    padding-left: 1rem;
  }
}

/* =========================================================
   Home hero
   ========================================================= */
.hero-photo {
  width: 200px;
  height: 200px;
  object-fit: cover;
}

/* Section headings — grey divider + generous spacing above every h2, not
   just the home page's folded-in Service/Contact sections (this used to be
   scoped to h2#service/h2#contact only, which is why other pages' ## headings
   looked cramped by comparison). */
h2 {
  border-top: 1px solid var(--bs-border-color);
  padding-top: 1.5rem;
  margin-top: 2.5rem;
}
/* The style guide's entry titles are h2s paired with a badge in a flex row,
   already separated from the previous entry by .style-entry's own
   border-top + py-4 — the rule above duplicates that as a second line/gap
   stacked right above it. .style-entry only exists in the style guide, so
   this is harmless here and undoes the clash there once synced over. */
.style-entry h2 {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}
.service-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 4px;
}
.service-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  padding: 6px 14px;
  font-size: 0.85rem;
  color: var(--bs-body-color);
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
}
.service-chip strong {
  color: var(--bs-primary-text-emphasis);
  font-weight: 600;
}

/* =========================================================
   Research page tabs/accordion — real Bootstrap JS components
   (data-bs-toggle="tab"/"collapse", bootstrap.bundle.min.js).
   nav-tabs active-state colour already comes from the
   --bs-nav-tabs-link-active-* root variables above; the accordion's
   chevron icon and focus ring are baked into local --bs-accordion-*
   custom properties as literal Bootstrap-blue SVG/rgba at CSS-build
   time (same gotcha as .btn-outline-primary/.navbar, see top of file),
   so they need overriding here to pick up the brand green.
   ========================================================= */
.accordion {
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231f7a31' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* =========================================================
   Publications list — sizes/tweaks Bootstrap has no utility for
   ========================================================= */
.min-w-0 { min-width: 0; }

.paper-thumb-placeholder {
  width: 77px;
  height: 100px;
  padding: 4px;
  font-size: 0.72rem;
  line-height: 1.25;
  border: 1px dashed var(--bs-primary-border-subtle);
}

.paper-extra-links { margin-top: 2px; }
.paper-extra-links span:not(:last-child)::after {
  content: " \00b7 ";
  color: var(--bs-secondary-color);
}

/* =========================================================
   Research group — person/alumni cards
   ========================================================= */
.person-img {
  width: 84px;
  height: 84px;
  object-fit: cover;
}