/**
 * Emplacement : /assets/css/rich-content.css
 *
 * CL Law Firm — styles du contenu éditorial riche.
 *
 * Objectif :
 * le contenu produit avec TinyMCE doit rester lisible et responsive
 * sur ordinateur, tablette et téléphone.
 */

.rich-content,
.to-rich-content {
    color: #273044;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 16px;

    line-height: 1.85;

    overflow-wrap: anywhere;

    word-break: normal;

    max-width: 100%;
}


.rich-content *,
.to-rich-content * {
    max-width: 100%;
}


.rich-content h2,
.rich-content h3,
.rich-content h4,
.to-rich-content h2,
.to-rich-content h3,
.to-rich-content h4 {
    color: #172033;

    font-family:
        "Poppins",
        sans-serif;

    line-height: 1.3;

    letter-spacing: -.02em;

    margin-top: 2.2em;

    margin-bottom: .8em;
}


.rich-content h2,
.to-rich-content h2 {
    font-size: 28px;
}


.rich-content h3,
.to-rich-content h3 {
    font-size: 23px;
}


.rich-content h4,
.to-rich-content h4 {
    font-size: 19px;
}


.rich-content p,
.to-rich-content p {
    margin:
        0 0 1.15em;
}


.rich-content a,
.to-rich-content a {
    color:
        #a9823e;

    text-decoration:
        underline;

    text-decoration-thickness:
        1px;

    text-underline-offset:
        3px;
}


.rich-content strong,
.to-rich-content strong {
    font-weight:
        700;
}


.rich-content ul,
.rich-content ol,
.to-rich-content ul,
.to-rich-content ol {
    margin:
        0 0 1.25em;

    padding-left:
        1.35em;
}


.rich-content li,
.to-rich-content li {
    margin-bottom:
        .4em;
}


.rich-content blockquote,
.to-rich-content blockquote {
    margin:
        1.8em 0;

    padding:
        18px 22px;

    border-left:
        3px solid #c6a15b;

    background:
        #faf9f7;

    color:
        #596579;

    font-size:
        17px;

    font-style:
        italic;
}


.rich-content img,
.to-rich-content img {
    display:
        block;

    width:
        auto;

    max-width:
        100%;

    height:
        auto;

    margin:
        1.5em auto;

    border-radius:
        12px;
}


.rich-content figure,
.to-rich-content figure {
    max-width:
        100%;

    margin:
        1.8em auto;
}


.rich-content figure img,
.to-rich-content figure img {
    margin:
        0 auto .65em;
}


.rich-content figcaption,
.to-rich-content figcaption {
    color:
        #8b95a5;

    font-size:
        13px;

    line-height:
        1.5;

    text-align:
        center;
}


/*
 * Toutes les vidéos restent dans la largeur de leur conteneur.
 * C'est essentiel pour les contenus produits depuis un téléphone.
 */
.rich-content video,
.rich-content iframe,
.to-rich-content video,
.to-rich-content iframe {
    display:
        block;

    width:
        100%;

    max-width:
        100%;

    height:
        auto;

    margin:
        1.6em auto;

    border:
        0;

    border-radius:
        12px;
}


.rich-content video {
    aspect-ratio:
        16 / 9;

    background:
        #111827;

    object-fit:
        contain;
}


.rich-content iframe,
.to-rich-content iframe {
    min-height:
        420px;
}


.rich-content table,
.to-rich-content table {
    width:
        100%;

    margin:
        1.7em 0;

    border-collapse:
        collapse;

    border:
        1px solid #e8e7e3;

    font-size:
        14px;
}


.rich-content table th,
.rich-content table td,
.to-rich-content table th,
.to-rich-content table td {
    padding:
        11px 13px;

    border:
        1px solid #e8e7e3;

    text-align:
        left;

    vertical-align:
        top;
}


.rich-content table th,
.to-rich-content table th {
    background:
        #faf9f7;

    color:
        #172033;

    font-weight:
        700;
}


.rich-content hr,
.to-rich-content hr {
    margin:
        2.2em 0;

    border:
        0;

    border-top:
        1px solid #e8e7e3;
}


.rich-content pre,
.to-rich-content pre {
    max-width:
        100%;

    overflow:
        auto;

    padding:
        16px;

    background:
        #111827;

    color:
        #edf1f7;

    border-radius:
        10px;

    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size:
        13px;

    line-height:
        1.6;
}


/*
 * Les très grandes images sont simplement contenues.
 * Aucune publication ne doit pouvoir casser le layout général.
 */
.rich-content,
.to-rich-content {
    overflow-wrap:
        anywhere;

    overflow-x:
        hidden;
}


/* ==========================================================================
   DARK MODE
   ========================================================================== */

[data-theme="dark"] .rich-content,
[data-theme="dark"] .to-rich-content {
    color:
        #a9b4c4;
}


[data-theme="dark"] .rich-content h2,
[data-theme="dark"] .rich-content h3,
[data-theme="dark"] .rich-content h4,
[data-theme="dark"] .to-rich-content h2,
[data-theme="dark"] .to-rich-content h3,
[data-theme="dark"] .to-rich-content h4 {
    color:
        #edf1f7;
}


[data-theme="dark"] .rich-content blockquote,
[data-theme="dark"] .to-rich-content blockquote {
    background:
        #192231;

    color:
        #a9b4c4;
}


[data-theme="dark"] .rich-content table,
[data-theme="dark"] .to-rich-content table {
    border-color:
        #263144;
}


[data-theme="dark"] .rich-content table th,
[data-theme="dark"] .rich-content table td,
[data-theme="dark"] .to-rich-content table th,
[data-theme="dark"] .to-rich-content table td {
    border-color:
        #263144;
}


[data-theme="dark"] .rich-content table th,
[data-theme="dark"] .to-rich-content table th {
    background:
        #192231;

    color:
        #edf1f7;
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 767px) {

    .rich-content,
    .to-rich-content {
        font-size:
            15px;

        line-height:
            1.78;
    }


    .rich-content h2,
    .to-rich-content h2 {
        font-size:
            24px;
    }


    .rich-content h3,
    .to-rich-content h3 {
        font-size:
            20px;
    }


    .rich-content h4,
    .to-rich-content h4 {
        font-size:
            17px;
    }


    .rich-content blockquote,
    .to-rich-content blockquote {
        padding:
            15px 17px;

        font-size:
            15px;
    }


    .rich-content iframe,
    .to-rich-content iframe {
        min-height:
            235px;
    }


    /*
     * Un tableau ne doit jamais forcer toute la page à dépasser.
     * Son propre conteneur pourra être rendu scrollable dans le template
     * public lorsque nécessaire.
     */
    .rich-content table,
    .to-rich-content table {
        font-size:
            13px;
    }

}