/*
 * people_style.css
 * Override styles for egyplasma.com/people/all.php only.
 * Applies the ArabPlasma purple dark theme to the people directory
 * without touching the shared style.css or any other page.
 *
 * Load this AFTER style.css in people/header.php or all.php.
 */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

/* ── Design tokens ────────────────────────────────────────── */
:root {
  --p-bg-deep:    #0e0a1a;
  --p-header-bg: #3d0066;
  --p-purple:    #5a0096;
  --p-accent:    #a855f7;
  --p-accent-d:  #7c3aed;
  --p-card:      #ffffff;
  --p-paper:     #f8f5ff;
  --p-line:      #e2d9f3;
  --p-muted:     #5c5470;
  --p-ink:       #1a1030;
}

/* ── Base ────────────────────────────────────────────────── */
body {
  font-family: 'Inter', Arial, sans-serif;
  background: var(--p-paper);
}

/* ── Navbar override — purple instead of cornflowerblue ──── */
nav {
  background-color: var(--p-header-bg) !important;
}
nav ul li:hover {
  background-color: var(--p-purple) !important;
}

/* ── Sub-menus ───────────────────────────────────────────── */
.Sub {
  background-color: #f3e8ff !important;
  border-top: 3px solid var(--p-header-bg);
}
.Sub ul li:hover {
  background-color: #ede9fe !important;
}
.Sub ul li a { color: var(--p-ink) !important; }
.Sub ul p    { color: var(--p-header-bg) !important; }

/* Mobile: pale purple drawer matching styleMobile.css */
@media (max-width: 900px) {
  .Sub {
    background-color: #f3e8ff !important;
    border-top: 2px solid #3d0066 !important;
  }
  .Sub ul p {
    color: #ffffff !important;
    background-color: #3d0066 !important;
    border-bottom: none !important;
    border-radius: 6px !important;
    padding: 13px 16px !important;
  }
  .Sub ul li:hover {
    background-color: #ede9fe !important;
  }
  .Sub ul li a {
    color: #1a1030 !important;
  }
  .Sub ul li a:hover {
    color: #3d0066 !important;
  }
}

/* ── Page background ──────────────────────────────────────── */
.PageLayout {
  background-color: var(--p-paper) !important;
}

/* ── Header banner ───────────────────────────────────────── */
.HeaderLayout.ChildPage {
  background: var(--p-bg-deep);
  background-image:
    radial-gradient(ellipse 700px 300px at 20% 50%, rgba(168,85,247,.20), transparent 60%),
    radial-gradient(ellipse 500px 300px at 85% 50%, rgba(255,152,0,.08), transparent 60%);
  color: #fff;
  padding: 36px 24px 32px !important;
  border-top: none !important;
}

.HeaderLayout.ChildPage p {
  font-family: 'IBM Plex Sans', Arial, sans-serif !important;
  font-size: 36px !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: -0.01em;
}

/* ── Content area ────────────────────────────────────────── */
.ContentLayout {
  background-color: var(--p-paper) !important;
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 20px !important;
}

/* ── Affiliation section headers (the <p> grouping labels) ── */
.ContentLayout .innerrow {
  border: none !important;
  width: calc(100% - 0px) !important;
  max-width: 1180px;
  padding: 0 !important;
  margin: 0 auto 8px !important;
}

.ContentLayout .innerrow > p {
  font-family: 'IBM Plex Sans', Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #fff !important;
  background: var(--p-header-bg);
  padding: 10px 18px !important;
  border-radius: 8px 8px 0 0;
  margin: 24px 0 0 !important;
  letter-spacing: 0.02em;
  display: inline-block;
}

/* Info text row (the instructions paragraph at the top) */
.ContentLayout .innerrow:first-of-type {
  background: #f3e8ff;
  border: 1px solid #d8b4fe !important;
  border-radius: 8px;
  padding: 14px 18px !important;
  color: var(--p-ink);
  font-size: 14px;
  margin-bottom: 20px !important;
}
.ContentLayout .innerrow:first-of-type a {
  color: var(--p-accent-d);
  font-weight: 600;
}

/* ── Profile card grid ───────────────────────────────────── */
.ContentLayout .inner {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 16px !important;
  width: 100% !important;
  background: var(--p-paper);
  border: 1px solid var(--p-line);
  border-top: none;
  border-radius: 0 0 10px 10px;
  padding: 20px !important;
  margin: 0 auto 4px !important;
}

/* ── Individual person card ──────────────────────────────── */
.ContentLayout .inner div {
  width: auto !important;
  border: 1px solid var(--p-line) !important;
  border-top: 3px solid var(--p-header-bg) !important;
  border-radius: 10px !important;
  background: var(--p-card) !important;
  padding: 18px 14px !important;
  margin: 0 !important;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.06);
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
}

.ContentLayout .inner div:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(90,0,150,.13) !important;
}

/* Profile photo ───────────────────────────────────────────── */
.ContentLayout .inner div img,
.ContentLayout .inner div > a > img {
  width: 90px !important;
  height: 90px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  margin: 0 auto 8px !important;
  border: 3px solid var(--p-paper) !important;
  box-shadow: 0 0 0 2px var(--p-line) !important;
  display: block !important;
}

/* Name & affiliation text inside each card ─────────────────── */
.ContentLayout .inner div a {
  font-family: 'IBM Plex Sans', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--p-ink) !important;
  text-decoration: none !important;
  line-height: 1.4;
}

.ContentLayout .inner div a:hover {
  color: var(--p-header-bg) !important;
  text-decoration: none !important;
}

/* ArabPlasma cross-link badge (added via JS below) */
.arabplasma-badge {
  display: inline-block;
  font-size: 11px;
  background: #f3e8ff;
  border: 1px solid #d8b4fe;
  color: #6b21a8;
  padding: 3px 9px;
  border-radius: 999px;
  text-decoration: none !important;
  margin-top: 4px;
  font-family: 'Inter', Arial, sans-serif;
  font-weight: 500;
  transition: background 0.15s;
}
.arabplasma-badge:hover {
  background: #ede9fe;
  color: var(--p-header-bg) !important;
  text-decoration: none !important;
}

/* ── Footer override ─────────────────────────────────────── */
.FooterLayout {
  background-color: var(--p-bg-deep) !important;
}

.FooterLayout ul li {
  color: rgba(255,255,255,.80) !important;
}

.FooterLayout ul li a {
  color: rgba(255,255,255,.65) !important;
  border-color: transparent !important;
}

.FooterLayout ul li a:hover {
  color: #fff !important;
  border-color: rgba(255,255,255,.3) !important;
}

/* ── ButtonGeneral (Back button on profile page) ─────────── */
.ButtonGeneral {
  display: inline-block;
  background: var(--p-header-bg);
  color: #fff !important;
  padding: 9px 18px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  margin-top: 10px;
  transition: background 0.15s;
  font-family: 'Inter', Arial, sans-serif;
}
.ButtonGeneral:hover {
  background: var(--p-purple);
  text-decoration: none !important;
}

/* ── Filter toolbar ──────────────────────────────────────── */
.people-filter-bar {
  max-width: 1180px;
  margin: 0 auto 24px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--p-line);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.05);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.people-filter-bar input[type="text"] {
  flex: 1 1 260px;
  height: 42px !important;
  padding: 0 14px !important;
  border: 1px solid var(--p-line) !important;
  border-radius: 6px !important;
  font-size: 14.5px !important;
  font-family: 'Inter', Arial, sans-serif !important;
  background: var(--p-paper) !important;
  color: var(--p-ink) !important;
  margin: 0 !important;
  width: auto !important;
  transition: border-color .15s, box-shadow .15s;
}
.people-filter-bar input[type="text"]:focus {
  outline: none !important;
  border-color: var(--p-accent-d) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,.15) !important;
  background: #fff !important;
}

.people-filter-bar select {
  flex: 0 1 260px;
  height: 42px !important;
  padding: 0 12px !important;
  border: 1px solid var(--p-line) !important;
  border-radius: 6px !important;
  font-size: 14.5px !important;
  font-family: 'Inter', Arial, sans-serif !important;
  background: var(--p-paper) !important;
  color: var(--p-ink) !important;
  margin: 0 !important;
  width: auto !important;
  cursor: pointer;
  transition: border-color .15s;
}
.people-filter-bar select:focus {
  outline: none !important;
  border-color: var(--p-accent-d) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,.15) !important;
}

.people-filter-bar button {
  height: 42px;
  padding: 0 20px;
  background: var(--p-header-bg) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: 14.5px !important;
  font-family: 'Inter', Arial, sans-serif !important;
  font-weight: 600;
  cursor: pointer;
  width: auto !important;
  margin: 0 !important;
  transition: background .15s;
}
.people-filter-bar button:hover {
  background: var(--p-purple) !important;
}

.people-filter-bar .clear-btn {
  height: 42px;
  padding: 0 16px;
  background: transparent !important;
  color: var(--p-muted) !important;
  border: 1px solid var(--p-line) !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-family: 'Inter', Arial, sans-serif !important;
  cursor: pointer;
  width: auto !important;
  margin: 0 !important;
  transition: border-color .15s, color .15s;
  display: none; /* shown by JS when filters are active */
}
.people-filter-bar .clear-btn:hover {
  border-color: var(--p-accent-d) !important;
  color: var(--p-ink) !important;
}

.people-filter-count {
  font-size: 13px;
  color: var(--p-muted);
  font-family: 'Inter', Arial, sans-serif;
  margin-left: auto;
  white-space: nowrap;
}

/* Hidden state for filtered-out cards and empty groups */
.people-card-hidden  { display: none !important; }
.people-group-hidden { display: none !important; }

/* Highlight matching text */
.people-highlight {
  background: #f3e8ff;
  color: var(--p-header-bg);
  border-radius: 2px;
  padding: 0 1px;
}

@media (max-width: 900px) {

  /* ── Fix nav height and logo on mobile ────────────────────
     The existing nav becomes 100px tall on mobile (from
     styleMobile.css). Adjust PageLayout offset to match.   */
  .PageLayout {
    top: 100px !important;
  }

  /* Nav logo image — keep it small in the navbar */
  nav ul p img,
  nav img {
    height: 36px !important;
    width: auto !important;
    display: block;
  }

  /* Sub-menu on mobile */
  .Sub {
    top: 100px !important;
  }

  /* Header banner — reduce padding on mobile */
  .HeaderLayout.ChildPage {
    padding: 20px 16px !important;
  }

  .HeaderLayout.ChildPage p {
    font-size: 26px !important;
    padding: 0 12px !important;
  }

  /* Profile card grid */
  .ContentLayout .inner {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  .ContentLayout .inner div img,
  .ContentLayout .inner div > a > img {
    width: 64px !important;
    height: 64px !important;
  }

  .ContentLayout .inner div a {
    font-size: 12.5px !important;
  }

  /* Filter bar on mobile */
  .people-filter-bar {
    gap: 8px;
    padding: 12px;
    flex-direction: column;
  }

  .people-filter-bar input[type="text"],
  .people-filter-bar select {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  .people-filter-bar button,
  .people-filter-bar .clear-btn {
    width: 100% !important;
  }

  .people-filter-count {
    margin-left: 0;
    width: 100%;
    text-align: center;
  }

  /* Affiliation section headers */
  .ContentLayout .innerrow > p {
    font-size: 13px !important;
    padding: 8px 14px !important;
  }

}

@media (max-width: 480px) {

  .ContentLayout .inner {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  .ContentLayout .inner div {
    padding: 12px 8px !important;
  }

  .ContentLayout .inner div img,
  .ContentLayout .inner div > a > img {
    width: 56px !important;
    height: 56px !important;
  }

  .ContentLayout .inner div a {
    font-size: 12px !important;
  }

  .arabplasma-badge {
    font-size: 10px !important;
    padding: 2px 7px !important;
  }

  .HeaderLayout.ChildPage p {
    font-size: 22px !important;
  }

}