// =============================
// post.scss
// =============================
// Used for single post view.

$postMaxWidth: 1000px;

.post{

    justify-self: center;
    margin: 0 2rem;
    max-width: $postMaxWidth;
    @include flexbox{
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }

    &__title{

        &__text{
            text-align: center;
            color: var(--c-postTitle);
            margin-bottom: 0;
        }
    }

    &__meta{

        @include flexbox;
        width: 100%;

        &__divider{
            color: var(--c-postText);
            margin: 0 1rem;

            @include for-size('tablet'){
                display: none;
            }
        }

        &__category{
            text-transform: uppercase;
            margin: 0;
            @include flexbox;

            &__title{
                color: var(--c-noCategoryText);
                background: var(--c-noCategoryBackground);
                padding: .2rem .5rem;
            }

            @include for-size('tablet'){

                display: none;
                margin-top: 1rem;
                p{
                    margin: 0;
                    width: 100%;
                    text-align: center;
                }
                flex-direction: column;
            }
        }

        &__date{

            color: var(--c-postText);
            @include for-size('tablet'){
                margin-top: .5rem;
            }
        }

        &__author{

            color: var(--c-postText);
            width: fit-content;
            @include flexbox;
    
            &__photo{
                margin: 0 1rem;
                width: 2rem;
                border-radius: 100%;
            }
        }

        @include for-size('tablet'){
            flex-direction: column;
        }
    }

    &__content{

        color: var(--c-postText);
        h1{
            font-size: 1.8rem;
        }
        img{
            max-width: 100%;
        }
    }

    &__navigator{

        margin-top: 1rem;
        width: 100%;

        &__buttons{

            @include flexbox{
                justify-content: space-between;
            };

            a{
                transition: $t-smooth;
                text-decoration: none;
                font-weight: bold;
                font-size: 1.25rem;
                color: var(--c-navigator);
                filter: var(--c-navigatorFilter);

                display: flex;
                align-items: center;

                &:hover{
                    letter-spacing: .25rem;
                }

                .arrow-left{
                    margin-right: .5rem;
                    height: 1em;
                }
                .arrow-right{
                    margin-left: .5rem;
                    height: 1em;
                }
            }
        }
    }
}

// Enable text wrapping on mobile
@media screen and (max-width: $postMaxWidth){
    .post{
        max-width: calc(100% - 2rem);

        &__content{
            max-width: 100%;
        }
        
        &__content p{
               overflow-wrap: break-word;
        }
    }
}
