/* ------------------------------------ */
/* St. Peter's Style Sheet ------------ */
/* ------------------------------------ */


/* ---- CSS Reset: Start ---- */
/* -------------------------- */


/* Reset margins and padding for common elements */
body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, blockquote {
  margin: 0;
  padding: 0;
}

/* Set box-sizing to border-box */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Remove default list styles */
ul, ol {
  list-style: none;
}

/* Ensure consistent link appearance */
a {
  text-decoration: none;
  color: inherit;
}

/* Make images responsive and block-level */
img {
  max-width: 100%;
  height: auto;
  display: block;
}


/* ----- CSS Reset: End ----- */
/* -------------------------- */


/* ---- Variables: Start ---- */
/* -------------------------- */

:root{
    /* COLOURS ----------------*/

    /*base colours*/
    --c-base-100:#742236;
    --c-base-80:#8c4b51;
    --c-base-50:#B48889;
    /*Dark*/
    --c-dark-90:#30232E;
    --c-dark-70:#534750;
    /*grey*/
    --c-grey-100:#493c4b;
    --c-grey-90:#574a58;
    --c-grey-20:#ddd9dc;
    /*Pink*/
    --c-pink-50:#f8eaea;
    --c-pink-30:#fbf3f3;
    /*Blush*/
    --c-blush-20:#f5eded;
    
    /*Other*/
    --c-white:#ffffff;
    --c-body-bg:var(--c-white);
    --c-header-bg:var(--c-base-100);

    --c-cta-bg: var(--c-base-100);
    --c-cta-bg-hover: oklch(from var(--c-cta-bg) 60% c h);

    /* FONTS ----------------*/

    /* Families */
    --f-header: "Arsenal", serif;
    --f-body: "montserrat", sans-serif;

    /* Line Heights */
    --lh-heading: 1.1;
    --lh-body:1.5;
    --lh-intro:1.4;

    /* Font weights */
    --fw-reg:400;
    --fw-semi:600;
    --fw-bold:700;
      
    /* Sizes */
    --fs-base: clamp(16px, -0.4545rem + 3.4545vw, 21px);
    --fs-h1: 2.986rem;
    --fs-h2: 2.488rem;
    --fs-h3: 2.074rem;
    /*--fs-h4: 1.728rem;*/
    --fs-h4: 1.44rem;
    --fs-h5: 1.2rem;
    --fs-h6: 1.1rem;

    /* SPACING ----------------*/
    --sp-3xs: 0.125rem; /*2px at 16px base*/
    --sp-2xs: 0.25rem; /*4px at 16px base*/
    --sp-xs: 0.5rem; /*8px at 16px base*/
    --sp-m: 0.75rem; /*12px at 16px base*/
    --sp-base: 1rem; /* 16px base*/
    --sp-l: 1.125rem; /*18px at 16px base*/
    --sp-xl: 1.25rem; /*20px at 16px base*/
    --sp-2xl: 1.5rem; /*24px at 16px base*/
    --sp-3xl: 1.75rem; /*28px at 16px base*/
    --sp-4xl: 2rem; /*32px at 16px base*/
    --sp-5xl: 2.25rem; /*36px at 16px base*/
    --sp-6xl: 2.5rem; /*40px at 16px base*/
    --sp-7xl: 3rem; /*48px at 16px base*/
    --sp-8xl: 3.75rem; /*60px at 16px base*/
    --sp-9xl: 4rem; /*64px at 16px base*/
    --sp-10xl: 4.5rem; /*72px at 16px base*/
    --sp-11xl: 5rem; /*80px at 16px base*/

    /* Specific Spacings */
    --sp-header-vert: var(--sp-base) 0;
    --sp-header-hor: var(--sp-4xl);
    --sp-sec-mob: var(--sp-7xl);
    --sp-sec-desk: var(--sp-11xl);
    --sp-f-block: var(--sp-2xl);
    --sp-p-block: var(--sp-4xl);
    --sp-cta: var(--sp-xs) var(--sp-xl);
    --sp-gap-sml: var(--sp-xs);
    --sp-gap-med: var(--sp-base);
    --sp-gap-lrg: var(--sp-2xl);
    --sp-gap-xlrg: var(--sp-4xl);

    --sp-h3-mar:var(--sp-4xl);
    --sp-h4-mar:var(--sp-l);
    --sp-body-mar:var(--sp-xl);
    --sp-cta-mar:var(--sp-2xl);
    --sp-intro-pad: var(--sp-9xl) 0;

    /* Border Radius' ----------------*/
    --br-sml:0.25rem;
    --br-med:0.5rem;
    --br-lrg:0.75rem;

    /* Transitions ----------------*/
    --trans-speed: all 0.5s;
}

/* ---- Variables: End ------ */
/* -------------------------- */

/* -- General Classes: Start -- */
/* ---------------------------- */

a{
    color:#0066FF;
    font-weight:600;
    text-decoration:underline;
    transition: var(--trans-speed);
    &:hover{
        color:#0033ee;
        transition: var(--trans-speed);
    }
}

h1,h2{
    font-size: var(--fs-h1);
    line-height: var(--lh-heading);
}


h3{
    font-size: var(--fs-h2);
    margin-bottom: var(--sp-4xl);
}
h4{
    font-size: var(--fs-h4);
}
h5{
    font-size: var(--fs-h5);
}
h6{
    font-size: var(--fs-h6);
}

h1,h2,h3,h4,h5,h6{
    font-family: var(--f-header);
    font-weight: var(--fw-bold);
    font-style: normal;
    color: var(--c-base-100);
}

button{
    all:unset;
    .cta{
        border: none;
        color: var(--c-white);
    }
}

.cta{
    display: inline-block;
    padding: var(--sp-cta);
    color: var(--c-white);
    background-color: var(--c-cta-bg);
    border-radius: var(--br-sml);
    font-family: var(--f-header);
    font-weight: var(--fw-bold);
    font-style: normal;
    margin-top: var(--sp-cta-mar);
    transition: var(--trans-speed);
    text-decoration:none;

    &:hover{
        background-color: var(--c-cta-bg-hover);
        transition: var(--trans-speed);
        scale:1.05;
        color: var(--c-white);
    }

    &.cta-alt{
        background-color: transparent;
        border: 2px solid var(--c-white);
        margin-top: 0;
        transition: var(--trans-speed);
        &:hover{
            border: 2px solid var(--c-base-80);
            transition: var(--trans-speed);
        }
    }
    
    &.cta-hero{
        background-color: var(--c-white);
        color:var(--c-base-100);
        transition: var(--trans-speed);
        text-shadow:none;
        &:hover{
            background-color: var(--c-base-50);
            transition: var(--trans-speed);
        }
    }
}

.cta-group{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--sp-gap-med);
    width: 100%;
    &.page-lvl-cta{
        flex-direction: column;
        gap:var(--sp-gap-sml);
        .cta{
            margin: 0;
        }
    }
}

svg{
    display: flex; 
    align-items: center;
}

.sec-pad{
    padding-top: var(--sp-sec-mob);
    padding-bottom: var(--sp-sec-mob);
}

.sec-pad-top{
    padding-top: var(--sp-sec-mob);
}

.sec-pad-bottom{
    padding-bottom: var(--sp-sec-mob);
}

.sec-text{
    text-align: left;
}

.sec-img{
    img{
        width: 100%;
    }
}

.grow{
    flex-grow: 1;
}

.small-text{
    font-size: var(--fs-base);
}
.heavy-text{
    font-weight: var(--fw-bold);
}

.sec-block-wrap{
    &.image-text-block{
        

        .sec-img{
            

            span{    
                position: relative;
                &::before{
                    position:absolute;
                    display: block;
                    top:-5rem;
                    /*left:0;*/
                    z-index: 5;
                    content: "\00a0";
                    background-image: url(../img/brand/img-dec.svg);
                    background-repeat: no-repeat;
                    background-position: top left;
                    background-size: contain;
                    width: 5rem;
                    aspect-ratio: 1/6;
                    opacity: 0.35;
                }
                &::after{
                    position:absolute;
                    display: none;
                    bottom:-5rem;
                    right:0rem;
                    z-index: 5;
                    content: "\00a0";
                    background-image: url(../img/brand/img-dec.svg);
                    background-repeat: no-repeat;
                    background-position: bottom center;
                    background-size: contain;
                    width: 5rem;
                    aspect-ratio: 1/6;
                    opacity: 0.35;
                }
            }
            img{
                position: relative;
                z-index: 10;
                
                aspect-ratio: 4/3;
                border-radius:var(--br-lrg);
                    
            }
        }      
    }
    .sec-text{
        
        width: 100%;
        h4{
            margin-bottom:var(--sp-2xl); 
        }
        p{
            margin-bottom:var(--sp-2xl);
            &:last-child{
                margin-bottom: 0;
            }
        }
    }
}

.text-block{
    text-align: left;
}

/* Site Messages */

.message{
    padding:0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-weight: 600;
    margin-bottom:1rem;
    
    &.success{
        background-color: #009966;
        color:white;
    }
    &.error{
        background-color: #990000;
        color:white;
    }
}


/* -- General Classes: End -- */
/* ---------------------------- */




/* - Structure: Start - */
/* ----------------------------- */

/* Temporary outlining of elements 
header, main, footer, section, div{
    /*border: 1px dashed #c3c5c7;
}*/

html{
    font-size: var(--fs-base);
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

body{
    font-family: var(--f-body);
    /*font-size: var(--fs-base);*/
    font-kerning: auto;
    font-optical-sizing: auto;
    background-color: var(--c-body-bg);

    color: var(--c-grey-90);
    font-weight:  var(--fw-reg);
    font-style: normal;
    line-height:  var(--lh-body);

    display: flex;
    flex-direction: column;
    width: 100%;
}

header {
    width: 100%;
    background-color: var(--c-header-bg);
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    min-height: 120px;
    .inner-wrap{
        flex-direction: row !important;
    }
    padding: var(--sp-base) 0;
}

main {
    width: 100%;
    flex-grow: 1;
}

footer {
    width: 100%;
    background-color: var(--c-base-100);
    padding:var(--sp-4xl) var(--sp-base);
    color: var(--c-pink-50);
    font-size: var(--fs-base);
    padding: var(--sp-9xl) 0;
    text-wrap:balance;
    .logo-icon{
        margin-bottom: var(--sp-2xl);
    }
    a{
        text-decoration: underline;
        font-weight: var(--fw-bold);
        color: var(--c-white);
        &:hover{
            color: var(--c-base-50);
        }
    }
}

.outer-wrap{

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
    padding-left: var(--sp-4xl);
    padding-right: var(--sp-4xl);


    .inner-wrap{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 1440px;
    }

    &.hero{
        min-height:85svh; /* originally 67svh*/
        position: relative;
        &.hero-sml{
            min-height: 60svh;
        }
        background-image: url(../img/hero1.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        background-color: rgba(0,0,0,0.2);

        h1{
            color: var(--c-white);
        }
        
        .hero-content{
            position: relative;
            z-index: 15;
            max-width:800px;
            text-align: center;
            text-wrap:balance;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: var(--sp-gap-med);
            h2,span{
                color: var(--c-white);
            }
            
            .cta{
                width: fit-content;
                margin-top: 0;
            }
        }
    }
    &.hero-sml{
        
        min-height:34svh;
        position: relative;
        &::after{
            content: "";
            position: absolute;
            top:0;
            left:0;
            bottom: 0;
            right: 0;
            background-color:rgba(0,0,0,0.2);
        }
    }
}

/* ---------- Home Hero Slideshow : START -------- */

.slideshow{
  z-index:5;
  /*width:100svw;*/
  position:relative;
  background-color:grey;
  display:flex;
  justify-content:center;
  align-items:center;
  height:85svh;

    .slide-content{
        position:absolute;
        z-index:25;
        top:0;
        bottom:0;
        left:0;
        right:0;
        display:flex;
        justify-content:center;
        align-items:center;
        flex-direction:column;
        background-color: rgba(0,0,0,0.3);
        color: var(--c-white);
        text-shadow: 1px 1px 10px rgba(0,0,0,0.25);
        text-align: center;
        text-wrap: balance;

        padding: 0 var(--sp-9xl);
        h1{
            color: var(--c-white);
            margin-bottom: var(--sp-base);
            text-align: center;
            text-wrap: balance;
        }
    }

    .slides{
        position:absolute;
        z-index:10;
        top:0;
        bottom:0;
        left:0;
        right:0;
        display:flex;
        justify-content:center;
        align-items:center;
        
        .slide{
            position:absolute;
            top:0;
            bottom:0;
            left:0;
            right:0;
            z-index:15;
            transition: opacity 1s ease-in-out;

            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;

            &.active{
                z-index:20;
            }         
        }
    }
}

/* ---------- Home Hero Slideshow : END -------- */



/* - Structure: End --- */
/* ----------------------------- */

/* - Navigation: Start ---------- */
/* ----------------------------- */

/* Mobile Nav */

#toggle-btn{
    svg{
        fill: var(--c-white);
    }
    &:hover{
        svg{
            fill: var(--c-base-50);
        }
    }
}

.mobile-menu-drop{
    /*inset: auto;*/
    margin:0;
    text-align: left;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: var(--c-dark-90);
    width: 100%;

    position: absolute;
    z-index: 99;
    position-anchor: --header-sec;
    top: anchor(bottom);
    left: anchor(left);

    &:popover-open{
        display: flex;
        
        gap:calc(var(--sp-gap-med)/2);

    }

    .drop-link{

        display: block;
        color: var(--c-white);
        text-decoration:none;
        font-weight:400;
        width: 100%;
        padding: var(--sp-xs) var(--sp-base) var(--sp-xs) var(--sp-4xl);
        font-family: var(--f-header);
        font-size: calc(var(--fs-base) + 0.1rem);
        &:hover{
            background-color: var(--c-grey-90);
            /*color: var(--c-base-50);*/
        }
        &.sub-link{
            padding: var(--sp-2xs) var(--sp-base) var(--sp-xs) var(--sp-4xl);
            &::before{
                content:"•";
                padding: 0 var(--sp-xs) 0 0;
                
            }
        }
    }

     .main-link{
        font-weight: var(--fw-bold);
        color: var(--c-white);
        text-align: left;
        padding: var(--sp-xs) var(--sp-4xl);
        width: 100%;

    }

}

/* Skip to main content link */

.skip-nav-link{
    position: absolute;
    left: 0.5rem;
    z-index:1000;
    padding:0.75rem 1.25rem;
    border-radius: 0 0 0.25rem 0.25rem;
    background-color: var(--c-base-50);
    color: var(--c-base-100);
    transform: translateY(-120%);

    &:focus{
        transform: translateY(0);
    }
}



/* Desktop Nav */

nav{
    button:focus-visible{
        outline: -webkit-focus-ring-color auto 1px;

    }
}

header{
    z-index: 999;
    anchor-name: --header-sec;
    .nav-wrap{
        flex-grow: 1;
        display: flex;
        justify-content: right;
        align-items: center;
        nav{
            font-family: var(--f-header);

            display: flex;
            justify-content: center;
            gap:var(--sp-gap-xlrg);
            .nav-link{
                padding: var(--sp-m) 0;
                font-size: calc(var(--fs-base) - 0.05rem);
                border-bottom: 3px solid var(--c-base-100);
                color: var(--c-white);
                text-decoration:none;
                font-weight:400;
                &.alt{
                    color: var(--c-base-100);
                    background-color: var(--c-white);
                    font-weight: var(--fw-bold);
                    padding: var(--sp-m) var(--sp-xl);
                    border-radius: var(--br-sml);
                    &:hover{
                        background-color: var(--c-base-50);
                        border-bottom: 3px solid var(--c-base-100);
                    }
                }

                

                &.active{
                    border-bottom: 3px solid var(--c-white);
                    /*pointer-events: none;*/
                }
                &:hover{
                    border-bottom: 3px solid var(--c-base-50);
                }
            }
        }
        
    }
    .sm-wrap{
        /*background-color: yellow;*/
        display: flex;
        gap:var(--sp-gap-med);

        a{
            svg{
                fill: var(--c-white);
                max-width:1.5rem;
                max-height:1.5rem;
                transition: var(--trans-speed);
            }
            &:hover{
                svg{
                    fill: var(--c-base-50);
                    transition: var(--trans-speed);
                }
            }
        }
        
        
    }

}

#about-page #about-btn, 
#get-involved-page #get-inv-btn,
#sermon-page #sermon-link,
#mission-page #mission-link,
#give-page #give-link,
#contact-page #contact-link{
    border-bottom: 3px solid var(--c-white)!important;
}

#home-page #logo-link{
    pointer-events:none !important;
    cursor: default;
}

.dropdown{
    inset: auto;
    margin:0;
    position:absolute;
    top: anchor(bottom);
    left: anchor(left);

    background-color: var(--c-dark-90);
    color: var(--c-white);
    border: none;
    box-shadow: 0 3px 15px rgba(0,0,0,0.2);
    padding: 0;
    border-radius: var(--br-med);
    overflow: hidden;

    .drop-link{
        display: block;
        width: 100%;
        color: var(--c-white);
        text-decoration:none;
        font-weight:400;
        padding: var(--sp-m) var(--sp-base);
        font-family: var(--f-header);
        font-size: calc(var(--fs-base) + 0.1rem);
        &:hover{
            background-color: var(--c-grey-90);
        }
    }

    &:popover-open{
        display: flex;
        flex-direction: column;
        gap:calc(var(--sp-gap-sml)/2);

    }
}

#about-btn{
    anchor-name: --about-btn;
    
}
#about-drop{
    position-anchor: --about-btn;
    
}

/* - Navigation: End ----------- */
/* ----------------------------- */



/* - Sections Structure: Start - */
/* ----------------------------- */

.sec-block-wrap{
    width: 100%;
    display: grid;
    gap:var(--sp-gap-med);
    /*padding: 1rem 0;*/
    grid-template-columns: 1fr;

    &.five-col{
        grid-template-columns: 1fr 1fr;
    }

}

/* - Sections Structure: End - */
/* ----------------------------- */

#f-block-wrap{
    background-image: url(../img/brand/stp-ill-short.png);
    background-attachment:scroll;
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;

    min-height: 60svh;

    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.f-block{
    color: var(--c-pink-50);
    background-color: var(--c-base-100) !important;
    padding: var(--sp-7xl);
    text-align: center;
    font-size: var(--fs-base);

    min-height:10svw;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: var(--sp-gap-lrg);

    

    h4{
        color: var(--c-white);
    }

    .sm-wrap{
        display: flex;
        flex-direction: row;
        gap: var(--sp-gap-med);
        .sm-link{
            a{
                svg{
                    fill: var(--c-white);
                    transition: var(--trans-speed);
                }

                &:hover{
                    svg{
                        fill: var(--c-base-50);
                        transition: var(--trans-speed);
                    }
                }
            }
        }
    }
}

.p-block{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;


    background-color: var(--c-pink-30);
    padding: var(--sp-p-block);
    border-radius: var(--br-lrg);
    text-align: left;

    &.sml-p{
        justify-content: space-between;
    }

    .cta-group{
        
        margin:0;
        display: flex;
        flex-direction: column;
        gap:var(--sp-gap-sml);
        .cta{
            display: block;
            margin:0;
            width: 100%;
        }
    }
    gap:var(--sp-gap-med);
}

.p-block-img{
    background-color: var(--c-pink-30);
    border-radius: var(--br-lrg);
    text-align: left;
    overflow:hidden;
    img{
        background-color: var(--c-blush-20);
        width: 100%;
        /*aspect-ratio: 4/3;*/
        min-height:300px;
        object-fit:cover;
    }
    .details{
        padding:var(--sp-4xl);
        .timeDate{
            font-size: var(--fs-base);
        }
    }
}

a.gi-item{
    text-decoration: none !important;
    .details{
        transition:all 0.5s;
        font-weight: 400;
        color: var(--c-dark-90);
        display:flex;
        flex-direction:column;
        gap: var(--sp-xs);
        justify-items:center;
    }
    
    &:hover{
        scale:1.01;
        
        .details{
            background-color:var(--c-pink-50);
            transition:all 0.5s;
        }
    }
}



#intro-sec{
    .inner-wrap{
        background-image: url(../img/brand/starburst-tri.svg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;

        padding: var(--sp-intro-pad);
    }
}

.intro-text{
    font-family: var(--f-header);
    color: var(--c-base-100);
    font-size: calc(var(--fs-base) * 2);
    line-height:  var(--lh-intro);
    text-wrap: balance;
}

.timeDate{
    font-weight:  var(--fw-semi);
}



a:hover .event, a:hover .sp-event{
    /*background-color: var(--c-blush-20);*/
    border-bottom: 1px solid var(--c-base-50);
    scale:1.01;
    transition: var(--trans-speed);
}

.event{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--sp-gap-xlrg);
    padding: var(--sp-base) 0;
    border-bottom: 1px solid var(--c-grey-20);
    transition: var(--trans-speed);
    font-weight: 400;
    .event-desc{
        flex-grow: 1;
        .e-day{
            font-weight: var(--fw-semi);
            font-size: var(--fs-base);
        }
        .e-title{
            font-family: var(--f-header);
            font-size: calc(var(--fs-base) + 0.2rem);
        }
    }
    .event-time{
        font-size: calc(var(--fs-base) + 0.1rem);
    }
}
.sp-event{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--sp-gap-xlrg);
    padding: var(--sp-base) 0;
    border-bottom: 1px solid var(--c-grey-20);
    font-weight: 400;
    .event-desc{
        flex-grow: 1;
        .e-desc{
            
            font-size: var(--fs-base);
        }
        .e-title{
            font-family: var(--f-header);
            font-size: calc(var(--fs-base) + 0.2rem);
            font-weight: var(--fw-semi);
        }
    }
    .event-time{
        font-size: var(--fs-base); 
    }
}

.h-event-wrap a{
    color:var(--c-grey-90);
    text-decoration:none;
}


.sermon{
    z-index: 1;
    aspect-ratio: 3/4;
    background-color: var(--c-blush-20);
    position: relative;
    text-align: left;
    border-radius: var(--br-med);
    overflow: hidden;

    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% auto;

    transition: var(--trans-speed);

    .s-detail{
        position: absolute;
        bottom:0;
        left:0;
        padding: var(--sp-base);
        background-color: var(--c-base-100);
        border-radius: 0 var(--br-med) 0 0;
        font-size: var(--fs-base);
        color: var(--c-white);
        font-weight: 400;;

        .sermon-title{
            font-family: var(--f-header);
            font-weight: var(--fw-bold);
            font-size: calc(var(--fs-base) + 0.1rem);
        }
    }

    &:hover{
        background-size: 110% auto;
        scale:1.05;
        transition: var(--trans-speed);
    }
}



.pagination-wrap{
    .pagination{
        .pagelist{
            padding-top: var(--sp-xl);
            ul{
                display: flex;
                justify-content: center;
                align-items: center;
                gap:var(--sp-gap-med);
                li a{
                    display:block;
                    padding: var(--sp-2xs) var(--sp-m);
                    /*width: 2rem;*/
                    background-color: var(--c-pink-30);
                    border-radius: var(--br-sml);
                    text-decoration: none;
                    color: var(--c-dark-90);
                    font-weight: 400;
                    &.active{
                        color: var(--c-white);
                        background-color: var(--c-base-100);
                    }
                    
                }
            }
        }
    }
}

.map-block{
    display: flex;

    background-color: var(--c-blush-20);
    min-height:600px;
    height: 100%;
    width: 100%;
    border-radius: var(--br-lrg);
    overflow: hidden;
    border: 3px solid var(--c-blush-20);
    /*iframe is used inside this element */
}


.no-mob{
    display: none !important;
}








/* ----------------------------- Page Specific ----------------------------- */
/* ------------------------------------------------------------------------- */

/* ----------------------- Home ------------------ */

/* ----------------------- About ------------------ */

/* TEAM */

/* Tabs ------------------------------ */

.tabs-wrap{
    .tabs{
        padding:0 0 var(--sp-2xl) 0;
        display: flex;
        flex-wrap: wrap;
        gap: var(--sp-gap-med);
        justify-content: center;
        align-items: center;
        .tabLink{
            padding: var(--sp-xs) var(--sp-base);
            &.active{
                font-weight: var(--fw-bold);
                border-bottom: 2px solid var(--c-base-100);
            }
        }
    }
    .tab-content{
        text-align: left;
        .person{
            img{
                width: 100%;
                aspect-ratio: 1/1;
                background-color: var(--c-blush-20);
            }

            .person-details{
                padding: var(--sp-base);
                background-color: var(--c-pink-30);
                border-radius: 0 0 var(--br-med) var(--br-med);
                h5{
                    width: 100%;
                }
                p{
                    width: 100%;
                }
            }
            
        }
    }
}

/* ----------------------- Get Inv ------------------ */

/* ----------------------- Sermons ------------------ */

/* -- Sermon Instance page -- */
.sermon-block{
    text-align: left;

    h4{
        margin-bottom: var(--sp-h4-mar);
    }

    .video-wrap{
        display: block;
        width: 100%;
        aspect-ratio: 16/9;
        /*background-color: var(--c-blush-20);*/
        margin-bottom: var(--sp-h3-mar);
    }

    /* Responsive Youtube video */

    .video-container{
    overflow: hidden;
    padding-bottom: 56.25%;
    position:relative;
    width:100%;
    height:0;
    margin-bottom: 2rem;

        iframe{
            left:0;
            top:0;
            height:100%;
            width:100%;
            position: absolute;
        }

    }

    .audio-wrap{
       display: block;
       width: 100%; 
       /*background-color: var(--c-blush-20);*/
    }
}


/* ----------------------- Mission ------------------ */

/* ----------------------- Give ------------------ */

/* ----------------------- Contact ------------------ */

.p-bl-content{
    h4{
        margin-bottom: var(--sp-xs);
    }
    p{
        margin-bottom: var(--sp-xs);
    }
}

.office-hrs-grid{
    display: grid;
    grid-template-columns: 1fr 150px;
    font-size: var(--fs-base);
    gap: var(--sp-gap-sml);
    .day{
        font-family: var(--f-header);
        font-weight: var(--fw-bold);
        font-size: calc(var(--fs-base) + 0.05rem);
    }
}

/* Form ------------- */

form{
    width: 100%;
    text-align: left;

    label{
        display: block;
        width: 100%;
        font-family: var(--f-header);
        font-weight:  calc(var(--fw-reg)-100);
        margin-bottom: var(--sp-xs);
    }

    input, textarea{
        width: 100%;
        padding: var(--sp-l);
        border: 1px solid var(--c-grey-90);
        font-size: calc(var(--fs-base) + 0.25rem);
        font-family: var(--f-body);
        font-weight:  var(--fw-reg);
        border-radius: var(--br-sml);
        margin-bottom: var(--sp-base);
    }
    textarea{
        min-height: 250px;
    }

    span.info{
        font-size: var(--fs-base);
        font-weight:  var(--fw-semi);
    }
}
input[name="nospam"] { display: none; }

/* ----------------------- Visit ------------------ */



/* ---------------------- Scroll Animation ------------------ */

    .anim-in{
        scale:0.95;
        opacity:0;
        transform:translateY(100px);
        animation: scroll-in ease forwards;
        animation-timeline: view();
        animation-range: cover 12.5rem contain 10rem ;
    }


    @keyframes scroll-in {
        to{
            scale:1;
            opacity:1;
            transform:translateY(0) ;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .anim-in{
            scale:1;
            opacity:1;
            transform:translateY(0);
            animation: none;
        }
    }

.span-grid{
    grid-column: 1 / -1;
}


/* ------------------------------------------------------------------------- */
/* ----------------------------- Media Queries ----------------------------- */
/* ------------------------------------------------------------------------- */


/* -----------------------------  VERY SMALL DEVICES: Start ----------------------- */

@media only screen and (max-width:599px) {}

/* -----------------------------  VERY SMALL DEVICES: End ----------------------- */


/* -------------------------------- SMALL DEVICES: Start -------------------------- */

@media only screen and (min-width:600px) {

}
/* -------------------------------- SMALL DEVICES: End -------------------------- */


/* -------------------------------- MEDIUM DEVICES: Start -------------------------- */

@media only screen and (min-width:800px) {

    header{
        position:sticky;
        top: 0;
    }
    
    .sec-block-wrap{
       
        &.two-col{
            grid-template-columns: 1fr 1fr;
        }

        &.two-col-r-sb{
            grid-template-columns: 1fr 1fr;
            align-items: flex-start;
        }

        &.three-col{
            grid-template-columns: 1fr 1fr ;
            div:last-child{
                grid-column: span 2;
            }
        }

        &.four-col{
            grid-template-columns: 1fr 1fr;
        }

        &.five-col{
            grid-template-columns: 1fr 1fr 1fr;
            div:last-child{
                grid-column: span 2;
            }
        }

    }

}
/* -------------------------------- MEDIUM DEVICES: End -------------------------- */


/* -------------------------------- LARGE DEVICES: Start -------------------------- */

/* --- Large devices styles --- */
@media only screen and (min-width:1200px) {
    .mob-only{
        display: none !important;
    }
    
    .no-mob{
        display:flex !important;
    }
    .nav-wrap{
        justify-content: center !important;
    }

    .p-block{
        &.wide{
            grid-column: span 2;
        }
    }

    .small-text{
        font-size: calc(var(--fs-base) - 0.2rem);
    }

    .sec-pad{
        padding-top: var(--sp-sec-desk);
        padding-bottom: var(--sp-sec-desk);
    }

    .sec-pad-top{
        padding-top: var(--sp-sec-desk);
    }

    .sec-pad-bottom{
        padding-bottom: var(--sp-sec-desk);
    }
}

/* -------------------------------- LARGE DEVICES: End -------------------------- */


/* -------------------------------- LARGER DEVICES: Start -------------------------- */

@media only screen and (min-width:1350px) {
    .sec-block-wrap{
        width: 100%;
        display: grid;
        gap:var(--sp-gap-lrg);
        /*padding: 1rem 0;*/

        &.two-col{
            grid-template-columns: 1fr 1fr;
        }

        &.two-col-r-sb{
            grid-template-columns: 2.5fr 1fr;
        }

        &.image-text-block{
            display: flex;
            justify-content: center;
            gap: calc(var(--sp-gap-lrg) + 1rem);

            .sec-img{
                width:100%;
                display: flex;
                align-items: center;
                overflow: visible;
                max-width: 40%;
                flex-grow: 1;

                span{
                    
                    position: relative;
                    &::before{
                        top:-7rem;
                        left:3rem;
                        width: 8rem;
                    }
                    &::after{
                        display: block;
                        bottom:-7rem;
                        right:3rem;
                        width: 8rem;
                    }
                }
            }
            .sec-text{
                align-self: center;
                flex-grow: 2;
                width: 100%;
                h4{
                   margin-bottom:var(--sp-2xl); 
                }
                p{
                    margin-bottom:var(--sp-2xl);
                    &:last-child{
                        margin-bottom: 0;
                    }
                }
            }

            &.left{
                flex-direction: row;
            }
            &.right{
               flex-direction: row-reverse;
            }
            
        }

        &.three-col{
            grid-template-columns: 1fr 1fr 1fr;
            div:last-child{
                grid-column: span 1;
            }
        }

        &.four-col{
            grid-template-columns: 1fr 1fr 1fr 1fr;
        }

        &.five-col{
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
            div:last-child{
                grid-column: span 1;
            }
        }

        

    }

    footer {
        font-size: calc(var(--fs-base) - 0.2rem);
    }
}

/* -------------------------------- LARGER DEVICES: End -------------------------- */


/* -------------------------------- XL DEVICES: Start -------------------------- */

@media only screen and (min-width:1600px) {}

/* -------------------------------- XL DEVICES: End -------------------------- */