// GENERAL
@include selection {
    background: $main;
    color: white;
    text-shadow: none;
}

html {
    background: white;
    color: $grey--dark;

    @include mobile--small{
        font-size: 14px;
    }
    @include mobile--large{
        font-size: 16px;
    }
    @include desktop--small{
        font-size: 16px;
    }
}

body{

}
.body--block-scroll {

    @include mobile{
        overflow: hidden;
    }
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {

}

a {
    color: $main;
    text-decoration: none;
}

hr {
    display: block;
    border: none;
    outline: none;
    margin: 1.5rem 0;
    margin-top: calc(1.5rem - 1px);
    padding: 0;
    height: 1px;
    background: $grey--dark;
}



// MAIN
main{

}



// SECTION
section{
    padding: 6rem 0;
}

// colors
.section--light{
    background: $grey--light;
}
.section--dark{
    color: white;
    background: $grey--dark;
}
.section--main{
    color: white;
    background: $main;
}

// success/error
.section--success,
.section--error{
    color: white;

    p{
        margin-top: 0;
        padding-left: 2rem;
        font-weight: 700;
        background-size: 1.5rem 1.5rem;
        background-position: 0 0;
        background-repeat: no-repeat;
    }
}
.section--success{
    background: $success;

    p{
        background-image: url('../icons/icon-message__success.svg');
    }
}
.section--error{
    background: $error;

    p{
        background-image: url('../icons/icon-message__error.svg');
    }
}

// sizes
.section--small{
    padding: 3rem 0;
}



// STICKY SIDEBAR
.sticky-sidebar{

    @include desktop{
        position: sticky;
        top: 3rem;
    }
}



// THE CONTENT
.the-content{

    // hug first element
    & > *:first-child{
        margin-top: 0 !important;
    }

    // make first paragraph lead
    & > p:first-of-type {
        font-size: $font-scale * 1rem; // same as .lead
    }

    // lists
    ul{
        margin-bottom: 0;
    }
    // ul:not([class]){
    //
    // }

    // anchors
    // a:not([class]){
    //     color: currentColor;
    //     text-decoration: underline;
    // }

    // images
    img{
        display: inline-block;
        // margin-top: 1.5rem;
        height: auto;
        width: auto;
        max-width: 100%;
    }
}



// FEATURED IMAGE
.featured-image{

    img{
        display: block;
        object-fit: cover;
    }

    @include mobile{

        img{
            height: 21rem;
            // make full bleed
            width: 100vw;
            margin-left: 50%;
            transform: translateX(-50%);
        }
        span{
            display: none;
        }
    }
    @include desktop{
        position: relative;

        img{
            width: 100%;
            max-height: calc(100vh - 6rem);
        }
        span{
            position: absolute;
            bottom: -1.5rem;
            left: 0;
            margin: 0 1.5rem;
            display: block;
            padding: 1.5rem;
            font-family: $font-family--heading;
            font-weight: 700;
            font-size: 1 * $font-scale * 1rem; // same as h3
            line-height: $font-leading;
            color: white;
            background: $main;
        }
    }
}



// INFO
.info{
    padding: 1.5rem;
    color: #008CCD;
    background: rgba(0, 140, 205, 0.1);
    border: 1px solid rgba(0, 140, 205, 0.25);
}