/* EMERGENCY MOBILE FIXES - CRITICAL LAYOUT ISSUES */

/* VIEWPORT AND CONTAINER EMERGENCY FIXES */
* {
    box-sizing: border-box !important;
}

html {
    overflow-x: hidden !important;
    width: 100% !important;
}

body {
    overflow-x: hidden !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 320px !important;
}

/* Fix all containers that are causing content to be cut off */
.w-container,
.grid-wrapper,
.navigation-wrapper,
.navigation-content,
.section {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

/* Desktop & Tablet hide menu button */
@media screen and (min-width: 992px) {
    .menu-button, .w-nav-button {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Make navbar links black in desktop */
    .nav-link, .w-nav-link, .brand {
        color: #000 !important;
        font-weight: 600 !important;
    }
}

/* Only show menu button on mobile */
@media screen and (max-width: 991px) {

    /* Make the menu icon fuller */
    .menu-icon-wrapper {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .menu-icon {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        filter: brightness(0) invert(1) !important; /* Make icon white */
    }

    /* Reduce all button sizes on mobile */
    .outline-button, .solid-button, .nav-button {
        padding: 10px 18px !important;
        font-size: 14px !important;
    }
}

.menu-icon {
    width: 100% !important;
    height: 100% !important;
    filter: brightness(0) invert(1) !important; /* Make icon white */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* SERVICE CARD GLOBAL FIXES FOR BOTH DESKTOP AND MOBILE */
.service-link {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    transition: all 0.3s ease !important;
}

.service-link-name {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
}

.service-link-name .subtitle {
    color: #333 !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.service-card-hover {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    z-index: 10 !important;
    color: white !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 16px !important;
    letter-spacing: 1px !important;
}

.service-link:hover .service-card-hover {
    opacity: 1 !important;
}

/* MOBILE NAVIGATION EMERGENCY FIX */
@media screen and (max-width: 991px) {
    /* Fix navigation bar */
    .navbar, .w-nav {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 70px !important;
        background: rgba(255, 255, 255, 1) !important; /* Make fully opaque */
        z-index: 9999 !important;
        border-bottom: 1px solid #ddd !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
    }

    .navigation-wrapper {
        height: 70px !important;
        width: 100% !important;
        padding: 0 !important;
        background-color: #fff !important;
    }

    .navigation-content {
        height: 70px !important;
        width: 100% !important;
        padding: 0 15px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        position: relative !important;
        background-color: #fff !important;
    }

    /* Brand/Logo Fix - fix overlapping text and INCREASE FONT SIZE */
    .brand, .w-nav-brand {
        font-size: 14px !important; /* Increased from 10px to 14px */
        font-weight: 600 !important;
        color: #000 !important; /* Make it black */
        text-decoration: none !important;
        z-index: 10000 !important;
        flex-shrink: 0 !important;
        margin-right: 5px !important;
        max-width: 45% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .brand .text-block {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 14px !important; /* Increased from 10px to 14px */
        line-height: 1.2 !important;
    }

    /* Navigation Right Section */
    .nav-right {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-shrink: 0 !important;
    }

    /* Book Here Button Fix - make it smaller */
    .nav-button {
        font-size: 9px !important;
        padding: 5px 8px !important;
        background: #333 !important;
        color: white !important;
        border-radius: 20px !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        z-index: 10000 !important;
    }

    .nav-button .button-text {
        font-size: 9px !important;
    }

    /* MENU BUTTON EMERGENCY FIX - Make it fully visible with high contrast - MOBILE ONLY */
    .menu-button, .w-nav-button {
        width: auto !important;           /* Instead of fixed 46px */
        min-width: 30px !important;       /* Enough for "MENU" text */
        padding: 4px 6px !important;     /* Match nav-button padding */
        border-radius: 5px !important;
        background: transparent !important;
    }

    .menu-icon {
        filter: none !important;  /* Keep hamburger lines dark for contrast */
    }

    /* MOBILE MENU DROPDOWN FIX */
    .nav-menu, .w-nav-menu {
        position: fixed !important;
        top: 70px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: calc(100vh - 70px) !important;
        background: rgba(255, 255, 255, 0.98) !important;
        display: none !important;
        padding: 20px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .nav-menu.w--open, .w-nav-menu.w--open {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .menu-items {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
    }

    .nav-link, .w-nav-link {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 15px !important;
        font-size: 18px !important;
        margin: 5px 0 !important;
        color: #000 !important; /* Make links black */
        font-weight: 600 !important;
    }

    .nav-link:last-child, .w-nav-link:last-child {
        border-bottom: none !important;
    }

    .nav-link:hover, .w-nav-link:hover {
        background: #f9f9f9 !important;
    }

    /* Fix all link click events */
    .w-nav-link, .w-nav-menu a {
        pointer-events: auto !important;
    }

    /* BODY SPACING FOR FIXED NAV - Remove gap between hero and top */
    body {
        padding-top: 70px !important; /* Match the height of navbar */
    }

    /* Remove gaps in hero section */
    .home-hero {
        margin-top: -1px !important; /* Remove any gap */
        padding-top: 0 !important; /* Remove top padding */
        min-height: 80vh !important;
    }

    /* CONTENT SECTIONS EMERGENCY FIX */
    .section {
        padding: 30px 15px !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    .grid-wrapper {
        padding: 0 15px !important;
        width: 100% !important;
        max-width: none !important;
    }

    /* TYPOGRAPHY EMERGENCY FIX - Center everything */
    h1, h2, h3, .xxl-heading, .stacked-heading, .subtitle {
        font-size: 28px !important;
        line-height: 1.3 !important;
        text-align: center !important;
        padding: 0 10px !important;
        word-wrap: break-word !important;
        max-width: 100% !important;
        margin: 0 auto 20px !important;
        width: 100% !important;
    }

    /* HERO SECTION FIXES */
    .home-hero {
        min-height: 70vh !important;
    }

    .slide-content {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 20px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .hero-intro {
        width: 100% !important;
        max-width: 100% !important;
        opacity: 1 !important;
        transform: none !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* FIX BUTTON VISIBILITY */
    .outline-button {
        white-space: normal !important;
        text-align: center !important;
        padding: 12px 20px !important;
        width: auto !important;
        min-width: 180px !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        border-radius: 30px !important;
    }

    .button-text {
        white-space: normal !important;
        text-align: center !important;
        width: 100% !important;
        display: inline-block !important;
        overflow: visible !important;
    }

    /* SERVICE CARDS FIX - Make them display properly one below another */
    .services-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
        padding: 20px 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        align-items: center !important;
    }

    .service-link {
        width: 280px !important;
        height: 250px !important;
        margin-bottom: 30px !important;
        display: block !important;
        position: relative !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
    }

    .service-link-top {
        height: 100px !important;
        padding: 20px 15px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background-color: #fff !important;
        position: relative !important;
        z-index: 2 !important;
    }

    .service-bottom {
        height: 150px !important;
        width: 100% !important;
        background-size: cover !important;
        background-position: center !important;
    }

    /* YOUR YOGA EDUCATOR SECTION FIX - Make the about image visible */
    .dual-wrapper {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        align-items: center !important;
        margin: 0 auto !important;
        text-align: center !important;
    }

    .about-image {
        display: block !important;
        width: 100% !important;
        height: 300px !important;
        max-width: 100% !important;
        overflow: hidden !important;
        margin: 20px auto !important;
        border-radius: 10px !important;
    }

    .background-wrapper {
        width: 100% !important;
        height: 100% !important;
        position: relative !important;
        overflow: hidden !important;
        border-radius: 10px !important;
    }

    .background.about-background {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background-position: center center !important;
        background-size: cover !important;
        opacity: 1 !important;
        display: block !important;
    }

    .full-stacked-intro,
    .medium-stacked-intro {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px 10px !important;
        text-align: center !important;
        margin: 0 auto !important;
    }

    .stacked-heading {
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    /* Fix the paragraph text about Snehaa Midha */
    .body-display {
        text-align: center !important;
        padding: 0 10px !important;
        margin: 0 auto 20px auto !important;
        width: 100% !important;
        max-width: 100% !important;
        font-size: 16px !important;
        line-height: 1.6 !important;
        color: #333 !important;
    }

    /* Fix paragraphs with breaks */
    .body-display br {
        display: block !important;
        margin: 10px 0 !important;
        content: " " !important;
    }

    .solid-button {
        margin: 0 auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: auto !important;
        min-width: 180px !important;
        max-width: 280px !important;
    }

    /* FOOTER FIXES */
    footer {
        width: 100% !important;
        max-width: 100% !important;
        padding: 40px 15px !important;
        background-color: #f9f9f9 !important;
    }

    .footer-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .footer-content {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .footer-brand {
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 30px !important;
    }

    .footer-box {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px !important;
        text-align: center !important;
    }

    .footer-box-top {
        width: 100% !important;
        text-align: center !important;
    }

    .verticle-line {
        display: none !important;
    }

    .footer-credits {
        width: 100% !important;
        text-align: center !important;
        margin-top: 20px !important;
    }
}

/* EXTREME HIGH RESOLUTION DEVICE FIXES (S24 Ultra, etc) */
@media screen and (min-width: 1080px) and (max-width: 1440px) and (orientation: portrait),
       screen and (min-width: 1440px) and (max-width: 3000px) and (orientation: portrait) {
    /* Only apply these if we're in mobile mode */
    @media screen and (max-width: 991px) {
        .navbar, .w-nav {
            height: 80px !important;
        }

        .menu-button, .w-nav-button {
            width: 50px !important;
            height: 50px !important;
            min-width: 50px !important;
            min-height: 50px !important;
            background-color: #000 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            visibility: visible !important;
            opacity: 1 !important;
        }

        .menu-icon {
            width: 30px !important;
            height: 30px !important;
        }
    }
}

/* EMERGENCY TEXT AND ALIGNMENT FIXES */
@media screen and (max-width: 991px) {
    /* Ensure all text is visible and centered */
    .hero-intro,
    .inner-hero-content,
    .testimonial-slide-content,
    .service-link,
    .dual-wrapper,
    .medium-stacked-intro {
        text-align: center !important;
        padding: 20px 15px !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    /* Fix services grid */
    .services-wrapper {
        padding: 20px 15px !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    .service-link {
        border-radius: 12px !important;
        overflow: hidden !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
    }

    /* Fix footer */
    .footer-wrapper {
        text-align: center !important;
        padding: 30px 15px !important;
    }

    .footer-content {
        display: block !important;
        text-align: center !important;
    }

    /* Fix any grids that are breaking */
    .project-grid,
    .instagram-grid,
    .list-item {
        display: block !important;
        padding: 20px 15px !important;
        text-align: center !important;
    }

    /* Force center alignment for all content */
    .w-container,
    .section,
    .grid-wrapper {
        text-align: center !important;
    }

    /* Ensure buttons are visible and clickable */
    .solid-button,
    .w-button {
        display: block !important;
        width: 100% !important;
        max-width: 280px !important;
        margin: 20px auto !important;
        padding: 15px 20px !important;
        font-size: 14px !important;
        text-align: center !important;
    }
}

/* DESKTOP SPECIFIC FIXES - CLEANED UP */
@media screen and (min-width: 992px) {
    /* Remove all previous desktop interference */

    /* Only keep essential service wrapper fix */
    .services-wrapper {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        grid-column-gap: 30px !important;
        grid-row-gap: 30px !important;
        max-width: 1400px !important;
        margin: 0 auto !important;
        padding: 0 20px !important;
    }

    /* Service card hover - simplified */
    .service-link {
        position: relative !important;
        overflow: hidden !important;
        border-radius: 8px !important;
        transition: transform 0.3s ease !important;
    }

    .service-link:hover {
        transform: translateY(-5px) !important;
    }

    /* CLEAN SLIDE DOWN EFFECT - NO BULGE */
    .service-card-hover {
        position: absolute !important;
        top: -45px !important; /* Start above the card */
        left: 0 !important;
        right: 0 !important;
        height: 45px !important;
        background-color: rgba(96, 57, 34, 0.95) !important;
        color: #fff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        letter-spacing: 2px !important;
        text-transform: uppercase !important;
        z-index: 20 !important;
        opacity: 0 !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
    }

    /* Hover state - slide into position */
    .service-link:hover .service-card-hover {
        top: 10% !important; /* Slide down to top of card */
        opacity: 1 !important;
    }

    /* Service link name styling */
    .service-link-name {
        position: relative !important;
        z-index: 10 !important;
        background: #fff !important;
        transition: background-color 0.3s ease !important;
    }

    /* Subtitle in service cards */
    .service-link-name .subtitle {
        color: #333 !important;
        font-weight: 600 !important;
        font-size: 14px !important;
        letter-spacing: 3px !important;
        text-transform: uppercase !important;
        transition: color 0.3s ease !important;
    }

    /* Change subtitle color on hover */
    .service-link:hover .service-link-name .subtitle {
        color: var(--browncolor) !important;
    }

    /* Remove menu button on desktop */
    .menu-button, .w-nav-button {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Show nav menu on desktop */
    .nav-menu {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: static !important;
    }

    /* Typography constraints for readability */
    .body-display {
        max-width: 700px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        font-size: 18px !important;
        line-height: 1.7 !important;
    }
}

/* ========================================
   REMOVE ALL CONTACT CARDS ABOVE "GET IN TOUCH"
   Add this to your mobile-emergency-fix.css
   ======================================== */

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

    /* Remove ALL contact cards (calendly, email, phone) completely */
    .quick-link-wrapper {
        display: none !important;
    }

    /* Fix the contact info wrapper layout after removing cards */
    .contact-info-wrapper {
        display: block !important;
        padding: 40px 20px !important;
        margin-top: 0 !important;
    }

    /* Make sure "Get in touch!" section is visible */
    .contact-form-wrapper {
        display: block !important;
        padding: 0 !important;
        width: 100% !important;
    }

    /* Ensure the heading and text are visible */
    .sticky-intro,
    .medium-stacked-intro {
        display: block !important;
        text-align: center !important;
        margin-bottom: 30px !important;
        padding: 0 !important;
    }

    .medium-stacked-intro h2 {
        font-size: 2rem !important;
        margin-bottom: 15px !important;
        color: #333 !important;
        display: block !important;
    }

    .body-display {
        font-size: 16px !important;
        line-height: 1.5 !important;
        color: #666 !important;
        display: block !important;
    }

}

/* ========================================
   CLASSES PAGE MOBILE CENTER FIXES - OVERRIDE INLINE STYLES
   Add this to your mobile-emergency-fix.css
   ======================================== */

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

    /* OVERRIDE JAVASCRIPT TRANSFORMS AND INLINE STYLES */

    /* 1. HERO SECTION - FORCE CENTER WITH IMPORTANT */
    div.inner-page-hero.smaller-hero-bg {
        text-align: center !important;
    }

    div.inner-page-hero.smaller-hero-bg div.grid-wrapper {
        text-align: center !important;
    }

    div.inner-page-hero.smaller-hero-bg div.inner-hero-content {
        text-align: center !important;
        transform: none !important;
        -webkit-transform: none !important;
        opacity: 1 !important;
    }

    div.inner-page-hero.smaller-hero-bg div.hero-top {
        text-align: center !important;
        transform: none !important;
        -webkit-transform: none !important;
    }

    div.inner-page-hero.smaller-hero-bg div.hero-intro {
        text-align: center !important;
        transform: none !important;
        -webkit-transform: none !important;
        -moz-transform: none !important;
        -ms-transform: none !important;
        opacity: 1 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 2. CLASSES HEADING - OVERRIDE ALL TRANSFORMS */
    h1.xxl-heading {
        text-align: center !important;
        transform: none !important;
        -webkit-transform: none !important;
        -moz-transform: none !important;
        -ms-transform: none !important;
        margin: 0 auto 20px auto !important;
        width: 100% !important;
        opacity: 1 !important;
    }

    /* 3. BUTTON - OVERRIDE ALL STYLES */
    a.outline-button.light.w-inline-block[href="#Book-A-Class"] {
        text-align: center !important;
        margin: 20px auto 0 auto !important;
        display: block !important;
        width: auto !important;
        max-width: 250px !important;
        transform: none !important;
        -webkit-transform: none !important;
        -moz-transform: none !important;
        -ms-transform: none !important;
        opacity: 1 !important;
    }

    /* 4. CARDS - FORCE CENTER */
    div.section.no-padding.grey {
        text-align: center !important;
    }

    div.services-dual-wrapper {
        text-align: center !important;
        padding: 40px 20px !important;
        width: 100% !important;
        display: block !important;
        transform: none !important;
        opacity: 1 !important;
    }

    div.services-list-2 {
        text-align: center !important;
        display: block !important;
        width: 100% !important;
        border-top: none !important;
        transform: none !important;
        opacity: 1 !important;
    }

    div.service-list-item-2 {
        text-align: center !important;
        margin: 0 auto 40px auto !important;
        padding: 30px 20px !important;
        width: 100% !important;
        max-width: 400px !important;
        display: block !important;
        transform: none !important;
        opacity: 1 !important;
        border-bottom: 1px solid #e9ecef !important;
    }

    /* FORCE ALL TEXT TO CENTER */
    div.service-list-item-2 * {
        text-align: center !important;
        transform: none !important;
        opacity: 1 !important;
    }

    /* SPECIFIC ELEMENTS IN CARDS */
    h3.heading-6 {
        text-align: center !important;
        margin: 0 auto 15px auto !important;
        width: 100% !important;
    }

    div.subtitle-2 {
        text-align: center !important;
        margin: 0 auto 10px auto !important;
        width: 100% !important;
    }

    div.body-display-3 {
        text-align: center !important;
        margin: 0 auto !important;
        width: 100% !important;
        padding: 0 10px !important;
    }

    /* KILL ANY WEBFLOW ANIMATIONS */
    [data-w-id] {
        transform: none !important;
        -webkit-transform: none !important;
        -moz-transform: none !important;
        -ms-transform: none !important;
        opacity: 1 !important;
        transition: none !important;
    }

    /* CENTERED LINE */
    div.centered-line {
        text-align: center !important;
        margin: 0 auto 20px auto !important;
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }

}