/*
Theme Name: Istiqbal
Theme URI: http://themeforest.net/user/wpoceans/
Author: wpoceans
Author URI: http://themeforest.net/user/wpoceans/portfolio
Description: Istiqbal - Islamic Center & Mosque WordPress Theme
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: istiqbal
Tags: one-column, two-columns, left-sidebar, right-sidebar, custom-menu, featured-images, post-formats, theme-options, translation-ready
*/


/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/

.alignleft {
    display: inline;
    float: left;
    margin-right: 1.5em;
}

.alignright {
    display: inline;
    float: right;
    margin-left: 1.5em;
}

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
}


/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/

.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after {
    content: "";
    display: table;
    table-layout: fixed;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
    clear: both;
}


/* Make sure embeds and iframes fit their containers. */

embed,
iframe,
object {
    max-width: 100%;
}


/* By Authot Post */

.bypostauthor {
    display: inline-block;
}


/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/

.wp-caption {
    margin-bottom: 1.5em;
    max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption .wp-caption-text {
    margin: 0.8075em 0;
}

.wp-caption-text {
    text-align: center;
}


/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/

.gallery {
    margin-bottom: 1.5em;
    margin-right: -15px;
}

.gallery-item {
    display: inline-block;
    text-align: center;
    vertical-align: top;
    width: 100%;
    padding-right: 15px;
}
.gallery-item {
  padding-bottom: 15px;
}
.gallery-columns-2 .gallery-item {
    max-width: 50%;
}

.gallery-columns-3 .gallery-item {
    max-width: 33.33%;
}

.gallery-columns-4 .gallery-item {
    max-width: 25%;
}

.gallery-columns-5 .gallery-item {
    max-width: 20%;
}

.gallery-columns-6 .gallery-item {
    max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
    max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
    max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
    max-width: 11.11%;
}

.gallery-caption {
    display: block;
}

.screen-reader-text {
    background: transparent;
    display: none;
}



/* --- 1. CLEANUP & HIDE THEME OVERLAYS --- */
.mobail-menu, .navbar-toggler, .cart-search-contact, .menu-close, .sr-only, .col-lg-3.col-md-3.col-3.d-lg-none {
    display: none !important;
}

/* --- 2. THE 1200px & 767px FORCE VISIBILITY --- */
/* This kills the specific display:none rules you found in the code */
@media (max-width: 1200px) {
    .wpo-site-header .header-right .close-form .theme-btn {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

@media (max-width: 767px) {
    .wpo-site-header .header-right .close-form {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* --- 3. MOBILE HEADER ARCHITECTURE (991px and below) --- */
@media (max-width: 991px) {
    
    /* Reset Global Header Padding from your applied CSS */
    header#header.wpo-site-header {
        padding: 0 10px !important; 
    }

    /* Force the container to wrap into two rows */
    .wpo-site-header .container-fluid > .row.align-items-center {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        padding: 10px 0 !important;
    }

    /* ROW 1 - LEFT: Logo (Order 1) */
    .col-lg-2.col-md-6.col-6 { 
        order: 1 !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
        display: flex !important;
        justify-content: flex-start !important;
        padding-left: 10px !important;
    }

    .site-logo img {
        max-width: 120px !important;
        height: auto !important;
    }

    /* ROW 1 - RIGHT: Whatsapp Button (Order 2) */
    .col-lg-2.col-md-2.col-2 { 
        order: 2 !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
        display: flex !important;
        justify-content: flex-end !important;
        padding-right: 10px !important;
    }

    /* ROW 2: Scrolling Menu (Order 3) */
    .col-lg-8.col-md-1.col-1 { 
        order: 3 !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        display: block !important;
        margin-top: 10px !important;
        overflow: hidden;
    }

    /* FIX THE -320PX OFFSET & ENABLE SWIPE SCROLL */
    #navbar.collapse.navbar-collapse.navigation-holder {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important; /* Resets from off-canvas to normal flow */
        left: 0 !important;             /* Fixes the -320px offset */
        transform: none !important;
        background: transparent !important; 
        width: 100% !important;
        overflow-x: auto !important;     /* Enable horizontal scroll */
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;           /* Hide scrollbar Firefox */
    }

    #navbar::-webkit-scrollbar { display: none; } /* Hide scrollbar Chrome/Safari */

    /* STYLE THE LINKS IN ONE ROW */
    ul#menu-main-menu.nav.navbar-nav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        padding: 5px 0 !important;
        margin: 0 !important;
    }

    ul#menu-main-menu li {
        display: inline-block !important;
        flex: 0 0 auto !important;
        margin: 0 8px !important; /* Tight spacing for mobile scroll */
    }

    ul#menu-main-menu li a {
        color: rgb(35, 47, 75) !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        padding: 5px 0 !important;
    }
}

@media (max-width: 991px) {
    /* 1. Target the container holding both content and image */
    .istiqbal-hero .container-fluid {
        display: flex !important;
        flex-direction: column-reverse !important; /* This flips the order */
        text-align: center !important; /* Optional: Centers text for better mobile look */
    }

    /* 2. Fix the Image spacing */
    .istiqbal-hero .right-img {
        width: 100% !important;
        margin-bottom: 30px !important; /* Adds space between image and text below */
    }

    .istiqbal-hero .right-img img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* 3. Fix the Content (Text) spacing */
    .istiqbal-hero .content {
        width: 100% !important;
        padding: 0 15px !important;
    }
    
    /* Optional: Adjust font sizes for mobile if they feel too large */
    .istiqbal-hero h2.title {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }
}

/* 1. Hide the plus icon and the overlay container */
.pillars-card .popup-icon, 
.pillars-card .image a:before {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* 2. Ensure the image doesn't darken or change on hover */
.pillars-card .image a:hover:before {
    display: none !important;
}

/* 3. Make the cursor look like a standard link */
.pillars-card .image a {
    cursor: pointer !important;
}

/* 1. Force the hand cursor on the card and the image */
.pillars-card, 
.pillars-card .image, 
.pillars-card .image a,
.pillars-card .image img {
    cursor: pointer !important;
}

/* 2. Prevent the overlay from blocking the cursor or click */
.pillars-card .image::before, 
.pillars-card .image a::before {
    pointer-events: none !important;
}