/* ==========================================================================
   SECTION 0: GLOBAL LAYOUT (Improved)
   ========================================================================== */

/* 1. Standard Sticky Footer (Safer version) */
html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

/* Let the main container grow without breaking the Quarto Grid */
#quarto-content {
  flex: 1 0 auto;
  display: grid !important;
  /* Keep the grid, don't flatten it */
}

/* 2. Responsive Centering for Graphs & Images */
.cell-output-display img,
.quarto-figure {
  margin-left: auto !important;
  margin-right: auto !important;
  display: block;
  max-width: 100%;
  height: auto;
}

/* 3. Force "Back to Top" visibility if it's acting shy */
.quarto-back-to-top {
  z-index: 1000 !important;
  bottom: 20px !important;
  right: 20px !important;
}


/* ==========================================================================
   SECTION 1: HOMEPAGE (Landing Page)
   Targeting class: .homepage-view
   ========================================================================== */


.homepage-view .quarto-about-trestles .about-entity img {
  /* Make the main avatar slightly nicer */
  border: 4px solid #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.homepage-view #hero-heading {
  /* Add breathing room to your bio text */
  line-height: 1.8;
  font-size: 1.1rem;
}



/* Style the "View all projects" button container */
.homepage-view div[style*="text-align: right"] {
  margin-top: 3rem !important;
  margin-bottom: 2rem;
}

/* Tighten the gap between the header and the project grid */
.homepage-view #featured-projects {
  margin-top: 0px;
}

/* Reduce spacing between grid items */
.homepage-view .quarto-listing-cols {
  gap: 10px !important;
}

.homepage-view .quarto-listing {
  margin-bottom: 0 !important;
}

.homepage-view #listing-listing {
  margin-bottom: 0 !important;
}

/* Reduce margin below each individual project card */
.homepage-view .quarto-post {
  margin-bottom: 1px !important;
}

/* Ensure the header row itself has no bottom border */
.homepage-view .featured-header-row {
  border-bottom: none;
}


/* ==========================================================================
   SECTION 2: PROJECTS LISTING (Grid)
   Targeting class: .projects-listing-view
   ========================================================================== */

/* Customize the Project Cards */
.projects-listing-view .quarto-grid-item {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid #eee;
  border-radius: 8px;
}

/* Hover effect for cards */
.projects-listing-view .quarto-grid-item:hover {
  transform: translateY(-5px);
  /* Lift up slightly */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Title of projects in the grid */
.projects-listing-view .card-title {
  font-weight: 700;
  color: #0d6efd;
  /* Bootstrap Primary Blue */
}


/* ==========================================================================
   SECTION 3: INDIVIDUAL PROJECT PAGES (Detail)
   Targeting class: .project-detail-view
   ========================================================================== */



/* Clean up the Iframe container */
.project-detail-view iframe {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin: 2rem 0;
}

/* Style the Code Blocks to look more "Data Science" */
.project-detail-view pre.sourceCode {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 6px;
}

/* Make the Callout Note pop a bit more */
.project-detail-view .callout-note {
  border-left-width: 5px;
}