/* css styles */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');


body {
  font-family: Lora, Noto Sans, Lora, Helvetica, Arial, sans-serif;
}


h1, h2, h3, h4, h5, h6 {
  color: #500000 !important;
  font-family: Segoe UI, Roboto Slab, Helvetica, Arial, sans-serif;
}

.navbar-nav > li > a,
.navbar-brand {
  font-family: Lora, Roboto Slab, Helvetica, Arial, sans-serif;
}

p {
text-align: justify;
text-justify: inter-word; /* spreads words evenly */
}

/* Hyperlinks and navigation links */
a {
  color: #500000;
  text-decoration: none; /* optional: remove underline */
}

a:hover,
a:focus,
a:active {
  color: #750000; /* slightly darker maroon for hover effect */
  text-decoration: underline;
}

a:visited {
  color: #500000; /* keep visited links same as normal */
}


/* --- Controls row --- */
.pub-controls {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.pub-controls input,
.pub-controls select {
  padding: 0.5rem 0.75rem;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  font-size: 0.9rem;
}

/* Target the sidebar's scrollable area */
.sidebar-navigation .quarto-sidebar-section-body {
  
  /* --- For the scrollbar track (the background) --- */
  &::-webkit-scrollbar-track {
    background: #f1f1f1; /* Light grey track */
  }

  /* --- For the scrollbar handle (the part you drag) --- */
  &::-webkit-scrollbar-thumb {
    background: #888; /* Darker grey handle */
    border-radius: 5px; /* Rounded corners on the handle */
  }

  /* --- For the scrollbar handle on hover --- */
  &::-webkit-scrollbar-thumb:hover {
    background: #555; /* Even darker handle on hover */
  }
  
  /* --- For the scrollbar itself (width) --- */
  &::-webkit-scrollbar {
    width: 8px; /* Make the scrollbar thinner */
  }
}


/* Add this to the end of your styles.css file */

/* force navbar background and text colors */
.navbar, .navbar-expand {
  background-color: #500000 !important;
}
.navbar-brand, 
.navbar-nav .nav-link {
  color: #ffffff !important;
}
/* optional: slightly lighten on hover */
.navbar-brand:hover,
.navbar-nav .nav-link:hover {
  color: #dddddd !important;
}