/* Repala Construction - Additional custom styles (Tailwind CDN provides the majority) */

:root {
  --rc-navy: #0f172a;
  --rc-wood: #854d0e;
}

/* Professional button styles */
.btn {
  @apply inline-flex items-center justify-center rounded-full font-medium transition-all active:scale-[0.985];
}
.btn-primary {
  @apply bg-rc-navy text-white hover:bg-rc-wood shadow-sm;
}
.btn-secondary {
  @apply border border-slate-300 hover:bg-slate-50 text-slate-700;
}
.btn-ghost {
  @apply text-slate-600 hover:text-rc-navy hover:bg-slate-100;
}

/* Card styles */
.card {
  @apply bg-white rounded-2xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow;
}

/* Section heading accent */
.section-title {
  @apply text-3xl md:text-4xl font-semibold tracking-tighter text-rc-navy;
}

/* Service / feature icon container */
.icon-wrap {
  @apply w-11 h-11 rounded-xl bg-slate-100 flex items-center justify-center text-rc-wood;
}

/* Pricing specific */
.pricing-card {
  @apply card p-7 flex flex-col;
}
.price {
  @apply text-4xl font-semibold tabular-nums tracking-tighter text-rc-navy;
}

/* Team member card */
.team-card {
  @apply card p-6 text-center flex flex-col items-center;
}
.team-avatar {
  @apply w-20 h-20 rounded-full bg-gradient-to-br from-slate-200 to-slate-300 flex items-center justify-center text-xl font-semibold text-rc-navy mb-4 ring-4 ring-white shadow-inner;
}

/* Form styles */
.form-input {
  @apply w-full rounded-lg border border-slate-300 bg-white px-4 py-2.5 text-sm placeholder:text-slate-400 focus:outline-none focus:border-rc-wood focus:ring-1 focus:ring-rc-wood/30 transition;
}
.form-label {
  @apply block text-sm font-medium text-slate-700 mb-1.5;
}

/* Testimonial */
.testimonial {
  @apply card p-7;
}

/* Subtle dividers and rules */
.rule {
  @apply border-t border-slate-200;
}

/* Mobile menu animation hook */
#mobile-menu {
  animation: slideDown 120ms ease-out forwards;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Ensure images in generated are nicely contained */
img { max-width: 100%; height: auto; }

/* Print friendly */
@media print {
  header, footer, .no-print { display: none !important; }
}

/* Infinite horizontal marquee for testimonials */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.animate-marquee {
  animation: marquee 28s linear infinite;
}