/* Loaded after the legacy stylesheet so header rules remain intentionally scoped. */
.navbar { min-height: 68px; padding: 10px 20px; gap: 16px; flex-direction: row; }
.logo { flex: 0 0 auto; margin: 0; line-height: 0; }
.logo a, .mobile-menu-brand, .setup-brand, .support-brand a { display: inline-grid; align-items: center; }
.brand-logo { display: block; grid-area: 1 / 1; width: 190px; height: auto; }
.brand-logo-dark { visibility: hidden; }
body.dark-mode .brand-logo-light { visibility: hidden; }
body.dark-mode .brand-logo-dark { visibility: visible; }
.nav-links { flex: 1 1 auto; justify-content: center; align-items: center; gap: 4px; margin: 0; padding: 0; }
.nav-links > li { width: auto; }
.nav-links > li > a { width: auto; margin: 0; padding: 8px 7px; border-radius: 6px; background: transparent; box-shadow: none; font-size: .76rem; line-height: 1.25; white-space: nowrap; }
.nav-links .dropdown-menu { padding: 8px; min-width: 210px; }
.nav-links .dropdown-menu li { width: 100%; padding: 0; }
.nav-links .dropdown-menu li a { margin: 0; padding: 10px 12px; box-shadow: none; text-align: left; font-size: .82rem; }
.nav-links .nav-test-btn { padding: 9px 12px; background: var(--primary-color); color: #fff; font-weight: 700; }
.nav-links .nav-test-btn:hover { background: var(--primary-dark); color: #fff; }
.nav-controls { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 8px; }
.language-selector select, .dark-mode-toggle, .mobile-menu-toggle { min-height: 42px; }
.mobile-menu-toggle, .mobile-menu-close { align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 8px; cursor: pointer; }
.mobile-menu-toggle { color: var(--text-color); background: transparent; font-size: 1.35rem; }
.mobile-menu-toggle:hover, .mobile-menu-toggle:focus-visible { color: var(--primary-color); background: rgba(0,114,178,.1); }
.mobile-menu-overlay { display: flex; flex-direction: column; top: 0; right: 0; left: auto; width: min(92vw,420px); height: 100dvh; padding: 0; background: #fff; color: var(--text-color); box-shadow: -18px 0 50px rgba(10,30,45,.28); opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(100%); transition: transform .24s ease, opacity .2s ease, visibility .24s; }
.mobile-menu-overlay.active { display: flex; opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); }
.mobile-menu-header { display: flex; align-items: center; justify-content: space-between; min-height: 72px; padding: 12px 16px; border-bottom: 1px solid #dfe7ed; }
.mobile-menu-brand img { display: block; width: 178px; height: auto; }
.mobile-menu-close { position: static; flex: 0 0 44px; color: var(--text-color); background: #edf3f7; font-size: 1.35rem; }
.mobile-menu-nav { flex: 1 1 auto; overflow-y: auto; padding: 10px 14px 18px; }
.mobile-menu-nav ul { margin: 0; padding: 0; text-align: left; }
.mobile-menu-nav > ul > li { margin: 2px 0; }
.mobile-menu-nav a { display: flex; align-items: center; min-height: 46px; padding: 10px 12px; border-radius: 8px; color: var(--text-color); font-size: .96rem; font-weight: 600; line-height: 1.35; text-transform: none; }
.mobile-menu-nav a:hover, .mobile-menu-nav a:focus-visible { color: var(--primary-color); background: #edf6fb; }
.mobile-menu-nav li ul { margin: 0 0 3px 16px; padding: 0 0 0 10px; border-left: 2px solid #c9dce8; }
.mobile-menu-nav li ul li { margin: 0; font-size: inherit; }
.mobile-menu-nav li ul a { min-height: 42px; font-size: .88rem; font-weight: 500; }
.mobile-menu-nav li.has-submenu > a { justify-content: space-between; }
.mobile-menu-nav li.has-submenu > a::after { content: "\f078"; float: none; font-family: "Font Awesome 6 Free"; font-size: .72rem; font-weight: 900; }
.mobile-menu-nav .nav-test-btn { justify-content: center; margin-top: 12px; color: #fff; background: var(--primary-color); font-weight: 700; }
.mobile-menu-nav .nav-test-btn:hover, .mobile-menu-nav .nav-test-btn:focus-visible { color: #fff; background: var(--primary-dark); }
.mobile-menu-controls { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 14px 16px max(14px,env(safe-area-inset-bottom)); border-top: 1px solid #dfe7ed; background: #f5f8fa; }
.mobile-menu-controls label { font-size: .85rem; font-weight: 600; }
.mobile-menu-controls select, .mobile-theme-toggle { min-height: 44px; border: 1px solid #c8d5de; border-radius: 8px; background: #fff; color: var(--text-color); font: inherit; }
.mobile-menu-controls select { width: 100%; padding: 7px 10px; }
.mobile-theme-toggle { display: inline-flex; gap: 7px; align-items: center; padding: 7px 11px; cursor: pointer; }
body.mobile-menu-open { overflow: hidden; }
body.dark-mode .mobile-menu-overlay { background: var(--dark-secondary); color: #fff; }
body.dark-mode .mobile-menu-header, body.dark-mode .mobile-menu-controls { border-color: rgba(255,255,255,.14); }
body.dark-mode .mobile-menu-controls { background: var(--dark-card); }
body.dark-mode .mobile-menu-nav a, body.dark-mode .mobile-menu-close { color: #fff; }
body.dark-mode .mobile-menu-nav a:hover, body.dark-mode .mobile-menu-nav a:focus-visible, body.dark-mode .mobile-menu-close { background: rgba(255,255,255,.1); }
body.dark-mode .mobile-menu-controls select, body.dark-mode .mobile-theme-toggle { border-color: #586375; background: var(--dark-secondary); color: #fff; }
@media (max-width:1100px) {
  .navbar { position: fixed !important; flex-direction: row; align-items: center; min-height: 68px; padding: 10px 14px; }
  .navbar .nav-links { display: none; }
  .navbar .mobile-menu-toggle { display: inline-flex; }
  .navbar .nav-controls { flex-direction: row; flex-wrap: nowrap; width: auto; margin-left: auto; }
  .hero { margin-top: 68px !important; }
}
@media (max-width:560px) {
  .brand-logo { width: 156px; }
  .navbar .language-selector, .navbar .dark-mode-toggle { display: none; }
  .mobile-menu-overlay { width: min(94vw,420px); }
}
@media (prefers-reduced-motion:reduce) {
  .mobile-menu-overlay, .mobile-menu-nav ul ul, .mobile-menu-nav li.has-submenu > a::after { transition: none; }
}
/* Compact mobile theme button */
.mobile-theme-toggle {
  width: 44px;
  min-width: 44px;
  padding: 0;
  justify-content: center;
  gap: 0;
}
/* Mobile navigation icons */
.mobile-menu-nav a > i {
  width: 22px;
  flex: 0 0 22px;
  text-align: center;
  color: var(--primary-color);
  font-size: .95rem;
  margin-right: 10px;
}

.mobile-menu-nav a > span {
  flex: 1;
}

body.dark-mode .mobile-menu-nav a > i {
  color: var(--primary-light);
}