/* Trent Bridge — Food Vendor Directory (food-map). Pairs with food-map.js. */
.food-map { font-family: 'Merriweather', Georgia, "Times New Roman", Times, serif; color:#33312f; margin:0 0 24px; }
.food-intro { margin:0 0 16px; }

/* Filters — contained control panel, one row per axis */
.food-filters { background:#f6f7f5; border:1px solid #e5e5e5; border-radius:10px; padding:14px 16px; margin-bottom:14px; }
.food-filter-row { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-start; margin-bottom:11px; }
.food-filter-row:last-child { margin-bottom:0; }
.food-filter-label { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:#8a8d86; width:88px; flex:0 0 88px; padding-top:8px; line-height:1.25; }
.food-pill { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border:1px solid #e0e0dd; border-radius:999px; background:#fff; color:#33312f;
  font-family:inherit; font-size:13px; font-weight:500; line-height:1; cursor:pointer; white-space:nowrap;
  transition:background-color .2s, border-color .2s, color .2s; }
.food-pill:hover { background:#fff; border-color:#387c2c; color:#387c2c; }
.food-pill.active { background:#387c2c; border-color:#387c2c; color:#fff; }
/* match-count badge inside each pill */
.food-cnt { font-size:10px; font-weight:700; background:#eef0ee; color:#666; border-radius:999px; padding:2px 6px; min-width:18px; text-align:center; }
.food-pill.active .food-cnt { background:rgba(255,255,255,.25); color:#fff; }
/* cuisine "+ more" toggle */
.food-filter-row:not(.show-all) .food-pill.extra { display:none; }
.food-filter-row.show-all .food-more { display:none; }
.food-pill.food-more { font-style:italic; color:#387c2c; }
/* keyboard focus */
.food-pill:focus-visible, .food-stand>summary:focus-visible, .food-card-social a:focus-visible { outline:2px solid #387c2c; outline-offset:2px; }
.food-count { font-size:13px; color:#a7a9ac; font-style:italic; min-height:1.4em; padding:2px 0 8px; }
/* Allergen group caveat — sits under the merged Dietary & allergens row */
.food-allergen-note { margin:6px 0 2px; padding-left:96px; font-size:11px; font-style:italic; color:#9a6a1f; }

/* Empty-state banner — shown by JS when a stand+food-type combo has no match */
.food-empty-msg { margin:0 0 14px; padding:11px 14px; background:#eef6ea; border-left:4px solid #387c2c;
  border-radius:0 6px 6px 0; color:#2c6a22; font-size:13px; line-height:1.4; scroll-margin-top:150px; }
.food-empty-msg[hidden] { display:none; }

/* Stand sections */
.food-stand { border-bottom:1px solid #e5e5e5; scroll-margin-top:150px; }
.food-stand:first-of-type { border-top:1px solid #e5e5e5; }
.food-stand > summary { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 0; font-size:17px; font-weight:500; cursor:pointer; list-style:none; user-select:none; }
.food-stand > summary::-webkit-details-marker { display:none; }
.food-stand > summary::marker { content:''; }
.food-stand > summary::after { content:''; width:9px; height:9px; border-right:2px solid currentColor;
  border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform .3s; margin-left:auto; }
.food-stand[open] > summary::after { transform:rotate(-135deg); }
.food-stand-count { font-size:12px; color:#a7a9ac; font-weight:400; }
.food-stand.hidden-by-filter { display:none; }

/* Card grid */
.food-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:16px; padding:4px 0 22px; }
.food-card { border:1px solid #e8e8e8; border-radius:10px; overflow:hidden; background:#fff; display:flex; flex-direction:column; }
.food-card.hidden-by-filter { display:none; }
.food-card-img { position:relative; height:150px; background:linear-gradient(135deg,#cde8c4,#7bbf63); }
.food-card-img img { width:100%; height:100%; object-fit:cover; display:block; }
.food-card-body { padding:14px; display:flex; flex-direction:column; gap:8px; }
.food-card-body h3 { margin:0; font-size:18px; font-weight:500; }
.food-card-sells { margin:0; color:#666; font-size:13px; }
.food-card-chips { display:flex; flex-wrap:wrap; gap:5px; }
.food-chip { font-size:11px; border-radius:10px; padding:2px 8px; border:1px solid transparent; }
.food-chip-diet { background:#eef6ea; color:#2c6a22; border-color:#cfe6c5; }
.food-chip-cuisine { background:#f0f0f5; color:#444; border-color:#e0e0ea; }
/* "Pure vegetarian kitchen" / "Fully vegan" — stronger than a plain "...options" chip */
.food-chip-pure { background:#387c2c; color:#fff; border-color:#387c2c; font-weight:600; }
/* Allergen chips ("Gluten-free available") — amber, distinct from dietary green */
.food-chip-allergen { background:#fdf3e8; color:#9a6a1f; border-color:#f3dcc0; }
/* Example dishes — compact bulleted list under the chips */
.food-card-dishes { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:2px 12px; font-size:12px; color:#555; }
.food-card-dishes li { position:relative; padding-left:12px; }
.food-card-dishes li::before { content:'•'; position:absolute; left:2px; color:#7bbf63; }
.food-card-note { font-size:12px; background:#fff7e6; border:1px solid #ffe2a8; color:#8a6400; border-radius:6px; padding:6px 9px; }
.food-card-desc { margin:0; font-size:13px; line-height:1.45; color:#555; }
.food-card-social { display:flex; gap:8px; margin-top:2px; }
.food-card-social a { min-width:30px; height:30px; padding:0 8px; border-radius:15px; background:#387c2c; color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; text-decoration:none; }
.food-card-social a:hover { background:#2d6624; }

@media (max-width:640px) {
  .food-filter-label { width:100%; flex-basis:100%; margin-bottom:2px; }
  .food-filter-row { gap:6px; }
  .food-allergen-note { padding-left:0; }
  /* Comfortable thumb tap targets on phones */
  .food-pill { padding:9px 14px; font-size:13px; }
  .food-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .food-card-img { height:130px; }
  .food-card-body { padding:11px; gap:6px; }
  .food-card-body h3 { font-size:16px; }
}
@media (max-width:380px) {
  .food-grid { grid-template-columns:1fr; }
  .food-card-img { height:160px; }
}