/* css styles */

pre, code {
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  overflow-x: auto !important;
}

figcaption {
  margin: auto;
  text-align: center;
}

.quarto-about-jolla.column-page {
  padding-top: 1rem !important;
}

figure {
  max-width: 800px;
  height: auto; /* Keep aspect ratio */
  display: block;
  margin: 0 auto;
}

.about-image.rectangle {
  width: 90% !important;
  max-width: 700px !important;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* All Entries of Left Sidebar except for the ones handled separately below */
#quarto-sidebar > div.sidebar-menu-container {
    font-family: "Roboto Sans", sans-serif; !important;
}

#quarto-sidebar > div.sidebar-menu-container > ul > li:nth-child(1) {
  padding-bottom: 6px;
}

#quarto-sidebar > div.sidebar-menu-container > ul > li:not(:first-child) {
  padding-bottom: 3px;
}

.sidebar-item-text {
  color: #125740 !important;
}

/* First Entry of Left Sidebar */
#quarto-sidebar > div.sidebar-menu-container > ul > li:nth-child(1) > div > a > span {
    font-size: 1.3em;
}

/* All other Top Level Entries of Left Sidebar */
#quarto-sidebar > div.sidebar-menu-container > ul > li:not(:first-child) > div > a > span {
    font-size: 1.15em;
}

/* Title "Table of Contents" */
#quarto-margin-sidebar > nav.toc-active > h2 {
    font-size: 1.1em;
    color: #125740;
    padding: 1;
    font-family: "Roboto Sans", sans-serif; !important;
}

/* SubTitle of Document */
.subtitle {
    font-family: "Roboto Sans", sans-serif; !important;
}

/* Remove Breadcrumbs in Header (not banner) on desktop but not mobile */
@media screen and (min-width: 768px) {
  #title-block-header > nav {
    display: none !important;
  }
}

#quarto-margin-sidebar > nav.toc-active > ul > li > a{
    color: #125740;
    font-size: 1.05em;
}

#quarto-margin-sidebar > nav.toc-active > ul > li > a > span{
    color: #125740;
    font-size: 1.05em;
}

/* All Entries of Right Sidebar except for the ones handled separately below */
#quarto-margin-sidebar > nav.toc-active > ul > li {
    font-family: "Roboto Sans", sans-serif; !important;
}

#quarto-margin-sidebar > nav.toc-active > ul > li a.nav-link.active{
    color: #11A473 !important;
}

#quarto-margin-sidebar > nav.toc-active > ul > li a.nav-link:hover{
    color: #11A473 !important;
}

#quarto-margin-sidebar {
  padding-top: 28px !important;
}

.about-link:hover {
  color: #11A473 !important;
}

.sidebar-link.active {
  color: #11A473 !important;
  background-color: #ECF8F4 !important;
}

.navbar .nav-link {
  color: #125740;
  font-family: "Roboto Serif", serif; !important;
}

.nav-tabs .nav-link {
  color: #125740;
  font-family: "Roboto Serif", serif; !important;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  color: #11A473 !important;
}

.nav-link.active {
  color: #11A473 !important;
  background-color: #ECF8F4 !important;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: #11A473 !important;
}

.nav-link.active[data-scroll-target] {
  border-left: 2px solid #11A473 !important;
}

.navbar {
  border-bottom: .5px solid #e5e5e5;
}

/* Display classes (Bootstrap 5) */
.display-1 .display-2 {
  font-family: "Roboto Serif", serif;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: "Roboto Serif", serif;
  font-weight: normal;
}

/*
h1 {
  font-size: 10px;
}
*/

/* Paragraphs */
p {
  font-family: "Roboto Sans", sans-serif;
}

/* Adjust any other structural elements as needed */
.blockquote {
  font-family: "Roboto Sans", sans-serif;
}
code, pre {
  font-family: "Fira Code", monospace;
  background-color: #ECF8F4 !important;
  color: #125740 !important;
}

span.fake-code-block {
  font-family: "Fira Code", monospace;
  background-color: #ECF8F4 !important;
  color: #125740 !important;
}

span.nobreak {
  display: inline-block;
  white-space: nowrap;
  width: auto;
}

a {
  color: #125740;
}

a:hover,
a:focus {
  color: #11A473;
}

h1 .header-section-number,
h2 .header-section-number,
h3 .header-section-number,
h4 .header-section-number,
h5 .header-section-number {
  color: #000000; /* any color you'd like */
}

/* Force code blocks to wrap at the container width */
.sourceCode.default {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word; /* for older browsers, use 'word-wrap: break-word;' */
}

/* Customize height of banner */
.quarto-title-block {
  max-height: 400px !important;  /* Adjust this value as needed */
  overflow: hidden;              /* Hide any overflowing content */
  margin-left: auto;
  margin-right: auto;
}

.quarto-title-banner {
  padding-top: 30px !important;
  padding-bottom: 20px !important; /* Adjust this value as needed */
}

/* Remove Breadcrumbs in banner (not header) on desktop but not mobile */
@media screen and (min-width: 768px) {
  #title-block-header > div.quarto-title-banner.page-columns.page-full > div > nav {
  display: none !important;
  }
}

.content.quarto-banner-title-block.column-body {
  min-height: 0 !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.custom-tooltip {
  position: relative;
  cursor: help;
  text-decoration-line: underline !important;
  text-decoration-style: dotted !important;
  text-underline-offset: 5px;
  color: #125740; !important;
}

/* Initially hide the tooltip */
.custom-tooltip .tooltip-text {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #125740;
  color: #fff;
  padding: 5px 8px;
  border-radius: 4px;
  white-space: normal;        /* Allow wrapping */
  overflow-wrap: break-word;  /* Break long words if necessary */
  min-width: 200px;
  max-width: calc(100vw - 20px); /* Ensure it never exceeds the viewport width */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.1s ease-in-out;
  pointer-events: none;
}

/* Show the tooltip on hover */
.custom-tooltip:hover .tooltip-text {
  opacity: 1;
  visibility: visible;
}

.share-center {
  display: flex;
  justify-content: center;
  gap: 0.75rem;   /* space between icons */
  margin: 2rem 0; /* optional vertical spacing */
}


/*

Some lines of code that might help with getting responsive figure width percentages.
Didn't work last time I tested.

@media (max-width: 900px) {
  figure {
    width: 75%;
  }
}

figure {
    width: 75%;
}
*/