/* ===============================
   Header / Logo / Responsive Menu
   =============================== */

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;  /* logo (59px) + small vertical margin */
  padding: 0;
}

/* --- Logo --- */
#logoContainer img {
  position: fixed;
  top: 6px;         /* small top margin (room to breathe) */
  left: 16px;
  height: 59px;     /* keep exact logo height */
  width: auto;
  z-index: 1001;
}

/* --- Menu (Desktop baseline) --- */
header .menu {
  list-style: none;
  display: flex;
  gap: 26px;
  margin: 0;
  padding: 0;
  align-items: center; /* aligns text vertically with logo */
}

header .menu a {
  color: #fff;
  text-decoration: none;
  font-size: 24px;     /* slightly smaller for tighter height */
  padding: 6px 8px;    /* less vertical space */
  line-height: 1;      /* keeps vertical alignment clean */
  border-bottom: none;
  transition: color 0.25s ease;
}

header .menu a:hover { color: #FFD166; }
header .menu a.active { color: #FFD166; }

/* --- Hamburger icon --- */
#menuToggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  position: fixed;
  top: 26px;       /* centered relative to 72px header */
  right: 20px;
  cursor: pointer;
  z-index: 1002;
}

#menuToggle span {
  display: block;
  height: 3px;
  width: 100%;
  background: #fff;
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* ===============================
   Mobile View
   =============================== */
@media (max-width: 1400px) {
  header {
    justify-content: flex-end;
    height: 72px;
  }

  #menuToggle { display: flex; }

  header .menu {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 220px;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 90px 20px 20px;
    gap: 20px;
    transform: translateX(100%);
    transition: transform 0.35s ease;
  }

  header .menu.open { transform: translateX(0); }

  header .menu a {
    font-size: 22px;
    width: 100%;
    padding: 6px 0;
  }

  #menuToggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }
  #menuToggle.active span:nth-child(2) {
    opacity: 0;
  }
  #menuToggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
  }
}

/* ===============================
   Smaller phones adjustments
   =============================== */
@media (max-width: 768px) {
  header { height: 66px; }

  #logoContainer img {
    top: 6px;
    height: 54px; /* scaled slightly smaller for small screens only */
  }

  #menuToggle {
    top: 22px;
  }

  header .menu {
    width: 200px;
    padding: 80px 16px 20px;
  }

  header .menu a {
    font-size: 18px;
  }
}