/* ------------------------------------------------------------------ *
 *  LAMMPS website -- custom styles layered on top of Bootstrap 5.
 *  Keep this small; prefer Bootstrap utility classes in templates.
 * ------------------------------------------------------------------ */

/* ---- Brand palette ------------------------------------------------ *
 * Colors drawn from the LAMMPS logo (blue atoms, gold lettering),
 * exposed as custom properties and mapped onto Bootstrap's theme tokens
 * so links/buttons/accents pick them up automatically. The dark-mode
 * block lightens the accent so it stays legible on dark backgrounds. */
:root {
  --lammps-blue: #1f6db5;
  --lammps-blue-rgb: 31, 109, 181;
  --lammps-gold: #f4b41a;
  --lammps-gold-rgb: 244, 180, 26;

  --lammps-accent: var(--lammps-blue);          /* link/accent in light mode */
  --lammps-accent-rgb: var(--lammps-blue-rgb);

  --bs-link-color: var(--lammps-accent);
  --bs-link-color-rgb: var(--lammps-accent-rgb);
  --bs-link-hover-color: #17527f;
  --bs-link-hover-color-rgb: 23, 82, 127;
}
[data-bs-theme="dark"] {
  --lammps-accent: #6ea8de;                      /* lighter blue for dark bg */
  --lammps-accent-rgb: 110, 168, 222;
  --bs-link-hover-color: #9cc4ea;
  --bs-link-hover-color-rgb: 156, 196, 234;
}

/* Rebrand Bootstrap's primary buttons to the LAMMPS blue. */
.btn-primary {
  --bs-btn-bg: var(--lammps-blue);
  --bs-btn-border-color: var(--lammps-blue);
  --bs-btn-hover-bg: #1a5c9a;
  --bs-btn-hover-border-color: #185490;
  --bs-btn-active-bg: #185490;
  --bs-btn-active-border-color: #154b80;
  --bs-btn-disabled-bg: var(--lammps-blue);
  --bs-btn-disabled-border-color: var(--lammps-blue);
}

/* Thin gold brand accent under the (always-dark) navbar. */
.navbar { border-bottom: 3px solid var(--lammps-gold); }

/* Icon links in the navbar: subtle until hovered. */
.icon-links .nav-link { color: rgba(255, 255, 255, .7); }
.icon-links .nav-link:hover { color: #fff; }

/* Light/dark toggle button: styled to match the navbar icon links. */
.theme-toggle {
  color: rgba(255, 255, 255, .7);
  background: none;
  border: 0;
  padding: .25rem .5rem;
  line-height: 1;
}
.theme-toggle:hover, .theme-toggle:focus-visible { color: #fff; }

/* Landing-page left column: more compact and one font-size smaller than
   the main content, with a very light gray panel to set it apart. */
.home-aside {
  font-size: 0.825rem;
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
  padding: 1rem;
}
.home-aside h2 { font-size: 0.95rem; }

/* Pinned announcements: a light brand-blue tint, lower-emphasis than a
   solid alert; the translucent fill adapts to light and dark themes. */
.home-aside .announcement {
  background: rgba(var(--lammps-blue-rgb), .10);
  border: 1px solid rgba(var(--lammps-blue-rgb), .25);
  color: var(--bs-body-color);
}
.home-aside .announcement .fa-bullhorn { color: var(--lammps-accent); }

/* Scrollable "Recent LAMMPS News" area on the landing page. */
.news-scroll {
  max-height: 24rem;
  overflow-y: auto;
}

/* On large screens the sidebar column stretches to the height of the main
   column (equal-height Bootstrap row), but the *main* column must dictate
   the page height. So we take the sidebar's contents out of the height
   calculation with an absolutely-positioned inner wrapper pinned to the
   column's stretched height; the news feed then grows to fill the leftover
   space and scrolls within the column instead of pushing the page taller. */
@media (min-width: 992px) {
  .home-aside { position: relative; }
  .home-aside-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: 1rem;        /* matches the panel's normal inset */
    overflow: hidden;
  }
  .home-aside-inner .news-feed {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }
  .home-aside-inner .news-scroll {
    flex: 1 1 auto;
    max-height: none;     /* fill the remaining column height ... */
    min-height: 0;        /* ... and scroll when the list overflows */
  }
}

/* Client-side ("static") search results dropdown. */
.site-search .search-results {
  max-height: 22rem;
  overflow-y: auto;
  padding: .25rem;
}
.search-result { white-space: normal; padding: .4rem .6rem; }
.search-result-title { display: block; font-weight: 500; color: var(--lammps-accent); }
.search-result-snippet {
  display: block;
  font-size: .78rem;
  line-height: 1.25;
  color: var(--bs-secondary-color);
}
.search-empty { padding: .5rem .6rem; color: var(--bs-secondary-color); }

/* Make the Google CSE search box full width and comfortably sized.
   (CSE injects inline styles, hence the !important overrides.) */
.search-box .gsc-control-cse { padding: 0 !important; background: none !important; border: 0 !important; }
.search-box .gsc-input-box { height: auto !important; padding: 2px 6px !important; }
.search-box input.gsc-input { font-size: 1rem !important; min-height: 2.25rem !important; }
.search-box .gsc-search-button-v2 { padding: 8px 12px !important; }
.search-box table.gsc-search-box { margin-bottom: 0 !important; }

/* Highlights carousel: crisp, framed journal covers with the title below
   the image (not overlapping it). The carousel features *every* journal
   cover (~44), so the indicators are many: render them as small round dots
   that sit statically below the frame and wrap onto more rows as needed,
   instead of Bootstrap's wide bars overlaid at the bottom (which would
   overflow the width). */
/* Lay the carousel out as a column so the (static) indicator strip can sit
   below the cover+title; the prev/next controls are absolute, so ordering
   leaves them overlaid as usual. */
#highlights { display: flex; flex-direction: column; }
#highlights .carousel-inner { order: 1; }
#highlights .carousel-indicators {
  order: 2;
  position: static;
  margin: .6rem 0 0;
  flex-wrap: wrap;
}
#highlights .carousel-indicators [data-bs-target] {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 0;
  margin: 3px;
  background-color: var(--lammps-accent);
}
/* carousel-dark inverts the controls for light backgrounds; restore the
   light controls in dark mode so the arrows stay visible. */
[data-bs-theme="dark"] #highlights .carousel-control-prev-icon,
[data-bs-theme="dark"] #highlights .carousel-control-next-icon { filter: none; }
.carousel-cover {
  height: 320px;
  width: auto;
  margin: 0 auto;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.carousel-title {
  margin: .6rem auto 0;
  max-width: 90%;
  font-weight: 500;
  color: var(--bs-body-color);
}
/* keep the prev/next controls clear of the narrow centered cover */
#highlights .carousel-control-prev,
#highlights .carousel-control-next { width: 8%; }

/* Gallery thumbnails fill their card uniformly. */
.gallery-grid .card-img-top {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* "Journal cover" badge: singles out the gallery entries that were featured
   as a journal cover, in the LAMMPS brand gold (distinct from the gray movie
   badge). */
.badge-cover {
  background-color: var(--lammps-gold);
  color: #212529;
}

/* 404 page: the melting-logo graphic is a dark banner, so cap its width and
   let it sit as a self-contained image on the page. */
.error-404 .melted-logo { max-width: 640px; width: 100%; height: auto; }

/* ---- "hover to animate" logo gimmick ---------------------------- *
 * Show the static logo by default; reveal the animated GIF on hover,
 * stacking both in the same spot so the layout doesn't jump. */
.logo-hover { position: relative; display: inline-block; line-height: 0; }
.logo-hover .logo-anim {
  position: absolute; top: 0; left: 0;
  opacity: 0; transition: opacity .15s ease-in-out;
}
.logo-hover:hover .logo-anim { opacity: 1; }
.logo-hover img { max-width: 100%; height: auto; }

/* Project-vitality strip: a row of headline numbers under the intro text. */
.vitality {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: .25rem .5rem;
  margin-bottom: 1.5rem;
}
.vitality-item {
  flex: 1 1 auto;
  min-width: 6rem;
  text-align: center;
  padding: .4rem .6rem;
  border-radius: .4rem;
  text-decoration: none;
  color: inherit;
}
.vitality-item:hover, .vitality-item:focus-visible { background: var(--bs-tertiary-bg); }
.vitality-value {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--lammps-accent);
}
.vitality-label {
  display: block;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--bs-secondary-color);
}

/* CI status badge row (live GitHub Actions SVGs). */
.ci-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .75rem;
  align-items: center;
  justify-content: center;
  margin: .25rem 0 1.5rem;
}
.ci-badge { display: inline-flex; }
.ci-badge img { height: 20px; }

/* Landing-page row: R&D 100 award icon, a vertical divider, then the CI badges. */
.home-badges .ci-badges { margin: 0; }
.rd100-award img { display: block; }
.home-badges-divider {
  width: 1px;
  height: 40px;
  background: #dee2e6;
}
@media (prefers-color-scheme: dark) {
  .home-badges-divider { background: #444; }
}

/* Stacked variant (internal build-status page): one badge per line,
   indented and left-aligned instead of a centered wrapping row. */
.ci-badges-stacked {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: .4rem;
  padding-left: 1.5rem;
}

/* Discreet "log in" icon to the team area, a touch fainter than the public
   footer icons so it stays easy to overlook. */
.footer-login { opacity: .55; }
.footer-login:hover, .footer-login:focus-visible { opacity: 1; }

/* Build stamp (repo HEAD + build date): deliberately faint and tiny --
   light gray on white, dark gray on black -- so it stays easy to overlook.
   It sits as the middle flex child of the footer row, growing to fill the
   space between the license notice and the team-area link (min-width:0 lets
   the long hash wrap instead of overflowing on narrow screens). */
.build-stamp {
  flex: 1 1 auto;
  min-width: 0;
  font-size: .7rem;
  word-break: break-all;
  color: #bdbdbd;
}
[data-bs-theme="dark"] .build-stamp { color: #555; }

/* Make embedded MathJax / wide tables from migrated pages scroll
 * rather than overflow on small screens. */
.content table { display: block; overflow-x: auto; }

/* Plain Markdown tables (no Bootstrap .table class) render with no cell
   padding at all, so adjacent columns can visually run together. Give them
   a little breathing room; Bootstrap-classed tables keep their own. */
.content table:not(.table) th,
.content table:not(.table) td { padding: .15rem .5rem; }

/* A |-|-|-|-| row in a Markdown table marks a group break: the table
   render hook splits the body into separate <tbody> groups there, and the
   boundary is drawn as a line plus a little extra space. */
.content table tbody + tbody > tr:first-child > td {
  border-top: 2px solid var(--bs-border-color);
  padding-top: .5rem;
}
.content table tbody:has(+ tbody) > tr:last-child > td { padding-bottom: .5rem; }

/* Tables tagged {.nowrap-cols} in Markdown (e.g. the core-developer list):
   every column stays on one line except the last, which holds the free-form
   description and is the only one allowed to wrap. On narrow screens the
   .content rule above lets the whole table scroll instead of overflowing. */
.nowrap-cols th:not(:last-child),
.nowrap-cols td:not(:last-child) { white-space: nowrap; }

/* Tool/site directory cards (ecosystem prepost/external): subtle lift on
   hover so the grid feels interactive, and uniform thumbnail crops. */
.tool-card { transition: box-shadow .15s ease-in-out, transform .15s ease-in-out; }
.tool-card:hover {
  box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .12);
  transform: translateY(-2px);
}
/* Small square icon to the right of a card's tagline (cropped + downscaled,
   so the small legacy thumbnails are never upscaled). */
.tool-icon {
  width: 4rem;
  height: 4rem;
  object-fit: cover;
  border-radius: .375rem;
  border: 1px solid var(--bs-border-color);
}
.tool-details img { max-width: 100%; height: auto; }