/* =====================================================================
   cbdaoTheme.css — shared Crimson & Black look for every CBDAO page.
   Loaded AFTER each page's own stylesheet, so it only has to override
   the background, navbar, menus and footer. To tweak the whole site's
   look, change the variables below (or edit this one file).
   ===================================================================== */

:root {
  --cb-crimson: #880808;
  --cb-crimson-bright: #cc0000;
  --cb-crimson-glow: #ff2a2a;
  --cb-ink: #060102;
  --cb-panel: rgba(12, 4, 5, 0.86);
  --cb-line: rgba(204, 0, 0, 0.38);
}

html { background: var(--cb-ink); }

body {
  background: transparent !important;
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* keep the footer at the bottom on short pages */
body > .footer { margin-top: auto; }
body > .footer:not(:first-child) { flex-shrink: 0; }


/* ---------- trading-chart background (fixed, behind everything) ---------- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(1100px 650px at 88% -8%, rgba(204, 0, 0, 0.42), transparent 62%),
    radial-gradient(900px 600px at -8% 108%, rgba(136, 8, 8, 0.5), transparent 58%),
    linear-gradient(160deg, #030001 0%, #14030a 45%, #2a0505 100%);
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(0, 0, 0, 0.5) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0, transparent 20%, transparent 78%, rgba(0, 0, 0, 0.45) 100%);
}

/* ---------- headings ---------- */
.title, .container > h2 {
  letter-spacing: 1.2px;
  text-shadow: 0 0 22px rgba(204, 0, 0, 0.55);
}
.container > h2::after {
  content: '';
  display: block;
  width: 70px;
  height: 3px;
  margin: 10px auto 0;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--cb-crimson-glow), transparent);
}

/* ---------- NAVBAR ---------- */
.navbar {
  background: linear-gradient(100deg, rgba(120, 6, 6, 0.94) 0%, rgba(26, 3, 4, 0.94) 42%, rgba(4, 4, 6, 0.96) 100%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(204, 0, 0, 0.35);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.navbar.scrolled {
  background: linear-gradient(100deg, rgba(96, 4, 4, 0.97) 0%, rgba(14, 2, 3, 0.97) 42%, rgba(2, 2, 3, 0.98) 100%) !important;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.navbar::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--cb-crimson-glow) 30%, #880808 55%, transparent 100%);
  background-size: 220% 100%;
  animation: cbSheen 7s linear infinite;
  opacity: 0.9;
  pointer-events: none;
}
@keyframes cbSheen { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }

.brand-text {
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 1.35em;
  background: linear-gradient(90deg, #ffffff 0%, #ffd6d6 45%, #ff4d4d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  text-shadow: none !important;
  filter: drop-shadow(0 0 10px rgba(204, 0, 0, 0.55));
}

.navbar img.nav-logo {
  border: 2px solid rgba(204, 0, 0, 0.55);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.45), 0 0 18px rgba(204, 0, 0, 0.45);
}

.menu-toggle {
  border: 1px solid rgba(204, 0, 0, 0.45) !important;
  background: rgba(0, 0, 0, 0.35) !important;
  border-radius: 10px !important;
  transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}
.menu-toggle:hover, .menu-toggle:focus-visible {
  background: rgba(204, 0, 0, 0.28) !important;
  border-color: rgba(255, 60, 60, 0.7) !important;
  box-shadow: 0 0 16px rgba(204, 0, 0, 0.5);
}
.menu-toggle span { height: 2.5px !important; width: 22px !important; }

.lang-toggle {
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(204, 0, 0, 0.45) !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
}
.lang-toggle:hover, .lang-toggle:focus-visible {
  background: rgba(204, 0, 0, 0.28) !important;
  border-color: rgba(255, 60, 60, 0.7) !important;
}

/* dropdown panels: dark glass with a crimson edge */
.dropdown-menu, .lang-dropdown, .user-dropdown, .navbar .cbdao-naw-dropdown {
  background: var(--cb-panel) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--cb-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.04) inset !important;
}
.dropdown-menu a, .lang-dropdown li, .user-dropdown a, .navbar .cbdao-naw-dropdown a {
  border-radius: 9px !important;
  position: relative;
}
.dropdown-menu a:hover, .dropdown-menu a:focus-visible,
.lang-dropdown li:hover, .lang-dropdown li:focus-visible,
.user-dropdown a:hover, .user-dropdown a:focus-visible,
.navbar .cbdao-naw-dropdown a:hover {
  background: linear-gradient(90deg, rgba(204, 0, 0, 0.32), rgba(204, 0, 0, 0.06)) !important;
  box-shadow: inset 3px 0 0 var(--cb-crimson-glow);
  padding-left: 16px !important;
  color: #fff !important;
}
.menu-backdrop { background: rgba(0, 0, 0, 0.55) !important; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

.user-avatar, .navbar .cbdao-naw-avatar {
  border: 2px solid rgba(204, 0, 0, 0.6) !important;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.45), 0 0 16px rgba(204, 0, 0, 0.4);
}

/* ---------- FOOTER ---------- */
.footer {
  position: relative;
  margin-top: 40px;
  padding: 34px 20px 26px !important;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px 18px;
  background:
    radial-gradient(700px 160px at 50% 0, rgba(204, 0, 0, 0.28), transparent 70%),
    linear-gradient(180deg, rgba(14, 2, 3, 0.92), rgba(0, 0, 0, 0.97)) !important;
  border-top: 1px solid rgba(204, 0, 0, 0.4);
  box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.5);
}
.footer::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cb-crimson-glow) 35%, #880808 65%, transparent);
  background-size: 220% 100%;
  animation: cbSheen 9s linear infinite reverse;
}
.footer img {
  width: 84px !important;
  height: 84px !important;
  margin: 0 8px 0 0 !important;
  border-radius: 50%;
  border: 2px solid rgba(204, 0, 0, 0.5);
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.5), 0 0 24px rgba(204, 0, 0, 0.45);
}
.footer a {
  margin: 0 !important;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(204, 0, 0, 0.4);
  background: rgba(0, 0, 0, 0.35);
  color: #f3d6d6 !important;
  font-size: 0.95em !important;
  letter-spacing: 0.4px;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
}
.footer a:hover, .footer a:focus-visible {
  background: linear-gradient(135deg, #a30000, #2a0000);
  border-color: rgba(255, 60, 60, 0.75);
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(204, 0, 0, 0.4);
}
.footer h5 {
  flex-basis: 100%;
  margin: 6px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-weight: 500;
  font-size: 0.82em;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
}

@media (max-width: 640px) {
  .brand-text { font-size: 0.88em; letter-spacing: 1px; white-space: nowrap; }
  .navbar .brand-text, .navbar .brand { min-width: 0; }
  .footer { padding: 26px 14px 22px !important; }
  .footer img { width: 64px !important; height: 64px !important; }
}

@media (max-width: 400px) {
  .brand-text { font-size: 0.78em; letter-spacing: 0.6px; }
}

@media (prefers-reduced-motion: reduce) {
  .navbar::after, .footer::before { animation: none; }
}