/* Shared header menu (EN pages). Below 1024px the main links move into a
   hamburger panel; at 1024px and up the existing desktop nav is unchanged.
   Selectors are prefixed with "html body" so they win over the per-page
   styles and the rules lang-switcher.js injects at runtime. */
@media (max-width: 1023px) {
  html body .nav .container { position: relative !important; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; max-width: none !important; width: 100% !important; min-height: 64px !important; padding: 0 12px 0 16px !important; }
  html body .nav .nav-logo { margin-top: 0 !important; }
  html body .nav .nav-logo-wrap, html body .nav .container > a:first-child { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; }
  html body .nav .nav-right { display: flex !important; align-items: center !important; gap: 10px !important; margin-left: auto !important; flex-shrink: 0; }
  html body .nav .nav-right .lang-switch { order: 1; }
  html body .nav .nav__toggle { order: 2; display: inline-flex !important; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; padding: 0; margin: 0 0 0 4px !important; background: none; border: 0; border-radius: 8px; cursor: pointer; color: inherit; flex-shrink: 0; -webkit-tap-highlight-color: transparent; }
  html body .nav .container > .nav__toggle { margin-left: auto !important; }
  html body .nav .nav__toggle:focus-visible { outline: 2px solid #7eeacc; outline-offset: 2px; }
  html body .nav .nav__toggle-bar { display: block; width: 24px; height: 2px; border-radius: 2px; background: #e6e7ea; transition: transform .2s ease, opacity .2s ease; }
  html body .nav .nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  html body .nav .nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) { opacity: 0; }
  html body .nav .nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  html body .nav .nav__links { display: none !important; position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important; transform: none !important; width: auto !important; margin: 0 !important; padding: 4px 24px 14px !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; background: rgba(15,20,25,0.97) !important; border-bottom: 1px solid rgba(255,255,255,0.08); box-shadow: 0 18px 30px rgba(0,0,0,0.35); font-size: 16px !important; max-height: calc(100vh - 64px); overflow-y: auto; }
  html body .nav .nav__links.is-open { display: flex !important; }
  html body .nav .nav__links a { display: block; padding: 14px 0 !important; margin: 0 !important; color: #e6e7ea; border-top: 1px solid rgba(255,255,255,0.08); }
  html body .nav .nav__links a:first-child { border-top: 0; }
  html body .nav .nav__links a[aria-current="page"] { color: #7eeacc; }
}
@media (max-width: 720px) {
  html body .nav .nav-logo { height: 26px !important; width: auto !important; }
  html body .nav .nav-right { gap: 6px !important; padding-left: 12px; }
  html body .nav .lang-switch { gap: 5px !important; }
  html body .nav .lang-switch svg { width: 18px !important; height: 13px !important; }
}
@media (min-width: 1024px) {
  html body .nav .nav__toggle { display: none !important; }
}
@media (max-width: 400px) {
  html body .nav .nav-logo { height: 22px !important; }
}