@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap');

/* Purdue Lab site styles - Version 2 */

/* Purdue black & gold palette */
:root {
  --purdue-black: #000000;
  --purdue-gold: #ceb888;
  --purdue-gold-dark: #8a6b1f;
  --purdue-gold-light: #f7f3e6;
  --purdue-ink: #111111;
  --green-dark: #2d5016;
  --green-accent: #4a7c2c;
  --green-light: #e8f3e0;
  --content-max: 1200px;
  --content-pad: 1.5rem;
}

/* Reset and base typography */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.6;
  color: var(--purdue-ink);
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%234d7c2c' stroke-width='0.3' stroke-opacity='0.1'%3E%3Cpath d='M5 5 L50 15 L95 5 M5 5 L25 35 L50 15 L75 35 L95 5 M5 5 L5 50 L25 35 L75 35 L95 50 L95 5 M5 50 L25 65 L25 35 L50 15 L50 85 L25 65 L5 95 L50 85 L95 95 L75 65 L50 85 M75 65 L95 50 M75 65 L75 35 M25 65 L5 50'/%3E%3C/g%3E%3Cg fill='%234d7c2c'%3E%3Ccircle cx='5' cy='5' r='0.8'/%3E%3Ccircle cx='50' cy='15' r='0.8'/%3E%3Ccircle cx='95' cy='5' r='0.8'/%3E%3Ccircle cx='25' cy='35' r='0.8'/%3E%3Ccircle cx='75' cy='35' r='0.8'/%3E%3Ccircle cx='5' cy='50' r='0.8'/%3E%3Ccircle cx='95' cy='50' r='0.8'/%3E%3Ccircle cx='25' cy='65' r='0.8'/%3E%3Ccircle cx='75' cy='65' r='0.8'/%3E%3Ccircle cx='5' cy='95' r='0.8'/%3E%3Ccircle cx='50' cy='85' r='0.8'/%3E%3Ccircle cx='95' cy='95' r='0.8'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 150px 150px;
  position: relative;
}

/* Header */
.site-header {
  background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%);
  color: var(--purdue-gold);
  padding: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  position: sticky;
  top: 0;
  z-index: 1000;
  overflow: hidden;
}
.site-header::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(77, 124, 44, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.site-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--purdue-gold);
  z-index: 1;
}

.site-header-inner {
  padding: 1.25rem var(--content-pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 2rem;
}

.site-title {
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--purdue-gold);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  text-align: center;
}

/* Navigation */
.site-nav {
  display: flex;
  justify-content: center;
}

.site-nav ul {
  list-style: none;
  display: flex;
  justify-content: flex-end;
  gap: 2rem;
  margin: 0;
  padding: 0;
}

.site-nav ul li a {
  color: var(--purdue-gold-light);
  text-decoration: none;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 0.75rem 1rem;
  display: inline-block;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
}

.site-nav ul li a:hover,
.site-nav ul li a.active {
  border-bottom-color: var(--green-accent);
  color: var(--purdue-gold);
}

/* Hero section */
.hero {
  position: relative;
  height: 200px;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
  color: #fff;
  max-width: var(--content-max);
  margin: 0 auto;
  overflow: hidden;
  border-bottom: 4px solid var(--purdue-gold);
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 20% 50%, rgba(77, 124, 44, 0.15) 0%, transparent 40%),
    radial-gradient(circle at 80% 50%, rgba(206, 184, 136, 0.1) 0%, transparent 40%),
    repeating-linear-gradient(90deg, transparent, transparent 100px, rgba(206, 184, 136, 0.02) 100px, rgba(206, 184, 136, 0.02) 200px);
  opacity: 1;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2rem;
  text-align: center;
  z-index: 1;
}

.hero-overlay h2 {
  font-size: 2.2rem;
  font-weight: 500;
  letter-spacing: 2px;
  color: var(--purdue-gold);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  font-family: 'Playfair Display', Georgia, serif;
  position: relative;
}

.hero-overlay h2::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--green-accent) 50%, transparent 100%);
}

/* Main container */
.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 2.5rem var(--content-pad);
  background: #ffffff;
  min-height: 60vh;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.06);
}

.container > section {
  margin-bottom: 3.5rem;
}

.container > section:last-child {
  margin-bottom: 0;
}

/* Home page specific layouts */
.about-section {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

.about-text {
  flex: 1;
}

.about-image {
  flex: 1;
}

.about-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 3px solid var(--green-accent);
}

.pubs-news-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

.news-sidebar {
  background: linear-gradient(to bottom, #f7f3e6 0%, #f0ead8 100%);
  padding: 1.5rem;
  border-left: 4px solid var(--green-accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 120px;
}

.news-sidebar h2 {
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
}

.news-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.news-list li {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(138, 107, 31, 0.2);
}

.news-list li:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.news-list a {
  color: var(--purdue-black);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.news-list a:hover {
  color: var(--green-dark);
}

.news-date {
  font-size: 0.85rem;
  color: #666;
  font-style: italic;
  display: block;
  margin-top: 0.25rem;
}

@media (max-width: 900px) {
  .about-section {
    grid-template-columns: 1fr;
  }
  
  .about-image {
    order: -1;
  }
  
  .pubs-news-grid {
    grid-template-columns: 1fr;
  }
  
  .news-sidebar {
    position: static;
  }
}

/* Section headings */
h2 {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--purdue-black);
  padding-bottom: 0.75rem;
  margin-bottom: 1.75rem;
  font-size: 1.8rem;
  font-weight: 600;
  position: relative;
}
h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 80px;
  height: 2px;
  background: var(--green-accent);
}

h3 {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--purdue-black);
  margin: 1.5rem 0 1rem;
  font-size: 1.3rem;
  font-weight: 600;
}

/* Research feature cards */
.research-features {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 2rem 0;
  justify-content: center;
}

.feature-card {
  background: linear-gradient(to bottom right, #ffffff 0%, #fafaf8 100%);
  border-left: 4px solid var(--green-accent);
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
  flex: 0 1 calc(33.333% - 1rem);
  min-width: 280px;
}

.feature-card h3 {
  text-align: center;
}

.feature-card p {
  text-align: justify;
}

.feature-icon {
  width: 50px;
  height: 50px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green-light);
  border-radius: 8px;
  position: relative;
}

.feature-icon svg {
  width: 28px;
  height: 28px;
  color: var(--green-dark);
  z-index: 1;
}
.feature-card::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(77, 124, 44, 0.05) 0%, transparent 70%);
  pointer-events: none;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.feature-card h3 {
  margin-top: 0;
  font-size: 1.1rem;
  color: var(--green-dark);
}

.feature-card p {
  margin: 0.5rem 0 0;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Search box */
.search-box {
  margin: 2rem 0;
  position: relative;
}

.search-box input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border: 2px solid var(--purdue-gold);
  border-radius: 4px;
  font-family: 'Source Serif Pro', Georgia, serif;
}

.search-box input:focus {
  outline: none;
  border-color: var(--purdue-gold-dark);
  box-shadow: 0 0 0 3px rgba(206, 184, 136, 0.2);
}

/* Publications list */
.publications-list {
  margin-top: 2rem;
}

.publication-item {
  padding: 1.25rem;
  background: linear-gradient(to right, #fafaf8 0%, #ffffff 100%);
  border-left: 3px solid var(--purdue-gold);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  margin-bottom: 1rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.publication-item:hover {
  border-left-color: var(--green-accent);
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.news-item-image {
  width: 100%;
  max-width: 600px;
  height: auto;
  margin: 1rem 0;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.publication-item h4 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--purdue-black);
}

.publication-authors {
  font-size: 0.9rem;
  color: #555;
  margin: 0.25rem 0;
}

.publication-venue {
  font-size: 0.9rem;
  color: #666;
  font-style: italic;
}

/* People page with sidebar navigation */
.people-container {
  display: flex;
  gap: 2rem;
}

.people-nav {
  flex: 0 0 220px;
  position: sticky;
  top: 100px;
  height: fit-content;
}

.people-nav ul {
  list-style: none;
  border-left: 3px solid var(--green-accent);
}

.people-nav li {
  margin-bottom: 0.5rem;
}

.people-nav a {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--purdue-black);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
}

.people-nav a:hover,
.people-nav a.active {
  background: var(--green-light);
  color: var(--green-dark);
}

.people-content {
  flex: 1;
}

.people-section {
  margin-bottom: 3rem;
  scroll-margin-top: 100px;
}

.person-card {
  display: flex;
  gap: 1.5rem;
  padding: 1.5rem;
  background: linear-gradient(to right, #fafaf8 0%, #ffffff 100%);
  border-left: 3px solid var(--green-accent);
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.person-card img {
  width: 120px;
  height: 150px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

.person-info h4 {
  margin: 0 0 0.25rem;
  font-size: 1.1rem;
  color: var(--purdue-black);
}

.person-role {
  font-style: italic;
  color: #666;
  margin-bottom: 0.5rem;
}

.person-bio {
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Footer */
footer {
  background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%);
  color: var(--purdue-gold);
  text-align: center;
  padding: 2rem 1rem;
  margin-top: 3rem;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
  position: relative;
}

footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--purdue-gold) 50%, transparent 100%);
}

/* Responsive */
@media (max-width: 768px) {
  .site-header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .site-title {
    font-size: 16px;
  }
  
  .site-nav ul {
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  
  .site-nav ul li a {
    font-size: 9px;
    padding: 0.4rem 0.5rem;
  }
  
  .people-container {
    flex-direction: column;
  }
  
  .people-nav {
    position: static;
  }
  
  .people-nav ul {
    display: flex;
    flex-wrap: wrap;
    border-left: none;
    border-top: 3px solid var(--purdue-gold);
  }
  
  .person-card {
    flex-direction: column;
  }
  
  .person-card img {
    width: 100%;
    height: auto;
  }
}

@media (max-width: 600px) {
  .site-title {
    font-size: 18px;
  }
  
  .hero-overlay h2 {
    font-size: 1.5rem;
  }
  
  .research-features {
    grid-template-columns: 1fr;
  }
}