@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Fira+Sans+Condensed:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/*-- scss:defaults --*/
$white:    #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #ddd !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #868e96 !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black:    #000 !default;

// Inferno colors
// viridisLite::viridis(8, option = "inferno", begin = 0.1, end = 0.9)
$blue:    #42159D !default;
$indigo:  #771C6D !default;
$purple:  #480B6A !default;
$pink:    #A52C60 !default;
$red:     #CF4446 !default;
$orange:  #EE6A24 !default;
$yellow:  #FB9E07 !default;
$green:   #02b875 !default;
$teal:    #20c997 !default;
$cyan:    #17a2b8 !default;

$primary:       $blue !default;
$secondary:     $gray-500 !default;
$success:       $green !default;
$info:          $cyan !default;
$warning:       $yellow !default;
$danger:        $red !default;
$light:         $gray-100 !default;
$dark:          $gray-800 !default;

$font-family-sans-serif:      Fira Sans Condensed, sans-serif !default;
$font-family-serif:           Barlow, serif !default;  /* Not actually a serif font but whatever */

$font-size-base:              1.25rem !default;
$headings-font-weight:        700 !default;

$h1-font-size: $font-size-base * 2.45;
$h2-font-size: $font-size-base * 1.85;
$h3-font-size: $font-size-base * 1.5;
$h4-font-size: $font-size-base * 1.2;
$h5-font-size: $font-size-base * 1;
$h6-font-size: $font-size-base * 0.8;

$toc-font-size: 1.1rem;
$sidebar-font-size: 1.1rem;
$sidebar-font-size-section: 0.9rem;

$link-color: $red;
$link-hover-color: $yellow;

$monokai-bg: #2e3440;


/*-- scss:rules --*/
h2 {
  border-bottom: none;
}

ul,
ol {
  font-family: $font-family-serif;
}


// Custom active link colors
.navbar-dark .navbar-nav .show > .nav-link, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active {
  color: #FFC361;
}

div.sidebar-item-container .active, div.sidebar-item-container .show > .nav-link, div.sidebar-item-container .sidebar-link > code {
  color: $yellow;
}


// Home page stuff
.title-block {
  margin: 1em 0;
  border-bottom: 3px solid $gray-200;
  padding-bottom: 1em;
}

.course-details {
  margin: 0 0 1em;
  border-bottom: 3px solid $gray-200;
  padding-bottom: 1em;
}

.course-details h3 {
  margin-top: 0;
}

.course-title {
  font-size: 3.5rem;
  margin-top: 0;
}

.course-subtitle {
  font-size: 1.7rem;
}

.course-meta {
  font-size: 1.2rem;
  color: $gray-600;
}

.course-details ul {
  list-style: none;
  text-indent: -0.7rem;
  padding-left: 1.4rem;
}

.contact-policy p {
  font-size: 1rem;
  line-height: 1.5;
}

.course-details-smaller li {
  font-size: 1rem;
}

.course-details-smaller h3 {
  font-size: 1.4rem;
}


// Footer stuff
.nav-footer-left {
  text-align: left;
}

.nav-footer-right {
  text-align: right;
}


// Schedule stuff
.content-title {
  font-weight: 700;
}

.content-note {
  font-size: 0.8rem;
  display: block;
}

.schedule-page h3 {
  text-align: center;
  margin-top: 3rem;
  border-bottom: 3px solid $orange;
  padding-bottom: 0.5rem;
}

.download-btn {
  padding-top: 0.25rem;
  margin-bottom: 0;
  text-align: center;
}


// News stuff
.back-nav {
  margin-bottom: 1.5rem;
}

.news .quarto-title-meta {
  font-size: 1.1rem;
  border-left: 5px solid $orange;
  padding: 0 0.5rem 1rem;
  margin: 1rem 0 2.5rem;
  background-color: lighten($orange, 40%);
}

.news .quarto-categories {
  padding-top: 0.5em;
}


// Content page stuff
// Date bar
.date-block {
  font-size: 1.3rem;
}

.bg-content {
  background-color: $pink;
}

.bg-assignment {
  background-color: $red;
}

// Slightly larger buttons
p a.btn, .buttons span.btn {
  font-size: 1.2rem;
}

.buttons .btn {
  margin-bottom: 1rem;
}

main {
  // No space after lists-within-lists
  ol ol,
  ul ul,
  ol ul,
  ul ol {
    margin-bottom: 0em;
  }

  // But yes space after lists-within-lists when paragraphs are involved
  ol p + ol,
  ul p + ul,
  ol p + ul,
  ul p + ol {
    margin-bottom: 1em;
  }
}


// Make callout text and icon bigger
.callout.callout-style-default {
  > div.callout-header,
  > .callout-body {
    font-size: 1.2rem;
  }

  .callout-icon::before {
    height: 1.2rem;
    width: 1.2rem;
    background-size: 1.2rem 1.2rem;
  }
}

// Increase font size in sidebar
.sidebar-navigation .sidebar-section .sidebar-item,
.sidebar-navigation .sidebar-item{
  line-height: 1.2;
  padding-bottom: 0.4rem;
}

.sidebar-item .sidebar-item-toggle .bi {
  // The dongle for opening and closing sections
  font-size: 1.1rem;
  text-align: center;
}

// Increase font size in TOC
#TOC {
  padding-bottom: 0.1em;
}

#toc-title {
  font-weight: 700;
}

.sidebar nav[role="doc-toc"] > ul li a {
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}


// Code stuff
// Shrink blocks of code
pre.text, pre.sourceCode, .cell-output pre {
  font-size: 0.775em;
}

// Slight bottom margin to output
.cell-output {
  margin: 0 0 1em;
}

// Remove margin on pre in output
.cell-output pre {
  margin-bottom: 0;
  color: #ffffff;
}

// Format output and plain text blocks like code
.cell-output, pre.text {
  border: none;
  padding: .4em;
  background-color: $monokai-bg;
  border: 1px solid $monokai-bg;
  border-radius: .25rem;
}

pre.text {
  color: #ffffff;
}