/* Minimalist Base */
* {
    box-sizing: border-box;
}

body {
  /* Light neutral background */
  background-color: #fafaf8; 
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 90%;  
  width: 1000px;     
  margin: 0 auto;
  padding: 2rem 1rem;
}

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

.nav-link {
  text-decoration: none;
  color: #666;
  font-weight: 500;
  transition: color 0.2s ease;
}

.nav-link:hover { 
  color: #000; 
}

.nav-link.active {
  color: #000;
  border-bottom: 2px solid #000; /* Subtle underline for the current page */
}

/* Profile Picture Logic */
.profile-pic {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 1.5rem auto;
  border: 4px solid #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.hero-pic {
  width: 70%;           
  max-width: 800px; 
  height: auto;
  display: block;
  margin-left: auto; 
  margin-right: auto;
  margin-bottom: 1.5rem;
  border-radius: 12px;
  object-fit: cover;
}

.image-container {
  width: 100%;
  max-width: 800px; /* Match this to your image's max-width */
  margin: 0 auto 1.5rem auto;
  text-align: center; /* Centers the caption text */
}

.image-container figcaption {
  font-size: 0.85rem;    /* Makes it small */
  font-style: italic;    /* Makes it italics */
  color: #666;           /* A soft grey */
  margin-top: -0.5rem;    /* Small gap between image and text */
  line-height: 1.4;
}

.home-content {
  text-align: center; 
}

/* Update the H1 inside home-content to remove default browser margin */
.home-content h1 {
  margin-top: 0;        /* Removes top gap near profile pic */
  margin-bottom: 0.5rem; /* Precise control over gap to subtitle */
  font-size: 2.2rem;
  color: #222;
}

.home-subtitle {
  color: #888;
  font-size: 1.2rem;
  font-weight: 500;
  text-align: center;
  margin-top: 0;        /* Reset this; the H1 margin-bottom now handles the gap */
  margin-bottom: 1.5rem; /* Creates space between subtitle and social buttons */
}

/* Ensure the bio text itself is styled correctly as a class */
.home-bio {
  max-width: 800px;   
  margin: 3rem auto;       
  text-align: left;        
  display: block;
  font-size: 1.1rem;      
  line-height: 1.8;       
  color: #555;
}

.home-bio p {
  margin: 0;
  font-size: 1.1rem;       /* Slightly larger for better presence as solo text */
  line-height: 1.8;       /* Increased line-height to reduce mental load/clutter */
  color: #555;
}

/* If you still use multiple paragraphs, this adds space between them */
.home-bio p + p {
  margin-top: 1.5rem;
}

.social-links {
  margin-top: 0.75rem;
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /* Allows buttons to wrap on mobile screens */
  gap: 12px;       /* Tightens the space between buttons */
}

.social-links li {
  display: inline-block;
}

.social-links a {
  text-decoration: none;
  color: #555;
  font-size: 0.9rem;
  font-weight: 500;
  
  /* The "Button" Styling */
  background-color: #ffffff;
  padding: 8px 16px;
  border-radius: 50px; /* Makes them pill-shaped */
  border: 1px solid #e1e1e1;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

/* Hover Effect */
.social-links a:hover {
  background-color: #f0f0f0;
  color: #000;
  border-color: #d1d1d1;
  transform: translateY(-1px); /* Subtle lift effect */
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

.social-links i {
  font-size: 1rem;
}

footer {
  text-align: center;
  font-size: 0.8rem;
  color: #999;
  margin-top: 4rem;
}

/* Styling for Information Pages (About, Research, etc.) */
.page-header {
  border-bottom: 1px solid #e1e1e1;
  padding-bottom: 1rem;
  margin-bottom: 2rem;
}

.page-header h1 {
  font-size: 2rem;
  color: #222;
  margin: 0;
}

.content-area h2 {
  font-size: 1.5rem;
  color: #222;
  margin-top: 2.5rem;
  border-left: 3px solid #666; /* Subtle accent */
  padding-left: 1rem;
}

.content-area p {
  font-size: 1.05rem;
  color: #444;
  margin-bottom: 1.5rem;
}

.content-area ul {
  padding-left: 1.2rem;
  margin-bottom: 1.5rem;
}

.content-area li {
  margin-bottom: 0.5rem;
}

/* Container for the code block */
pre {
  background-color: #f6f8fa; /* Light grey background */
  border: 1px solid #d0d7de;   /* Subtle border */
  border-radius: 6px;        /* Rounded corners */
  padding: 16px;             /* Space inside the box */
  overflow: auto;            /* Adds scrollbars if code is too wide */
  line-height: 1.45;         /* Improves readability */
  margin-bottom: 16px;       /* Space after the block */
  
  /* Optional: adds a slight shadow for a "card" feel */
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

/* Ensures the font inside stays consistent */
pre code {
  background: transparent;
  padding: 0;
  word-break: normal;
  white-space: pre;
}

/* If your highlighter adds a class like .language-python */
figure.highlight {
  position: relative;
}

figure.highlight::before {
  content: "Code";
  position: absolute;
  top: 0;
  right: 10px;
  font-size: 10px;
  text-transform: uppercase;
  color: #6e7781;
}

@media (min-width: 768px) {
  .container {
    padding: 2rem;     /* Restores generous padding on larger screens */
  }
  
  /* If you want the text to stay a bit more readable/centered 
     even when the container is 1000px wide */
  .content-area {
    max-width: 850px;
    margin: 0 auto;
  }
}

/* Table Base Styling */
table {
  width: 100%;
  border-collapse: collapse; /* Removes the double-border look */
  margin: 2rem 0;
  font-size: 0.95rem;
  border-bottom: 2px solid #eee; /* Clean finishing line at the bottom */
}

/* Header Row (Filled) */
th {
  background-color: #f4f4f2; /* Light grey/beige to match your theme */
  color: #222;
  font-weight: 600;
  text-align: left;
  padding: 12px 15px;
  border-bottom: 2px solid #e1e1e1;
}

/* Table Body Cells */
td {
  padding: 12px 15px;
  border-bottom: 1px solid #eee; /* Light horizontal dividers */
  color: #555;
}

/* Responsive Table: Allows horizontal scrolling on small phones */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}