/* ============================================
   UNIVERSAL MOBILE RESPONSIVE FIXES
   Optimized single file for all pages
   Based on index.html approach
   ============================================ */

/* Apply to all pages on mobile */
@media screen and (max-width: 768px) {
    /* Prevent horizontal scroll */
    html {
        overflow-x: hidden !important;
        width: 100% !important;
    }
    
    body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }
    
    /* Force all grid layouts to stack */
    *[style*="display: grid"],
    *[style*="grid-template-columns"],
    .grid-2,
    .grid-3,
    .grid-4,
    .business-content,
    .what-is-item,
    .what-is-reverse,
    .service-content,
    .accounting-content,
    .more-services-container,
    .cta-wrapper,
    .page-hero-wrapper,
    /* Legal Entity specific grids */
    .legal-intro-grid,
    .legal-content-grid,
    .legal-card-content,
    .legal-actions-grid,
    /* Tax Preparation specific grids */
    .tax-intro-grid,
    .income-tax-content,
    .tax-process-content,
    .types-income-content,
    .hero-content {
        display: block !important;
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    
    /* Service grids - single column on mobile */
    .services-grid,
    .expect-grid,
    .tax-services-grid,
    .benefits-grid,
    .use-cases-grid,
    .features-grid,
    .testimonials-grid,
    .services-overview-grid,
    .tax-types-grid,
    .success-stats,
    .about-us-stats {
        display: block !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    /* Ensure all containers are full width */
    .container,
    *[class*="container"] {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }
    
    /* Fix all images */
    img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    
    /* Header and Logo Images */
    .logo img,
    .logo-image,
    .admin-logo {
        max-width: 150px !important;
        width: auto !important;
        height: auto !important;
    }
    
    /* Content Images */
    section img,
    .intro-images img,
    .services-images img,
    .why-need-images img,
    .documents-images img,
    .benefits-images img,
    .legal-intro-images img,
    .legal-content-images-multi img,
    .legal-card-image img,
    .tax-intro-images img,
    .tax-services-images img,
    .tax-process-images img,
    .tax-process-image img {
        width: 100% !important;
        height: auto !important;
        max-height: 250px !important;
        object-fit: cover !important;
        border-radius: 8px !important;
        margin-bottom: 15px !important;
    }
    
    /* Hero Section Images */
    .hero img,
    .agent-hero img,
    .compliance-hero img,
    .documents-hero img,
    .ip-hero img,
    .mnc-hero img {
        width: 100% !important;
        height: auto !important;
        max-height: 300px !important;
        object-fit: cover !important;
    }
    
    /* Hero Sections */
    .hero,
    .agent-hero,
    .compliance-hero,
    .documents-hero,
    .ip-hero,
    .mnc-hero,
    .partnership-hero,
    .legal-hero-banner,
    .tax-hero-banner {
        min-height: 300px !important;
        height: 300px !important;
        padding: 60px 15px !important;
        background-attachment: scroll !important;
        text-align: center !important;
    }
    
    /* Hero Titles */
    .hero h1,
    .agent-hero h1,
    .compliance-hero h1,
    .documents-hero h1,
    .ip-hero h1,
    .mnc-hero h1,
    .partnership-hero h1,
    .legal-hero-title,
    .tax-hero-title {
        font-size: 36px !important;
        line-height: 1.1 !important;
        letter-spacing: 1px !important;
        text-align: center !important;
        padding: 0 10px !important;
        margin-bottom: 20px !important;
    }
    
    /* Card Images */
    .service-card img,
    .benefit-item img,
    .reason-card img,
    .document-card img,
    .requirement-card img,
    .type-card img,
    .legal-action-card img {
        width: 100% !important;
        height: auto !important;
        max-height: 200px !important;
        object-fit: cover !important;
    }
    
    /* Team/Profile Images */
    .team-member-card img,
    .member-image img,
    .profile-image img {
        width: 100% !important;
        max-width: 300px !important;
        height: auto !important;
        margin: 0 auto !important;
    }
    
    /* Responsive typography */
    h1, h1[style] {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }
    
    h2, h2[style],
    .legal-section-title,
    .legal-section-title-center,
    .legal-actions-title,
    .tax-section-title,
    .tax-section-title-center,
    .section-header h2,
    .expect-main-title {
        font-size: 24px !important;
        line-height: 1.3 !important;
        text-align: center !important;
        margin-bottom: 20px !important;
    }
    
    h3, h3[style] {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }
    
    h4, h4[style] {
        font-size: 18px !important;
    }
    
    p, li, span,
    .legal-description,
    .legal-actions-note,
    .tax-description,
    .section-header p {
        font-size: 15px !important;
        line-height: 1.6 !important;
        text-align: center !important;
        margin-bottom: 15px !important;
    }
    
    /* Section padding */
    section,
    section[style*="padding"],
    .legal-intro-section,
    .legal-actions-section,
    .legal-content-section,
    .tax-intro-section,
    .tax-services-section,
    .tax-process-section,
    .benefits-section,
    .process-section {
        padding: 40px 0 !important;
    }
    
    /* Cards */
    .service-card,
    .benefit-item,
    .reason-card,
    .document-card,
    .legal-action-card,
    .legal-content-card,
    .tax-process-card,
    .process-step {
        padding: 20px 15px !important;
        margin: 0 0 15px !important;
        border-radius: 12px !important;
        text-align: center !important;
        display: block !important;
    }
    
    /* Card Icons */
    .service-icon,
    .legal-action-icon,
    .card-icon {
        font-size: 2.5rem !important;
        margin-bottom: 15px !important;
    }
    
    /* Card Titles */
    .service-card h3,
    .legal-action-card h3,
    .legal-card-title,
    .process-title {
        font-size: 18px !important;
        line-height: 1.3 !important;
        margin-bottom: 15px !important;
    }
    
    /* Fix white boxes and cards */
    *[style*="background: white"],
    *[style*="background: #fff"],
    *[style*="background: #ffffff"] {
        padding: 20px !important;
        margin: 10px 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Remove max-width constraints */
    *[style*="max-width"] {
        max-width: 100% !important;
    }
    
    /* Fix gaps */
    *[style*="gap"] {
        gap: 20px !important;
    }
    
    /* Buttons full width */
    button,
    .btn,
    a.btn,
    .legal-btn,
    .btn-primary,
    .btn-secondary,
    .btn-book-process,
    *[style*="background"][style*="padding"][style*="border-radius"] {
        width: 100% !important;
        max-width: 300px !important;
        display: block !important;
        text-align: center !important;
        padding: 15px 20px !important;
        margin: 15px auto !important;
        font-size: 15px !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
        min-height: 44px !important;
        touch-action: manipulation !important;
    }
    
    /* Hero buttons */
    .hero-buttons {
        display: block !important;
        gap: 15px !important;
        text-align: center !important;
    }
    
    /* Stats */
    .hero-stats,
    .tax-stats-row {
        display: block !important;
        gap: 20px !important;
        text-align: center !important;
    }
    
    .stat-item {
        margin-bottom: 20px !important;
        text-align: center !important;
    }
    
    .stat-number {
        font-size: 2rem !important;
    }
    
    .stat-label {
        font-size: 14px !important;
    }
    
    /* Hero Card */
    .hero-card {
        padding: 25px 20px !important;
        margin: 20px 15px !important;
        text-align: center !important;
    }
    
    /* Lists */
    .legal-list {
        padding: 0 20px !important;
        margin: 0 0 20px !important;
    }
    
    .legal-list li {
        font-size: 14px !important;
        line-height: 1.6 !important;
        padding: 6px 0 6px 20px !important;
        text-align: left !important;
    }
    
    .legal-list-title {
        font-size: 18px !important;
        text-align: center !important;
        margin: 20px 0 15px !important;
    }
    
    /* FAQ Section */
    .faq-container {
        max-width: 100% !important;
        padding: 0 15px !important;
    }
    
    .faq-item {
        margin-bottom: 15px !important;
    }
    
    .faq-question {
        font-size: 16px !important;
        padding: 15px !important;
    }
    
    .faq-answer {
        font-size: 14px !important;
        padding: 15px !important;
    }
    
    /* CTA Section */
    .cta-content {
        max-width: 100% !important;
        padding: 0 15px !important;
        text-align: center !important;
    }
    
    .cta-title,
    .cta-content h2 {
        font-size: 24px !important;
        margin-bottom: 20px !important;
    }
    
    .cta-description {
        font-size: 15px !important;
        margin-bottom: 25px !important;
    }
}

/* Extra small screens */
@media screen and (max-width: 480px) {
    /* Hero sections extra small */
    .hero,
    .agent-hero,
    .compliance-hero,
    .documents-hero,
    .ip-hero,
    .mnc-hero,
    .partnership-hero,
    .legal-hero-banner,
    .tax-hero-banner {
        height: 250px !important;
        padding: 50px 10px !important;
    }
    
    /* Hero titles extra small */
    .hero h1,
    .agent-hero h1,
    .compliance-hero h1,
    .documents-hero h1,
    .ip-hero h1,
    .mnc-hero h1,
    .partnership-hero h1,
    .legal-hero-title,
    .tax-hero-title {
        font-size: 28px !important;
        padding: 0 5px !important;
    }
    
    h1, h1[style] {
        font-size: 24px !important;
    }
    
    h2, h2[style],
    .legal-section-title,
    .legal-section-title-center,
    .legal-actions-title,
    .tax-section-title,
    .tax-section-title-center,
    .section-header h2,
    .expect-main-title {
        font-size: 20px !important;
    }
    
    h3, h3[style] {
        font-size: 18px !important;
    }
    
    p, li, span,
    .legal-description,
    .legal-actions-note,
    .tax-description,
    .section-header p {
        font-size: 14px !important;
    }
    
    section,
    section[style*="padding"],
    .legal-intro-section,
    .legal-actions-section,
    .legal-content-section,
    .tax-intro-section,
    .tax-services-section,
    .tax-process-section,
    .benefits-section,
    .process-section {
        padding: 30px 0 !important;
    }
    
    .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* Extra small logo */
    .logo img,
    .logo-image,
    .admin-logo {
        max-width: 110px !important;
    }
    
    /* Cards extra small */
    .service-card,
    .benefit-item,
    .reason-card,
    .document-card,
    .legal-action-card,
    .legal-content-card,
    .tax-process-card,
    .process-step {
        padding: 18px 12px !important;
        margin: 0 0 12px !important;
    }
    
    /* Icons extra small */
    .service-icon,
    .legal-action-icon,
    .card-icon {
        font-size: 2rem !important;
        margin-bottom: 12px !important;
    }
    
    /* Buttons extra small */
    button,
    .btn,
    a.btn,
    .legal-btn,
    .btn-primary,
    .btn-secondary,
    .btn-book-process {
        max-width: 280px !important;
        padding: 12px 18px !important;
        font-size: 14px !important;
    }
    
    /* Images extra small */
    section img,
    .intro-images img,
    .services-images img,
    .legal-intro-images img,
    .legal-content-images-multi img,
    .tax-intro-images img,
    .tax-services-images img,
    .tax-process-images img {
        max-height: 200px !important;
    }
    
    /* Stats extra small */
    .stat-number {
        font-size: 1.75rem !important;
    }
    
    .stat-label {
        font-size: 13px !important;
    }
    
    /* Hero card extra small */
    .hero-card {
        padding: 20px 15px !important;
        margin: 15px 10px !important;
    }
    
    /* Lists extra small */
    .legal-list {
        padding: 0 15px !important;
    }
    
    .legal-list li {
        font-size: 13px !important;
        padding: 5px 0 5px 18px !important;
    }
    
    .legal-list-title {
        font-size: 16px !important;
    }
    
    /* FAQ extra small */
    .faq-question {
        font-size: 15px !important;
        padding: 12px !important;
    }
    
    .faq-answer {
        font-size: 13px !important;
        padding: 12px !important;
    }
    
    /* CTA extra small */
    .cta-title,
    .cta-content h2 {
        font-size: 20px !important;
    }
    
    .cta-description {
        font-size: 14px !important;
    }
}

/* ============================================
   FORCE VISIBILITY - HIGHEST PRIORITY
   ============================================ */

/* Ensure content is always visible with maximum specificity */
html body section,
html body .legal-intro-section,
html body .legal-actions-section,
html body .legal-content-section,
html body .tax-intro-section,
html body .tax-services-section,
html body .tax-process-section,
html body .benefits-section,
html body .process-section {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1 !important;
}

html body .container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Force mobile layouts with maximum specificity */
@media screen and (max-width: 768px) {
    html body .legal-intro-section .container .legal-intro-grid,
    html body .legal-content-section .container .legal-content-grid,
    html body .legal-content-section .container .legal-content-card .legal-card-content,
    html body .legal-actions-section .container .legal-actions-grid,
    html body .tax-intro-section .container .tax-intro-grid,
    html body .tax-services-section .container .income-tax-content,
    html body .tax-process-section .container .tax-process-content,
    html body .benefits-section .container .types-income-content,
    html body .hero-section .container .hero-content {
        display: block !important;
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    
    html body .tax-services-section .container .services-grid,
    html body .process-section .container .expect-grid,
    html body .tax-services-section .container .tax-services-grid,
    html body .benefits-section .container .benefits-grid {
        display: block !important;
        grid-template-columns: 1fr !important;
        max-width: 400px !important;
        margin: 0 auto !important;
    }
}

/* ============================================
   NAVIGATION BUTTONS - FORCE VISIBILITY
   ============================================ */

/* Navigation wrapper fixes */
.nav-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    position: relative !important;
    overflow: visible !important;
}

/* Ensure navigation buttons are always visible */
.nav-auth-buttons {
    display: flex !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.nav-auth-buttons.active {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.btn-signin,
.btn-register,
.btn-schedule-call {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Mobile navigation buttons */
@media screen and (max-width: 768px) {
    /* Ensure nav wrapper has proper layout */
    .nav-wrapper {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        flex-wrap: nowrap !important;
        overflow: visible !important;
    }
    
    /* Ensure hamburger doesn't interfere */
    .hamburger {
        order: 3 !important;
        flex-shrink: 0 !important;
        margin-left: 10px !important;
    }
    
    /* Logo positioning */
    .logo {
        order: 1 !important;
        flex-shrink: 0 !important;
    }
    
    /* Navigation buttons positioning */
    .nav-auth-buttons {
        order: 2 !important;
        display: flex !important;
        gap: 8px !important;
        flex-shrink: 0 !important;
        position: static !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-left: auto !important;
        margin-right: 10px !important;
    }
    
    .nav-auth-buttons.active {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: static !important;
    }
    
    .btn-signin,
    .btn-register {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 8px 16px !important;
        font-size: 13px !important;
        border-radius: 4px !important;
        text-decoration: none !important;
        font-weight: 500 !important;
        transition: all 0.3s !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        position: relative !important;
        z-index: 10 !important;
    }
    
    .btn-signin {
        background: transparent !important;
        color: #333 !important;
        border: 1px solid #ddd !important;
    }
    
    .btn-register {
        background: #00d4ff !important;
        color: #1a1a1a !important;
        border: 1px solid #00d4ff !important;
    }
    
    .btn-schedule-call {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 8px 16px !important;
        font-size: 13px !important;
        background: #007bff !important;
        color: white !important;
        border-radius: 4px !important;
        text-decoration: none !important;
        align-items: center !important;
        gap: 5px !important;
        font-weight: 500 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        position: relative !important;
        z-index: 10 !important;
    }
    
    /* Force visibility even when nav menu is active */
    .nav-menu.active ~ .nav-office-hours,
    .nav-menu.active ~ .nav-auth-buttons {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Hide office hours on mobile to save space */
    .nav-office-hours {
        display: none !important;
    }
}

/* ============================================
   ACCESSIBILITY AND PERFORMANCE
   ============================================ */

@media screen and (max-width: 768px) {
    /* Touch-friendly interactions */
    .btn,
    .legal-btn,
    .service-card,
    .legal-action-card,
    .process-step {
        min-height: 44px !important;
        min-width: 44px !important;
        touch-action: manipulation !important;
    }
    
    /* Better focus indicators */
    .btn:focus,
    .legal-btn:focus,
    button:focus,
    input:focus,
    select:focus,
    textarea:focus {
        outline: 2px solid #60a5fa !important;
        outline-offset: 2px !important;
    }
    
    /* Prevent text selection on interactive elements */
    .btn,
    .legal-btn,
    .service-card,
    .legal-action-card,
    button {
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    /* Reduce motion for users who prefer it */
    @media (prefers-reduced-motion: reduce) {
        .service-card,
        .legal-action-card,
        .btn,
        .legal-btn,
        .hero,
        .legal-hero-banner,
        .tax-hero-banner {
            transition: none !important;
            animation: none !important;
        }
        
        .hero,
        .legal-hero-banner,
        .tax-hero-banner {
            background-attachment: scroll !important;
        }
    }
    
    /* Optimize background images */
    .hero,
    .legal-hero-banner,
    .tax-hero-banner {
        background-attachment: scroll !important;
        background-size: cover !important;
        background-position: center center !important;
    }
    
    /* Prevent zoom on input focus (iOS) */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important;
        padding: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Force mobile-friendly forms */
    form {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .form-group,
    .input-group {
        width: 100% !important;
        margin-bottom: 15px !important;
    }
    
    /* Force mobile-friendly modals */
    .modal-content,
    .contact-modal .modal-content {
        width: 95% !important;
        max-width: 95% !important;
        padding: 20px !important;
        margin: 20px !important;
        box-sizing: border-box !important;
    }
    
    /* Force mobile-friendly tables */
    table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        width: 100% !important;
        -webkit-overflow-scrolling: touch !important;
    }
}