:root {
    --safe-space-top: env(safe-area-inset-top);
    --safe-space-bottom: env(safe-area-inset-bottom);
    --safe-space-left: env(safe-area-inset-left);
    --safe-space-right: env(safe-area-inset-right);
}

html {
    overscroll-behavior-x: none;

    /* Align font rendering with macOS system defaults on high-DPI displays. macOS disabled 
    subpixel antialiasing starting with Mojave (2018), but browsers haven't caught up. */
    @media (min-resolution: 2dppx) {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    content-visibility: auto;
}

input,
button,
textarea,
select {
    font: inherit;
}

/* Get rid of random empty generated span elements */
span:empty {
    display: none;
}

/* Font Awesome icons are what HighLevel uses by default on certain elements. This isn't 
needed since different icons will be used instead. */
.fas {
    display: none;
}

/* ========================================
   TYPOGRAPHY STYLES & UTILITIES
======================================== */

.text-no-wrap {
    white-space: nowrap;
}

/* ========================================
   PAGE LAYOUTS & UTILITIES
======================================== */

.no-scroll {
    overflow: hidden !important;
}

.page-height {
    min-height: 100dvh !important;
}

.auto {
    width: auto !important;
    height: auto !important;
}

.flex {
    display: flex !important;
}

.flex-centered {
    justify-content: center !important;
    align-items: center !important;
}

.flex-centered-x {
    justify-content: center !important;
}

.flex-centered-y {
    align-items: center !important;
}

.text-center {
    text-align: center !important;
}

.no-collapse {
    flex-direction: row !important;
}

.overflow-hidden {
    overflow: hidden !important;
}

.fit-content {
    width: fit-content !important;
    height: fit-content !important;
}

.fit-content-w {
    width: fit-content !important;
}

.fit-content-h {
    height: fit-content !important;
}

.stretch {
    width: stretch !important;
    height: stretch !important;

    @media (max-width: 480px) {
        height: -moz-available !important;
    }
}

.row-align-left {
    margin-right: auto !important;
}

.row-align-center {
    margin-left: auto !important;
    margin-right: auto !important;
}

.row-align-right {
    margin-left: auto !important;
}

.inner {
    display: inherit;
    flex: inherit;
    flex-flow: inherit;
    justify-content: inherit;
    align-items: inherit;
    gap: inherit;
    width: 100%;

    &.horizontal {
        flex-direction: row;
    }

    &.vertical {
        flex-direction: column;
    }
}

.c-section {
    display: flex;
    flex-direction: column;
    align-items: center;

    &.funnel-code {
        display: none;
    }
}

section {
    padding-left: var(--safe-space-left);
    padding-right: var(--safe-space-right);
}

.c-row {
    display: flex;
    counter-reset: column row;

    > .inner {
        > .c-column {
            counter-increment: column;

            &:last-child {
                counter-set: column;
            }

            @media (max-width: 480px) {
                width: auto;
            }
        }

        > .c-row {
            counter-increment: row;

            &:last-child {
                counter-set: row;
            }
        }
    }

    &.col-dir {
        --col-direction: initial;

        flex-direction: var(--col-direction) !important;

        &.forward-x {
            --col-direction: row;
        }

        &.reverse-x {
            --col-direction: row-reverse;
        }

        &.forward-y {
            --col-direction: column;
        }

        &.reverse-y {
            --col-direction: column-reverse;
        }

        &:is(.reverse-x, .reverse-x-m, .reverse-x-d) .counter:has(.counter-hyphen) {
            flex-direction: var(--col-direction);
        }

        @media (max-width: 480px) {
            &.forward-x-m {
                --col-direction: row;
            }

            &.reverse-x-m {
                --col-direction: row-reverse;
            }

            &.forward-y-m {
                --col-direction: column;
            }

            &.reverse-y-m {
                --col-direction: column-reverse;
            }
        }

        @media (min-width: 481px) {
            &.forward-x-d {
                --col-direction: row;
            }

            &.reverse-x-d {
                --col-direction: row-reverse;
            }

            &.forward-y-d {
                --col-direction: column;
            }

            &.reverse-y-d {
                --col-direction: column-reverse;
            }
        }
    }

    @media (max-width: 768px) {
        &.col-collapse-768 {
            flex-direction: column !important;

            > .inner {
                width: auto;
            }
        }
    }

    @media (max-width: 480px) {
        flex-direction: column;
    }
}

.c-column {
    display: flex;
    flex: 1 1 auto;
}

/* ========================================
   FORM ELEMENTS
======================================== */

.checkbox-container {
    display: flex;
    align-items: center;
    height: 1lh;
}

/* ========================================
   ACCORDION
======================================== */

.accordion {
    overflow: hidden;

    &:not(.active) .accordion-content {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    &.active .accordion-content {
        height: auto;
    }
}

.accordion-trigger {
    all: unset;
    display: block;
    position: relative;
    text-align: left;

    &:hover {
        cursor: pointer;
    }

    & > * {
        display: inline-block;
        font-size: inherit;
        white-space: break-spaces;

        &:last-child {
            color: inherit;
        }

        & * {
            font-size: inherit;
        }
    }

    & .sub-heading-button {
        opacity: 1;
        font-size: inherit;
    }
}

.accordion-content {
    height: 0;
    overflow: hidden;
}