/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Turbo progress bar — defined here so CSP doesn't block Turbo's inline style injection */
.turbo-progress-bar {
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #38bdf8 0%, #60a5fa 45%, #818cf8 100%);
  z-index: 2147483647;
  transition: width 300ms ease-out, opacity 150ms 150ms ease-in;
  transform: translate3d(0, 0, 0);
}

/* Typography - Geist for UI and reports, Geist Mono for code */
html, body {
  font-family: 'Geist', ui-sans-serif, system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Audit report content */
.report-text {
  font-family: 'Geist', ui-sans-serif, system-ui, sans-serif !important;
}

.report-text h1, .report-text h2, .report-text h3, .report-text h4, .report-text h5, .report-text h6 {
  font-family: 'Geist', ui-sans-serif, system-ui, sans-serif !important;
}

.report-text p {
  margin-bottom: 1rem;
}

.report-text p:last-child {
  margin-bottom: 0;
}

/* Code blocks - Geist Mono */
code, pre, .font-mono, kbd, samp,
.report-text code, .report-text pre {
  font-family: 'Geist Mono', ui-monospace, monospace !important;
}

/* Smooth scrolling for code blocks on iOS */
.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
}

/* Consistent motion and focus style */
a, button, [role="button"], input, select, textarea {
  transition:
    color 190ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 190ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 190ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 190ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 190ms cubic-bezier(0.22, 1, 0.36, 1);
}

:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(56, 189, 248, 0.42),
    0 0 0 5px rgba(30, 64, 175, 0.36);
}

/* Bring common form controls into the shared liquid style */
input.bg-gray-800,
select.bg-gray-800,
textarea.bg-gray-800 {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.095) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #edf2ff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(7, 11, 20, 0.34);
  backdrop-filter: blur(14px) saturate(155%);
  -webkit-backdrop-filter: blur(14px) saturate(155%);
}

input.bg-gray-800::placeholder,
textarea.bg-gray-800::placeholder {
  color: #a7b4c7 !important;
}

input.bg-gray-800:focus,
select.bg-gray-800:focus,
textarea.bg-gray-800:focus {
  border-color: rgba(125, 211, 252, 0.72) !important;
}

/* Prevent iOS zoom on input focus (requires 16px minimum) */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
select,
textarea {
  font-size: 16px;
}

@media (min-width: 640px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  select,
  textarea {
    font-size: inherit;
  }
}

/* Ethereum blue for zack.eth branding */
.eth-blue {
  color: #627EEA;
}

/* Gradient text for branding */
.gradient-text {
  background: linear-gradient(135deg, #34d399 0%, #a78bfa 50%, #60a5fa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Responsive hero text sizes */
.text-hero {
  font-size: clamp(1.75rem, 7vw, 5.5rem);
  line-height: 1.1;
}

.text-hero-sub {
  font-size: clamp(1.25rem, 4vw, 2rem);
}

/* Fade animations for notifications */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

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

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

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