/* Tailwind is loaded via CDN. This file contains small custom styles shared across pages. */

.container { max-width: 1200px; }

.nav-link { @apply text-gray-700 hover:text-primary transition; }
.nav-link.active { @apply text-primary font-medium; }

.btn { @apply inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium border; }
.btn-primary { @apply bg-primary text-white border-primary hover:bg-primary/90; }
.btn-outline { @apply bg-white text-primary border-primary hover:bg-primary/5; }
.btn-light { @apply bg-white text-gray-900 border-white hover:bg-white/90; }

.section-title { @apply text-2xl md:text-3xl font-bold text-gray-900; }
.card { @apply rounded-2xl overflow-hidden border bg-white; }
.card-img { @apply w-full h-44 md:h-48 object-cover; }
.card-title { @apply text-lg font-semibold text-gray-900; }
.card-text { @apply mt-2 text-sm text-gray-600 leading-6; }
.feature { @apply rounded-2xl border p-6 bg-white; }
.feature-title { @apply text-base font-semibold text-gray-900; }
.feature-text { @apply mt-2 text-sm text-gray-600 leading-6; }

.footer-title { @apply text-sm font-semibold text-gray-900; }
.badge { @apply inline-block text-xs px-2 py-1 rounded-md bg-gray-100 text-gray-700 border; }

.timeline { @apply relative flex items-start gap-3 border rounded-xl p-5 bg-white; }
.timeline-dot { @apply h-2.5 w-2.5 rounded-full bg-primary mt-1.5; }
.timeline-body { @apply flex-1; }
.timeline-title { @apply text-sm font-semibold text-gray-900; }
.timeline-text { @apply mt-1 text-sm text-gray-600 leading-6; }

.service { @apply rounded-2xl border p-6 bg-white; }
.service-title { @apply text-lg font-semibold text-gray-900; }
.service-list { @apply mt-3 text-sm text-gray-700 leading-7 list-disc pl-5; }

.form-label { @apply block text-sm text-gray-700 mb-1; }
.form-input { @apply w-full rounded-lg border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-primary/30; }
.form-textarea { @apply w-full rounded-lg border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-primary/30; }

/* Simple theme color via CSS variable for reuse without build step */
:root { --primary: 26 86 219; } /* Tailwind blue-600 */
.text-primary { color: rgb(var(--primary)); }
.bg-primary { background-color: rgb(var(--primary)); }
.border-primary { border-color: rgb(var(--primary)); }
.bg-primary\/5 { background-color: color-mix(in srgb, rgb(var(--primary)) 5%, white); }
.bg-primary\/10 { background-color: color-mix(in srgb, rgb(var(--primary)) 10%, white); }
.text-primary\/80 { color: color-mix(in srgb, rgb(var(--primary)) 80%, white); }