/* css styles */

.navbar {
  background-color: #1f1f1f !important;
  background-image: linear-gradient(to bottom, 
    transparent 70%, 
    #27293d 100%); /* rgb(0, 94, 71) */
  color: #cfd8dc; /*  #27293d */
  display: flex;
  align-items: bottom;  /* vertically centers content */
  justify-content: space-between; /* optional */
  height: 60px; /* adjust as desired */
  padding: 0 2rem;  /* horizontal padding */
  border-bottom: 2px solid #3a3a3a !important;
}

.navbar a {
  display: inline-block;           /* makes <a> a flex container */
/*  align-items: center;     /* vertically center content */
  height: 200%; 
  color: #cfd8dc; /* your main accent */
  transition: color 0.3s ease;
  text-decoration: none;
}

.navbar a:hover {
  background: linear-gradient(to top, transparent 0%, #27293d 90%);
  color: #00bc8c; /*  #1f8571; */
  font-weight: bold;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.navbar-collapse.collapse.show {
  margin-top: 10px !important;
  background-color: #1f1f1f !important;
  border: 2px solid #27293d !important;
  border-radius: 8px;
  box-shadow: 0 1px 4px #27293d;
}
  
#quarto-content {
  background-color: #1f1f1f !important;
}


code {
  font-size: clamp(0.75rem, 0.6vw, 1rem) !important;
}

/*Code block label */
.code-with-copy::before {
  position: absolute;
  top: -3em; 
  left: 1em;
  font-weight: bold;
  font-family: 'Fira Code', monospace;
  padding: 0.5em 0.6em;
  border-radius: 8px;
  font-size: 0.9em;
  z-index: 100;
  color: #cfd8dc;
  border: 1px solid #cfd8dc !important;
}

.code-with-copy {
  overflow: hidden; /* keeps rounded corners intact */
  position: relative;
  overflow: visible;
}


.nav-footer {
  background-color: #141414 !important;
}

.navbar #quarto-search.type-overlay .aa-Autocomplete svg.aa-SubmitIcon {
    width: 1.1rem !important;
    height: 1.1rem !important;
}


.page-container {
  position: relative; /* create containing block */
}


/* Normal state: always visible */
.code-copy-button {
  filter: brightness(0) saturate(100%) invert(34%) sepia(35%) saturate(900%) hue-rotate(211deg) brightness(1.1) contrast(1.2);
}

/* Hover effect */
.code-copy-button:hover {
  filter: brightness(0) saturate(100%) invert(34%) sepia(35%) saturate(1200%) hue-rotate(211deg) brightness(1.3) contrast(1.3);
}

.footer {
  height: 40px;
}