/* 
    By Maxim "necromax" Alekseenko Sergeevich

    This file contains styles for articles on my website.

    Article should be contained within a div with class `article`.

    Article may start with an h1 title with class `article-title`.

    If article-toc script is present, table of contents may be generated within an article inside a div with class `article-generate_toc`.

    Article is composed out of series of groups with class `article-group` or `article-group-colored`.
    `article-group-colored` will have a background color.

    Each group may contain a head with class `h1`, `article-group-head` and body with class `article-group-body`.

    Group's head acts as a group with a single block (see bellow).

    Group's body consist of blocks with class `article-block`.

    Blocks contain paragraphs, images and text headers.

    Block's may have additional classes to modify their behavior:
    
    - `article-block-grow2`
    
    - `article-block-grow05`

    Example:
    ```
    <>div class="article">
        <h1 class="article-title">Article title</h1>

        <div class="article-generate_toc">
            <!-- Table of contents will be generated here -->
        </div>

        <div class="article-group article-group-colored">
            <h1>Block Header</h1>
            <div class="article-group-head">
                <p>Description of this group goes here</p>
            </div>
            <div class="article-group-body">
                <div class="article-block">
                    <h2>Group block title</h2>
                    <p>Group block text</p>
                </div>
                <div class="article-block">
                    <h2>Group block title</h2>
                    <p>Group block text</p>
                </div>
            </div>
        </div>
    ```
*/

:root {
    --article-color-title: var(--color-white);
    --article-color-text: var(--color-light);
    --article-color-group: var(--color-dark2);
    --article-color-background: var(--color-dark);
    --article-color-header1: var(--color-white);
    --article-color-header2: var(--color-light2);
    --article-color-header3: var(--color-gray);
}

a,
a:visited {
    color: var(--article-color-header2);
}

.article {

    /* +++ TEXTS +++ */

    & p {
        color: var(--article-color-text);
        font: normal 1em "Roboto Serif", serif;
    }

    & h1,
    & h2,
    & h3 {
        font-family: 'Roboto slab', slab;
        margin-bottom: 8px;
    }

    & h1 {
        text-align: center;
        color: var(--article-color-header1);
        border-bottom: 2px solid var(--article-color-header1);
    }

    & h2 {
        text-align: left;
        color: var(--article-color-header2);
        border-bottom: 2px solid var(--article-color-header2);
    }

    & h3 {
        text-align: right;
        color: var(--article-color-header3);
        border-bottom: 2px solid var(--article-color-header3);
    }

    /* +++ TITLE +++ */
    & .article-title {
        font: bold 1.5em 'Roboto slab', slab;
        border: none;
        color: var(--article-color-title);
        text-align: center;
        text-transform: uppercase;

        background-color: var(--article-color-group);

        border: 2px solid var(--article-color-title);
        border-width: 2px 0;

        margin: 1em 0;
        padding: 0.2em;
    }

    /* +++ GROUPS +++ */
    & .article-group,
    & .article-group-colored {
        margin-bottom: 0.5em;

        &>.article-group-body:not(:last-child),
        &>.article-group-head:not(:last-child) {
            margin-bottom: 0.5em;
        }

        &>:last-child {
            border-bottom-left-radius: 1em;
            border-bottom-right-radius: 1em;
        }
    }

    /* +++ BODY AND HEAD +++*/
    & .article-group-colored .article-group-body,
    & .article-group-colored .article-group-head {
        background-color: var(--article-color-group);
    }

    & .article-group-body,
    & .article-group-head {
        padding: 1em;

        & p,
        & h1,
        & h2,
        & h3,
        & h4,
        & ol,
        & ul {
            margin-bottom: 0.5em;
        }
    }

    & .article-group-head {
        &>:first-child {
            margin-top: 0;
        }
    }

    & .article-group-body {
        padding-top: 0.5em;

        @media only screen and (min-width: 750px) {
            display: flex;
            gap: 1em;
        }
    }

    /* +++ BLOCKS +++ */
    & .article-block,
    & .article-block-text,
    & .article-block-image,
    & .article-block-grow2,
    & .article-block-grow05,
    & .article-block-toc {
        flex: 1 1 0;

        &>img,
        &>.article-img {
            width: 100%;
            margin: 0;
            margin-top: 0.5em;
        }


        margin-top: 0.5em;

        &>:first-child {
            margin-top: 0;
        }
    }

    & .article-block-image {
        display: flex;
        flex-direction: column;
        /* justify-content: center; */
    }

    & .article-block-grow2 {
        flex-grow: 2;
    }

    & .article-block-grow05 {
        flex-grow: 0.5;
    }

    & .article-block-toc {
        padding-inline-start: 2.5em;
        margin: 0;

        @media only screen and (min-width: 750px) {
            column-count: 2;
            column-gap: 2.5em;
        }


        &>li {
            color: var(--article-color-background);
            background-image: linear-gradient(to right, var(--article-color-background) 50%, transparent 50%);
            background-position: center bottom;
            background-repeat: repeat-x;
            background-size: 15px 2px;
        }

        & a {
            text-decoration: none;
        }

        & .toc_h1,
        & .toc_h1:visited {
            color: var(--article-color-header1);
        }

        & .toc_h2,
        & .toc_h2:visited {
            color: var(--article-color-header2);
            padding-left: 0.5em;
        }

        & .toc_h3,
        & .toc_h3:visited {
            color: var(--article-color-header3);
            padding-left: 1em;
        }
    }
}