/* ============================================================
   Battleship Enterprises — shared site-wide styles
   Nav, theme toggle, buttons, mobile nav, accessibility.
   Extracted from the per-page "SITE-WIDE NAV" blocks (Jul 2026).
   Loaded by every page BEFORE its inline <style>, so any
   page-specific rule still wins the cascade.
   ============================================================ */
/* ══════════════════════════════════════════
   SITE-WIDE NAV — canonical, same on all pages
   ══════════════════════════════════════════ */
.top-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 2.5rem;
  background: rgba(var(--bg-deep-rgb, 10,12,16), 0.88);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(42,47,62,0.45);
  transition: padding 0.3s, background 0.3s;
  gap: 1.5rem;
}
.top-nav.scrolled {
  padding: 0.55rem 2.5rem;
  background: rgba(var(--bg-deep-rgb, 10,12,16), 0.97);
}
.nav-left  { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; min-width: 0; }
.nav-right { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }

/* Logo */
.nav-logo {
  font-family: 'Bebas Neue', sans-serif; font-size: 1.15rem;
  letter-spacing: 0.05em; color: var(--text-primary);
  text-decoration: none; display: flex; align-items: center;
  gap: 0.5rem; flex-shrink: 0; white-space: nowrap;
}
.nav-logo svg { width: 30px; height: 30px; flex-shrink: 0; }
.nav-logo-mark .ring-outer { transform-origin: 32px 32px; animation: bsRingCW 9s linear infinite; }
.nav-logo-mark .ring-inner { transform-origin: 32px 32px; animation: bsRingCCW 5.5s linear infinite; }
.nav-logo-mark .core { transform-origin: 32px 32px; animation: bsCorePulse 2.2s ease-in-out infinite; }
@keyframes bsRingCW { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes bsRingCCW { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes bsCorePulse { 0%,100% { opacity: 0.88; } 50% { opacity: 1; filter: drop-shadow(0 0 5px rgba(0,212,255,0.9)); } }

.nav-glow {
  background: var(--gradient-cyan);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* Nav link list */
.nav-links {
  display: flex; align-items: center; gap: 0.45rem; list-style: none;
  flex-wrap: wrap;
}

/* Theme toggle */
.theme-toggle {
  width: 34px; height: 34px; border-radius: 10px;
  border: 1px solid var(--border); background: transparent;
  color: var(--text-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem; transition: all 0.2s !important; flex-shrink: 0;
}
.theme-toggle:hover { background: var(--bg-card); color: var(--text-primary); }

/* Sign In / Get Started */
.nav-signin { font-family: 'Outfit', sans-serif; font-size: 0.82rem; font-weight: 600; color: #d2d6e8; text-decoration: none; padding: 0 0.9rem; height: 34px; display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; transition: all 0.2s; cursor: pointer; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.16); border-radius: 10px; }
.nav-signin:hover { color: #ffffff; background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.28); }
.nav-getstarted {
  font-family: 'Outfit', sans-serif; font-size: 0.82rem; font-weight: 700;
  color: #fff; text-decoration: none;
  padding: 0 1.1rem; height: 34px;
  display: inline-flex; align-items: center;
  border-radius: 10px; border: none;
  background: var(--gradient-orange); white-space: nowrap;
  transition: all 0.2s; cursor: pointer;
  box-shadow: 0 2px 12px rgba(255,107,53,0.28);
}
.nav-getstarted:hover { opacity: 0.88; transform: translateY(-1px); }

/* ── All service nav buttons share base styles ── */
/* Shared pill shape — same padding/radius/font as .nav-getstarted, so every nav button matches the rest of the site's button style */
.nav-grey-btn, .nav-enterprises-btn, .nav-about-btn,
.nav-shop-btn, .nav-pc-btn, .nav-servers-btn, .nav-storage-btn {
  font-family: 'Outfit', sans-serif; font-size: 0.82rem; font-weight: 600;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.4rem;
  height: 34px; padding: 0 0.9rem; border-radius: 10px;
  transition: all 0.2s;
}
.nav-grey-btn, .nav-enterprises-btn, .nav-about-btn { background: linear-gradient(135deg, #2c313f, #1a1e28); border: none; color: #d2d6e8; box-shadow: 0 2px 10px rgba(0,0,0,0.25); }
/* Grey / home / about */
.nav-grey-btn:hover, .nav-enterprises-btn:hover, .nav-about-btn:hover,
.nav-grey-btn.active, .nav-enterprises-btn.active, .nav-about-btn.active { background: linear-gradient(135deg, #363d4e, #232733); color: #ffffff; box-shadow: 0 4px 16px rgba(0,0,0,0.35); transform: translateY(-1px); }
/* Cyan — Storage */
.nav-storage-btn { background: var(--gradient-cyan); border: none; color: #ffffff; box-shadow: 0 2px 12px rgba(0,160,210,0.32); }
.nav-storage-btn:hover, .nav-storage-btn.active { box-shadow: 0 5px 20px rgba(0,180,220,0.5); transform: translateY(-1px); color: #ffffff; }
/* Orange — Print Shop */
.nav-shop-btn { background: var(--gradient-orange); border: none; color: #ffffff; box-shadow: 0 2px 12px rgba(220,80,20,0.32); }
.nav-shop-btn:hover, .nav-shop-btn.active { box-shadow: 0 5px 20px rgba(230,90,20,0.5); transform: translateY(-1px); color: #ffffff; }
/* Purple — PC Builder */
.nav-pc-btn { background: linear-gradient(135deg, #8b52f0, #6b2fd1); border: none; color: #ffffff; box-shadow: 0 2px 12px rgba(124,58,237,0.32); }
.nav-pc-btn:hover, .nav-pc-btn.active { box-shadow: 0 5px 20px rgba(139,82,240,0.5); transform: translateY(-1px); color: #ffffff; }
/* Green — Game Servers */
.nav-servers-btn { background: linear-gradient(135deg, #12b981, #0c8259); border: none; color: #ffffff; box-shadow: 0 2px 12px rgba(16,185,129,0.32); }
.nav-servers-btn:hover, .nav-servers-btn.active { box-shadow: 0 5px 20px rgba(18,200,140,0.5); transform: translateY(-1px); color: #ffffff; }

/* ── Light mode overrides ── */
[data-theme="light"] .nav-grey-btn,
[data-theme="light"] .nav-enterprises-btn,
[data-theme="light"] .nav-about-btn { background: linear-gradient(135deg, #f3f4f7, #e4e7ee); border: none; color: #374151; box-shadow: 0 1px 6px rgba(17,24,39,0.08); }
[data-theme="light"] .nav-grey-btn:hover, [data-theme="light"] .nav-grey-btn.active,
[data-theme="light"] .nav-enterprises-btn:hover,
[data-theme="light"] .nav-about-btn:hover, [data-theme="light"] .nav-about-btn.active { background: linear-gradient(135deg, #e9ebf0, #d7dbe3); color: #111827; box-shadow: 0 3px 10px rgba(17,24,39,0.12); transform: translateY(-1px); }
[data-theme="light"] .nav-storage-btn { background: var(--gradient-cyan); border: none; color: #ffffff; box-shadow: 0 2px 10px rgba(0,120,160,0.25); }
[data-theme="light"] .nav-storage-btn:hover, [data-theme="light"] .nav-storage-btn.active { box-shadow: 0 4px 16px rgba(0,120,160,0.4); transform: translateY(-1px); color: #ffffff; }
[data-theme="light"] .nav-shop-btn { background: var(--gradient-orange); border: none; color: #ffffff; box-shadow: 0 2px 10px rgba(180,70,15,0.25); }
[data-theme="light"] .nav-shop-btn:hover, [data-theme="light"] .nav-shop-btn.active { box-shadow: 0 4px 16px rgba(180,70,15,0.4); transform: translateY(-1px); color: #ffffff; }
[data-theme="light"] .nav-pc-btn { background: linear-gradient(135deg, #7c3aed, #5b21b6); border: none; color: #ffffff; box-shadow: 0 2px 10px rgba(107,47,209,0.25); }
[data-theme="light"] .nav-pc-btn:hover, [data-theme="light"] .nav-pc-btn.active { box-shadow: 0 4px 16px rgba(107,47,209,0.4); transform: translateY(-1px); color: #ffffff; }
[data-theme="light"] .nav-servers-btn { background: linear-gradient(135deg, #12b981, #0c8259); border: none; color: #ffffff; box-shadow: 0 2px 10px rgba(12,130,89,0.25); }
[data-theme="light"] .nav-servers-btn:hover, [data-theme="light"] .nav-servers-btn.active { box-shadow: 0 4px 16px rgba(12,130,89,0.4); transform: translateY(-1px); color: #ffffff; }
[data-theme="light"] .nav-signin { color: #374151; background: rgba(17,24,39,0.04); border-color: rgba(17,24,39,0.14); box-shadow: none; }
[data-theme="light"] .nav-signin:hover { color: #111827; background: rgba(17,24,39,0.08); border-color: rgba(17,24,39,0.26); }
[data-theme="light"] .nav-getstarted { box-shadow: 0 2px 10px rgba(200,60,10,0.2); }

/* Hamburger (mobile) */
.nav-hamburger {
  display: none; background: transparent; border: 1px solid var(--border);
  color: var(--text-muted); border-radius: 8px; padding: 0.3rem 0.55rem;
  font-size: 1.1rem; cursor: pointer; transition: all 0.2s;
}
.nav-hamburger:hover { background: var(--bg-card); color: var(--text-primary); }

/* Hide mobile-only Sign In item on desktop */
.nav-mobile-signin { display: none; }

@media (max-width: 860px) {
  .top-nav { padding: 0.65rem 1.2rem; gap: 0.5rem; }
  .nav-links { display: none; }
  .nav-hamburger { display: flex !important; align-items: center; justify-content: center; }
  .nav-getstarted { display: none; }
  /* Hide Sign In from nav-right on mobile (it appears in dropdown instead) */
  .nav-right .nav-signin { font-family: 'Outfit', sans-serif; font-size: 0.82rem; font-weight: 600; color: #d2d6e8; text-decoration: none; padding: 0 0.9rem; height: 34px; display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; transition: all 0.2s; cursor: pointer; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.16); border-radius: 10px; }
  /* Show Sign In inside mobile dropdown */
  .nav-mobile-signin { display: list-item; }
  /* Ensure nav-right items don't overflow */
  .nav-right { gap: 0.4rem; flex-shrink: 0; }
  /* Mobile nav dropdown */
  .nav-links.mobile-open {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 58px;
    left: 0; right: 0;
    background: rgba(10,12,16,0.98);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 1.2rem 1.5rem 1.8rem;
    gap: 0.5rem;
    border-bottom: 1px solid var(--border);
    z-index: 900;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  }
  .nav-links.mobile-open li {
    list-style: none;
  }
  .nav-links.mobile-open li a,
  .nav-links.mobile-open li button,
  .nav-links.mobile-open li .nav-signin,
  .nav-links.mobile-open li .nav-getstarted,
  .nav-links.mobile-open li .cart-btn {
    display: flex !important;
    width: 100%;
    padding: 0.7rem 1rem;
    font-size: 0.95rem;
    border-radius: 8px;
    height: auto;
  }
  [data-theme="light"] .nav-links.mobile-open {
    background: rgba(245,246,250,0.98);
  }
}

/* ── NAV: Shop section tabs — collapsed pill, smooth dropdown on hover ── */
.nav-shop-group {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--gradient-orange);
  border: none;
  border-radius: 10px;
  height: 34px;
  box-shadow: 0 2px 12px rgba(220,80,20,0.32);
  transition: box-shadow 0.2s;
}
.nav-shop-group-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
  padding: 0 0.9rem;
  white-space: nowrap;
  height: 100%;
  display: flex;
  align-items: center;
  border-radius: 10px;
}
.nav-shop-tabs {
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--bg-card, #181c26);
  border: 1px solid rgba(220,80,20,0.3);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.4);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: max-height 0.28s ease, opacity 0.22s ease, transform 0.28s ease, padding 0.22s ease;
  z-index: 30;
}
.nav-shop-group:hover .nav-shop-tabs,
.nav-shop-group:focus-within .nav-shop-tabs {
  max-height: 220px;
  opacity: 1;
  padding: 0.35rem;
  pointer-events: auto;
  transform: translateY(0);
}
.nav-shop-tab {
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 0.55rem 0.8rem;
  width: 100%;
  display: flex;
  align-items: center;
  white-space: nowrap;
  border-radius: 7px;
  transition: background 0.15s, color 0.15s;
  cursor: pointer;
  border: none;
  background: none;
  text-align: left;
}
.nav-shop-tab:hover { background: rgba(255,107,53,0.12); color: var(--accent-orange, #ff6b35); }
.nav-shop-tab.active { background: rgba(255,107,53,0.16); color: var(--accent-orange, #ff6b35); font-weight: 600; }
[data-theme="light"] .nav-shop-group { background: var(--gradient-orange); box-shadow: 0 2px 10px rgba(180,70,15,0.25); }
[data-theme="light"] .nav-shop-group-label { color: #ffffff; }
@media (max-width: 860px) {
  .nav-shop-group { flex-direction: column; align-items: stretch; height: auto; }
  .nav-shop-group-label { height: auto; border-radius: 10px 10px 0 0; padding: 0.6rem 0.9rem; }
  .nav-shop-tabs {
    position: static; max-height: none; opacity: 1; padding: 0.3rem;
    pointer-events: auto; transform: none;
    overflow: visible; border: none; box-shadow: none; background: none;
  }
  .nav-shop-tab { color: rgba(255,255,255,0.85); }
  .nav-shop-tab:hover, .nav-shop-tab.active { background: rgba(255,255,255,0.16); color: #fff; }
}

/* ── NAV: PC Builder section tabs — collapsed pill, smooth dropdown on hover ── */
.nav-pc-group {
  position: relative;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #8b52f0, #6b2fd1);
  border: none;
  border-radius: 10px;
  height: 34px;
  box-shadow: 0 2px 12px rgba(124,58,237,0.32);
  transition: box-shadow 0.2s;
}
.nav-pc-group-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
  padding: 0 0.9rem;
  white-space: nowrap;
  height: 100%;
  display: flex;
  align-items: center;
  border-radius: 10px;
}
.nav-pc-tabs {
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--bg-card, #181c26);
  border: 1px solid rgba(124,58,237,0.3);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.4);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: max-height 0.28s ease, opacity 0.22s ease, transform 0.28s ease, padding 0.22s ease;
  z-index: 30;
}
.nav-pc-group:hover .nav-pc-tabs,
.nav-pc-group:focus-within .nav-pc-tabs {
  max-height: 220px;
  opacity: 1;
  padding: 0.35rem;
  pointer-events: auto;
  transform: translateY(0);
}
.nav-pc-tab {
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 0.55rem 0.8rem;
  width: 100%;
  display: flex;
  align-items: center;
  white-space: nowrap;
  border-radius: 7px;
  transition: background 0.15s, color 0.15s;
  cursor: pointer;
  text-align: left;
}
.nav-pc-tab:hover { background: rgba(139,82,240,0.14); color: #a78bfa; }
.nav-pc-tab.active { background: rgba(139,82,240,0.18); color: #a78bfa; font-weight: 600; }
[data-theme="light"] .nav-pc-group { background: linear-gradient(135deg, #7c3aed, #5b21b6); box-shadow: 0 2px 10px rgba(107,47,209,0.25); }
[data-theme="light"] .nav-pc-group-label { color: #ffffff; }
@media (max-width: 860px) {
  .nav-pc-group { flex-direction: column; align-items: stretch; height: auto; }
  .nav-pc-group-label { height: auto; border-radius: 10px 10px 0 0; padding: 0.6rem 0.9rem; }
  .nav-pc-tabs {
    position: static; max-height: none; opacity: 1; padding: 0.3rem;
    pointer-events: auto; transform: none;
    overflow: visible; border: none; box-shadow: none; background: none;
  }
  .nav-pc-tab { color: rgba(255,255,255,0.85); }
  .nav-pc-tab:hover, .nav-pc-tab.active { background: rgba(255,255,255,0.16); color: #fff; }
}

/* ── Servers in-page tab group — collapsed pill, smooth dropdown on hover ── */
.nav-servers-group {
  position: relative;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #12b981, #0c8259);
  border: none;
  border-radius: 10px;
  height: 34px;
  box-shadow: 0 2px 12px rgba(16,185,129,0.32);
  transition: box-shadow 0.2s;
}
.nav-servers-group-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
  padding: 0 0.9rem;
  white-space: nowrap;
  height: 100%;
  display: flex;
  align-items: center;
  border-radius: 10px;
}
.nav-servers-tabs {
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--bg-card, #181c26);
  border: 1px solid rgba(16,185,129,0.3);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.4);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: max-height 0.28s ease, opacity 0.22s ease, transform 0.28s ease, padding 0.22s ease;
  z-index: 30;
}
.nav-servers-group:hover .nav-servers-tabs,
.nav-servers-group:focus-within .nav-servers-tabs {
  max-height: 220px;
  opacity: 1;
  padding: 0.35rem;
  pointer-events: auto;
  transform: translateY(0);
}
.nav-servers-tab {
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 0.55rem 0.8rem;
  width: 100%;
  display: flex;
  align-items: center;
  white-space: nowrap;
  border-radius: 7px;
  transition: background 0.15s, color 0.15s;
  cursor: pointer;
  text-align: left;
}
.nav-servers-tab:hover { background: rgba(16,185,129,0.14); color: #34d399; }
.nav-servers-tab.active { background: rgba(16,185,129,0.18); color: #34d399; font-weight: 600; }
[data-theme="light"] .nav-servers-group { background: linear-gradient(135deg, #12b981, #0c8259); box-shadow: 0 2px 10px rgba(12,130,89,0.25); }
[data-theme="light"] .nav-servers-group-label { color: #ffffff; }
@media (max-width: 860px) {
  .nav-servers-group { flex-direction: column; align-items: stretch; height: auto; }
  .nav-servers-group-label { height: auto; border-radius: 10px 10px 0 0; padding: 0.6rem 0.9rem; }
  .nav-servers-tabs {
    position: static; max-height: none; opacity: 1; padding: 0.3rem;
    pointer-events: auto; transform: none;
    overflow: visible; border: none; box-shadow: none; background: none;
  }
  .nav-servers-tab { color: rgba(255,255,255,0.85); }
  .nav-servers-tab:hover, .nav-servers-tab.active { background: rgba(255,255,255,0.16); color: #fff; }
}

/* ── NAV: STORAGE TAB GROUP — collapsed pill, smooth dropdown on hover ── */
.nav-storage-group {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--gradient-cyan);
  border: none;
  border-radius: 10px;
  height: 34px;
  box-shadow: 0 2px 12px rgba(0,160,210,0.32);
  transition: box-shadow 0.2s;
}
.nav-storage-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #ffffff;
  text-decoration: none;
  padding: 0 0.9rem;
  white-space: nowrap;
  height: 100%;
  display: flex;
  align-items: center;
  border-radius: 10px;
}
.nav-storage-tabs {
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--bg-card, #181c26);
  border: 1px solid rgba(0,160,210,0.3);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.4);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: max-height 0.28s ease, opacity 0.22s ease, transform 0.28s ease, padding 0.22s ease;
  z-index: 30;
}
.nav-storage-group:hover .nav-storage-tabs,
.nav-storage-group:focus-within .nav-storage-tabs {
  max-height: 260px;
  opacity: 1;
  padding: 0.35rem;
  pointer-events: auto;
  transform: translateY(0);
}
.nav-storage-tab {
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 0.55rem 0.8rem;
  width: 100%;
  display: flex;
  align-items: center;
  white-space: nowrap;
  border-radius: 7px;
  letter-spacing: 0.01em;
  transition: background 0.15s, color 0.15s;
  text-align: left;
}
.nav-storage-tab:hover {
  background: rgba(0,180,220,0.14);
  color: #22d3ee;
}
.nav-storage-tab.active {
  background: rgba(0,180,220,0.18);
  color: #22d3ee;
  font-weight: 600;
}
[data-theme="light"] .nav-storage-group { background: var(--gradient-cyan); box-shadow: 0 2px 10px rgba(0,120,160,0.25); }
[data-theme="light"] .nav-storage-label { color: #ffffff; }
@media (max-width: 860px) {
  .nav-storage-group { flex-direction: column; align-items: stretch; height: auto; }
  .nav-storage-label { height: auto; border-radius: 10px 10px 0 0; padding: 0.6rem 0.9rem; }
  .nav-storage-tabs {
    position: static; max-height: none; opacity: 1; padding: 0.3rem;
    pointer-events: auto; transform: none;
    overflow: visible; border: none; box-shadow: none; background: none;
  }
  .nav-storage-tab { color: rgba(255,255,255,0.85); }
  .nav-storage-tab:hover, .nav-storage-tab.active { background: rgba(255,255,255,0.16); color: #fff; }
}


/* ============================================
   Accessibility — added site-wide
   ============================================ */

/* Skip-to-content link: invisible until focused via keyboard */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: #0a0c10; color: #ffffff; padding: 0.6rem 1.2rem;
  border-radius: 0 0 10px 0; font-family: 'Outfit', sans-serif;
  font-size: 0.9rem; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* Respect users who turn off animations at the OS level */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}