/* =========================================================
   GLOBAL NAV & FOOTER OVERRIDES — FINAL LOCKED VERSION
   ========================================================= */

/* ---------------------------------------------------------
   PAGE-AWARE LINK HIDING (DESKTOP + MOBILE)
   --------------------------------------------------------- */

/* Hide current page in DESKTOP nav */
.page-intel   .site-header .nav a[data-page="intel"],
.page-compare .site-header .nav a[data-page="compare"],
.page-showdown .site-header .nav a[data-page="showdown"],
.page-buster  .site-header .nav a[data-page="buster"],
.page-ranking .site-header .nav a[data-page="ranking"] {
  display: none;
}
/* =========================================
   ACTIVE NAV ITEM (APP-LIKE)
   ========================================= */

.mobile-app-nav a {
  position: relative;
  opacity: 0.7;
}

/* Active page highlight */
.page-intel   .mobile-app-nav a[data-page="intel"],
.page-compare .mobile-app-nav a[data-page="compare"],
.page-showdown .mobile-app-nav a[data-page="showdown"],
.page-buster  .mobile-app-nav a[data-page="buster"],
.page-ranking .mobile-app-nav a[data-page="ranking"] {
  opacity: 1;
}

/* Icon glow for active */
.page-intel   .mobile-app-nav a[data-page="intel"] i,
.page-compare .mobile-app-nav a[data-page="compare"] i,
.page-showdown .mobile-app-nav a[data-page="showdown"] i,
.page-buster  .mobile-app-nav a[data-page="buster"] i,
.page-ranking .mobile-app-nav a[data-page="ranking"] i {
  filter: drop-shadow(0 0 12px rgba(64,220,165,0.95));
}

/* Small active indicator dot */
.page-intel   .mobile-app-nav a[data-page="intel"]::after,
.page-compare .mobile-app-nav a[data-page="compare"]::after,
.page-showdown .mobile-app-nav a[data-page="showdown"]::after,
.page-buster  .mobile-app-nav a[data-page="buster"]::after,
.page-ranking .mobile-app-nav a[data-page="ranking"]::after {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--kobra-neon);
  border-radius: 50%;
  margin-top: 2px;
}



/* ---------------------------------------------------------
   SUPPORT BUTTON (DESKTOP ONLY STYLING)
   --------------------------------------------------------- */

.site-header .nav .nav-support {
  margin-left: 6px;
  padding: 6px 12px;
  border-radius: 6px;

  background: linear-gradient(135deg, #40DCA5, #2bbf91);
  color: #04110c !important;

  font-weight: 600;
  font-size: 13px;

  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.site-header .nav .nav-support:hover {
  opacity: 0.9;
}

/* ---------------------------------------------------------
   MOBILE APP NAV — SINGLE SOURCE OF TRUTH
   --------------------------------------------------------- */

:root {
  --kobra-neon: #40DCA5;
}

/* Desktop: never show mobile nav */
.mobile-app-nav {
  display: none;
}

/* ---------------------------------------------------------
   MOBILE LAYOUT
   --------------------------------------------------------- */
@media (max-width: 768px) {

  /* Hide desktop nav completely */
  .site-header .nav {
    display: none;
  }

  /* Bottom app-style navigation */
  .mobile-app-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;

    height: 68px;
    padding-bottom: env(safe-area-inset-bottom);

    background: linear-gradient(
      to top,
      #0b0f14,
      #0e141b
    );

    border-top: 1px solid rgba(255,255,255,0.08);
    z-index: 9999;

    justify-content: space-around;
    align-items: center;
  }

  /* Individual nav items */
  .mobile-app-nav a {
    flex: 1;
    text-align: center;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;

    font-size: 11px;
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    white-space: nowrap;
  }

  /* Icons */
  .mobile-app-nav i {
    font-size: 20px;
    color: var(--kobra-neon);
    line-height: 1;
    filter: drop-shadow(0 0 6px rgba(64,220,165,0.6));
  }

  /* Active page glow */
  .page-compare .mobile-app-nav a[data-page="compare"] i,
  .page-showdown .mobile-app-nav a[data-page="showdown"] i,
  .page-buster  .mobile-app-nav a[data-page="buster"] i,
  .page-ranking .mobile-app-nav a[data-page="ranking"] i {
    filter: drop-shadow(0 0 10px rgba(64,220,165,0.95));
  }



  /* Prevent content from hiding behind nav */
  body {
    padding-bottom: 72px;
  }
}

/* ---------------------------------------------------------
   SUPPORT MODAL (GLOBAL)
   --------------------------------------------------------- */

.support-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
}

.support-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
}

.support-card {
  position: relative;
  margin: auto;
  top: 15%;
  width: min(92%, 360px);

  background: #0b0f14;
  border-radius: 14px;
  padding: 18px;
  text-align: center;

  box-shadow: 0 0 25px rgba(64,220,165,0.25);
}

.support-card h3 {
  color: var(--kobra-neon);
  margin-bottom: 8px;
}

.support-primary-btn {
  display: block;
  margin: 12px 0;
  padding: 10px;
  border-radius: 8px;

  background: var(--kobra-neon);
  color: #04110c;
  font-weight: 600;
  text-decoration: none;
}

.support-divider {
  opacity: 0.5;
  margin: 8px 0;
}

.support-card textarea {
  width: 100%;
  background: #121821;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 8px;
}

.support-secondary-btn {
  margin-top: 8px;
  width: 100%;
  padding: 8px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--kobra-neon);
  color: var(--kobra-neon);
}

.support-secondary-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.support-close {
  margin-top: 10px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.6);
}

.hidden {
  display: none;
}
.support-secondary-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}