/* =============================================================================
   1. CSS VARIABLES / THEME TOKENS
   ============================================================================= */

:root {
  --md-primary-fg-color: #000000;
  --md-primary-fg-color--light: #1c1c1c;
  --md-primary-fg-color--dark: #000000;
}

[data-md-color-scheme="slate"] {
  --md-accent-fg-color: #00e5ff;
  /* Cyan */
  --md-accent-fg-color--transparent: rgba(0, 229, 255, 0.1);
  --md-typeset-a-color: #00e5ff;
}

/* =============================================================================
   2. GLOBAL THEME OVERRIDES (dark / slate scheme)
   ============================================================================= */

/* Header */
[data-md-color-scheme="slate"] .md-header {
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.4);
  border-bottom: 1px solid rgba(0, 229, 255, 0.3);
  background-color: rgba(0, 0, 0, 0.9);
}

/* Navigation active link */
[data-md-color-scheme="slate"] .md-nav__item .md-nav__link--active,
[data-md-color-scheme="slate"] .md-tabs__link--active {
  color: #00e5ff;
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.5);
}

/* Headings */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

[data-md-color-scheme="slate"] .md-typeset h1 {
  text-shadow: 0 0 15px rgba(0, 229, 255, 0.4);
  color: #e0f7fa;
  border-bottom: 1px solid rgba(0, 229, 255, 0.2);
  padding-bottom: 0.2em;
}

/* Inline code */
[data-md-color-scheme="slate"] .md-typeset code {
  background-color: rgba(0, 229, 255, 0.05);
  border: 1px solid rgba(0, 229, 255, 0.2);
  border-radius: 3px;
  color: #84ffff;
}

/* Links */
[data-md-color-scheme="slate"] .md-typeset a:hover {
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.6);
  transition: text-shadow 0.3s ease;
}

/* Search bar */
[data-md-color-scheme="slate"] .md-search__input {
  background-color: rgba(0, 229, 255, 0.05);
  border: 1px solid rgba(0, 229, 255, 0.3);
  color: #00e5ff;
}

[data-md-color-scheme="slate"] .md-search__input:focus {
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.3);
}

/* Horizontal rules */
.md-typeset hr {
  clear: both;
  display: block;
  width: 100%;
  height: 1px;
  border: 0;
  border-top: 1px solid rgba(0, 229, 255, 0.15);
  margin-top: 2.5em;
  margin-bottom: 2.5em;
}

/* =============================================================================
   3. PROJECT CARDS (lift on hover)
   ============================================================================= */

.md-typeset .grid.cards>ul>li,
.md-typeset .grid.cards>ol>li,
.md-typeset .grid>.card {
  transition: border .25s, box-shadow .25s, transform 0.3s ease;
  display: flex;
  flex-direction: column;
}

.md-typeset .grid.cards>ul>li:hover,
.md-typeset .grid.cards>ol>li:hover,
.md-typeset .grid>.card:hover {
  transform: translateY(-2px);
}

/* Push links paragraph to the bottom: grow the content paragraph
   so the last <p> (links row) stays at the card's bottom edge. */
.md-typeset .grid.cards>ul>li>p:nth-last-of-type(2),
.md-typeset .grid.cards>ol>li>p:nth-last-of-type(2) {
  flex-grow: 1;
}

/* =============================================================================
   4. PEOPLE — GRID LAYOUT & CARDS
   ============================================================================= */

/* Grid container */
.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: .4rem;
  margin-top: 1.5rem;
}

@media (max-width: 600px) {
  .people-grid {
    grid-template-columns: 1fr;
  }
}

/* Fallback message when no people data is available */
.people-fallback {
  text-align: center;
  padding: 2rem;
  border: 1px dashed rgba(0, 229, 255, 0.3);
  border-radius: 8px;
  margin-top: 1.5rem;
}

.people-fallback a {
  font-weight: bold;
}

/* Person card */
.person-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background-color: var(--md-default-bg-color);
  border: .05rem solid var(--md-default-fg-color--lightest);
  border-radius: .1rem;
  padding: .8rem;
  transition: border .25s, box-shadow .25s, transform 0.3s ease;
}

.person-card:hover {
  transform: translateY(-2px);
  border-color: transparent;
  box-shadow: var(--md-shadow-z2);
}

/* Person photo */
.person-pic {
  width: 100px;
  height: 100px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: .05rem solid var(--md-default-fg-color--lightest);
  flex-shrink: 0;
}

/* Person details */
.person-info {
  flex-grow: 1;
}

/* Name */
.person-info h3 {
  margin-top: 0;
  margin-bottom: 4px;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 0.8rem;
  font-weight: 700;
}

/* Job title */
.person-title {
  font-size: 0.64rem;
  font-weight: 600;
  color: var(--md-typeset-color);
  opacity: 0.9;
  margin-bottom: 4px;
}

/* Group */
.person-group {
  font-size: 0.64rem;
  opacity: 0.65;
  margin-bottom: 0;
}

/* Person name as profile link (inside h3) */
.person-name-link {
  position: relative;
  color: inherit !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

.person-name-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--md-accent-fg-color);
  transition: width 0.25s ease;
}

.person-name-link:hover {
  color: var(--md-accent-fg-color) !important;
  text-shadow: 0 0 10px rgba(0, 229, 255, 0.35);
}

.person-name-link:hover::after {
  width: 100%;
}