/*
Theme Name: Hello Elementor Child
Theme URI: https://jayesbestdays.org/
Description: Custom child theme for Jaye's Best Days Foundation with modular Header and Footer and comprehensive mobile responsive styling.
Author: The Jaye Foundation
Template: hello-elementor
Version: 1.0.1
*/

/* ==========================================================================
   Base & Global Resets (Prevent Horizontal Overflow across all devices)
   ========================================================================== */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    position: relative !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

*, *::before, *::after {
    box-sizing: border-box !important;
}

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

/* Hide default page header / title output from Hello Elementor */
.page-header,
.site-main > .page-header,
.home .page-header {
    display: none !important;
}

/* ==========================================================================
   Top Announcement Bar - Awareness Campaign Button Hover
   ========================================================================== */
.jbd-awareness-bar a[href*="turn-the-town-teal"],
.jbd-awareness-btn {
    background-color: #14828E !important;
    color: #ffffff !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 1px 3px rgba(20, 130, 142, 0.2) !important;
    text-decoration: none !important;
}

.jbd-awareness-bar a[href*="turn-the-town-teal"]:hover,
.jbd-awareness-btn:hover {
    background-color: #103E44 !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(16, 62, 68, 0.35) !important;
    transform: translateY(-1px);
}

.jbd-awareness-bar a[href*="turn-the-town-teal"]:active,
.jbd-awareness-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(16, 62, 68, 0.2) !important;
}

.jbd-awareness-bar a[href*="turn-the-town-teal"] .material-symbols-outlined {
    transition: transform 0.2s ease !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.jbd-awareness-bar a[href*="turn-the-town-teal"]:hover .material-symbols-outlined {
    transform: translateX(3px) !important;
}

/* ==========================================================================
   Featured Initiative (Puppies, Paws & Purpose) Equal Height & Length Fix
   Matches image length/height seamlessly with the event details column
   ========================================================================== */
.elementor-element-l7iqrbl {
    align-items: stretch !important;
}

@media (min-width: 768px) {
    .elementor-element-l7iqrbl .elementor-element-dkycf1m {
        display: flex !important;
        flex-direction: column !important;
        align-self: stretch !important;
    }

    .elementor-element-l7iqrbl .elementor-element-dkycf1m .elementor-widget,
    .elementor-element-l7iqrbl .elementor-element-dkycf1m .elementor-widget.elementor-absolute,
    .elementor-element-l7iqrbl .elementor-element-dkycf1m .elementor-widget-heading,
    .elementor-element-l7iqrbl .elementor-element-dkycf1m .elementor-widget-image {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        display: flex !important;
        flex: 1 1 100% !important;
        flex-direction: column !important;
    }

    .elementor-element-l7iqrbl .elementor-element-dkycf1m .elementor-widget-container,
    .elementor-element-l7iqrbl .elementor-element-dkycf1m .elementor-heading-title,
    .elementor-element-l7iqrbl .elementor-element-dkycf1m .elementor-heading-title > div {
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        display: flex !important;
        flex: 1 1 100% !important;
        flex-direction: column !important;
        position: relative !important;
    }

    .elementor-element-l7iqrbl .elementor-element-dkycf1m img {
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        border-radius: 12px !important;
        display: block !important;
    }

    .elementor-element-l7iqrbl .elementor-element-avxek5z {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }
}

@media (max-width: 767px) {
    .elementor-element-l7iqrbl .elementor-element-dkycf1m .elementor-widget.elementor-absolute {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
    }
    .elementor-element-l7iqrbl .elementor-element-dkycf1m img {
        width: 100% !important;
        height: 260px !important;
        object-fit: cover !important;
        border-radius: 12px !important;
        display: block !important;
    }
}

/* ==========================================================================
   Events Page - Fundraisers Gallery Images Fix (Desktop & Mobile)
   ========================================================================== */
.elementor-element-w3cbpjs .e-con-child {
    display: flex !important;
    flex-direction: column !important;
    justify-content: stretch !important;
    height: 100% !important;
}

.elementor-element-w3cbpjs .elementor-widget-image {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.elementor-element-w3cbpjs .elementor-widget-image .elementor-widget-container {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
}

.elementor-element-w3cbpjs .elementor-widget-image img {
    width: 100% !important;
    height: 275px !important;
    min-height: 275px !important;
    max-height: 275px !important;
    object-fit: cover !important;
    object-position: center 20% !important;
    border-radius: 8px !important;
    display: block !important;
    transition: transform 0.3s ease !important;
}

.elementor-element-w3cbpjs .e-con-child:hover img {
    transform: scale(1.02);
}

@media (max-width: 1024px) {
    .elementor-element-w3cbpjs .elementor-widget-image img {
        height: 250px !important;
        min-height: 250px !important;
        max-height: 250px !important;
    }
}

@media (max-width: 767px) {
    .elementor-element-w3cbpjs .elementor-widget-image img {
        height: 240px !important;
        min-height: 240px !important;
        max-height: 240px !important;
    }
}

/* ==========================================================================
   What We Do Page - 2 Cards Per Row (2x2 Grid on Desktop, 1 on Mobile)
   ========================================================================== */
@media (min-width: 768px) {
    .elementor-element-sgdfloa > .e-con-inner {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 28px !important;
        align-items: stretch !important;
    }

    .elementor-element-sgdfloa > .e-con-inner > .elementor-element-t9jj041,
    .elementor-element-sgdfloa > .e-con-inner > .elementor-element-28b8h27,
    .elementor-element-sgdfloa > .e-con-inner > .elementor-element-haczdle,
    .elementor-element-sgdfloa > .e-con-inner > .elementor-element-xwvuqkv {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        gap: 20px !important;
        height: 100% !important;
        box-sizing: border-box !important;
        padding: 36px 32px !important;
        background: #ffffff !important;
        border-radius: 20px !important;
        border: 1px solid #EAF8F9 !important;
        box-shadow: 0 4px 20px rgba(16, 62, 68, 0.04) !important;
        transition: transform 0.25s ease, box-shadow 0.25s ease !important;
    }

    .elementor-element-sgdfloa > .e-con-inner > .elementor-element-t9jj041:hover,
    .elementor-element-sgdfloa > .e-con-inner > .elementor-element-28b8h27:hover,
    .elementor-element-sgdfloa > .e-con-inner > .elementor-element-haczdle:hover,
    .elementor-element-sgdfloa > .e-con-inner > .elementor-element-xwvuqkv:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 32px rgba(16, 62, 68, 0.08) !important;
    }

    .elementor-element-sgdfloa .elementor-element-t9jj041 > .e-con,
    .elementor-element-sgdfloa .elementor-element-28b8h27 > .e-con,
    .elementor-element-sgdfloa .elementor-element-haczdle > .e-con,
    .elementor-element-sgdfloa .elementor-element-xwvuqkv > .e-con {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .elementor-element-sgdfloa .elementor-element-efrw9mf,
    .elementor-element-sgdfloa .elementor-element-9sff6fo,
    .elementor-element-sgdfloa .elementor-element-s1b435v,
    .elementor-element-sgdfloa .elementor-element-vv3vqx4 {
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: flex-start !important;
    }

    .elementor-element-sgdfloa .elementor-element-wxasvi4,
    .elementor-element-sgdfloa .elementor-element-hrvllvr,
    .elementor-element-sgdfloa .elementor-element-u8h98jv,
    .elementor-element-sgdfloa .elementor-element-gyh1uji {
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        gap: 16px !important;
    }

    .elementor-element-sgdfloa .elementor-element-wxasvi4 > .e-con-inner,
    .elementor-element-sgdfloa .elementor-element-hrvllvr > .e-con-inner,
    .elementor-element-sgdfloa .elementor-element-u8h98jv > .e-con-inner,
    .elementor-element-sgdfloa .elementor-element-gyh1uji > .e-con-inner {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        justify-content: space-between !important;
        gap: 14px !important;
        padding: 0 !important;
    }

    .elementor-element-sgdfloa > .e-con-inner > .elementor-element-v1g2dd4 {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        margin-top: 16px !important;
    }
}

/* ==========================================================================
   Hero Section - Blinking Pulse Dot for "The Jaye Foundation • 501(c)(3)"
   ========================================================================== */
@keyframes jbdPulseDot {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.15;
        transform: scale(0.6);
    }
}

.elementor-heading-title span span[style*="width:8px"][style*="border-radius:9999px"],
.elementor-heading-title span span[style*="background:#103E44"],
span[style*="width:8px;height:8px;border-radius:9999px;background:#103E44"] {
    animation: jbdPulseDot 1.25s ease-in-out infinite !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* ==========================================================================
   Footer - Links Hover Underline & Make A Difference Button
   ========================================================================== */
#site-footer a:not(.jbd-footer-donate-btn):not(.rounded-full):hover {
    text-decoration: underline !important;
    color: #103E44 !important;
}

.jbd-footer-donate-btn,
#site-footer .lg\:col-span-3 a {
    background-color: #14828E !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.jbd-footer-donate-btn:hover,
#site-footer .lg\:col-span-3 a:hover {
    background-color: #E29416 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(226, 148, 22, 0.4) !important;
    transform: translateY(-2.5px) !important;
    text-decoration: none !important;
}

/* ==========================================================================
   Global Button Hover Animations (Smooth Lift, Scale & Shadow)
   ========================================================================== */
.elementor-button,
.elementor-button-link,
#site-header a[href*="/donate/"],
.jbd-awareness-bar a,
#site-footer a.rounded-lg,
.elementor-widget-button a {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), 
                box-shadow 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), 
                background-color 0.2s ease, 
                color 0.2s ease !important;
    cursor: pointer !important;
}

.elementor-button:hover,
.elementor-button-link:hover,
#site-header a[href*="/donate/"]:hover,
.jbd-awareness-bar a:hover,
.elementor-widget-button a:hover {
    transform: translateY(-2.5px) scale(1.02) !important;
    box-shadow: 0 8px 22px rgba(16, 62, 68, 0.22) !important;
}

.elementor-button:active,
.elementor-button-link:active,
#site-header a[href*="/donate/"]:active,
.elementor-widget-button a:active {
    transform: translateY(0) scale(0.99) !important;
    box-shadow: 0 2px 6px rgba(16, 62, 68, 0.15) !important;
}

/* ==========================================================================
   TABLET RESPONSIVE SYSTEM (768px - 1024px)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
    .elementor-element.e-con.e-parent {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    /* 4-column rows scale gracefully to 2x2 grid */
    .elementor-element-5rh62me,
    .elementor-element-ad9466b {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
    .elementor-element-5rh62me > .e-con,
    .elementor-element-ad9466b > .e-con {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Event 5 highlights on tablet: 3 top, 2 bottom */
    .elementor-element-htwfj5i {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 14px !important;
    }
    .elementor-element-htwfj5i > .e-con {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ==========================================================================
   MOBILE RESPONSIVE SYSTEM (< 768px)
   Comprehensive, clean stacking, readable typography, and touch friendliness
   ========================================================================== */
@media (max-width: 767.98px) {
    /* 1. Universal Container Stacking */
    .elementor-element.e-con.e-flex:not(.jbd-row-stay),
    .e-con.e-flex:not(.jbd-row-stay),
    .e-con-inner:not(.jbd-row-stay) {
        --flex-direction: column !important;
        flex-direction: column !important;
        --flex-wrap: wrap !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
    }

    /* 2. Universal Child Columns Full Width */
    .e-con > .e-con:not(.jbd-col-stay),
    .e-con-inner > .e-con:not(.jbd-col-stay),
    .elementor-element.e-child:not(.jbd-col-stay),
    .elementor-element.e-con-child:not(.jbd-col-stay) {
        --width: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        flex-basis: 100% !important;
    }

    /* 3. Container Padding Optimization */
    .elementor-element.e-con.e-parent {
        padding-top: 36px !important;
        padding-bottom: 36px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .e-con-boxed > .e-con-inner {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* 4. Mobile Typography Scaling */
    h1, .elementor-widget-heading h1, .elementor-heading-title:has(h1),
    .elementor-element h1.elementor-heading-title {
        font-size: 28px !important;
        line-height: 1.25 !important;
        word-break: break-word !important;
    }
    h2, .elementor-widget-heading h2, .elementor-heading-title:has(h2),
    .elementor-element h2.elementor-heading-title {
        font-size: 22px !important;
        line-height: 1.3 !important;
        word-break: break-word !important;
    }
    h3, .elementor-widget-heading h3, .elementor-heading-title:has(h3),
    .elementor-element h3.elementor-heading-title {
        font-size: 18px !important;
        line-height: 1.35 !important;
    }
    p, .elementor-widget-text-editor {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }

    /* 5. Mobile Button Groups & Touch Targets */
    .e-con:has(> .elementor-widget-button:nth-child(2)),
    .e-con-inner:has(> .elementor-widget-button:nth-child(2)) {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 12px !important;
    }

    .elementor-widget-button,
    .elementor-widget-button .elementor-button {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        display: flex !important;
        min-height: 46px !important;
    }

    .elementor-button {
        padding: 12px 20px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
    }

    /* 6. Form Fields Mobile Usability */
    input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
    input[type="number"], select, textarea {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 16px !important;
        padding: 12px 14px !important;
        border-radius: 8px !important;
    }

    .elementor-field-group {
        width: 100% !important;
        margin-bottom: 14px !important;
    }

    /* 7. Puppies, Paws & Purpose Page (/puppies-paws-purpose-event/) */
    /* 5 Highlights Grid: 2 cols on mobile, 5th item spans full row */
    .elementor-element-htwfj5i {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        width: 100% !important;
    }
    .elementor-element-htwfj5i > .e-con,
    .elementor-element-htwfj5i > .e-child {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 16px 12px !important;
        border-radius: 12px !important;
        text-align: center !important;
        align-items: center !important;
    }
    .elementor-element-htwfj5i > :nth-child(5) {
        grid-column: 1 / -1 !important;
    }

    /* Event Quick Info Bar: stacked clean cards */
    .elementor-element-1vzbjm3 {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 20px 16px !important;
        width: 100% !important;
    }
    .elementor-element-1vzbjm3 > .e-con {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Sponsorship Tables: smooth touch scrolling */
    table, .elementor-widget-table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
    }
    table th, table td {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }

    /* 8. Events Page (/events/) */
    /* Fundraiser photo gallery: 2 items per row */
    .elementor-element-5rh62me,
    .elementor-element-ad9466b {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        width: 100% !important;
    }
    .elementor-element-5rh62me > .e-con,
    .elementor-element-ad9466b > .e-con,
    .elementor-element-5rh62me > .e-child,
    .elementor-element-ad9466b > .e-child {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }
    .elementor-element-5rh62me img,
    .elementor-element-ad9466b img {
        height: 160px !important;
        min-height: 160px !important;
        max-height: 160px !important;
        width: 100% !important;
        object-fit: cover !important;
        border-radius: 10px !important;
    }

    /* 9. What We Do Page (/what-we-do/) */
    .elementor-element-sgdfloa > .e-con-inner {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        padding: 0 !important;
    }
    .elementor-element-sgdfloa > .e-con-inner > .elementor-element-t9jj041,
    .elementor-element-sgdfloa > .e-con-inner > .elementor-element-28b8h27,
    .elementor-element-sgdfloa > .e-con-inner > .elementor-element-haczdle,
    .elementor-element-sgdfloa > .e-con-inner > .elementor-element-xwvuqkv {
        width: 100% !important;
        max-width: 100% !important;
        padding: 24px 20px !important;
        border-radius: 16px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        height: auto !important;
    }
    .elementor-element-sgdfloa .elementor-element-wxasvi4 > .e-con-inner,
    .elementor-element-sgdfloa .elementor-element-hrvllvr > .e-con-inner,
    .elementor-element-sgdfloa .elementor-element-u8h98jv > .e-con-inner,
    .elementor-element-sgdfloa .elementor-element-gyh1uji > .e-con-inner {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        padding: 0 !important;
    }

    /* 10. About Page (/about/) */
    /* Team / Board cards */
    .elementor-element-sx4mlte {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        width: 100% !important;
    }
    .elementor-element-sx4mlte > .e-con,
    .elementor-element-sx4mlte > .e-child {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* 11. Donate Page (/donate/) */
    /* Donation Giving Tiers */
    .elementor-element-s4ilaip {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        width: 100% !important;
    }
    .elementor-element-s4ilaip > .e-con,
    .elementor-element-s4ilaip > .e-child {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* 12. Get Involved Page (/get-involved/) */
    /* 3 Action Pillars */
    .elementor-element-t7va4j3 {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        width: 100% !important;
    }
    .elementor-element-t7va4j3 > .e-con,
    .elementor-element-t7va4j3 > .e-child {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* 13. Images in Two-Column Story Sections */
    .elementor-widget-image img {
        width: 100% !important;
        height: auto !important;
        max-height: 380px !important;
        object-fit: cover !important;
        border-radius: 12px !important;
    }
}