/*
====================================================================
NGAZI TECHNOLOGIES
PAGE : DÉTAIL D'UNE OFFRE D'EMPLOI
FICHIER : job-details.css
====================================================================

OBJECTIF
--------------------------------------------------------------------
Cette feuille de style gère l'affichage public du contenu riche
créé avec l'éditeur WYSIWYG Quill 2.

Les contenus concernés sont notamment :

    - Description du poste
    - Responsabilités
    - Exigences
    - Atouts

Le HTML a déjà été nettoyé côté serveur avant son stockage.

IMPORTANT - QUILL 2
--------------------------------------------------------------------
Quill 2 peut représenter aussi bien une liste à puces qu'une liste
numérotée avec une balise <ol>.

Exemple d'une liste à puces :

    <ol>
        <li data-list="bullet">Élément A</li>
        <li data-list="bullet">Élément B</li>
    </ol>

Exemple d'une liste numérotée :

    <ol>
        <li data-list="ordered">Élément A</li>
        <li data-list="ordered">Élément B</li>
    </ol>

Nous ne devons donc PAS nous fier uniquement à <ol> ou <ul>.

L'attribut "data-list" détermine le véritable type de liste.
====================================================================
*/


/*
====================================================================
1. CONTENU RICHE
====================================================================
*/

.job-rich-content {
    line-height: 1.7;
}


    /*
====================================================================
2. PARAGRAPHES
====================================================================
*/

    .job-rich-content p {
        margin-top: 0;
        margin-bottom: 1rem;
    }


    /*
====================================================================
3. TITRES DU CONTENU RICHE
====================================================================
*/

    .job-rich-content h2,
    .job-rich-content h3,
    .job-rich-content h4 {
        margin-top: 1.5rem;
        margin-bottom: 0.75rem;
        font-weight: 700;
    }


    /*
====================================================================
4. LISTES QUILL
====================================================================

Nous désactivons les marqueurs HTML natifs.

Pourquoi ?

Parce qu'un <ol> Quill peut représenter une liste à puces.

Sans cette règle, le navigateur applique automatiquement :

    1.
    2.
    3.

même lorsque Quill indique :

    data-list="bullet"
====================================================================
*/

    .job-rich-content ol,
    .job-rich-content ul {
        margin-top: 0.75rem;
        margin-bottom: 1rem;
        padding-left: 0;
    }


    /*
====================================================================
5. ÉLÉMENTS DE LISTE QUILL
====================================================================

Le marqueur natif du navigateur est supprimé.

Nous allons créer nous-mêmes le marqueur avec ::before.
====================================================================
*/

    .job-rich-content li[data-list] {
        list-style-type: none !important;
        position: relative;
        /*
     * L'espace à gauche permet d'afficher notre marqueur
     * sans qu'il chevauche le texte.
     */
        padding-left: 1.75rem;
        margin-bottom: 0.4rem;
    }


    /*
====================================================================
6. LISTE À PUCES QUILL
====================================================================

Lorsque Quill génère :

    data-list="bullet"

nous affichons :

    •
====================================================================
*/

    .job-rich-content li[data-list="bullet"]::before {
        content: "\2022";
        position: absolute;
        left: 0;
        width: 1.25rem;
        text-align: center;
        font-weight: 700;
    }


    /*
====================================================================
7. LISTE NUMÉROTÉE QUILL
====================================================================

Pour une vraie liste ordonnée, Quill utilise :

    data-list="ordered"

Nous devons produire une numérotation.

Le compteur est réinitialisé au début de chaque <ol>.
====================================================================
*/

    .job-rich-content ol {
        counter-reset: ngazi-list-counter;
    }


    /*
 * Chaque élément Quill de type "ordered"
 * incrémente le compteur.
 */
    .job-rich-content li[data-list="ordered"] {
        counter-increment: ngazi-list-counter;
    }


        /*
 * Affichage du numéro :
 *
 * 1.
 * 2.
 * 3.
 */
        .job-rich-content li[data-list="ordered"]::before {
            content: counter(ngazi-list-counter) ".";
            position: absolute;
            left: 0;
            width: 1.4rem;
            text-align: right;
            padding-right: 0.35rem;
        }


    /*
====================================================================
8. LISTES HTML UL CLASSIQUES
====================================================================

Cette partie concerne uniquement les listes qui ne proviennent pas
du format spécifique de Quill.

Exemple :

    <ul>
        <li>Élément</li>
    </ul>
====================================================================
*/

    .job-rich-content ul > li:not([data-list]) {
        list-style-type: disc;
        margin-left: 1.75rem;
        margin-bottom: 0.4rem;
    }


    /*
====================================================================
9. LISTES HTML OL CLASSIQUES
====================================================================

Une liste HTML traditionnelle sans data-list reste numérotée.

Exemple :

    <ol>
        <li>Premier</li>
        <li>Deuxième</li>
    </ol>
====================================================================
*/

    .job-rich-content ol > li:not([data-list]) {
        list-style-type: decimal;
        margin-left: 1.75rem;
        margin-bottom: 0.4rem;
    }


    /*
====================================================================
10. TEXTE EN GRAS
====================================================================

Correspond au bouton Gras de l'éditeur Quill.
====================================================================
*/

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


    /*
====================================================================
11. ITALIQUE
====================================================================

Correspond au bouton Italique de l'éditeur Quill.
====================================================================
*/

    .job-rich-content em,
    .job-rich-content i {
        font-style: italic;
    }


    /*
====================================================================
12. LIENS
====================================================================

Les liens ont déjà été nettoyés côté serveur par
HtmlSanitizerService.

Ici nous gérons uniquement leur présentation.
====================================================================
*/

    .job-rich-content a {
        text-decoration: underline;
    }


    /*
====================================================================
13. DERNIER ÉLÉMENT
====================================================================

Évite un espace inutile en bas du contenu riche.
====================================================================
*/

    .job-rich-content > :last-child {
        margin-bottom: 0;
    }