/* cmsms stylesheet: Custom Theme Overrides modified: 05/29/26 16:22:55 */
/*
 * Custom Overrides for M6 Bootstrap Navigation
 * MODERN WILDCATS NAVY & GOLD EDITION
 * Sleek, full-width design with bottom-border hover effects.
 * UPDATED: Bulletproof mobile hamburger menu (fixed empty square box issue).
 */

/* Force the entire navigation background to Navy Blue with a Gold bottom trim */
.navbar-header-full, 
.navbar-header-full .navbar-inner,
.navbar-header-full .container {
    background-color: #00205B !important; /* Wildcats Navy Blue */
    border-bottom: 3px solid #FFC72C !important; /* Wildcats Gold Trim */
}

/* --- Desktop Styles (min-width: 768px) --- */
@media (min-width: 768px) {
    /* Ensure the main navigation container is visible, centered, and contained */
    .navbar-header-full .navbar-collapse#bs-example-navbar-collapse-1 {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        float: none !important;
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 1170px !important; 
        border: none !important;
    }

    /* Flexbox for perfect centering, WITH WRAP so it never cuts off edges */
    .navbar-header-full .navbar-collapse#bs-example-navbar-collapse-1 .nav.navbar-nav {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important; 
        align-items: center !important;
        flex-wrap: wrap !important; 
        margin: 0 auto !important;
        padding: 0 !important;
        list-style: none !important;
        height: auto !important;
        width: 100% !important;
    }

    .navbar-header-full .navbar-collapse#bs-example-navbar-collapse-1 .nav.navbar-nav > li {
        display: block !important;
        float: none !important;
        margin: 0 !important; 
        height: auto !important;
    }

    /* Sleek Modern Links */
    .navbar-header-full .navbar-collapse#bs-example-navbar-collapse-1 .nav.navbar-nav > li > a {
        display: block !important;
        padding: 16px 12px !important; 
        color: #FFFFFF !important; 
        text-decoration: none !important;
        background-color: transparent !important; 
        border: none !important; 
        border-bottom: 4px solid transparent !important; 
        border-radius: 0 !important; 
        transition: all 0.2s ease-in-out !important; 
        text-transform: uppercase !important; 
        font-weight: 800 !important; 
        font-size: 13px !important; 
        letter-spacing: 0.5px !important; 
        white-space: nowrap !important; 
    }

    /* Sleek Hover & Active State: Gold Text & Gold Bottom Underline */
    .navbar-header-full .navbar-collapse#bs-example-navbar-collapse-1 .nav.navbar-nav > li > a:hover,
    .navbar-header-full .navbar-collapse#bs-example-navbar-collapse-1 .nav.navbar-nav > li.active > a,
    .navbar-header-full .navbar-collapse#bs-example-navbar-collapse-1 .nav.navbar-nav > li.currentpage > a {
        background-color: rgba(255, 199, 44, 0.05) !important; 
        color: #FFC72C !important; 
        border-bottom: 4px solid #FFC72C !important; 
    }

    /* Hide the hamburger button and mobile brand on desktop */
    .navbar-header-full .navbar-toggle,
    #ar-brand.hidden-lg.hidden-md.hidden-sm {
        display: none !important;
    }
}

/* --- Mobile Styles (max-width: 767px) --- */
@media (max-width: 767px) {
    /* Mobile Dropdown Menu Container */
    .navbar-header-full .navbar-collapse.collapse {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        width: 100% !important;
        background-color: #001640 !important; 
        top: 100% !important;
        left: 0 !important;
        z-index: 1000 !important;
        border-top: 2px solid #FFC72C !important; 
        box-shadow: 0 10px 20px rgba(0,0,0,0.5) !important; 
    }

    .navbar-header-full .navbar-collapse.collapse.in {
        display: block !important;
        visibility: visible !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Hamburger Button Outer Box */
    .navbar-header-full .navbar-toggle {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 4px !important; /* Spaces the 3 lines perfectly */
        position: relative !important;
        float: right !important;
        margin-top: 12px !important; 
        margin-right: 15px !important;
        background-color: transparent !important;
        border: 2px solid #FFC72C !important; 
        border-radius: 4px !important;
        padding: 10px !important;
        width: 44px !important;
        height: 38px !important;
    }
    
    /* Pure CSS Fallback: Explicitly forces 3 crisp Gold bars to render inside the box */
    .navbar-header-full .navbar-toggle::before {
        content: "" !important;
        display: block !important;
        width: 20px !important;
        height: 2px !important;
        background-color: #FFC72C !important;
        box-shadow: 0 6px 0 #FFC72C, 0 -6px 0 #FFC72C !important; /* Draws the top and bottom lines natively */
        margin-top: 0px !important;
    }

    /* Hide any broken icon text/fonts that were causing the empty square */
    .navbar-header-full .navbar-toggle .fa,
    .navbar-header-full .navbar-toggle .fa-bars,
    .navbar-header-full .navbar-toggle span:not(.icon-bar) {
        display: none !important;
    }

    /* Mobile Brand / Logo Text */
    #ar-brand.navbar-brand.hidden-lg.hidden-md.hidden-sm {
        display: block !important; 
        float: left !important;
        padding: 15px !important;
        color: #FFC72C !important; 
        font-size: 22px !important;
        font-weight: 900 !important;
        letter-spacing: 1px !important;
        text-transform: uppercase !important;
    }

    /* Vertical stacking of menu items */
    .navbar-header-full .navbar-collapse .nav.navbar-nav {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .navbar-header-full .navbar-collapse .nav.navbar-nav > li {
        display: block !important;
        float: none !important;
        width: 100% !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; 
        margin: 0 !important; 
    }

    /* Mobile Link Styling */
    .navbar-header-full .navbar-collapse .nav.navbar-nav > li > a {
        padding: 15px 20px !important; 
        color: #FFFFFF !important; 
        background-color: transparent !important; 
        border: none !important; 
        border-left: 4px solid transparent !important; 
        text-transform: uppercase !important; 
        font-weight: 700 !important; 
        font-size: 15px !important; 
        text-align: left !important; 
        transition: all 0.2s ease-in-out !important;
    }

    /* Mobile Hover & Active State */
    .navbar-header-full .navbar-collapse .nav.navbar-nav > li > a:hover,
    .navbar-header-full .navbar-collapse .nav.navbar-nav > li.active > a,
    .navbar-header-full .navbar-collapse .nav.navbar-nav > li.currentpage > a {
        background-color: rgba(255, 199, 44, 0.1) !important; 
        color: #FFC72C !important; 
        border-left: 4px solid #FFC72C !important; 
    }
}

/* Ensure header text doesn't clash */
header#header-full-top .header-full-title p {
    color: #00205B !important;
}
/* cmsms stylesheet: Custom modified: 05/29/26 16:33:33 */
/* =========================================
   1. Global Variables (Colors)
   ========================================= */
:root {
    --bg-light: #f8f9fa;
    --bg-dark: #343a40;
    --bg-primary: #007bff;
    --bg-secondary: #6c757d;
    --bg-success: #28a745;
    --bg-danger: #dc3545;
    --bg-warning: #ffc107;
    --bg-info: #17a2b8;
    --border-color: #ddd;
}

/* =========================================
   2. Branding & Header
   ========================================= */
.navbar-default .navbar-brand {
    font-family: "Muli", sans-serif;
    font-size: 28px;
    font-weight: 300;
    color: #000;
    text-transform: lowercase;
    word-spacing: -6px;
    background: none; /* Consolidates individual background properties */
    padding-left: 0;
}

.header-full-title {
    float: left;
    min-height: 80px; /* Ensures container doesn't collapse if text is short */
    padding-left: 225px;
    background: url('https://www.wggh.net/uploads/images/wgghlogo1.png') no-repeat left center;
    background-size: contain;
    overflow: hidden;
}

/* Custom Media Queries for Responsiveness */
@media (max-width: 768px) {
    .header-full-title {
        padding-left: 0; 
        background-position: center; /* Centers the logo on mobile */
    }

    .navbar-default .navbar-brand {
        font-size: 24px;
    }
}

/* =========================================
   3. Spacing Utilities (Margins)
   ========================================= */
/* All sides */
.m-0 { margin: 0 !important; }
.m-1 { margin: .25rem !important; }
.m-2 { margin: .5rem !important; }
.m-3 { margin: 1rem !important; }
.m-4 { margin: 1.5rem !important; }
.m-5 { margin: 3rem !important; }

/* Margin - Specific Directions (FIXED) */
.mt-0 { margin-top: 0 !important; }
.mr-0 { margin-right: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.ml-0 { margin-left: 0 !important; }

.mt-1 { margin-top: .25rem !important; }
.mr-1 { margin-right: .25rem !important; }
.mb-1 { margin-bottom: .25rem !important; }
.ml-1 { margin-left: .25rem !important; }

.mt-2 { margin-top: .5rem !important; }
.mr-2 { margin-right: .5rem !important; }
.mb-2 { margin-bottom: .5rem !important; }
.ml-2 { margin-left: .5rem !important; }

.mt-3 { margin-top: 1rem !important; }
.mr-3 { margin-right: 1rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.ml-3 { margin-left: 1rem !important; }

.mt-4 { margin-top: 1.5rem !important; }
.mr-4 { margin-right: 1.5rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.ml-4 { margin-left: 1.5rem !important; }

.mt-5 { margin-top: 3rem !important; }
.mr-5 { margin-right: 3rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.ml-5 { margin-left: 3rem !important; }

/* Margin - X and Y Axes (ADDED missing utilities) */
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.mx-1 { margin-left: .25rem !important; margin-right: .25rem !important; }
.my-1 { margin-top: .25rem !important; margin-bottom: .25rem !important; }
.mx-2 { margin-left: .5rem !important; margin-right: .5rem !important; }
.my-2 { margin-top: .5rem !important; margin-bottom: .5rem !important; }
.mx-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.mx-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.mx-5 { margin-left: 3rem !important; margin-right: 3rem !important; }
.my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }

/* Auto Margin (Used for centering) */
.mt-auto { margin-top: auto !important; }
.mr-auto { margin-right: auto !important; }
.mb-auto { margin-bottom: auto !important; }
.ml-auto { margin-left: auto !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }

/* =========================================
   4. Spacing Utilities (Padding)
   ========================================= */
/* All sides */
.p-0 { padding: 0 !important; }
.p-1 { padding: .25rem !important; }
.p-2 { padding: .5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.p-5 { padding: 3rem !important; }

/* Padding - Specific Directions (FIXED) */
.pt-0 { padding-top: 0 !important; }
.pr-0 { padding-right: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pl-0 { padding-left: 0 !important; }

.pt-1 { padding-top: .25rem !important; }
.pr-1 { padding-right: .25rem !important; }
.pb-1 { padding-bottom: .25rem !important; }
.pl-1 { padding-left: .25rem !important; }

.pt-2 { padding-top: .5rem !important; }
.pr-2 { padding-right: .5rem !important; }
.pb-2 { padding-bottom: .5rem !important; }
.pl-2 { padding-left: .5rem !important; }

.pt-3 { padding-top: 1rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pl-3 { padding-left: 1rem !important; }

.pt-4 { padding-top: 1.5rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pl-4 { padding-left: 1.5rem !important; }

.pt-5 { padding-top: 3rem !important; }
.pr-5 { padding-right: 3rem !important; }
.pb-5 { padding-bottom: 3rem !important; }
.pl-5 { padding-left: 3rem !important; }

/* Padding - X and Y Axes */
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.px-1 { padding-left: .25rem !important; padding-right: .25rem !important; }
.py-1 { padding-top: .25rem !important; padding-bottom: .25rem !important; }
.px-2 { padding-left: .5rem !important; padding-right: .5rem !important; }
.py-2 { padding-top: .5rem !important; padding-bottom: .5rem !important; }
.px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.px-5 { padding-left: 3rem !important; padding-right: 3rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

/* =========================================
   5. Text & Alignment
   ========================================= */
.text-lowercase { text-transform: lowercase !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }

/* =========================================
   6. Display & Flexbox
   ========================================= */
.d-flex { display: flex !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.justify-content-center { justify-content: center !important; }
.align-items-center { align-items: center !important; }

/* =========================================
   7. Backgrounds (Using Variables)
   ========================================= */
.bg-light { background-color: var(--bg-light) !important; }
.bg-dark { background-color: var(--bg-dark) !important; }
.bg-primary { background-color: var(--bg-primary) !important; }
.bg-secondary { background-color: var(--bg-secondary) !important; }
.bg-success { background-color: var(--bg-success) !important; }
.bg-danger { background-color: var(--bg-danger) !important; }
.bg-warning { background-color: var(--bg-warning) !important; }
.bg-info { background-color: var(--bg-info) !important; }

/* =========================================
   8. Borders (Using Variables)
   ========================================= */
.border-0 { border: none !important; }
.border-top { border-top: 1px solid var(--border-color) !important; }
.border-bottom { border-bottom: 1px solid var(--border-color) !important; }
.border-left { border-left: 1px solid var(--border-color) !important; }
.border-right { border-right: 1px solid var(--border-color) !important; }
.border { border: 1px solid var(--border-color) !important; }