/* === GLOBAL / SHARED (used by all pages) === */
:root { --accent: #FF6B00; }

/* Top bar: centered logo + title */
.logo-bar{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  padding:20px;
  background:#000;
  border-bottom:2px solid var(--accent);
}

.boomerang-logo{
  height:80px;
  width:auto;
  transform:scaleX(-1);
  margin:0;
  display:inline-block;
  vertical-align:middle;
  filter: drop-shadow(0 0 4px white) drop-shadow(0 0 12px #FF6B00);
}

.logo-bar span{
  font-size:1.8rem;
  font-weight:bold;
  color:#fff;
  line-height:1;
}

/* Main nav under the bar */
.navbar{
  display:flex;
  justify-content:center;
  background:#000;
  padding:10px 0;
}

.nav-links{
  list-style:none;
  display:flex;
  gap:24px;
  margin:0;
  padding:0;
}

.nav-links li a{
  color:#fff;
  text-decoration:none;
  font-weight:500;
  transition: color 0.2s ease-in-out;
}

.nav-links li a:hover{ color: var(--accent); }
.nav-links li a.active{
  color: var(--accent);
  /* Optional glow:
  text-shadow: 0 0 6px #FF6B00, 0 0 12px #FF6B00;
  */
}

/* Footer */
.footer{
  background-color:#1c1c1c;
  color:#888;
  padding:20px;
  text-align:center;
  font-size:0.9rem;
  border-top:2px solid var(--accent);
}

/* Small-screen tweak */
@media (max-width: 520px){
  .nav-links{ gap:14px; font-size:.95rem; }
  .boomerang-logo{ height:64px; }
}