/*| echo: false */
figcaption {
  margin: auto;
  text-align: center;
  font-weight: bold; /* Makes captions bold */
  font-size: 1.5em; /* Adjust size as needed, using em, px, or % depending on your preference */
}
/*| in quarto, the rmarkdown flatly theme doesnt transfer over exactly so pulling in  the colours here*/
:root {
  --bs-primary: #2c3e50;  /* Dark Blue */
  --bs-secondary: #18bc9c; /* Teal */
  --bs-success: #1abc9c;  /* Green */
  --bs-info: #3498db;     /* Light Blue */
  --bs-warning: #f39c12;  /* Orange */
  --bs-danger: #e74c3c;   /* Red */
  --bs-light: #ecf0f1;    /* Light Gray */
  --bs-dark: #34495e;     /* Dark Gray */
  
  /* Text & Background Adjustments */
  --bs-body-color: #2c3e50;
  --bs-body-bg: #ffffff;
  --bs-link-color: #18bc9c;
  --bs-link-hover-color: #148f77;

  /* Button Styles */
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-dark);

  /* Table Styling */
  --bs-table-bg: #ecf0f1;
  --bs-table-striped-bg: #d5dbdb;
  --bs-table-hover-bg: #bdc3c7;

  /* Code Blocks */
  --bs-code-color: #e74c3c;
  
}



.aa-Autocomplete .aa-Form, 
.aa-DetachedFormContainer .aa-Form {
    align-items: center;
    background-color: #fff; /* White background */
    border: 4px solid #148f77; /* Blue border */
    border-radius: 7rem; /* Slightly rounded corners */
    color: #212529; /* Dark text color */
    display: flex;
    line-height: 1em;
    margin: 0;
    position: relative;
    width: 100%;
}


/* background color of navigation bar - handy so it stands out where you are */
.nav-link.active {
  background-color: #efc078!important;
}

/* changes colour of background colour for chapters on right */
.sidebar-item-container .active {
  background-color: #148f77 !important;
  padding: 0.5em 1em !important;     /* Add vertical and horizontal padding */
  margin: 0.2em 0.5em !important;    /*  add spacing from other items */
  border-radius: 4px;                /*  rounded corners */
  display: block;                    /* Ensure it takes full width */
  width: auto;
}

/* Place search bar on its own row  */
.sidebar-tools-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;  /* aligns children to the left */
  gap: 5px; /* space between icons and search bar */
}

/*  add margin or padding around the search */
#quarto-search {
  width: 100%;
  margin-top: 10px;
}

/*   Style the search button  */
.sidebar-tools-collapse #quarto-search .aa-DetachedSearchButton,
.sidebar-tools-main #quarto-search .aa-DetachedSearchButton {
  border: 3px solid #148f77;
  border-radius: 5px;
  padding: 5px;
  background-color: #FFFFFF !important;
  width: 100%;  /* make it take full width in the column */
  max-width: 90%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/*  Make the icon black + set after text  */
.aa-DetachedSearchButtonIcon svg {
  color: black !important;
  fill: black !important;
}

/* Optional: Add helpful text after the icon */
.aa-DetachedSearchButtonIcon::after {
  content: " Press `f`";
  color: black !important;
  font-weight: 600;
  font-size: 1em;
  display: inline-block;
  opacity: 1 !important;
  margin-left: 10px;
}
  
  
  
  
/* Change color of chapter numbers in sidebar */
.sidebar .chapter-number,
.sidebar .chapter-title {
  font-size: 0.825rem;
  color: #cacfd3;  /* */
}


/* Change color of sidebar part titles */
.sidebar .menu-text {
  color: #FFFFFF; /* or your desired color */
  font-weight: bold; /* make it stand out */
}

/* Force inner input box to have white background */
.aa-Input {
  background-color: #FFFFFF !important;
  color: black !important; /* ensure text is visible */
}

/* this changes header 1 and underlines it above and below */
  h1 {
    /*background-color: #d9e3e4;*/
      border-top: 3px solid #FFFFFF;
    border-bottom: 3px solid #FFFFFF;
    padding: 0.5rem 0;
    margin-top: 1.5rem;
  }


/* Style the title block */
  .quarto-title-block {
    background-color: #4e5d6c;
      padding: 2rem;
    border-radius: 6px;
    color: #FFFFFF;
      text-align: center; /*  */
  }
  
/* Change sidebar book title color */
  .sidebar-header,
.sidebar-header a {
  color: #cacfd3;  /* your desired color */
  font-size: 1.0rem; /*default: font-size: 1.3rem; */
}


/* Set the background color of the entire page */
body {
  background-color: #FFFFFF; 
}


/*change background colour of callout box to light grey here */
.callout.callout-style-default .callout-body {
  background-color: #E8E8E8;
}


/* Change breadcrumb chapter number color */
.breadcrumb .chapter-number {
  color: #148f77; /* Change to your desired color */
}

/* Change breadcrumb chapter title color */
.breadcrumb .chapter-title {
  color: #148f77; /* Dark grey */
}

/* Justify all main body text */
main {
  text-align: justify;
}

/* change inline code background to transparent*/
code {
  background-color: transparent !important;
  /*color: #d6336c; /* pick any color */
}