/* ==========================================================
   Bailey's Grove Baptist Church Website
   Main Stylesheet
========================================================== */


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


* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


:root {

    --blue:#173A63;

    --gold:#B38B59;

    --dark:#222;

    --white:#ffffff;

    --gray:#777;

    --light:#f5f5f5;

}



body {

    font-family: Arial, Helvetica, sans-serif;

    color:var(--dark);

    line-height:1.6;

}



section {

    padding:75px 20px;

}



h2 {

    text-align:center;

    font-size:2rem;

    margin-bottom:30px;

}



p {

    font-size:1.05rem;

}





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


header {

    width:100%;

    background:white;

}



nav {

    padding:20px;

    text-align:center;

}



.logo {

    color:var(--blue);

    font-size:1.4rem;

    font-weight:bold;

    margin-bottom:20px;

}



.nav-links {

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:10px;

    list-style:none;

}



.nav-links a {

    display:block;

    background:var(--blue);

    color:white;

    text-decoration:none;

    padding:12px 15px;

    border-radius:8px;

    font-size:.85rem;

}



.nav-links a:hover {

    background:var(--gold);

}







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


.hero {

    height:90vh;

    min-height:600px;

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

}



.hero-image {

    position:absolute;

    inset:0;

    background:#777;

}



.placeholder {

    height:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:white;

    text-align:center;

    border:2px dashed white;

    padding:30px;

}



.hero-overlay {

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.45);

}



.hero-content {

    position:relative;

    color:white;

    text-align:center;

    max-width:850px;

    padding:20px;

}



.hero-content h1 {

    font-size:2.8rem;

    line-height:1.15;

    margin-bottom:25px;

}



.hero-content p {

    margin-bottom:35px;

}







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


.button {

    display:inline-block;

    background:var(--gold);

    color:white;

    text-decoration:none;

    padding:15px 30px;

    border-radius:8px;

}





/* =========================
   INTRO SECTION
========================= */


.intro {

    text-align:center;

    max-width:900px;

    margin:auto;

}



.text-link {

    display:inline-block;

    margin-top:25px;

    color:var(--blue);

    font-weight:bold;

}







/* =========================
   MINISTRY CARDS
========================= */


.ministries {

    background:var(--light);

}



.section-description {

    text-align:center;

    margin-bottom:40px;

}



.ministry-grid {

    display:grid;

    grid-template-columns:1fr;

    gap:25px;

}



.ministry-card {

    background:white;

    border-radius:15px;

    overflow:hidden;

}



.photo-placeholder {

    height:240px;

    background:#777;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

}



.ministry-card h3 {

    padding:20px;

    text-align:center;

}







/* =========================
   MISSION
========================= */


.mission {

    text-align:center;

}







/* =========================
   INVITATION
========================= */


.invitation {

    text-align:center;

    background:var(--light);

}







/* =========================
   INNER PAGES
   About / History / Contact
========================= */



.page-hero {

    height:55vh;

    min-height:400px;

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}



.page-hero-image {

    position:absolute;

    inset:0;

    background:#777;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

}



.page-overlay {

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.45);

}



.page-title {

    position:relative;

    color:white;

    text-align:center;

    padding:20px;

}



.page-title h1 {

    font-size:3rem;

    margin-bottom:15px;

}





.content-section {

    max-width:900px;

    margin:auto;

    text-align:center;

}



.content-section p {

    margin-bottom:25px;

}



.content-section.light {

    background:var(--light);

    max-width:none;

}



.content-section.light p {

    max-width:900px;

    margin:0 auto 25px;

}







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


footer {

    background:#111;

    color:white;

    text-align:center;

    padding:50px 20px;

}







/* =========================
   DESKTOP
========================= */


@media(min-width:768px){


    nav {

        display:flex;

        justify-content:space-between;

        align-items:center;

    }


    .logo {

        margin-bottom:0;

    }



    .nav-links a {

        font-size:1rem;

        padding:12px 20px;

    }



    .hero-content h1 {

        font-size:4rem;

    }



    .ministry-grid {

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

    }

}
/* =========================
   HISTORY TIMELINE
========================= */


.timeline {

    padding:75px 20px;

    background:var(--light);

}



.timeline-item {

    max-width:900px;

    margin:0 auto 50px;

    background:white;

    border-radius:15px;

    overflow:hidden;

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

}



.timeline-photo {

    height:250px;

    background:#777;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:20px;

}



.timeline-text {

    padding:25px;

    text-align:center;

}



.timeline-text h3 {

    color:var(--blue);

    font-size:1.8rem;

    margin-bottom:15px;

}
/* =========================
   WHAT TO EXPECT PAGE
========================= */


.expect-grid {

    display:grid;

    grid-template-columns:1fr;

    gap:30px;

    padding:75px 20px;

}



.expect-card {

    background:white;

    border-radius:15px;

    overflow:hidden;

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

}



.expect-photo {

    height:230px;

    background:#777;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:20px;

}



.expect-card h3 {

    text-align:center;

    color:var(--blue);

    padding:20px 20px 10px;

}



.expect-card p {

    padding:0 25px 25px;

    text-align:center;

}





.service-times {

    text-align:center;

    background:var(--light);

}



.times {

    display:flex;

    flex-direction:column;

    gap:25px;

    max-width:500px;

    margin:auto;

}



.times p {

    background:white;

    padding:25px;

    border-radius:12px;

}





.bus-section {

    text-align:center;

}
/* =========================
   CONTACT PAGE
========================= */


.leader-section {

    padding:75px 20px;

}



.leader-section.light {

    background:var(--light);

}



.leader-card {

    max-width:900px;

    margin:auto;

    background:white;

    border-radius:15px;

    overflow:hidden;

}



.leader-photo {

    height:300px;

    background:#777;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

}



.leader-info {

    padding:30px;

    text-align:center;

}



.leader-info h3 {

    color:var(--blue);

    margin-bottom:20px;

}



.contact-info {

    text-align:center;

}



.contact-info p {

    margin-bottom:25px;

}
/* =========================
   BUS MINISTRY PAGE
========================= */


.bus-routes {

    padding:75px 20px;

    background:var(--light);

}



.bus-grid {

    display:grid;

    grid-template-columns:1fr;

    gap:30px;

}



.bus-card {

    background:white;

    border-radius:15px;

    overflow:hidden;

    text-align:center;

    padding-bottom:30px;

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

}



.bus-photo {

    height:250px;

    background:#777;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:20px;

}



.bus-card h3 {

    color:var(--blue);

    margin:25px 0 15px;

}



.bus-card p {

    padding:0 25px;

    margin-bottom:20px;

}