/* ========================================
   MINIMAL FIX RESPONSIVE CSS - EKLOSIM
   Replace ENTIRE responsive.css with this
   Only fixes issues without breaking existing layout
   ======================================== */

/* BASE OVERFLOW FIXES - ALL DEVICES */
html {
    overflow-x: hidden !important;
    width: 100% !important;
}

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

#wrap {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* ========================================
   DESKTOP ONLY (769px+) - UNCHANGED
   ======================================== */
@media screen and (min-width: 769px) {
    /* Hide mobile navigation */
    .mobile-nav-toggle,
    .mobile-nav-menu,
    .mobile-nav-overlay,
    .mobile-menu-toggle {
        display: none !important;
        visibility: hidden !important;
    }

    /* Show desktop navigation */
    .navWrap,
    #nav {
        display: block !important;
        visibility: visible !important;
    }

    /* Desktop scrollbar */
    html {
        overflow-y: auto !important;
    }

    body {
        overflow-y: auto !important;
    }
}

/* ========================================
   MOBILE & TABLET (768px and below)
   ======================================== */
@media screen and (max-width: 768px) {

    /* === CRITICAL: SINGLE SCROLLBAR FIX === */
    html {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    body {
        overflow-x: hidden !important;
        overflow-y: visible !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    /* === HEADER TEXT FIXES ONLY === */
    /* h1 stays unchanged (keeps Cufon) */

    /* Fix h2 text display */
    h2 {
        font-family: 'Open Sans', sans-serif !important;
        font-size: 22px !important;
        font-weight: 100 !important;
        letter-spacing: 0 !important;
        word-spacing: 0 !important;
        line-height: 1.3 !important;
        color: #bfbfbf !important;
        margin: 0 0 12px 0 !important;
        display: block !important;
        text-rendering: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
        text-indent: 0 !important;
    }

    /* Fix h3 text display */
    h3 {
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 18px !important;
        
        letter-spacing: 0 !important;
        word-spacing: 0 !important;
        line-height: 1.3 !important;
        color: #FFF !important;
        margin: 0 0 10px 0 !important;
        display: block !important;
        text-rendering: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
        text-indent: 0 !important;
    }

    /* Fix h4, h5, h6 text display */
    h4, h5, h6 {
        font-family: Arial, Helvetica, sans-serif !important;
        font-weight: bold !important;
        letter-spacing: 0 !important;
        word-spacing: 0 !important;
        line-height: 1.3 !important;
        color: #FFF !important;
        display: block !important;
        text-rendering: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
        text-indent: 0 !important;
    }

    h4 {
        font-size: 16px !important;
        margin: 0 0 8px 0 !important;
    }

    h5 {
        font-size: 14px !important;
        margin: 0 0 6px 0 !important;
    }

    h6 {
        font-size: 12px !important;
        margin: 0 0 6px 0 !important;
    }

    /* === HIDE DESKTOP NAVIGATION === */
    .navWrap,
    #nav,
    #nav ul,
    #nav .menu,
    .navigation,
    .menu {
        display: none !important;
        visibility: hidden !important;
    }

    /* === SHOW MOBILE NAVIGATION === */
    .mobile-nav-toggle,
    .mobile-nav-menu,
    .mobile-menu-toggle {
        display: block !important;
        visibility: visible !important;
    }

    /* === MINIMAL LOGOBAR FIX === */
    /* Don't change positioning, just allow overflow and basic responsive behavior */
    #logobar {
        width: 100% !important;
        max-width: 100% !important;
        padding: 15px 20px !important;
        position: relative !important;
        background: #ffffff !important;
        box-sizing: border-box !important;
        border-bottom: 1px solid #ddd !important;
        overflow: visible !important; /* Allow social icons to show */
        height: auto !important;
        min-height: 70px !important;
    }

    /* Keep social media icons as they were - minimal changes */
    .twitter,
    .insta,
    .whatsapp,
    .facebook {
        /* Don't override positioning - let existing CSS handle it */
        width: auto !important;
        height: auto !important;
    }

        /* Only resize social media images */
        .twitter img,
        .insta img,
        .whatsapp img,
        .facebook img {
            max-width: 30px !important;
            max-height: 30px !important;
            width: auto !important;
            height: auto !important;
        }

    /* Logo adjustments */
    #logo {
        max-width: 60% !important;
    }

        #logo img,
        #logobar > a img {
            max-width: 100% !important;
            height: auto !important;
            max-height: 50px !important;
        }

    /* === RESPONSIVE CONTAINER === */
    #wrap {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* === MOBILE HAMBURGER BUTTON === */
    .mobile-menu-toggle {
        position: fixed !important;
        top: 15px !important;
        right: 15px !important;
        z-index: 1000001 !important;
        background: #e72122 !important;
        color: white !important;
        border: none !important;
        padding: 0 !important;
        border-radius: 5px !important;
        font-size: 18px !important;
        font-weight: bold !important;
        cursor: pointer !important;
        width: 50px !important;
        height: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
    }

        .mobile-menu-toggle:hover {
            background: #c91e1f !important;
        }

    /* === MOBILE NAVIGATION MENU === */
    .mobile-nav-menu {
        position: fixed !important;
        top: 0 !important;
        right: -320px !important;
        width: 300px !important;
        height: 100vh !important;
        background: #2a2a2a !important;
        z-index: 1000000 !important;
        transition: right 0.3s ease !important;
        overflow-y: auto !important;
        padding: 70px 0 20px 0 !important;
        box-shadow: -10px 0 20px rgba(0,0,0,0.8) !important;
        border-left: 3px solid #e72122 !important;
    }

        .mobile-nav-menu.active {
            right: 0 !important;
        }

    /* === MENU CLOSE BUTTON === */
    .mobile-nav-close {
        position: absolute !important;
        top: 15px !important;
        right: 15px !important;
        background: #e72122 !important;
        color: white !important;
        border: none !important;
        font-size: 24px !important;
        font-weight: bold !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 3px !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
    }

        .mobile-nav-close:hover {
            background: #c91e1f !important;
        }

    /* === MENU ITEMS === */
    .mobile-nav-menu ul {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .mobile-nav-menu li {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid #444 !important;
        position: relative !important;
        background: #2a2a2a !important;
    }

    .mobile-nav-menu a {
        display: block !important;
        width: 100% !important;
        padding: 15px 20px !important;
        color: #ffffff !important;
        text-decoration: none !important;
        font-size: 16px !important;
        font-weight: normal !important;
        background: transparent !important;
        border: none !important;
        box-sizing: border-box !important;
        line-height: 1.4 !important;
        transition: background 0.3s ease !important;
        font-family: Arial, Helvetica, sans-serif !important;
    }

        .mobile-nav-menu a:hover {
            background: #444444 !important;
            color: #ffffff !important;
        }

    /* === SUBMENU STYLES === */
    .mobile-nav-menu .has-submenu > a::after {
        content: '+' !important;
        float: right !important;
        font-size: 20px !important;
        line-height: 1 !important;
    }

    .mobile-nav-menu .has-submenu.open > a::after {
        content: '-' !important;
    }

    .mobile-nav-menu .submenu {
        display: none !important;
        background: #1a1a1a !important;
    }

        .mobile-nav-menu .submenu.open {
            display: block !important;
        }

        .mobile-nav-menu .submenu a {
            padding-left: 40px !important;
            font-size: 14px !important;
            border-bottom: 1px solid #333 !important;
        }

    /* === OVERLAY === */
    .mobile-nav-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.7) !important;
        z-index: 999999 !important;
        display: none !important;
    }

        .mobile-nav-overlay.active {
            display: block !important;
        }

    /* === CONTENT AREA === */
    #content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px 15px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* === SINGLE COLUMN LAYOUT === */
    .doubleColLeft,
    .doubleColRight,
    .single,
    .single2,
    .col,
    .column,
    .grid-item,
    .productOverview,
    .download,
    .software,
    .sidebar {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin: 0 0 20px 0 !important;
        padding: 0 !important;
        clear: both !important;
        display: block !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* === RESPONSIVE IMAGES === */
    img {
        max-width: 100% !important;
        height: auto !important;
        box-sizing: border-box !important;
    }

    /* === FOOTER === */
    #footerWrap {
        width: 100% !important;
        max-width: 100% !important;
        padding: 30px 0 !important;
        margin-top: 30px !important;
        background: #cc0000 !important;
        background-image: none !important;
        min-height: 180px !important;
        overflow-x: hidden !important;
    }

    #footer {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px 15px !important;
        box-sizing: border-box !important;
        text-align: center !important;
        color: white !important;
        font-family: Arial, sans-serif !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        background: none !important;
        margin: 0 !important;
    }

        #footer p,
        #footer div,
        #footer span,
        #footer a {
            color: white !important;
            font-family: Arial, sans-serif !important;
            margin: 8px 0 !important;
            display: block !important;
            width: 100% !important;
            box-sizing: border-box !important;
        }

    /* === FORCE WIDTH CONSTRAINTS === */
    * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Override any fixed widths */
    [style*="width"] {
        width: auto !important;
        max-width: 100% !important;
    }

    /* Responsive tables */
    table {
        width: 100% !important;
        display: block !important;
        overflow-x: auto !important;
    }

    /* Responsive forms */
    input, textarea, select {
        max-width: 100% !important;
        box-sizing: border-box !important;
        font-family: Arial, sans-serif !important;
    }
}

/* ========================================
   SMALL MOBILE (480px and below)
   ======================================== */
@media screen and (max-width: 480px) {

    #logobar {
        padding: 10px 15px !important;
    }

        #logo img,
        #logobar > a img {
            max-height: 45px !important;
        }

    .mobile-menu-toggle {
        width: 45px !important;
        height: 45px !important;
        top: 12px !important;
        right: 12px !important;
    }

    .twitter img,
    .insta img,
    .whatsapp img,
    .facebook img {
        max-width: 26px !important;
        max-height: 26px !important;
    }

    #content {
        padding: 15px 10px !important;
    }

    h2 {
        font-size: 20px !important;
    }

    h3 {
        font-size: 16px !important;
    }

    h4 {
        font-size: 14px !important;
    }

    /* Stack grid systems */
    .grid-1-12, .grid-2-12, .grid-3-12, .grid-4-12,
    .grid-5-12, .grid-6-12, .grid-7-12, .grid-8-12,
    .grid-9-12, .grid-10-12, .grid-11-12, .grid-12-12,
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
    .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
        width: 100% !important;
        float: none !important;
        margin: 0 0 15px 0 !important;
        clear: both !important;
        display: block !important;
    }
}