/* ====================================================================
   Mobile typography & layout fixes (kept from legacy build)
   ==================================================================== */

html,
body,
#root {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

#root,
#root main,
#root header,
#root footer {
  min-width: 0;
}

#root * {
  min-width: 0;
}

@media (max-width: 480px) {
  header h1 {
    font-size: clamp(2.45rem, 14vw, 3rem) !important;
    line-height: 1 !important;
    letter-spacing: .03em;
  }

  header h1 span {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: break-word;
  }

  header p {
    max-width: 100%;
    overflow-wrap: break-word;
  }

  header .text-2xl {
    font-size: 1.375rem;
    line-height: 1.85rem;
  }

  header .text-xl {
    font-size: 1.0625rem;
    line-height: 1.7rem;
  }

  header .flex.flex-wrap.justify-center.gap-8 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 1rem;
    max-width: 24rem;
    margin-left: auto;
    margin-right: auto;
  }

  header .flex.flex-wrap.justify-center.gap-8 .text-4xl {
    font-size: 2rem;
    line-height: 2.25rem;
  }

  .hashcore-original-hero-wrap,
  .hashcore-original-platforms,
  .hashcore-original-features-showcase {
    max-width: 100%;
  }

  .hashcore-original-hero,
  .hashcore-original-features-screen {
    max-width: 100%;
  }
}

@media (max-width: 360px) {
  header h1 {
    font-size: 2.25rem !important;
  }
}

/* ====================================================================
   Dark-green theme overrides for legacy Tailwind utility classes
   These override the slate/teal palette baked into index-bunpgfzo.css.
   Only applied when this file is loaded *after* the bundle.
   ==================================================================== */

:root {
  --hc-bg: #07130f;
  --hc-bg-1: #0a1a15;
  --hc-bg-2: #0e231c;
  --hc-card: rgba(10, 26, 21, .76);
  --hc-line: rgba(134, 239, 172, .14);
  --hc-line-2: rgba(74, 222, 128, .28);
  --hc-text: #e2e8f0;
  --hc-text-2: #cbd5e1;
  --hc-muted: #9fb6ad;
  --hc-green: #22c55e;
  --hc-green-300: #86efac;
  --hc-green-400: #4ade80;
  --hc-green-500: #22c55e;
  --hc-green-600: #16a34a;
  --hc-emerald: #10b981;
  --hc-emerald-300: #6ee7b7;
  --hc-emerald-500: #34d399;
}

#root .bg-slate-900 {
  background-color: var(--hc-bg) !important;
  background-image:
    radial-gradient(1100px 700px at 85% -10%, rgba(74, 222, 128, .20), transparent 60%),
    radial-gradient(900px 600px at -10% 10%, rgba(16, 185, 129, .14), transparent 60%),
    radial-gradient(1200px 700px at 50% 110%, rgba(34, 197, 94, .10), transparent 70%),
    linear-gradient(180deg, #06130f 0%, #07130f 100%);
  background-attachment: fixed;
}

#root .bg-slate-900\/50,
#root .bg-slate-900\/95 {
  background-color: rgba(7, 19, 15, .82) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}

#root .bg-slate-800,
#root .bg-slate-800\/50 {
  background-color: var(--hc-card) !important;
  border-color: var(--hc-line) !important;
}

#root .border-slate-700 { border-color: var(--hc-line-2) !important; }
#root .border-slate-800 { border-color: var(--hc-line) !important; }

#root .text-slate-200 { color: var(--hc-text) !important; }
#root .text-slate-300 { color: var(--hc-text-2) !important; }
#root .text-slate-400 { color: var(--hc-muted) !important; }

#root .text-teal-400,
#root .hover\:text-teal-400:hover {
  color: var(--hc-green-400) !important;
}

#root .hover\:border-teal-500:hover {
  border-color: var(--hc-green-500) !important;
  box-shadow: 0 0 0 1px rgba(74, 222, 128, .25), 0 18px 50px rgba(34, 197, 94, .18);
}

#root .from-teal-400 {
  --tw-gradient-from: var(--hc-green-400) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(74, 222, 128, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
#root .from-teal-500 {
  --tw-gradient-from: var(--hc-green-500) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(34, 197, 94, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
#root .from-teal-600 {
  --tw-gradient-from: var(--hc-green-600) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(22, 163, 74, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
#root .via-emerald-300 {
  --tw-gradient-to: rgba(110, 231, 183, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--hc-emerald-300) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}
#root .to-teal-200 {
  --tw-gradient-to: var(--hc-green-300) var(--tw-gradient-to-position) !important;
}
#root .to-emerald-500,
#root .hover\:to-emerald-500:hover {
  --tw-gradient-to: var(--hc-emerald-500) var(--tw-gradient-to-position) !important;
}
#root .to-emerald-600 {
  --tw-gradient-to: #059669 var(--tw-gradient-to-position) !important;
}
#root .hover\:from-teal-500:hover {
  --tw-gradient-from: var(--hc-green-500) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(34, 197, 94, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

#root nav .bg-transparent { background: rgba(7, 19, 15, .82) !important; }

#root header h1 .bg-clip-text {
  background-image: linear-gradient(90deg, #4ade80, #34d399 50%, #86efac) !important;
}

#root a[href*="downloads"],
#root a[download],
#root .bg-gradient-to-r.from-teal-600.to-emerald-600 {
  box-shadow: 0 12px 40px rgba(34, 197, 94, .25), inset 0 0 0 1px rgba(134, 239, 172, .25);
}

#root footer { border-top-color: var(--hc-line) !important; }
#root footer .border-slate-700 { border-top-color: var(--hc-line) !important; }

/* Smooth global polish */
#root * { transition-timing-function: cubic-bezier(.4, 0, .2, 1); }

/* Card hover lift on legacy article cards */
#root article.bg-slate-800\/50 {
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
#root article.bg-slate-800\/50:hover {
  transform: translateY(-3px);
  border-color: var(--hc-green-500) !important;
  box-shadow: 0 18px 50px rgba(34, 197, 94, .25);
}