/* ==========================================
   GLOBAL STYLES (Applies to Desktop & Mobile)
   ========================================== */

/* 1. Makes Search and Social Icons bright white */
.skin-search .skin-search-go,
.skin-search .mobile-search-link,
.social-icon {
    color: #ffffff !important;
}

/* 2. Adds an underline on hover for Search and Social Icons */
.skin-search .skin-search-go:hover,
.skin-search .mobile-search-link:hover,
.social-icon:hover {
    text-decoration: underline !important;
}

/* 3. Lifts the Main Navigation Bar up to align with the banner */
.navbar-collapse.nav-main-collapse {
    margin-top: -10px !important; /* Adjust this negative number (e.g., -15px, -5px) until it sits flush */
}


/* ==========================================
   MOBILE ONLY STYLES (Tablets & Phones)
   ========================================== */

@media (max-width: 767px) {

    /* 4. Prevents horizontal scrolling on mobile and fixes right-side gap */
    html, body {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    /* 5. Centers the items inside the Mobile Drop-Down Menu safely */
    .navbar-collapse.nav-main-collapse .nav-main > li {
        width: 100% !important;
        float: none !important;
    }
    
    .navbar-collapse.nav-main-collapse .nav-main > li > a {
        text-align: center !important;
        display: block !important;
    }

    /* 6. Restructures the Header to stack vertically */
    .skin-header-left {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
    }

/* 7. Centers and Enlarges the Logo at the top */
    .skin-header-left .skin-logo {
        order: 1 !important;
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        margin-top: 15px !important;
        margin-bottom: 15px !important; 
    }

    /* Scales up the image/link inside the logo container */
    .skin-header-left .skin-logo a,
    .skin-header-left .skin-logo img {
        transform: scale(1.5) !important; /* 1.5 makes it 50% larger. Change to 2.0 for double size, etc. */
        transform-origin: center center !important; /* Ensures it grows from the middle, not the edge */
    }

    /* 8. Hides the Site Title completely on mobile */
    .skin-header-left .skin-title {
        display: none !important; 
    }

/* 9. Styles the Mobile Nav Button (Full width, Centered) */
    .skin-header-left .navbar-toggle.skin-nav-toggle {
        order: 3 !important;
        width: 100% !important; 
        float: none !important;
        display: flex !important;
        justify-content: center !important;
        margin: 0 !important;
        margin-top: 200px !important; /* Change this to a positive number to push it down, or 0 if it just needs to drop slightly */
        border-radius: 0 !important; 
    }

    /* 10. Increases the size of the Hamburger Icon */
    .skin-header-left .navbar-toggle.skin-nav-toggle .fa-bars {
        font-size: 28px !important; 
    }

/* 11. Locks header container to prevent horizontal snap on scroll */
    
    /* Disables the sticky/fixed position jump entirely on mobile */
    #main-header {
        position: relative !important; 
        transition: none !important;
        animation: none !important;
    }

    /* Strips the default Bootstrap padding that pushes the menu to the right */
    #main-header, 
    .skin-header, 
    .skin-header .container, 
    .skin-header-left {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
        transition: none !important;
        animation: none !important;
    }

/* Expands the physical height and vertical padding of the header wrapper */
    .skin-header {
        padding-top: 60px !important; /* Increased from 10px to stretch the top */
        padding-bottom: 60px !important; /* Increased from 10px to stretch the bottom */
        height: auto !important;
    }

    /* Locks the main Title Text size so it cannot shrink */
    .skin-header-left .title-text {
        font-size: 18px !important; 
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Locks the Subtitle Text size so it cannot shrink */
    .skin-header-left .subtitle-text {
        font-size: 12px !important; 
        margin: 0 !important;
        padding: 0 !important;
    }
}