/* Google Material Design inspired CSS */

/* Typography */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
/* html {background-color: white;height: 100%;display: fixed;} */
body {
    font-family:'poppins','Raleway','Georgia', 'Times New Roman', Times, serif;
    background-color: rgb(247 247 247 /1);
    /* background-color: #fff; */
    color: #212121;
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
    /* line-height: 1.2; */
    /* color: #333333; */
    margin-bottom: 0rem;
    margin-top: 0;
}

p {
    font-size: 1rem;
    line-height: 1.6;
    color: #616161;
    margin-bottom: 1rem;
}

a {
    color: #1e88e5;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Images and Figures */
img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 8px;
}

figure {
    margin: 0;
    padding: 0;
    text-align: center;
}

figcaption {
    font-size: 0.875rem;
    color: #757575;
}

/* Layout Elements */
div, section, article, aside {
    /* background: #ffffff; */
    /* margin: 1rem 0; */
    /* padding: 1rem; */
    /* border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
    font-size: inherit;
}

/* Blockquote */
blockquote {
    font-size: 1.25rem;
    font-style: italic;
    color: #424242;
    border-left: 4px solid #1e88e5;
    padding-left: 1rem;
    margin: 1rem 0;
}

/* Forms */
input, select, button, textarea {
    display: block;
    width: 100%;
    padding: 0.5rem;
    margin-bottom: 1rem;
    border: 1px solid #cccccc;
    border-radius: 4px;
    font-size: 1rem;
    color: #424242;
    background-color: #ffffff;
}

input:focus, select:focus, button:focus, textarea:focus {
    border-color: #1e88e5;
    outline: none;
    box-shadow: 0 0 0 4px rgba(30, 136, 229, 0.2);
}

button, input[type="submit"] {
    background-color: #1e88e5;
    color: #ffffff;
    border: none;
    cursor: pointer;
    font-weight: 500;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
}

button:hover, input[type="submit"]:hover {
    background-color: #1565c0;
}

input[type="radio"], input[type="checkbox"] {
    display: inline-block;
    width: auto;
    margin-right: 0.5rem;
}

/* Material Card Style for sections, articles, asides */
.card {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* padding: 1rem; */
    margin: .5rem 0;
}

/* Utility Classes */
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.pt-1 { padding-top: 1rem; }
.pt-2 { padding-top: 2rem; }
.pb-1 { padding-bottom: 1rem; }
.pb-2 { padding-bottom: 2rem; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

/* Optional: Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');

#app {
    /* display: flex;
    flex-direction: column; */
    height: 100vh;
}

header, footer {
    background-color: #a52a2a;
    color: #fff;
    /* text-align: center; */
    padding: .5rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

header {
    display: flex;
    align-items: center;
    gap: 10px;
    position: fixed;
    width: 100%;
    /* padding: 20px; */
    span.icon {
        display: flex;align-items: center;justify-content: center;color: #fff;background-color: #424242;padding: 8px;border-radius: 50%;
    }
    #toggleNav {cursor: pointer;}
}

#overlay {
    display: none;
    position: fixed;
    top: 50px;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1;
}

footer {position: fixed;bottom: 0;width:calc(100% - 300px);
    .footer_items{
        display: flex;gap: 20px;align-items: center;justify-content: space-around;font-size: .9em;
        .footer_item {
            display: flex;flex-direction: row;align-items: center;gap: 5px;
        }
    }
}

nav {
    background-color:#fefefe;/* rgb(60, 60, 60);*/
    width: 300px;
    /* padding: 1rem; */
    color: #616161;
    position: fixed;
    top: 50px;
    bottom: 0;
    /* left: -240px; */
    overflow-y: auto;
    box-sizing: border-box;
    transition: left 0.3s ease;
    z-index: 1;

    .menuItems {
        /* padding: 1rem; */
        ul li {padding: 15px;padding-left: 20px;font-size: 1rem;color: #757575;font-family: 'Raleway';}
    }

    .userProfile {
        margin: 10px;;
        text-align: center;

        img {width: 60px;border-radius: 50%;margin-bottom: 10px;}
    }
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    cursor: pointer;
    padding: 0.5rem 0;
    /* border-bottom: 1px solid #bfbfbf; */
    font-size: 0.85em;

    .icofont {background-color: brown;color: #fff;padding: 10px;border-radius: 50%;margin-right: 5px;font-size: 1.2em;box-shadow: 0 0 10px rgba(241, 243, 241, 0.1);}
}
nav ul li:last-child {
    border-bottom: 0px solid #e2dfdf;
}

#topPage {margin-top: 50px;display: grid;grid-template-columns: 8fr 4fr;gap: 20px;margin-bottom: 24px;padding: 10px;}
.featuredRight {display: grid;grid-template-columns: 1fr}

.recent_articles {
    border-radius: 8px;margin-bottom: 20px;

    .recent_article {box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);border-radius: 8px;display: grid;gap: 10px;align-items: center;background-color: #fff;grid-template-columns: 50% 50%;margin-bottom: 18px;}
}
.geehoo {
    background-color: #fff;padding: 20px;border-radius: 15px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);margin: 10px;
}

.geehoo_items {display: grid; gap: 20px;grid-template-columns: 90px 1fr;}

.footer {
    bottom: 0;width: 100%;background-color: brown;padding: 20px;color: #fff;margin-top: 48px;display: grid;grid-template-columns: 2fr 1fr;padding-bottom: 48px;gap: 30px;box-sizing: border-box;
}

/* sunday landing page section */
.sundayschoolcontainer, .articlescontainer {
    padding: 20px;
}
.sundayschoolguides {
    display: grid;grid-template-columns: repeat(auto-fill,minmax(240px,1fr));gap: 20px;

    .sundayschoolguide {
        border: 0px solid;
        background-color: #fff;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);border-radius: 10px;
    }
}

.sundayschoolheader {position: absolute;bottom: 0px;padding: 10px;background-color: #a52a2a;width: 100%;color: #fff;text-align: center;}

.sundayschoollesson {
    display: flex;flex-direction: column;height: 100%;border: 1px solid #f1f1f1;padding: 10px;box-sizing: border-box;justify-content: center;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);align-items: center;
}
.sundayschoolcontent {
    padding: 10px; text-align: center;margin: 10px;display: grid;grid-template-columns: 3fr 9fr;gap: 10px;align-items: center;
}
.lessonNo {
    color: #fff;background-color: #a52a2a;width: 48px;height: 48px;display: flex;align-items: center;justify-content: center;border-radius: 50%;font-size: 24px;font-weight: bold;
}

/* bible study and articles/series landing page section */
.biblestudies {
    display: grid;grid-template-columns: repeat(auto-fill,minmax(240px,1fr));gap: 20px;box-sizing: border-box;box-sizing: border-box;padding: 20px;

    .biblestudy {
        background-color: #fff;border-radius: 10px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

        .studyTitle {
            font-weight: 700;line-height: 1.5;text-transform: uppercase;text-align: center;margin-bottom: 18px;color: brown;
        }
    }
}

.articles {
    display: grid;grid-template-columns: repeat(auto-fill,minmax(240px,1fr));gap: 20px;box-sizing: border-box;box-sizing: border-box;

    .article {
        background-color: #fff;border-radius: 10px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

        .articleTitle {
            font-weight: 700;line-height: 1.5;text-transform: uppercase;text-align: center;margin-bottom: 18px;color: brown;
        }
    }
}

.pagecontainer2 {background-color: #fff;padding:20px;max-width:700px;width:100%;margin-top:-40px;margin-left:auto;margin-right:auto;border-top-left-radius:10px;border-top-right-radius:10px;box-sizing:border-box;}

.outcontainer{display: grid;grid-template-columns:1fr 240px;}

@media screen  and (max-width:768px)
{
    .pagecontainer2{margin-left: 20px;margin-right: 20px;box-sizing: border-box;}
    .outcontainer{grid-template-columns: 1fr;}
    .outcontainer_left {display: none;}
    
    .footer {grid-template-columns: 1fr;}
    .geehoo_items {grid-template-columns: 1fr;align-items: center;}
    .recent_articles {
        display: grid;grid-template-columns: 1fr 1fr;gap: 10px;

        .recent_article {box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);border-radius: 8px;display: grid;gap: 10px;align-items: center;background-color: #fff;grid-template-columns: 30% 70%;margin-bottom: 18px;}
    }
    .navigation_bar {display: none;}
    #topPage {
        grid-template-columns: 1fr;
    }
    .featuredRight {
        display: grid;grid-template-columns: 1fr;gap: 20px;
    }
}

@media screen  and (max-width:480px)
{   
    .recent_articles {
        display: grid;grid-template-columns: 1fr
    }
    /* .navigation_bar {display: none;}
    #topPage {
        grid-template-columns: 1fr;
    }
    .featuredRight {
        display: grid;grid-template-columns: 1fr;gap: 20px;
    } */
}

#pages {
    flex: 1;
    overflow-y: auto;
    margin-left: 300px;
    margin-right: 300px;
    /* width: 60%;
    width: 100%; */
    border: 1px solid;
    box-sizing: border-box;
    .pagecontainer {
        /* max-width: 1024px; */
        max-width: 640px;
        margin: 0 auto;
        /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
        height: 100%;
        min-height: 100%;
        box-sizing: border-box;

        .openheaven-header{padding: 2rem 1rem;display: flex;align-items: flex-end;width: 100%;text-align: right;
            border: 0px solid #ccc;width: 100%;
        }
        .chapter-list {padding: 0rem;}
        .topic_container {cursor: pointer;padding: 0;}
        .topic_container .topic_content {display: flex;align-items: center;gap: 10px;
            .topicDate {display: flex;flex-direction: column;justify-content: center;align-items: center;background-color: #757575;color: white;padding:5px;box-sizing:border-box;
                .topicDate_day{display: flex;align-items: center;height:36px;width: 36px;font-weight: 700;justify-content: center;}

                .topicDate_month {font-size: inherit;}
            }
            
            .openheaven_topic {flex: 1;width: 100%;margin-bottom: 0;}
        }

        .page_innercontent {padding: 0rem 1.5rem 2rem;padding-bottom: 60px;max-width: 768px;margin-left:auto;margin-right:auto;
            .readthis {display: flex;justify-content: space-between;gap: 30px;margin: 24px 0px 24px;padding: 0px 20px;border: 1px solid #cdcdcd;}
            .letsdiscuss {display: flex;align-items: center;gap: 30px;padding: 0 10px;cursor: pointer;}

            p.intro {
                line-height: 1.2;font-size: 1.2em;padding:20px 10px 0px;font-family: 'Poppins';text-align: center;
            }
            p.intro::first-letter {
                /* float: left; */
                /* padding: 4px 8px 3px 0; */
                font-family: Georgia, "Times New Roman", Times, serif;
                font-size: 1.6em;font-style: italic;
                color: #903;
                font-weight: bolder;
              }
            .pageheader {display: flex;justify-content: space-between;padding: 10px;border: 1px solid #f1f3f8;align-items: center;margin-top: 10px;background-image:linear-gradient(rgba(9,5,43,0.3),rgba(5,4,46,0.7)), url(/images/social1.jpg);padding: 20px;background-size: cover;color: white;height: 200px;max-height: 180px;box-sizing: border-box;background-position: center;text-align: center;align-items: center;justify-content: center;margin-left: -25px;margin-right: -25px;}
            #biblestudies {
                display: grid;grid-template-columns: repeat(auto-fill,minmax(300px,1fr));column-gap:30px;
                .biblestudy{
                    display: grid;grid-template-rows:120px 140px;border-radius: 5px;cursor: pointer;

                    .studytop{display: flex;height: 100%;justify-content: center;align-items: flex-end;border: 0px solid #1e88e5;}

                    .studybottom {
                        padding: 10px;height: 100%;display: flex;flex-direction: column;justify-content: flex-end; 

                        h3.studytopic, h4.studytopic, h5.studytopic {text-align: center;color: #666464;padding: 10px;}
                        
                    }
                    .studyreference {
                        display: flex;flex-direction: column;align-items: center;justify-content: center;}

                        .lessonno {display: flex;width: 36px;height: 36px;background-color: #666464;color: #fff;justify-content: center;align-items: center;border-radius: 50%;font-style: italic;font-weight: 700;margin-top: 10px;}
                }
            }
            .study-item {
                display: flex;
                justify-content: space-around;
                align-items: center;
                padding-top: 10px;
                gap: 10px;
                border: 0px solid;
                cursor: pointer;
            }

            /* .study-item:hover {
                background-color: #f1f3f8;
                color: white;
                border-radius: 8px;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            } */
            
            .lesson-number {
                font-size: 18px;
                color: #212121;
                width: 36px;
                height: 36px;
                font-weight: 700;
                /* border: 1px solid; */
                display: flex;
                align-items: center;
                justify-content: center;
                /* border-radius: 50%; */
            }
            
            .study-info {
                flex-grow: 1;
                padding-left: 10px;
                padding-bottom: 8px;
                padding-right: 5px;
                border-bottom: 1px solid #f1f3f8;
            }
            
            .study-title {
                margin: 0;
                font-size: 16px;
            }
            
            .study-reference {
                margin: 0;
                font-size: 14px;
                color: gray;
            }
            
            .delete-btn {
                background: none;
                border: none;
                color: #333;
                font-size: 24px;
                cursor: pointer;
            }
        }

        .openheaventitle {text-align: right;padding: 10px;margin-bottom: 0px;
            small {display: block;font-style: italic;padding: 5px}
        }

    }
    
    ol.upper-alpha{
        list-style: upper-alpha;padding: 18px;
        li ol {list-style: lower-alpha;padding: 18px;line-height: 1.3
            ;}
    }

    ul#bookChapterList li {list-style-type:none;}
    .highlight {
        background-color: yellow;
        padding: 10px;
    }
}

#recent-chats{
    width: 20%;
}
.page {
    display: none;
    height: 100%;background-color: white;
}

.page.active {
    display: block;
}

.heroSection{
    margin-bottom: 24px;
    /* display: grid;grid-template-columns: 8fr 4fr;gap: 10px; */
    .openheaven{
        padding: 10px;
        /* padding-top: 0; */
        /* background-color: #f1f3f8; */
        position: relative;
        box-sizing: border-box;
        .openheavenheader {border-top-left-radius: 10px;border-top-right-radius: 10px;}
        h2.openheaventitle {margin-bottom: 18px;text-align: center;padding: 10px;margin-bottom: 0;}
        p{
            line-height: 1.5;
            font-size: 0.85em;
        }

        .openheavenTopic {text-align: center;margin-bottom: 12px;}
        .openheavenDate {text-align: center;}

        .memorise {
            padding: 18px;
            font-style: italic;
            .bibleref {
                font-weight: 700;
                text-align: right;
            }
        }
    }

    .openheaven::before {
        content: '';
        width: 30px;
        height: 30px;
        border-top: 5px solid #424242;
        border-left: 5px solid #424242;
        /* border-radius: 30px; */
        position: absolute;
    }

}

#herosection {display: grid;grid-template-columns: 1fr 1fr;gap: 20px;align-items: center;justify-content: flex-end;margin: 24px 0;}
/* .todaysopenheavens {} */
.openheavensimage {background-image: url(/images/pastor-adeboye.jpg);background-size: cover;background-position: center center;}
.openheavens-title {font-size: 0.9em;text-align: center;}
.openheavens-topic {font-family: Georgia, 'Times New Roman', Times, serif;color: #757575;text-align: center;margin-bottom: 0;}
.bibletextdate {font-size: 0.85em;display: flex;justify-content: space-between;}
.featured {
    font-size: inherit;

    .featuredTitle {color: brown;line-height: 1.2;font-size: 18px;font-weight: normal;}

    .featuredContents{
        display: grid;grid-template-columns: repeat(auto-fit,minmax(140px,1fr));gap: 20px;margin-top:10px;

        .featuredContent {
            display: grid;
            height: 240px;
            /* width: 160px; */
            grid-template-rows: 45% 55%;            
            h2,h3,h4 {text-align: center;}
            cursor: pointer;

            .featuredImage {
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;

            }

            .featureDescription {
                padding: 20px;display: flex;flex-direction: column;justify-content: space-between;align-items: center;align-content: center;

                p {font-size: 0.85em;line-height: 1.3;}
            }
        }
    }
}

.studies_container {
    display: grid;grid-template-columns: repeat(auto-fill,minmax(300px,1fr));gap:20px;
    .study_item .card{
        display: grid;grid-template-columns: 2fr 3fr;gap: 0px;
    }

    .studyTitle {color: brown;}
    .studyimage {background-size: cover;}

    .studytopic {
        text-align: center;
        padding: 14px;background-color:#fefefe;
        min-height: 60px;

        h3{margin-bottom: 10px;font-size: 18px;color: brown;text-align: center;line-height: 1.3;}

        h4{margin-bottom: 10px;font-size: 16px;color: brown;text-align: center;line-height: 1.3}
    }
}

.sundayschoo1_container {display: grid;grid-template-columns: repeat(auto-fit,minmax(300px,1fr));gap: 10px;}
#chapter-title {
    margin-top: 0;
}

/* sunday school general styling */

#sundaySchoolManual {display:grid;gap: 10px;grid-template-columns: repeat(auto-fit,minmax(140px,1fr));}
.sstopic_container {display: grid;grid-template-columns: repeat(auto-fill,minmax(160px,1fr));gap:20px;
    .topic_item {
        display: grid;height: 160px;grid-template-rows: 60px 100px;border: 0px solid #222;cursor: pointer;

        .lessonno {padding: 10px;text-align: center;}
        .topic_item_title {border: 0px solid;text-align: center;display: flex;flex-direction: column;background-color: #f1f3f8;justify-content: center;color: #222;}
    }
}
.ss-header {display: grid;;gap: 20px;grid-template-columns: 3fr 9fr;align-items: center;margin-bottom: 18px;border: 0px solid #757575;padding-right: 20px;
    .lessonno {padding: 10px;border: 0px solid #757575;display: flex;flex-direction: column;background-color: #757575;color: #fff;}
    .lessontitle {display: flex;align-items: center;justify-content: center;text-align: center;flex-direction: column}
    .lessontitle span {display: block;width: 36px;height: 36px;display: flex;align-items: center;justify-content: center;background-color: #fff;color: #757575;border-radius: 50%;font-weight: 700;margin-top: 10px;}

    .ss-topic {text-align: right;}
}

.ss-memoryverse {padding: 18px;background-color: #f1f3f8;border-radius: 8px;margin-bottom: 18px;position: relative;}
.ss-memoryverse em {margin: 20px;position: relative;text-align: right;}
.memoryverse-ref {display: block;margin: 10px 10px 0 10px;text-align: right;}
blockquote p {font-size: 14px;line-height: 1.4;text-align: center;}
.lesson-intro {margin: 18px 0 9px;}
.text {line-height: 1.3;font-size: 15px;}

.further_container {
    background-color: white;    
}
.further_item {display: flex;gap: 20px;padding: 10px;margin: 10px 0px;background-color:#fafafa;}

.articleContainer {
    margin-top: -24px;background-color: #fff;

    h2.articleTitle {
        text-transform: uppercase;padding: 24px; text-align: center;line-height: 1.2;font-weight: 600;color: brown;font-family: 'Raleway';
    }
    .articleSubtitle {text-transform: uppercase;text-align: center;margin-bottom: 18px;color: brown;}

    h1,h2,h3,h4,h5{font-family: poppins;}
    p{font-family: poppins;}

    .bibleQuote {display: block;margin: 20px;text-align: center;font-weight: 600;font-style: italic;}
}

.articlePage {
    display: grid;grid-template-columns: repeat(auto-fit,minmax(140px,1fr));gap: 20px;

    .articlePage .topImage {height: 140px;background-position: center;background-size: cover;color: #fff;display: flex;align-items: center;justify-content: center;}

    .articlePageTitle {text-align: center;padding: 10px;font-weight: 600;}
    p.articlePageDesc{line-height: 1.3;font-size: .75em;text-align: center;}
}

#home-page {
    font: optional;

    .homePage-Top {margin-top: 24px;padding: 10px;}
    .appwelcome {margin: 18px 0px;display: flex;flex-direction: column;height: 100%;text-align: center; font-family: Georgia, 'Times New Roman', Times, serif;}
}

#chat-container {
    display: flex;
    flex-direction: column;
    height: 80vh;
    border: 1px solid #ddd;
}

#chat-header {
    background-color: #333;
    color: #fff;
    padding: 1rem;
    text-align: center;
}

#chat-area {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

#chat-form {
    display: flex;
    padding: 1rem;
}

#chat-input {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid #ddd;
}

#chat-form button {
    padding: 0.5rem 1rem;
    border: none;
    background-color: #333;
    color: #fff;
    cursor: pointer;
}

/* openheavens */
.openheavensHero {
    display: grid;grid-template-columns:2fr 2fr;box-sizing:border-box;border: 0px solid #ccc;width: 100%;
}

.thisweek {display: grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));margin:0 10px;gap:10px;box-sizing:border-box;}

.highlights {padding: 20px;display:grid;grid-template-columns:2fr 3fr;gap:20px;}

@media screen and (max-width : 768px) {
    .openheavensHero {grid-template-columns: 1fr;}
    .heroSection {grid-template-columns: 1fr;}
    #herosection {grid-template-columns: 1fr;}
    .openheaven-header{padding: 1rem;}
    footer {width: 100%;}
    #pages{margin-left: 0px;}
    #pages{margin-right: 0px;}
    nav {left: -300px;}
    .highlights {grid-template-columns: 1fr;justify-content: reverse-column;}
}

@media screen and (max-width : 1024px) {
    footer {width: 100%;}
}