/*
Theme Name: EatsKarachi
Theme URI: https://eatskarachi.com
Author: EatsKarachi
Description: Custom WordPress theme rebuilding eatskarachi.com's original static design using the Restaurant CPT, Area and Cuisine taxonomies.
Version: 1.0
Text Domain: eatskarachi
*/

:root {
  --color-brand-primary: #064e3b;
  --color-brand-secondary: #047857;
  --color-accent: #d97706;
  --color-surface: #fef3c7;
  --color-text-main: #1f2937;
  --color-text-muted: #4b5563;
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: var(--color-brand-secondary); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-brand-primary); }

body {
  font-family: 'Inter', sans-serif;
  color: var(--color-text-main);
  background-color: #fafafa;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', sans-serif;
  color: var(--color-brand-primary);
}

.text-brand { color: var(--color-brand-primary); }
.text-accent { color: var(--color-accent); }
.bg-brand { background-color: var(--color-brand-primary); }
.bg-brand-light { background-color: var(--color-surface); }
.border-brand { border-color: var(--color-brand-secondary); }

.glass-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.glass-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.75rem 1.5rem; font-family: 'Outfit', sans-serif; font-weight: 600;
  color: white; background-color: var(--color-accent); border-radius: 0.5rem;
  transition: background-color 0.2s ease, transform 0.1s ease;
}
.btn-primary:hover { background-color: #b45309; }
.btn-primary:active { transform: scale(0.98); }

.btn-outline {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.75rem 1.5rem; font-family: 'Outfit', sans-serif; font-weight: 600;
  color: var(--color-brand-primary); background-color: transparent;
  border: 2px solid var(--color-brand-primary); border-radius: 0.5rem;
  transition: all 0.2s ease;
}
.btn-outline:hover { background-color: var(--color-brand-primary); color: white; }

.animate-fade-in { animation: fadeIn 0.4s ease-in; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }