/* ============================================================
   menu.css -- styles for the desktop popup menu and the phone menu
   ============================================================ */

/* Desktop popup menu */
.itemBorder { border: 1px solid black; }
.itemBorder td { line-height: 13px; }
.itemText, a.itemText:link, a.itemText:visited { text-decoration: none; color: #FFFFFF; font: 12px Arial, Helvetica, sans-serif; line-height: 13px; }

/* Phone menu pieces are hidden on desktop */
.mobile-topbar, .mobile-nav, .mobile-nav-overlay { display: none; }

.mobile-nav { position: fixed; top: 0; left: 0; width: 80%; max-width: 300px; height: 100vh; background: #333366; z-index: 1000; overflow-y: auto; transform: translateX(-100%); transition: transform 0.3s ease; }
.mobile-nav.active { transform: translateX(0); }
.mobile-nav-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 999; }
.mobile-nav-close { display: block; width: 100%; padding: 15px; background: #222244; color: #fff; border: none; font: 16px Arial, Helvetica, sans-serif; cursor: pointer; text-align: left; }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav li { border-bottom: 1px solid #444; }
.mobile-nav a { display: block; padding: 15px 20px; color: #fff; text-decoration: none; font: 14px Arial, Helvetica, sans-serif; }
.mobile-nav a:hover { background: #669999; }
.mobile-nav .has-submenu > a { display: flex; justify-content: space-between; align-items: center; }
.mobile-nav .has-submenu > a::after { content: '+'; font-size: 18px; }
.mobile-nav .has-submenu.open > a::after { content: '-'; }
.mobile-nav .submenu { display: none; background: #222244; }
.mobile-nav .has-submenu.open > .submenu { display: block; }
.mobile-nav .submenu a { padding-left: 35px; font-size: 13px; }
.mobile-nav .submenu .submenu a { padding-left: 50px; font-size: 12px; }

.mobile-topbar { align-items: center; justify-content: space-between; position: fixed; top: 0; left: 0; right: 0; height: 52px; padding: 0 12px; background: #333366; color: #fff; z-index: 998; box-shadow: 0 2px 4px rgba(0,0,0,0.3); box-sizing: border-box; }
.mobile-topbar-btn { background: none; border: 1px solid #669999; color: #fff; font: bold 16px Arial, Helvetica, sans-serif; padding: 8px 14px; border-radius: 4px; cursor: pointer; }
.mobile-topbar-btn:active { background: #669999; }
.mobile-topbar-title { font: italic bold 14px Arial, Helvetica, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: 12px; }

@media (max-width: 768px) {
  .mobile-topbar { display: flex; }
  .mobile-nav { display: block; }
  .mobile-nav-overlay.active { display: block; }
  body { padding-top: 52px; }
  .desktop-popmenu, .desktop-menu-area { display: none !important; }
}