@import url("https://fonts.googleapis.com/css?family=Inter:100,200,300,regular,500,600,700,800,900");
@import url("https://fonts.googleapis.com/css?family=Courier Prime");
/* Any custom css for pkgdown works here */

/* TO-DO
  - Split this by equals sign comment headers into
    multiple css documents
    - How to use multiple css
      [here](https://pkgdown.r-lib.org/articles/customise.html?q=custom%20css#additional-html-and-files)
  - mobile bug on no-wrap for code on documentation page-header 
    - maybe change to white-space: break-spaces;
*/

/*================================================
==================================================
=============== Headers and text  ================
==================================================
================================================*/
/*
Relevant tags:
  - h1
  - h2
  - h3
  - h4
  - h5
*/
body {
  font-family: "Inter", Sans-Serif!important;
}
h1, h2, h3, h4, h5, h6, p, dd {
  /* heading/bold/h3 */
  font-family: "Inter", Sans-Serif!important;
  /* text/onlight */
  color: #0D0D0D;
}
h1, h2, h3, h4, h5, h6 {
  font-style: normal;
}
h1, h2, h3, h4 {
  font-weight: 700;
}

.page-header>h1{
  font-size: 48px;
  line-height: 56px;
}
h1 {
  font-size: 42px;
  line-height: 50px;
}
h2 {
  font-size: 33px;
  line-height: 44px;
}
h3 {
  font-size: 30px;
  line-height: 38px;
}
h4 {
  font-size: 24px;
  line-height: 32px;
}
h5, h6 {
  font-size: 18px;
  line-height: 26px;
}

/*================================================
==================================================
================ BRAND IMAGE =====================
==================================================
================================================*/
.brand-image-enable {
    height: 90%;
    padding-top: 0px;
    padding-bottom: auto;
    border-radius: 0;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: 0% 50%;
    object-position: 0% 50%;
}
.navbar-brand {
  padding-top: 0px!important;
}

div.container.template-home .page-header {
  border-bottom: 0;
}
/*================================================
==================================================
==================== NAVBAR ======================
==================================================
================================================*/

html>body>nav.navbar,
html>body>nav.navbar>div.container,
html>body>nav.navbar>div.container .nav-item
{
  height: 56px;
}

html>body>nav.navbar>div.container>div#navbar.navbar-collapse.collapse.show,
html>body>nav.navbar>div.container>div#navbar.navbar-collapse.collapsing
{
  border-bottom: 2px solid #2D977D;
  /* border-left: 2px solid #2D977D; */
  /* margin-left: 0px; */
  background: #FCFFFE;
  /* background-color: #FCFFFE; */
  margin-top: 2px;
}


nav.navbar{
  font-family: 'Inter', inherit;
  /* Frame 217 */
  box-sizing: border-box;

  /* Auto layout */


  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0px auto;
  gap: 97px;


  /* neutral/00 */
  background: #FCFFFE;
  /* brand/primary/60 */
  border-bottom: 2px solid #2D977D;
  /* elevation/2 */
  box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.1);
}

nav.navbar ul.navbar-nav li.nav-item   {
  display: flex;
  flex-direction: row;
  align-items: center;
  /*align-items: flex-start;
  padding: 10px 12px;
  gap: 8px;

  background: #FCFFFE;
  */
}

/*
nav ul.navbar-nav li.nav-item a.nav-link{
  height: 100%;
}
*/

nav.navbar ul.navbar-nav li.nav-item>a.nav-link{
    border-radius: 0rem!important;
    /* body/medium/medium */
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    height: 100%;
    white-space: nowrap;
    /*
    line-height: 24px;
     identical to box height, or 150% */
     display: flex;
     align-items: center;
    text-align: center;

    /* text/onlight */

    color: #0D0D0D;
}

/* .nav-item:hover { */
  /* background: #F3F5F4; */
  /* border-bottom: inherit; */
  /* border-bottom: 1px solid #2D977D; */
  /* margin-bottom: 2px; */
  /* border-bottom: 4px solid #2D977D!important; */

  /* padding-bottom: 0px; */
/* } */
nav.navbar .nav-link {
  border-bottom: 1px solid #2D977D;
}

nav.navbar .nav-link:hover {
  background: #F3F5F4!important;
  padding-bottom: 5px!important;
  border-bottom: 4px solid #2D977D;
}

/* navbar-collapse ms-3 collapse show */
/* nav.navbar div.navbar-collapse.collapse a.nav-link, */
nav.navbar div.navbar-collapse.collapsing a.nav-link,
nav.navbar div.navbar-collapse.collapse.show a.nav-link {
  border: 0px!important;
}

nav.navbar .nav-item:active, 
nav.navbar .navbar-nav .nav-item.active,
nav.navbar .navbar-nav .nav-item.active>.nav-link {
  background: #2D977D!important;
  color: #FCFFFE!important;
}

nav.navbar .nav-item:focus {
  background: #FCFFFE;
  border: 3px solid rgba(110, 181, 163, 0.25);
}

nav.navbar .navbar-brand {
  color: #2D977D!important;
}
/*.navbar,*/
nav.navbar .nav-item,
nav.navbar>div.container,
nav.navbar{
  /*height: 45px;*/
  height: 56px;
  margin-top: 0px;
  padding-top: auto;
  padding-bottom: auto;
  vertical-align: middle;
}
nav.navbar{
  padding-top: 0px;
  padding-bottom: 0px;
}
/*
button
56 = padding-y * 2 + height + border-y*2 + nav-border + margin-y*2
56 = 8 + 30 + 2 + 2 + margin-y*2
(56-8-30-2-2)/2 = margin-y
margin-y = 7
*/
nav.navbar button.navbar-toggler{
  padding: 4px 12px;
  margin-top: 7px;
  align-items: center;
 text-align: center;
}

/*margin-bottom: 2px*/
/*logos*/
nav.navbar a.navbar-brand,
nav.navbar small.nav-text,{
  display: flex;
  align-items: center;
  text-align: center;
}

/*================================================
==================================================
=============== SIDEBAR TOC NAV ==================
=============== element: aside  ==================
================================================*/

.row>aside>nav,
.row>aside>div:first-child{
  margin-top: 24px;
}

/* home page aside */
.row>aside>div {
  /* Frame 235 */
  box-sizing: border-box;

  /* Auto layout */

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  /* neutral/00 */

  background: #FCFFFE;
  /* border/1 */

  border: 1px solid #E1E3E2;
  border-top: 0px;
  border-bottom: 0px;
  padding-left: 24px;
  /* elevation/3 */

  box-shadow: 0px 6px 12px -2px rgba(0, 0, 0, 0.1);

  /* Inside auto layout */

  flex: none;
  flex-grow: 0;
}
/* home page aside: first div*/
.row>aside>div:first-child {
  border-top: 1px solid #E1E3E2;
}
/* home page aside: last div*/
.row>aside>div:last-child {
  border-bottom: 1px solid #E1E3E2;
}
/* TOC all */
/*.row>aside>nav#toc {*/
.row>aside>nav#toc {
  box-sizing: border-box;
  /* color: green!important; */
  /* Auto layout */

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;

  /* neutral/30 */

  border-width: 1px 1px 1px 0px;
  border-style: solid;
  border-color: #CCCFCE;
  background: #FCFFFE;
  /* elevation/3 */
  box-shadow: 0px 6px 12px -2px rgba(0, 0, 0, 0.1);

  /* custom */
  border-radius: 0!important;
}

/* TOC heading */
.row>aside>nav#toc>h2 {
  /* Auto layout */
  flex-direction: row;
  align-items: flex-start;
  padding: 8px 16px;
  gap: 8px;
  margin: 0px;

  border-left: 1px solid #CCCFCE;



  flex: none;
  flex-grow: 0;

  /* for H2 specifically */
  /* Font-family formerly "Inter" */
  /*Font edits that didn't work*/
  font-family: inherit;
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  /* identical to box height, or 144% */


  /* text/body */
  color: #1E1F1F;
}

/* TOC body */
.row>aside>nav#toc>ul.nav{

  /* brand/primary/60 */
  border-left: 3px solid #2D977D;
  /* Nav Shadow */
  filter: drop-shadow(0px 6px 28px rgba(0, 0, 0, 0.1));

  /* Inside auto layout */

  flex: none;
  flex-grow: 0;
  margin-bottom: 0;
  /* custom */
  width: 100%;
}
/* TOC body: All list items */
.row>aside>nav#toc>ul.nav>li a{
  border-radius: 0;
  margin-bottom: 0;
  margin-top: 0;
}
/* TOC body: active list item */
.row>aside>nav#toc>ul.nav>li a.active{
  color: #FCFFFE;
  background: #2D977D;
  border-radius: 0;
  margin-bottom: 0;
  margin-top: 0;
}
/*
.row>aside>nav#toc>ul.nav>li>ul.nav>li a.active{
  background: #55aa95;
}
*/

/* TOC body: hover list item */
.row>aside>nav#toc>ul.nav>li a:not(.active):hover{
  /* brand/secondary/00 */
  background: #E6F1F7;
  /* brand/primary/60 */
  border-left: 6px solid #2D977D;
}

/* TOC body: active+hover list item */
.row>aside>nav#toc>ul.nav>li a.active:hover{
   filter: brightness(95%);
}

.row>aside>nav#toc>ul.nav>li a:focus{
  /* neutral/00 */
  background: #FCFFFE;
  border: 4px solid rgba(45, 151, 125, 0.25);
  border-radius: 0;

  color: inherit;
}

/*================================================
==================================================
=============== CODE FORMATTING ==================
==================================================
================================================*/
/*
Relevant tags:
  - Code blocks
    - MAIN: div.sourceCode
    - SUB (in order):
      - pre.sourceCode
      - code.sourceCode.R
      - span (individual lines)
  - code single
    - <code> (no classes)
*/
body code {
  /*Set font style of all code*/
  font-family: 'Courier Prime', monospace;
  background: #F3F5F4;
  border: 1px solid #DCDCDC;
  color: #0D0D0D;
  font-size: .875em; /* restating the bootstrap default value for this element*/
  line-height: .875em; /* restating the bootstrap default value for this element*/
  font-style: normal;
  font-weight: 400; 
}
body pre code {
  /*Set font style of all code*/
  font-family: 'Courier Prime', monospace;
  background: inherit;
  border: 0px;
  color: #0D0D0D;
  font-size: 14px;
  line-height: 22px;
}

body p>code:not(.sourceCode),
body dl code:not(.sourceCode){
  white-space: nowrap;
   /* neutral/10 */
   background: #F3F5F4;

   /* border/2 */
   border: 1px solid #DCDCDC;
   border-radius: 4px;

   /*Font edits that didn't work

   font-family: 'Courier Prime';
   font-style: normal;
   font-weight: 400;
   font-size: 16px;
   line-height: 24px;
*/


   /* text/onlight */
   color: #0D0D0D;
}


/* code snippets single-line */
body div.container code>a {
  /*text-decoration: none;*/
}


body main div.sourceCode {
  /* Auto layout */
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  /*padding: 16px;*/

  /* neutral/10 */
  background: #F3F5F4;

  /* brand/primary/60 */
  border: 0px;
  border-left: 4px solid #2D977D;
  /* custom */
  /*margin-top: inherit;*/
  margin-bottom: 1rem;
}

div.sourceCode pre.sourceCode {
  border: 0px;
  margin-bottom: 0rem;
}

/* to indent comments and output
div.sourceCode pre.sourceCode span.co
{
  margin-left: 1rem;
}
*/

/*================================================
==================================================
=============== Documentation page ===============
==================================================
================================================*/
/*
Relevant tags:
  - dl>dd
*/
.template-reference-index main div dl>dd {
  font-style: italic;
  font-weight: 200;
  font-size: 16px;
  line-height: 24px;
  /* text/subheading */
  color: #7E807F;
  margin-left: 0px;
}
.template-reference-index main div dl>dt>code {
  font-size: 16px;
  line-height: 30px;
}
/* title */
.template-reference-index main>div.section>h2 {
  font-style: normal;
  font-weight: 700;
  font-size: 30px;
  line-height: 32px;
}
/* desc */
.template-reference-index main>div.section>p {
  font-family: "Inter", Sans-Serif!important;
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 26px;
}
.template-reference-index div.section h2{
  margin-top: 48px;
}

/*================================================
==================================================
=============== Articles page ===============
==================================================
================================================*/
.template-article h1,
.template-article h2,
.template-article h3,
.template-article h4,
.template-article h5,
.template-article h6{
  margin-top: 20px;
}
.template-article main{
  gap: 40px;
}

.template-article div.section{
  margin-top: 48px;
}


/*================================================
==================================================
=========== Function definition pages ============
==================================================
================================================*/
.template-reference-topic h1{
  font-size: 30px;
  line-height: 44px;
}

.template-reference-topic h2{
  font-size: 24px;
  line-height: 38px;
}


/*================================================
==================================================
=========== Home page ============
==================================================
================================================*/
div.container.template-home div.section.level3{
  padding-bottom: 1rem;
}

/*================================================
==================================================
=========== Pagination page ============
==================================================
================================================*/
#vignette-pagination > div > nav > ul > li.page-item > a.page-link{
  border-radius: 0;
  border-style: solid;
  border-color: #CCCFCE;
  background: #FCFFFE;
  border-bottom: 1px solid #2D977D;
  padding-bottom: 6px!important;
}

#vignette-pagination > div > nav > ul > li.page-item > a.page-link:hover {
  background: #F3F5F4!important;
  padding-bottom: 3px!important;
  border-bottom: 4px solid #2D977D;
}
#vignette-pagination > div > nav > ul > li.page-item.disabled > a.page-link {
  border-color: #CCCFCE;
  border-bottom: 1px solid #2D977D;
}

/*================================================
==================================================
==================== Footer ======================
==================================================
================================================*/
/* body div footer{
  font-size: .75em;
} */
w-fit-content {
  width: fit-content;
}
#scroll-to-top:hover{
  color: var(--bs-gray-100)
}
#scroll-to-top,
footer>ul#text-links>li{
  font-size: .85em !important;
  padding: 0em 1em 0em 1em;
}
footer>p.copyright {
  opacity: .5;
  font-size: .75em;
  color: black;
  text-decoration: none;
}
footer>ul>li.nav-item:hover{
  text-decoration: underline;
  text-decoration-color: var(--bs-link-color);
}
footer>ul>li.nav-item>a {
  text-decoration: none;
}