/* =========================================================
   GLOBAL
   ========================================================= */

html,
body {

    width: 100%;
    max-width: 100%;

    margin: 0;

    overflow-x: hidden;
}


.single-article,
.single-article *,
.single-article *::before,
.single-article *::after {

    box-sizing: border-box;
}


/* =========================================================
   ARTICLE
   ========================================================= */

.single-article {

    width: 100%;
    max-width: 1160px;
    min-width: 0;

    margin: 0 auto;

    padding: 0 20px 70px;

    color: #20252b;

    -webkit-font-smoothing: antialiased;

    text-rendering: optimizeLegibility;

    overflow-wrap: anywhere;
}


/* =========================================================
   HEADER
   ========================================================= */

.single-article-header {

    width: 100%;
    max-width: 850px;
    min-width: 0;

    margin: 0 auto;

    padding-top: 16px;
}


/* =========================================================
   BREADCRUMBS
   ========================================================= */

.ih-breadcrumbs {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 6px;

    margin: 0 0 12px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;

    line-height: 1.35;

    font-weight: 600;

    color: #46576d;
}


.ih-breadcrumbs a {

    color: #1557bd !important;

    -webkit-text-fill-color: #1557bd !important;

    text-decoration: none !important;

    font-weight: 700;
}


.ih-breadcrumbs-separator {

    color: #697789;
}


/* =========================================================
   CATEGORY
   ========================================================= */

.ih-category-badge {

    display: inline-flex;

    align-items: center;

    margin: 0 0 12px;

    padding: 6px 10px;

    background: #edf4ff;

    border-radius: 6px;

    color: #1557bd !important;

    -webkit-text-fill-color: #1557bd !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px;

    line-height: 1;

    font-weight: 800;

    text-decoration: none !important;
}


/* =========================================================
   TITLE
   ========================================================= */

.single-article-title {

    margin: 0 0 16px;

    color: #161b22;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 44px;

    line-height: 1.08;

    letter-spacing: -1px;

    font-weight: 800;

    overflow-wrap: anywhere;
}


/* =========================================================
   SUBTITLE
   ========================================================= */

.single-article-subtitle {

    margin: 0 0 20px;

    color: #414d5c;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 20px;

    line-height: 1.48;

    font-weight: 500;

    overflow-wrap: anywhere;
}


/* =========================================================
   META
   ========================================================= */

.ih-meta-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin: 0 0 22px;

    padding: 12px 0;

    border-top: 1px solid #d9dee5;

    border-bottom: 1px solid #d9dee5;
}


.ih-author {

    display: flex;

    align-items: center;

    min-width: 0;
}


.ih-author-avatar {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 44px;

    height: 44px;

    min-width: 44px;

    margin-right: 11px;

    border-radius: 50%;

    background: #eaf1fb;

    color: #1557bd;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 18px;

    font-weight: 800;
}


.ih-author-name {

    color: #151a21;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 15px;

    font-weight: 800;

    overflow-wrap: anywhere;
}


.ih-author-date {

    margin-top: 4px;

    color: #4d5968;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px;
}


.ih-meta-info {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    color: #4d5968;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px;

    white-space: nowrap;
}


/* =========================================================
   HERO
   ========================================================= */

.ih-hero {

    width: 100%;
    max-width: 1000px;
    min-width: 0;

    margin: 0 auto 29px;

    border-radius: 11px;

    background: #eef1f4;

    overflow: hidden;
}


.ih-hero img {

    display: block;

    width: 100%;
    max-width: 100%;

    height: auto;

    margin: 0;

    border-radius: 11px;
}


/* =========================================================
   ARTICLE BODY
   ========================================================= */

.ih-article-body {

    width: 100%;
    max-width: 760px;
    min-width: 0;

    margin: 0 auto;

    padding: 0 0 25px;

    color: #30343a;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 20px;

    line-height: 1.68;

    overflow-wrap: anywhere;

    word-break: normal;
}


.ih-article-body .entry-content {

    width: 100%;
    max-width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    overflow: visible;

    overflow-wrap: anywhere;
}


/* =========================================================
   ADSENSE
   ========================================================= */

/*
 * РЕКЛАМУ НЕ ЧІПАЄМО.
 *
 * Google сам вставляє .google-auto-placed
 * та ins.adsbygoogle.
 */

.entry-content
ins.adsbygoogle {

    display: block !important;

    max-width: 100% !important;

    min-width: 0 !important;

    margin-left: auto !important;

    margin-right: auto !important;

    box-sizing: border-box !important;

    clear: both !important;

    overflow: visible !important;
}


.entry-content
.google-auto-placed {

    max-width: 100% !important;

    min-width: 0 !important;

    margin-left: auto !important;

    margin-right: auto !important;

    box-sizing: border-box !important;

    clear: both !important;

    overflow: visible !important;
}


.entry-content
.adsbygoogle iframe {

    max-width: 100% !important;

    box-sizing: border-box !important;
}


/* =========================================================
   PARAGRAPHS
   ========================================================= */

.entry-content p {

    width: 100%;
    max-width: 100%;

    margin: 0 0 25px;

    padding: 0;

    color: #30343a;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 20px;

    line-height: 1.68;

    overflow-wrap: anywhere;

    word-break: normal;
}


.entry-content > p:first-child {

    color: #252a31;

    font-size: 21px;

    line-height: 1.62;
}


/* =========================================================
   SMART LIST
   ========================================================= */

.entry-content .ih-smart-list {

    display: block;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    margin: 24px 0;

    padding: 0;

    overflow: visible;

    clear: both;
}


/*
 * КОЖЕН ПУНКТ — ОКРЕМИЙ BLOCK.
 */

.entry-content .ih-list-item {

    position: relative;

    display: block;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    margin: 0 0 22px;

    padding: 0;

    color: #30343a;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 20px;

    line-height: 1.68;

    overflow: visible;

    overflow-wrap: anywhere;

    word-break: normal;

    clear: both;
}


/*
 * НОМЕР.
 *
 * Тепер номер знаходиться в окремій
 * абсолютній області.
 */

.entry-content .ih-list-number {

    padding-left: 43px;

    min-height: 1.68em;
}


.entry-content .ih-list-number::before {

    content:
        attr(data-number) ".";

    position: absolute;

    left: 0;

    top: 0;

    width: 34px;

    margin: 0;

    padding: 0;

    color: #1769e8;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 19px;

    line-height: 1.68;

    font-weight: 800;

    text-align: right;

    white-space: nowrap;

    pointer-events: none;

    z-index: 2;
}


/*
 * BULLET.
 */

.entry-content .ih-list-bullet {

    padding-left: 30px;

    min-height: 1.68em;
}


.entry-content .ih-list-bullet::before {

    content: "•";

    position: absolute;

    left: 3px;

    top: 0;

    width: 18px;

    margin: 0;

    padding: 0;

    color: #1769e8;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 22px;

    line-height: 1.55;

    font-weight: 700;

    text-align: center;

    pointer-events: none;

    z-index: 2;
}


/*
 * Останній пункт не отримує
 * зайвий нижній відступ.
 */

.entry-content
.ih-list-item:last-child {

    margin-bottom: 0;
}


/*
 * Форматування всередині пунктів.
 */

.entry-content
.ih-list-item strong,
.entry-content
.ih-list-item b {

    font-weight: 700;
}


.entry-content
.ih-list-item em {

    font-style: italic;
}


.entry-content
.ih-list-item a {

    overflow-wrap: anywhere;

    word-break: normal;
}


/*
 * Якщо всередині пункту випадково
 * залишився P — прибираємо подвійний
 * відступ.
 */

.entry-content
.ih-list-item p {

    width: auto;

    max-width: 100%;

    margin: 0;

    padding: 0;

    font-size: inherit;

    line-height: inherit;
}


/* =========================================================
   ADS BETWEEN LIST BLOCKS
   =========================================================

   Auto Ads можуть вставляти рекламу між
   окремими P.

   Ці правила не створюють рекламу,
   а тільки не дозволяють їй залізти
   на номер або bullet.
   ========================================================= */

.entry-content
.ih-list-item
+ .google-auto-placed {

    clear: both !important;

    position: relative !important;

    max-width: 100% !important;

    margin-top: 20px !important;

    margin-bottom: 20px !important;

    overflow: visible !important;

    z-index: 1 !important;
}


.entry-content
.google-auto-placed
+ .ih-list-item {

    clear: both !important;

    position: relative;

    margin-top: 22px;

    overflow: visible;
}


/* =========================================================
   TEXT
   ========================================================= */

.entry-content strong,
.entry-content b {

    color: #20242a;

    font-weight: 700;
}


/* =========================================================
   LINKS
   ========================================================= */

.entry-content a:not(.ih-registration-btn):not(.ih-bottom-btn):not(.ih-read-also-link) {

    color: #a62027 !important;

    -webkit-text-fill-color: #a62027 !important;

    text-decoration: underline !important;

    text-decoration-thickness: 1px !important;

    text-decoration-color: #a62027 !important;

    text-underline-offset: 3px !important;

    overflow-wrap: anywhere;
}


/* =========================================================
   HEADINGS
   ========================================================= */

.entry-content h2 {

    margin: 43px 0 21px;

    padding-left: 15px;

    border-left: 5px solid #1769e8;

    color: #171c23;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 30px;

    line-height: 1.2;

    font-weight: 800;

    overflow-wrap: anywhere;
}


.entry-content h3 {

    margin: 34px 0 17px;

    color: #1d232b;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 24px;

    line-height: 1.28;

    font-weight: 750;

    overflow-wrap: anywhere;
}


/* =========================================================
   IMAGES
   ========================================================= */

.entry-content img {

    display: block;

    max-width: 100% !important;

    height: auto;

    margin: 28px auto;

    border-radius: 7px;
}


.entry-content figure {

    max-width: 100%;

    margin: 30px 0;

    overflow: visible;
}


.entry-content figure img {

    width: 100%;

    max-width: 100% !important;

    margin: 0 auto;
}


.entry-content figcaption {

    margin-top: 8px;

    color: #566273;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px;

    line-height: 1.4;
}


/* =========================================================
   BLOCKQUOTE
   ========================================================= */

.entry-content blockquote {

    max-width: 100%;

    margin: 30px 0;

    padding: 17px 21px;

    background: #f4f7fa;

    border-left: 4px solid #1769e8;

    border-radius: 0 8px 8px 0;

    color: #303640;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 20px;

    line-height: 1.55;

    overflow-wrap: anywhere;
}


/* =========================================================
   FALLBACK LISTS
   ========================================================= */

.entry-content ul,
.entry-content ol {

    max-width: 100%;

    margin: 24px 0;

    padding-left: 28px;

    box-sizing: border-box;
}


.entry-content li {

    margin-bottom: 11px;

    overflow-wrap: anywhere;
}


/* =========================================================
   TABLES
   ========================================================= */

.entry-content table {

    display: block;

    width: 100%;

    max-width: 100%;

    margin: 28px 0;

    border-collapse: collapse;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 16px;

    overflow-x: auto;

    overflow-y: hidden;
}


.entry-content th,
.entry-content td {

    padding: 10px;

    border: 1px solid #d9dee5;

    text-align: left;
}


/* =========================================================
   READ ALSO
   ========================================================= */

.ih-read-also {

    position: relative;

    width: 100%;
    max-width: 100%;

    margin: 33px 0;

    padding: 15px 17px 16px 22px;

    background: #f5f8fc;

    border: 1px solid #d8e0e9;

    border-radius: 10px;

    overflow: hidden;

    clear: both;
}


.ih-read-also::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    bottom: 0;

    width: 5px;

    background: #1769e8;

    border-radius:
        10px 0 0 10px;
}


.ih-read-also-label {

    margin-bottom: 7px;

    color: #4e5b6b;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;

    line-height: 1.2;

    font-weight: 800;

    letter-spacing: .4px;
}


.ih-read-also-link {

    display: block;

    color: #1557bd !important;

    -webkit-text-fill-color: #1557bd !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 19px;

    line-height: 1.38;

    font-weight: 750;

    text-decoration: none !important;

    overflow-wrap: anywhere;
}


/* =========================================================
   REGISTRATION
   ========================================================= */

.ih-registration {

    width: 100%;
    max-width: 100%;

    margin: 33px 0;

    clear: both;
}


.ih-registration-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;
    max-width: 100%;

    min-height: 57px;

    padding: 14px 20px;

    background:
        linear-gradient(
            135deg,
            #1769e8,
            #1255bd
        );

    border-radius: 10px;

    color: #ffffff !important;

    -webkit-text-fill-color: #ffffff !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 18px;

    line-height: 1.2;

    font-weight: 800;

    text-align: center;

    text-decoration: none !important;
}


/* =========================================================
   BOTTOM BUTTONS
   ========================================================= */

.ih-bottom-buttons {

    display: flex;

    flex-direction: column;

    gap: 11px;

    width: 100%;
    max-width: 100%;

    margin: 30px 0 38px;

    clear: both;
}


.ih-bottom-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    min-height: 55px;

    padding: 13px 18px;

    background:
        linear-gradient(
            135deg,
            #1769e8,
            #1457bd
        );

    border-radius: 10px;

    color: #ffffff !important;

    -webkit-text-fill-color: #ffffff !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 17px;

    line-height: 1.25;

    font-weight: 750;

    text-align: center;

    text-decoration: none !important;
}


/* =========================================================
   RELATED
   ========================================================= */

.ih-related {

    width: 100%;
    max-width: 1000px;

    margin: 42px auto 0;

    padding-top: 24px;

    border-top: 1px solid #dfe3e8;

    clear: both;
}


.ih-related-title {

    position: relative;

    margin: 0 0 17px;

    padding-left: 13px;

    color: #171c23;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 23px;

    line-height: 1.2;

    font-weight: 800;
}


.ih-related-title::before {

    content: "";

    position: absolute;

    left: 0;

    top: 1px;

    bottom: 1px;

    width: 4px;

    background: #1769e8;

    border-radius: 3px;
}


.ih-related-slider {

    display: flex;

    gap: 13px;

    width: 100%;
    max-width: 100%;

    overflow-x: auto;

    overflow-y: hidden;

    padding: 2px 2px 12px;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: thin;
}


.ih-related-card {

    flex:
        0 0 210px;

    width: 210px;

    min-width: 210px;
}


.ih-related-link {

    display: block;

    color: inherit;

    text-decoration: none !important;
}


.ih-related-image {

    display: block;

    width: 210px;

    height: 132px;

    max-width: 100%;

    object-fit: cover;

    border-radius: 9px;

    background: #eef1f4;
}


.ih-related-name {

    margin-top: 8px;

    color: #1c2229;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;

    line-height: 1.35;

    font-weight: 700;

    display: -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

    overflow: hidden;
}


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

@media (max-width: 768px) {

    .single-article {

        width: 100%;
        max-width: 100%;

        padding:
            0 14px 55px;

        overflow-x: clip;
    }


    .single-article-header {

        width: 100%;
        max-width: 100%;

        padding-top: 12px;
    }


    .single-article-title {

        margin-bottom: 14px;

        font-size: 31px;

        line-height: 1.08;

        letter-spacing: -.45px;
    }


    .single-article-subtitle {

        margin-bottom: 17px;

        font-size: 18px;

        line-height: 1.45;
    }


    .ih-meta-row {

        align-items: flex-start;

        flex-direction: column;

        gap: 10px;

        margin-bottom: 17px;

        padding: 11px 0;
    }


    .ih-meta-info {

        justify-content: flex-start;

        width: 100%;

        white-space: normal;

        font-size: 12px;
    }


    .ih-hero {

        width: 100%;
        max-width: 100%;

        margin-bottom: 23px;

        border-radius: 8px;
    }


    .ih-hero img {

        width: 100%;
        max-width: 100%;

        border-radius: 8px;
    }


    .ih-article-body {

        width: 100%;
        max-width: 100%;

        font-size: 18px;

        line-height: 1.65;

        overflow-x: clip;
    }


    .entry-content {

        width: 100%;
        max-width: 100%;

        overflow: visible;
    }


    .entry-content p {

        margin-bottom: 23px;

        font-size: 18px;

        line-height: 1.65;
    }


    .entry-content > p:first-child {

        font-size: 19px;

        line-height: 1.6;
    }


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

    .entry-content
    ins.adsbygoogle,
    .entry-content
    .google-auto-placed,
    .entry-content
    .adsbygoogle {

        max-width: 100% !important;

        min-width: 0 !important;

        margin-left: auto !important;

        margin-right: auto !important;

        box-sizing: border-box !important;

        clear: both !important;

        overflow: visible !important;
    }


    .entry-content
    .adsbygoogle iframe {

        max-width: 100% !important;

        box-sizing: border-box !important;
    }


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

    .entry-content .ih-smart-list {

        width: 100%;
        max-width: 100%;

        margin:
            21px 0;

        padding: 0;

        overflow: visible;
    }


    .entry-content .ih-list-item {

        width: 100%;
        max-width: 100%;

        margin-bottom:
            21px;

        font-size:
            18px;

        line-height:
            1.65;

        overflow:
            visible;

        overflow-wrap:
            anywhere;
    }


    /*
     * НОМЕР НА МОБІЛЬНОМУ.
     */

    .entry-content .ih-list-number {

        padding-left:
            38px;

        min-height:
            1.65em;
    }


    .entry-content
    .ih-list-number::before {

        left:
            0;

        top:
            0;

        width:
            30px;

        font-size:
            17px;

        line-height:
            1.65;

        text-align:
            right;

        white-space:
            nowrap;
    }


    /*
     * BULLET НА МОБІЛЬНОМУ.
     */

    .entry-content .ih-list-bullet {

        padding-left:
            28px;

        min-height:
            1.65em;
    }


    .entry-content
    .ih-list-bullet::before {

        left:
            2px;

        top:
            0;

        width:
            17px;

        font-size:
            20px;

        line-height:
            1.55;

        text-align:
            center;
    }


    /*
     * Простір навколо реклами,
     * якщо Google поставив її
     * між пунктами.
     */

    .entry-content
    .ih-list-item
    + .google-auto-placed {

        margin-top:
            20px !important;

        margin-bottom:
            20px !important;
    }


    .entry-content
    .google-auto-placed
    + .ih-list-item {

        margin-top:
            21px !important;
    }


    /* =====================================================
       HEADINGS
       ===================================================== */

    .entry-content h2 {

        margin:
            34px 0 18px;

        padding-left:
            11px;

        border-left-width:
            4px;

        font-size:
            25px;

        line-height:
            1.22;
    }


    .entry-content h3 {

        margin-top:
            28px;

        font-size:
            21px;
    }


    /* =====================================================
       BLOCKQUOTE
       ===================================================== */

    .entry-content blockquote {

        margin:
            27px 0;

        padding:
            15px 17px;

        font-size:
            18px;
    }


    /* =====================================================
       TABLES
       ===================================================== */

    .entry-content table {

        display:
            block;

        width:
            100%;

        max-width:
            100%;

        overflow-x:
            auto;

        font-size:
            14px;
    }


    /* =====================================================
       READ ALSO
       ===================================================== */

    .ih-read-also {

        margin:
            27px 0;

        padding:
            14px 14px 15px 19px;
    }


    .ih-read-also-link {

        font-size:
            17px;
    }


    /* =====================================================
       REGISTRATION
       ===================================================== */

    .ih-registration {

        margin:
            27px 0;
    }


    .ih-registration-btn {

        min-height:
            55px;

        font-size:
            17px;
    }


    /* =====================================================
       BOTTOM BUTTONS
       ===================================================== */

    .ih-bottom-buttons {

        margin:
            26px 0 32px;
    }


    .ih-bottom-btn {

        min-height:
            54px;

        font-size:
            16px;
    }


    /* =====================================================
       RELATED
       ===================================================== */

    .ih-related {

        margin-top:
            35px;
    }


    .ih-related-title {

        font-size:
            21px;
    }


    .ih-related-card {

        flex-basis:
            180px;

        width:
            180px;

        min-width:
            180px;
    }


    .ih-related-image {

        width:
            180px;

        height:
            115px;
    }


    .ih-related-name {

        font-size:
            13px;
    }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

    .single-article {

        padding-left:
            11px;

        padding-right:
            11px;
    }


    .single-article-title {

        font-size:
            28px;

        letter-spacing:
            -.3px;
    }


    .single-article-subtitle {

        font-size:
            17px;
    }


    .entry-content p {

        font-size:
            17.5px;

        line-height:
            1.64;
    }


    .entry-content > p:first-child {

        font-size:
            18px;
    }


    .entry-content .ih-list-item {

        font-size:
            17.5px;

        line-height:
            1.64;
    }


    .entry-content .ih-list-number {

        padding-left:
            36px;
    }


    .entry-content
    .ih-list-number::before {

        width:
            28px;

        font-size:
            16px;
    }


    .entry-content .ih-list-bullet {

        padding-left:
            27px;
    }


    .entry-content
    .ih-list-bullet::before {

        width:
            16px;

        font-size:
            19px;
    }


    .entry-content h2 {

        font-size:
            23px;
    }

}