/* Embeddable widget (ClubPages/clubpage.php), on top of style.css.
   Clubs with custom CSS restyle #page, #menu, h1.ycname, h2.recip and
   #recip-table - the ids/classes the old widget used - so keep those.
   Don't reuse #select-row: 122 clubs' CSS fixes it at height:30px. */
body.embed { display: block; min-height: 0; background: var(--paper); }
.embed #page { max-width: 1040px; margin: 0 auto; padding: 12px 14px 6px; background: var(--paper); }
.embed h1.ycname { text-align: center; font-size: 1.5rem; margin: 0 0 2px; }
.embed h2.recip { text-align: center; font-size: 1rem; font-weight: 400; color: var(--muted); margin: 0 0 12px; }
#menu { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 2px solid var(--navy); margin-bottom: 14px; }
#menu a { padding: 8px 16px; text-decoration: none; color: var(--navy); font-weight: 600; font-size: .95rem; border-radius: 6px 6px 0 0; }
#menu a.active { background: var(--navy); color: #fff; }
#menu a.passive:hover { background: #eef2f5; }
.embed .filters { align-items: flex-end; }
.embed .filters .count { margin: 0 0 6px; }
.embed .map-toolbar { padding: 0 0 8px; border: 0; background: none; }
.embed #map { height: 600px; min-height: 300px; border-radius: var(--radius); flex: none; }
.embed .powered { text-align: center; font-size: .8rem; color: var(--muted); margin: 18px 0 4px; }
@media (max-width: 600px) {
  #menu a { padding: 8px 10px; }
}