/* Small visual tweaks */
.navbar-brand { font-weight: 700; letter-spacing: 0.2px; }
.quarto-title h1 { font-weight: 800; }
footer { opacity: 0.9; }


/* Default background for project pages */
body.page-projects {
  background: url("images/project-bg-df.png") center center / cover no-repeat fixed;
}

/* Optional: add a dark overlay for readability */
body.page-projects::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4); /* adjust darkness */
  z-index: -1;
}
/* Default background for blog pages */
body.page-blog {
  background: url("images/blog-bg.jpg") center center / cover no-repeat fixed;
  color: #f0f0f0; /* light gray for readability */
}

body.page-blog h1,
body.page-blog h2,
body.page-blog h3 {
  color: #f4e1c1;
}

/* body.page-blog a {
  color: #ff6f61;
}
body.page-blog a:hover {
  color: #ffd700;
} */

/* Default background for portfolio pages */
body.page-portfolio {
  background: url("images/portfolio-bg.jpg") center center / cover no-repeat fixed;
}

/* Default background for about pages */
body.page-about {
  background: url("images/about-bg.jpg") center center / cover no-repeat fixed;
}

/* Default background for photos pages */
body.page-photos {
  background: url("images/photos-bg.jpg") center center / cover no-repeat fixed;
}

/* Default background for main page */
body.page-main {
  background: url("images/main-bg.jpg") center center / cover no-repeat fixed;
}

/* General styles for all pages with a background image */
body.page-projects,
body.page-blog,
body.page-portfolio,
body.page-about,
body.page-photos,
body.page-main {
  color: #f0f0f0; /* light gray for readability */
}

body.page-projects h1, body.page-projects h2, body.page-projects h3,
body.page-blog h1, body.page-blog h2, body.page-blog h3,
body.page-portfolio h1, body.page-portfolio h2, body.page-portfolio h3,
body.page-about h1, body.page-about h2, body.page-about h3,
body.page-photos h1, body.page-photos h2, body.page-photos h3,
body.page-main h1, body.page-main h2, body.page-main h3 {
  color: #f4e1c1;
}

body.page-projects a,
body.page-blog a,
body.page-portfolio a,
body.page-about a,
body.page-photos a,
body.page-main a {
  color: #ff6f61;
}

body.page-projects a:hover,
body.page-blog a:hover,
body.page-portfolio a:hover,
body.page-about a:hover,
body.page-photos a:hover,
body.page-main a:hover {
  color: #ffd700;
}

/* Make content stand out */
.page-projects .content,
.page-blog .content,
.page-portfolio .content,
.page-about .content,
.page-photos .content,
.page-main .content {
  background: rgba(0, 0, 0, 0.6); /* semi-transparent black */
  padding: 1.5em;
  border-radius: 8px;
}

/* Adjustments for smaller screens */
@media (max-width: 768px) {
  .page-projects .content,
  .page-blog .content,
  .page-portfolio .content,
  .page-about .content,
  .page-photos .content,
  .page-main .content {
    padding: 1em;
    margin: 0.5em;
  }
}

/* Ensure navbar is readable */
.navbar {
  background-color: rgba(0, 0, 0, 0.7) !important;
}

/* Navbar link styling */
.navbar .nav-link {
  color: #f0f0f0 !important;
  transition: all 0.3s ease;
}

/* Navbar link hover effect */
.navbar .nav-link:hover {
  color: #ffd700 !important; /* Gold/yellow on hover */
  background-color: rgba(255, 215, 0, 0.15) !important; /* Subtle gold background */
  border-radius: 4px;
}

/* Highlight the active page in the navbar */
.navbar .nav-link.active {
  color: #FFFFFF !important; /* Bright white for high contrast */
  font-weight: bold;
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-radius: 4px;
}

/* Footer styling */
.footer {
  background-color: rgba(0, 0, 0, 0.7);
  color: #f0f0f0;
}

/* Category filter styling - Portfolio page (white background) */
body.page-projects .quarto-listing-category,
body.page-projects div.quarto-listing-category { 
  display: inline-flex !important; 
  gap: .5rem !important; 
  flex-wrap: wrap !important; 
  padding: .5rem 0 .75rem !important; 
}
body.page-projects .quarto-category,
body.page-projects a.quarto-category,
body.page-projects div.quarto-category {
  font-size: .9rem !important; 
  line-height: 1 !important;
  padding: .35rem .65rem !important; 
  border-radius: 999px !important;
  background: rgba(255,255,255,.95) !important;
  color: #1a1a1a !important; 
  border: 2px solid rgba(255,255,255,.8) !important;
  font-weight: 500 !important;
  backdrop-filter: blur(10px) !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.15) !important;
  transition: all .15s ease !important;
}
body.page-projects .quarto-category:hover,
body.page-projects a.quarto-category:hover { 
  background: rgba(255,215,0,1) !important; 
  color: #1a1a1a !important; 
  border-color: rgba(255,215,0,1) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(255,215,0,.3) !important;
}
body.page-projects .quarto-category.active,
body.page-projects a.quarto-category.active { 
  background: rgba(255,215,0,1) !important; 
  color: #1a1a1a !important; 
  border-color: rgba(255,215,0,1) !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(255,215,0,.4) !important;
}

/* Category filter styling - Blog page (dark background with white text) */
body.page-blog .quarto-listing-category,
body.page-blog div.quarto-listing-category { 
  display: inline-flex !important; 
  gap: .5rem !important; 
  flex-wrap: wrap !important; 
  padding: .5rem 0 .75rem !important; 
}
body.page-blog .quarto-category,
body.page-blog a.quarto-category,
body.page-blog div.quarto-category {
  font-size: .9rem !important; 
  line-height: 1 !important;
  padding: .35rem .65rem !important; 
  border-radius: 999px !important;
  background: rgba(0,0,0,.7) !important;
  color: #ffffff !important; 
  border: 2px solid rgba(255,255,255,.4) !important;
  font-weight: 500 !important;
  backdrop-filter: blur(10px) !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.2) !important;
  transition: all .15s ease !important;
}
body.page-blog .quarto-category:hover,
body.page-blog a.quarto-category:hover { 
  background: rgba(255,215,0,1) !important; 
  color: #1a1a1a !important; 
  border-color: rgba(255,215,0,1) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(255,215,0,.3) !important;
}
body.page-blog .quarto-category.active,
body.page-blog a.quarto-category.active { 
  background: rgba(255,215,0,1) !important; 
  color: #1a1a1a !important; 
  border-color: rgba(255,215,0,1) !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(255,215,0,.4) !important;
}