// 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

// Magic for collapsing content, borrowed from https://www.digitalocean.com/community/tutorials/css-collapsible
input[type='checkbox']
    display: none  

.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