/* RESET */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { margin: 0; padding: 0; background: #fff; } /* HEADER */ .mobile-header { background: #00568C; display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; position: sticky; top: 0; z-index: 1000; width: 100%; } .mobile-logo img { height: 42px; display: block; } /* ICON BUTTONS */ .mobile-header button { background: none !important; border: none; cursor: pointer; padding: 0; } .mobile-header button img { width: 28px; height: 28px; filter: invert(100%); /* make icons white */ display: block; } /* DROPDOWN MENU */ .mobile-menu { display: none; background: #00568C; position: absolute; top: 60px; /* sits right under header */ left: 0; width: 100%; z-index: 999; } .mobile-menu ul { list-style: none; } .mobile-menu ul li { padding: 12px 15px; border-bottom: 1px solid rgba(255,255,255,0.2); } .mobile-menu ul li a { color: white; text-decoration: none; font-size: 16px; display: block; } .mobile-menu ul li a:hover { text-decoration: underline; } /* Submenu */ .mobile-menu .submenu { display: none; padding-left: 15px; } .mobile-menu .has-submenu.open .submenu { display: block; } /* SEARCH BAR */ .search-bar { display: none; padding: 10px; background: #f8f8f8; border-bottom: 2px solid #00568C; } .search-bar input { width: 80%; padding: 8px; border: 1px solid #ccc; border-radius: 4px 0 0 4px; } .search-bar button { background: #00568C; border: none; padding: 8px 12px; border-radius: 0 4px 4px 0; cursor: pointer; } .search-bar button img { filter: invert(100%); width: 20px; height: 20px; } document.getElementById("menu-toggle").onclick = function() { let menu = document.getElementById("mobile-menu"); menu.style.display = (menu.style.display === "block") ? "none" : "block"; }; document.querySelectorAll(".has-submenu > a").forEach(item => { item.addEventListener("click", function(e) { e.preventDefault(); this.parentElement.classList.toggle("open"); }); }); document.getElementById("search-toggle").onclick = function() { let searchBar = document.getElementById("search-bar"); searchBar.style.display = (searchBar.style.display === "block") ? "none" : "block"; };