/*
 Theme Name:   Responsive Blog Kit Child 
 Theme URI:    https://believinganyway.com
 Description:  A child theme of ResonsiveBlogily
 Author:       K.F. Lawson
 Author URI:   https://www.believinganyway.com
 Template:     responsiveblogily
 Version:      1.0.0
*/
/* General Layout */
#content-wrapper {
    display: flex;
    justify-content: center; 
    
}
body {
    background-color: #c7d1d8;
}


#main-content {
    width: 75%;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers the posts inside */
}


#sidebar-custom {
    width: 25% !important;
    display: block !important; /* Change from flex to block */
    justify-content: center;
    align-items: flex-start;
}
@font-face {
    font-family: 'Spicy Pizza';
    src: url('assets/fonts/Spicy Pizza.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Built Titling BD';
    src: url('assets/fonts/built titling bd.woff2') format('woff2'),
         url('assets/fonts/built titling bd.woff') format('woff'),
         url('assets/fonts/built titling bd.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

.recent-post,
.wide-post,
.grid-item {
    width: 100%;
    max-width: 750px; 
    text-align: center; 
}
.recent-title-wrapper {
    width: 98%;
    max-width: 98%;
    margin: 0 auto -40px auto;
    display: flex;
    justify-content: center;
}
.recent-post-header {
    width: 98%;
    max-width: 98%;
    margin: 0 auto -30px auto;
    display: block;
}


.recent-title {
    font-family: "Arial", sans-serif; 
    font-size: 28px;
    font-weight: bold;
    color: white;
    background: #1f2933; 
    padding: 8px 15px;
    text-align: center;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: 1px; 
    border: 8px solid #b08d57;
    margin: 0 auto 20px auto;
    margin-bottom: 50px;
}



/* Section 1: Most Recent Post */
.recent-post {
    border: 4px solid #142b4d;
    background: #eef3f7;
    padding: 20px;
    margin-bottom: 30px;
    width: 98%;
    max-width:98%;
}

.recent-post img {
    width: 100%;
    height: auto;
    display: block;
}

.post-content {
    padding: 15px;
}


.recent-post h2,
.wide-post h2 {
    font-size: 35px; 
}


.grid-item h2 {
    font-size: 25px;
}

h2 a {
    color: #1e6091;  
    text-decoration: none;
    transition: color 0.2s ease;
}



h2 a:hover {
    color: #888; /* Lighter gray when hovered */
}

p {
    font-size: 16px;
    line-height: 1.5;
}


.read-more {
    display: block;
    text-align: center;
    background: #142b4d;
    color: white;
    padding: 10px;
    margin-top: 10px;
    text-decoration: none;
}

.read-more:hover {
    background: #2b517f;
}

/* Section 2: Emotion-Based Buttons */
/* Emotion Section Styling */
.emotion-section {
    text-align: center;
    margin: 40px 0;
}

/* Emotion Section Title */
.emotion-title {
    font-size: 38px; 
    font-weight: bold;
    color: #1f2933; /* Gunmetal */
    text-align: center;
    line-height:0.8;

}


.emotion-title::after {
    content: "\A Click a feeling below for an Inspirational Verse!";
    white-space: pre;
    font-size: 28px; 
    display: block;
    margin-bottom: 40px;
    color: #6b7280;
}

/* Emotion Buttons Grid */
.emotion-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 buttons per row */
    gap: 15px;
    justify-content: center;
    max-width: 600px;
    margin: auto;
    margin-bottom: 60px; 
    font-family: 'Built Titling BD', sans-serif !important;
}

/* Base Button Styling */
.emotion-button {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 28px;
    letter-spacing: 1px;
    padding: 15px;
    border-radius: 8px;
    text-decoration: none;
    border: 3px solid;
    width: 100%;
    height: 60px; 
}


/* Elegant Blues (Top Row) */
.happy { border-color: #3A86FF; color: #3A86FF; } /* Bright Blue */
.angry { border-color: #1E6091; color: #1E6091; } /* Deep Royal Blue */
.sad { border-color: #0A369D; color: #0A369D; } /* Dark Navy Blue */

/* Contrasting Greens (Bottom Row) */
.thankful { border-color: #3E8E41; color: #3E8E41; } /* Vibrant Green (Thankful) */
.anxious { border-color: #2C6E49; color: #2C6E49; } /* Deep Forest Green (Anxious) */
.lonely { border-color: #14532D; color: #14532D; } /* Dark Evergreen (Lonely) */

/* Hover Effect */
.emotion-button:hover {
    background-color: rgba(0, 0, 0, 0.05); 
}



/* Section 4: Post Grid (2x3) */
.post-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
        width: 98%;
    max-width:98%;
    
}

.grid-item {
    border: 4px solid #1f3d23;
    background: #f7fdf7;
    padding: 15px;
}

.grid-item img {
    width: 100%;
    height: auto;
    display: block;
}
.grid-item .read-more {
    background: #1f3d23; 
    color: white;
    padding: 10px;
    display: block;
    text-align: center;
    text-decoration: none;
    margin-top: 10px;
}

.grid-item .read-more:hover {
    background: #5f734c; /* Slightly brighter on hover */
}

/* Sidebar Bible Generator */
.bible-verse-generator {
    background: #f9f9f9;
    font-family: Arial, sans-serif;
    font-size: 16px;
    padding: 15px;
    border: 4px solid #ccc;
    border-radius: 8px;
    margin: auto;
    text-align: center;
    align-items: left;
    box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.1);
        width: 95%;
    max-width:95%;
}
#verse {
            font-style: italic;
            margin: 10px 0;
        }
        #reference {
            font-weight: bold;
            margin-top: 10px;
}

/* Custom Mobile Navigation - Only Shows on Mobile */
@media screen and (max-width: 1024px) {
    .custom-mobile-nav {
        position: fixed;
        top: 10px;
        left: 15px; /* Aligns to left as preferred */
        z-index: 1000;
    }

    /* Hamburger Button */
    #mobile-nav-toggle {
        background: black;
        color: white;
        padding: 10px 15px;
        font-size: 18px;
        border: none;
        cursor: pointer;
        border-radius: 5px;
    }

    /* Navigation Menu */
    #mobile-nav-menu {
        display: none; /* Hidden by default */
        position: fixed;
        top: 50px;
        left: 0;
        width: 100%;
        background: white;
        border: 2px solid black;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
        z-index: 9999 !important; /* Ensures it appears above content */
    }

    /* Show Menu When Active */
    #mobile-nav-menu.active {
        display: block;
    }

    /* Menu List Styling */
    #mobile-nav-menu ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    /* Individual Menu Items */
    #mobile-nav-menu li {
        padding: 10px;
        border-bottom: 1px solid #ccc;
        text-align: center;
    }

    #mobile-nav-menu li:last-child {
        border-bottom: none;
    }

    /* Links */
    #mobile-nav-menu a {
        text-decoration: none;
        color: black;
        font-size: 16px;
        font-weight: bold;
        display: block;
    }

    #mobile-nav-menu a:hover {
        background: lightgray;
    }
}

/* Hides Mobile Menu on Desktop */
@media screen and (min-width: 1024px) {
    #mobile-nav-toggle, #mobile-nav-menu {
        display: none !important;
    }
}

/* Social Links Container */
.social-links-container {
    text-align: center;
    margin-top: 75px; /* Adds more space between Bible Verse Generator & title */
}

/* Social Links Title */
.social-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px; /* Adds space between title and buttons */
}

/* Social Grid - Adjusted Spacing */
.social-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 200px; /* Keeps buttons from stretching too far */
    margin: 0 auto;
}

/* Social Icons */
.social-grid a {
    width: 40px;
    height: 40px;
    display: inline-block;
    margin: 10px; /* Adds spacing between buttons */
 
}

/* Ensure Images Fit */
.social-grid img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    transition: transform 0.2s ease-in-out;
}

/* Hover Effect */
.social-grid img:hover {
    transform: scale(1.1);
}
@media screen and (max-width: 768px) {
    .social-links img {
        width: 32px !important; /* Adjust size for mobile */
        height: 32px !important;
    }
}
/* Apply Georgia only inside blog post content */
.single-post .entry-content,
.single-post .entry-content p,
.single-post .entry-title,
.single-post h1,
.single-post h2,
.single-post h3,
.single-post h4,
.single-post h5,
.single-post h6 {
  font-family: Georgia, serif !important;
}
.single-post .entry-content * {
  line-height: 1.5 !important;
}
.single-post .entry-content {
  margin-top: 40px; !important;
}

.bible-plan-promo.refined {
    background: #ffffff;
    border: 2px solid #b08d57;
    border-radius: 8px;
    padding: 20px 15px;
    margin: 40px auto 0 auto;
    width: 95%;
    max-width: 280px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    font-family: Arial, sans-serif;
    margin-top: 75px;
}

.bible-plan-promo.refined .promo-header {
    font-size: 16px;
    font-weight: bold;
    color: #1f2933;
    margin-bottom: 16px;
    line-height: 1.5;
}

.bible-plan-promo.refined .promo-subtext {
    font-size: 14px;
    color: #555;
    margin-bottom: 20px;
    line-height: 1.6;
}

.bible-plan-button.refined {
    display: inline-block;
    background: #1e6091;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    transition: background 0.2s ease;
}

.bible-plan-button.refined:hover {
    background: #3a86ff;
}