/* css styles */

/*body {
  max-width: 950px;
  width: 90vw;
  margin-left: auto;
  margin-right: auto;
}*/


/* band setting */

.blockquote-blue {
  background-color: #d0e4f7;  
  border-left: 4px solid #4285f4;
  padding: 1em;
  margin: 1em 0;
  color: #1a3e5a; 
  border-radius: 4px;
}


.blockquote-red {
  background-color: #f8d7da; 
  border-left: 4px solid #dc3545; 
  padding: 1em;
  margin: 1em 0;
  color: #721c24;
  border-radius: 4px;
}


.blockquote-yellow {
  background-color: #fff3cd; 
  border-left: 4px solid #ffc107; 
  padding: 1em;
  margin: 1em 0;
  color: #856404; 
  border-radius: 4px;
}


/* top bar setting */
.navbar {
  background-color: #B24F3A!important; 
}

/* Color the main page title */
#title-block-header .quarto-title h1.title {
  color: #B24F3A !important; 
}

/* heading level*/

h2 {
  border-bottom: 1px solid #6c7b8b;  /* Dark grey-blue color */
  padding-bottom: 8px;               /* Space between text and line */
  margin-bottom: 1em;                /* Overall spacing adjustment */
  font-size: 1.6rem;                 /* Slightly smaller: 25.6px base */
  font-weight: 600;
}

h3 {
  font-size: 1.25rem;                /* Slightly smaller: 20px base */
  font-weight: 700;                  /* Bold as requested */
  color: #555555;                    /* Light black */
  margin-bottom: 0.75em;
  margin-top: 1.5em;
}




/* LOGO NAVBAR SETTINGS */

/* Make logo taller/wider while maintaining aspect ratio */
.navbar-brand img,
.navbar-logo {
  height: 60px !important;  /* Adjust: 40px=compact, 80px=tall */
  width: auto !important;
  max-height: none !important;
}

/* Ensure navbar accommodates taller logo */
.navbar {
  min-height: 70px !important;  /* Match or exceed logo height */
  padding: 0.5rem 1rem !important;
}

/* Mobile responsiveness */
@media (max-width: 991px) {
  .navbar-brand img {
    height: 45px !important;  /* Smaller on phones */
  }
  .navbar {
    min-height: 60px !important;
  }
}

/* Make title plain text (no link) */
.navbar .navbar-brand-text,
.navbar-title {
  pointer-events: none !important;  /* Disables clicking */
  text-decoration: none !important; /* Removes underline */
}

/* Logo stays clickable on right */
.navbar-brand a {
  pointer-events: auto !important;  /* Re-enables logo click */
}




/* Hyperlink colors - except navbar */
body a:not(.navbar a):not(.nav-link) {
  color: #B24F3A; 
  transition: opacity 0.2s ease;
}

body a:not(.navbar a):not(.nav-link):hover {
  color: #8B3A2A; 
  opacity: 0.8;
}

body a:not(.navbar a):not(.nav-link):visited {
  color: #944030; 
}


/* For fadede edges on images */
.faded-image {
  display: block;
  margin: auto;
  width: 90vw;
  max-width: 950px;
  height: auto;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent),
              linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
  mask-composite: intersect;
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent),
                      linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
  -webkit-mask-composite: source-in;
}



/* TO UPDATE THE DATE IN FOOTER HTML*/
/* Hide the default Quarto date display */
.quarto-title-meta {
  display: none !important;
}

/* Or if you want to hide only the date but keep other metadata */
.quarto-title-meta-contents:has(#title-block-header-date) {
  display: none !important;
}

#title-block-header .quarto-title-meta {
  display: none !important;
}





/* COLLAPSABLE TIP DESIGN /

/* Grey background */
/* .callout-tip .callout-head {
  background-color: #6c757d !important;
  color: white !important;
}

/* Replace lamp with chart icon */
/* .callout-tip .callout-icon-container::before {
  content: "📊" !important;
  font-size: 1.2em !important;
  background: none !important;
  background-image: none !important;
}

/* Ensure collapsed state stays grey */
/* .callout-tip.callout-collapsed .callout-head {
  background-color: #6c757d !important;
}