/* ============================================
   BumiCore Group - Mobile Text Fix Design
   ============================================ */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;800&family=Nunito:wght@300;400;600;700&display=swap');

/* Base Variables */
:root {
    /* Color Palette */
    --primary: #0066CC;
    --secondary: #00B894;
    --accent: #FF6B6B;
    --warning: #FFD93D;
    --dark: #2D3436;
    --light: #FFFFFF;
    --gray: #636E72;
    --light-gray: #DFE6E9;
    
    /* Mobile Optimized Colors */
    --mobile-bg: #FFFFFF;
    --mobile-text: #2D3436;
    --mobile-heading: #0066CC;
    
    /* Typography */
    --font-heading: 'Rubik', sans-serif;
    --font-body: 'Nunito', sans-serif;
    
    /* Mobile Optimized Sizes */
    --mobile-heading-size: 1.8rem;
    --mobile-body-size: 1rem;
    --mobile-small-size: 0.9rem;
    
    /* Spacing */
    --mobile-padding: 1rem;
    --mobile-margin: 1rem;
    --mobile-gap: 1.5rem;
}

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    color: var(--dark);
    background: var(--light);
    line-height: 1.6;
    -webkit-text-size-adjust: 100%; /* Prevent font scaling on iOS */
}

/* =====================
   MOBILE FIRST APPROACH
   ===================== */

/* Force all text to be visible on mobile */
@media (max-width: 768px) {
    /* Base mobile text fixes */
    body {
        font-size: var(--mobile-body-size) !important;
        line-height: 1.5 !important;
    }
    
    /* Ensure all text is visible */
    * {
        color: var(--mobile-text) !important;
        background-color: transparent !important;
    }
    
    /* Fix heading visibility */
    h1, h2, h3, h4, h5, h6,
    .elementor-heading-title,
    .elementor-widget-heading .elementor-heading-title {
        color: var(--mobile-heading) !important;
        font-family: var(--font-heading) !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        margin-bottom: 0.75rem !important;
        text-shadow: none !important;
        background: none !important;
        -webkit-text-fill-color: var(--mobile-heading) !important;
    }
    
    /* Fix paragraph text */
    p, span, div, li,
    .elementor-widget-text-editor,
    .elementor-widget-text-editor * {
        color: var(--mobile-text) !important;
        font-size: var(--mobile-body-size) !important;
        line-height: 1.5 !important;
        text-shadow: none !important;
        background: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* =====================
   HEADER & NAVIGATION MOBILE FIX
   ===================== */

@media (max-width: 768px) {
    /* Mobile menu text fixes */
    .mobile-menu * {
        color: var(--mobile-text) !important;
    }
    
    /* Mega menu mobile fixes */
    .mega-menu.mega-menu-horizontal {
        background: var(--light) !important;
    }
    
    .mega-menu-link {
        color: var(--mobile-text) !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        padding: 0.75rem 1rem !important;
        border-bottom: 1px solid var(--light-gray) !important;
    }
    
    /* Mobile dropdown fix */
    .mega-sub-menu {
        background: var(--light) !important;
        border: 1px solid var(--light-gray) !important;
        box-shadow: none !important;
    }
    
    .mega-sub-menu .mega-menu-link {
        font-size: 0.95rem !important;
        padding: 0.5rem 1rem !important;
    }
    
    /* Mobile toggle button */
    .mega-toggle-animated {
        background: var(--primary) !important;
    }
}

/* =====================
   HERO SECTION MOBILE FIX
   ===================== */

@media (max-width: 768px) {
    #n2-ss-2 {
        background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
        margin: var(--mobile-margin) !important;
        border-radius: 12px !important;
    }
    
    #n2-ss-2 h5 {
        font-size: 1.3rem !important;
        font-weight: 700 !important;
        color: var(--light) !important;
        padding: var(--mobile-padding) !important;
        line-height: 1.4 !important;
        text-align: center !important;
        background: rgba(255, 255, 255, 0.15) !important;
        backdrop-filter: none !important;
    }
    
    #n2-ss-2 h5 b {
        color: var(--warning) !important;
        font-weight: 800 !important;
    }
}

/* =====================
   CONTENT SECTIONS MOBILE FIX
   ===================== */

@media (max-width: 768px) {
    /* Section headers */
    .elementor-heading-title.elementor-size-default {
        font-size: var(--mobile-heading-size) !important;
        margin-bottom: var(--mobile-margin) !important;
        text-align: center !important;
        padding: 0 var(--mobile-padding) !important;
    }
    
    /* Text content */
    .elementor-widget-text-editor {
        padding: var(--mobile-padding) !important;
        margin: var(--mobile-margin) 0 !important;
        background: var(--light) !important;
        border: 1px solid var(--light-gray) !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
    }
    
    .elementor-widget-text-editor b {
        color: var(--primary) !important;
        font-weight: 700 !important;
    }
    
    /* Fix invisible text */
    .elementor-invisible {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
}

/* =====================
   PRODUCT CARDS MOBILE FIX
   ===================== */

@media (max-width: 768px) {
    .elementor-icon-box-wrapper {
        margin-bottom: var(--mobile-margin) !important;
        padding: var(--mobile-padding) !important;
        background: var(--light) !important;
        border: 1px solid var(--light-gray) !important;
        border-radius: 12px !important;
        box-shadow: 0 3px 12px rgba(0,0,0,0.08) !important;
    }
    
    .products-image-hover {
        height: 180px !important;
        margin-bottom: var(--mobile-margin) !important;
        border-radius: 8px !important;
    }
    
    .elementor-icon-box-title a {
        font-size: 1.1rem !important;
        color: var(--mobile-heading) !important;
        margin-bottom: 0.5rem !important;
        display: block !important;
    }
    
    .elementor-icon-box-description {
        font-size: 0.95rem !important;
        color: var(--gray) !important;
        line-height: 1.5 !important;
    }
}

/* =====================
   ⭐⭐⭐ FOOTER MOBILE TEXT FIXES ⭐⭐⭐
   ===================== */

@media (max-width: 768px) {
    /* Footer container */
    .elementor-element-e91c1a5 {
        background: var(--dark) !important;
        color: var(--light) !important;
        padding: var(--mobile-padding) !important;
    }
    
    /* Fix all footer text color */
    .elementor-element-e91c1a5 * {
        color: var(--light) !important;
        background: transparent !important;
    }
    
    /* Footer headings */
    .elementor-element-e91c1a5 .elementor-heading-title {
        color: var(--light) !important;
        font-size: 1.2rem !important;
        margin-bottom: 1rem !important;
        text-align: center !important;
        -webkit-text-fill-color: var(--light) !important;
        background: none !important;
    }
    
    /* Footer links */
    #menu-1-afd9467 .hfe-menu-item,
    #menu-1-4655fd2 .hfe-menu-item,
    .hfe-menu-item,
    .hfe-sub-menu-item {
        color: rgba(255, 255, 255, 0.9) !important;
        font-size: 0.95rem !important;
        padding: 0.5rem 0 !important;
        display: block !important;
        text-align: center !important;
    }
    
    /* Footer contact info */
    .footer-contact .elementor-icon-box-description {
        color: rgba(255, 255, 255, 0.9) !important;
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        margin-bottom: 0.75rem !important;
    }
    
    .footer-contact .elementor-icon-box-description strong {
        color: var(--warning) !important;
        font-weight: 700 !important;
    }
    
    .footer-contact .elementor-icon-box-description a {
        color: rgba(255, 255, 255, 0.9) !important;
        text-decoration: none !important;
        display: inline-block !important;
        margin-top: 0.25rem !important;
    }
    
    /* Footer bottom text */
    .elementor-element-fb99fb1 {
        background: rgba(0, 0, 0, 0.2) !important;
        padding: var(--mobile-padding) !important;
        margin-top: var(--mobile-margin) !important;
    }
    
    .elementor-element-fb99fb1 p {
        color: rgba(255, 255, 255, 0.8) !important;
        font-size: 0.85rem !important;
        text-align: center !important;
        line-height: 1.4 !important;
        margin: 0 !important;
    }
    
    /* Social icons */
    .elementor-social-icons-wrapper {
        justify-content: center !important;
        margin-top: var(--mobile-margin) !important;
    }
    
    /* Fix product lists in footer */
    #prleft .hfe-menu-item {
        font-size: 0.9rem !important;
        padding: 0.25rem 0 !important;
        text-align: center !important;
    }
}

/* =====================
   SPECIAL MOBILE FIXES
   ===================== */

@media (max-width: 768px) {
    /* ISO Certification */
    .elementor-element-a26f709 img {
        width: 100% !important;
        height: auto !important;
        border-radius: 8px !important;
        margin: var(--mobile-margin) 0 !important;
    }
    
    /* Staff images */
    .center {
        padding: var(--mobile-padding) !important;
        margin: var(--mobile-margin) auto !important;
        text-align: center !important;
    }
    
    .center img {
        width: 180px !important;
        height: 180px !important;
        border-radius: 50% !important;
        margin: 0 auto var(--mobile-margin) !important;
        display: block !important;
    }
    
    .center p {
        color: var(--mobile-text) !important;
        font-size: 1rem !important;
        line-height: 1.4 !important;
        margin: 0 !important;
    }
    
    .center p b {
        color: var(--primary) !important;
        font-size: 1.1rem !important;
        display: block !important;
        margin-bottom: 0.25rem !important;
    }
}

/* =====================
   UTILITY CLASSES FOR TEXT VISIBILITY
   ===================== */

/* Force text visibility */
.text-visible {
    color: inherit !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Mobile text visibility classes */
@media (max-width: 768px) {
    .mobile-text-large {
        font-size: 1.1rem !important;
        line-height: 1.4 !important;
        font-weight: 600 !important;
    }
    
    .mobile-text-normal {
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }
    
    .mobile-text-small {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
    }
    
    /* Force white text on dark backgrounds */
    .text-white-mobile {
        color: var(--light) !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    }
    
    /* Force dark text on light backgrounds */
    .text-dark-mobile {
        color: var(--mobile-text) !important;
        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) !important;
    }
}

/* =====================
   SPECIFIC ELEMENT FIXES
   ===================== */

/* Fix for specific hidden elements */
.elementor-element-2b201c4 p, /* Copyright text */
.elementor-element-3a89889, /* Empty div that might hide text */
.elementor-element-afc2915, /* Contact info */
.elementor-element-2258cd7, /* Contact info */
.elementor-element-8ae5023 { /* Contact info */
    opacity: 1 !important;
    visibility: visible !important;
    color: inherit !important;
}

/* Fix for button text */
.elementor-button .elementor-button-text {
    color: inherit !important;
    opacity: 1 !important;
}

/* Fix for search text */
.hfe-search-form__input::placeholder {
    color: var(--gray) !important;
    opacity: 0.7 !important;
}

/* =====================
   RESPONSIVE BREAKPOINTS
   ===================== */

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
    :root {
        --mobile-heading-size: 2rem;
        --mobile-body-size: 1.05rem;
    }
    
    .elementor-heading-title.elementor-size-default {
        font-size: 2.2rem !important;
    }
    
    #n2-ss-2 h5 {
        font-size: 1.5rem !important;
    }
}

/* Desktop overrides */
@media (min-width: 1025px) {
    /* Restore desktop styles but keep text visible */
    body {
        font-size: 1rem;
    }
    
    .elementor-heading-title.elementor-size-default {
        font-size: 2.8rem;
    }
    
    /* Ensure footer text is visible on desktop too */
    .elementor-element-e91c1a5 * {
        color: var(--light) !important;
    }
    
    .elementor-element-e91c1a5 .elementor-heading-title {
        color: var(--light) !important;
    }
}

/* =====================
   ANIMATION FIXES FOR MOBILE
   ===================== */

@media (max-width: 768px) {
    /* Disable complex animations on mobile */
    * {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
    
    /* Keep only essential transitions */
    .mega-menu-link,
    .hfe-menu-item,
    a {
        transition: color 0.2s ease !important;
    }
}

/* =====================
   TOUCH OPTIMIZATIONS
   ===================== */

@media (max-width: 768px) {
    /* Better touch targets */
    .mega-menu-link,
    .hfe-menu-item,
    .elementor-button,
    a {
        min-height: 44px !important;
        min-width: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Better button text */
    .elementor-button {
        font-size: 1rem !important;
        font-weight: 600 !important;
        padding: 0.75rem 1.5rem !important;
    }
}

/* =====================
   FALLBACK STYLES
   ===================== */

/* If any text is still hidden, these will force it visible */
.hidden-text-fix {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    color: inherit !important;
    background: none !important;
    position: static !important;
    clip: auto !important;
    height: auto !important;
    width: auto !important;
    overflow: visible !important;
}

/* Specific fix for WordPress text issues */
.wp-caption-text,
.gallery-caption,
.screen-reader-text,
.assistive-text {
    color: var(--mobile-text) !important;
    font-size: 0.9rem !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Fix for any inline styles hiding text */
[style*="opacity:0"],
[style*="visibility:hidden"],
[style*="display:none"],
[style*="color:transparent"],
[style*="color:#fff"] {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    color: var(--mobile-text) !important;
}

/* Footer specific override */
footer [style*="color"],
footer [style*="opacity"],
footer [style*="visibility"] {
    color: var(--light) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* =====================
   DEBUG HELPER (Remove in production)
   ===================== */

/* Uncomment to see which elements might have hidden text */
/*
* {
    outline: 1px solid rgba(255,0,0,0.1) !important;
}

[style*="opacity"]:not([style*="opacity:1"]),
[style*="visibility"]:not([style*="visibility:visible"]),
[style*="display"]:not([style*="display:block"]):not([style*="display:inline"]):not([style*="display:flex"]) {
    outline: 2px solid red !important;
    background: yellow !important;
}
*/