/*==================================================
REAL PENTECOST
More Than a Moment, A Life in the Spirit
Global Styles
==================================================*/

/*=========================
RESET
=========================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    background:#f8f6f1;

    color:#1f2933;

    font-family:"Lora",serif;

    font-size:1.125rem;

    line-height:1.9;

    overflow-x:hidden;

}

html,
body{

    width:100%;

    max-width:100%;

    overflow-x:hidden;

}

/*=========================
VARIABLES
=========================*/

:root{

    --midnight:#071726;

    --navy:#10273d;

    --gold:#dfae42;

    --gold-light:#f4c862;

    --ivory:#f8f6f1;

    --stone:#d8d2c8;

    --text:#24313d;

    --white:#ffffff;

    --shadow:0 20px 60px rgba(0,0,0,.08);

    --radius:18px;

    --transition:.35s ease;

}

/*=========================
IMAGES
=========================*/

img{

    max-width:100%;

    display:block;

}

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

a{

    text-decoration:none;

    transition:var(--transition);

    color:inherit;

}

/*=========================
CONTAINER
=========================*/

.container{

    width:min(1200px,90%);

    margin:auto;

}

.interior-page .welcome:first-of-type{

    padding-top:4rem;

}

/*=========================
TYPOGRAPHY
=========================*/

h1,
h2,
h3,
h4{

    font-family:"Playfair Display",serif;

    color:var(--midnight);

    line-height:1.2;

    margin-bottom:1.5rem;

}

h1{

    font-size:clamp(3rem,6vw,5rem);

}

h2{

    font-size:clamp(2rem,4vw,3.25rem);

}

h3{

    font-size:1.75rem;

}

p{

    margin-bottom:1.5rem;

    max-width:760px;

}

/*==================================================
NAVIGATION
==================================================*/

.navigation{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:1rem;

    z-index:9999;

    background:transparent;

    backdrop-filter:none;

    transition:.35s ease;
    
    

}

.navigation.scrolled{

    background:rgba(7,23,38,.85);

    backdrop-filter:blur(12px);

}

.navigation ul{

    display:flex;

    gap:2.5rem;

    list-style:none;

}

.navigation a{

    color:#ffffff;

    font-family:"Montserrat",sans-serif;

    font-size:.8rem;

    font-weight:600;

    letter-spacing:.12em;

    text-transform:uppercase;

    transition:color .3s ease;

}

.navigation a:hover{

    color:var(--gold);

}

.logo{

    font-family:"Playfair Display",serif;

    font-size:1rem;

    letter-spacing:.08em;

    font-weight:700;

}

.interior-page .navigation{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:1rem 3rem;

}


.menu-toggle{

    display:none;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:5px;

    width:42px;

    height:42px;

    background:none;

    border:none;

    cursor:pointer;

    margin-left:auto;

}

.menu-toggle span{

    width:28px;

    height:2px;

    background:#ffffff;

    transition:.3s ease;

}


/*==================================================
INTERIOR NAVIGATION
==================================================*/

.interior-nav{

    position:relative;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:1.5rem 3rem;

    background:#071726;

    border-bottom:1px solid rgba(223,174,66,.20);

}

.interior-nav a{

    color:#ffffff;

}

.interior-nav a:hover{

    color:#dfae42;

}

.interior-nav .logo{

    font-size:1.4rem;

    letter-spacing:.08em;

}

.interior-nav ul{

    display:flex;

    gap:2rem;

    list-style:none;

    align-items:center;

}

.interior-page .page-hero{

    padding-top:4rem;

}

/*==================================================
INTERIOR PAGES
==================================================*/

.interior-page .navigation{

    position:relative;

    background:#071726;

    backdrop-filter:none;

    border-bottom:1px solid rgba(223,174,66,.18);

    box-shadow:none;

}


/*==================================================
HERO
==================================================*/

.hero{

    position:relative;
    
    overflow:hidden;

    height:auto;

    min-height:0;

    padding:0;

    background-image:url("../../AB10370E-2A4D-4C9F-AEE8-569AA32E2202.png");

    background-repeat:no-repeat;

    background-position:center top;

    background-size:cover;
    
    background-size:contain;

    aspect-ratio:3 / 2;

}

.hero-image{

    display:block;

    width:100%;

    height:auto;

    vertical-align:middle;
    
    }

.hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        to bottom,

        rgba(7,23,38,.05),

        rgba(7,23,38,.18),

        rgba(7,23,38,.35)

    );

    pointer-events:none;

}

.page-hero h1{

    color:#ffffff;

    margin-bottom:1rem;

}

.page-hero p{

    color:#d8d2c8;

    margin:auto;

    max-width:700px;

}

/*==================================================
INTERIOR PAGE HERO
==================================================*/

.page-hero{

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:220px;

    padding:7rem 0 4rem;

    background:linear-gradient(
        180deg,
        #071726 0%,
        #10273d 100%
    );

    text-align:center;

}

/*=========================
SECTIONS
=========================*/

section:not(.hero){

    padding:8rem 0;

}

/*==================================================
WELCOME
==================================================*/

.welcome{

    background:#ffffff;

    padding:8rem 0;

}

.welcome .container{

    max-width:1200px;

}

.welcome h1{

    margin-bottom:2rem;

}

.welcome p{

    font-size:1.25rem;

    color:#4b5563;

    line-height:2;

}

.welcome .button{

    margin-top:2rem;

}

/*=========================
BUTTONS
=========================*/

.button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:1rem 2rem;

    background:var(--gold);

    color:var(--midnight);

    border-radius:999px;

    font-family:"Montserrat",sans-serif;

    font-weight:600;

    letter-spacing:.08em;

    text-transform:uppercase;

    transition:var(--transition);

}

.button:hover{

    background:var(--gold-light);

    transform:translateY(-3px);

}

/*==================================================
EXPLORE
==================================================*/

.explore{

    background:var(--ivory);

    padding:8rem 0;

}

.section-heading{

    text-align:center;

    max-width:700px;

    margin:0 auto 5rem;

}

.section-heading p{

    margin:auto;

    color:#6b7280;

}

.cards{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:2rem;

}

.card{

    background:#ffffff;

    padding:3rem;

    border-radius:20px;

    box-shadow:0 20px 50px rgba(0,0,0,.05);

    transition:.35s ease;
    
    height:100%;

}

.card:hover{

    transform:translateY(-8px);

}

.card h3{

    margin-bottom:1rem;

}

.card p{

    color:#6b7280;

    margin-bottom:2rem;

}

.text-link{

    font-family:"Montserrat",sans-serif;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:var(--gold);

    font-size:.9rem;

}

.text-link:hover{

    color:var(--midnight);

}
/*==================================================
FEATURED SCRIPTURE
==================================================*/

.featured-scripture{

    background:var(--midnight);

    padding:7rem 0;

    text-align:center;

}

.scripture-label{

    display:inline-block;

    margin-bottom:2rem;

    font-family:"Montserrat",sans-serif;

    text-transform:uppercase;

    letter-spacing:.25em;

    font-size:.8rem;

    color:var(--gold);

}

.featured-scripture blockquote{

    max-width:900px;

    margin:auto;

    font-family:"Playfair Display",serif;

    font-size:clamp(2rem,4vw,3.75rem);

    line-height:1.4;

    color:#ffffff;

    font-weight:600;

}

/*=========================
CONTINUE
=========================*/

.continue{

    background:var(--ivory);

}

.book-intro{

    display:grid;

    grid-template-columns:400px 1fr;

    gap:5rem;

    align-items:center;

}

.book-content{

    max-width:700px;
    padding-right:2rem;
}

.book-cover img{

    width:100%;

    border-radius:18px;

    box-shadow:0 30px 80px rgba(0,0,0,.18);

    transition:.4s ease;

}

.book-content h1{

    margin-bottom:1rem;

}

.subtitle{

    font-family:"Playfair Display",serif;

    font-size:1.4rem;

    color:#6b7280;

    margin-bottom:2rem;

}

/*==================================================
CHAPTER LIST
==================================================*/

.chapter-list{

    max-width:900px;

    margin:0 auto;

}

.chapter-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:2rem 0;

    border-bottom:1px solid rgba(7,23,38,.10);

    transition:.3s ease;

}

.chapter-item:hover{

    padding-left:1rem;

    border-color:var(--gold);

}

.chapter-number{

    font-family:"Montserrat",sans-serif;

    color:var(--gold);

    letter-spacing:.15em;

    margin-right:2rem;

    min-width:60px;

}

.chapter-title{

    flex:1;

    font-family:"Playfair Display",serif;

    font-size:1.5rem;

    color:var(--midnight);

}

.chapter-arrow{

    color:var(--gold);

    font-size:1.25rem;

}

/*==================================================
FOOTER
==================================================*/

footer{

    background:var(--midnight);

    color:#ffffff;

    padding:5rem 0 2rem;

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:4rem;

    align-items:start;

}

.footer-grid h3,
.footer-grid h4{

    color:#ffffff;

    margin-bottom:1.5rem;

}

.footer-grid p{

    color:rgba(255,255,255,.75);

    max-width:none;

    margin-bottom:0;

}

.footer-grid a{

    display:block;

    color:rgba(255,255,255,.75);

    margin-bottom:.9rem;

    transition:.3s ease;

}

.footer-grid a:hover{

    color:var(--gold);

}

.copyright{

    margin-top:4rem;

    padding-top:2rem;

    border-top:1px solid rgba(255,255,255,.12);

    text-align:center;

    color:rgba(255,255,255,.55);

    font-size:.9rem;

}

/*=========================
ANIMATIONS
=========================*/

.cards article,
.button{

    transition:.35s ease;

}

/*=========================
SCROLLED NAVIGATION
=========================*/

.navigation.scrolled{

    background:rgba(7,23,38,.96);

    box-shadow:0 10px 40px rgba(0,0,0,.25);

}

/*=========================
FADE UP
=========================*/

.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:all .8s ease;

}

.fade-up.visible{

    opacity:1;

    transform:translateY(0);

}

.book-cover{

    position:relative;

}

.book-cover img:hover{

    transform:translateY(-8px);

    box-shadow:0 40px 90px rgba(0,0,0,.22);

}



/*==================================================
RESPONSIVE
==================================================*/

/*------------------------------
LARGE TABLETS
------------------------------*/

@media (max-width:1200px){

    .container{

        width:92%;

    }

    .navigation{

        padding:1rem 2rem;

    }

    .navigation ul{

        gap:1.5rem;

    }

}

/*------------------------------
TABLETS
------------------------------*/

@media (max-width:992px){

    .container{

        width:90%;

    }

    .navigation{

        justify-content:flex-end;

        align-items:center;

        padding:1rem;

    }

    .logo{

        display:none;

    }

    .menu-toggle{

        display:flex;

        margin-left:auto;

    }

    .navigation ul{

        display:none;

    }
    
    .navigation ul.show{

    display:flex;

    flex-direction:column;

    position:fixed;

    top:70px;

    left:0;

    width:100%;

    height:calc(100vh - 70px);

    justify-content:flex-start;

    align-items:center;

    gap:2rem;

    padding-top:3rem;

    background:rgba(7,23,38,.97);

    backdrop-filter:blur(18px);

    z-index:9998;

}

    h1{

        font-size:3.5rem;

    }

    h2{

        font-size:2.5rem;

    }

    .cards{

        grid-template-columns:repeat(2,1fr);

    }

}

@media (max-width:900px){

    .book-intro{

        grid-template-columns:1fr;

        text-align:center;

        gap:3rem;

    }

    .book-cover{

        max-width:320px;

        margin:auto;
}

  .footer-grid{

        grid-template-columns:1fr;

        gap:3rem;

        text-align:center;

    }

    .footer-grid p{

        margin:0 auto;
    }

}

/*------------------------------
MOBILE
------------------------------*/

@media(max-width:768px){

    .navigation{

    justify-content:space-between;

    align-items:center;

    padding:1rem;

}

     .hero{

        aspect-ratio:16 / 10;

        background-size:contain;

        background-position:center top;

        background-repeat:no-repeat;
        
        min-height:240px;

    }

.logo{

    font-size:1rem;

}

.menu-toggle{

    display:flex;

    margin-left:auto;

}



.cards{

    grid-template-columns:1fr;

    gap:1.5rem;

}

.card{

    padding:2rem;

}

.section-heading{

    margin-bottom:3rem;

}

.card p{

    max-width:none;

}

.container{

    width:92%;

    max-width:100%;

}

.chapter-item{

    flex-direction:column;

    align-items:flex-start;

    gap:.75rem;

}

.chapter-title{

    font-size:1.25rem;

}

.chapter-arrow{

    display:none;

}

}

/*------------------------------
SMALL PHONES
------------------------------*/

@media (max-width:480px){

    .container{

        width:90%;

    }

    .navigation{

        padding:.75rem;

    }

    .navigation ul{

        gap:.5rem;

    }

    .navigation a{

        font-size:.7rem;

    }

    h1{

        font-size:2.5rem;

    }

    h2{

        font-size:2rem;

    }

    .welcome p{

        font-size:1.1rem;

    }

    .button{

        width:100%;

    }

}