@charset "UTF-8";
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@font-face {
  font-family: "Mokoko";
  src: url("../fonts/MokokoRg.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Mokoko Bold */
@font-face {
  font-family: "Mokoko";
  src: url("../fonts/MokokoBd.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.font-mokoko {
  font-family: "Mokoko", sans-serif;
}

.font-mokoko-normal {
  font-family: "Mokoko", sans-serif;
  font-weight: 400 !important;
}

.font-inter {
  font-family: "Inter", sans-serif;
}

.complex-text {
  color: #e66547;
}

.simple-text {
  color: #333;
}

/* added by Ru */
.bg-offwhite {
  background-color: #fdfdfb;
}

.bg-darkgreen {
  background-color: #01140b;
}

.bg-offblack {
  background-color: #1a1a1a;
}

.footer-text {
  color: #808080;
}

/* Tab states */
.tab-btn {
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  padding: 12px 24px;
  cursor: pointer;
  box-sizing: border-box;
}
.active-overview {
  background: #f5f5ed;
  color: #e66547; /* brand-red */
  border-top: 1px solid #000;
  border-right: 1px solid #000;
}
.inactive-overview {
  background: #fff;
  color: #333;
  border-bottom: 1px solid #000;
}
.active-middle {
  background: #f5f5ed;
  color: #e66547; /* brand-red */
  border-top: 1px solid #000;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
}
.inactive-middle {
  background: #fff;
  color: #333;
  border-bottom: 1px solid #000;
}
.active-last {
  background: #f5f5ed;
  color: #e66547; /* brand-red */
  border-top: 1px solid #000;
  border-left: 1px solid #000;
}
.inactive-last {
  background: #fff;
  color: #333;
  border-bottom: 1px solid #000;
}

.accordion-header.is-open .accordion-icon svg {
  transform: rotate(180deg);
}

/* Ensure the icon is only visible on screens smaller than 'md' */
.accordion-icon {
  display: none;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.hide-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.inset-shadow-effect {
  box-shadow: inset 10px 20px 40px 0 rgba(0, 0, 0, 0.7);
}

.tooltip-arrow {
  position: absolute;
  z-index: 0;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 80px;
  height: 80px;
  background-color: #142d21;
  border-radius: 2px;
}

/* Default link styles */
.nav-link {
  color: #000; /* or text-brand-dark */
  opacity: 0.7;
}
.nav-link:hover {
  opacity: 1;
}

/* When an anchor is targeted from URL hash */
.nav-link:target {
  color: #142d21;
  opacity: 1;
  font-weight: 600;
}

/* Dot before the active link */
.nav-link:target::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 6px;
  width: 6px;
  height: 6px;
  background-color: #f15b29;
  border-radius: 50%;
}

.nav-link.active {
  opacity: 1;
  color: #e66547;
  font-weight: 600;
}
.nav-link.active::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background-color: #e66547;
  border-radius: 50%;
}
/* =========================================
   Proof in Action Tab Logic (Clean Version)
   ========================================= */

#proof-tabs-container .tab-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 12px 16px;
  background: #fff;
  transition: background 0.2s, color 0.2s;
  position: relative;

  /* Reset default borders */
  border: 0;
  outline: none;
}

#proof-tabs-container .tab-btn img {
  max-height: 24px;
  width: auto;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: filter 0.2s, opacity 0.2s;
}

/* Active State for Tab Buttons */
#proof-tabs-container .tab-btn.active {
  background: #f5f5ed;
  /* Brand-red top border if desired, or handle via classes */
}
#proof-tabs-container .tab-btn.active img {
  filter: grayscale(0%);
  opacity: 1;
}

/* Content visibility */
.proof-content {
  display: none; /* hidden by default */
}

/* TAB BORDERS logic mirrors the HTML approach:
   .tab-border-r, .tab-border-b, etc.
   We can enforce them here or rely on Tailwind utility classes in HTML.
   Existing logic in HTML seems to use:
   border-b border-black (inactive)
   border-t border-black bg-[#F5F5ED] (active)
*/

/* Helper classes to match the 'active-overview' style logic from before, 
   but applied more generically if needed. 
*/
.tab-active-style {
  background: #f5f5ed !important;
  border-top: 1px solid #000;
}

/* Specifically for the borders between tabs */
.tab-border-r {
  border-right: 1px solid #000;
}
.tab-border-l {
  border-left: 1px solid #000;
}
.tab-border-b {
  border-bottom: 1px solid #000;
}

/* Only style the block state for animation */
.proof-content.block {
  display: block;
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-in-out forwards;
}

/* =========================================
   Contact Form Styles
   ========================================= */

/* Clean on load; show errors only after submit attempt (no JS) */
.error-text {
  display: none;
}
.input-field:user-invalid {
  border-color: #e66547 !important;
  box-shadow: 0 0 0 1px #e66547;
}
.input-field:user-invalid ~ .error-text {
  display: block;
}
/* Consent message */
.consent-wrap:has(#consent:user-invalid) + #error-consent {
  display: block;
}
/* CSS-only success: show panel when URL fragment is #form-success */
#form-success {
  display: none;
}
#form-success:target {
  display: block;
}
body:has(#form-success:target) #contact-form {
  display: none;
}

/* =========================================
   Media Queries
   ========================================= */
@media (min-width: 1900px) {
  .hero-nav {
    display: none;
  }
}

/* Update Mint for 1280px */
@media (min-width: 1280px) {
  #hexagon-bg-1.mint-active {
    top: 24%;
    transition: top 0.2s linear;
  }
  #hexagon-bg-1.acquire-active {
    top: 34%;
    transition: top 0.2s linear;
  }
  .tooltip-arrow {
    bottom: -40px;
    width: 100px;
    height: 100px;
  }
}

/* Mint tab positions */
@media (min-width: 1024px) {
  #hexagon-bg-2.mint-active {
    top: 32%;
    transition: top 0.2s linear;
  }
  #hexagon-bg-2.acquire-active {
    top: 44%;
    transition: top 0.2s linear;
  }
}

@media (max-width: 767px) {
  .accordion-icon {
    display: block;
  }
}