/* ============================================================
   HEADER & NAVIGATION STYLES
   webbuilddev-theme/assets/css/header.css
   ============================================================ */

/* ── HEADER WRAPPER ─────────────────────────────────────────── */
.wbd-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
}

/* ── NAV ────────────────────────────────────────────────────── */
.wbd-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 6vw;
  background: linear-gradient(to bottom, rgba(0,0,0,.95) 0%, rgba(0,0,0,0) 100%);
  transition: background .4s, backdrop-filter .4s, padding .4s;
}

.wbd-header.scrolled .wbd-nav {
  background: rgba(0,0,0,.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 14px 6vw;
  border-bottom: 1px solid var(--border);
}

/* ── LOGO ───────────────────────────────────────────────────── */
.wbd-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.6rem;
  letter-spacing: .08em;
  color: var(--white);
  text-decoration: none;
  line-height: 1;
}

.wbd-logo span { color: var(--orange); }

.wbd-logo img {
  height: 40px;
  width: auto;
}

.wbd-logo--sm { font-size: 1.4rem; }

/* ── DESKTOP NAV LINKS ──────────────────────────────────────── */
.wbd-nav__links {
  display: flex;
  gap: 2.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wbd-nav__links a {
  color: var(--white-soft);
  text-decoration: none;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color .2s;
}

.wbd-nav__links a:hover {
  color: var(--orange-bright);
}

/* CTA button inside nav */
.wbd-nav__cta {
  background: var(--orange) !important;
  color: var(--black) !important;
  padding: 9px 22px;
  border-radius: 3px;
  font-weight: 700 !important;
  transition: background .2s, transform .2s !important;
}

.wbd-nav__cta:hover {
  background: var(--orange-bright) !important;
  transform: translateY(-1px);
}

/* ── HAMBURGER TOGGLE (mobile) ──────────────────────────────── */
.wbd-nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 18px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.wbd-nav__toggle span {
  display: block;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform .3s, opacity .3s;
}

.wbd-nav__toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.wbd-nav__toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.wbd-nav__toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ── MOBILE MENU ────────────────────────────────────────────── */
.wbd-mobile-menu {
  background: rgba(0,0,0,.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding: 1.5rem 6vw 2rem;
}

.wbd-mobile-menu[hidden] {
  display: none;
}

.wbd-mobile-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.wbd-mobile-menu a {
  display: block;
  color: var(--white-soft);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .5rem 0;
  border-bottom: 1px solid var(--border);
  transition: color .2s;
}

.wbd-mobile-menu a:hover,
.wbd-mobile-menu a:focus {
  color: var(--orange-bright);
}

.wbd-mobile-menu .wbd-nav__cta {
  background: var(--orange) !important;
  color: var(--black) !important;
  padding: 12px 20px !important;
  border-radius: 4px;
  text-align: center;
  border-bottom: none !important;
  margin-top: .5rem;
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .wbd-nav__links {
    display: none;
  }

  .wbd-nav__toggle {
    display: flex;
  }
}