/* ===== Tasha's Driving Academy — custom styles ===== */

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .animate-float, .animate-wiggle { animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

body { font-family: 'Outfit', system-ui, sans-serif; }
h1, h2, h3, h4 { letter-spacing: -0.02em; font-family: 'Outfit', system-ui, sans-serif; }

.text-balance { text-wrap: balance; }
.text-pretty  { text-wrap: pretty; }

/* Card with hard "neo-brutalist" shadow */
.card-hard {
  background: hsl(220 15% 12%);
  border: 2px solid hsla(0,0%,100%,0.14);
  border-radius: 1rem;
  box-shadow: 4px 4px 0 hsla(0,0%,100%,0.12);
  transition: transform 0.2s cubic-bezier(0.4,0,0.2,1), box-shadow 0.2s cubic-bezier(0.4,0,0.2,1);
}
.card-hard:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 hsla(0,0%,100%,0.12); }

/* Tag chip */
.tag-chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: hsla(0,0%,100%,0.06);
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  border: 2px solid hsla(0,0%,100%,0.14);
  font-weight: 700; font-size: 0.875rem;
  text-transform: uppercase; letter-spacing: 0.04em;
  box-shadow: 2px 2px 0 hsla(0,0%,100%,0.10);
}

/* Reveal-on-scroll */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Active nav underline */
.nav-link .underline-bar {
  position: absolute; left: 0; bottom: -4px;
  height: 2px; width: 0;
  background: hsl(0 0% 100%);
  border-radius: 9999px;
  transition: width 0.3s ease;
}
.nav-link.active { color: hsl(0 0% 100%); }
.nav-link.active .underline-bar { width: 100%; }

/* Mobile menu open state (controlled by JS via inline max-height & border) */
#mobile-menu.open { border-top-width: 2px; }

/* Form input placeholders */
input::placeholder,
textarea::placeholder,
select::placeholder {
  color: hsla(0,0%,100%,0.5);
  opacity: 1;
}

/* Toast */
.toast {
  background: hsla(0,0%,100%,0.98);
  color: hsl(220 15% 12%);
  border: 2px solid hsla(0,0%,100%,0.24);
  box-shadow: 4px 4px 0 hsla(0,0%,100%,0.12);
  padding: 0.75rem 1.25rem;
  border-radius: 9999px;
  font-weight: 800;
  animation: toast-in 0.3s ease-out;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}