/* Profile picture sizing - scale with sidebar on desktop */
aside div img {
  max-width: 80% !important;
  width: 210px !important;
  height: auto !important;
}

/* Hide profile picture on mobile */
@media (max-width: 767px) {
  aside div img {
    display: none !important;
  }
}

/* Change sidebar background to lighter purple like old site */
aside {
  background-color: #9cabcd !important;
}

/* Sidebar scales with viewport but caps at 300px max */
@media screen and (min-width: 768px) {
  aside {
    width: min(25vw, 300px) !important;
  }
  
  main {
    padding-left: min(25vw, 300px) !important;
  }
}

/* Remove colored backgrounds from social icons - just white icons */
aside ul.social {
  display: flex !important;
  gap: min(15px, 2vw) !important;
  justify-content: center !important;
}

aside ul.social a {
  font-size: min(.9em, 2.5vw) !important;
  background-color: transparent !important;
  color: #e8e5f0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0.5em !important;
  line-height: normal !important;
}

/* Purple background around white content area */
body {
  background-color: #dae4f7 !important;
  font-family: 'Merriweather', Georgia, serif !important;
}

/* White background for main content area */
main {
  background-color: #ffffff !important;
  min-height: 0 !important;
  height: auto !important;
  margin-top: 3em !important;
}

/* Allow content to extend full width instead of fixed max-width */
main article {
  max-width: none !important;
}

/* Add some shadow to make the white content area stand out */
main {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

/* Update fonts to match old site - serif for body, sans-serif for headings */
main article {
  font-family: 'Merriweather', Georgia, serif !important;
  font-size: 1.1em;
  line-height: 1.6em;
  padding-top: 1.2em !important;
}

/* Sidebar title ONLY in serif font - not other h1s */
/* aside > div > h1,
aside > div > h1 a {
  font-family: 'Merriweather', Georgia, serif !important;
  color: white !important;
} */

/* Main content and other headings in sans-serif */
main h1,
h2, h3, h4, h5, h6 {
  font-family: 'Open Sans', 'Source Sans Pro', 'Roboto', 'Segoe UI', sans-serif !important;
}

/* Page title color - light reddish-orange */
main h1 {
  color: #dd6651 !important;
}

/* Sidebar navigation menu items in sans-serif */
aside nav,
aside nav ul li,
aside nav ul li a {
  font-family: 'Open Sans', 'Source Sans Pro', 'Roboto', 'Segoe UI', sans-serif !important;
}

/* Hamburger menu button - hidden on desktop, visible on mobile */
.hamburger-menu {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 1001;
}

.hamburger-menu span {
  display: block;
  width: 30px;
  height: 3px;
  background: white;
  border-radius: 2px;
  transition: all 0.3s linear;
}

/* Mobile responsiveness - compact header on small screens */
@media screen and (max-width: 767px) {
  /* Show hamburger menu on mobile */
  .hamburger-menu {
    display: flex !important;
  }
  
  /* Smaller profile picture on mobile */
  aside div img {
    max-width: 80px !important;
    width: 80px !important;
  }
  
  /* Hide navigation menu by default on mobile */
  aside nav {
    display: none !important;
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    background-color: #9cabcd !important;
    z-index: 999 !important;
    padding-top: 0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  }
  
  /* Show menu when active */
  aside nav.active {
    display: block !important;
  }
  
  aside nav ul {
    padding: 15px 20px !important;
  }
  
  aside nav ul li {
    display: block !important;
    padding: 12px 0 !important;
    font-size: 1.3em !important;
    border-bottom: 1px solid rgba(255,255,255,0.2) !important;
  }
  
  aside nav ul li:last-child {
    border-bottom: none !important;
  }
  
  /* Social icons in mobile menu */
  aside nav ul.social {
    display: flex !important;
    justify-content: center !important;
    gap: 25px !important;
    padding: 15px 20px !important;
    border-top: 1px solid rgba(255,255,255,0.3) !important;
  }
  
  aside nav ul.social li {
    border-bottom: none !important;
    padding: 0 !important;
  }
  
  aside nav ul.social a {
    font-size: 0.9em !important;
    color: white !important;
  }
  
  /* Compact sidebar layout */
  aside div {
    padding: 10px !important;
  }
  
  /* Make sidebar horizontal/compact */
  aside {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 10px 20px !important;
    gap: 15px !important;
    z-index: 1000 !important;
  }
  
  aside > button.hamburger-menu {
    order: 1 !important;
  }
  
  aside > div {
    order: 2 !important;
    padding: 0 !important;
  }
  
  aside > div h1 {
    margin: 0 !important;
    font-size: 1em !important;
  }
  
  /* Hide everything in sidebar div except the title */
  aside > div > a {
    display: none !important;
  }
  
  /* Move main content below fixed header */
  main {
    padding-left: 0 !important;
    margin-top: 60px !important;
  }
}

/* About Me page layout */
.about-container {
  display: block;
  overflow: auto;
}

.about-photo {
  float: right;
  width: min(300px, 40%);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin: 2.5em 0 1em 2em;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Intro text on About Me page */
.intro-text {
  font-size: 1.5em;
  font-weight: 500;
  display: block;
  margin-top: 1em;
  margin-bottom: 0.5em;
}

/* Restore paragraph spacing in about-text */
.about-text p {
  margin-top: 1em;
  margin-bottom: 1em;
}

.about-text p:first-of-type {
  margin-top: 0;
}

@media (max-width: 767px) {
  .about-container {
    display: flex;
    flex-direction: column;
  }
  
  .about-photo {
    float: none;
    width: min(300px, 70%);
    max-width: none;
    margin: 1.5em auto 0 auto;
    order: 2;
  }
  
  .about-text {
    order: 1;
  }
}

/* Accordion styles for research abstracts */
details.abstract-accordion {
  margin: 0.5em 0;
}

details.abstract-accordion summary {
  cursor: pointer;
  font-weight: 600;
  color: #4a6fa5;
  padding: 0.5em 0;
  list-style: none;
  display: inline;
  align-items: center;
}

details.abstract-accordion summary::-webkit-details-marker {
  display: none;
}

details.abstract-accordion summary::before {
  content: '\25B6  ';
  font-size: 0.7em;
  transition: transform 0.2s ease;
  display: inline-block;
}

details.abstract-accordion[open] summary::before {
  transform: rotate(90deg);
}

details.abstract-accordion summary:hover {
  color: #2c4a6e;
}

details.abstract-accordion .abstract-content {
  padding: 1em;
  margin-top: 0.5em;
  background-color: #f8f9fa;
  border-left: 3px solid #4a6fa5;
  border-radius: 0 4px 4px 0;
  font-size: 0.9em;
}

/* Research project section with image */
.research-project {
  margin-bottom: 1em;
  overflow: auto;
}

.research-project-image {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  float: left;
  margin: 0 1.5em 1em 0;
}

.research-project-image-full {
  width: 200px;
  height: auto;
  border-radius: 8px;
  float: left;
  margin: 0 1.5em 1em 0;
  shape-outside: margin-box;
}

/* Ensure text has minimum space beside floated images, otherwise wrap below */
.research-project-content details,
.research-project-content p {
  min-width: 250px;
}

.research-project-image-block {
  width: 200px;
  height: auto;
  border-radius: 8px;
  display: block;
  margin: 1em 0;
}

/* Modifier to float images right instead of left */
.float-right {
  float: right !important;
  margin: 0 0 1em 1.5em !important;
}

.research-project-content {
  overflow: auto;
}

.research-project-content h2 {
  margin-top: 0;
}

@media (max-width: 767px) {
  .research-project-image {
    float: none;
    display: block;
    margin: 1em auto;
    width: 80px;
    height: 80px;
  }
  
  .research-project-image-full {
    float: none;
    display: block;
    margin: 1em auto;
    width: 150px;
  }
  
  .research-project-image-block {
    margin: 1em auto;
  }
}

/* Button style for research page links */
.btn-link {
  display: inline-block;
  background-color: #e66244;
  color: #fff !important;
  padding: 0.5em 1em;
  font-family: 'Source Sans Pro', Roboto, 'Open Sans', 'Liberation Sans', 'DejaVu Sans', Verdana, Helvetica, Arial, sans-serif;
  font-size: 0.9em;
  font-weight: 500;
  text-decoration: none;
  border-radius: 6px;
  margin: 0.25em 0.5em 0.25em 0;
  transition: background-color 0.2s ease;
}

.btn-link:hover {
  background-color: #ff5a09;
  color: #fff !important;
}