/* ============================================================================
   navigation.css — Diamonds Outta Dirt (Purpley Shop Navigation)
   Path: /home2/asqrtyte/public_html/css/navigation.css

   PATCH (2026-02-16) — MOBILE “PAGE REFRESH ON LONG SCROLL” HARDENING
   Notes:
   - CSS cannot directly "refresh" a page, but on mobile browsers (esp. iOS Safari),
     heavy GPU effects (backdrop-filter, stacked blurs, constant animations) can
     increase memory pressure and cause the browser to kill the tab and reload.
   - This patch keeps your design, but disables expensive effects on mobile /
     reduced-transparency environments.

   Retains (2026-02-15):
   - MOBILE FILTERS “NOT POPPING UP” FIX (remove contain: paint; on .tactical-nav)
   ============================================================================ */

:root{
  --nav-purple: #b84dff;
  --nav-purple2: #8a2cff;
  --nav-cyan: #00f3ff;
  --nav-text: rgba(255,255,255,.92);
  --nav-dim: rgba(255,255,255,.55);
  --nav-border: rgba(184,77,255,.22);
  --nav-border-strong: rgba(184,77,255,.55);
  --nav-bg: rgba(0,0,0,.88);
  --nav-bg2: rgba(10,10,16,.78);
  --nav-radius: 12px;

  /* a11y helpers */
  --nav-focus: rgba(0,243,255,.85);
  --nav-focus-shadow: 0 0 0 3px rgba(0,243,255,.22), 0 0 18px rgba(184,77,255,.16);

  /* stacking helpers (kept local; won’t fight master.css variables) */
  --nav-z: 1000;
  --nav-z-max: 9999;
}

/* Base page helper (if master.css doesn’t include these) */
.skip-link{
  position:absolute;
  top:-40px;
  left:10px;
  background: var(--nav-purple);
  color:#000;
  padding:10px 14px;
  z-index: var(--nav-z-max);
  text-decoration:none;
  font-family:"Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size:.75rem;
  font-weight:900;
  border-radius:10px;
}
.skip-link:focus{
  top:10px;
  outline:2px solid var(--nav-cyan);
  outline-offset:3px;
}

/* ============================================================================
   NAV CORE
   - isolation prevents backdrop-filter/blur from affecting unrelated stacking layers
   - IMPORTANT: DO NOT use `contain: paint;` here; it can clip native <select>
     dropdown menus on some browsers (the “nothing pops up” issue).
   ============================================================================ */
.tactical-nav{
  position: sticky;
  top: 0;
  z-index: var(--nav-z);
  background: var(--nav-bg);
  border-bottom: 1px solid rgba(255,255,255,.08);

  isolation: isolate;
  /* contain: paint;  -- REMOVED (can clip native dropdown popups) */

  /* Stabilize sticky compositing on some mobile GPUs */
  transform: translateZ(0);
  will-change: transform;
}

/* Backdrop blur (safe fallback if unsupported) */
@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))){
  .tactical-nav{
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

.top-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 16px 10%;
  gap: 18px;
}

.logo-area{
  display:flex;
  align-items:center;
  gap: 10px;
}

.status-dot{
  width:10px;
  height:10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--nav-purple), var(--nav-cyan));
  box-shadow: 0 0 16px rgba(184,77,255,.25);
  animation: navPulse 1.8s ease-in-out infinite;
}

@keyframes navPulse{
  0%,100%{ transform:scale(1); opacity:.85; }
  50%{ transform:scale(1.2); opacity:1; }
}

.logo{
  text-decoration:none;
  color: var(--nav-text);
  font-family: "Syncopate", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: 2px;
  font-size: .8rem;
  font-weight: 900;
  text-transform: uppercase;
}
.logo:hover{ color: var(--nav-purple); }
.logo:focus-visible{
  outline: 2px solid var(--nav-focus);
  outline-offset: 6px;
  border-radius: 10px;
}

.system-status{
  color: var(--nav-purple);
  font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .7rem;
  letter-spacing: 2px;
  white-space: nowrap;
  opacity: .9;
}

.sub-nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 18px;
  padding: 14px 10%;
  border-top: 1px solid rgba(255,255,255,.08);
  background: var(--nav-bg2);
  position: relative;
  z-index: calc(var(--nav-z) + 1);
}

.nav-group{
  display:flex;
  align-items:center;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.nav-label{
  font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .62rem;
  letter-spacing: 2px;
  color: var(--nav-purple);
  margin-right: 8px;
  opacity: .95;
}

.nav-tab{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--nav-border);
  color: var(--nav-dim);
  text-decoration:none;
  font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .68rem;
  letter-spacing: 1.5px;
  transition: transform .2s ease, border-color .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease;
  background: rgba(184,77,255,.04);
  white-space: nowrap;
  touch-action: manipulation;
}

.nav-tab .count{
  color: rgba(184,77,255,.95);
  font-weight: 900;
}

.nav-tab:hover{
  transform: translateY(-2px);
  border-color: var(--nav-border-strong);
  color: rgba(255,255,255,.9);
  background: rgba(184,77,255,.10);
}

.nav-tab:focus-visible{
  outline: 2px solid var(--nav-focus);
  outline-offset: 4px;
  box-shadow: var(--nav-focus-shadow);
}

.nav-tab.active{
  color: #000;
  background: linear-gradient(135deg, var(--nav-purple), var(--nav-cyan));
  border-color: rgba(255,255,255,.15);
  box-shadow: 0 12px 28px rgba(0,0,0,.45), 0 0 18px rgba(184,77,255,.15);
}
.nav-tab.active .count{
  color:#000;
}

.nav-links{
  display:flex;
  align-items:center;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}

.nav-link{
  color: rgba(255,255,255,.85);
  text-decoration:none;
  font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .7rem;
  letter-spacing: 2px;
  transition: color .2s ease, box-shadow .2s ease;
  padding: 8px 6px; /* bigger tap area */
  border-radius: 10px;
}
.nav-link:hover{ color: var(--nav-purple); }
.nav-link:focus-visible{
  outline: 2px solid var(--nav-focus);
  outline-offset: 4px;
  box-shadow: var(--nav-focus-shadow);
}

.nav-cart{
  color: rgba(184,77,255,.95);
}
.nav-cart:hover{
  color: rgba(255,255,255,.95);
}

/* ============================================================================
   SHOP MOBILE TOGGLE (shop.php uses .nav-mobile-toggle + #shopNavLinks.open)
   ============================================================================ */
.nav-mobile-toggle{
  display:none;
  width: calc(100% - 0px);
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(184,77,255,.22);
  background: rgba(0,0,0,.55);
  color: rgba(255,255,255,.92);
  font-family:"Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size:.72rem;
  letter-spacing:2px;
  text-transform: uppercase;
  cursor:pointer;
  touch-action: manipulation;
}
.nav-mobile-toggle:hover{
  border-color: rgba(184,77,255,.55);
}
.nav-mobile-toggle:focus-visible{
  outline:2px solid var(--nav-focus);
  outline-offset:4px;
  box-shadow: var(--nav-focus-shadow);
}

/* ============================================================================
   MOBILE SECTOR SELECT SUPPORT
   ============================================================================ */
.sector-select{
  display:none; /* desktop hidden (tabs show) */
  width:100%;
  min-height:44px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(184,77,255,.22);
  background: rgba(0,0,0,.55);
  color: rgba(255,255,255,.92);
  font-family:"Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size:.72rem;
  letter-spacing:2px;
  text-transform: uppercase;
  position: relative;
  z-index: calc(var(--nav-z) + 3);
  -webkit-appearance: none;
  appearance: none;
}

.sector-select:focus,
.sector-select:focus-visible{
  border-color: rgba(0,243,255,.55);
  box-shadow: 0 0 0 3px rgba(0,243,255,.14);
  outline: none;
}

/* subtle chevron (does not affect native dropdown) */
.sector-select{
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(0,243,255,.9) 50%),
    linear-gradient(135deg, rgba(0,243,255,.9) 50%, transparent 50%),
    linear-gradient(to right, rgba(184,77,255,.18), rgba(184,77,255,.08));
  background-position:
    calc(100% - 18px) 52%,
    calc(100% - 12px) 52%,
    0 0;
  background-size:
    6px 6px,
    6px 6px,
    100% 100%;
  background-repeat: no-repeat;
  padding-right: 42px;
}

/* ============================================================================
   Legacy shop styles kept
   ============================================================================ */
.shop-wrap{
  padding: 0 10% 110px;
}

.shop-hero{
  padding: 90px 0 34px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.status-label{
  font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  color: rgba(184,77,255,.95);
  font-size: .7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.shop-title{
  margin: 12px 0 10px;
  font-family: "Syncopate", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: rgba(255,255,255,.96);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1.05;
}

.shop-sub{
  font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  color: rgba(255,255,255,.75);
  letter-spacing: 2px;
  font-size: .72rem;
  margin-top: 8px;
}

.shop-meta{
  font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  color: rgba(255,255,255,.55);
  letter-spacing: 2px;
  font-size: .7rem;
  margin-top: 10px;
}

.filter-panel{
  margin: 28px 0 0;
}

.filter-form{
  display:flex;
  flex-wrap:wrap;
  gap: 16px;
  align-items:flex-end;
  padding: 18px 18px;
  border-radius: var(--nav-radius);
  border: 1px solid rgba(184,77,255,.16);
  background: rgba(10,10,16,.55);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

.filter-form .f{
  flex: 1 1 210px;
  min-width: 210px;
}

.filter-form .f label{
  display:block;
  margin-bottom: 7px;
  font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .72rem;
  letter-spacing: 2px;
  color: rgba(184,77,255,.92);
}

.filter-form input,
.filter-form select{
  width:100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(184,77,255,.18);
  background: rgba(0,0,0,.55);
  color: rgba(255,255,255,.92);
  outline: none;
}

.filter-form input:focus,
.filter-form select:focus{
  border-color: rgba(184,77,255,.55);
  box-shadow: 0 0 0 3px rgba(184,77,255,.12);
}

/* Keyboard focus state (modern browsers) */
.filter-form input:focus-visible,
.filter-form select:focus-visible{
  border-color: rgba(0,243,255,.55);
  box-shadow: 0 0 0 3px rgba(0,243,255,.14);
}

.filter-form .f-btn{
  flex: 0 0 140px;
  min-width: 140px;
}

.filter-form button{
  width:100%;
  padding: 11px 14px;
  border-radius: 999px;
  border: 0;
  cursor:pointer;
  font-family: "Syncopate", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: 2px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--nav-purple), var(--nav-cyan));
  color:#000;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.filter-form button:hover{
  transform: translateY(-2px);
  filter: brightness(1.05);
}
.filter-form button:focus-visible{
  outline: 2px solid var(--nav-focus);
  outline-offset: 4px;
  box-shadow: var(--nav-focus-shadow);
}

.loading-spinner .hint{
  display:block;
  margin-top: 8px;
  color: rgba(255,255,255,.55);
  font-size: .7rem;
  letter-spacing: 2px;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 768px){
  .top-bar, .sub-nav, .shop-wrap{ padding-left: 5%; padding-right: 5%; }
  .system-status{ display:none; }

  /* show the MENU button used by shop.php */
  .nav-mobile-toggle{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    margin: 0 5% 10px;
    width: calc(100% - 10%);
  }

  /* Better wrapping on small screens */
  .nav-links{ gap: 10px; }
  .nav-group{ gap: 8px; width: 100%; }

  /* IMPORTANT: mobile uses select instead of tabs */
  .sector-tabs{ display:none; }
  .sector-select{ display:block; }

  /* shop.php toggles .nav-links.open */
  .nav-links{
    width: 100%;
    display:none;
    gap: 10px;
    margin-top: 10px;
  }
  .nav-links.open{
    display:flex;
  }

  .nav-tab{ padding: 10px 12px; }

  .filter-form .f{ min-width: 160px; }
  .filter-form .f-btn{ min-width: 160px; flex: 1 1 160px; }

  /* Mobile hardening: reduce continuous GPU load */
  .status-dot{ animation: none; }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce){
  .status-dot{
    animation: none !important;
  }
  .nav-tab,
  .filter-form button{
    transition: none !important;
  }
  .nav-tab:hover,
  .filter-form button:hover{
    transform: none;
  }
}

/* Reduced Transparency / Mobile GPU hardening:
   - Disable backdrop-filter blur which can spike memory usage on mobile browsers
     and contribute to tab reloads on long scroll.
*/
@media (max-width: 768px), (prefers-reduced-transparency: reduce){
  .tactical-nav{
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(0,0,0,.92);
  }
}