/* ==========================================================================
   SUMMARY OF INSTRUCTIONS (FILE NAVIGATION & FORMATTING)
   ==========================================================================
   1. PURPOSE. Establish a rigid structural framework and visual hierarchy 
   to ensure rapid element identification, modification, and code uniformity.
   
   2. SCOPE. File is partitioned into three primary operational environments: 
   Global (G), Desktop-Only (D), and Mobile-Only (M).
   
   3. NOMENCLATURE. 
      a. Group Labels (e.g., G1, D1, M1) denote major styling categories.
      b. Target Selectors (e.g., G1.1, M2.1) identify specific CSS elements.
      c. Property Adjustments (e.g., G1.1.1, M3.1.2) define specific behaviors.
      
   4. EXECUTION REQUIREMENTS. 
      a. Environment Dividers: Major operational environments SHALL be separated 
         by full-width comment blocks utilizing 74 equals signs (=).
      b. Group Label Formatting: SHALL utilize ALL CAPS, be prefixed and 
         suffixed by three dashes (---), and utilize a trailing blank line 
         to establish a distinct visual sector.
      c. Target Selector Placement: SHALL be aligned flush-left on the line 
         immediately preceding the targeted CSS selector to maintain direct 
         visual coupling with the code.
      d. Property Adjustment Alignment: SHALL be placed inline, uniformly 
         aligned exactly one tab-stop (4 spaces) to the right of the 
         property's terminal semicolon (;).
      e. Code Indentation: CSS properties inside rule sets SHALL be indented 
         exactly one tab-stop (4 spaces) from the left margin.
   ========================================================================== */

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

/* --- G1. MAKES SEARCH AND SOCIAL ICONS BRIGHT WHITE --- */

/* G1.1 Targets the search 'go' button inside the search skin container */
.skin-search .skin-search-go,
/* G1.2 Targets the mobile search link inside the search skin container */
.skin-search .mobile-search-link,
/* G1.3 Targets any element with the social icon class */
.social-icon {
    color: #ffffff !important;    /* G1.1.1 Forces the text and icon color to be bright white */
}

/* --- G2. ADDS AN UNDERLINE ON HOVER FOR SEARCH AND SOCIAL ICONS --- */

/* G2.1 Targets the search 'go' button specifically when hovered */
.skin-search .skin-search-go:hover,
/* G2.2 Targets the mobile search link specifically when hovered */
.skin-search .mobile-search-link:hover,
/* G2.3 Targets the social icon specifically when hovered */
.social-icon:hover {
    text-decoration: underline !important;    /* G2.1.1 Forces a text underline to appear beneath the element */
}

/* --- G3. LIFTS THE MAIN NAVIGATION BAR UP TO ALIGN WITH THE BANNER --- */

/* G3.1 Targets the main navigation collapse wrapper */
.navbar-collapse.nav-main-collapse {
    margin-top: -10px !important;    /* G3.1.1 Adjust this negative number (e.g., -15px, -5px) until flush */
}


/* ==========================================================================
   DESKTOP ONLY STYLES (Monitors & Large Screens)
   ========================================================================== */

@media (min-width: 768px) {

    /* --- D1. ADJUSTS DESKTOP NAVIGATION SPACING --- */

    /* D1.1 Targets main nav items on desktop */
    .navbar-collapse.nav-main-collapse .nav-main > li {
        margin-right: 15px !important;    /* D1.1.1 Adds horizontal spacing between desktop menu items */
    }

}


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

@media (max-width: 767px) {

    /* --- M1. PREVENTS HORIZONTAL SCROLLING ON MOBILE AND FIXES RIGHT-SIDE GAP --- */

    /* M1.1 Targets the root HTML document element */
    html, 
    /* M1.2 Targets the main body element of the page */
    body {
        max-width: 100vw !important;    /* M1.1.1 Restricts maximum width to exactly 100% of viewport */
        overflow-x: hidden !important;    /* M1.1.2 Hides horizontal spill-over, preventing side-scrolling */
    }
    
    /* --- M2. CENTERS THE ITEMS INSIDE THE MOBILE DROP-DOWN MENU SAFELY --- */

    /* M2.1 Targets the individual list items within the main navigation */
    .navbar-collapse.nav-main-collapse .nav-main > li {
        width: 100% !important;    /* M2.1.1 Forces the list item to take up the full container width */
        float: none !important;    /* M2.1.2 Removes horizontal floating so items stack vertically */
    }
    
    /* M2.2 Targets the anchor links immediately inside the navigation items */
    .navbar-collapse.nav-main-collapse .nav-main > li > a {
        text-align: center !important;    /* M2.2.1 Aligns the text of the link to the direct center */
        display: block !important;    /* M2.2.2 Makes the link fill the full width of the row */
    }

    /* --- M3. RESTRUCTURES THE HEADER TO STACK VERTICALLY --- */

    /* M3.1 Targets the left section of the header skin */
    .skin-header-left {
        display: flex !important;    /* M3.1.1 Enables a flexbox layout to easily align child elements */
        flex-direction: column !important;    /* M3.1.2 Changes flex direction to column so elements stack vertically */
        align-items: center !important;    /* M3.1.3 Centers the flex child elements horizontally */
        width: 100% !important;    /* M3.1.4 Forces the container to take up the full available width */
    }

    /* --- M4. CENTERS AND ENLARGES THE LOGO AT THE TOP --- */

    /* M4.1 Targets the logo container inside the left header */
    .skin-header-left .skin-logo {
        order: 1 !important;    /* M4.1.1 Pushes this element to the very top of the flex container */
        display: flex !important;    /* M4.1.2 Applies flexbox layout to the logo container itself */
        justify-content: center !important;    /* M4.1.3 Centers the contents of the logo container horizontally */
        width: 100% !important;    /* M4.1.4 Forces the logo container to stretch to full width */
        margin-top: 15px !important;    /* M4.1.5 Adds external spacing above the logo */
        margin-bottom: 15px !important;    /* M4.1.6 Adds external spacing below the logo */
    }

    /* --- M5. SCALES UP THE IMAGE/LINK INSIDE THE LOGO CONTAINER --- */

    /* M5.1 Targets the anchor link wrapping the logo image */
    .skin-header-left .skin-logo a,
    /* M5.2 Targets the actual logo image element */
    .skin-header-left .skin-logo img {
        transform: scale(1.5) !important;    /* M5.1.1 Enlarges by 50% (Use 2.0 for double size, etc.) */ 
        transform-origin: center center !important;    /* M5.1.2 Ensures visual scaling originates from the direct center */
    }

    /* --- M6. HIDES THE SITE TITLE COMPLETELY ON MOBILE --- */

    /* M6.1 Targets the title text element inside the left header */
    .skin-header-left .skin-title {
        display: none !important;    /* M6.1.1 Removes the element entirely from the visual page layout */
    }

    /* --- M7. STYLES THE MOBILE NAV BUTTON (FULL WIDTH, CENTERED) --- */

    /* M7.1 Targets the mobile navigation toggle button inside the header */
    .skin-header-left .navbar-toggle.skin-nav-toggle {
        order: 3 !important;    /* M7.1.1 Places this element below the logo (which is order 1) */
        width: 100% !important;    /* M7.1.2 Forces the button container to take up full width */
        float: none !important;    /* M7.1.3 Removes standard layout floating */
        display: flex !important;    /* M7.1.4 Applies flexbox layout to align the icon inside */
        justify-content: center !important;    /* M7.1.5 Centers the icon horizontally inside the button */
        margin: 0 !important;    /* M7.1.6 Resets all default external margins to zero */
        margin-top: 100px !important;    /* M7.1.7 Pushes the button down visually from elements above */
        margin-bottom: -60px !important;    /* M7.1.8 Pulls elements below upward by applying a negative margin */
        border-radius: 0 !important;    /* M7.1.9 Removes rounded corners to make the button edges sharp */
    }

    /* --- M8. INCREASES THE SIZE OF THE HAMBURGER ICON --- */

    /* M8.1 Targets the FontAwesome bars icon inside the toggle button */
    .skin-header-left .navbar-toggle.skin-nav-toggle .fa-bars {
        font-size: 28px !important;    /* M8.1.1 Increases the physical font size of the icon to 28 pixels */
    }

    /* --- M9. LOCKS HEADER CONTAINER TO PREVENT HORIZONTAL SNAP --- */

    /* M9.1 Targets the primary header wrapper element by its ID */
    #main-header {
        position: relative !important;    /* M9.1.1 Breaks any sticky behavior, forcing standard document flow */
        transition: none !important;    /* M9.1.2 Disables any CSS transitions (smooth state changes) */
        animation: none !important;    /* M9.1.3 Disables any CSS keyframe animations on the header */
    }

    /* --- M10. STRIPS THE DEFAULT BOOTSTRAP PADDING THAT PUSHES THE MENU --- */

    /* M10.1 Targets the main header wrapper */
    #main-header, 
    /* M10.2 Targets the primary header skin class */
    .skin-header, 
    /* M10.3 Targets the standard container element inside the header */
    .skin-header .container, 
    /* M10.4 Targets the left-side wrapper of the header */
    .skin-header-left {
        width: 100% !important;    /* M10.1.1 Forces the width to exactly 100% of its parent */
        max-width: 100% !important;    /* M10.1.2 Sets an absolute maximum width boundary of 100% */
        padding-left: 0 !important;    /* M10.1.3 Removes internal spacing on the left side */
        padding-right: 0 !important;    /* M10.1.4 Removes internal spacing on the right side */
        margin-left: 0 !important;    /* M10.1.5 Removes external spacing on the left side */
        margin-right: 0 !important;    /* M10.1.6 Removes external spacing on the right side */
        box-sizing: border-box !important;    /* M10.1.7 Ensures padding/borders map directly into total width */
        transition: none !important;    /* M10.1.8 Disables all CSS transitions for these elements */
        animation: none !important;    /* M10.1.9 Disables all CSS animations for these elements */
    }

    /* --- M11. EXPANDS THE PHYSICAL HEIGHT AND VERTICAL PADDING OF THE HEADER --- */

    /* M11.1 Targets the header skin container */
    .skin-header {
        padding-top: 60px !important;    /* M11.1.1 Adds internal spacing to stretch the top */
        padding-bottom: 60px !important;    /* M11.1.2 Adds internal spacing to stretch the bottom */
        height: auto !important;    /* M11.1.3 Allows height to grow dynamically based on content */
    }

}