/* =========================================================
   EYEDEA MEDTECH
   COMPLETE ADDITIONAL CSS
   GLOBAL ELEMENTOR RESPONSIVE LAYOUT
   ========================================================= */


/* =========================================================
   1. GLOBAL ELEMENTOR PAGE WIDTH
   Applies to all pages containing Elementor
   ========================================================= */

/* Remove theme content-width restrictions around Elementor */

body:has(.elementor) .wp-site-blocks,
body:has(.elementor) main,
body:has(.elementor) .entry-content,
body:has(.elementor) .wp-block-post-content {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
}

/* Remove unwanted outer margins and padding */

body:has(.elementor) main,
body:has(.elementor) .entry-content,
body:has(.elementor) .wp-block-post-content {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Allow Elementor page wrapper to fill available space */

body .elementor {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
}

/* Override constrained WordPress block layouts */

body:has(.elementor)
.is-layout-constrained > .elementor {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Preserve Elementor's internal layout dimensions */

body .elementor .e-con,
body .elementor .elementor-widget,
body .elementor .elementor-widget-wrap,
body .elementor .elementor-container {
    min-width: 0;
    box-sizing: border-box;
}

/* Keep ordinary media within its available space */

body .elementor img,
body .elementor video,
body .elementor iframe {
    max-width: 100%;
}


/* =========================================================
   2. GLOBAL ELEMENTOR RESPONSIVENESS
   ========================================================= */

@media (max-width: 1024px) {

    body .elementor {
        width: 100% !important;
        max-width: 100% !important;
    }

    body .elementor .e-con,
    body .elementor .elementor-container {
        min-width: 0;
    }
}

@media (max-width: 767px) {

    body .elementor {
        width: 100% !important;
        max-width: 100% !important;
    }

    body .elementor .e-con,
    body .elementor .elementor-widget-wrap {
        min-width: 0;
    }
}


/* =========================================================
   3. BUSINESS DIRECTORY PLUGIN LITE
   CARD GRID WITH PHOTOS
   ========================================================= */

.wpbdp-listings {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 24px;
    align-items: stretch;
}

.wpbdp-listing {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.wpbdp-listing:hover {
    transform: translateY(-3px);
}


/* =========================================================
   4. WOOCOMMERCE SALE BADGE
   ========================================================= */

.woocommerce span.onsale {
    background-color: #0a7cff;
    color: #ffffff;
    border-radius: 6px;
}


/* =========================================================
   5. BUSINESS DIRECTORY CONTACT FORM
   ========================================================= */

.single-wpbdp_listing h3 {
    display: none !important;
}

.single-wpbdp_listing form[action*="contact"],
.single-wpbdp_listing form[action*="wpbdp"],
.single-wpbdp_listing .wpbdp-contact-form,
.single-wpbdp_listing .wpbdp-send-message {
    display: none !important;
}


/* =========================================================
   6. TEXT LINKS
   ========================================================= */

a:not(.elementor-button),
a:visited:not(.elementor-button) {
    text-decoration: none !important;
    box-shadow: none !important;
    background-image: none !important;
}

a:not(.elementor-button):hover,
a:not(.elementor-button):focus {
    text-decoration: underline !important;
    box-shadow: none !important;
    background-image: none !important;
}

u,
.has-text-decoration-underline {
    text-decoration: none !important;
}


/* =========================================================
   7. NGME HERO GRADIENT TEXT
   ========================================================= */

.hero-gradient {
    background: linear-gradient(
        90deg,
        #00d4ff,
        #9d4edd,
        #ff00aa
    ) !important;

    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
    display: inline-block;
}

.hero-white {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
}


/* =========================================================
   8. NGME PRIMARY BUTTON
   ========================================================= */

.hero-btn-primary .elementor-button {
    background: linear-gradient(
        135deg,
        #00d4ff,
        #9d4edd,
        #ff006e
    ) !important;

    border-radius: 999px !important;
    padding: 18px 34px !important;

    box-shadow:
        0 10px 40px rgba(0,212,255,.35) !important;

    color: #ffffff !important;
    font-weight: 700 !important;
    border: none !important;

    transition: all .3s ease !important;
}

.hero-btn-primary .elementor-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 14px 50px rgba(0,212,255,.45) !important;
}


/* =========================================================
   9. NGME SECONDARY BUTTON
   ========================================================= */

.hero-btn-secondary .elementor-button {
    background: transparent !important;

    border:
        1px solid rgba(255,255,255,.18) !important;

    border-radius: 999px !important;
    padding: 18px 34px !important;

    color: #ffffff !important;
    font-weight: 700 !important;

    backdrop-filter: blur(10px);

    transition: all .3s ease !important;
}

.hero-btn-secondary .elementor-button:hover {
    border-color: #00d4ff !important;
    background: rgba(255,255,255,.04) !important;
}


/* =========================================================
   10. NGME HERO BACKGROUND
   ========================================================= */

.ngme-hero-bg {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            900px 650px at 78% 35%,
            rgba(0,212,255,.22),
            transparent 60%
        ),
        radial-gradient(
            800px 600px at 92% 18%,
            rgba(157,78,221,.24),
            transparent 62%
        ),
        radial-gradient(
            700px 500px at 55% 85%,
            rgba(255,0,110,.12),
            transparent 65%
        ),
        linear-gradient(
            180deg,
            #05060f 0%,
            #0a0d1f 50%,
            #05060f 100%
        ) !important;
}

.ngme-hero-bg > * {
    position: relative;
    z-index: 2;
}


/* =========================================================
   11. PAGE 6498 BACKGROUND
   Retain original page-specific colour
   ========================================================= */

body.page-id-6498 {
    background: #020312 !important;
}


/* =========================================================
   12. WORDPRESS SITE HEADER
   ========================================================= */

.site-header,
header.wp-block-template-part {
    background:
        rgba(255,255,255,0.96) !important;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border-bottom:
        1px solid rgba(0,0,0,0.06);

    position: sticky;
    top: 0;
    z-index: 9999;

    padding-top: 10px;
    padding-bottom: 10px;
}

/* Navigation text */

.site-header a,
header.wp-block-template-part a,
.wp-block-navigation a {
    color: #111827 !important;
    font-weight: 600;
}


/* =========================================================
   13. ELEMENTOR MOBILE NAVIGATION
   ========================================================= */

@media (max-width: 767px) {

    .elementor-nav-menu--dropdown {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 9999 !important;
        background: #ffffff !important;
        padding: 20px 0 !important;
    }

    .elementor-nav-menu--dropdown a {
        text-align: center !important;
        font-size: 22px !important;
        padding: 18px 0 !important;
    }

    .elementor-location-header {
        position: relative !important;
        z-index: 9999 !important;
    }
}


/* =========================================================
   14. WORDPRESS MOBILE NAVIGATION
   ========================================================= */

@media only screen and (max-width: 768px) {

    .wp-block-navigation__responsive-container.is-menu-open {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        width: 100vw !important;
        height: 100vh !important;

        background: #ffffff !important;
        z-index: 999999 !important;

        padding: 90px 30px 30px 30px !important;
    }

    .wp-block-navigation__responsive-container-content {
        align-items: center !important;
        text-align: center !important;
    }

    .wp-block-navigation__container {
        gap: 28px !important;
    }

    .wp-block-navigation-item__content {
        font-size: 26px !important;
        font-weight: 700 !important;
        color: #111827 !important;
    }

    .wp-block-navigation__responsive-container-close {
        top: 25px !important;
        right: 25px !important;
        z-index: 1000000 !important;
    }
}


/* =========================================================
   15. MOBILE PHOTO ADJUSTMENTS
   ========================================================= */

@media (max-width: 767px) {

    .damian-photo {
        width: 125% !important;
        max-width: none !important;
        transform: translateX(-17%) !important;
        object-fit: cover !important;
    }

    .avem-photo {
        width: 125% !important;
        max-width: none !important;
        transform: translateX(-17%) !important;
        object-fit: cover !important;
    }
}


/* ==========================================
   EYEDEA HOMEPAGE HERO RESPONSIVE FIX
   ========================================== */

/* Prevent Elementor containers from overflowing */
body.home .elementor .e-con,
body.home .elementor .elementor-container,
body.home .elementor .elementor-widget-wrap {
    min-width: 0;
    box-sizing: border-box;
}

/* Make embedded hero HTML responsive */
body.home .elementor-widget-html,
body.home .elementor-widget-html .elementor-widget-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* Ensure the homepage content wrapper fills the screen */
body.home .entry-content,
body.home .wp-block-post-content,
body.home .elementor {
    width: 100% !important;
    max-width: none !important;
}

/* Prevent oversized text and media from forcing page overflow */
body.home .elementor-widget-html img,
body.home .elementor-widget-html video {
    max-width: 100%;
    height: auto;
}

/* Tablet and half-screen layouts */
@media (max-width: 1024px) {
    body.home .elementor .e-con {
        max-width: 100%;
    }
}

/* =========================================================
   EYEDEA RESPONSIVE LAYOUT CORRECTIONS
   Preserves Twenty Twenty-Four theme workaround
   ========================================================= */

/* Prevent flex and grid children from resisting resizing */

body .elementor .e-con {
    min-width: 0;
}

/* Keep the main hero grid within its available width */

.eyedea-hero-grid {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Compact desktop and tablet */

@media (min-width: 768px) and (max-width: 1199px) {

    /* Stack hero columns before they become too narrow */

    .eyedea-hero-grid {
        flex-direction: column !important;
    }

    .eyedea-hero-grid > .e-con {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: auto !important;
    }

    /* Allow the hero content to fill its container */

    .eyedea-hero-content {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Mobile adjustments */

@media (max-width: 767px) {

    .eyedea-hero-grid {
        flex-direction: column !important;
    }

    .eyedea-hero-grid > .e-con {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: auto !important;
    }

    .eyedea-hero-content {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* =====================================================
   EYEDEA HERO TEXT POSITIONING FIX
   Keeps hero content inside the visible screen
   ===================================================== */

/* Keep the hero's text container in normal flow */
.eyedea-hero-content {
    box-sizing: border-box;
    min-width: 0;
}

/* Compact desktop and tablet */
@media (min-width: 768px) and (max-width: 1199px) {

    .eyedea-hero-grid > .eyedea-hero-content {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: auto !important;
    }

    .eyedea-hero-content {
        margin-left: 0 !important;
        margin-right: 0 !important;
        transform: none !important;
        padding-left: clamp(20px, 5vw, 60px) !important;
        padding-right: clamp(20px, 5vw, 60px) !important;
    }
}

/* Mobile */
@media (max-width: 767px) {

    .eyedea-hero-content {
        margin-left: 0 !important;
        margin-right: 0 !important;
        transform: none !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* =========================================================
   END OF EYEDEA ADDITIONAL CSS
   ========================================================= */