/*
Theme Name:     First Baptist West
Theme URI:      https://firstbaptistwest.com
Description:    Hello-elementor child theme.
Author:         Martin Williams
Author URI:     https://jollyweb.dev
Template:       hello-elementor
Version:        0.1.0
*/

/* =Theme customization starts here
-------------------------------------------------------------- */

@view-transition {
    navigation: auto;
}

@keyframes zoom-in {
    to { transform: scale(2); }
}
@keyframes moveUp {
    from { transform: translateY(50%); }
    to { transform: translateY(0); }
}

:root {
    --fbw-header-height: 86.56px;
    @media (min-width: 1400px) {
        --fbw-header-height: 105.86px;
    }
}

.page > [data-elementor-type="wp-page"] {
    @media (min-width: 992px) {
        padding-top: var(--fbw-header-height);
    }
    @media (min-width: 1024px) {
        padding-inline-end: 50px;
        padding-inline-start: 50px;
    }
}

.sr-only {
    position: absolute !important;
    border: 0 !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    width: 1px !important;
    white-space: nowrap !important;
}

@media (min-width: 1024px) {
    .sticky-column,
    .e-con.sticky-column {
        position: sticky;
	top: 150px;
    }
}

.fbw-events-list {
    .tribe-events-widget-events-list__events {
        display: flex;
        gap: 1rem;
        @media (max-width: 767px) {
            flex-direction: column;
        }

        .fbw-event {
            position: relative;
            margin-bottom: 0 !important;
            flex: 1 1 50%;
            background-size: cover;
            border-radius: 1.125rem;
            min-height: 420px;
            align-items: flex-end;
            justify-content: center;
            padding: 1.5rem;
            gap: 1rem;
            --tec-color-accent-primary: var(--e-global-color-primary);
            @media (max-width: 767px) {
                min-height: 200px;
            }

            &::before {
                content: '';
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                background: radial-gradient(100% 50% at 50% 100%, #fffc, #fff1);
                z-index: 1;
            }

            > div {
                position: relative;
                z-index: 2;
            }

            .tribe-events-widget-events-list__event-date-tag-datetime {
                background: #fffe;
                aspect-ratio: 1/1;
                border-radius: 1.125rem;
                justify-content: center;
                &::after {
                    content: unset;
                }
            }

            .tribe-events-widget-events-list__event-wrapper {
                margin-bottom: 0.25rem;
            }
        }
    }

    .tribe-events-widget-events-list__view-more {
        display: none;
    }
}

.single .page-content {
    margin-top: 4rem;
}
.single .fbw-upcoming-events {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4rem;
    margin-top: 6rem;
    justify-content: center;
    @media (min-width: 768px) {
        flex-direction: row;
    }

    h2 {
        font-family: var(--e-global-typography-primary-font-family);
        font-size: 4rem;
        color: #000;
        position: relative;
        /* top: 45px; */
        /* left: 3.7rem; */
    }

    .btn-primary {
        font-family: var(--e-global-typography-accent-font-family);
        font-weight: 400;
        letter-spacing: 0.9px;
        text-decoration: none;
        text-transform: uppercase;
        border-radius: 25px;
        background: var(--e-global-color-primary);
        &:hover {
            background: #000;
            color: #fff;
        }
    }

    /* .fbw-ministry-events-wrapper {
        background: rgb(226 227 218);
        padding: 6rem 4rem;
        border-radius: 1.125rem;
    } */

    .fbw-event {
        margin: 0 !important;
        padding: 1rem;
        gap: 1rem;
        align-items: center;
        position: relative;
        overflow: hidden;
        > * {
            position: relative;
            z-index: 2;
        }
        &::after {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--e-global-color-primary);
            border-radius: 1.125rem;
            /* transform: scale(0 1); */
            scale: 1 0;
            transition: all 0.3s cubic-bezier(.455,.03,.515,.955);
        }
        &:hover::after {
            /* transform: scale(1 1); */
            scale: 1 1;
        }
        &:hover + .fbw-event::after {
            translate: 0 -100%;
        }
        &:has(+ .fbw-event:hover)::after {
            translate: 0 100%;
        }
        &:hover .tribe-events-widget-events-list__event-date-tag-daynum {
            transform: scale(1.2);
        }
    }

    time.tribe-events-widget-events-list__event-date-tag-datetime {
        background: #fff;
        padding: 15px;
        box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
        width: 100%;
        aspect-ratio: 1/1;
        border-radius: 1.125rem;
        align-items: center;
        justify-content: space-between;
        flex-direction: column-reverse;
    }

    .fbw-event .tribe-events-widget-events-list__event-date-tag-daynum {
        font-size: 30px;
        line-height: 1;
        font-family: var(--e-global-typography-accent-font-family);
        transition: all 0.3s cubic-bezier(.455,.03,.515,.955);
    }

    .tribe-common a {
        color: #000;
        mix-blend-mode: difference;
    }
}

.single .fbw-updates {
    padding: 3rem 1rem;
    @media (min-width: 1024px) {
        padding: 6rem 3.7rem;
    }

    .update-row {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        @media (min-width: 1024px) {
            flex-direction: row;
            align-items: flex-start;
        }
        .wp-post-image {
            width: 100%;
            height: auto;
            border-radius: 1.125rem;
            object-fit: cover;
            object-position: bottom right;
            @media (min-width: 1024px) {
                aspect-ratio: 1/1;
                width: 300px;
            }
            @media (min-width: 1200px) {
                width: 480px;
            }
        }
    }

    h2 {
        font-family: var(--e-global-typography-primary-font-family);
        font-size: 3.2rem;
        color: #000;
        @media (min-width: 1024px) {
            font-size: 4rem;
        }
    }

    h3 {
        font-family: var(--e-global-typography-accent-font-family);
        font-size: 2.4rem;
        color: #000;
        margin: 0;
    }

    .post-meta {
        margin-bottom: 1rem;
        padding: 0 10px;
        span {
            display: block;
            font-family: var(--e-global-typography-text-font-family);
            font-weight: 300;
            letter-spacing: 1px;
            @media (min-width: 768px) {
                display: inline-block;
                + span {
                    margin-left: 10px;
                    border-left: 1px solid rgba(0,0,0,0.3);
                    padding-left: 10px;
                }
            }
        }
    }

    p {
        font-family: var(--e-global-typography-text-font-family);
        font-weight: 300;
        font-size: 18px;
        color: #000;
        @media (min-width: 1024px) {
            font-size: 22px;
        }
    }
}

.single .activities-row {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    gap: 2rem;
    padding: 2rem 1rem;
    @media (min-width: 1024px) {
        flex-direction: row;
        padding-top: 6rem;
        padding-bottom: 6rem;
        gap: 6rem;
    }

    .activity {
        flex: 1 1 30%;
        @media (min-width: 1024px) {
             max-width: 35%;   
        }

        .img-wrapper {
            display: block;
            overflow: hidden;
            border-radius: 1.125rem;

            img {
                display: block;
                margin: 0;
                width: 100%;
                height: auto;
                object-fit: cover;
                transform: scale(1);
                transition: transform .5s cubic-bezier(.785,.135,.15,.86);
            }
        }

        h2 {
            font-family: var(--e-global-typography-primary-font-family);
            font-size: 42px;
            margin: 1rem 0 0.5rem;
            letter-spacing: 0.9px;
        }

        &:hover .img-wrapper img {
            transform: scale(1.1) rotateZ(-5deg);
        }
    }

    .activity-content {
        font-family: var(--e-global-typography-text-font-family);
        font-weight: var(--e-global-typography-text-font-weight);
        font-size: 22px;
        letter-spacing: 1.5px;
        text-wrap: pretty;
    }
}

.single .connect-row {
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    @media (min-width: 1024px) {
        flex-direction: row;
    }
}

.single .registration-wrapper,
.single .social-wrapper {
    background: rgb(226 227 218);
    padding: 3rem 2rem;
    border-radius: 1.125rem;
    overflow: hidden;
    text-align: center;
    flex: 0 0 50%;
    @media (min-width: 768px) {
        padding: 6rem 4rem;
    }

    h2 {
        font-family: var(--e-global-typography-primary-font-family);
        font-size: 42px;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        text-wrap: pretty;
    }

    p {
        font-family: var(--e-global-typography-text-font-family);
        font-weight: 400;
        font-size: 22px;
        letter-spacing: 1.25px;
        text-wrap: balance;
    }

    .btn-primary {
        font-size: 24px;
        text-decoration: none;
        text-transform: uppercase;
        border-radius: 50px;
        color: var(--e-global-color-primary);
        border: 4px solid var(--e-global-color-primary);
        background: transparent;
        &:hover {
            background: var(--e-global-color-primary);
            color: #fff;
        }
    }
}

.social-wrapper.has-bg {
    background-position: center;
    background-size: cover;
    position: relative;
    &::before {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(255,255,255,0.67);
    }
    > * {
        position: relative;
        z-index: 9;
    }
}

.social-wrapper ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    li a {
        text-decoration: none;
        color: var(--e-global-color-primary);
        font-size: 32px;
        transition: all .3s;
        &:hover {
            color: rgb(51 51 51);
        }
    }
}


.text-pretty { text-wrap: pretty; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.justify-center { justify-content: center; }
.items-center { align-items: center; }
.gap-4 { gap: 1rem; }
@media (min-width: 768px) {
    .md\:flex-row { flex-direction: row; }
}
.elementor-absolute.inset { inset: 0; }
.elementor.elementor .newsletter-container > .elementor-widget {
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
}
.newsletter-container {
    input[type="text"],
    input[type="email"] {
        border-radius: 25px;
        border: 1px solid rgba(35, 31, 32, 0.75);
    }
    [type="submit"] {
        background-color: var(--e-global-color-primary);
        border-color: var(--e-global-color-primary);
        color: #fff;
        border-radius: 25px;
        font-family: var(--e-global-typography-accent-font-family);
        font-weight: 400;
        letter-spacing: 0.9px;

        &:not(:disabled):hover {
            background-color: #000;
            border-color: #000;
        }

        &:disabled {
            background-color: var(--e-global-color-primary);
            opacity: .75;
            cursor: not-allowed;
        }
    }
}


.site-footer.fbw-footer {
    padding-block-end: 0;
}

.footer-top {
    background-color: var(--e-global-color-primary);
    color: #fff;
    text-align: center;
    padding: 4rem 50px;
    /* margin-bottom: 2rem; */

    > .e-con-boxed.e-flex {
        --display: flex;
        --flex-direction: row;
        --container-widget-width: initial;
        --container-widget-height: 100%;
        --container-widget-flex-grow: 1;
        --container-widget-align-self: stretch;
        --flex-wrap-mobile: wrap;
        --justify-content: center;
    }

    h2 {
        font-family: var(--e-global-typography-accent-font-family);
    }

    .elementor-widget-button .elementor-button {
        background-color: #fff;
        color: #1a1a1a;
        fill: #1a1a1a;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-family: var(--e-global-typography-primary-font-family);
        font-weight: var(--e-global-typography-primary-font-weight);
        border-radius: 25px;
        border: 2px solid #fff;

        &:hover {
            background-color: transparent;
            color: #fff;
            fill: #fff;
        }
    }
}

.site-footer.fbw-footer .footer-inner {
    background-color: var(--e-global-color-primary);
    max-width: 100%;
    width: 100%;
    border-top: 1px solid #fff2;
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin: 0 auto;
    color: #fff;
    .site-logo {
        filter: brightness(0) invert(1) drop-shadow(0px 0px 3px #000a);
    }
}