/* ==========================================================================
   NorthEast Poker — phpBB header bridge
   Makes #nepsiteheader + .nep-navbar behave like #header + .navbar (main site)
   Safe-scoped to phpBB header to avoid clashes.
   ========================================================================== */

/* ----- Layout & stacking so header never blocks clicks below it ----- */
#nepsiteheader {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 70px;
  background: #fff;
  z-index: 2000; /* above forum bars, but only 70px tall */
  box-shadow: 0 2px 15px rgba(0,0,0,.1);
}

/* Push forum content below the fixed header (phpBB body has id="phpbb") */
body#phpbb { padding-top: 70px !important; }

/* Ensure dropdowns render on top of forum content */
#nepsiteheader .dropdown-menu,
#nepsiteheader .nep-navbar .dropdown > ul {
  z-index: 2100;
}

/* ----- Header inner alignment (Bootstrap-like) ----- */
#nepsiteheader .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}

#nepsiteheader .nepsitelogo img {
  max-height: 50px;
  vertical-align: middle;
}

/* Container: keep flex if you want, but kill the gap */
#nepsiteheader .nep-header-social-links {
  display: flex;
  gap: 0;                      /* remove extra spacing */
  margin: 0 0 0 30px;          /* same as main site */
  align-items: center;
}

/* Spacing comes only from padding-left like main site */
#nepsiteheader .nep-header-social-links a {
  color: #9ba6af;
  padding-left: 8px;
  display: inline-block;
  line-height: 0;
  transition: 0.3s;
  margin: 0;                   /* ensure no margins sneak in */
}

/* First icon shouldn’t have left padding */
#nepsiteheader .nep-header-social-links a:first-child {
  padding-left: 0;
}

#nepsiteheader .nep-header-social-links a i,
#nepsiteheader .nep-header-social-links a .bi {
  line-height: 0;
  font-size: inherit;          /* keep the size you picked earlier */
}

#nepsiteheader .nep-header-social-links a:hover { color: #ca0000; }


#nepsiteheader .nep-header-social-links a {
  font-size: 16px;   /* match your main site’s computed size */
  line-height: 1;
}

#nepsiteheader .nep-header-social-links a i,
#nepsiteheader .nep-header-social-links a .bi {
  font-size: inherit;
  vertical-align: middle;
}



/* ==========================================================================
   Desktop navigation (mirrors main-site .navbar)
   ========================================================================== */
#nepsiteheader .nep-navbar {
  padding: 0;
}
#nepsiteheader .nep-navbar ul {
  margin: 0; padding: 0; list-style: none;
  display: flex; align-items: center;
}
#nepsiteheader .nep-navbar li { position: relative; }
#nepsiteheader .nep-navbar a,
#nepsiteheader .nep-navbar a:focus {
  display: block;
  padding: 10px 0 10px 30px;
  font-family: "Poppins", sans-serif;
  font-size: 16px; font-weight: 500;
  color: #4f5a62; white-space: nowrap;
  transition: color .2s ease;
  text-decoration: none;
}
#nepsiteheader .nep-navbar a i,
#nepsiteheader .nep-navbar a:focus i {
  font-size: 12px; line-height: 0; margin-left: 5px;
}
#nepsiteheader .nep-navbar a:hover,
#nepsiteheader .nep-navbar .active,
#nepsiteheader .nep-navbar .active:focus,
#nepsiteheader .nep-navbar li:hover > a {
  color: #ca0000;
}

/* Dropdown (desktop hover) */
#nepsiteheader .nep-navbar .dropdown > ul,
#nepsiteheader .nep-navbar .dropdown > .dropdown-menu {
  position: absolute;
  left: 0; top: 100%;
  margin: 0; padding: 10px 0;
  min-width: 200px;
  background: #fff;
  border: 0;
  box-shadow: 0 0 30px rgba(127,137,161,.25);
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
  transform: translateY(6px);
}
#nepsiteheader .nep-navbar .dropdown:hover > ul,
#nepsiteheader .nep-navbar .dropdown:hover > .dropdown-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
#nepsiteheader .nep-navbar .dropdown ul li { min-width: 200px; }
#nepsiteheader .nep-navbar .dropdown ul a {
  padding: 10px 20px;
  font-size: 14px; font-weight: 400; color: #21262a;
}
#nepsiteheader .nep-navbar .dropdown ul a:hover,
#nepsiteheader .nep-navbar .dropdown ul .active:hover,
#nepsiteheader .nep-navbar .dropdown ul li:hover > a {
  color: #ca0000;
}

/* Nested dropdown (second level) */
#nepsiteheader .nep-navbar .dropdown .dropdown > ul,
#nepsiteheader .nep-navbar .dropdown .dropdown > .dropdown-menu {
  top: 0; left: 100%;
}

/* ==========================================================================
   Mobile navigation (class toggled by main.js)
   ========================================================================== */

/* Hide menu list on mobile until the JS toggles .nep-navbar-mobile */
@media (max-width: 991px) {
  /* hide by default on mobile */
  #nepsiteheader .nep-navbar > ul {
    display: none !important;
  }

  /* show when mobile mode is active */
  #nepsiteheader .nep-navbar.nep-navbar-mobile > ul {
    display: block !important;
  }
}

/* Hamburger icon */
#nepsiteheader .mobile-nav-toggle {
  color: #384046;
  font-size: 28px;
  cursor: pointer;
  display: none; /* hidden on desktop */
  line-height: 0;
  transition: .3s;
}
@media (max-width: 991px) {
  #nepsiteheader .mobile-nav-toggle { display: block; }
  #nepsiteheader .nep-header-social-links { margin-left: 10px; }
}

/* When nav is in "mobile" mode */
#nepsiteheader .nep-navbar.nep-navbar-mobile {
  position: static;  /* avoids overlaying the whole page */
  z-index: 2000;
}

/* Mobile menu panel */
#nepsiteheader .nep-navbar.nep-navbar-mobile ul {
  position: absolute;
  top: 70px; left: 0; right: 0;
  display: block;
  padding: 10px 0;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.1);
  max-height: calc(100vh - 70px);
  overflow-y: auto;
}

/* Mobile link styles */
#nepsiteheader .nep-navbar.nep-navbar-mobile a,
#nepsiteheader .nep-navbar.nep-navbar-mobile a:focus {
  padding: 10px 20px;
  font-size: 15px;
  color: #384046;
}

/* Mobile dropdown behavior: hidden by default, shown when .dropdown-active is toggled in JS */
#nepsiteheader .nep-navbar.nep-navbar-mobile .dropdown > ul,
#nepsiteheader .nep-navbar.nep-navbar-mobile .dropdown > .dropdown-menu {
  position: static;
  display: none;
  opacity: 1; visibility: visible;
  box-shadow: none; margin: 10px 20px; padding: 10px 0;
}
#nepsiteheader .nep-navbar.nep-navbar-mobile .dropdown > ul.dropdown-active,
#nepsiteheader .nep-navbar.nep-navbar-mobile .dropdown > .dropdown-menu.dropdown-active {
  display: block;
}

/* Ensure only one submenu open if your JS enforces it (visual consistency) */
#nepsiteheader .nep-navbar.nep-navbar-mobile .dropdown-open > a {
  color: #ca0000;
}

/* ==========================================================================
   Utility tweaks
   ========================================================================== */

/* Prevent header’s children from stretching past 70px and stealing clicks */
#nepsiteheader, #nepsiteheader * {
  max-height: none;
}

/* Keep phpBB content clickable underneath the header area */
#phpbb #wrap { position: relative; z-index: 1; }

/* Minor polish for hover aesthetics on desktop */
@media (min-width: 992px) {
  #nepsiteheader .nep-navbar .dropdown > a .bi { transition: transform .2s ease; }
  #nepsiteheader .nep-navbar .dropdown:hover > a .bi { transform: rotate(180deg); }
}