/* Ensure the base background of the whole site is white */
body {
  background-color: white !important;
  color: black;
  margin: 0;
  min-height: 100vh;
}

/* ONLY if the body has the home-page class, show the sea */
body.home-page {
  background-color: transparent !important; 
}

body.home-page::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('images/deep-sea-banner.jpg') !important;
  background-size: cover;
  background-position: center;
  filter: blur(6px) brightness(60%);
  z-index: -1;
  display: block;
}

/* Only make text white on the home page */
.home-page #quarto-content, 
.home-page main, 
.home-page p, 
.home-page h1, 
.home-page h2 {
  color: white !important;
}

/* ========== TAB STYLING ========== */
/* Make tab text bolder and larger */
.panel-tabset .nav-link {
  font-weight: 600 !important;
  font-size: 1.1rem !important;
  color: #2c3e50 !important;
  border: 1px solid #dee2e6 !important;  /* Lighter border */
  background-color: #f8f9fa !important;   /* Light background for inactive tabs */
}

/* Active tab styling - darker and more prominent */
.panel-tabset .nav-link.active {
  font-weight: 700 !important;
  background-color: #1e3a5f !important;  /* Dark navy background */
  color: white !important;
}

/* Hover effect for better interactivity */
.panel-tabset .nav-link:hover {
  background-color: #e9ecef !important;
  color: #1e3a5f !important;
  border: 1px solid #dee2e6 !important;  
  border-bottom-color: white !important;
}

/* Make the tab container border lighter */
.panel-tabset .tab-content {
  border: 1px solid #dee2e6 !important;
  border-top: 1px solid #dee2e6 !important;
}

/* ========== CALLOUT STYLING ========== */
/* Make callout-tip title text white */
.callout-tip .callout-header * {
  color: white !important;
}
.callout-note .callout-header * {
  color: white !important;
}
.callout-important .callout-header * {
  color: white !important;
}
.callout-caution .callout-header * {
  color: white !important;
}
.callout-warning .callout-header * {
  color: white !important;
}