@import 'youtubevars.sass'
@import 'mixins'
@import 'collapsible'

@include toggle-section-numbers(h3, true)
@include toggle-section-numbers(h4, false)
@include remove-section-number(h2)

// @include set-header-sizes($default-header-sizes)
// @include set-header-color($text-color)

// Base body styles
body
  font-family: $primary-font
  font-size: 16px
  line-height: 1.6
  color: $text-color
  background-color: $background-color

// Headers
@each $header, $props in $header-styles
  #{$header}
    font-family: $secondary-font
    font-weight: bold
    color: map-get($props, color)
    font-size: map-get($props, size)
    margin-top: 20px
    margin-bottom: 10px

div#postamble
  border-color: $text-color

a
  color: $anchor-color
  text-decoration: none

  &:hover
    color: $anchor-hover-color
    border-bottom-color: $anchor-hover-color
    text-decoration: underline

h3 + .outline-text-3 p
  margin-top: 0

h3 + .outline-text-3 p > a:first-of-type
  font-size: 1em
  margin-left: $first-anchor-margin-left

h4
  text-transform: uppercase
  padding-left: 2em
  color: #c5b06a
  margin-top: 0

h4 + .outline-text-4 ol
  padding-left: 4em

  a
    color: #a19581
    text-decoration: none

    &:hover
      color: #ffad42  // A warm, light orange that pairs well with the yellow marker
      border-bottom-color: #ffad42
      text-decoration: underline

  li
    &::marker

      color: #8b872b
      font-size: 1.2em
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3)

    b
      font-family: arial-black
      font-size: .7em
      text-transform: uppercase
      padding-left: 2em
      
      color: #c5b06a

ul.notes
  list-style-type: square
  padding-left: 3em

  ul.desc-link
    li
      margin-bottom: .2em // Add space between list items


      > a
        display: block