/* ==========================================================================
   THEME STYLING FILE: BACKGROUNDS, FONTS, AND COLORS ONLY
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. DESKTOP VIEW TRACK & TOP-LEVEL LINKS
   -------------------------------------------------------------------------- */

/* The main horizontal navigation track background bar color */
#site-navigation.main-navigation {
    background-color: #74889B;
}

/* Primary Top-level links font styling */
.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a {
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
    font-family: inherit;           /* Falls back to your main theme font stack */
    letter-spacing: 0.5px;
    text-transform: none;           /* Change to uppercase if desired */
    transition: opacity 0.2s ease;
}

/* Primary link interactive state */
.main-navigation ul.menu > li > a:hover,
.main-navigation ul.nav-menu > li > a:hover {
    opacity: 0.85;
}


/* --------------------------------------------------------------------------
   B. DESKTOP DROP-DOWN PANELS (2nd & 3rd LEVELS)
   -------------------------------------------------------------------------- */

/* Absolute layout drop-down box panel styling background */
.main-navigation ul ul.sub-menu {
    background-color: #74889B;
    border: 1px solid rgba(255, 255, 255, 0.15); /* Light border boundary divider */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Drop-down nested list fonts */
.main-navigation ul ul.sub-menu a {
    color: #ffffff;
    font-size: 14px;
    font-weight: normal;
    transition: background 0.2s ease;
}

/* Drop-down interactive panel item highlights */
.main-navigation ul ul.sub-menu a:hover {
    background-color: rgba(255, 255, 255, 0.15); /* Soft white hover background overlay */
    color: #ffffff;
}

/* Optional: Make the 3rd level flyout font look slightly different */
.main-navigation ul ul ul.sub-menu a {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
}


/* --------------------------------------------------------------------------
   C. MOBILE VIEW DRAWER TRACK & ACCORDIONS (MAX-WIDTH: 768px)
   -------------------------------------------------------------------------- */

@media screen and (max-width: 768px) {

    /* The sliding drawer panel background color overlay track */
    .main-navigation ul.menu,
    .main-navigation ul.nav-menu {
        background-color: #74889B;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    }

    /* Mobile view primary top-level menu link items */
    .main-navigation ul.menu > li > a,
    .main-navigation ul.nav-menu > li > a {
        color: #ffffff !important;
        font-size: 16px;
        font-weight: bold;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15); /* Divider rule line */
    }

    /* Exposed 2nd-level accordion sublink fonts on small screens */
    .main-navigation ul ul.sub-menu a {
        color: rgba(255, 255, 255, 0.90) !important;
        font-size: 15px !important;
        background-color: transparent !important; /* No block backgrounds needed */
    }

    .main-navigation ul ul.sub-menu a:hover {
        color: #ffffff !important;
    }

    /* Exposed 3rd-level child accordion link formatting options */
    .main-navigation ul ul ul.sub-menu a {
        color: rgba(255, 255, 255, 0.70) !important;
        font-size: 14px !important;