/* css styles */
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@400;700&display=swap');

.navbar-brand .navbar-title {
  font-family: 'Kalam', cursive;
  font-size: 1.8rem; /* Kalam runs a bit bigger, so 1.8rem is perfect */
  font-weight: 400;
  color: #2c3e50;
}

.about-image {
  border: 2px solid #e2e8f0;
  padding: 5px; /* Creates a small white gap between the photo and the border */
}

/* --- 1. Custom Soft Blue Badge --- */
.badge-soft-blue {
  background-color: #e6f0fa; /* Very soft pastel blue background */
  color: #2b6dad;            /* Clear, readable medium-blue text */
  border: 1px solid #cce0f5; /* Subtle border to define the shape */
  padding: 0.2em 0.6em;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}

.badge-soft-blue:hover {
  background-color: #d1e6f9; /* Slightly darker on hover */
  color: #1a4f85;
  text-decoration: none;
}

/* --- 2. Custom Soft Blue Callout Box --- */
.project-callout {
  background-color: #f4f8fb; /* Ultra-light, clean background */
  border-left: 4px solid #7eb1db; /* Soft blue vertical ribbon */
  padding: 1.25rem;
  border-radius: 6px;
  margin-bottom: 1.5rem;
  color: #333333;
}

.project-callout-title {
  color: #2b6dad; /* Matching blue title */
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 1.05rem;
}


/* --- Custom Soft Blue Table of Contents (TOC) --- */

/* 1. Soften the inactive TOC text */
#quarto-toc-widget nav ul li a, 
.sidebar nav[role="doc-toc"] ul li a {
  color: #718096; /* Soft charcoal-gray */
  font-size: 0.88rem; /* Slightly smaller for a modern, tidy look */
  transition: all 0.2s ease;
}

/* 2. Soften the hover state */
#quarto-toc-widget nav ul li a:hover, 
.sidebar nav[role="doc-toc"] ul li a:hover {
  color: #2b6dad; /* Our custom clear blue */
  text-decoration: none;
}

/* 3. Style the active TOC link (where you are currently scrolling) */
#quarto-toc-widget nav ul li a.active, 
.sidebar nav[role="doc-toc"] ul li a.active {
  color: #2b6dad !important; /* Our custom clear blue text */
  font-weight: 500;
  border-left: 2px solid #2b6dad; /* Sleek vertical blue indicator */
  background-color: #f4f8fb; /* Matching ultra-soft blue background wash */
}

/* 4. Soften the TOC Header title ("On this page") */
#quarto-toc-widget h2, 
.sidebar nav[role="doc-toc"] h2 {
  font-size: 0.9rem;
  font-weight: 600;
  color: #4a5568;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 0.5rem;
  margin-bottom: 0.75rem;
}

/* --- Force Links Inside the Biography Column to turn Soft Blue --- */

/* 1. Target links inside the about-contents container (where your bio paragraphs live) */
.quarto-about-trestles .about-contents a {
  color: #2b6dad !important; /* Soft blue text */
  text-decoration: underline !important;
  text-underline-offset: 3px;
  font-weight: 500;
}

/* 2. Style the hover state for those bio links */
.quarto-about-trestles .about-contents a:hover {
  color: #1a4f85 !important; /* Slightly darker blue */
  text-decoration: none !important;
}


/* 1. Target the profile buttons specifically */
.about-links .about-link {
  background-color: #ffffff !important; /* Soft blue background */
  color: #4a5568 !important;            /* Readable medium-blue text */
  border: 1px solid #e2e8f0 !important; /* Subtle border */
  border-radius: 8px !important;       /* Softened corners */
  padding: 0.5rem 1rem !important;
  font-size: 1.2rem !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: all 0.2s ease-in-out !important;
}

/* 2. Style the hover effect */
.about-links .about-link:hover {
  background-color: #e2e8f0 !important; /* Slightly darker on hover */
  color: #2b6dad !important;
  transform: translateY(-2px) !important;
}

/* 3. Ensure the icons inside the buttons match the blue */
.about-links .about-link i {
  color: #4a5568 !important;
}

/* FORCE ALL TEXT LINKS IN THE MAIN PROFILE BODY TO BE SOFT BLUE */
.quarto-about-trestles .about-contents a,
.quarto-about-trestles .about-contents p a,
#hero-heading ~ div a,
#hero-heading + div a,
main a:not(.about-link) {
  color: #2b6dad !important; /* Your custom soft blue */
  text-decoration: none !important; /* This removes the underline */

}

/* Hover state for those same links */
.quarto-about-trestles .about-contents a:hover,
.quarto-about-trestles .about-contents p a:hover,
#hero-heading ~ div a:hover,
#hero-heading + div a:hover,
main a:not(.about-link):hover {
  color: #1a4f85 !important; /* Deeper blue on hover */
  text-decoration: underline !important; /* Adds underline back on hover for visibility */
  text-underline-offset: 3px !important;
}

/* --- Fix Panel Tabset Styles --- */

/* 1. Soften the tab text and inactive state */
.nav-tabs .nav-link {
  color: #4a5568 !important;
  font-weight: 500;
  border: none !important;
  background-color: transparent !important;
  margin-right: 5px;
}

/* 2. Style the hover state of tabs */
.nav-tabs .nav-link:hover {
  color: #2b6dad !important;
  background-color: #f4f8fb !important;
  border-radius: 6px;
}

/* 3. Style the ACTIVE tab (the one being viewed) */
.nav-tabs .nav-link.active {
  color: #2b6dad !important;
  font-weight: 600 !important;
  border-bottom: 2px solid #2b6dad !important; /* Elegant underline for the active tab */
  border-radius: 0px !important;
}

/* 4. Soften the tab container bar */
.nav-tabs {
  border-bottom: 1px solid #e2e8f0 !important;
  margin-bottom: 1.5rem;
}

/* --- Custom Soft Blue Navigation Bar --- */

/* 1. Change the navbar background and bottom border */
.navbar {
  background-color: #ffffff !important; /* Clean white background */
  border-bottom: 1px solid #e2e8f0 !important; /* Subtle gray-blue divider */
  box-shadow: 0 2px 4px rgba(43, 109, 173, 0.03); /* Extremely faint blue shadow */
}

/* 2. Style the navigation links (Home, Research, Contact) */
.navbar-nav .nav-link {
  color: #4a5568 !important; /* Soft slate-charcoal text */
  font-size: 1.15rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  transition: all 0.2s ease;
}

/* 3. Style the navigation links on hover (When you mouse over them) */
.navbar-nav .nav-link:hover {
  color: #2b6dad !important; /* Shifts to your clear blue */
  background-color: #f4f8fb; /* Adds the signature soft-blue wash */
  border-radius: 6px; /* Softens the corners of the hover box */
}

/* 4. Style the active navigation link (The page you are currently on) */
.navbar-nav .nav-link.active {
  color: #2b6dad !important; /* Active page text is blue */
  font-weight: 600;
  border-bottom: 2px solid #2b6dad; /* Adds a neat underline to the active tab */
  border-radius: 0px; /* Keeps the underline flat */
}

/* 5. Style the dropdown menu (e.g., under "Research") */
.dropdown-menu {
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Soft dropdown shadow */
}

.dropdown-item {
  color: #4a5568 !important;
  font-size: 1.15rem;
  padding: 0.6rem 1rem;
}

.dropdown-item:hover {
  background-color: #f4f8fb !important; /* Matches your soft-wash hover */
  color: #2b6dad !important;
}