/* Restaurants surface — Almanac-aligned cards + detail page.
 * Loaded on /restaurants/ + per-restaurant pages alongside base/components/page.
 */
.rest-catnav { margin-top: var(--s-4); display:flex; flex-wrap:wrap; gap:.4rem .8rem; color:var(--color-text-3); font-size:.75rem; }
.rest-catnav a { color: var(--color-text-2); border-bottom: 1px dotted var(--color-border-2); }
.rest-catnav a:hover { color: var(--color-primary-text); border-bottom-style:solid; }

.rest-cat { padding-block: var(--s-6) var(--s-5); border-bottom: 1.5px solid var(--color-border); }
.rest-cat:last-of-type { border-bottom: 0; }
.rest-cat__title { font-family: var(--font-display); font-size: var(--t-2xl); font-weight: 600; }
.rest-cat__count { font-size: .7rem; color: var(--color-text-3); margin-top: .25rem; margin-bottom: var(--s-4); }

.rest-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 720px) { .rest-list { grid-template-columns: 1fr; } }

.rest-card {
  display: block;
  padding: var(--s-4) var(--s-5);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--r-lg);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
  color: var(--color-text);
}
.rest-card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: var(--color-border-2); text-decoration: none; }
.rest-card__name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; line-height: 1.2; }
.rest-card:hover .rest-card__name { color: var(--color-primary-text); }
.rest-card__loc { font-size: .7rem; color: var(--color-text-3); margin-top: .2rem; }
.rest-card__blurb { font-size: .9rem; line-height: 1.45; color: var(--color-text-2); margin-top: .6rem; }
.rest-card__markers { margin-top: .7rem; }

/* Detail page */
.rest-detail { padding-block: var(--s-4) var(--s-6); }
.rest-detail__cat { font-size: .7rem; color: var(--color-primary-text); letter-spacing: .12em; text-transform: uppercase; }
.rest-detail__name { font-family: var(--font-display); font-size: var(--t-3xl); line-height: 1.05; margin-top: .3rem; }
.rest-detail__address { font-size: 1rem; margin-top: var(--s-4); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; color: var(--color-text-2); }
.rest-detail__address svg { width: 16px; height: 16px; color: var(--color-primary-text); }
.rest-detail__dir { color: var(--color-primary-text); font-weight: 600; border-bottom: 1.5px dotted; }
.rest-detail__dir:hover { border-bottom-style: solid; }
.rest-detail__markers { margin-top: var(--s-4); }
.rest-detail__blurb { font-size: var(--t-md); line-height: 1.7; margin-top: var(--s-5); color: var(--color-text); }

.rest-detail__facts { margin-top: var(--s-6); padding: var(--s-5); background: var(--surface-2); border-radius: var(--r-lg); border: 1.5px solid var(--color-border); }
.rest-detail__facts h2 { font-family: var(--font-display); font-size: var(--t-xl); }
.rest-detail__facts dl { margin-top: var(--s-3); display: grid; grid-template-columns: 9rem 1fr; gap: .8rem; font-size: .95rem; }
.rest-detail__facts dt { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-3); align-self: center; }
.rest-detail__facts dd { color: var(--color-text); }

.rest-detail__needs, .rest-detail__sources { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1.5px solid var(--color-border); }
.rest-detail__needs h2, .rest-detail__sources h2 { font-family: var(--font-display); font-size: var(--t-lg); }
.rest-detail__update { margin-top: var(--s-7); text-align: center; font-size: .8rem; color: var(--color-text-3); }
.rest-detail__update a { color: var(--color-text-2); border-bottom: 1.5px dotted; }

.rest-disclaimer { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1.5px solid var(--color-border); color: var(--color-text-2); }
.rest-disclaimer h2 { font-family: var(--font-display); font-size: var(--t-xl); margin-bottom: var(--s-3); }
.rest-disclaimer p { margin-top: .8rem; }

/* WCAG: links inside text blocks need a non-color cue and AA contrast. */
.rest-detail__sources a,
.rest-detail__needs a,
.rest-disclaimer a,
.rest-detail__update a,
.rest-detail__facts dd a {
  color: var(--color-primary-text);
  border-bottom: 1.5px dotted color-mix(in srgb, var(--color-primary) 55%, transparent);
}
.rest-detail__sources a:hover,
.rest-detail__needs a:hover,
.rest-disclaimer a:hover,
.rest-detail__update a:hover,
.rest-detail__facts dd a:hover {
  border-bottom-style: solid;
}