/* ============================================
   LIBASTEX.COM - CSS Fixes
   Issues: Mobile responsive, navbar, text color
   ============================================ */

/* =============================================
   1. NAVBAR - Mobile Toggle Menu Fix
   ============================================= */

/* When nav-collapse is toggled open */
.navbar-collapse.nav-collapse.in,
.navbar-collapse.nav-collapse.collapse.in {
    display: block !important;
    overflow-y: auto !important;
    max-height: 400px !important;
}

/* Style the mobile dropdown menu */
@media (max-width: 767px) {
    .navbar-collapse.nav-collapse {
        background-color: rgba(255, 255, 255, 0.98) !important;
        border-top: 1px solid #ddd !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
        padding: 10px 0 !important;
        max-height: 80vh !important;
    }

    .navbar-collapse.nav-collapse .navbar-nav > li > a {
        color: #333 !important;
        padding: 12px 20px !important;
        font-size: 15px !important;
        border-bottom: 1px solid #f0f0f0 !important;
        display: block !important;
    }

    .navbar-collapse.nav-collapse .navbar-nav > li > a:hover,
    .navbar-collapse.nav-collapse .navbar-nav > li > a:focus {
        color: #00bcd4 !important;
        background-color: #f8f8f8 !important;
    }

    .navbar-collapse.nav-collapse .navbar-nav > li.current-menu-item > a,
    .navbar-collapse.nav-collapse .navbar-nav > li.current_page_item > a {
        color: #00bcd4 !important;
        font-weight: 600 !important;
    }

    /* Dropdown submenu items in mobile */
    .navbar-collapse.nav-collapse .navbar-nav .dropdown-menu {
        position: static !important;
        float: none !important;
        width: auto !important;
        background-color: #f5f5f5 !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .navbar-collapse.nav-collapse .navbar-nav .dropdown-menu > li > a {
        color: #555 !important;
        padding: 10px 30px !important;
    }
}


/* =============================================
   2. NAVBAR - Hamburger Icon Fix
   ============================================= */

/* Ensure the toggle button has visible icon bars */
.navbar-toggle {
    display: block;
    position: relative;
    cursor: pointer;
    border: 1px solid #999 !important;
    border-radius: 4px !important;
    padding: 9px 10px !important;
    background: transparent !important;
}

.navbar-toggle .icon-bar {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    background-color: #333 !important;
    border-radius: 1px !important;
}

.navbar-toggle .icon-bar + .icon-bar {
    margin-top: 4px !important;
}

/* If icon-bar elements are missing, create them via CSS */
.navbar-toggle::before,
.navbar-toggle::after {
    content: none;
}

@media (min-width: 768px) {
    .navbar-toggle {
        display: none !important;
    }
}


/* =============================================
   3. NAVBAR - Text Color & Background Fix
   ============================================= */

/* Desktop navbar - ensure links are visible */
@media (min-width: 768px) {
    .ark-header.header-transparent .navbar-nav > li > a {
        color: #333 !important;
        text-shadow: none !important;
    }

    .ark-header.header-transparent .navbar-nav > li > a:hover,
    .ark-header.header-transparent .navbar-nav > li > a:focus {
        color: #00bcd4 !important;
    }

    .ark-header.header-transparent .navbar-nav > li.current-menu-item > a,
    .ark-header.header-transparent .navbar-nav > li.current_page_item > a {
        color: #00bcd4 !important;
    }

    /* Add subtle background to header for readability */
    .ark-header.header-transparent {
        background-color: rgba(255, 255, 255, 0.95) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }
}

/* When header is sticky/scrolled */
.ark-header.header-sticky.affix,
.ark-header.header-sticky.navbar-fixed-top {
    background-color: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12) !important;
}

/* Search icon color fix */
.ark-header .fg-search-trigger {
    color: #333 !important;
}


/* =============================================
   4. TEXT COLOR - White text on light backgrounds
   ============================================= */

/* "Quality & Excellence" heading */
.ffb-id-qgfp7gi,
.ffb-id-qgfp7gi *,
.ffb-id-qgfp7gi::before,
.ffb-id-qgfp7gi::after {
    color: #34343c !important;
}

/* "Excellence through the past years since 2005" */
.ffb-id-qgh037m,
.ffb-id-qgh037m *,
.ffb-id-qgh037m::before,
.ffb-id-qgh037m::after {
    color: #555 !important;
}

/* "Libas Textiles Ltd" heading in that section */
.ffb-id-qggjjif,
.ffb-id-qggjjif *,
.ffb-id-qggjjif::before,
.ffb-id-qggjjif::after {
    color: #34343c !important;
}

/* Ensure the "Fresh Group of Companies" section text is readable */
.ffb-id-qe0kb0h .fg-heading,
.ffb-id-qe0kb0h h2,
.ffb-id-qe0kb0h h3 {
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* "At a glance" and "Capacity Information" headings on dark bg - keep white */
.ffb-id-14rhm8h7,
.ffb-id-14rhm8h7 *,
.ffb-id-14ri2eb2,
.ffb-id-14ri2eb2 *,
.ffb-id-14rhvcka,
.ffb-id-14rhvcka *,
.ffb-id-14ri60h2,
.ffb-id-14ri60h2 * {
    /* These are on dark backgrounds - white text is correct */
}

/* Alert boxes text readability */
.alert .fg-text-dark,
.alert strong {
    color: #333 !important;
}


/* =============================================
   5. MOBILE RESPONSIVE FIXES
   ============================================= */

/* Fix iframe overflow */
iframe {
    max-width: 100% !important;
}

/* Prevent horizontal scroll */
body {
    overflow-x: hidden !important;
}

/* Responsive images */
img {
    max-width: 100%;
    height: auto;
}

/* Fix slider text on mobile */
@media (max-width: 767px) {
    /* Slider text sizing */
    .tp-caption {
        font-size: 80% !important;
    }

    /* Ensure sections don't overflow */
    .fg-section,
    .fg-container,
    .container {
        overflow-x: hidden;
    }

    /* Fix padding on mobile */
    .fg-section {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Make "Discover Now" button more tappable */
    .ffb-btn {
        padding: 10px 24px !important;
        font-size: 14px !important;
    }

    /* Fix column stacking on mobile */
    .col-xs-12 {
        width: 100% !important;
        float: none !important;
    }

    /* Heading sizes on mobile */
    h1 { font-size: 28px !important; }
    h2 { font-size: 24px !important; }
    h3 { font-size: 20px !important; }

    /* Footer spacing */
    .footer .col-md-4,
    .footer .col-sm-4 {
        margin-bottom: 20px;
    }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 991px) {
    .navbar-nav > li > a {
        padding: 10px 8px !important;
        font-size: 13px !important;
    }
}