// Offset scrolling to compensate for navbar so anchors work correctly
html, body 
    scroll-padding-top: 4.5rem

// Impose a max height on the site logo so it doesn't scale and look bad
.nav
    &_brand
        img
            max-height: 2rem
    // search box
    &_search
        display: grid
        align-items: center
        .search
            @media screen and (min-width: 992px)
                margin-right: 1.5rem
                

// Magic for collapsing content, borrowed from https://www.digitalocean.com/community/tutorials/css-collapsible
.lbl-toggle
    display: block
    font-size: 125%
    cursor: pointer
    transition: all 0.25s ease-out
              
.lbl-toggle::before
    content: ' '
    display: inline-block
    border-top: 5px solid transparent
    border-bottom: 5px solid transparent
    border-left: 5px solid currentColor
    verticale-align: middle
    margin-right: .7rem
    transform: translateY(-2px)
    transition: transform .2s ease-out

.collapsible-content .content-inner
    border-bottom-left-radius: 7px
    border-bottom-right-radius: 7px
    padding: .5rem 1rem

.collapsible-content
    max-height: 0px
    overflow: hidden
    transition: max-height .25s ease-in-out

.toggle:checked + .lbl-toggle + .collapsible-content
    max-height: 100vh

.toggle:checked + .lbl-toggle::before
    transform: rotate(90deg) translateX(-3px)

.toggle:checked + .lbl-toggle
    border-bottom-right-radius: 0
    border-bottom-left-radius: 0

// Make the ToC a bit more compact than other lists
.post_toc
    a
      color: inherit
    ul, ol
        padding-top: 0.0rem
        padding-left: 0.5rem
        padding-bottom: 0.0rem
    li
        padding-top: 0.01rem
        padding-left: 0.5rem
        padding-bottom: 0.01rem
        font-size: 1rem

// code overrides
code
    word-break: normal
    &.noClass
        line-break: normal


// search from https://github.com/onweru/compose
.search
  flex: 1
  display: flex
  justify-content: flex-end
  position: relative
  &_field
    padding: 0.5rem 1.5rem 0.5rem 2.5rem
    border-radius: 1.5rem
    width: 13.5rem
    outline: none
    border: none
    background: transparent
    color: var(--text)
    box-shadow: 0 1rem 4rem rgba(0,0,0,0.17)
    font-size: 1rem
  &_label
    width: 1rem
    height: 1rem
    position: absolute
    left: 0.33rem
    top: 0.25rem
    opacity: 0.33
    svg
      width: 100%
      height: 100%
      fill: var(--text)
  &_result
    padding: 0.5rem 1rem
    &:not(.passive):hover
      background-color: var(--theme)
      color: var(--light)
    &.passive
      display: grid
    &s
      width: 13.5rem
      background-color: var(--bg)
      border-radius: 0 0 0.25rem 0.25rem
      box-shadow: 0 1rem 4rem rgba(0,0,0,0.17)
      position: absolute
      top: 125%
      display: grid
      overflow: hidden
      z-index: 5
      &:empty
        display: none
  &_title
    padding: 0.5rem 1rem 0.5rem 1rem
    background: var(--theme)
    color: var(--light)
    font-size: 0.9rem
    opacity: 0.87
    text-transform: uppercase