/*
Theme Name: General Block WP Theme
Description: Used to style blocks.
*/

/* Desktop Margin And Padding Values */
@media screen and (width >= 800px) {

    /* Margin Top */
    .custom-block:where(.d-mt-10) { --mt: 10px !important; }
    .custom-block:where(.d-mt-20) { --mt: 20px !important; }
    .custom-block:where(.d-mt-30) { --mt: 30px !important; }
    .custom-block:where(.d-mt-40) { --mt: 40px !important; }
    .custom-block:where(.d-mt-50) { --mt: 50px !important; }
    .custom-block:where(.d-mt-60) { --mt: 60px !important; }
    .custom-block:where(.d-mt-70) { --mt: 70px !important; }
    .custom-block:where(.d-mt-80) { --mt: 80px !important; }
    .custom-block:where(.d-mt-90) { --mt: 90px !important; }
    .custom-block:where(.d-mt-100) { --mt: 100px !important; }
    .custom-block:where(.d-mt-110) { --mt: 110px !important; }
    .custom-block:where(.d-mt-120) { --mt: 120px !important; }
    .custom-block:where(.d-mt-120) { --mt: 130px !important; }
    .custom-block:where(.d-mt-140) { --mt: 140px !important; }
    .custom-block:where(.d-mt-150) { --mt: 150px !important; }
    .custom-block:where(.d-mt-160) { --mt: 160px !important; }
    .custom-block:where(.d-mt-170) { --mt: 170px !important; }
    .custom-block:where(.d-mt-180) { --mt: 180px !important; }
    .custom-block:where(.d-mt-190) { --mt: 190px !important; }
    .custom-block:where(.d-mt-200) { --mt: 200px !important; }

    /* Margin Bottom */
    .custom-block:where(.d-mb-10) { --mb: 10px !important; }
    .custom-block:where(.d-mb-20) { --mb: 20px !important; }
    .custom-block:where(.d-mb-30) { --mb: 30px !important; }
    .custom-block:where(.d-mb-40) { --mb: 40px !important; }
    .custom-block:where(.d-mb-50) { --mb: 50px !important; }
    .custom-block:where(.d-mb-60) { --mb: 60px !important; }
    .custom-block:where(.d-mb-70) { --mb: 70px !important; }
    .custom-block:where(.d-mb-80) { --mb: 80px !important; }
    .custom-block:where(.d-mb-90) { --mb: 90px !important; }
    .custom-block:where(.d-mb-100) { --mb: 100px !important; }
    .custom-block:where(.d-mb-110) { --mb: 110px !important; }
    .custom-block:where(.d-mb-120) { --mb: 120px !important; }
    .custom-block:where(.d-mb-120) { --mb: 130px !important; }
    .custom-block:where(.d-mb-140) { --mb: 140px !important; }
    .custom-block:where(.d-mb-150) { --mb: 150px !important; }
    .custom-block:where(.d-mb-160) { --mb: 160px !important; }
    .custom-block:where(.d-mb-170) { --mb: 170px !important; }
    .custom-block:where(.d-mb-180) { --mb: 180px !important; }
    .custom-block:where(.d-mb-190) { --mb: 190px !important; }
    .custom-block:where(.d-mb-200) { --mb: 200px !important; }

    /* Padding Top */
    .custom-block:where(.d-pt-10) { --pt: 10px !important; }
    .custom-block:where(.d-pt-20) { --pt: 20px !important; }
    .custom-block:where(.d-pt-30) { --pt: 30px !important; }
    .custom-block:where(.d-pt-40) { --pt: 40px !important; }
    .custom-block:where(.d-pt-50) { --pt: 50px !important; }
    .custom-block:where(.d-pt-60) { --pt: 60px !important; }
    .custom-block:where(.d-pt-70) { --pt: 70px !important; }
    .custom-block:where(.d-pt-80) { --pt: 80px !important; }
    .custom-block:where(.d-pt-90) { --pt: 90px !important; }
    .custom-block:where(.d-pt-100) { --pt: 100px !important; }
    .custom-block:where(.d-pt-110) { --pt: 110px !important; }
    .custom-block:where(.d-pt-120) { --pt: 120px !important; }
    .custom-block:where(.d-pt-120) { --pt: 130px !important; }
    .custom-block:where(.d-pt-140) { --pt: 140px !important; }
    .custom-block:where(.d-pt-150) { --pt: 150px !important; }
    .custom-block:where(.d-pt-160) { --pt: 160px !important; }
    .custom-block:where(.d-pt-170) { --pt: 170px !important; }
    .custom-block:where(.d-pt-180) { --pt: 180px !important; }
    .custom-block:where(.d-pt-190) { --pt: 190px !important; }
    .custom-block:where(.d-pt-200) { --pt: 200px !important; }

    /* Padding Bottom */
    .custom-block:where(.d-pb-10) { --pb: 10px !important; }
    .custom-block:where(.d-pb-20) { --pb: 20px !important; }
    .custom-block:where(.d-pb-30) { --pb: 30px !important; }
    .custom-block:where(.d-pb-40) { --pb: 40px !important; }
    .custom-block:where(.d-pb-50) { --pb: 50px !important; }
    .custom-block:where(.d-pb-60) { --pb: 60px !important; }
    .custom-block:where(.d-pb-70) { --pb: 70px !important; }
    .custom-block:where(.d-pb-80) { --pb: 80px !important; }
    .custom-block:where(.d-pb-90) { --pb: 90px !important; }
    .custom-block:where(.d-pb-100) { --pb: 100px !important; }
    .custom-block:where(.d-pb-110) { --pb: 110px !important; }
    .custom-block:where(.d-pb-120) { --pb: 120px !important; }
    .custom-block:where(.d-pb-120) { --pb: 130px !important; }
    .custom-block:where(.d-pb-140) { --pb: 140px !important; }
    .custom-block:where(.d-pb-150) { --pb: 150px !important; }
    .custom-block:where(.d-pb-160) { --pb: 160px !important; }
    .custom-block:where(.d-pb-170) { --pb: 170px !important; }
    .custom-block:where(.d-pb-180) { --pb: 180px !important; }
    .custom-block:where(.d-pb-190) { --pb: 190px !important; }
    .custom-block:where(.d-pb-200) { --pb: 200px !important; }

}

/* Mobile Margin And Padding Values */
@media screen and (width < 800px) {

    /* Margin Top */
    .custom-block:where(.m-mt-10) { --mt: 10px !important; }
    .custom-block:where(.m-mt-20) { --mt: 20px !important; }
    .custom-block:where(.m-mt-30) { --mt: 30px !important; }
    .custom-block:where(.m-mt-40) { --mt: 40px !important; }
    .custom-block:where(.m-mt-50) { --mt: 50px !important; }
    .custom-block:where(.m-mt-60) { --mt: 60px !important; }
    .custom-block:where(.m-mt-70) { --mt: 70px !important; }
    .custom-block:where(.m-mt-80) { --mt: 80px !important; }
    .custom-block:where(.m-mt-90) { --mt: 90px !important; }
    .custom-block:where(.m-mt-100) { --mt: 100px !important; }
    .custom-block:where(.m-mt-110) { --mt: 110px !important; }
    .custom-block:where(.m-mt-120) { --mt: 120px !important; }
    .custom-block:where(.m-mt-120) { --mt: 130px !important; }
    .custom-block:where(.m-mt-140) { --mt: 140px !important; }
    .custom-block:where(.m-mt-150) { --mt: 150px !important; }
    .custom-block:where(.m-mt-160) { --mt: 160px !important; }
    .custom-block:where(.m-mt-170) { --mt: 170px !important; }
    .custom-block:where(.m-mt-180) { --mt: 180px !important; }
    .custom-block:where(.m-mt-190) { --mt: 190px !important; }
    .custom-block:where(.m-mt-200) { --mt: 200px !important; }

    /* Margin Bottom */
    .custom-block:where(.m-mb-10) { --mb: 10px !important; }
    .custom-block:where(.m-mb-20) { --mb: 20px !important; }
    .custom-block:where(.m-mb-30) { --mb: 30px !important; }
    .custom-block:where(.m-mb-40) { --mb: 40px !important; }
    .custom-block:where(.m-mb-50) { --mb: 50px !important; }
    .custom-block:where(.m-mb-60) { --mb: 60px !important; }
    .custom-block:where(.m-mb-70) { --mb: 70px !important; }
    .custom-block:where(.m-mb-80) { --mb: 80px !important; }
    .custom-block:where(.m-mb-90) { --mb: 90px !important; }
    .custom-block:where(.m-mb-100) { --mb: 100px !important; }
    .custom-block:where(.m-mb-110) { --mb: 110px !important; }
    .custom-block:where(.m-mb-120) { --mb: 120px !important; }
    .custom-block:where(.m-mb-120) { --mb: 130px !important; }
    .custom-block:where(.m-mb-140) { --mb: 140px !important; }
    .custom-block:where(.m-mb-150) { --mb: 150px !important; }
    .custom-block:where(.m-mb-160) { --mb: 160px !important; }
    .custom-block:where(.m-mb-170) { --mb: 170px !important; }
    .custom-block:where(.m-mb-180) { --mb: 180px !important; }
    .custom-block:where(.m-mb-190) { --mb: 190px !important; }
    .custom-block:where(.m-mb-200) { --mb: 200px !important; }

    /* Padding Top */
    .custom-block:where(.m-pt-10) { --pt: 10px !important; }
    .custom-block:where(.m-pt-20) { --pt: 20px !important; }
    .custom-block:where(.m-pt-30) { --pt: 30px !important; }
    .custom-block:where(.m-pt-40) { --pt: 40px !important; }
    .custom-block:where(.m-pt-50) { --pt: 50px !important; }
    .custom-block:where(.m-pt-60) { --pt: 60px !important; }
    .custom-block:where(.m-pt-70) { --pt: 70px !important; }
    .custom-block:where(.m-pt-80) { --pt: 80px !important; }
    .custom-block:where(.m-pt-90) { --pt: 90px !important; }
    .custom-block:where(.m-pt-100) { --pt: 100px !important; }
    .custom-block:where(.m-pt-110) { --pt: 110px !important; }
    .custom-block:where(.m-pt-120) { --pt: 120px !important; }
    .custom-block:where(.m-pt-120) { --pt: 130px !important; }
    .custom-block:where(.m-pt-140) { --pt: 140px !important; }
    .custom-block:where(.m-pt-150) { --pt: 150px !important; }
    .custom-block:where(.m-pt-160) { --pt: 160px !important; }
    .custom-block:where(.m-pt-170) { --pt: 170px !important; }
    .custom-block:where(.m-pt-180) { --pt: 180px !important; }
    .custom-block:where(.m-pt-190) { --pt: 190px !important; }
    .custom-block:where(.m-pt-200) { --pt: 200px !important; }

    /* Padding Bottom */
    .custom-block:where(.m-pb-10) { --pb: 10px !important; }
    .custom-block:where(.m-pb-20) { --pb: 20px !important; }
    .custom-block:where(.m-pb-30) { --pb: 30px !important; }
    .custom-block:where(.m-pb-40) { --pb: 40px !important; }
    .custom-block:where(.m-pb-50) { --pb: 50px !important; }
    .custom-block:where(.m-pb-60) { --pb: 60px !important; }
    .custom-block:where(.m-pb-70) { --pb: 70px !important; }
    .custom-block:where(.m-pb-80) { --pb: 80px !important; }
    .custom-block:where(.m-pb-90) { --pb: 90px !important; }
    .custom-block:where(.m-pb-100) { --pb: 100px !important; }
    .custom-block:where(.m-pb-110) { --pb: 110px !important; }
    .custom-block:where(.m-pb-120) { --pb: 120px !important; }
    .custom-block:where(.m-pb-120) { --pb: 130px !important; }
    .custom-block:where(.m-pb-140) { --pb: 140px !important; }
    .custom-block:where(.m-pb-150) { --pb: 150px !important; }
    .custom-block:where(.m-pb-160) { --pb: 160px !important; }
    .custom-block:where(.m-pb-170) { --pb: 170px !important; }
    .custom-block:where(.m-pb-180) { --pb: 180px !important; }
    .custom-block:where(.m-pb-190) { --pb: 190px !important; }
    .custom-block:where(.m-pb-200) { --pb: 200px !important; }

}

.custom-block {
    margin-block: var(--mt, 0px) var(--mb, 0px);
    padding-block: var(--pt, 0px) var(--pb, 0px);
}

.custom-block:is(.bg-white), .wp-native-block:has(.bg-white) {
    background-color: white;
}

.custom-block:is(.bg-light-grey), .wp-native-block:has(.bg-light-grey) {
    background-color: #F3F4F7;
}

.custom-block:is(.bg-dark-blue), .wp-native-block:has(.bg-dark-blue) {
    background-color: var(--c-secondary);
    color: white;
}

.custom-block:is(.bg-gradient-vertical), .wp-native-block:has(.bg-gradient-vertical) {
    background-image: linear-gradient(0deg, var(--c-gradient-primary));
    color: white;
}

.custom-block:is(.bg-gradient-horizontal), .wp-native-block:has(.bg-gradient-horizontal) {
    background-image: linear-gradient(90deg, var(--c-gradient-secondary));
    color: white;
}

.custom-block:is(.bg-dark-blue, .bg-gradient-vertical, .bg-gradient-horizontal) :where(h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5),
.wp-native-block:has(.bg-dark-blue, .bg-gradient-vertical, .bg-gradient-horizontal) :where(h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5) {
    color: white;
}

#page .custom-block:is(.bg-dark-blue, .bg-gradient-vertical, .bg-gradient-horizontal) :where(strong, b),
#page .wp-native-block:has(.bg-dark-blue, .bg-gradient-vertical, .bg-gradient-horizontal) :where(strong, b) {
    color: white;
}

:is(.custom-block, .wp-native-block) p a {
    color: inherit;
    text-underline-offset: 2px;
}

/* WP Block List */

.wp-native-block .wp-block-list {
    list-style-position: outside;
    padding-left: 1.25rem;
}

.wp-native-block .wp-block-list li {
    padding-left: 1.5rem;
}

.wp-native-block .wp-block-list li:not(:last-child) {
    margin-bottom: 2.5rem;
}

.wp-native-block .wp-block-list li::marker {
    font-weight: 600;
}

.wp-native-block .wp-block-list li:nth-child(3n+1)::marker {
    color: var(--c-orange);
}

.wp-native-block .wp-block-list li:nth-child(3n+2)::marker {
    color: var(--c-green);
}

.wp-native-block .wp-block-list li:nth-child(3n+3)::marker {
    color: var(--c-purple);
}

.wp-native-block .wp-block-list.marker-check li:nth-child(3n+1)::marker {
    content: var(--i-checkmark-orange);
}

.wp-native-block .wp-block-list.marker-check li:nth-child(3n+2)::marker {
    content: var(--i-checkmark-green);
}

.wp-native-block .wp-block-list.marker-check li:nth-child(3n+3)::marker {
    content: var(--i-checkmark-purple);
}

/* WP Block Separator */

.wp-native-block .wp-block-separator {
    border: 0;
    border-bottom: 1px solid #DDDEE6;
}

/* WP Block Image */

.wp-native-block .wp-block-image figcaption {
    margin-block: 1.875rem 0;
    text-align: left;
    font-size: var(--font-13-11);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: rgb(from var(--c-secondary) r g b / .5);
}

.wp-native-block .wp-block-image.is-style-cropped img {
    clip-path: polygon(100% 0%, 100% calc(100% - 120px), calc(100% - 70px) 100%, 0% 100%, 0% 120px, 70px 0%);
}

/* WP Block Quote */

.wp-native-block .wp-block-quote {
    position: relative;
    font-size: var(--font-32-24);
    padding: 0;
    border: 0;
    padding-top: 4rem;
}

.wp-native-block .wp-block-quote::before,
.wp-native-block .wp-block-quote::after {
    content: '';
    position: absolute;
    top: 0;
    border-style: solid;
    border-width: 2.125rem 1.25rem 0;
    border-color: transparent;
    border-top-color: currentColor;
}

.wp-native-block .wp-block-quote::before {
    left: 0;
}

.wp-native-block .wp-block-quote::after {
    left: 2.5rem;
}

/* WP Block Table */

.wp-block-table {
    font-size: var(--font-13-11);
    text-align: left;
    line-height: 1.3;
    border: 0 !important;
    /* overflow-x: auto; */
}

.wp-block-table table {
    /* width: auto !important; */
    /* min-width: 100%; */
}

.wp-block-table :where(thead, tfoot) {
    border: 0 !important;
}

.wp-block-table :where(thead, tfoot),
.wp-block-table tbody :where(strong, b) {
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.wp-block-table :where(thead, tfoot) tr {
    color: white;
    background-color: var(--c-secondary);
}

.wp-block-table :is(thead, tfoot) th {
    padding: 0.9375rem;
    /* min-width: 10.375rem; */
}

.wp-block-table tbody td {
    padding: 1.25rem 0.9375rem;
    /* min-width: 10.375rem; */
}

.wp-block-table.is-style-regular :is(td, th) {
    border: 1px solid #DDDEE6;
}

.wp-block-table.is-style-stripes tr > * {
    border: 0 !important;
}

.wp-block-table.is-style-stripes tr > :not(:last-child) {
    border-right: 1px solid #DDDEE6 ! important;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    background-color: white !important;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(even) {
    background-color: #F3F4F7;
}

/* WP Block Columns */

.wp-block-columns.content-w-sidebar {
    gap: 5rem;
}

.wp-block-columns.content-w-sidebar .wp-block-column.sidebar {
    align-self: flex-start;
    position: sticky;
    top: calc(var(--header-height, 0px) + 1rem);
}

@media screen and (width < 782px) {
    .wp-block-columns.content-w-sidebar {
        /* flex-direction: column; */
    }
    .wp-block-columns.content-w-sidebar > * {
        /* order: 1; */
    }
    .wp-block-columns.content-w-sidebar .wp-block-column.sidebar {
        position: static;
        /* order: 0; */
        /* width: 100%; */
    }
}