/* ==========================================================================
   SUMMARY OF INSTRUCTIONS (FILE NAVIGATION & FORMATTING)
   ==========================================================================
   S1. PURPOSE. Establish a rigid structural framework and visual hierarchy 
   to ensure rapid element identification, modification, and code uniformity.
   
   S2. SCOPE. File is partitioned into Four primary operational environments: 
   Summary (S) Global (G), Desktop-Only (D), and Mobile-Only (M).
   
   S3. NOMENCLATURE.
      S3.1 Group Labels (e.g., S1, G1, D1, M1) denote major styling categories.
      S3.2 Target Selectors (e.g., S1.1, G1.1, D1,1 M2.1) identify specific CSS elements.
      S3.3 Property Adjustments (e.g., S1.1.1, G1.1.1, D1.1.1, M3.1.2) define specific behaviors.
      
   S4. EXECUTION REQUIREMENTS.
      S4.1 Environment Dividers: Major operational environments SHALL be separated 
            by full-width comment blocks utilizing 74 equals signs (=).
      S4.2 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.
      S4.3 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.
      S4.4 Property Adjustment Alignment: SHALL be placed inline, uniformly 
            aligned exactly one tab-stop (4 spaces) to the right of the 
            property's terminal semicolon (;).
      S4.5 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 */
}

/* --- G4. HIDES THE VETERANS CRISIS LINE IMAGE AND LINK --- */

/* G4.1 Targets the Veterans Crisis Line anchor link by its specific ID */
#dnn_FooterBanner_hlVcl {
    display: none !important;    /* G4.1.1 Removes the element entirely from the visual page layout */
}

/* --- G5. REMOVES BACKGROUND OF HOSTED BY WEB.MIL, MAKES TEXT WHITE, AND ADDS HOVER UNDERLINE --- */

/* G5.1 Targets the parent container wrapping the footer banner */
.skin-footer-banner {
    background-color: transparent !important;    /* G5.1.1 Overrides the container's background to make it fully transparent */
    background: none !important;    /* G5.1.2 Acts as a fallback to strip any gradients or images applied to the background */
}

/* G5.2 Targets the Hosted by WEB.mil anchor link by its specific ID */
#dnn_FooterBanner_hlDmaLink {
    color: #ffffff !important;    /* G5.2.1 Forces the text color to be bright white */
}

/* G5.3 Targets the Hosted by WEB.mil anchor link specifically when hovered */
#dnn_FooterBanner_hlDmaLink:hover {
    text-decoration: underline !important;    /* G5.3.1 Forces a text underline to appear beneath the element */
}

/* --- FIX SLIDESHOW ASPECT RATIO --- */
.slideshow-20075 .slide-inner {
    background-size: cover !important;
    background-position: center center !important;
}

/* ==========================================================================
   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(2.0) !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. TMD STYLE: MOBILE NAV BUTTON (THIN TRANSPARENT BOX WITH WHITE OUTLINE) --- */

    .skin-header-left .navbar-toggle.skin-nav-toggle {
        order: 3 !important;    /* M7.1.1 Places this element below the logo */
        width: 90% !important;    /* M7.1.2 Set to 90% so edges are visible on screen */
        float: none !important;    /* M7.1.3 Removes standard layout floating */
        display: flex !important;    /* M7.1.4 Applies flexbox layout to align the icon and text */
        justify-content: center !important;    /* M7.1.5 Centers the contents horizontally */
        align-items: center !important;    /* M7.1.6 Vertically aligns the icon and the text */
        margin: 0 auto !important;    /* M7.1.7 Centers the button itself and resets margins */
        margin-top: 100px !important;    /* M7.1.8 Pushes the button down visually from elements above */
        margin-bottom: -20px !important;    /* M7.1.9 Pulls elements below upward by applying a negative margin */
        border-radius: 4px !important;    /* M7.1.10 Very subtle 4px curve for a modern, rigid box (matching TMD) */
        padding: 8px 20px !important;    /* M7.1.11 Thin top/bottom padding */
        background-color: transparent !important;    /* M7.1.12 Makes the box background invisible */
        background: none !important;    /* M7.1.13 Strips theme gradients */
        border: 2px solid #ffffff !important;    /* M7.1.14 2px bright white outline around the box */
        color: #ffffff !important;    /* M7.1.15 Forces the icon and text inside to be white */
    }

    /* M7.2 Injects the visible text right next to the hamburger icon */
    .skin-header-left .navbar-toggle.skin-nav-toggle::after {
        content: "Navigation Toggle" !important;    /* M7.2.1 Physically types the text into the button */
        font-family: 'Noto Sans', sans-serif !important;    /* M7.2.2 Uses the TMD font */
        font-size: 14px !important;    /* M7.2.3 Clean, readable text size */
        font-weight: 700 !important;    /* M7.2.4 Bold text */
        margin-left: 10px !important;    /* M7.2.5 Gap between the hamburger icon and text */
        text-transform: uppercase !important;    /* M7.2.6 ALL CAPS */
        letter-spacing: 0.5px !important;    /* M7.2.7 Spacing to match navigation items */
    }

    /* --- M8. ADJUSTS THE SIZE OF THE HAMBURGER ICON TO MATCH TEXT --- */

    .skin-header-left .navbar-toggle.skin-nav-toggle .fa-bars {
        font-size: 18px !important;    /* M8.1.1 Scaled down slightly so it balances with the 14px text */
    }

    /* --- 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 */
    }

}