@import 'base';

$backdrop-margin: 10vw;
$supplementary-height: 600px;

$spacious-min-width: 1248px;
$compressed-max-width: 900px;

html {
    background-color: $background-light-color;
}

body {
    margin: 100px $backdrop-margin 600px;
}

// Semantic elements

figure img {
    width: 100%;
    height: auto;
}

blockquote {
    color: $primary-light-color;
    font-family: $support-font;
    font-size: 1.5rem;
    font-style: italic;
    line-height: 1.333;
    margin-top: 2rem;
    margin-bottom: 2rem;
    &:first-child {
        margin-top: 0;
    }
}

h1 {
    &.article-title {
        margin: 0.75em 0;

        // If there are no categories above title, space correctly
        &.no-margin-top {
            margin-top: 0;
        }

        // If there's no main body content, space correctly
        &.less-margin-bottom {
            margin-bottom: 0.25em;
        }
    }
}

// Page features

.main-image {
    margin: auto;
    img {
        vertical-align: middle;
    }
}

.outer-content-wrapper {
    padding: 3.0em 10vw 4.0em;
}

.article-categories {
    font-size: 0.9rem;
}

.inner-content-wrapper {
    display: flex;
    flex-direction: row;
}

.article-support {
    font-size: 0.9rem;
    width: 20vw;
    margin-right: 50px;

    // If there is nothing in article-content, make article-support full width
    &.width-full {
        width: 100%;
        margin-right: 0;
    }
}

.article-content {
    min-width: 30vw;
}

.article-support,
.article-content {
    overflow-wrap: break-word;
}

// Responsive

@mixin responsive-elements($body-size) {
    html {
        font-size: $body-size;
    }
}

@include responsive-elements($body-size: 20px);

@media (min-width: $spacious-min-width) {
    @include responsive-elements($body-size: 24px);
}

@media (max-width: $compressed-max-width) {
    .inner-content-wrapper {
        display: block;
    }

    .article-support {
        margin-right: 0;
        width: 100%;
    }

    h1.article-title {
        margin-bottom: 0.25em;
    }

    .article-content {
        margin-top: 3.5em;
        width: 100%;
    }
}

// Composite resolutions

@media (device-width: 720px) and (device-height: 480px),
       (device-width: 720px) and (device-height: 576px) {
    .article-categories {
        font-family: $context-font-composite;
    }

    .article-support {
        font-family: $support-font-composite;
    }
}

/* Smartphones (portrait and landscape) */
@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 719px) {
    @include responsive-elements($body-size: 16px);

    body {
        margin:0;
    }

    h1 {
        font-size:1.4rem;
    }
}