/* title and subtitle */
#title-block-header {
  margin-bottom: 0px;
}

/* Custom subtitle styling for hero section */
#hero-heading .subtitle {
  font-size: 1.2rem;
  color: #7f8c8d;
  margin-bottom: 1em;
  font-weight: 400;
  font-style: italic;
}

body.quarto-dark #hero-heading .subtitle {
  color: #bdc3c7;
}

/* see all links */
.about-links.subtitle {
  font-family: "Red Hat Text";
  font-size: 1.2rem;
}

/* social links: block of links */
.about-entity .about-links {
  justify-content: center !important;
  column-gap: 0em !important;
  font-size: 1.1rem !important;
}

/* social links: individual links */
.about-entity .about-link {
  padding: 0.25em 0.25em !important;
  border: none !important;  
  font-size: 1.5rem !important; /* Make icons larger */
  transition: all 0.2s ease-in-out !important; /* Smooth transition for hover effects */
}

/* Make icons even larger on hover for better interactivity */
.about-entity .about-link:hover {
  font-size: 1.8rem !important;
  transform: scale(1.1) !important;
}

/* Ensure the icon containers have enough space */
.about-entity .about-link i,
.about-entity .about-link .fa,
.about-entity .about-link .ai {
  font-size: inherit !important;
  line-height: 1 !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* Increase spacing between icons for better visual separation */
.about-entity .about-links {
  justify-content: center !important;
  column-gap: 0.5em !important; /* Increased from 0em */
  font-size: 1.1rem !important;
}

/* about area */
.about-entity {
  background-color: transparent;
  padding: 3em 0em 3em 0em !important;
  margin: 0em 2em 0em 2em;
  border-radius: 5px;
}

/* Professional profile styling */
#hero-heading .h1 {
  font-size: 2.5rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 0.5em;
  line-height: 1.2;
}

#hero-heading p {
  font-size: 1.3rem;
  color: #2c3e50;
  margin-bottom: 0.3em;
  line-height: 1.4;
}

#hero-heading strong {
  font-weight: 600;
  color: #2c3e50;
  font-size: 1.4rem;
}

/* mobile query up for screens up to ~992px wide */
@media screen and (max-width: 991.98px) {
  /* wrap lately section */
  #lately .grid {
    display: flex;
    flex-wrap: wrap;
  }
  
  /* listings */
  #blog, #talks, #publications, #projects {
    flex-basis: 40% !important;
    flex-grow: 1;
  }

  /* social links: block of links */
  .about-entity .about-links {
    font-size: 1.1rem !important;
  }
    
  /* social links: individual links - mobile adjustments */
  .about-entity .about-link {
    font-size: 1.3rem !important; /* Slightly smaller on mobile but still larger than original */
  }
  
  .about-entity .about-link:hover {
    font-size: 1.5rem !important; /* Smaller hover effect on mobile */
    transform: scale(1.05) !important;
  }
}

/* mobile query up for screens up to ~576px wide */
@media screen and (max-width: 576px) {

  /* wrap about me section */
  #about-me .grid {
    display: flex;
    flex-wrap: wrap;
  }

  /* wrap lately section */
  #lately .grid {
    display: flex;
    flex-wrap: wrap;
  }

  /* listings */
  #blog, #talks, #publications, #projects {
    flex-basis: 100% !important;
  }

  /* social links: block of links */
  .about-entity .about-links {
    font-size: 1rem !important;
  }
  
  /* social links: individual links - small mobile adjustments */
  .about-entity .about-link {
    font-size: 1.2rem !important; /* Even smaller on very small screens but still larger than original */
  }
  
  .about-entity .about-link:hover {
    font-size: 1.4rem !important; /* Smaller hover effect on very small screens */
    transform: scale(1.03) !important;
  }
  /* about area */
  .about-entity {
    margin: 0em 0em 0em 0em;
  }
}

/* Dark mode specific styling for about pages */
body.quarto-dark .about-entity {
  background-color: transparent !important;
}

/* Ensure title in about page has correct color for dark theme */
body.quarto-dark .quarto-title-block .title,
body.quarto-dark .quarto-title .title,
body.quarto-dark #title-block-header .title,
body.quarto-dark #title-block-header h1.title {
  color: #ede8de !important;
}

/* Ensure subtitle in about page has correct color for dark theme */
body.quarto-dark .quarto-title-block .subtitle,
body.quarto-dark .subtitle {
  color: #ede8de !important;
}

body.quarto-dark .about-entity .about-contents h1,
body.quarto-dark .about-entity .about-contents h2,
body.quarto-dark .about-entity .about-contents h3,
body.quarto-dark .about-entity .about-contents h4,
body.quarto-dark .about-entity .about-contents h5,
body.quarto-dark .about-entity .about-contents h6 {
  color: #ede8de !important;
}

body.quarto-dark .about-entity .about-contents p,
body.quarto-dark .about-entity .about-contents li,
body.quarto-dark .about-entity .about-contents span,
body.quarto-dark .about-entity .about-contents div {
  color: #ede8de !important;
}

body.quarto-dark .about-entity .about-contents a {
  color: #ede8de !important;
}

body.quarto-dark .about-entity .about-contents a:hover {
  color: #ede8de !important;
}

body.quarto-dark .about-links.subtitle {
  color: #ede8de !important;
}

body.quarto-dark .about-entity .about-links {
  color: #ede8de !important;
}

body.quarto-dark .about-entity .about-link {
  color: #ede8de !important;
}

body.quarto-dark .about-entity .about-link:hover {
  color: #ede8de !important;
}

/* Fix for any Bootstrap variables that might not be themed */
body.quarto-dark .about-entity .about-contents h2 {
  color: #ede8de !important;
}

body.quarto-dark .content-block .about-links {
  color: #ede8de !important;
}

body.quarto-dark .content-block .about-links:hover {
  color: #ede8de !important;
}

/* Dark mode icon styling for about pages */
body.quarto-dark .about-entity i,
body.quarto-dark .about-entity .fa,
body.quarto-dark .about-entity .fa-solid,
body.quarto-dark .about-entity .fa-regular,
body.quarto-dark .about-entity .fa-brands,
body.quarto-dark .about-entity .ai,
body.quarto-dark .about-links i,
body.quarto-dark .about-link i,
body.quarto-dark .content-block .about-links i {
  color: #ede8de !important;
}

body.quarto-dark .fa-ul .fa-li i,
body.quarto-dark .fa-ul .fa-li .fa,
body.quarto-dark .fa-ul .fa-li .ai {
  color: #ede8de !important;
}

/* Ensure all icons in about pages use dark theme colors */
body.quarto-dark .about-entity [class*="fa-"],
body.quarto-dark .about-entity [class*="ai-"],
body.quarto-dark .about-links [class*="fa-"],
body.quarto-dark .about-links [class*="ai-"],
body.quarto-dark .about-link [class*="fa-"],
body.quarto-dark .about-link [class*="ai-"] {
  color: #ede8de !important;
}

/* Light theme specific styling for about pages */
body.quarto-light .about-entity {
  background-color: transparent !important;
}

/* Ensure title in about page has correct color for light theme */
body.quarto-light .quarto-title-block .title,
body.quarto-light .quarto-title .title,
body.quarto-light #title-block-header .title,
body.quarto-light #title-block-header h1.title {
  color: #2c3e50 !important;
}

/* Ensure subtitle in about page has correct color for light theme */
body.quarto-light .quarto-title-block .subtitle,
body.quarto-light .subtitle {
  color: #2c3e50 !important;
}

body.quarto-light .about-entity .about-contents h1,
body.quarto-light .about-entity .about-contents h2,
body.quarto-light .about-entity .about-contents h3,
body.quarto-light .about-entity .about-contents h4,
body.quarto-light .about-entity .about-contents h5,
body.quarto-light .about-entity .about-contents h6 {
  color: #2c3e50 !important;
}

body.quarto-light .about-entity .about-contents p,
body.quarto-light .about-entity .about-contents li,
body.quarto-light .about-entity .about-contents span,
body.quarto-light .about-entity .about-contents div {
  color: #2c3e50 !important;
}

body.quarto-light .about-entity .about-contents a {
  color: #3498db !important;
}

body.quarto-light .about-entity .about-contents a:hover {
  color: #2980b9 !important;
}

body.quarto-light .about-links.subtitle {
  color: #2c3e50 !important;
}

body.quarto-light .about-entity .about-links {
  color: #7f8c8d !important;
}

body.quarto-light .about-entity .about-link {
  color: #7f8c8d !important;
}

body.quarto-light .about-entity .about-link:hover {
  color: #95a5a6 !important;
}

/* Light theme icon styling for about pages */
body.quarto-light .about-entity i,
body.quarto-light .about-entity .fa,
body.quarto-light .about-entity .fa-solid,
body.quarto-light .about-entity .fa-regular,
body.quarto-light .about-entity .fa-brands,
body.quarto-light .about-entity .ai,
body.quarto-light .about-links i,
body.quarto-light .about-link i,
body.quarto-light .content-block .about-links i {
  color: #7f8c8d !important;
}

body.quarto-light .about-entity .about-link:hover i,
body.quarto-light .about-entity .about-link:hover .fa,
body.quarto-light .about-entity .about-link:hover .fa-solid,
body.quarto-light .about-entity .about-link:hover .fa-regular,
body.quarto-light .about-entity .about-link:hover .fa-brands,
body.quarto-light .about-entity .about-link:hover .ai {
  color: #95a5a6 !important;
}

body.quarto-light .fa-ul .fa-li i,
body.quarto-light .fa-ul .fa-li .fa,
body.quarto-light .fa-ul .fa-li .ai {
  color: #7f8c8d !important;
}

/* Ensure all icons in about pages use light theme colors */
body.quarto-light .about-entity [class*="fa-"],
body.quarto-light .about-entity [class*="ai-"],
body.quarto-light .about-links [class*="fa-"],
body.quarto-light .about-links [class*="ai-"],
body.quarto-light .about-link [class*="fa-"],
body.quarto-light .about-link [class*="ai-"] {
  color: #7f8c8d !important;
}

/* Prospective student paragraph styling */
.prospective-student {
  color: darkred !important;
}

.prospective-student a {
  color: darkred !important;
}

.prospective-student a:hover {
  color: darkred !important;
}

/* More specific targeting for the prospective student section */
#about-me-2 .prospective-student {
  color: darkred !important;
}

#about-me-2 .prospective-student a {
  color: darkred !important;
}

#about-me-2 .prospective-student a:hover {
  color: darkred !important;
}

/* Even more specific for dark and light themes */
body.quarto-dark #about-me-2 .prospective-student,
body.quarto-light #about-me-2 .prospective-student {
  color: darkred !important;
}

body.quarto-dark #about-me-2 .prospective-student a,
body.quarto-light #about-me-2 .prospective-student a {
  color: darkred !important;
}

body.quarto-dark #about-me-2 .prospective-student a:hover,
body.quarto-light #about-me-2 .prospective-student a:hover {
  color: darkred !important;
}