/* shared.css — Byte Fortress Nav & Footer Styles */

/* NAV */
#bf-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 5%; height: 72px;
  background: rgba(10,14,26,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,180,216,0.15);
  transition: background 0.3s;
}
#bf-nav .nav-logo {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
}
#bf-nav .nav-logo img { height: 44px; width: auto; }

#bf-nav .nav-links {
  display: flex; gap: 32px; list-style: none; align-items: center;
}
#bf-nav .nav-links a {
  color: #8899aa; text-decoration: none;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; transition: color 0.2s;
  position: relative;
}
#bf-nav .nav-links a::after {
  content: ''; position: absolute; bottom: -4px; left: 0; right: 0;
  height: 1px; background: #00b4d8;
  transform: scaleX(0); transition: transform 0.2s;
}
#bf-nav .nav-links a:hover,
#bf-nav .nav-links a.active { color: #00b4d8; }
#bf-nav .nav-links a:hover::after,
#bf-nav .nav-links a.active::after { transform: scaleX(1); }

#bf-nav .nav-cta {
  background: #00b4d8 !important; color: #0a0e1a !important;
  padding: 8px 20px; border-radius: 3px; font-weight: 700 !important;
  transition: background 0.2s, box-shadow 0.2s !important;
}
#bf-nav .nav-cta:hover {
  background: #ffffff !important;
  box-shadow: 0 0 20px rgba(0,180,216,0.3);
}
#bf-nav .nav-cta::after { display: none !important; }

/* MOBILE TOGGLE */
.nav-mobile-toggle {
  display: none;
  background: none; border: 1px solid rgba(0,180,216,0.2);
  color: #8899aa; font-size: 20px; padding: 6px 12px;
  border-radius: 3px; cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.nav-mobile-toggle:hover { border-color: #00b4d8; color: #00b4d8; }

/* FOOTER */
#bf-footer {
  background: #070a12;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 48px 5%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
#bf-footer .footer-logo { display: flex; align-items: center; gap: 12px; }
#bf-footer .footer-logo img { height: 36px; }
#bf-footer .footer-copy { font-size: 13px; color: #8899aa; }
#bf-footer .footer-links { display: flex; gap: 28px; list-style: none; flex-wrap: wrap; }
#bf-footer .footer-links a {
  font-size: 13px; color: #8899aa; text-decoration: none; transition: color 0.2s;
}
#bf-footer .footer-links a:hover { color: #00b4d8; }

/* MOBILE */
@media (max-width: 900px) {
  .nav-mobile-toggle { display: block; }

  #bf-nav .nav-links {
    display: none;
    position: absolute; top: 72px; left: 0; right: 0;
    background: rgba(7,10,18,0.98);
    flex-direction: column; gap: 0;
    border-bottom: 1px solid rgba(0,180,216,0.15);
    padding: 8px 0;
  }
  #bf-nav .nav-links.mobile-open { display: flex; }
  #bf-nav .nav-links li { width: 100%; }
  #bf-nav .nav-links a {
    display: block; padding: 14px 5%;
    border-bottom: 1px solid rgba(255,255,255,0.04);
  }
  #bf-nav .nav-cta {
    margin: 8px 5%; border-radius: 3px;
    display: block; text-align: center;
  }

  #bf-footer {
    flex-direction: column; text-align: center;
  }
  #bf-footer .footer-links { justify-content: center; }
}

/* LANGUAGE TOGGLE */
.lang-toggle-wrap { list-style: none; }
.lang-toggle {
  display: flex; align-items: center; gap: 6px;
  background: rgba(0,180,216,0.06);
  border: 1px solid rgba(0,180,216,0.2);
  border-radius: 3px; padding: 4px 10px;
}
.lang-toggle button {
  background: none; border: none; cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: #8899aa;
  padding: 2px 4px; border-radius: 2px;
  transition: color 0.2s, background 0.2s;
}
.lang-toggle button:hover { color: #00b4d8; }
.lang-toggle button.lang-active {
  color: #00b4d8;
  background: rgba(0,180,216,0.12);
}
.lang-divider { color: rgba(0,180,216,0.3); font-size: 12px; }

@media (max-width: 900px) {
  .lang-toggle-wrap { padding: 8px 5%; border-bottom: 1px solid rgba(255,255,255,0.04); }
  .lang-toggle { display: inline-flex; }
}