/* === Navbar brand (logo) left-align ===
   Quarto wraps the navbar logo in .navbar-brand-container.mx-auto,
   which Bootstrap-centers it. Override to align it left, matching
   where the "Reuman Lab" text used to sit. */
.navbar-brand-container.mx-auto {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Make the navbar logo a usable size — Quarto's default cap is small. */
.navbar-logo {
  max-height: 44px;
  height: 44px;
  width: auto;
}

/* === Force a LIGHT-themed navbar ===
   Cosmo + Quarto default to a dark-blue navbar (data-bs-theme="dark"),
   on which a black-and-white logo / wordmark is invisible.
   Override to a white navbar with dark text so the logo reads correctly. */
nav.navbar {
  background-color: #ffffff !important;
  border-bottom: 1px solid #dee2e6;
  --bs-navbar-color: #212529;
  --bs-navbar-hover-color: #2780e3;
  --bs-navbar-active-color: #2780e3;
  --bs-navbar-brand-color: #212529;
  --bs-navbar-brand-hover-color: #2780e3;
}

nav.navbar,
nav.navbar .navbar-brand,
nav.navbar .nav-link,
nav.navbar .navbar-text {
  color: #212529 !important;
}

nav.navbar .nav-link:hover,
nav.navbar .nav-link.active {
  color: #2780e3 !important;
}

/* Quarto emits two <img> tags for the navbar logo — .light-content
   (shown on light-themed pages) and .dark-content (shown on dark
   ones). Since the body is quarto-light, Quarto's own rules already
   show the correct one — don't override. */

/* === Page banner ===
   Shown above the page title on subpages that set `banner:` in YAML.
   Implemented via the custom title-block.html partial. */

.page-banner {
  width: 100%;
  max-height: 220px;
  overflow: hidden;
  margin: 0 0 1.5rem 0;
  border-radius: 6px;
}

.page-banner img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* === Hero === */

.hero-section {
  padding: 0.65rem 0;
  text-align: center;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  margin-bottom: 2rem;
}

.hero-section h1 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  border: none;
}

.hero-tagline {
  font-size: 1.15rem;
  line-height: 1.5;
  color: #2d3748;
  max-width: 820px;
  margin: 0 auto 0.5rem auto;
}

.hero-followup {
  font-size: 0.95rem;
  font-style: italic;
  color: #6c757d;
  max-width: 700px;
  margin: 0 auto;
}

/* === Vignette cards === */

.vignette-card {
  height: 100%;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
  display: flex;
  flex-direction: column;
  background: white;
  margin-bottom: 1rem;
}

.vignette-card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.vignette-img {
  height: 160px;
  background: linear-gradient(135deg, #2c5282 0%, #1a365d 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  font-style: italic;
  text-align: center;
  padding: 1rem;
  overflow: hidden;
}

.vignette-img.vignette-img-photo {
  background: none;
  padding: 0;
}

.vignette-img-photo img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}

.vignette-body {
  padding: 1.5rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.vignette-body h4 {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #1a202c;
}

.vignette-body p {
  color: #4a5568;
  font-size: 0.95rem;
  line-height: 1.6;
}

.vignette-readmore {
  display: inline-block;
  margin-top: auto;
  padding-top: 0.75rem;
  font-weight: 600;
  text-decoration: none;
}

/* === Software strip === */

.software-strip-outer {
  padding: 3rem 0;
  background: #f8f9fa;
  margin: 3rem 0 0 0;
  text-align: center;
}

.software-strip-title {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  border: none;
}

.software-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.software-pill {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  color: #212529;
  text-decoration: none;
  transition: all 0.2s;
  font-size: 0.95rem;
}

.software-pill:hover {
  border-color: #2c5282;
  color: #2c5282;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.all-software-link {
  display: inline-block;
  font-weight: 600;
  text-decoration: none;
}

/* === PI strip === */

.pi-strip {
  padding: 2.5rem 1rem;
  text-align: center;
  border-top: 1px solid #dee2e6;
  margin-top: 3rem;
  color: #4a5568;
  font-size: 1rem;
  line-height: 1.6;
}

/* === Section headings on home === */

h2.current-research-heading {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 1.5rem;
  border: none;
}

/* === New click-to-expand card grid (redesign-cards branch) === */

.cards-grid {
  margin-top: 1.5rem;
}

.card-row {
  display: flex;
  gap: 1rem;
  margin: 0 auto 1rem auto;
  align-items: stretch;
  width: var(--row-width, 100%);
}

/* Apply width modifier classes inside a row to make pairs unequal:
   <div class="card-row"><details class="card card-wide">…</details><details class="card card-narrow">…</details></div>
   By default each card flexes to take equal width. */
details.card {
  flex: 1 1 0;
  min-width: 0;
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
  /* Cards in a row stretch to the tallest sibling's height. Without this,
     the summary content sits at the top and leaves empty space below.
     Making each card a flex column with justify-content: center pushes
     the summary (thumb + text) to the vertical middle of the card. */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

details.card.card-wide   { flex: 1.5 1 0; }
details.card.card-narrow { flex: 0.7 1 0; }

details.card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

details.card[open]:hover {
  transform: none;
}

details.card > summary {
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  list-style: none;
}

details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::marker { content: ""; }

.card-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #4a6fa5 0%, #2c4870 100%);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.65rem;
  font-style: italic;
  text-align: center;
  border-radius: 4px;
  padding: 0.25rem;
  line-height: 1.1;
  overflow: hidden;
  /* Optical-center nudge: thumb's geometric center matches text's line-box
     center, but a circular/rounded thumb usually looks slightly high next to
     text. Increase `top` to push thumb further down; set to 0 to disable. */
  position: relative;
  top: 7px;
}

.card-thumb.has-image {
  background: #fff;
  padding: 0;
}

.card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.card-question {
  font-weight: 600;
  color: #1a202c;
  font-size: 0.95rem;
  line-height: 1.3;
  flex: 1;
  min-width: 0;
}

.card-body {
  padding: 0.25rem 0.75rem 0.85rem 0.75rem;
  font-size: 0.92rem;
  color: #4a5568;
  line-height: 1.55;
}

.card-body p {
  margin: 0 0 0.5rem 0;
}

.card-body p:last-child {
  margin-bottom: 0;
}

.card-readmore {
  font-weight: 600;
  text-decoration: none;
}

/* When a card is open, hide its row-siblings so the open card has the full row.
   Only on desktop — on mobile, rows already collapse to single column. */
@media (min-width: 769px) {
  .card-row:has(details.card[open]) {
    width: 100%;
  }
  .card-row:has(details.card[open]) details.card:not([open]) {
    display: none;
  }
  .card-row:has(details.card[open]) details.card[open] {
    flex: 1 1 100%;
  }
}

/* On narrow screens, stack vertically. */
@media (max-width: 768px) {
  .card-row {
    flex-direction: column;
  }
  /* In a column-direction parent, flex: 1 1 0 makes height flex-basis 0;
     combined with overflow: hidden (which suppresses min-height: auto), cards
     collapse to ~0 height and only their borders show. Size to content instead. */
  details.card,
  details.card.card-wide,
  details.card.card-narrow {
    flex: 0 0 auto;
  }
}

/* === People page === */

.people-section {
  margin: 1.5rem 0 2.5rem 0;
}

.people-section h2 {
  border: none;
  margin: 2rem 0 1rem 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: #1a202c;
}

.person {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1.75rem;
  align-items: flex-start;
  scroll-margin-top: 80px;
}

.person-photo {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  overflow: hidden;
  border-radius: 6px;
  background: #f0f0f0;
}

.person-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.person-body {
  flex: 1;
  min-width: 0;
}

.person-name {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: #1a202c;
  border: none;
}

.person-title {
  color: #4a5568;
  font-size: 0.95rem;
  margin-top: 0.2rem;
}

.person-email {
  color: #4a5568;
  font-size: 0.9rem;
  margin-top: 0.3rem;
}

.person-email a {
  color: #2780e3;
  text-decoration: none;
}

.person-blurb {
  margin-top: 0.65rem;
  color: #2d3748;
  font-size: 0.95rem;
  line-height: 1.55;
}

.person-blurb p {
  margin: 0 0 0.5rem 0;
}

.person-blurb p:last-child {
  margin-bottom: 0;
}

.person-links {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: #6c757d;
}

.person-links a {
  color: #2780e3;
  text-decoration: none;
}

.person-links a:hover {
  text-decoration: underline;
}

@media (max-width: 600px) {
  .person {
    flex-direction: column;
  }
  .person-photo {
    width: 100px;
    height: 100px;
  }
}

/* === Topic-page figure placement & sizing ===
   Driven by figure-placement and figure-size YAML fields in each topic file,
   processed by topic-figure.lua. Width is set inline as a percentage. */

.topic-figure {
  margin-bottom: 1rem;
}

.topic-figure-top {
  margin: 0 auto 1.5rem auto;
}

.topic-figure-bottom {
  margin: 1.5rem auto 0 auto;
}

.topic-figure-left {
  float: left;
  margin: 0 1.25rem 0.75rem 0;
}

.topic-figure-right {
  float: right;
  margin: 0 0 0.75rem 1.25rem;
}

.topic-figure-clearfix {
  clear: both;
}

/* On narrow screens, float layouts crowd the text — collapse to full-width. */
@media (max-width: 600px) {
  .topic-figure-left,
  .topic-figure-right {
    float: none;
    width: 100% !important;
    margin: 0 auto 1rem auto;
  }
}

/* === Footer ===
   Two Quarto defaults conspire to leave a large gap above the footer on short
   pages (especially noticeable on Publications):
   1) `.quarto-container { min-height: calc(100vh - 132px) }` stretches the
      content container to nearly the full viewport.
   2) `.page-rows-contents` defines a 2-row CSS Grid where the first row uses
      `1fr` (grows to fill the tall container) and the second row has a 60px
      minimum, so even without (1) there's a 60px residual gap.
   Override both. */
.quarto-container {
  min-height: 0 !important;
}
.page-rows-contents {
  grid-template-rows: auto !important;
}

/* Tighten .nav-footer itself too — its default min-height: 3.5em and
   0.5rem top/bottom padding add a smaller secondary gap above the footer
   text. Increase these values to push the footer further from the content. */
footer.footer .nav-footer {
  min-height: 1.75em;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

/* Compact one-line-per-person layout for past masters / past undergrads. */
.person-compact {
  display: block;
  margin-bottom: 0.6rem;
  scroll-margin-top: 80px;
}

.person-compact p {
  margin: 0;
  color: #2d3748;
  font-size: 0.95rem;
  line-height: 1.55;
}

.person-compact strong {
  color: #1a202c;
}