/* ============================================================================
   site-chrome.css
   Shared top-bar, header, and footer styling.
   Loaded by contact.html, sib_contact.html, and sib_mcreg.html (and any other page that
   uses the same Canvas top-bar + primary-menu chrome).
   --------------------------------------------------------------------------
   Edit hover colors / dropdown styling here ONCE — both pages pick it up.
   ============================================================================ */

/* ── Top-bar "Independent Motor Carriers" submenu — dark dropdown panel ─── */
#top-bar .top-links ul ul {
    width: auto;
    min-width: 240px;
    background: #2d2d2d;
    border-top: 1px solid #1ABC9C;
    border-bottom: 1px solid #444;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
    white-space: nowrap;
}
#top-bar .top-links ul ul li {
    border-top: 1px solid #444;
    border-left: none;
}
#top-bar .top-links ul ul li:first-child { border-top: none; }
#top-bar .top-links ul ul li:hover { background-color: #383838; }
#top-bar .top-links ul ul a { color: #CCC; padding: 0 14px; }
#top-bar .top-links ul ul li:hover > a { color: #FFF; }

/* ── Top-bar (very top menu) hover — dark bluish grey ────────────────────── */
#top-bar .top-links > ul > li:hover {
    background-color: #2d3340 !important;
}
#top-bar .top-links > ul > li:hover > a {
    color: #fff !important;
}

/* ── Primary menu (HOME, SERVICES, ABOUT US, …) hover — accent blue ───────
   Apply background to the <a> pill (style-3's button area), NOT the whole <li>.
   The <li> is 100px tall with 28px top+bottom margin around a 44px <a>;
   coloring the <li> bleeds the highlight 56px beyond the visible button. */
#primary-menu > ul > li:hover > a,
#primary-menu > ul > li.current > a {
    background-color: #001689 !important;
    color: #fff !important;
}
#primary-menu > ul > li:hover > a > div,
#primary-menu > ul > li.current > a > div {
    color: #fff !important;
}