/* 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: restore original dark styling */
.marquee {
  background-color: #161513 !important;
}

/* ── HEADER ── */
/* Pink initially, white on scroll */
.header {
  background-color: #FF8DA1 !important;
  transition: background-color 0.3s ease !important;
}
.header.sticky-header {
  background-color: #ffffff !important;
}

/* Logo text: black initially, pink when scrolled */
.navbar-logo span {
  color: #000000 !important;
  transition: color 0.3s ease !important;
}
.sticky-header .navbar-logo span {
  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;
}

/* 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 — white bg, pink text */
.header .btn-wrapper .btn--primary {
  background-color: #ffffff !important;
  background-image: none !important;
  color: #FF8DA1 !important;
  border: 2px solid #000000 !important;
}
.header .btn-wrapper .btn--primary::before,
.header .btn-wrapper .btn--primary::after {
  background-color: #ffffff !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; }

/* ── 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 so text is readable */
  #narfCanvas { 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: tighter padding */
  #cd-days, #cd-hours, #cd-mins, #cd-secs {
    font-size: 36px !important;
  }
  #airdrop div[style*="padding:24px 32px"] {
    padding: 16px 16px !important;
    min-width: 70px !important;
  }
  #airdrop div[style*="font-size:48px"] span {
    font-size: 32px !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; }
}