/*
Theme Name: Faith Church
Theme URI: 
Author: patrickoslo
Author URI: https://webxthemes.com
Description: A warm, welcoming WordPress theme designed for churches, faith-based communities, and spiritual organizations looking to build a strong digital presence with ease. With its clean, modern layout and visually uplifting design, this theme offers an inviting experience for visitors, helping you share your mission and message effectively. Whether you’re promoting weekly services, faith-based events, or inspirational content, this theme provides dedicated sections to highlight your church's values, connect with your community, and grow engagement. The serene color palette and custom illustrations create an atmosphere of peace and trust—ideal for guiding hearts online. Complete with action buttons, a lead-generating landing section, and blog support for sermons or devotionals, this theme makes it simple to bring your faith online beautifully and impactfully—without the clutter.  
Version: 1.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: faith-church
Tags: blog, custom-background, custom-logo, custom-menu
*/

/* ========== Reset and Basic Styles ========== */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    margin-bottom: 1rem;
}

p {
    margin-bottom: 1rem;
}

a {
    color: #005756;
    text-decoration: underline;
}

a:hover {
    color: #B74F32;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.main-header {
    display: flex;
    justify-content: space-between;
}

.pce-home-page {
	overflow: hidden;
}

/* Footer style */
.faith-church-footer-wrap {
    background-color: black;
}
/* Style for WordPress image captions */
.wp-caption {
    max-width: 100%;
    margin-bottom: 1em;
    text-align: center;
    background: #f9f9f9;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.wp-caption img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

.wp-caption-text {
    font-size: 14px;
    color: #555;
    margin-top: 5px;
}

/* Gallery Caption */
.gallery-caption {
    font-size: 14px;
    color: #777;
    text-align: center;
    margin-top: 5px;
}

/* Author Comments */
.bypostauthor {
    border-left: 3px solid #0073aa;
    padding-left: 10px;
}

/* Image Alignments */
.alignright {
    float: right;
    margin-left: 15px;
    margin-bottom: 10px;
}

.alignleft {
    float: left;
    margin-right: 15px;
    margin-bottom: 10px;
}

.aligncenter {
    display: block;
    margin: 0 auto;
}

/* Post Pagination*/
.pagination {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 20px;
}

/* Remove extra empty boxes */
.pagination .page-numbers {
    display: inline-block;
    padding: 8px 12px;
    font-size: 16px;
    color: #000;
    background-color: #fff;
    border: 1px solid #005756;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease-in-out;
}

/* Active Page (Current Page) */
.pagination .page-numbers.current {
    background-color: #005756;
    color: #fff;
    font-weight: bold;
}

/* Hover Effects */
.pagination .page-numbers:not(.current):hover {
    background-color: #005756;
    color: #fff;
}

/* Hide "Next" and "Previous" Placeholder Boxes */
.pagination .prev,
.pagination .next {
    display: none;
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    word-wrap: normal !important;
}
.screen-reader-text:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    clip: auto;
    overflow: visible;
}

/* Navigation
--------------------------------------------- */
#masthead {
    position: relative;
    z-index: 10;
    border-bottom: 1px solid #ececec;
}

#masthead .container {
    position: relative;
}

#masthead a {
    text-decoration: none;
}

.site-branding {
    padding: 10px 50px 10px 0;
    display: flex;
    align-items: center;
    min-height: 90px;
}

.site-branding .site-logo,
.site-branding .site-details {
    display: inline-block;
    vertical-align: middle;
}

.site-branding .site-logo {
    margin-right: 15px;
}

.site-branding img {
    height: 80px;
    object-fit: cover;
    width: auto;
}

.site-branding .site-title {
    margin-bottom: 0;
    font-size: 26px;
    font-weight: 500;
}

.site-description {
    margin: 0;
}

.nav-menu {
    margin: 0;
    list-style: none;
}

.nav-menu li {
    list-style: none;
    -webkit-transition: background .3s ease;
    -ms-transition: background .3s ease;
    transition: background .3s ease;
}

.nav-menu li.menu-item-has-children>a {
    position: relative;
}

.nav-menu li a {
    display: block;
    color: #232323;
}

.nav-menu>li {
    display: inline-block;
    vertical-align: middle;
}

.nav-menu>li.menu-item-has-children {
    padding-right: 13px;
}

.nav-menu>li>a {
    position: relative;
    display: block;
    font-weight: 600;
    padding: 21px 0.5rem;
    color: #232323;
    letter-spacing: 0.5px;
    text-transform: capitalize;
}

.nav-menu li.current-menu-item>a,
.nav-menu li a:focus {
    color: #005756;
}
.nav-menu li a:hover{
    color: #005756;
}

.main-navigation>ul>li.menu-item-has-children>a:after {
    content: "";
    border-style: solid;
    border-width: 0 1px 1px 0;
    display: block;
    height: 6px;
    transform: rotate(45deg);
    width: 6px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
}

.main-navigation>ul>li.current-menu-item>a:after {
    border-color: transparent #000 #000 transparent;
}

.nav-menu ul {
    position: absolute;
    left: -9999px;
}

.main-navigation ul ul li {
    -webkit-transition: all .25s ease;
    -ms-transition: all .25s ease;
    transition: all .25s ease;
    margin-bottom: 12px;
    padding: 0 20px;
    display: block;
}

.main-navigation ul ul li:last-child {
    margin-bottom: 0;
}

.main-navigation ul ul li.active>a {
    color: #cfac9f;
}

.nav-menu li>ul {
    padding: 15px 0;
    margin: 0 0 0 10px;
    background: #fff;
    min-width: 225px;
    z-index: 1;
    -webkit-box-shadow: 0 10px 25px rgb(0 0 0 / 15%);
    -ms-box-shadow: 0 10px 25px rgb(0 0 0 / 15%);
    -moz-box-shadow: 0 10px 25px rgb(0 0 0 / 15%);
    box-shadow: 0 10px 25px rgb(0 0 0 / 15%);
}

.nav-menu li:hover>ul,
.nav-menu li.focus>ul {
    left: auto;
}

.nav-menu>li.menu-item-has-children>ul {
    opacity: 0;
    margin-top: 10px;
    -webkit-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}

.nav-menu>li.menu-item-has-children:hover>ul,
.nav-menu>li.menu-item-has-children.focus>ul {
    margin-top: 0;
    opacity: 1;
}

.nav-menu>li.menu-item-has-children:last-child:hover ul {
    left: inherit;
    right: 0;
}

.main-navigation li>ul ul {
    margin-top: -39px;
    margin-left: 200px;
    min-width: 200px;
}

.main-navigation li>ul ul ul {
    margin-left: 175px;
    min-width: 130px;
}

.main-navigation ul ul li:last-child>a,.main-navigation ul ul li.last-item>a {
    border-bottom: 0;
}

.main-navigation ul ul li.menu-item-has-children>a:after {
    content: "";
    position: absolute;
    top: 14px;
    right: -3px;
    width: 8px;
    height: 2px;
    display: block;
    background: #9d9d9d;
}

.main-navigation ul ul li.menu-item-has-children>a:before {
    position: absolute;
    top: 11px;
    right: 0;
    display: block;
    width: 2px;
    height: 8px;
    background: #9d9d9d;
    content: '';
    -webkit-transition: all .25s ease;
    -ms-transition: all .25s ease;
    transition: all 0.25s ease;
}

.main-navigation ul ul>li.menu-item-has-children:hover>a:before {
    top: 17px;
    height: 0;
}

.attr-nav {
    float: right;
}

.attr-nav .submenu-button:after {
    content: none;
}

.attr-nav>ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: inline-block;
    vertical-align: top;
}

.attr-nav>ul:last-child {
    margin-left: 25px;
}

/* Pagination
--------------------------------------------- */
.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
    margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
    display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
    flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
    text-align: end;
    flex: 1 0 50%;
}

/* Responsive
--------------------------------------------- */
@media screen and (min-width: 992px) {
 
    .main-navigation {
        float: right;
        margin: 15px 0;
    }

    .nav-menu {
        display: block !important;
    }

    .submenu-button,
    .main-navigation-toggle {
        display: none;
    }
}

@media screen and (min-width: 1024px) {
    .columns-5 article {
        width: 20%;
    }

    .customize-support.menu-sticky #masthead {
        top: 32px;
    }
    
    .menu-sticky #masthead {
        position: sticky;
        top: 0;
    }

    .blog-archive .entry-title {
        font-size: 32px;
    }

    .single .entry-title {
        font-size: 62px;
    }
}

@media screen and (max-width: 992px) {
    .nav-menu li>ul {
        -webkit-box-shadow: none;
        -ms-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }

    .main-navigation li>ul ul {
        margin: 0;
        min-width: auto;
    }

    .nav-menu>li.menu-item-has-children>ul {
        opacity: 1;
        margin: 0;
        -webkit-box-shadow: none;
        -ms-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        -webkit-transition: all 0s ease;
        -ms-transition: all 0s ease;
        -moz-transition: all 0s ease;
        -o-transition: all 0s ease;
        transition: all 0s ease;
    }

    .nav-menu>li.menu-item-has-children {
        padding-right: 0;
    }

    .nav-menu>li>a {
        padding: 12px 20px;
        color: #232323;
    }

    .nav-menu>li>a:hover {
        opacity: 1;
    }

    .nav-menu li.menu-item-has-children a:hover {
        color: #232323;
    }

    .main-navigation ul ul li.active>a {
        color: #000;
    }

    .main-navigation .sub-title {
        color: #232323;
    }

    .nav-menu {
        padding: 0;
        background: #fff;
        -webkit-box-shadow: 0 10px 25px rgb(0 0 0 / 15%);
        -ms-box-shadow: 0 10px 25px rgb(0 0 0 / 15%);
        -moz-box-shadow: 0 10px 25px rgb(0 0 0 / 15%);
        box-shadow: 0 10px 25px rgb(0 0 0 / 15%);
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        width: 100%;
        margin: 0;
        display: none;
        transition: none;
        -ms-transition: none;
        -moz-transition: none;
        -webkit-transition: none;
        -o-transition: none;
    }

    .nav-menu ul {
        width: 100%;
        display: none;
        transition: none;
        -ms-transition: none;
        -moz-transition: none;
        -webkit-transition: none;
        -o-transition: none;
    }

    .nav-menu li.active>a {
        opacity: 1;
        color: #000;
    }

    .nav-menu li {
        width: 100%;
        border-top: 1px solid #e6e6e6;
        position: relative;
        padding: 0;
        margin: 0;
    }

    .nav-menu li:hover>ul>li {
        height: auto;
    }

    .main-navigation ul li a {
        width: 100%;
    }

    .nav-menu ul li:hover {
        background: #f5f5f5;
    }

    .nav-menu ul ul li {
        height: auto;
    }

    .main-navigation ul ul {
        position: relative;
        left: 0;
        width: 100%;
        margin: 0;
        text-align: left;
        padding: 0;
    }

    .main-navigation ul ul li {
        margin-bottom: 0;
        padding: 0;
        border-color: #e6e6e6;
    }

    .main-navigation ul ul li a {
        width: 100%;
        border-bottom: 0;
        color: #232323;
        background: none;
        padding: 8px 30px;
    }

    .main-navigation ul ul ul li a {
        padding-left: 45px;
    }

    .main-navigation>ul>li {
        float: none;
    }

    .nav-menu ul ul {
        position: relative;
        left: 0;
        width: 100%;
        margin: 0;
        text-align: left;
        padding: 0;
    }

    .main-navigation>ul>li.menu-item-has-children>a:after,
    .main-navigation>ul>li.menu-item-has-children>a:before {
        display: none;
    }

    .main-navigation ul ul>li.menu-item-has-children>a:after,
    .main-navigation ul ul>li.menu-item-has-children>a:before {
        display: none;
    }

    .nav-menu ul ul ul li.active a {
        border-left: none;
    }

    .nav-menu>ul>li.menu-item-has-children>ul>li.active>a,.nav-menu>ul ul>li.menu-item-has-children>ul>li.active>a {
        border-top: none;
    }

    .main-navigation ul ul ul ul li a {
        padding-left: 55px;
    }

    .main-navigation li>ul ul ul {
        margin-left: 0;
        background: #fff;
    }

    .nav-menu .menu-item-has-children .menu-item-has-children .submenu-button {
        height: 47px;
    }

    .nav-menu .menu-item-has-children .menu-item-has-children .submenu-button:after {
        top: 21px;
    }

    .nav-menu .menu-item-has-children .menu-item-has-children .submenu-button:before {
        top: 18px;
    }

    .main-navigation-toggle {
        background: #B74F32;
        width: 40px;
        height: 35px;
        padding: 0;
        border-radius: 0;
        position: absolute;
        right: 15px;
        top: 30px;
        cursor: pointer;
        z-index: 1;
        border: none;
    }

    .main-navigation-toggle:hover,
    .main-navigation-toggle:focus {
        background-color: #000;
    }

    .main-navigation-toggle:after {
        content: "";
        position: absolute;
        top: 17px;
        right: 10px;
        display: block;
        height: 8px;
        width: 20px;
        border-top: 2px solid #fff;
        border-bottom: 2px solid #fff;
    }

    .main-navigation-toggle:before {
        content: "";
        -webkit-transition: all .3s ease;
        -ms-transition: all .3s ease;
        transition: all .3s ease;
        position: absolute;
        top: 11px;
        right: 10px;
        display: block;
        height: 2px;
        width: 20px;
        background: #fff;
    }

    .main-navigation-toggle.menu-opened:after {
        -webkit-transition: all .3s ease;
        -ms-transition: all .3s ease;
        transition: all .3s ease;
        top: 17px;
        border: 0;
        height: 2px;
        width: 19px;
        background: #fff;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .main-navigation-toggle.menu-opened:before {
        top: 17px;
        background: #fff;
        width: 19px;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    .nav-menu .submenu-button {
        position: absolute;
        z-index: 99;
        right: 0;
        top: 0;
        padding: 0;
        display: block;
        width: 45px;
        height: 50px;
        cursor: pointer;
        background-color: transparent;
        border: none;
    }

    .nav-menu .submenu-button:after {
        content: "";
        position: absolute;
        top: 24px;
        right: 17px;
        width: 8px;
        height: 2px;
        display: block;
        background: #232323;
    }

    .nav-menu .submenu-button:before {
        content: "";
        position: absolute;
        top: 21px;
        right: 20px;
        display: block;
        width: 2px;
        height: 8px;
        background: #232323;
    }

    .nav-menu .menu-item-has-children.active>.submenu-button:before {
        display: none;
    }
}