@import 'variables.css';

.article-text-content {
    --font-size: 1rem;
    padding: 0px;
    font-size: var(--font-size);

    --text: var(--color-dark);
    --primary-lighter-color: var(--color-primary-light);
    --secondary: var(--color-secondary);
    --primary: var(--color-primary);
    --text-primary-color: var(--color-primary);
    --light: var(--color-light);
}
.article-text-content p,
.article-text-content ol,
.article-text-content ul,
.article-text-content pre {
    color: var(--color-dark);
    text-align: justify;
    margin: 0;
}
.article-text-content h1,
.article-text-content h2,
.article-text-content h3,
.article-text-content h4,
.article-text-content h5,
.article-text-content h6 {
    margin: 0;
    color: var(--color-primary) !important;
    text-align: left !important;
}

.article-text-content h1 *,
.article-text-content h2 *,
.article-text-content h3 *,
.article-text-content h4 *,
.article-text-content h5 *,
.article-text-content h6 * {
    color: var(--color-primary) !important;
}

.article-text-content blockquote {
    border-left: 8px solid var(--color-primary);
    color: var(--color-primary);
    font-size: 1.25rem;
    font-weight: bold;
    text-align: justify;
    margin: 1rem 0 1rem 1rem;
    padding-left: 0.5rem;
    p {
        color: var(--color-primary);
    }
}
.article-text-content img {
    max-width: 100%;
    height: auto;
}
.article-text-content .article-image-container .ql-image-alt {
    margin-right: 0.5rem;
}
.article-text-content .article-image-container .article-image-title {
    font-size: 0.85rem;
    font-style: italic;
}

.article-text-content .ql-image-caption {
    font-style: italic;
}


.article-text-content .divider,
.article-text-content .ql-divider,
.article-text-content hr {
    margin: 1rem 0;
    border-bottom: 2px solid var(--color-primary);
    display: block;
    opacity: 1;
}
.article-text-content .ql-code-block-container {
    text-align: justify;
    padding: 0.5rem;
    background-color: unset;
    font-family: inherit;
}
.article-text-content .ql-code-block-container .ql-code-block {
    background-color: var(--color-primary);
    color: var(--color-light);
    font-size: 1.15rem;
    padding-inline: 0.5rem 0;
    white-space: pre-wrap;
    font-weight: bold;
    display: inline;
}
.article-text-content a {
    font-weight: bold;
    color: var(--color-primary) !important;
}
.article-text-content a:hover {
    text-decoration: underline;
}
.article-text-content.promotional-text {
    text-align: justify !important;
    margin: 0 !important;
    /* font-size: 22px !important; */
    /* font-weight: bold; */
}
/* .article-text-content.promotional-text strong {
    font-size: 22px !important;
} */
.article-text-content iframe {
    display: block;
    margin: auto;
    max-width: 100%;
}
.article-text-content .ql-syntax {
    background-color: var(--primary);
    color: var(--light);
    font-size: 1.15rem;
    overflow: visible;
    padding-inline: 0.5rem 0;
    white-space: pre-wrap;
    font-weight: bold;
    display: inline;
    text-align: justify;
    overflow-wrap: break-word;
    text-wrap: wrap;
    white-space-collapse: preserve;
    font-family: 'Roboto', sans-serif !important;
}

.article-text-content .ql-icon {
    width: var(--font-size);
    height: var(--font-size);
}

.article-text-content .ql-icon svg {
    fill: var(--text);
}
.ql-article-in-article {
    border: 5px solid var(--color-primary);
    border-left: 0;
    border-right: 0;
    padding: 0.5rem;
    background-color: var(--color-primary-light);
}

/* Base alignment classes */
.article-text-content p {
    text-align: justify;
    hyphens: unset;
    -webkit-hyphens: unset;
    -moz-hyphens: unset;
}

@media (max-width: 767px) {
    .article-text-content.alignment-left p {
        text-align: left;
    }

    .article-text-content.alignment-justify p {
        text-align: justify;
    }

    .article-text-content.alignment-right p {
        text-align: right;
    }

    /* Hyphenation class */
    .article-text-content.alignment-hyphens p {
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        hyphens: auto;
    }
    .article-text-content.alignment-no-hyphens p {
        -webkit-hyphens: none;
        -moz-hyphens: none;
        hyphens: none;
    }
}
/* Media query for desktop - adjust the breakpoint as needed */
@media (min-width: 768px) {
    .article-text-content.alignment-md-left p {
        text-align: left;
    }

    .article-text-content.alignment-md-justify p {
        text-align: justify;
    }

    .article-text-content.alignment-md-right p {
        text-align: right;
    }

    .article-text-content.alignment-md-hyphens p {
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        hyphens: auto;
    }
    .article-text-content.alignment-md-no-hyphens p {
        -webkit-hyphens: none;
        -moz-hyphens: none;
        hyphens: none;
    }
}
@media screen and (max-width: 767px) {
    .article-text-content.alignment-left-override p {
        text-align: left !important;
    }

    .article-text-content.alignment-justify-override p {
        text-align: justify !important;
    }

    .article-text-content.alignment-right-override p {
        text-align: right !important;
    }
}
/* Media query for desktop - adjust the breakpoint as needed */
@media (min-width: 768px) {
    .article-text-content.alignment-md-left-override p {
        text-align: left !important;
    }

    .article-text-content.alignment-md-justify-override p {
        text-align: justify !important;
    }

    .article-text-content.alignment-md-right-override p {
        text-align: right !important;
    }
}