/* Now font: Avenir Next LT Pro (or similar)*/


/*********************************************************************/
/* FONTS */
@font-face {
  font-family: "AvenirLT-Light";
  src: url('./webFonts/AvenirNextLTPro/AvenirLT-Light.woff') format('woff');
}

@font-face {
  font-family: "AvenirNextLTPro-Regular";
  src: url('./webFonts/AvenirNextLTPro/AvenirNextLTPro-Regular.woff') format('woff');
}

@font-face {
  font-family: "AvenirNextLTPro-Bold";
  src: url('./webFonts/AvenirNextLTPro/AvenirNextLTPro-Bold.woff') format('woff');
}

/*********************************************************************/

/* Block banner image: */

@media (min-width: 300px){
  .quarto-title-block .quarto-title-banner{
  /*background-size: relative;*/
  background-repeat: no-repeat;
  height: 400px;
  margin-top: 0px;
  }
}

/*
@media (min-width: 300px) {
    body .page-columns {
        display: grid
;
        gap: 0;
        grid-template-columns: [screen-start] 1.5em [screen-start-inset] 5fr 
        [page-start page-start-inset] 35px [body-start-outset] 35px [body-start] 1.5em 
        [body-content-start] minmax(500px, calc(850px - 3em)) [body-content-end] 1.5em [body-end] 35px 
        [body-end-outset] minmax(75px, 145px) [page-end-inset] 35px [page-end] 5fr [screen-end-inset] 1.5em [screen-end];
    }
}
*/

/*********************************************************************/
/*********************************************************************/
/* NAVIGATION BAR DETAILS */

/* specify heigh of the logo */
.navbar-logo {
  max-height: 50px;
}

.navbar-expand-lg .navbar-nav .nav-link {
    padding-left: .6rem;
    padding-right: 1rem;
}

/* Specify color navigation bar color and border */
.navbar {
  background-color: white;
  border-bottom: 2px solid #00975f;
  font-family: AvenirNextLTPro-Regular;
  font-size: 17px;
  letter-spacing: -0.75px;
  align-content: center;
  padding-left: 20px;
}

/* Specify font color for top navigation tabs */
.navbar .nav-link {
  color: #373636;
  font-family: AvenirNextLTPro-Regular;
  font-weight: 400 ;
  font-size: 17px !important;
  letter-spacing: -0.75px;
}

/* Active page in the top navbar */
.navbar-nav .nav-link.active, 
.navbar-nav .nav-link.show {
  color: #373636;
  font-family: AvenirNextLTPro-Bold !important;
  font-weight: 700 !important;
  font-size: 17px !important;
}

/* Drop down menu */
.dropdown-item {
  font-family: AvenirNextLTPro-Regular;
  color: #373636;
  --bs-dropdown-link-active-bg:#00975F;
}

/* Hover color */
.navbar .nav-link:hover{
  color: #00975F;
}

/* Color and size of search button */
.navbar #quarto-search.type-overlay .aa-Autocomplete svg.aa-SubmitIcon {
    width: 26px;
    height: 26px;
    color: #373636; 
    opacity: 1;
}

/* Space before the search button */
@media (max-width: 991.98px){
  .navbar #quarto-search {
    margin-left: 675px;
  }
}

@media (min-width: 992px){
    .navbar #quarto-search {
    margin-left: 12px;
  }
}

/* Drop down arrow */
.dropdown-toggle::after {
  border: none !important;
  content: url(./Images/chevron-down.svg) !important;
  width: 12px;
  position: absolute;
  margin-top: -5px;
  margin-left: 5px;
}

.navbar .navbar-nav .nav-link.dropdown-toggle::after {
    vertical-align: 0em;
}


/*********************************************************************/

/*************** author label************/
div.quarto-title-meta-column-start{
  margin-top: 5em;  /* Adjust value as needed */
  width: 300px; /*increasing too much will cause a scrolling bar at bottom */
}


/********Base document style ******/
body{
  font-family: AvenirNextLTPro-Regular;
  color: #1D1D1B;
  text-align: justify; /* make sure the content layout is justified and aligned*/
  
}

/***********Headers*****************/
h1.title{
  font-size: 300%;
  text-align: left;
}

h1.title {
  font-size: 300%;
  text-align: left;
  color: #00975F;
  font-family: AvenirNextLTPro-Bold;
}

p.subtitle.lead {
  color: #373636;
  font-size: 32px;
  font-family: AvenirNextLTPro-Regular;
}

h1, h2, h5, h6{
  color: #00975F;
  font-family: AvenirNextLTPro-Regular;
  text-align: left;
}

h3, h3.anchor{
  color: black;
  font-family: AvenirNextLTPro-Regular;
  text-align: left;
  font-size: 20px;
}

h4, h4.anchor{
  color: #00975F;
  font-family: AvenirNextLTPro-Regular;
  text-align: left;
  font-size: 16px;
  font-style: italic;
}

p{ 
  background-size: relative;
  text-align: justify; /* make sure the content layout is justified and aligned*/
  color:#1D1D1B;
  font-size: 14px;
  font-family: AvenirNextLTPro-Regular;
  
}


/* lists of elements using -lists */

li {
  color:#1D1D1B;
  font-size: 12px;
  font-family: AvenirNextLTPro-Regular;
}


/************* Links *************/

/* to remove the underline on text that make it look like a link*/

a {
    color: #00975F ; /*#004C30 #008874 #522583 #00975F95;*/
    text-decoration: none !important;
    font-weight: bold;
}

a.quarto-xref{
  color: #00975F ; /*#004C30  #008874 #522583 #00975F95;*/
  text-decoration: none !important;
  font-weight: bold;
}
/************************************************************/
/************* Details of the callout boxes *********************/
/* default background*/
div.callout.callout-style-default>.callout-header {
    background-color: white; /* background colour for the callout-note for tables */
 } 

/**** callout notes: *****/

/* Only the text (paragraphs) inside this note */
.callout-note p {
  color: #00975F !important;  /* dark green */
  font-family: AvenirNextLTPro-Bold;
  line-height: 1.5;  
}

.callout-note li {
  color: #00975F !important;  /* dark green */
   line-height: 2;  
}

.callout-note a {
  color: #007147 ;!important;  /*#004C30 #008874 dark green */
  line-height: 2;  
  text-decoration: none !important;
} 

.callout-note u {
  /*text-decoration: none !important;*/
}

/* Note callout details - whcih are Tables in the document*/
div.callout-note.callout {
    border-left-color: #00975F; /*#7dc8d6; #74a1eb;#00975F;*/
    padding: 10px;
    background-color: #00975F15; /*#f0f8ff;*/
    color:  #00975F;    
    font-weight: bold;
    font-size: 12px;
    font-family: AvenirNextLTPro-Regular;
    
}

/* if specified after the default background (see above), this will over write the previous colour*/
div.callout-note.callout-style-default>.callout-header {
    background-color: transparent; /* background colour for the callout-note for tables */
    color:  #1D1D1B;  
  
} 
 
 /**** callout tips: *****/

.callout.special-callout {
  border-left-color: #00975F;
  font-family: AvenirNextLTPro-Regular;
}

div.callout-tip.callout {
  border-left-color: #00975F;
  font-family: AvenirNextLTPro-Regular;
}


.callout.callout-tip.special-tip2 {
  --bs-callout-bg: #ffffff;       /* background for closed */
  background-color: var(--bs-callout-bg) !important;
  border-left-color: #00975F;
  transition: background-color .25s ease, color .25s ease;
}

.callout.callout-tip.special-tip2:has(.collapse.show) {
  --bs-callout-bg: #DBF1EA;       /* background for open */
  background-color: var(--bs-callout-bg) !important;
}


.special-callout .bigger-title {
  font-size: 25px;
  font-weight: 600;
  line-height: 1.1;
  display: inline-block;
}

.special-callout .callout-header {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.special-callout .callout-header .callout-toggle,
.special-callout .callout-header i[class*="chevron"],
.special-callout .callout-header svg[class*="chevron"] {
  display: none !important;
}

.special-callout .callout-header::after {
  content: "▾";
  font-size: 1.2rem;
  color: #00975F;
  margin-left: auto;
}

.special-callout:has(.collapse.show) .callout-header::after {
  content: "▴";
}

/*****callout caution*********/

div.callout-caution.callout {
    border-left-color: #00975F;
    background-color: white;
    font-family: AvenirNextLTPro-Regular;
    
}

 /* Note callout details - whcih are Tables in the document*/
div.callout-caution.callout {
    border-left-color: #00975F; /*#7dc8d6; #74a1eb;#00975F;*/
    padding: 10px;
    background-color: #1D1D1B10; /*#f0f8ff;*/
    color:  #1D1D1B;    
    font-weight: bold;
    font-size: 12px
    font-family: AvenirNextLTPro-Regular;
    
}

/*** callout important for some tables ****/

div.callout-important.callout {
    border-left-color: #00975F; /*#7dc8d6; #74a1eb;#00975F;*/
    padding: 10px;
    background-color: white; /*#f0f8ff;*/
    color:  black;    
    /*font-weight: bold;*/
    font-size: 12px
    font-family: AvenirNextLTPro-Regular;
    
}


 /*color of the title of the drop down callout */
div.callout-title-container.flex-fill {
    color: #686868;    
   
}

/**text colour of the callouts text ***/
div.callout-body-container.callout-body{
    color: black;
}


/***************************************************************/
/**************************************************************/

/* FIGURE CAPTIONS */
figcaption {
  margin: auto;
  text-align: start;
  font-size: 15px;
  color: #1D1D1B;
  font-weight: bold;
  font-family: AvenirNextLTPro-Regular;
  text-align: center;
}


/******************************************************************/
/********* Table of content and Numbering *************************/


h2#toc-title {
  font-weight: bold;
}

a#nav-link-active {
  color:  #686868;
}
a.quarto-xref{  /*colour of the table/figure hyerlink in text*/
  color: #007147;
}

/* active section (section currently beng read ) */
.sidebar nav[role=doc-toc] ul>li>a.active, .sidebar nav[role=doc-toc] ul>li>ul>li>a.active {
    border-left: 1px solid #00975F;
    color: #00975F !important;
}

/* TOC hover (section of the TOC that is being hover hover) */ 
.sidebar nav[role=doc-toc] ul>li>a:hover, .sidebar nav[role=doc-toc] ul>li>ul>li>a:hover {
    border-left: 1px solid #00975F;
    color: #00975F !important;
}

.sidebar-menu-container {
  font-family: AvenirNextLTPro-Bold;
}
.quarto-sidebar {
  font-family: AvenirNextLTPro-Bold;
}



/*******************lightbox ************/
.desc-bottom .gslide-image img, .desc-top .gslide-image img {
    width: 100%; /* change the size of the image pop up */
}






/************Image Popup ***************/
/* Make the trigger look link-like (optional) */
.hover-img {
  position: relative;
  color:#007147 ;  /**#008874*/
  text-decoration: underline;
  cursor: pointer;
}

/* The preview image is positioned near the text and hidden by default */
.hover-img > img {
  position: absolute;
  top: 120%;              /* place below the text; change to bottom:120% to show above */
  left: 0;
  max-width: 600px;       /* constrain preview size */
  height: auto;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;   /* don't steal the hover */
  z-index: 1000;
}

/* Reveal on hover or keyboard focus */
.hover-img:hover > img,
.hover-img:focus-within > img {
  opacity: 1;
  transform: translateY(0);
}

/* If these live inside callouts/columns, prevent clipping */
.callout, .callout .callout-body { overflow: visible !important; }


/*********other bold section****/
.np-green-sections {
  color:#00975F; 
  font-family: AvenirNextLTPro-Bold;
  
}


/***********  **************/
li::marker{
  color: #00975F;
}

/******colours of size bar display  *******/
div.sidebar-item-container .active, div.sidebar-item-container .show>.nav-link, div.sidebar-item-container .sidebar-link>code {
    color: #00975F;
}
.sidebar-menu-container a:hover {
  color: #522583;
}

/******* changinging size of font in callouts****/
div.callout-title-container.flex-fill {
    color: #686868;
    font-size:12px;
}

/***clickt to zoom ***/
.click-to-zoom {
  font-size: 10px;
  text-align: center;
}

/* Download button */
.btn-download-body {
  color: #00975a;
  background: white;
  border: 2px solid #00975f;
  text-align: center;
  width: 50%;
  border-width: medium;
  padding-top: 10px;
  padding-bottom: 10px;
  display: block;
  text-decoration: none;
}

.btn-download-body:hover {
  color: white;
  background: #00975a;
  border: 2px solid #00975f;
  text-align: center;
  width: 50%;
  border-width: medium;
  padding-top: 10px;
  padding-bottom: 10px;
  display: block;
}

.btn-download-side {
  color: #00975a;
  background: white;
  border: 2px solid #00975f;
  text-align: center;
  width: 100% !important;
  border-width: medium;
  padding-top: 10px;
  padding-bottom: 10px;
  display: block;
  text-decoration: none;
}

.btn-download-side:hover {
  color: white;
  background: #00975a;
  border: 2px solid #00975f;
  text-align: center;
  width: 100% !important;
  border-width: medium;
  padding-top: 10px;
  padding-bottom: 10px;
  display: block;
}

/***********info icon ****/
.icon-inline {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}


/************************* PRofile tables *********************/

.profile-table table {
  width: 100%;
  table-layout: fixed;
}

.profile-table td:nth-child(1),
.profile-table th:nth-child(1) {
  width: 30%;   /* adjust as needed */
}

.profile-table td:nth-child(2),
.profile-table th:nth-child(2) {
  width: 70%;
}

.profile-table img {
  max-width: auto;
  max-height: 130px;
}

.profile-table td{
  font-size: 14px;
}
.profile-table p{
  font-size: 14px;
}

/************ bold black text *********/
.BlackBold{
  font-weight: bold;
}

/********** green box, white background ****/
.green-box {
  border: 2px solid #00975F;      /* full border */
  border-left: 8px solid #00975F; /* thicker left accent */
  background-color: #ffffff;
  padding: 1rem 1.2rem;
  margin: 1.5rem 0;
  border-radius: 6px;
}


.BlackBoldItalics {
  font-weight: bold;
  font-style: italic;
}


/************* Figure numbering ***********/


.quarto-float-caption-prefix {
  display: none;
}

figcaption .quarto-float-caption-prefix {
  display: none !important;
}

/************* Tabset styling ***********/

.panel-tabset .nav-tabs .nav-link {
  color: #1D1D1B;
  font-family: AvenirNextLTPro-Regular;
}

.panel-tabset .nav-tabs .nav-link.active {
  color: #00975F;
  font-family: AvenirNextLTPro-Bold;
  border-bottom: 3px solid #00975F;
}

.panel-tabset .nav-tabs .nav-link {
  white-space: normal;
  line-height: 1.2;
  text-align: center;
}

.panel-tabset .nav-link {
  white-space: normal !important;
  line-height: 1.2;
  min-height: 3.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.panel-tabset .nav-item {
  flex: 1;
}

.panel-tabset .nav-link {
  white-space: normal !important;
  text-align: center;
}

#TOC ul ul {
  display: block !important;
}

.sidebar nav ul ul {
  display: block !important;
}