/* @import 'tailwindcss'; */
/* Load Inter for site-wide UI typography */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    /* Use Inter as the primary UI font for a clean admin-like look */
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, "Helvetica Neue", Arial, 'Noto Color Emoji';
}

/* Amani homepage specific styles */
:root {
    --primary: #0ea5a4; /* teal */
    --secondary: #7c3aed; /* purple */
    --muted: #6b7280;
    --bg: #f8fafc;
    --card: #ffffff;
}

* { box-sizing: border-box; }
/* Base typography to match admin UI */
html { font-size: 16px; }
body { margin:0; font-family: var(--font-sans, Arial, sans-serif); background:var(--bg); color:#111827; line-height:1.5; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
.container { max-width:1100px; margin:0 auto; padding:0 16px; }

/* Heading scale */
h1 { font-size: 1.75rem; font-weight:700; margin:0 0 0.5rem; }
h2 { font-size: 1.25rem; font-weight:600; margin:0 0 0.5rem; }
h3 { font-size: 1rem; font-weight:600; margin:0 0 0.5rem; }

/* Navbar */
.main-nav { background: white; border-bottom: 1px solid #e6e6e6; }
.nav-container { display:flex; align-items:center; justify-content:space-between; padding:12px 0; }
.logo { font-weight:700; color:var(--primary); text-decoration:none; font-size:20px; }
.nav-links { list-style:none; display:flex; gap:16px; margin:0; padding:0; }
.nav-links a { color:#374151; text-decoration:none; }
.nav-actions .btn { text-decoration:none; padding:8px 12px; border-radius:6px; }
.btn { display:inline-block; }
.btn-primary { background:linear-gradient(90deg,var(--primary),var(--secondary)); color:white; }
.btn-outline { border:1px solid #d1d5db; padding:8px 12px; border-radius:6px; color:#111827; background:transparent; }
.btn-lg { padding:12px 18px; font-size:16px; }

/* Hero */
.hero { padding:64px 0; background: linear-gradient(135deg, rgba(14,165,164,0.06), rgba(124,58,237,0.04)); }
.hero-inner { text-align:center; max-width:900px; margin:0 auto; }
.hero-title { font-size:42px; margin:0 0 12px; line-height:1.03; font-weight:800; background: linear-gradient(90deg,var(--primary),var(--secondary)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-sub { color:var(--muted); font-size:18px; margin-bottom:18px; }
.hero-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* About */
.about { padding:48px 0; background:transparent; text-align:center; }
.about h2 { font-size:28px; margin-bottom:8px; }
.about .lead { color:var(--muted); max-width:800px; margin:0 auto; }

/* Features */
.features { padding:48px 0; }
.grid-features { display:grid; grid-template-columns:repeat(1,1fr); gap:16px; }
.feature-card { background:var(--card); border-radius:10px; padding:20px; box-shadow:0 6px 18px rgba(15,23,42,0.06); text-align:center; }
.feature-card .icon { font-size:34px; margin-bottom:10px; }

/* Businesses grid */
.businesses { padding:48px 0; background: rgba(15,23,42,0.02); }
.grid-businesses { display:grid; grid-template-columns:repeat(1,1fr); gap:12px; }
.business-card { display:block; text-decoration:none; color:inherit; background:var(--card); border-radius:8px; padding:16px; box-shadow:0 6px 18px rgba(15,23,42,0.04); transition:transform .18s ease, box-shadow .18s ease; }
.business-card:hover { transform:translateY(-6px); box-shadow:0 10px 30px rgba(15,23,42,0.08); }
.business-title { font-weight:700; margin-bottom:6px; }
.business-desc { color:var(--muted); font-size:14px; }

/* Footer */
.site-footer { padding:18px 0; text-align:center; color:var(--muted); }

/* Responsive */
@media(min-width:768px){
    .grid-features { grid-template-columns:repeat(3,1fr); }
    .grid-businesses { grid-template-columns:repeat(2,1fr); }
}
@media(min-width:1024px){
    .hero-title { font-size:56px; }
    .grid-businesses { grid-template-columns:repeat(3,1fr); }
}