/**
 * Single News Styles
 */

.single-news_article {
    .news-article {
        padding: 100px 0px;

        @media (max-width: 768px) {
            padding: 50px 0px;
        }
        .container {
            max-width: 1000px;
        }
        .news-article-back {
            a {
                font-family: var(--font-heading-primary);
                font-size: 1rem;
                font-weight: 700;
                text-transform: uppercase;
                position: relative;
                padding-left: 30px;

                &:hover, &:focus-visible {
                    text-decoration: none !important;

                    &:before {
                        left: -5px;
                    }
                }
                &:before {
                    content: '';
                    display: block;
                    position: absolute;
                    top: 2px;
                    left: 0px;
                    width: 19px;
                    height: 15px;
                    background-image: url('../../svg/yellow-arrow.svg');
                    background-size: contain;
                    background-repeat: no-repeat;
                    transform: scale(-1, 1);
                    transition: .2s ease-in-out;
                }
            }
        }
        .news-article-meta {
            margin-top: var(--spacing-lg);
            margin-bottom: var(--spacing-sm);

            .news-article-date {
                font-family: var(--font-heading-primary);
                font-size: 1.2rem;
                font-weight: 700;
                text-transform: uppercase;
                color: var(--color-yellow);
            }
        }
        .news-article-title {
            h1 {
                margin-bottom: var(--spacing-lg);
            }
        }
        .news-article-content {
            h2 {
                color: var(--color-yellow);
                font-size: 2.2rem;
                margin-top: var(--spacing-lg);

                @media (max-width: 768px) {
                    font-size: 1.75rem;
                }
            }
            p, ul, ol {
                font-size: 1.2rem;

                @media (max-width: 576px) {
                    font-size: 1rem;
                }
                strong {
                    font-weight: 700;
                }
            }
            ul {
                li {
                    &:before {
                        top: 7px;

                        @media (max-width: 576px) {
                            top: 5px;
                        }
                    }
                }
            }
            a {
                color: var(--color-pink);
                text-decoration: underline;

                &:hover, &:focus-visible {
                    text-decoration: none;
                }
            }
        }
    }
}