/* =========================================================
   CULTURESTOCK — INFORMATION PAGE
   Gutenberg + Elementor Header/Footer Template
   Lightweight / No JavaScript
   ========================================================= */


/* =========================================================
   HAPUS PARAGRAF KOSONG PERTAMA SETELAH HERO
   Gutenberg kadang menghasilkan <p>&nbsp;</p>
   ========================================================= */

.cs-information-page
.cs-dynamic-category-section + p:empty {
    display: none;
}


/* =========================================================
   MAIN CONTENT WIDTH
   Semua konten setelah Hero sejajar max 1080px
   ========================================================= */

.cs-information-page .cs-dynamic-category-section ~ p,
.cs-information-page .cs-dynamic-category-section ~ h2,
.cs-information-page .cs-dynamic-category-section ~ h3,
.cs-information-page .cs-dynamic-category-section ~ h4,
.cs-information-page .cs-dynamic-category-section ~ h5,
.cs-information-page .cs-dynamic-category-section ~ h6,
.cs-information-page .cs-dynamic-category-section ~ ul,
.cs-information-page .cs-dynamic-category-section ~ ol,
.cs-information-page .cs-dynamic-category-section ~ blockquote,
.cs-information-page .cs-dynamic-category-section ~ figure,
.cs-information-page .cs-dynamic-category-section ~ .wp-block-table,
.cs-information-page .cs-dynamic-category-section ~ .wp-block-image,
.cs-information-page .cs-dynamic-category-section ~ .wp-block-group,
.cs-information-page .cs-dynamic-category-section ~ .wp-block-columns {
    width: calc(100% - 40px);
    max-width: 1080px;

    margin-left: auto;
    margin-right: auto;

    box-sizing: border-box;
}


/* =========================================================
   SPACING SETELAH HERO
   ========================================================= */

.cs-information-page .cs-dynamic-category-section ~ p:first-of-type {
    margin-top: 32px;
}


/* =========================================================
   PARAGRAPH
   ========================================================= */

.cs-information-page .cs-dynamic-category-section ~ p {
    margin-top: 0;
    margin-bottom: 20px;

    font-size: 17px;
    line-height: 1.75;

    color: #444;
}


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

.cs-information-page .cs-dynamic-category-section ~ h2,
.cs-information-page .cs-dynamic-category-section ~ h3,
.cs-information-page .cs-dynamic-category-section ~ h4 {
    color: #222;
    line-height: 1.35;
}


.cs-information-page .cs-dynamic-category-section ~ h2 {
    margin-top: 42px;
    margin-bottom: 14px;

    font-size: 26px;
    font-weight: 700;
}


.cs-information-page .cs-dynamic-category-section ~ h3 {
    margin-top: 32px;
    margin-bottom: 12px;

    font-size: 21px;
    font-weight: 700;
}


.cs-information-page .cs-dynamic-category-section ~ h4 {
    margin-top: 26px;
    margin-bottom: 10px;

    font-size: 18px;
    font-weight: 700;
}


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

.cs-information-page .cs-dynamic-category-section ~ ul,
.cs-information-page .cs-dynamic-category-section ~ ol {
    margin-top: 20px;
    margin-bottom: 28px;

    padding-left: 28px;

    font-size: 17px;
    line-height: 1.75;

    color: #444;
}


.cs-information-page
.cs-dynamic-category-section ~ ul li,
.cs-information-page
.cs-dynamic-category-section ~ ol li {
    margin-bottom: 16px;
}


.cs-information-page
.cs-dynamic-category-section ~ ul li:last-child,
.cs-information-page
.cs-dynamic-category-section ~ ol li:last-child {
    margin-bottom: 0;
}


/* Paragraph di dalam list */

.cs-information-page
.cs-dynamic-category-section ~ ol li p,
.cs-information-page
.cs-dynamic-category-section ~ ul li p {
    margin-top: 6px;
    margin-bottom: 0;

    font-size: inherit;
    line-height: inherit;

    color: inherit;
}


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

.cs-information-page
.cs-dynamic-category-section ~ p a,
.cs-information-page
.cs-dynamic-category-section ~ ul a,
.cs-information-page
.cs-dynamic-category-section ~ ol a {
    color: #087866;

    text-decoration: underline;
    text-underline-offset: 3px;
}


/* Jangan ganggu breadcrumb Hero */

.cs-information-page .cs-dynamic-category-hero a {
    color: inherit;
    text-decoration: none;
}


/* =========================================================
   STRONG / BOLD
   ========================================================= */

.cs-information-page
.cs-dynamic-category-section ~ p strong,
.cs-information-page
.cs-dynamic-category-section ~ ul strong,
.cs-information-page
.cs-dynamic-category-section ~ ol strong {
    color: #222;
    font-weight: 700;
}


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

.cs-information-page
.cs-dynamic-category-section ~ blockquote {
    margin-top: 28px;
    margin-bottom: 28px;

    padding: 20px 24px;

    border-left: 4px solid #087866;

    background: #f7f8f8;

    font-size: 17px;
    line-height: 1.7;

    color: #444;
}


/* =========================================================
   TABLE
   ========================================================= */

.cs-information-page
.cs-dynamic-category-section ~ .wp-block-table {
    overflow-x: auto;

    margin-top: 28px;
    margin-bottom: 28px;
}


.cs-information-page
.cs-dynamic-category-section ~ .wp-block-table table {
    width: 100%;
    border-collapse: collapse;
}


.cs-information-page
.cs-dynamic-category-section ~ .wp-block-table th,
.cs-information-page
.cs-dynamic-category-section ~ .wp-block-table td {
    padding: 14px 16px;

    border: 1px solid #e5e5e5;

    text-align: left;
    vertical-align: top;
}


.cs-information-page
.cs-dynamic-category-section ~ .wp-block-table th {
    font-weight: 700;
    color: #222;
}


/* =========================================================
   IMAGE
   ========================================================= */

.cs-information-page
.cs-dynamic-category-section ~ .wp-block-image {
    margin-top: 28px;
    margin-bottom: 28px;
}


.cs-information-page
.cs-dynamic-category-section ~ .wp-block-image img {
    display: block;

    width: 100%;
    max-width: 100%;
    height: auto;

    border-radius: 14px;
}


/* =========================================================
   BOTTOM SPACING
   ========================================================= */

.cs-information-page
.cs-dynamic-category-section ~ ol:last-of-type,
.cs-information-page
.cs-dynamic-category-section ~ ul:last-of-type,
.cs-information-page
.cs-dynamic-category-section ~ p:last-of-type {
    margin-bottom: 72px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 992px) {

    .cs-information-page .cs-dynamic-category-section ~ p,
    .cs-information-page .cs-dynamic-category-section ~ h2,
    .cs-information-page .cs-dynamic-category-section ~ h3,
    .cs-information-page .cs-dynamic-category-section ~ h4,
    .cs-information-page .cs-dynamic-category-section ~ h5,
    .cs-information-page .cs-dynamic-category-section ~ h6,
    .cs-information-page .cs-dynamic-category-section ~ ul,
    .cs-information-page .cs-dynamic-category-section ~ ol,
    .cs-information-page .cs-dynamic-category-section ~ blockquote,
    .cs-information-page .cs-dynamic-category-section ~ figure,
    .cs-information-page .cs-dynamic-category-section ~ .wp-block-table,
    .cs-information-page .cs-dynamic-category-section ~ .wp-block-image,
    .cs-information-page .cs-dynamic-category-section ~ .wp-block-group,
    .cs-information-page .cs-dynamic-category-section ~ .wp-block-columns {
        width: calc(100% - 64px);
    }


    .cs-information-page .cs-dynamic-category-section ~ p,
    .cs-information-page .cs-dynamic-category-section ~ ul,
    .cs-information-page .cs-dynamic-category-section ~ ol {
        font-size: 16.5px;
    }

}


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

@media (max-width: 600px) {

    .cs-information-page .cs-dynamic-category-section ~ p,
    .cs-information-page .cs-dynamic-category-section ~ h2,
    .cs-information-page .cs-dynamic-category-section ~ h3,
    .cs-information-page .cs-dynamic-category-section ~ h4,
    .cs-information-page .cs-dynamic-category-section ~ h5,
    .cs-information-page .cs-dynamic-category-section ~ h6,
    .cs-information-page .cs-dynamic-category-section ~ ul,
    .cs-information-page .cs-dynamic-category-section ~ ol,
    .cs-information-page .cs-dynamic-category-section ~ blockquote,
    .cs-information-page .cs-dynamic-category-section ~ figure,
    .cs-information-page .cs-dynamic-category-section ~ .wp-block-table,
    .cs-information-page .cs-dynamic-category-section ~ .wp-block-image,
    .cs-information-page .cs-dynamic-category-section ~ .wp-block-group,
    .cs-information-page .cs-dynamic-category-section ~ .wp-block-columns {
        width: calc(100% - 40px);
    }


    .cs-information-page .cs-dynamic-category-section ~ p {
        font-size: 16px;
        line-height: 1.7;
    }


    .cs-information-page .cs-dynamic-category-section ~ ul,
    .cs-information-page .cs-dynamic-category-section ~ ol {
        padding-left: 24px;

        font-size: 16px;
        line-height: 1.7;
    }


    .cs-information-page .cs-dynamic-category-section ~ h2 {
        margin-top: 34px;

        font-size: 23px;
    }


    .cs-information-page .cs-dynamic-category-section ~ h3 {
        margin-top: 28px;

        font-size: 20px;
    }


    .cs-information-page .cs-dynamic-category-section ~ h4 {
        font-size: 18px;
    }


    .cs-information-page
    .cs-dynamic-category-section ~ ol:last-of-type,
    .cs-information-page
    .cs-dynamic-category-section ~ ul:last-of-type,
    .cs-information-page
    .cs-dynamic-category-section ~ p:last-of-type {
        margin-bottom: 56px;
    }

}