/* =========================
   DESKTOP (unchanged intent)
   ========================= */
.WaGadgetMenuHorizontal .menuInner ul.firstLevel > li.sel > .item > a {
  background: #4a545f !important;
  color: #ffffff !important;
}
.WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a:hover {
  background: #4a545f !important;
  color: #ffffff !important;
}

/* Login + blog toggle (deduped) */
.WaGadgetLoginForm .loginContainer .loginLink,
.WaGadgetBlog .controlPanel .toggleButton {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
  overflow: hidden;
  background: #005b8e;
  color: #ffffff;
  vertical-align: top;
  cursor: pointer;
}

/* ================
   MOBILE OVERRIDES
   ================ */
@media (max-width: 768px) {
  /* Menu surface */
  .WaGadgetMenuHorizontal .menuInner,
  .WaGadgetMenuHorizontal .menuInner .menuContainer,
  .WaGadgetMenuHorizontal .menuInner ul {
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
  }

  /* Remove bullets/markers (including theme pseudo-elements) */
  .WaGadgetMenuHorizontal .menuInner ul,
  .WaGadgetMenuHorizontal .menuInner li {
    list-style: none !important;
    background-image: none !important;
  }
  .WaGadgetMenuHorizontal .menuInner li::marker { content: "" !important; }
  .WaGadgetMenuHorizontal .menuInner ul li::before,
  .WaGadgetMenuHorizontal .menuInner ul li::after,
  .WaGadgetMenuHorizontal .menuInner ul li > .item > a::before,
  .WaGadgetMenuHorizontal .menuInner ul li.sel::before,
  .WaGadgetMenuHorizontal .menuInner ul li.sel > .item::before,
  .WaGadgetMenuHorizontal .menuInner ul li.sel > .item > a::before {
    content: none !important;
    display: none !important;
    background: none !important;
  }

  /* FIRST LEVEL (main pages) – brand blue bg, white text */
  .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a {
    display: block;
    background: #005b8e !important;
    color: #ffffff !important;
    text-shadow: none !important;
    box-shadow: none !important;
    padding: 14px 16px !important;
    font-weight: 700;
    text-transform: uppercase;
    border-bottom: 1px solid #e5e7eb !important;
    margin: 0 !important;
  }
  .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a:hover,
  .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li.sel > .item > a {
    background: #005b8e !important; /* keep consistent brand blue when active */
    color: #ffffff !important;
  }

  /* SECOND/THIRD LEVEL (submenu) – white bg, blue text */
  .WaGadgetMenuHorizontal .menuInner ul.secondLevel,
  .WaGadgetMenuHorizontal .menuInner ul.thirdLevel {
    background: #ffffff !important;
    margin-top: 0 !important;
    padding-top: 8px !important;  /* ensures first submenu item doesn't overlap */
    border-top: 8px solid #ffffff !important; /* crisp separator */
  }
  .WaGadgetMenuHorizontal .menuInner ul.secondLevel > li > .item > a,
  .WaGadgetMenuHorizontal .menuInner ul.thirdLevel  > li > .item > a {
    display: block;
    background: #ffffff !important;
    color: #005b8e !important;
    text-shadow: none !important;
    box-shadow: none !important;
    padding: 12px 16px 12px 24px !important; /* indent for hierarchy */
    font-weight: 600;
    border-bottom: 1px solid #e5e7eb !important;
    margin: 0 !important;
  }
  .WaGadgetMenuHorizontal .menuInner ul.secondLevel > li > .item > a:hover,
  .WaGadgetMenuHorizontal .menuInner ul.thirdLevel  > li > .item > a:hover {
    background: #e6f2fa !important;
    color: #003b5c !important;
  }

  /* Hamburger / toggle button */
  .WaGadgetMenuHorizontal .menuInner .mobileMenuButton,
  .WaGadgetMenuHorizontal .menuInner .menuButton,
  .WaGadgetBlog .controlPanel .toggleButton {
    background: #005b8e !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px;
  }

  /* Keep menu on top of page content */
  .WaGadgetMenuHorizontal .menuInner { position: relative; z-index: 999; }
}