/* ============================================================
   Alchemy Sports Ventures — Site components & interactions
   ------------------------------------------------------------
   Standard-CSS equivalents of the design-system components
   (Button, Input) and the hover/focus behaviours that were
   previously handled by the Claude Design runtime.
   ============================================================ */

/* ---------- Buttons (ports components/core/Button.jsx) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: -0.005em;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-standard),
              filter var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.btn:hover { filter: brightness(1.06); text-decoration: none; }
.btn:active { transform: translateY(0.5px) scale(0.99); }

.btn-sm { height: 32px; padding: 0 13px; font-size: var(--text-sm);  gap: 6px;  border-radius: var(--radius-sm); }
.btn-md { height: 40px; padding: 0 18px; font-size: var(--text-base); gap: 8px; }
.btn-lg { height: 48px; padding: 0 24px; font-size: var(--text-md);  gap: 10px; }

.btn-primary { background: var(--navy-900); color: var(--stone-50); border: 1px solid var(--navy-900); box-shadow: var(--shadow-sm); }
.btn-accent  { background: var(--gold-500); color: var(--navy-950);  border: 1px solid var(--gold-600); box-shadow: var(--shadow-sm); }
.btn-full    { width: 100%; }

/* ---------- Text fields (ports components/forms/Input.jsx) ---------- */
.asv-field { display: flex; flex-direction: column; gap: 6px; }
.asv-field > label {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
}
.asv-field-box {
  display: flex;
  align-items: center;
  height: 40px;
  gap: 8px;
  padding: 0 12px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-inset);
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.asv-field-box:focus-within { border-color: var(--sky-500); box-shadow: var(--focus-ring); }
.asv-field-box input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
}
/* ring lives on the wrapper, not the inner input */
.asv-field-box input:focus-visible { box-shadow: none; border-radius: 0; }

/* Contact message textarea (keeps its inline styling; adds focus behaviour) */
.contact-textarea:focus { outline: none; border-color: var(--sky-500); }

/* ---------- Hover behaviours (replace design-runtime style-hover) ---------- */

/* Header nav links: muted → white */
.nav-link { transition: color var(--dur-base) var(--ease-standard); }
.nav-link:hover { color: #fff; text-decoration: none; }

/* Insights header "Contact" pill: gold border + text on hover */
.nav-cta { transition: color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard); }
.nav-cta:hover { border-color: var(--gold-500); color: var(--gold-400); text-decoration: none; }

/* Card lift only */
.hover-lift { transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); }
.hover-lift:hover { transform: translateY(-3px); text-decoration: none; }

/* Card shadow only */
.hover-shadow-md { transition: box-shadow var(--dur-base) var(--ease-standard); }
.hover-shadow-md:hover { box-shadow: var(--shadow-md); text-decoration: none; }

/* Card lift + stronger shadow */
.hover-lift-shadow { transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); }
.hover-lift-shadow:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); text-decoration: none; }

/* Footer links (Insights): muted → white */
.footer-link { transition: color var(--dur-base) var(--ease-standard); }
.footer-link:hover { color: #fff; text-decoration: none; }

/* Footer row — copyright left, social right.
   align-items:baseline is doing the real work here: a replaced element's
   baseline is its bottom margin edge, so the icon's bottom lands on the
   copyright's baseline rather than on the descender line the "y" and "g"
   drop to. No magic offset, and it survives a font-size change.
   .footer-social is display:flex so the whitespace around the inline SVG
   generates no line boxes — a stray text node would hand the anchor a
   text baseline instead and sink the icon a few pixels. */
.footer-inner { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.footer-social { display: flex; color: var(--navy-200); position: relative; }
.footer-social svg { display: block; width: 18px; height: 18px; }

/* An 18px glyph is well under a comfortable touch target. This grows the
   hit area to ~42px without adding padding, which would push the bottom
   margin edge down and break the baseline alignment above. */
.footer-social::after { content: ""; position: absolute; inset: -12px; }

/* Below ~430px the copyright can no longer share a line with the icon
   without wrapping mid-sentence, so the two stack and left-align with the
   rest of the footer. Baseline alignment stops being meaningful once they
   are on separate rows. */
@media (max-width: 430px) {
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ---------- Mobile nav (hamburger + dropdown) ---------- */
/* Button is hidden on desktop; each page's media query reveals it at its
   own breakpoint (where the inline nav links are hidden). */
.asv-menu-btn {
  display: none;
  margin-left: auto;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: var(--radius-md);
  color: #fff;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.asv-menu-btn:hover { background: rgba(255,255,255,0.08); border-color: var(--gold-500); }
.asv-menu-btn svg { display: block; }

/* Right-anchored dropdown panel. Hidden by default; only revealed when
   .open is toggled AND the viewport is below the page's breakpoint. */
.asv-mobile-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 32px;
  z-index: 40;
  min-width: 208px;
  flex-direction: column;
  gap: 2px;
  background: var(--navy-900);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  padding: 8px;
}
.asv-mobile-menu a {
  font-size: 15px;
  font-weight: 500;
  color: var(--navy-100);
  text-decoration: none;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
}
.asv-mobile-menu a:hover { background: rgba(255,255,255,0.06); color: #fff; text-decoration: none; }