/* --- 1. GLOBAL COLORS (Desktop & Mobile) --- */
.navigation-top, 
.main-navigation,
.main-navigation ul, 
.main-navigation ul ul,
.menu-container,
.inspected-element-menu {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: none !important;
    opacity: 1 !important;
    transition: none !important;
}

.navigation-top a, 
.main-navigation a,
.main-navigation ul li a {
    font-family: "Lato", sans-serif;
    color: #000000 !important; /* Black text */
    text-transform: capitalize;
    transition: none !important;
}

/* --- 2. MOBILE & TABLET SPECIFIC FIXES --- */
@media screen and (max-width: 48em) {
    /* Forces the mobile toggle bar to be white */
    .menu-toggle, 
    .main-navigation.toggled-on, 
    .main-navigation.toggled-on ul,
    .main-navigation.toggled-on li {
        background-color: #ffffff !important;
        background: #ffffff !important;
        color: #000000 !important;
    }

    /* Fixed position for mobile header */
    .navigation-top {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 9999;
    }

    /* Ensures menu items are black on mobile */
    .main-navigation.toggled-on a {
        color: #000000 !important;
        padding: 15px;
        display: block;
        border-bottom: 1px solid #f0f0f0;
    }
}

/* --- 3. SUBMENU SPACING & HOVER (Desktop) --- */
.main-navigation ul ul a {
    padding-top: 9.5px !important;  
    padding-bottom: 9.5px !important;
    padding-left: 15px !important;
    line-height: 1.1;
    font-size: 0.95rem;
}

/* THE HOVER EFFECT: Dark Blue with White Text */
.main-navigation ul ul a:hover,
.main-navigation ul ul li.focus > a,
.main-navigation.toggled-on ul ul a:hover {
    background-color: #0B314D !important; 
    color: #ffffff !important; 
}

/* --- 4. CLEANUP --- */
.site-branding, .menu-scroll-down { display: none !important; }
#page .panel-content .entry-title { font-family: 'Lato'; color: #0B314D; }
/* Hides footer on Contact Page only */
.page-id-145 footer, 
.page-id-145 .site-footer, 
.page-id-145 #colophon {
    display: none !important;
}
/* 1. Fix the mobile glitch - pushes content down below the menu */
@media screen and (max-width: 48em) {
    #page {
        margin-top: 70px !important; /* Adjust this number to increase/decrease the gap */
    }
}

/* 2. Add a tiny space/border at the bottom of the menu bar for separation */
.navigation-top {
    border-bottom: 1px solid #f2f2f2 !important; /* Adds a very light grey line to separate menu from site */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Optional: adds a soft shadow for depth */
}

/* 3. Ensure the mobile menu doesn't overlap the top bar */
.main-navigation.toggled-on {
    margin-top: 0;
}