:root {
  --bg:#f7fafc;
  --card:#ffffff;
  --txt:#1f2937;
  --muted:#6b7280;
  --primary:#ef4444;
  --primary-2:#f59e0b;
  --ring: rgba(239,68,68,.3);
}

/* Base Reset */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: var(--bg);
  color: var(--txt);
  line-height: 1.5;
}
a { text-decoration: none; color: inherit; }
.container { max-width:1100px; margin:0 auto; padding:0 16px; }

/* Hero Section (Fixed) */
.hero {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color:#fff;
  padding:12px 0;              /* slim height */
  
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  position: fixed;
  top:0; left:0; right:0;
  z-index:1000;
  text-align:center;
  animation: slideDown .6s ease both;
}
.hero h1 { margin:0 0 4px; font-size: clamp(20px, 3vw, 32px); }
.hero p { margin:0; font-size:0.9rem; opacity:.9; }

/* Filter/Search Section (Fixed Below Hero) */
.filters {
  background:#fff;
  padding:12px 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  position: fixed;
  top:120px; /* adjust based on hero height */
  left:0; right:0;
  z-index:999;
  display:flex;
  justify-content:center;
}
.filter-row {
  display:flex; flex-wrap:wrap; gap:20px;
  width:100%; max-width:1200px;
}
.filter { display:flex; flex-direction:column; flex:1 1 200px; }
.filter.grow { flex:2 1 300px; }
.filter label {
  margin-bottom:6px; font-weight:600; color: var(--muted);
}
.filter select, .filter input {
  padding:10px 12px;
  border-radius:10px;
  border:3px solid #ddd;
  outline:none;
  transition: all 0.3s ease;
}
.filter select:focus, .filter input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 10px var(--ring);
}

/* Results Section (space for fixed hero + filter) */
.results-wrap { margin-top: 50px; padding:20px 0; }

/* Cards */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  padding: 0 10px;
}
.card {
  background: #fffdf8;
  padding: 25px 20px;
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeSlideIn 0.6s forwards;
}
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  height: 6px; width: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
}
/* category accent strip overrides */
.card.fire::before { background: linear-gradient(90deg, #ff4e50, #ff7676); }
.card.police::before { background: linear-gradient(90deg, #4286f4, #6fb1fc); }
.card.ambulance::before { background: linear-gradient(90deg, #43cea2, #185a9d); }
.card.blood::before { background: linear-gradient(90deg, #ff416c, #ff4b2b); }
.card.funeral::before { background: linear-gradient(90deg, #757f9a, #d7dde8); }

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
  background: #fff2db;
}
.card h3 {
  margin: 15px 0 10px;
  font-size: 1.2rem;
  font-weight: 600;
  color: #444;
}
.card p {
  margin: 6px 0;
  font-size: 0.95rem;
  color: #555;
  line-height: 1.4;
}

/* Empty Results */
.empty {
  grid-column: 1/-1;
  text-align: center;
  padding: 40px;
  background: #fffdf8;
  border-radius: 15px;
  color: #999;
  font-size: 1.1rem;
}

/* Footer */
.foot { text-align:center; padding:20px; color:#777; }

/* Animations */
@keyframes fadeSlideIn {
  0% { opacity:0; transform: translateY(40px) scale(0.98); }
  100% { opacity:1; transform: translateY(0) scale(1); }
}
@keyframes slideDown {
  from { opacity:.2; transform: translateY(-6px); }
  to { opacity:1; transform:none; }
}
@keyframes fadeInDown {
  0% { opacity:0; transform: translateY(-20px); }
  100% { opacity:1; transform: translateY(0); }
}
@keyframes fadeInUp {
  0% { opacity:0; transform: translateY(20px); }
  100% { opacity:1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 430px){
  .filters { flex-direction: column; }

  .filter-row {
    display: grid;
    
    float:left;
  }
  .filter.grow {
    grid-column: span 2; /* ✅ search bar full width below */
  }
  
  .filters {
  background:#fff;
  padding:12px 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  position: fixed;
  top:120px; /* adjust based on hero height */
  left:0; right:0;
  
  display:flex;
  justify-content:center;
  float:left;
}
}


  

.card .badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 1000;
    color: #000000;
    text-transform: uppercase;
    position: absolute;
    top: 12px;
    left: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* Card Buttons/Links */
.links {
    display: flex;
    justify-content: space-between; /* left and right */
    margin-top: 12px;
    flex-wrap: wrap;
    gap: 10px;
}

.links a.btn {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    color: #000000;
    transition: transform .15s;
}

.links a.btn:hover { transform: translateY(-2px); }

.links a.btn.outline {
    background: #fff;
    color: var(--primary);
    border: 1px solid var(--primary);
    box-shadow: none;
}

/* Colored Boxes */
.links a.btn.site {
    background: #d5e3fa; /* blue for website */
}

.links a.btn.map {
    background: #d4fff1; /* green for map */
}