/*
 * Static fixes for mobile and slider
 * - Adds background images to swiper slides (normally done by Elementor JS)
 * - Creates a working hamburger menu for mobile (normally created by Elementor JS)
 */

/* ============================================================
   SLIDER BACKGROUND IMAGES
   ============================================================ */

/* The swiper slides need background images. 
   Elementor normally injects these via JS, but since this is a static site,
   we set them via CSS using the slide's data attributes or nth-child. */

.elementor-slides .swiper-slide {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* Assign each slide its background image */
.elementor-slides .swiper-slide:nth-child(1) {
    background-image: url("../wp-content/uploads/2023/05/home-slide-1.jpg") !important;
}
.elementor-slides .swiper-slide:nth-child(2) {
    background-image: url("../wp-content/uploads/2023/05/home-slide-2.jpg") !important;
}
.elementor-slides .swiper-slide:nth-child(3) {
    background-image: url("../wp-content/uploads/2023/05/home-slide-3.jpg") !important;
}
.elementor-slides .swiper-slide:nth-child(4) {
    background-image: url("../wp-content/uploads/2023/05/home-slide-4-1.jpg") !important;
}
.elementor-slides .swiper-slide:nth-child(5) {
    background-image: url("../wp-content/uploads/2023/07/Home-Slide-4.jpg") !important;
}
.elementor-slides .swiper-slide:nth-child(6) {
    background-image: url("../wp-content/uploads/2023/07/Home-Slide-5.jpg") !important;
}

/* Dark overlay on slides for text readability */
.elementor-slides .swiper-slide::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.4) !important;
    z-index: 0 !important;
}

/* Ensure slide content is above the overlay */
.elementor-slides .swiper-slide > * {
    position: relative !important;
    z-index: 1 !important;
}

/* ============================================================
   MOBILE HAMBURGER MENU
   ============================================================ */

/* Show the hamburger toggle only on mobile (max-width: 1024px) */
.mobile-menu-toggle {
    display: none !important;
    cursor: pointer !important;
    padding: 8px 12px !important;
    background: transparent !important;
    border: none !important;
    z-index: 10001 !important;
    position: relative !important;
}

.mobile-menu-toggle span {
    display: block !important;
    width: 24px !important;
    height: 3px !important;
    background: #0094C9 !important;
    margin: 5px 0 !important;
    transition: all 0.3s ease !important;
    border-radius: 2px !important;
}

/* Hamburger to X animation when active */
.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px) !important;
}
.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0 !important;
}
.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px) !important;
}

/* Mobile dropdown menu */
.mobile-nav-menu {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 280px !important;
    max-width: 80vw !important;
    height: 100vh !important;
    background: #fff !important;
    box-shadow: -4px 0 20px rgba(0,0,0,0.15) !important;
    z-index: 10000 !important;
    padding: 80px 0 20px 0 !important;
    overflow-y: auto !important;
    transition: transform 0.3s ease !important;
    transform: translateX(100%) !important;
}

.mobile-nav-menu.open {
    display: block !important;
    transform: translateX(0) !important;
}

.mobile-nav-menu ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.mobile-nav-menu li {
    border-bottom: 1px solid #eee !important;
}

.mobile-nav-menu a {
    display: block !important;
    padding: 14px 24px !important;
    color: #454852 !important;
    text-decoration: none !important;
    font-family: "Public Sans", sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.mobile-nav-menu a:hover {
    background: #f8f8f8 !important;
    color: #0094C9 !important;
}

/* Mobile-specific JOIN US and DONATE buttons in mobile menu */
.mobile-nav-menu .mobile-cta {
    padding: 16px 24px !important;
    display: flex !important;
    gap: 10px !important;
    margin-top: 10px !important;
}

.mobile-nav-menu .mobile-cta a {
    flex: 1 !important;
    text-align: center !important;
    padding: 12px !important;
    border-radius: 4px !important;
    color: #fff !important;
    font-weight: 600 !important;
}

.mobile-nav-menu .mobile-cta .join-btn {
    background: #0094C9 !important;
}

.mobile-nav-menu .mobile-cta .donate-btn {
    background: #d03801 !important;
}

/* Overlay when mobile menu is open */
.mobile-menu-overlay {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0,0,0,0.5) !important;
    z-index: 9999 !important;
}

.mobile-menu-overlay.show {
    display: block !important;
}