/**
 * Theme Name:     Astra Child
 * Author:         Rob Wombwell
 * Template:       astra
 * Text Domain:	   astra-child
 * Description:    Astra is fast, fully customizable & beautiful WordPress theme suitable for blog, personal portfolio, business website and WooCommerce storefront. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with Schema.org code integrated and is Native AMP ready so search engines will love your site. It offers special features and templates so it works perfectly with all page builders like Elementor, Beaver Builder, Visual Composer, SiteOrigin, Divi, etc. Some of the other features: # WooCommerce Ready # Responsive # RTL & Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and WooCommerce ready theme that you can use for building any kind of website!
 */

 /***********************
 ** MANAGE ENTIRE SITE VIEW
 ***********************/
 /* make the header (with navigation) fixed at top of page, so visible as page scrolls */
 .site-header {
    position: fixed!important;
    width: 100%;
    z-index:1;
}
/* making the header fixed means we've lost the top of each page, so offset it down to compensate */
 .site {
    padding-top: 38px; 
}

/* Page titles are really not heeded for this app, so Hide page titles across entire site */
h1.entry-title {
    display: none;
}

/****************************
** SWIPER CAROUSEL STYLE 
*****************************/
.ebpc-carousel-container {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 75%;
    max-width: 100%;
}

.swiper-slide {
    background-color: #f0f0f0;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    display: flex;
    flex-direction: row; /* Ensure row layout by default */
    flex-wrap: wrap; /* Allow wrapping when needed */
}

/* Featured Image */
.event-image {
    height: 100%;
    max-height: 400px;
    width: auto;
    object-fit: cover;
    margin: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover Effect for Image */
.event-image:hover {
   /*  transform: scale(1.05); /* Grow the image by 5% */
   /* box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Increased shadow effect */
}

/* Event Details Container */
.event-details {
    padding: 10px;
    display: flex;
    flex-direction: column;
    flex: 1; /* Allow details to take the remaining space */
}

/* Container for the Image and Details */
.event-item {
    display: flex;
    flex-direction: row; /* Keep side-by-side layout by default */
}

/* Event Details Paragraphs */
.event-details p {
    margin: 5px 0;
}

/* Event Title and Link */
.event-title {
    color: #333;
    text-decoration: none;
    font-weight: bold;
}

.event-title:hover {
    text-decoration: underline;
}

/* Event Excerpt */
.event-excerpt {
    max-height: 3.6em;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
}

.event-excerpt::after {
    content: '...';
    position: absolute;
    bottom: 0;
    right: 0;
    background: #f0f0f0;
    padding-left: 5px;
}

.read-more-link {
    display: none;
}

.event-excerpt.truncated + .read-more-link {
    display: inline;
    color: #007bff;
    text-decoration: none;
}

/* MEDIA QUERIES FOR RESPONSIVENESS */

/* Side by side layout down to 1024px */
@media screen and (max-width: 1024px) {
    .swiper-slide {
        flex-direction: row; /* Keep row layout */
    }
}

/* Stack image on top of details below 768px */
@media screen and (max-width: 768px) {
    .ebpc-carousel-container {
        width: 100%; 
    }

    .event-item {
        flex-direction: column; /* Stack image on top */
    }
    
    .event-image {
        width: auto;
        height: auto;
        max-height: 300px;
        margin: 5px auto;
        display: block;
    }
    
    .event-details {
        padding: 15px; /* Adjust padding for stacked layout */
    }

    /* corrects error for AJAX Login REgistration Modal wheich, for mobile view, sets a left margin with "margin:3em auto 4em" that puts login box off-screen*/
    .lrm-user-modal-container {
        /*margin: 3em calc((90vw - 22%) / 2) 4em!important;*/
				margin: 3em 10px 4em;
        max-width:90vw!important;
    }
    
}