/* ============================================================
   Addlivetag – Site Theme
   Load order: Bootstrap 4.6 → FontAwesome → this file → page-specific
   ============================================================ */

/* --- Design tokens ----------------------------------------- */
:root {
  --color-bg:          #0b1220;
  --color-bg-card:     rgba(17, 24, 39, 0.6);
  --color-accent:      #0ea5e9;
  --color-accent-hover:#0284c7;
  --color-warning:     #f59e0b;
  --color-text:        #e5e7eb;
  --color-muted:       #94a3b8;
  --color-border:      rgba(255, 255, 255, 0.08);

  --glass-bg:          rgba(10, 15, 25, 0.85);
  --glass-blur:        blur(10px);
  --glass-border:      rgba(255, 255, 255, 0.08);

  --card-glow:         0 10px 25px rgba(14, 165, 233, 0.15);
  --shadow-navbar:     0 4px 16px rgba(0, 0, 0, 0.25);

  --transition:        0.2s ease;
}

/* --- Base -------------------------------------------------- */
/* body background/color are NOT set globally — each dark-theme page
   sets them via $page_styles to avoid breaking light-bg pages */
body.page-dark {
  background: var(--color-bg);
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body.page-dark main { flex: 1; }

a:hover { text-decoration: none; }

/* --- Glassmorphism navbar ---------------------------------- */
.navbar-glass {
  background: var(--glass-bg) !important;
  backdrop-filter: saturate(140%) var(--glass-blur);
  -webkit-backdrop-filter: saturate(140%) var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--shadow-navbar);
  transition: transform var(--transition), box-shadow var(--transition);
}

@supports not (backdrop-filter: blur(1px)) {
  .navbar-glass { background: rgba(10, 15, 25, 0.97) !important; }
}

.navbar-hidden { transform: translateY(-100%); }

/* Brand version badge */
.site-version {
  color: #22c55e;
  font-size: 11px;
  font-weight: 600;
  vertical-align: super;
  text-decoration: none;
}
.site-version:hover { text-decoration: underline; }

/* --- Mega menu dropdown ------------------------------------ */
.dropdown-menu-mega {
  background: rgba(10, 12, 20, 0.97);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  min-width: 680px;
}

.mega-col-title {
  color: var(--color-accent);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 0.4rem;
  margin-bottom: 0.5rem;
}

.dropdown-menu-mega .dropdown-item {
  color: var(--color-warning);
  font-size: 0.875rem;
  padding: 0.3rem 0.75rem;
}
.dropdown-menu-mega .dropdown-item:hover {
  background: rgba(245, 158, 11, 0.1);
  color: #fbbf24;
}

/* --- Community dropdown (small dark) ---------------------- */
.dropdown-menu-dark {
  background: rgba(10, 12, 20, 0.97);
  border: 1px solid var(--glass-border);
}
.dropdown-menu-dark .dropdown-item { color: var(--color-text); }
.dropdown-menu-dark .dropdown-item:hover {
  background: rgba(14, 165, 233, 0.12);
  color: var(--color-accent);
}

/* --- Footer ----------------------------------------------- */
footer.site-footer {
  background: rgba(8, 10, 18, 0.97);
  border-top: 1px solid var(--glass-border);
}

.footer-col-title {
  color: var(--color-accent);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
}

.footer-link {
  display: block;
  color: var(--color-muted);
  font-size: 0.875rem;
  text-decoration: none;
  margin-bottom: 0.4rem;
  transition: color var(--transition);
}
.footer-link:hover { color: var(--color-warning); text-decoration: none; }

.footer-divider {
  border-color: var(--color-border);
  margin: 1.5rem 0 1rem;
}

/* --- Watermark background --------------------------------- */
#watermark-background {
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  min-height: 100vh;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
}

/* --- Utility / Bootstrap overrides ------------------------ */
.text-muted  { color: var(--color-muted) !important; }
.badge-danger  { background-color: #ef4444 !important; }
.badge-primary { background-color: #3b82f6 !important; }

.btn-cta { background: var(--color-accent); border: none; color: #fff; }
.btn-cta:hover { background: var(--color-accent-hover); color: #fff; }