/* Mobile nav: hamburger icon on the right opens the drawer */
header { position: sticky; }

.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(242, 193, 78, 0.55);
  color: #f2c14e;
  cursor: pointer;
  box-shadow: 0 0 18px rgba(242, 193, 78, 0.12);
  transition: background .2s ease, transform .25s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
}

.menu-toggle:hover {
  background: rgba(242, 193, 78, 0.12);
  color: #fff;
  border-color: rgba(242, 193, 78, 0.85);
  box-shadow: 0 0 24px rgba(242, 193, 78, 0.22);
  transform: translateY(-1px);
}

.menu-toggle:active {
  transform: scale(0.96);
}

.menu-toggle:focus-visible {
  outline: 2px solid #f2c14e;
  outline-offset: 2px;
}

.menu-toggle svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* Keep the right-hand group on the outer edge */
header .nav-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

html[dir="rtl"] header .nav-right {
  margin-left: 0;
  margin-right: auto;
}

@media (max-width: 900px) {
  .menu-toggle { display: inline-flex; }

  header .nav {
    padding-top: 18px;
    padding-bottom: 14px;
    gap: 12px;
  }

  header .nav-links {
    display: flex !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 8px 20px 18px;
    background: rgba(13, 19, 48, .98);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .5);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;
  }

  header .nav-links a {
    padding: 14px 2px;
    font-size: 15px;
    color: #e5e8f2;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
  }

  header .nav-links a:last-child { border-bottom: none; }
  header .nav-links a::after { display: none; }
  header.menu-open .nav-links { opacity: 1; transform: none; pointer-events: auto; }
}

/* Desktop: centre the links on the bar itself.
   `justify-content: space-between` can only centre the middle child when the
   items flanking it are the same width — the logo and the language control are
   not, so the menu sat 237px left of centre at 1440px. A three-track grid centres
   the middle column on the bar regardless. Columns are assigned explicitly so
   that pages which hide .nav-links in this range don't have the remaining two
   items reflow into the wrong tracks. Below 901px nothing here applies and the
   drawer above keeps the mobile layout exactly as it was. */
@media (min-width: 901px) {
  header .nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  header .nav > .logo { grid-column: 1; justify-self: start; }
  header .nav-links   { grid-column: 2; justify-self: center; }
  header .nav-right   { grid-column: 3; justify-self: end; }
}