/* ===================== NAVBAR ===================== */
nav {
  background: var(--dark2);
  position: sticky; top: 0; z-index: 1000;
  border-bottom: 2px solid var(--red);
}
.nav-inner {
  max-width: 90%; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; height: 64px;
}
.nav-logo img { height: 36px; }
.nav-menu { display: flex; align-items: center; gap: 4px; list-style: none; }
.nav-menu > li { position: relative; }
.nav-menu > li > a {
  display: flex; align-items: center; gap: 6px;
  padding: 20px 14px; font-family: var(--font-main);
  font-size: 14px; font-weight: 500; letter-spacing: 1px;
  text-transform: uppercase; color: #ccc;
  transition: color 0.2s;
}
.nav-menu > li > a:hover, .nav-menu > li:hover > a { color: var(--red); }
.nav-menu > li > a .fa-chevron-down { font-size: 10px; }

/* Dropdown */
.dropdown {
  position: absolute; top: 100%; left: 0;
  background: var(--dark3); min-width: 200px;
  border-top: 2px solid var(--red);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: all 0.2s; list-style: none; z-index: 100;
}
.nav-menu > li:hover > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown li { position: relative; }
.dropdown li a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px; font-size: 13px; color: #bbb;
  border-bottom: 1px solid #333; transition: all 0.2s;
}
.dropdown li a:hover { color: var(--red); background: #1e1e1e; padding-left: 24px; }
.sub-dropdown {
  position: absolute; top: 0; left: 100%;
  background: var(--dark3); min-width: 180px;
  border-top: 2px solid var(--red);
  opacity: 0; visibility: hidden; transform: translateX(8px);
  transition: all 0.2s; list-style: none;
}
.dropdown li:hover > .sub-dropdown { opacity: 1; visibility: visible; transform: translateX(0); }

/* Nav Right */
.nav-right { display: flex; align-items: center; gap: 10px; }
.btn-nav {
  padding: 8px 18px; border-radius: 3px; font-family: var(--font-main);
  font-size: 13px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase;
  transition: all 0.2s; cursor: pointer; border: none;
}
.btn-login { background: transparent; color: #ccc; border: 1px solid #444; }
.btn-login:hover { border-color: var(--red); color: var(--red); }
.btn-subscribe { background: var(--red); color: #fff; }
.btn-subscribe:hover { background: #014a8a; }

/* Toggle button - hidden on desktop */
.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 8px;
  z-index: 1001;
}
.nav-toggle span {
  display: block; width: 24px; height: 2px; background: #ccc;
  transition: all 0.3s;
}
.nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Mobile */
@media (max-width: 768px) {
  .nav-toggle { display: flex; }
  .nav-inner { flex-wrap: wrap; height: auto; min-height: 56px; padding: 8px 16px; }
  .nav-menu {
    display: none; flex-direction: column; width: 100%;
    position: absolute; top: 100%; left: 0;
    background: var(--dark2); padding: 8px 16px; gap: 0;
    border-top: 1px solid #333;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    z-index: 1000;
  }
  .nav-menu.open { display: flex; }
  .nav-menu > li > a { padding: 12px 0; font-size: 13px; }
  .nav-right { display: none; }
  .dropdown {
    position: static; opacity: 1; visibility: visible;
    transform: none; border-top: none; min-width: 100%;
  }
  .dropdown li a { padding-left: 24px; }
}