@import "css/variables";

h1, h2, h3, h4, h5 {
    font-family: $font-title;
    color: $color-primary;

    font-weight: 600;
    font-kerning: normal;
}

h2 {
    margin-top: 2em;

    @media (max-width: $width-base) {
        font-size: 2em;
    }

    @media (max-width: $width-container-mobile) {
        font-size: 1.5em;
    }
}

h3 {
    margin-top: 1.6em;
    margin-bottom: .5em;
    font-size: 1.5em;
}

aside {
    font-size: 1.2em;
    margin-top: 1rem;
    padding-top: 1em;
}

article p em {
    font-style: italic;
}


.sidenote {
    @include outOfBox();
    font-size: .9em;
    padding: 2rem 1rem .1rem 2rem;
    margin-top: 3rem;
    margin-bottom: 4rem;

    color: #000;
    background-color: $color-primary-pastel;

    > h2 {
        color: inherit;
        margin: 0 0 1rem;
    }

    > p {
        color: inherit;
        font-weight: 400;
    }

    ul {
        font-weight: 400;
    }

    label {
        font-weight: 400;
    }

    a {
        color: inherit;
        text-decoration-color: inherit;
    }
}

.sidenote pre {
    max-width: calc(100% - 1em);
    margin-left: 0;
}

.sidenote.frontline {
    background-color: #0756b0;
    background-image: linear-gradient(to right, #0756b0 0%, #4530a8 80%);
    color: #fff;
    text-decoration-color: #fff;

    a {
        font-weight: bold;
    }
}

.sidenote.blogs-for-devs {
    &.index {
        background-color: darken(#fff, 5);
    }

    background-color: $color-primary-pastel;
    color: #000;
    text-decoration-color: #000;

    a {
        font-weight: bold;
    }
}

.newsletter-form {
    display: flex;
    justify-content: center;
    align-items: center;

    @media (max-width: $width-mobile) {
        flex-direction: column;
        align-items: center;
    }

    input[type="email"] {
        border: none;
        font-family: $font-body;
        font-weight: normal;

        &:active,
        &:focus {
            box-shadow: inset 0 -3px 0 0 $color-primary;
        }

        font-size: 1em;
        margin-left: .5em;
        padding: .5em;
    }

    label {
        font-size: 1em;

        @media (max-width: $width-mobile) {
            margin-bottom: .5em;
        }
    }

    button {
        font-weight: normal;
        margin: 0 0 0 1em;
        font-size: .9em;

        @media (max-width: $width-mobile) {
            margin-top: .5em;
        }
    }
}

.sidenote .newsletter-form {
    font-size: 1.3em;
    margin-bottom: 1em;

    input[type="email"] {
        font-size: .9em;

        &:active,
        &:focus {
            box-shadow: inset 0 -3px 0 0 #000;
        }
    }
}

.frontline .newsletter-form {
    button {
        background-color: #f0de38;
        border-color: #f0de38;
        color: #000;

        &:hover {
            border-color: #000;
        }
    }
}

.cta.frontline:hover {
    color: #000;
    border-color: #000;
}

strong {
    background-color: $color-primary-pastel;
    font-weight: 600;
    padding: 2px;
}