/**
 * Article page styles
 */
.article {
    @apply --entry-column-width;
    margin-bottom: var(--islandMargin);
    padding: 30px 45px;

    @media (--mobile) {
        padding: 20px;
    }
}

.article__information {
    display: flex;
    color: var(--color-gray);
    font-size: 14px;
    margin-bottom: 20px;

    &-section {
        display: flex;
        align-content: baseline;
    }

    .island-settings {
        margin-left: auto;
    }
}

.article__author {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 360px;
    margin-right: 20px;

    & img {
        vertical-align: bottom;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        margin-right: 5px;
    }
}

.article__comments-counter {

    vertical-align: middle;
    margin-left: 15px;

    & svg {
        display: inline-block;
        margin-top: 1px;
        margin-right: 0.2em;
        height: 15px;
    }
}

@media all and (max-width: 500px) {
    .article__comments-counter {
        display: none;
    }
}

.article__title {
    margin: 0;
    font-size: 30px;
    font-family: var(--serif-font);
    font-weight: 800;
    line-height: 1.2em;
}

.article__content {
    font-size: 17.4px;
    line-height: 1.62em;
    word-wrap: break-word;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #000000db;
}

.article__content--typed {
    font-family: 'Lora';
    font-size: 19.2px;
    line-height: 1.64em;
    color: rgba(0, 0, 0, 0.8);
}

.article__content a {
    padding-bottom: 1px;
    color: var(--linkColor);
    border-bottom: 1px solid color-mod(var(--linkColor) lightness(+35%));
}

.article__content a:hover {
    color: var(--color-hover);
    border-bottom: 1px solid color-mod(var(--color-hover) lightness(+35%));
}

.article .sharing {
    margin-top: 20px;
}

/**
 * Article parent
 */

.article__parent {
    margin-top: 25px;
    padding-bottom: 20px;
    font-size: 15px;
    line-height: 1.45em;
    color: var(--color-gray);
}

.article__parent a {
    position: relative;
    display: block;
    padding-left: 1.6em;
}

.article__parent svg {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-46%);
}

/**
 * Children pages list
 */
.children-pages {
    margin: 30px 0;
}

.children-pages__item {
    position: relative;
    padding-right: 20px;
}

.children-pages__item:not(:last-of-type) {
    border-bottom: 1px solid var(--lightGrayLine);
}

.children-pages__item::after {
    content: '';
    background: url('/public/app/svg/arrow-right.svg') no-repeat;
    background-size: 9px 15px;
    position: absolute;
    right: 0;
    top: 50%;
    width: 9px;
    height: 15px;
    margin-top: -7px;
}

.children-pages__link {
    display: block;
    padding: 15px 0;
    font-size: 16px;
    line-height: 1.4em;
    font-weight: 600;
}

/**
 * Marker
 * =========================
 */
.cdx-marker {
    background: rgba(245, 235, 111, 0.29);
    padding: 3px 0;
}

/**
 * Inline Code
 * =========================
 */
.inline-code {
    background: rgba(251, 241, 241, 0.78);
    color: #C44545;
    padding: 4px 6px;
    border-radius: 2px;
    margin: 0 2px;
    font-family: Menlo, Monaco, Consolas, Courier New, monospace;
    font-size: 0.9em;
}

/**
 * Delimiter
 * =========================
 */
.article-delimiter {
    line-height: 1.6em;
    width: 100%;
    text-align: center;

    &::before {
        display: inline-block;
        content: "***";
        font-size: 30px;
        line-height: 65px;
        height: 30px;
        letter-spacing: 0.2em;
    }
}

/**
 * List
 * =========================
 */
.article-list {
    margin: 1.2em auto;

    @media (--mobile) {
        box-sizing: border-box;
    }

    @media (--mobile) and (max-width: 690px) {
        margin-left: 20px;
    }

    li {
        margin: 0.5em 0;
        padding-left: 0.5em;
    }
}

/**
 * Table block
 */
.article-table {
    @apply --entry-column-width;

    margin: 20px auto;
    table-layout: fixed;
    width: 100%;
    border-radius: 3px;
    border-collapse: collapse;
    border: 1px solid var(--lightGrayLine);

    & td {
        padding: 8px 10px;
        border: 1px solid var(--lightGrayLine);
    }
}

/**
 * Code
 * =========================
 */
.article-code {
    @apply --entry-column-width;

    margin: 40px auto;
    border: 1px solid #e4e4e4;
    padding: 15px 18px;
    border-radius: 5px;

    @media (--mobile) and (--less-then-entry-column) {
        box-sizing: border-box;
        margin: 30px 20px;
    }

    &__content {
        display: block;
        white-space: pre;
        word-wrap: normal;
        overflow-x: auto;
        font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
        line-height: 1.7em;
        font-size: 13.6px;
        padding: 0 !important;

        @media (--mobile) {
            font-size: 10.2px;
            line-height: 1.6em;
        }
    }
}

/**
 * Embed
 * ==================
 */
.article-embed {
    @apply --entry-column-width;

    margin: 20px auto;

    &-caption {
        text-align: center;
        margin: 1em auto;
        color: var(--color-gray);
    }
}

/**
 * Quote
 * =========================
 */
.article-quote {
    margin: 40px auto;
    padding: 30px 0;
    border-top: 2px solid #e4e4e4;
    border-bottom: 2px solid #e4e4e4;
    font-family: Georgia;
    letter-spacing: 0.12px;
    font-style: italic;
    font-size: 20.4px;
    line-height: 1.6em;

    &--center {
        text-align: center;
    }

    @media (--mobile) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    @media (--mobile) and (--less-then-entry-column) {
        margin: 30px 20px;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    p {
        padding-left: 0 !important;
        padding-right: 0 !important;

        &:first-of-type {
            margin-top: 0;
        }

        &:last-of-type {
            margin-bottom: 0;
        }
    }
}

/**
 * Article image block
 */
.article-image {
    @apply --entry-column-width;

    margin: 40px auto;
    text-align: center;

    @media (--mobile) {
        margin: 30px auto;
        padding-left: 0;
        padding-right: 0;
    }

    img {
        vertical-align: bottom;
        max-width: 100%;
    }

    &--stretched {
        max-width: none !important;
        width: 100% !important;

        img {
            width: 100%;
        }
    }

    &--bordered {
        img {
            border: 3px solid #fff;
            box-shadow: 0 0 0 2px #e7e9f5;
            box-sizing: border-box;
        }
    }

    &--backgrounded {
        padding: 15px;
        background: var(--color-gray);

        img {
            max-width: 60%;
            margin: 0 auto;
        }
    }

    &-caption {
        margin: 1em auto;
        color: #6c7580;
    }
}

/**
 * Article link block
 */
.embed-link {
    display: block;
    max-width: var(--article-max-width);
    margin: 40px auto;
    padding: 25px;
    border: 1px solid #e7e9f5 !important;
    box-shadow: 0 1px 1px #4246540a;
    border-radius: 2px;
    color: inherit !important;
    text-decoration: none !important;

    @media (--mobile) {
        box-sizing: border-box;
        padding: 20px;
        margin: 30px auto;
    }

    @media (--mobile) and (max-width: 690px) {
        margin: 30px 10px;
    }

    &__image {
        float: right;
        max-width: 70px;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
        margin: 0 0 30px 30px;
        border-radius: 3px;

        @media (--mobile) {
            margin: 0 0 15px 15px;
        }
    }

    &__title {
        font-size: 16px;
        line-height: 1.45em;
        font-weight: 600;

        @media (--mobile) {
            font-size: 12.2px;
        }
    }

    &__domain {
        display: inline-block;
        font-variant: small-caps;
        margin-top: 20px;
        border: 0 !important;
        color: #6c7580;
        font-size: 0.85em;

        @media (--mobile) {
            margin-top: 5px;
            font-size: 12px;
        }
    }

    &__description {
        margin-top: 10px;
        font-size: 0.9em;

        @media (--mobile) {
            margin-top: 5px;
            font-size: 12px;
        }
    }
}

/**
 * Raw block
 */
.article__raw {
    margin: 1em 0;
}

.article h2,
.article h3,
.article h4 {
    line-height: 1.35em;
}

/**
 * Personality tool
 * ==========
 */
.article__person {
    & {
        background: #fff;
        border: 1px solid #e5e6ec;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
        border-radius: 3px;
        padding: 30px;
        margin: 0.7em 0;
        line-height: 1.4em;
    }

    &-name {
        font-size: 16px;
        font-weight: 600;
    }

    &-cite {
        font-size: 14px;
        margin: 10px 0 0;

        p {
            margin: 0 !important;
        }
    }

    &-url {
        display: block;
        margin-top: 15px;
        border-bottom: 0 !important;
        font-size: 11px;
        color: var(--color-gray) !important;
        letter-spacing: 0.1px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 80%;
        line-height: 1em;

        &:empty {
            display: none;
        }
    }

    &-url:hover {
        color: var(--color-hover) !important;
    }

    &-photo {
        float: right;
        width: 70px;
        height: 70px;
        border-radius: 3px;
        background-color: #f6f6f9;
        background-image: url('/public/app/svg/photo-placeholder.svg');
        background-repeat: no-repeat;
        background-position: center center;
        overflow: hidden;
        margin-left: 30px;
        border-radius: 50%;
    }
}


/**
 * Table
 * =========
 */
.article__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85em;
}

.article__table td {
    border: 1px solid var(--lightGrayLine);
    padding: 10px 15px;
}

/**
 * Termin word
 */

.article__termin {
    display: inline-block;
    padding: 4px 6px;
    background: #f9f2f2;
    color: #cc5c74;
    line-height: 1em;
    border-radius: 3px;
}

@media (--mobile) {
    .article__title {
        font-size: 28px;
    }

    .article__content {
        font-size: 15px;
    }

    .article__person {
        padding: 15px;
    }

    .article__person-photo {
        width: 40px;
        height: 40px;
    }
}

/**
 * Layout rules
 */
:root {
    --entry-column-width: {
        max-width: var(--article-max-width);

        @media (--mobile) {
            padding-left: 20px;
            padding-right: 20px;
        }
    };
}

/**
 * Wide Article layout
 */
.article {
    &--wide {
        padding: 23px 30px;

        @media (--mobile) {
            padding: 15px;
        }
    }

    .body--with-branding &--wide {
        position: relative;

        @media (--not-mobile) {
            margin-top: var(--branding-negative-margin);
        }
    }

    &--wide &__title {
        text-align: center;
        margin: auto;
        max-width: 700px;
        font-family: var(--serif-font);

        @media (--mobile) {
            @apply --entry-column-width;
            text-align: left;
            font-size: 22px;
            margin-left: 0;
        }

        &-wrapper {
            min-height: 300px;
            display: flex;

            @media (--mobile) {
                min-height: auto;
                margin: 30px 0 20px;
            }
        }
    }

    &--wide &__author {
        position: relative;
        display: block;
        overflow: visible;

        img {
            width: 40px;
            height: 40px;
            position: absolute;
            left: -55px;
            top: -3px;
            margin: 0;
        }

        &-name {
            font-weight: bold;
        }
    }

    &--wide &__time {
        font-size: 13px;
        display: inline-block;
        margin-top: 2px;
    }

    &--wide .island-settings {
        margin: auto 0 auto 30px;
    }

    &--wide .article__information {
        @media (--mobile) {
            @apply --entry-column-width;
            margin: 0 auto;
        }

        .site-head {
            @media (--mobile) {
                display: none;
            }
        }

        &-section {
            margin: auto 0 auto auto;

            @media (--mobile) {
                margin-left: 55px;
            }
        }

        .island-settings {
            margin-top: auto;
            margin-bottom: auto;

            @media (--not-mobile) {
                margin-left: 20px;
            }
        }
    }

    &--wide .article__parent {
        border-bottom: 0;
        margin-top: 50px;
    }

    &--wide &__content {
        &--serif {
            font-size: 19.3px;
            line-height: 1.6em;
            letter-spacing: 0.1px;
            font-family: Georgia;
        }

        a {
            color: inherit;
            text-decoration: none;
            border-bottom: 1px solid #333;
        }

        i {
            font-family: Georgia;
            font-style: italic;
            letter-spacing: 0.1px;
            font-size: 1.05em;
        }

        p,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        ul,
        ol,
        blockquote,
        .article__image,
        .article__person,
        .article__table,
        .file-attached,
        .link-embed {
            @apply --entry-column-width;
            margin-left: auto;
            margin-right: auto;
            box-sizing: border-box;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            margin: 1.6em auto 0.5em;
            font-family: var(--serif-font);
            letter-spacing: -0.02em;
            line-height: 1.3em;
            padding-top: 0;
            padding-bottom: 0;

            & + p {
                margin-top: 0;
            }
        }

        h2 {
            font-size: 1.6em;

            @media (--mobile) {
                font-size: 1.2em;
            }

        }

        h3,
        h4,
        h5,
        h6 {
            margin-top: 0.8em;
        }

        p {
            margin: 1.2em auto;
        }

        ol,
        ul {
            li {
                list-style: outside;
                margin-left: 20px;
                padding-left: 5px;
            }
        }
    }

    &--wide .sharing {
        @apply --entry-column-width;
        margin: 50px auto 30px !important;

        @media (--mobile) {
            margin: 20px 0 5px !important;
        }
    }

    &--wide .children-pages {
        @apply --entry-column-width;
        margin: 20px auto;
    }
}
