---
---

@import mixins/reset
@import mixins/gradients
@import partials/media
@import partials/swtable

html > body
    background: #fff
    font-family: "Overpass", "Helvetica Neue", Helvetica, Arial, sans-serif
    line-height: 1

body
    color: #131313

.container
    width: $wide-content-width
    max-width: calc(100% - 3rem)
    margin: 0 auto
    font-family: "Overpass", "Helvetica Neue", Helvetica, Arial, sans-serif

.navbar
    border-bottom: solid 0.15rem #0E3E45

    .navbar-brand
        text-decoration: none
    .ircv3-logo
        float: left
        height: 1.5rem
        padding: 0.8rem 0.8rem 0.8rem 0
        @include mobile
            display: block
            height: 1.75rem
            float: none
            margin-left: auto
            margin-right: auto

    .navbar-collapse
        width: 100%

    .links
        margin: 0
        padding: 0
        width: 100%
        text-align: right
        @include mobile
            display: none
            text-align: left
            &.dropped
                display: block
        > li
            display: inline-block
            @include mobile
                display: block
                margin: 0 auto
            &:last-child a
                padding-right: 0
            a
                display: inline-block
                padding: 1.1rem 0.5rem 0.85rem
                font-size: 1.35rem
                color: #1c1c1c
                text-decoration: none
            > a:hover, a:hover > .support-dropdown-text
                text-decoration: underline
            &.active
                position: relative
                > a:after
                    @include mobile
                        display: none
                    border: solid transparent
                    content: " "
                    height: 0
                    width: 0
                    position: absolute
                    pointer-events: none
                    border-color: rgba(136, 183, 213, 0)
                    border-bottom-color: #0e3e45
                    border-width: 0.45rem
                    left: calc(50% - 0.45rem)
                    bottom: -0.15rem

.links .iconsep a .fa
    margin-top: -0.8em
    margin-bottom: -0.8em
    font-size: 2em
    position: relative
    top: 0.18em
    &.fa-envelope
        font-size: 1.7em
        top: 0.165em
        position: relative

.navbar-dropper
    float: right
    padding: 0.8rem
    position: absolute
    right: 0
    top: 0
    color: #222
    font-size: 1.75rem

.dropdown-menu
    display: none
    position: absolute
    float: right
    text-align: left
    background: #fff
    border-radius: 0 0 0.2em 0.2em
    border: solid 0.15rem #0E3E45
    border-top: none
    @include mobile
        position: inherit
        float: none
        text-align: left
    > .sep
        border-top: solid 0.15rem #0E3E45
    > li:hover
        background: #ebebeb

.dropdown-menu.dropped
    display: block
@include nomobile
    li:hover > .dropdown-menu
        display: block

.page-header, footer, .widebg
    @include gradient-vertical(#1F5E66, #1B5860)
    background: url("../img/headerbg.svg") center center, linear-gradient(to bottom, #1F5E66 0%, #1B5860 100%)
    background-size: 40rem, 100%
    color: #fff
    @include print
        background: #fff
        color: #1c1c1c

.page-header
    text-align: center
    padding: 5rem 0
    line-height: 1.2
    h1
        font-size: 2.7rem
        font-weight: 400
    span
        display: block
    @include print
        padding: 3rem 0

.spec-header
    margin-top: 2rem
    line-height: 1.1
    text-align: left
    h1
        font-size: 2.4rem
        font-weight: 600
        margin-bottom: 0.55rem
    p + p
        margin-top: 0.3em

pre
    border-radius: 0.5rem
    background: #ffffd7
    padding: 1rem
    page-break-inside: avoid
    margin: 1em 0
    @include print
        border: 0.2rem solid rgba(20, 20, 20, 0.05)
pre > code
    color: #1b1b1b

code
    white-space: pre-wrap

.rss-button
    margin-left: 0.6rem
    display: inline-block
    padding: 0.3rem 0.6rem 0.2rem
    border-radius: 0.4rem
    background: #c87b2d
    color: #fff
    font-size: 0.8em
    text-decoration: none
    &:hover
        background: #a66626
        color: #fff

footer
    margin-top: 2rem
    font-size: 1.3rem
    padding: 1rem 0 0.9rem
    .wglink
        display: inline-block
        white-space: nowrap
    .ircv3-logo
        max-height: 0.96rem
        width: 2.91rem
        position: relative
    a
        text-decoration: none
        color: #fff
    a:hover
        color: #fff
    a:hover > .wglink-text
        text-decoration: underline
    .copylink
        width: 100%
    .links
        display: inline-block
        float: right
        a:hover
            text-decoration: underline
        li, a
            display: inline-block
        li + li
            margin-left: 0.9rem
        li.iconsep + li.iconsep
            margin-left: 0.7rem
    .rss-button
        margin-left: 0

.content
    font-size: 1.175rem
    line-height: 1.4
    font-weight: 300
    > p:first-child
        margin-top: 1.86rem
    p:last-child
        margin-bottom: 0

    hr
        border: none
        border-top: 0.4rem solid #1B5860
        margin: 1.6rem 0

    p, ol, ul
        margin-top: 0.8em
        margin-bottom: 0.8em
    h1, h2, h3
        + p
            margin-top: 0.5em

    ul
        list-style: disc outside
        margin-left: 3.3rem
    ol
        list-style: decimal outside
        margin-left: 3.3rem
    ul ul, ol ul
        list-style: circle outside
        margin-left: 3.3rem
    ol ol, ul ol
        list-style: lower-latin outside
        margin-left: 3.3rem
    li + li
        margin-top: 0.6rem
    li > p
        display: inline

    .row
        margin: 2.65rem 0
        > div
            box-sizing: border-box
            &:not(:last-child)
                padding-right: 1.5rem
            // make them stack when width is really small
            @include mobile
                display: block
                width: 100%
                padding-right: 0
                & + div
                    margin-top: 2.3rem
        h2
            margin: 0
        hr
            border: none
            border-top: 0.2rem solid #1B5860
            margin: 0.5rem 0 0.9rem

        a.button
            display: block
            margin-top: 1.15rem
            background: #1B5860
            color: #fff
            text-decoration: none
            padding: 1rem 1rem 0.8rem
            border-radius: 0.65rem
            text-align: center
        a.button:hover
            text-decoration: underline

        > div:nth-child(2n)
            hr
                border-top-color: #2A6B72
            a.button
                background: #2A6B72

table
    font-size: 90%
    margin: 1.4em 0
    max-width: 100%
    overflow-x: auto
    &.fullwidth
        width: 100%
    &:first-child
        margin-top: 0
    + table
        margin-top: 0
    &:last-child
        margin-top: 0
    code.examples
        margin-top: 0.4em
        display: block
th
    font-weight: 500
    text-align: left
th, td
    padding: 0.3rem 0.6rem 0.2rem
tbody tr:nth-child(odd)
    background: #e4e4e4
tbody tr code
    background: none
tbody tr.newblock
    border-top: 4px solid #44747b
td + td, th + th
    border-left: 1px #aaa solid

@include print
    .navbar, footer
        display: none

h2
    font-size: 1.6rem
    font-weight: 500
    margin-top: 1.32em
    margin-bottom: 0.7rem
h3
    font-size: 1.45rem
    font-weight: 500
    margin-top: 1.32em
    margin-bottom: 0.7rem
h1, h2, h3
    .meta
        font-size: 0.7em
        color: #444
        margin-left: 0.35em
        font-weight: 400
tt, code, pre, .mono
    font-family: "Overpass Mono", Menlo, Monaco, Consolas, "Courier New", monospace
    font-weight: 500
    font-size: 0.9em
tt, code, pre
    color: #5A383E
a code, code a, pre a, a pre, a tt, tt a
    color: #DB1438
    text-decoration: underline
a:hover code, a:hover pre, a:hover tt
    color: inherit
a
    color: #0B7884
a:hover
    color: #1B1B1B
sub, sup
    font-size: 0.8em

.anchor
    display: none
    text-decoration: none
h1:hover .anchor, h2:hover .anchor, h3:hover .anchor, h4:hover .anchor, h5:hover .anchor, h6:hover .anchor
    display: inline
    content: url("../img/link-icon.svg")
    height: 0.9em

td > a
    &.deprecated
        color: #3b3b3b
    &.draft
        color: #b07f38
    &.proposed
        color: #ca509e
    a:hover
        color: #1B1B1B

.caret
    display: inline-block
    box-sizing: border-box
    width: 0.6em
    height: 1em
    &::after
        content: ' '
        height: 0
        position: relative
        width: 0
        border: 0.4rem solid transparent
        border-top-color: #333
        top: 0.7em

.post-content
    border-left: 1px solid #d7d7d7
    padding: 0.4rem 0 0.2rem 1.35rem
    > p:first-child
        margin-top: 0

.flexy-list
    max-width: 90rem
    font-size: 1.5rem
    text-align: center
    margin: 0.35rem auto
    > a
        display: inline-block
        padding: 0.75rem 2rem

.alert
    padding: 0.7em 1em
    border-radius: 0.6rem
    margin: 1.15em 0
    > p:first-child
        margin-top: 0
.alert-warning
    background-color: #d54
    color: #fff
    font-weight: 500
    @include print
        background-color: #fff
        border: 0.3rem dashed #d54
        color: inherit
        font-weight: 600

// sticky footer
html
    position: relative
    min-height: 100%

body
    /* Margin bottom by footer height */
    margin-bottom: 1.7rem

.whole
    margin-bottom: 7.5rem

footer
    position: absolute
    bottom: 0
    width: 100%
    /* Set the fixed height of the footer here */
    height: 1.7rem
    font-size: 1.3rem
