/* Minimal custom styles on top of Tailwind CDN.
   Accent color: amber; background: deep zinc/black.
*/

:root {
  --glass-bg: rgba(255,255,255,0.04);
  --glass-border: rgba(255,255,255,0.10);
}

body {
  /* Subtle patterned background */
  background-image:
    radial-gradient(circle at 15% 15%, rgba(251,191,36,0.09), transparent 40%),
    radial-gradient(circle at 85% 10%, rgba(255,255,255,0.06), transparent 35%),
    radial-gradient(circle at 70% 85%, rgba(251,191,36,0.07), transparent 40%);
}

.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
}

.navlink {
  color: rgba(244,244,245,0.88);
  transition: 160ms ease;
}
.navlink:hover {
  color: rgba(251,191,36,1);
}

.dropdownlink {
  display: block;
  padding: 0.75rem 0.9rem;
  border-radius: 0.9rem;
  color: rgba(244,244,245,0.9);
  transition: 160ms ease;
}
.dropdownlink:hover {
  background: rgba(255,255,255,0.06);
  color: rgba(251,191,36,1);
}

.card {
  border-radius: 1.5rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  transition: 200ms ease;
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.045);
}

.card-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.input {
  width: 100%;
  border-radius: 1.25rem;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.25);
  color: rgba(244,244,245,0.95);
  padding: 0.9rem 1rem;
  outline: none;
}

.input:focus {
  border-color: rgba(251,191,36,0.75);
  box-shadow: 0 0 0 3px rgba(251,191,36,0.18);
}

/* Better tap targets on mobile */
@media (max-width: 768px) {
  .navlink { padding: 0.4rem 0; }
}