/* === Beavis & Butt-Head 90s Theme Override === */
@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Luckiest+Guy&family=Permanent+Marker&family=Comic+Neue:wght@400;700&display=swap');

:root {
  --bb-bg-primary: #d6b56d;
  --bb-bg-secondary: #d5bb8b;
  --bb-surface: #c9ad80;
  --bb-ink: #8e7633;
  --bb-muted: #a18e5e;
  --bb-yellow: #f0c96a;
  --bb-red: #c3a196;
  --bb-blue: #6b7a2c;
  --bb-turq: #8aa03a;
  --bb-outline: #7d6d2a;
}

html, body {
  background: radial-gradient(circle at 20% -10%, var(--bb-bg-secondary), var(--bb-bg-primary)) fixed !important;
  color: var(--bb-ink) !important;
  font-family: 'Comic Neue', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: 0.01em;
}

h1, h2, h3, .display-1, .display-2, .hero-title, [class*="title"] {
  font-family: 'Bangers', Impact, Haettenschweiler, 'Arial Black', sans-serif;
  color: var(--bb-outline)!important;
  text-shadow: 2px 2px 0 var(--bb-outline), 4px 4px 0 rgba(0,0,0,.35);
  letter-spacing: 0.02em;
}

h4, h5, h6, .subtitle, .section-title {
  font-family: 'Luckiest Guy','Bangers','Arial Black',sans-serif;
  color: var(--bb-turq) !important;
}

p, li, span, a, small, label, input, textarea, select, button {
  color: var(--bb-ink) !important;
}

a {
  color: var(--bb-blue)!important;
  text-decoration-thickness: 3px;
  text-underline-offset: 3px;
}
a:hover { color: var(--bb-yellow)!important; }

button, .btn, [role="button"], input[type="button"], input[type="submit"] {
  font-family: 'Permanent Marker','Bangers',Impact,sans-serif;
  background: linear-gradient(180deg, var(--bb-red), #c6a65f) !important;
  color: var(--bb-ink) !important;
  border: 3px solid var(--bb-outline) !important;
  box-shadow: 4px 4px 0 var(--bb-outline) !important;
  text-transform: uppercase;
  letter-spacing: .06em;
}
button:hover, .btn:hover, [role="button"]:hover, input[type="submit"]:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--bb-outline) !important;
}

.card, .panel, .box, .container, .section, .tile, .module {
  background: var(--bb-surface)!important;
  border: 3px solid var(--bb-outline) !important;
  box-shadow: 10px 10px 0 var(--bb-outline) !important;
  border-radius: 18px !important;
}

input, textarea, select {
  background: var(--bb-bg-secondary) !important;
  border: 3px solid var(--bb-outline) !important;
  color: var(--bb-ink) !important;
  border-radius: 12px !important;
}
input::placeholder, textarea::placeholder { color: var(--bb-muted) !important; }

.badge, .pill, .tag {
  background: var(--bb-yellow) !important;
  color: #000 !important;
  border: 3px solid var(--bb-outline) !important;
  box-shadow: 3px 3px 0 var(--bb-outline) !important;
}

header, nav, .navbar, footer {
  background: repeating-linear-gradient(45deg, var(--bb-bg-secondary), var(--bb-bg-secondary) 10px, var(--bb-bg-primary) 10px, var(--bb-bg-primary) 20px) !important;
  border-bottom: 4px solid var(--bb-outline) !important;
}
.navbar a, nav a, footer a { color: var(--bb-blue)!important; }

.primary, .primary-bg, .is-primary { background-color: var(--bb-yellow) !important; color: #000 !important; }
.secondary, .secondary-bg, .is-secondary { background-color: var(--bb-blue) !important; color: #000 !important; }
.accent, .accent-bg, .is-accent { background-color: var(--bb-turq) !important; color: #000 !important; }

table, th, td {
  border: 3px solid var(--bb-outline) !important;
}
thead th { background: var(--bb-yellow) !important; color: #000 !important; }
tbody tr:nth-child(odd) { background: rgba(255,255,255,0.03) !important; }
tbody tr:hover { background: rgba(255, 212, 71, 0.15) !important; }

hr { border: 0; height: 4px; background: var(--bb-yellow) !important; box-shadow: 2px 2px 0 var(--bb-outline) !important; }

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 4px 4px;
  mix-blend-mode: overlay;
  opacity: .4;
}

* { color: inherit; }
[style*="color:"] { color: var(--bb-ink) !important; }
[style*="background"] { background: var(--bb-bg-primary) !important; }

.secondary-text, .muted, .text-muted { color: var(--bb-muted) !important; }

.alert, .toast, .notification {
  background: var(--bb-yellow) !important;
  color: #000 !important;
  border: 3px solid var(--bb-outline) !important;
}

* { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }


/* === Readability pass === */
body, p, li, span, a, small, label, input, textarea, select {
  color: var(--bb-ink) !important;
  line-height: 1.7 !important;
}
p, li { font-weight: 500; }
@media (min-width: 768px) {
  body { font-size: 18px; }
}
/* Remove heavy shadows from body text to keep it crisp */
p, li, span, small { text-shadow: none !important; }
/* Headings slightly cleaner shadows */
h1, h2, h3 { text-shadow: 1px 1px 0 var(--bb-outline), 2px 2px 0 rgba(0,0,0,.25) !important; }
/* Buttons: boost text contrast */
button, .btn, [role="button"], input[type="submit"] { color: #111 !important; }
/* Links: brighter by default */
a { color: var(--bb-blue)!important; }
a:hover { color: var(--bb-yellow)!important; }
/* Inputs: raise placeholder contrast */
input::placeholder, textarea::placeholder { color: #c8bea5 !important; }
/* Cards: keep textures but lighten copy inside */
.card, .panel, .box, .container, .section, .tile, .module { color: var(--bb-ink) !important; }
/* Ensure overlay never dims text */
body::after { mix-blend-mode: overlay; opacity: .35; }


/* === Light pass + About readability === */
#about, .about, [id*="about"], [class*="about"] {
  background: var(--bb-surface) !important;
  color: var(--bb-ink) !important;
}
#about *, .about *, [id*="about"] *, [class*="about"] * {
  color: var(--bb-ink) !important;
  text-shadow: none !important;
}
/* General text contrast on light theme */
body, p, li, span, small, label {
  color: var(--bb-ink) !important;
}
/* Keep halftone texture but reduce interference */
body::after { opacity: .28; }
/* Buttons tuned for light theme */
button, .btn, [role="button"], input[type="button"], input[type="submit"] {
  background: linear-gradient(180deg, var(--bb-yellow), #d3a74a) !important;
  color: #8b6b25 !important;
  border-color: var(--bb-outline) !important;
}
/* Navbar readable on light */
header, nav, .navbar, footer {
  border-bottom: 3px solid var(--bb-outline) !important;
}


/* === Light overrides for Tokenomics & How to Buy (with backkk.png) === */
:root {
  --bb-section-light: #e9d39c; /* lighter sandy */
  --bb-section-card: #f3e3b8;  /* inner blocks */
  --bb-section-border: rgba(15,13,5,0.6);
}

.bb-tokenomics, .bb-howtobuy,
section[id*="token"], div[id*="token"], section[class*="token"], div[class*="token"],
section[id*="buy"], div[id*="buy"], section[class*="buy"], div[class*="buy"] {
  background: var(--bb-section-light) !important;
  color: var(--bb-ink) !important;
  border: 3px solid var(--bb-section-border) !important;
  box-shadow: 8px 8px 0 var(--bb-outline) !important;
  background-blend-mode: normal !important;
}

.bb-tokenomics *, .bb-howtobuy * {
  color: var(--bb-ink) !important;
  text-shadow: none !important;
}

.bb-tokenomics .card, .bb-howtobuy .card,
.bb-tokenomics .panel, .bb-howtobuy .panel,
.bb-tokenomics .box, .bb-howtobuy .box {
  background: var(--bb-section-card) !important;
  color: var(--bb-ink) !important;
  border: 3px solid var(--bb-section-border) !important;
}

.bb-tokenomics h1, .bb-howtobuy h1,
.bb-tokenomics h2, .bb-howtobuy h2,
.bb-tokenomics h3, .bb-howtobuy h3 {
  color: var(--bb-outline) !important;
  text-shadow: 1px 1px 0 var(--bb-outline), 2px 2px 0 rgba(0,0,0,.12) !important;
}

.bb-tokenomics .btn, .bb-howtobuy .btn,
.bb-tokenomics button, .bb-howtobuy button {
  background: linear-gradient(180deg, var(--bb-yellow), #daba5a) !important;
  color: #1a1407 !important;
  border-color: var(--bb-outline) !important;
  box-shadow: 4px 4px 0 var(--bb-outline) !important;
}

.bb-tokenomics table, .bb-tokenomics th, .bb-tokenomics td {
  border: 3px solid var(--bb-outline) !important;
}
.bb-tokenomics thead th { background: #f7e6bf !important; color: #1a1407 !important; }
.bb-tokenomics tbody tr:nth-child(odd) { background: rgba(0,0,0,0.03) !important; }
.bb-tokenomics tbody tr:hover { background: rgba(0,0,0,0.06) !important; }

/* Prevent background image overlays from darkening these blocks */
.bb-tokenomics img[alt*="back"], .bb-howtobuy img[alt*="back"] { mix-blend-mode: normal !important; opacity: 1 !important; }


/* === Tokenomics: add backkk.png as subtle background === */
.header__container, .tokenomics__col {
  position: relative !important;
  overflow: hidden !important;
  background-color: var(--bb-section-light, #e9d39c) !important;
}
.tokenomics__col::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: url("../img/backkk.png") center/cover no-repeat !important;
  opacity: 0.35 !important;
  mix-blend-mode: multiply !important;
  pointer-events: none !important;
  z-index: 0 !important;
  filter: saturate(0.9) contrast(0.95);
}
.header__container, .tokenomics__col > * {
  position: relative;
  z-index: 1;
}

/* === CLICK FIX: ensure header container has no blocking overlay === */
.header__container::before,
.header__container::after { content: none !important; display: none !important; }
.header__container { pointer-events: auto !important; position: relative !important; z-index: 1002 !important; }
header, .header, nav, .navbar { position: sticky !important; top: 0; z-index: 1003 !important; pointer-events: auto !important; }