/* ================================================
   MOBILE NAVIGATION DROPDOWN ARROW FIX
   ================================================
   Problem: Dropdown arrows are invisible in mobile menu
   Solution: Make arrows visible with proper contrast
================================================ */

/* Desktop dropdown arrow - after "Classes" text */
#mainmenu > li.has-child:after {
    color: rgba(255, 255, 255, 0.7) !important; /* Light color for visibility */
}

/* When hovering over menu items */
#mainmenu li:hover > a,
#mainmenu li.active > a {
    color: var(--primary-color, #dc3545) !important;
}

/* Mobile menu - make sure dropdown arrows are visible */
@media (max-width: 991px) {
    /* Main menu items in mobile */
    #mainmenu li a {
        color: #ffffff !important; /* White text */
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 15px 20px;
        display: block;
    }

    /* Dropdown arrow in mobile menu */
    #mainmenu > li.has-child:after {
        content: "\f078"; /* FontAwesome down arrow */
        font-family: FontAwesome;
        color: #ffffff !important; /* White arrow */
        opacity: 0.7;
        float: right;
        margin-top: 2px;
        margin-right: 10px;
        font-size: 12px;
    }

    /* When menu item is clicked/expanded */
    #mainmenu > li.has-child.active:after {
        content: "\f077"; /* FontAwesome up arrow */
        color: var(--primary-color, #dc3545) !important; /* Red when active */
        opacity: 1;
    }

    /* Submenu items styling */
    #mainmenu ul li a {
        color: rgba(255, 255, 255, 0.8) !important;
        padding-left: 40px !important; /* Indent submenu items */
        font-size: 14px;
        background: rgba(0, 0, 0, 0.2);
    }

        /* Submenu items hover */
        #mainmenu ul li a:hover {
            color: var(--primary-color, #dc3545) !important;
            background: rgba(0, 0, 0, 0.3);
        }
}

/* Alternative: If you want the arrow to be your brand red color */
.menu-arrow-red #mainmenu > li.has-child:after {
    color: var(--primary-color, #dc3545) !important;
}

/* ==========================================
   MOBILE BANNER / HERO IMAGE FIX - CRITICAL
   ==========================================
   Fix for header covering content in mobile view
   
   PROBLEM: Theme's style.css changes header from 
   position:absolute to position:inherit in mobile,
   but doesn't account for header height pushing 
   content down.
   
   SOLUTION: Force body to have padding-top equal 
   to header height in mobile view.
========================================== */

@media only screen and (max-width: 992px) {
    /* 
       Override theme's header positioning
       Make header stay at top consistently
    */
    header,
    header.fixed,
    header.transparent {
        position: fixed !important;
        top: 0 !important;
        width: 100% !important;
        z-index: 1001 !important;
        background: var(--bg-dark-1) !important;
    }

    /* 
       Add padding to body to account for fixed header
       Adjust this value if your header height is different
    */
    body {
        padding-top: 120px !important;
    }

        /* 
       Reset any top margins on main content 
    */
        main,
        body > main {
            margin-top: 0 !important;
        }

            /* 
       Ensure first section doesn't have negative margins
    */
            section:first-of-type,
            main > section:first-child,
            section.overflow-hidden:first-of-type {
                margin-top: 0 !important;
                padding-top: 0 !important;
            }

    /* 
       For jarallax sections (other pages with banners)
       No extra padding needed since body padding handles it
    */
    section.jarallax {
        margin-top: 0 !important;
    }
}

/* Smaller phones - adjust body padding */
@media only screen and (max-width: 576px) {
    body {
        padding-top: 100px !important;
    }
}

/* ==========================================
   DESKTOP - Ensure no issues on larger screens
   Reset mobile-specific fixes
========================================== */
@media only screen and (min-width: 993px) {
    /* Reset body padding for desktop */
    body {
        padding-top: 0 !important;
    }

    /* Let theme's CSS handle header positioning on desktop */
    header {
        position: absolute !important;
    }
}