/* NARF brand overrides */

/* Smooth scrolling */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 90px; }

/* ── PINK BACKGROUND ── */
:root { --template-bg: #FF8DA1; }

body,
.page-wrapper,
section,
footer,
.preloader {
  background-color: #FF8DA1 !important;
  background-image: none !important;
}

/* Marquee: white bg */
.marquee {
  background-color: #fff !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}
.marquee .marquee__inner {
  padding-block: 8px !important;
  display: flex !important;
  align-items: center !important;
}
/* Ticker text: dark on white */
.marquee .marquee__single p {
  color: #111 !important;
}
.marquee .marquee__single p:last-child {
  color: rgba(0,0,0,0.45) !important;
}
/* Diamond separator: pink stays */
.marquee .marquee__single span[style*="color:#FF69B4"] {
  color: #FF69B4 !important;
}

/* ── HEADER ── */
/* Dark nav — matches whitepaper style */
.header {
  background-color: #111 !important;
  transition: background-color 0.3s ease !important;
}
.header.sticky-header {
  background-color: #111 !important;
}

/* Logo text: always pink */
.navbar-logo span {
  color: #FF8DA1 !important;
  transition: color 0.3s ease !important;
}
.sticky-header .navbar-logo span {
  color: #FF8DA1 !important;
}

/* Nav links: match whitepaper style */
.header .navbar__list a {
  color: rgba(255,255,255,0.6) !important;
  font-family: "Oswald", sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: 0.5px !important;
  text-transform: none !important;
}
.header .navbar__list a:hover {
  color: #FF8DA1 !important;
}

/* All divs inside header: transparent so header bg shows through */
.header div,
.header nav,
.header ul,
.header li {
  background-color: transparent !important;
  background-image: none !important;
}

/* No border on nav pill */
.header .navbar__list {
  border: none !important;
}

/* Hamburger lines: white on dark bg */
#narf-menu-btn span {
  background: #fff !important;
}

/* All primary buttons — black bg, white text */
.btn-wrapper .btn--primary {
  background-color: #111111 !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 2px solid #111111 !important;
}
.btn-wrapper .btn--primary::before,
.btn-wrapper .btn--primary::after {
  background-color: #333333 !important;
}

/* Header button — pink bg, white text */
.header .btn-wrapper .btn--primary {
  background-color: #FF8DA1 !important;
  background-image: none !important;
  color: #fff !important;
  border: 2px solid #FF8DA1 !important;
}
.header .btn-wrapper .btn--primary::before,
.header .btn-wrapper .btn--primary::after {
  background-color: #FF69B4 !important;
}

/* ── MOBILE MENU ── */
.mobile-menu { background-color: #111 !important; }
.mobile-menu__close { color: #FF8DA1 !important; }
.mobile-menu .navbar__list a { color: #fff !important; }
.mobile-menu .navbar__list a:hover { color: #FF8DA1 !important; }

/* Custom slide-in menu — force solid white background */
#narf-mobile-menu {
  background-color: #fff !important;
  background-image: none !important;
}

/* Section headings white — only animated titles, not stat boxes */
section h2.title-animation {
  color: #fff !important;
}

/* Remove orange first-letter on sub-title $ */
.sub-title::first-letter {
  color: inherit !important;
}

/* $NARF sub-title labels black */
section .sub-title {
  color: #111 !important;
}

/* brainEnomics section — all text white */
#tokenomics,
#tokenomics p,
#tokenomics h1,
#tokenomics h2,
#tokenomics h3,
#tokenomics h4,
#tokenomics h5,
#tokenomics h6,
#tokenomics span,
#tokenomics li {
  color: #fff !important;
}

/* Restore original colors inside the dark stats bar */
#tokenomics div[style*="background:#111"] p:first-of-type {
  color: #fff !important;
}
#tokenomics div[style*="background:#111"] p + p {
  color: rgba(255,255,255,0.4) !important;
}

/* Preserve brainEnomics casing in animated title */
#tokenomics .title-animation > div > div:nth-child(1),
#tokenomics .title-animation > span > div > div:nth-child(1) {
  text-transform: none !important;
}

/* Preserve casing in airdrop heading */
#airdrop .title-animation {
  text-transform: none !important;
}

/* Hide desktop nav links + desktop CTA on mobile/tablet */
@media (max-width: 991px) {
  .navbar__menu-wrapper { display: none !important; }
  .navbar__options .btn-wrapper { display: none !important; }
  #narf-menu-btn { display: block !important; }
}
/* Hide hamburger on desktop */
@media (min-width: 992px) {
  #narf-menu-btn { display: none !important; }
}

/* ── REMOVE DARK PSEUDO-ELEMENT OVERLAYS ── */
*::before,
*::after {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* ── NARF HEROES CANVAS ── */
#narfCanvas {
  position: absolute !important;
  right: -30px !important;
  bottom: 0 !important;
  height: 72% !important;
  width: auto !important;
  z-index: 1 !important;
}

/* ═══════════════════════════════
   MOBILE RESPONSIVE — max 767px
═══════════════════════════════ */
@media (max-width: 767px) {

  /* Hero: hide canvas on mobile, show static img instead */
  #narfCanvas { display: none !important; }
  #narf-hero-mobile { display: block !important; }
  /* Hero: tighten up on mobile */
  #home { min-height: auto !important; padding-top: 150px !important; padding-bottom: 30px !important; flex-direction: column !important; }
  .hero__content { margin-top: 0 !important; }
  .hero__content h1 { font-size: 32px !important; line-height: 1.2 !important; }
  .hero__content p { font-size: 15px !important; margin-top: 12px !important; }
  .hero__content .mt-40 { margin-top: 20px !important; }
  #narf-hero-mobile { margin-top: 16px !important; }
  /* Remove right-side gradient on mobile */
  #home > div[style*="linear-gradient"] { display: none !important; }

  /* Hero: remove right-side gradient overlay */
  .hero > div[style*="linear-gradient"] { display: none !important; }

  /* Hero: center text */
  .hero__content { text-align: center !important; }
  .hero__content .btn-wrapper { justify-content: center !important; }

  /* Masterminds: shrink globe to avoid overflow */
  #masterminds > div[style*="110%"] {
    width: 100% !important;
    height: 100% !important;
  }

  /* Masterminds stats row: stack to 1 column */
  #masterminds .row.mt-60 > .col-12 > div[style*="space-around"] {
    flex-direction: column !important;
    align-items: center !important;
    gap: 24px !important;
  }
  /* Hide vertical dividers in stats row */
  #masterminds div[style*="width:1px"] { display: none !important; }

  /* Tokenomics stats bar: 2x2 grid */
  #tokenomics div[style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Add bottom border between top and bottom rows */
  #tokenomics div[style*="grid-template-columns:repeat(4,1fr)"] > div:nth-child(1),
  #tokenomics div[style*="grid-template-columns:repeat(4,1fr)"] > div:nth-child(2) {
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  }
  /* Remove right border on even cells */
  #tokenomics div[style*="grid-template-columns:repeat(4,1fr)"] > div:nth-child(2),
  #tokenomics div[style*="grid-template-columns:repeat(4,1fr)"] > div:nth-child(4) {
    border-right: none !important;
  }
  /* Shrink the 8-billion number */
  #tokenomics div[style*="grid-template-columns"] p[style*="font-size:26px"] {
    font-size: 16px !important;
    letter-spacing: 1px !important;
  }

  /* Airdrop countdown: shrink font + boxes */
  #cd-days, #cd-hours, #cd-mins, #cd-secs {
    font-size: 32px !important;
  }
  #airdrop div[style*="padding:20px 28px"] {
    padding: 12px 14px !important;
    min-width: 64px !important;
  }

  /* Airdrop white card: reduce padding */
  #airdrop-card {
    padding: 24px 16px !important;
  }

  /* Airdrop steps: single column */
  #airdrop-steps-grid {
    grid-template-columns: repeat(1,1fr) !important;
  }

  /* Airdrop stats bar: single column */
  #airdrop-stats-bar {
    grid-template-columns: repeat(1,1fr) !important;
  }
  #airdrop-stats-bar > div {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  }
  #airdrop-stats-bar > div:last-child {
    border-bottom: none !important;
  }
  #airdrop-stats-bar p:first-child {
    font-size: 18px !important;
    letter-spacing: 0 !important;
  }

  /* Airdrop CTA button: shrink padding */
  #airdrop-card a {
    padding: 14px 24px !important;
    font-size: 15px !important;
  }

  /* How To Buy: stack large number watermarks */
  #howtobuy p[style*="font-size:72px"] {
    font-size: 52px !important;
  }

  /* Footer social icons: center */
  footer div[style*="justify-content:flex-end"] {
    justify-content: center !important;
  }
  footer ul[style*="justify-content:flex-start"] {
    justify-content: center !important;
  }

  /* General section padding reduction */
  .pt-120 { padding-top: 60px !important; }
  .pb-120 { padding-bottom: 60px !important; }
  .mt-60  { margin-top: 40px !important; }
}

/* ═══════════════════════════════
   TABLET — 768px to 991px
═══════════════════════════════ */
@media (min-width: 768px) and (max-width: 991px) {

  /* Tokenomics stats: 2x2 on tablet too */
  #tokenomics div[style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  #tokenomics div[style*="grid-template-columns:repeat(4,1fr)"] > div:nth-child(1),
  #tokenomics div[style*="grid-template-columns:repeat(4,1fr)"] > div:nth-child(2) {
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  }
  #tokenomics div[style*="grid-template-columns:repeat(4,1fr)"] > div:nth-child(2),
  #tokenomics div[style*="grid-template-columns:repeat(4,1fr)"] > div:nth-child(4) {
    border-right: none !important;
  }
  #tokenomics div[style*="grid-template-columns"] p[style*="font-size:26px"] {
    font-size: 20px !important;
  }

  /* Hero: reduce canvas size */
  #narfCanvas { height: 65% !important; }
}