.top-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  background: var(--blue);
  color: white;
  padding: 10px 20px;
  font-weight: bold;
}

.top-header .center {
  text-align: center;
  font-size: 1.3rem;
}
.top-header .left {
  justify-self: start;
}
.top-header .right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}


.menu-header { background: #001f5c; }
.main-menu { display: flex; justify-content: center; margin: 0; padding: 0; list-style: none; }
.menu-item { position: relative; }
.menu-item > a { display: block; padding: 15px 25px; color: white; font-weight: bold; text-decoration: none; }
.menu-item > a:hover { background: #003399; color: var(--yellow); }

/* Submenu */
.submenu { display: none; position: absolute; top: 100%; left: 0; background: rgba(0, 51, 153, 0.95); list-style: none; margin: 0; padding: 10px 0; min-width: 200px; border-radius: 5px; }
.submenu li a { display: block; padding: 10px 15px; color: white; text-decoration: none; }
.submenu li a:hover { background: var(--blue); color: var(--yellow); }
.menu-item:hover .submenu { display: block; }

/* Sticky Header */
.header-wrapper { position: fixed; top: 0; width: 100%; z-index: 10000; transition: all 0.4s ease; }
.header-wrapper.compact .top-header { display: none; }
.header-wrapper.compact .menu-header { background: #001f5c; }

/* =========================
   Dark mode
   ========================= */
body.dark-mode .menu-header,
body.dark-mode .header-wrapper.compact .menu-header {
  background: #1a1a1a;
}

body.dark-mode .menu-item > a {
  color: #eee;
}

body.dark-mode .menu-item > a:hover {
  background: #333;
  color: var(--yellow);
}

body.dark-mode .submenu {
  background: #1f1f1f;
  border: 1px solid var(--border);
}

body.dark-mode .submenu li a {
  color: #ddd;
}

body.dark-mode .submenu li a:hover {
  background: #2a2a2a;
  color: var(--yellow);
}