/* ==============================================
   COMPREHENSIVE MOBILE FIXES FOR WEHOST WEBSITE
   Based on live generosity.co.jp mobile layout
   ============================================== */

/* ========================================
   HIDE NEW SERVICE PR ELEMENT
   ======================================== */
.top-pr[data-v-8fa6786b] {
    display: none !important;
}

/* ========================================
   CRITICAL MOBILE VIEWPORT FIXES
   ======================================== */
@media (max-width: 767px) {
    /* Reset box-sizing for all elements */
    *, *::before, *::after {
        box-sizing: border-box !important;
    }

    /* Fix body and html overflow */
    html {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        width: 100% !important;
        height: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body {
        overflow-x: hidden !important;
        overflow-y: visible !important;
        width: 100% !important;
        min-height: 100vh !important;
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Fix main container */
    #__nuxt {
        overflow-x: hidden !important;
        width: 100% !important;
        position: relative !important;
    }

    /* Prevent any element from causing horizontal scroll */
    * {
        max-width: 100vw !important;
    }
}

/* ========================================
   MOBILE HEADER FIXES
   ======================================== */
@media (max-width: 767px) {
    /* Fix main header */
    .main-header[data-v-cf7b2540] {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 24vw !important;
        padding: 0 !important;
        z-index: 9999 !important;
        overflow: visible !important;
        pointer-events: auto !important;
        opacity: 1 !important;
        background: transparent !important;
        transition: background 0.3s ease-in-out !important;
    }

    /* When menu is active */
    .main-header.active[data-v-cf7b2540] {
        height: 100vh !important;
        background: #1a1a1c !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /* Fix logo container */
    .main-header__logo[data-v-cf7b2540] {
        position: absolute !important;
        left: 5.128vw !important;
        top: 7.692vw !important;
        width: 26vw !important;
        height: auto !important;
        z-index: 10001 !important;
        pointer-events: auto !important;
    }

    .main-header__logo[data-v-cf7b2540] img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        object-fit: contain !important;
    }

    /* Fix hamburger button */
    .main-header__hamburger[data-v-cf7b2540] {
        display: block !important;
        position: absolute !important;
        right: 5.128vw !important;
        top: 7.692vw !important;
        width: 15.385vw !important;
        height: 15.385vw !important;
        background: rgba(0, 0, 0, 0.2) !important;
        -webkit-backdrop-filter: blur(5.128vw) !important;
        backdrop-filter: blur(5.128vw) !important;
        border-radius: 10.256vw !important;
        border: none !important;
        padding: 0 !important;
        z-index: 10002 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    .main-header__hamburger.is-white[data-v-cf7b2540] {
        background: rgba(255, 255, 255, 0.4) !important;
    }

    /* Hamburger lines */
    .main-header__hamburger__line[data-v-cf7b2540] {
        position: absolute !important;
        background: #fff !important;
        height: 0.513vw !important;
        width: 6.154vw !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    .main-header__hamburger__line[data-v-cf7b2540]:first-child {
        top: calc(50% - 1.025vw) !important;
    }

    .main-header__hamburger__line[data-v-cf7b2540]:nth-child(2) {
        top: calc(50% + 1.025vw) !important;
    }

    /* Active hamburger state */
    .main-header__hamburger.active[data-v-cf7b2540] {
        background: #414143 !important;
    }

    .main-header__hamburger.active .main-header__hamburger__line[data-v-cf7b2540] {
        width: 8.205vw !important;
        top: 50% !important;
    }

    .main-header__hamburger.active .main-header__hamburger__line[data-v-cf7b2540]:first-child {
        transform: translate(-50%, -50%) rotate(45deg) !important;
    }

    .main-header__hamburger.active .main-header__hamburger__line[data-v-cf7b2540]:nth-child(2) {
        transform: translate(-50%, -50%) rotate(-45deg) !important;
    }

    /* Mobile menu */
    .main-header__menu[data-v-cf7b2540] {
        display: none !important;
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        background: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-radius: 0 !important;
        padding: 42.308vw 10.256vw 7.179vw !important;
        opacity: 0 !important;
        transition: opacity 0.3s ease-in-out !important;
        pointer-events: auto !important;
    }

    .main-header.active .main-header__menu[data-v-cf7b2540] {
        display: block !important;
        opacity: 1 !important;
    }

    /* Mobile menu list */
    .main-header__menu ul[data-v-cf7b2540] {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: repeat(5, 1fr) !important;
        gap: 5.641vw 20.513vw !important;
        padding: 0 !important;
        list-style: none !important;
        margin: 0 !important;
    }

    /* Hide language toggle and contact in mobile menu */
    .main-header__menu ul .contact[data-v-cf7b2540],
    .main-header__menu ul .language-toggle[data-v-cf7b2540] {
        display: none !important;
    }

    /* Mobile menu links */
    .main-header__menu-link[data-v-171f419a] {
        color: #fff !important;
        font-size: 6.667vw !important;
        font-family: 'Helvetica Neue Bold', sans-serif !important;
        padding: 0 !important;
        text-decoration: none !important;
    }

    /* Fix white text on white background in tech design modal mobile view */
    @media (max-width:767px) {
        /* Tech design modal title and links - force black text */
        .tech-design-modal__content__title[data-v-26443ade],
        .tech-design-modal__content__title * {
            color: #000 !important;
        }
        .tech-design-modal__content__title > a[data-v-26443ade] {
            color: #000 !important;
        }

        /* Tech design modal category titles - force black text */
        .tech-design-modal__content__list__inner__item__title[data-v-26443ade] {
            color: #000 !important;
            border-bottom: 1px solid rgba(0,0,0,0.4) !important;
        }

        /* Tech design modal service links - force black text */
        .tech-design-modal__content__list__inner__item__list__item a[data-v-26443ade] {
            color: #000 !important;
        }

        /* General tech design modal content - catch all remaining white text */
        .tech-design-modal *[data-v-26443ade],
        .tech-design-modal__content *,
        .tech-design-modal__content__list *,
        .tech-design-modal div,
        .tech-design-modal p,
        .tech-design-modal a,
        .tech-design-modal span,
        .tech-design-modal h1,
        .tech-design-modal h2,
        .tech-design-modal h3,
        .tech-design-modal h4,
        .tech-design-modal h5,
        .tech-design-modal h6 {
            color: #000 !important;
        }

        /* Ensure main tech design navigation stays visible */
        .main-header__menu-link[data-v-171f419a] {
            color: #fff !important;
        }

        /* Fix tech design modal background for better contrast */
        .tech-design-modal[data-v-26443ade] {
            background: rgba(255, 255, 255, 0.95) !important;
            backdrop-filter: blur(10px) !important;
            border: 1px solid rgba(0, 0, 0, 0.1) !important;
        }

        /* Fix page description tech design links - main component */
        .page-description-tech-design-links[data-v-74c4d4d3][data-v-acd371e0],
        .page-description-tech-design-links[data-v-74c4d4d3],
        .page-description-tech-design-links {
            color: #000 !important;
        }

        /* Fix page description tech design links - all text elements */
        .page-description-tech-design-links *[data-v-74c4d4d3],
        .page-description-tech-design-links * {
            color: #000 !important;
        }

        /* Fix specific page description tech design link elements */
        .page-description-tech-design-links__link-content__category p[data-v-74c4d4d3],
        .page-description-tech-design-links__link-content__title p[data-v-74c4d4d3],
        .page-description-tech-design-links__link-content__japanese-sub-title p[data-v-74c4d4d3] {
            color: #000 !important;
        }

        /* Force black text on all page description tech design link content */
        div[data-v-74c4d4d3] p,
        div[data-v-74c4d4d3],
        a[data-v-74c4d4d3] p,
        a[data-v-74c4d4d3] {
            color: #000 !important;
        }
    }

    /* Tech & Design special button in mobile */
    .main-header__menu-link.tech-design[data-v-171f419a] {
        position: absolute !important;
        background: rgba(255, 255, 255, 0.2) !important;
        border-radius: 6.923vw !important;
        padding: 2.564vw 5.128vw !important;
        margin-left: -5.128vw !important;
        margin-top: -2vw !important;
    }

    /* Mobile header bottom area */
    .main-header__bottom[data-v-cf7b2540] {
        display: block !important;
        opacity: 0 !important;
        transition: opacity 0.3s ease-in-out !important;
    }

    .main-header.active .main-header__bottom[data-v-cf7b2540] {
        opacity: 1 !important;
    }
}

/* ========================================
   HOMEPAGE MOBILE CONTENT FIXES
   ======================================== */
@media (max-width: 767px) {
    /* Add padding top for fixed header */
    .index-container[data-v-3e16504b],
    .company-container[data-v-a088e4e3],
    .business-container[data-v-7f8e9d2a],
    .news-container[data-v-5c4d3b1f] {
        padding-top: 24vw !important;
    }

    /* Fix hero section */
    .home-hero[data-v-bf0b5f9f],
    .home-hero[data-v-69aa46e7],
    .top-contents[data-v-69849fc6] {
        position: relative !important;
        overflow: hidden !important;
        width: 100% !important;
    }

    /* Fix key visual canvas */
    .key-visual[data-v-c31916bd] {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        overflow: hidden !important;
    }

    .key-visual canvas {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Fix top message */
    .top-message[data-v-0c80d8de] {
        padding: 10vw 5vw !important;
        text-align: center !important;
    }

    .top-message h1 {
        font-size: 8vw !important;
        line-height: 1.2 !important;
        margin-bottom: 5vw !important;
    }

    .top-message p {
        font-size: 3.5vw !important;
        line-height: 1.6 !important;
    }

    /* Fix section containers */
    .page-description[data-v-ab6c0d08],
    .page-description-wrapper[data-v-757343f3],
    .page-description-company[data-v-a6dbe5cd],
    .page-description-business[data-v-ba7c7f4e],
    .page-description-tech-design[data-v-acd371e0] {
        overflow: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
        position: relative !important;
    }

    /* Fix carousels on mobile */
    .page-description-company-carousel[data-v-243fae7c] {
        overflow: hidden !important;
        width: 100% !important;
        position: relative !important;
    }

    .page-description-company-carousel__item[data-v-243fae7c] {
        width: 100% !important;
        padding: 5vw !important;
    }

    /* Fix business contents on mobile - prevent bubble overlap */
    .page-description-business-contents[data-v-e5c00a2c] {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        padding: 0 5vw !important;
        gap: 5vw !important; /* Increased gap between bubbles */
        height: auto !important; /* Override fixed height */
    }

    .page-description-business-contents__item[data-v-e5c00a2c] {
        position: static !important; /* Override absolute positioning */
        width: 34.615vw !important;
        height: 34.615vw !important;
        margin: 0 auto !important;
        padding: 3vw !important;
        transform: none !important; /* Reset any transforms */
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
    }

    /* Override all active state positions to prevent absolute positioning */
    .page-description-business-contents.active-0 .page-description-business-contents__item[data-v-e5c00a2c],
    .page-description-business-contents.active-1 .page-description-business-contents__item[data-v-e5c00a2c],
    .page-description-business-contents.active-2 .page-description-business-contents__item[data-v-e5c00a2c],
    .page-description-business-contents.active-3 .page-description-business-contents__item[data-v-e5c00a2c],
    .page-description-business-contents.active-4 .page-description-business-contents__item[data-v-e5c00a2c] {
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
    }

    /* Specific spacing for Planning (2nd) and Digital Development (3rd) bubbles */
    .page-description-business-contents__item:nth-child(2)[data-v-e5c00a2c] {
        margin-top: 3vw !important; /* Extra space before Planning */
    }

    .page-description-business-contents__item:nth-child(3)[data-v-e5c00a2c] {
        margin-top: 3vw !important; /* Extra space before Digital Development */
    }

    /* Fix tech design links */
    .page-description-tech-design-links[data-v-74c4d4d3] {
        flex-direction: column !important;
        width: 100% !important;
        padding: 0 5vw !important;
    }

    .page-description-tech-design-links__link[data-v-74c4d4d3] {
        width: 100% !important;
        margin-bottom: 5vw !important;
    }
}

/* ========================================
   NEWS SECTION MOBILE FIXES
   ======================================== */
@media (max-width: 767px) {
    .top-news[data-v-87315b21] {
        width: 100% !important;
        padding: 5vw !important;
        overflow: hidden !important;
    }

    .top-news__list[data-v-87315b21] ul {
        width: 100% !important;
    }

    .top-news__list[data-v-87315b21] li {
        width: 100% !important;
        padding: 3vw 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    }

    .top-news__list__content[data-v-87315b21] {
        width: 100% !important;
    }

    .top-news__list__content__title[data-v-87315b21] {
        font-size: 3.5vw !important;
        line-height: 1.4 !important;
    }
}

/* ========================================
   FOOTER MOBILE FIXES
   ======================================== */
@media (max-width: 767px) {
    /* Ensure single footer */
    .main-footer[data-v-75fea83a] {
        margin-top: 10vw !important;
        padding: 12.821vw 7.692vw 5.641vw !important;
        background-color: #1a1a1c !important;
        width: 100% !important;
        position: relative !important;
    }

    /* Hide any duplicate footers */
    .main-footer[data-v-75fea83a] ~ .main-footer {
        display: none !important;
    }

    /* Footer container */
    .main-footer-container[data-v-75fea83a] {
        flex-direction: column !important;
        width: 100% !important;
    }

    /* Footer logo */
    .footer-logo[data-v-409a4198] {
        width: 32.821vw !important;
        height: 15.726vw !important;
        margin-bottom: 5vw !important;
    }

    .footer-logo[data-v-409a4198] img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

    /* Footer copyright */
    .main-footer_copyright[data-v-75fea83a] {
        position: relative !important;
        text-align: center !important;
        margin-top: 10vw !important;
        font-size: 2.564vw !important;
    }
}

/* ========================================
   TECH DESIGN MODAL MOBILE FIXES
   ======================================== */
@media (max-width: 767px) {
    .tech-design-modal[data-v-26443ade] {
        position: relative !important;
        width: 91.282vw !important;
        margin: 0 auto !important;
        background: rgba(125, 125, 125, 0.2) !important;
        border-radius: 1.538vw !important;
        padding: 37px 28px !important;
        height: auto !important;
        top: 0 !important;
        left: 0 !important;
    }

    .tech-design-modal__content__title[data-v-26443ade] {
        display: none !important;
    }

    .tech-design-modal__content__list__inner[data-v-26443ade] {
        display: block !important;
    }

    .tech-design-modal__content__list__inner__item[data-v-26443ade] {
        margin-bottom: 13.59vw !important;
    }
}

/* ========================================
   GENERAL MOBILE TYPOGRAPHY & SPACING
   ======================================== */
@media (max-width: 767px) {
    /* Typography fixes */
    h1, h2, h3, h4, h5, h6 {
        word-wrap: break-word !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }

    p, span, div {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Image and video fixes */
    img, video {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    /* Section spacing */
    section {
        overflow: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    section + section {
        margin-top: 10vw !important;
    }

    /* Container fixes */
    [class*="container"] {
        width: 100% !important;
        max-width: 100vw !important;
        padding-left: 5vw !important;
        padding-right: 5vw !important;
        overflow: hidden !important;
    }
}

/* ========================================
   ANIMATION & TRANSITION FIXES
   ======================================== */
@media (max-width: 767px) {
    /* Disable problematic animations */
    [data-v-cf7b2540],
    [data-v-75fea83a],
    [data-v-409a4198] {
        animation: none !important;
    }

    /* Smooth transitions */
    * {
        -webkit-transition: opacity 0.3s ease, transform 0.3s ease !important;
        transition: opacity 0.3s ease, transform 0.3s ease !important;
    }

    /* Disable horizontal animations */
    @keyframes get-in-touch-mobile-cf7b2540 {
        from { transform: translate(0); }
        to { transform: translate(0); }
    }

    @keyframes get-in-touch-cf7b2540 {
        from { transform: translate(0); }
        to { transform: translate(0); }
    }
}

/* ========================================
   CRITICAL OVERFLOW FIXES
   ======================================== */
@media (max-width: 767px) {
    /* Hide horizontal scrollbar */
    ::-webkit-scrollbar:horizontal {
        display: none !important;
    }

    /* Prevent any element from extending beyond viewport */
    .home-hero, .home-techs, .home-business, .home-company,
    .home-casestudies, .home-bottom, .home-news {
        overflow-x: hidden !important;
        overflow-y: visible !important;
        max-width: 100vw !important;
        width: 100% !important;
    }

    /* Fix specific problem areas */
    [class*="home-"][class*="section"] {
        overflow: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }
}

/* ========================================
   Z-INDEX HIERARCHY
   ======================================== */
@media (max-width: 767px) {
    .main-header[data-v-cf7b2540] {
        z-index: 9999 !important;
    }

    .main-header__logo[data-v-cf7b2540] {
        z-index: 10001 !important;
    }

    .main-header__hamburger[data-v-cf7b2540] {
        z-index: 10002 !important;
    }

    .main-header__menu[data-v-cf7b2540] {
        z-index: 10000 !important;
    }

    .main-header__overlay[data-v-cf7b2540] {
        z-index: 9998 !important;
    }

    .tech-design-modal[data-v-26443ade] {
        z-index: 11000 !important;
    }
}