/* Taprooms & More — filter bar + directory additions.
 * Existing card classes (card, taproom-card, card-top, card-kicker,
 * status-badge, card-body, card-detail, taproom-tags, card-actions,
 * source-link, map-button, taproom-related, checked, empty) are
 * styled by the site stylesheets; this file only adds the two-group
 * filter UI and small responsive tweaks.
 */

.tm-filters{
  display:grid;
  gap:.55rem;
  margin-bottom:.2rem;
}

.tm-filter-block{
  margin:0;
}

.tm-filter-label{
  display:block;
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.75;
  margin:0 0 .35rem;
}

#taproom-filters-county,
#taproom-filters-drink{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
}

#taproom-filters-county [data-county],
#taproom-filters-drink [data-drink]{
  appearance:none;
  border:1px solid rgba(255,255,255,.45);
  border-radius:999px;
  background:transparent;
  color:inherit;
  font:inherit;
  font-size:.85rem;
  line-height:1.2;
  padding:.38rem .85rem;
  cursor:pointer;
}

#taproom-filters-county [data-county]:hover,
#taproom-filters-drink [data-drink]:hover{
  border-color:#fff;
}

#taproom-filters-county [data-county][aria-pressed="true"],
#taproom-filters-drink [data-drink][aria-pressed="true"]{
  background:#fff;
  border-color:#fff;
  color:#0a0b1a;
  font-weight:700;
}

@media (min-width:720px){
  .tm-filters{
    grid-template-columns:1fr 1fr;
    align-items:start;
  }
}

@media (max-width:480px){
  #taproom-filters-county [data-county],
  #taproom-filters-drink [data-drink]{
    font-size:.8rem;
    padding:.32rem .65rem;
  }
}

/* 002C — restrained geographic treatments (visual polish only).
 * ONE thin single-county accent line per card replaces the heavier 3px
 * line; the shared Boone Buzz geography palette supplies --geo-accent
 * via BBGeoPalette.cssVars() at render time. No county colors are
 * hardcoded here. If the palette is unavailable the fallbacks below keep
 * the page visually unchanged.
 */

/* Single thin geographic accent line. No gradients on venue cards. */
.taproom-card{
  border-top:2px solid var(--geo-accent, transparent);
  background-image:none;
}

/* Unified county badge component — one family for Watauga/Avery/Ashe.
 * Same size, padding, typography, shape, dark/subtle base and visual
 * weight for all three; county identity comes only from the restrained
 * accent (1px border + small dot). The venue name stays the visual lead;
 * geography reads as an accent, not the theme. */
.taproom-card .card-kicker{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  background:rgba(8,10,22,.62);
  color:#f2f4fa;
  border:1px solid var(--geo-accent, rgba(255,255,255,.28));
  border-radius:4px;
  padding:.15rem .5rem;
  font-size:10px;
  letter-spacing:1.1px;
  font-weight:700;
  text-transform:uppercase;
}
.taproom-card .card-kicker .county-dot{
  width:7px;
  height:7px;
  flex:none;
  border-radius:50%;
  background:var(--geo-accent, rgba(255,255,255,.45));
}
/* Per-county dot accent, still read from the shared palette variables —
 * Watauga light-blue (columbia), Avery red, Ashe purple. No hexes here. */
.taproom-card[data-geo="watauga"] .card-kicker .county-dot{
  background:var(--geo-accent);
}
.taproom-card[data-geo="ashe"] .card-kicker .county-dot{
  background:var(--geo-accent);
}

/* County filter active states use the shared geographic treatment.
 * "All" has no --geo-* variables and keeps the neutral active style. */
#taproom-filters-county [data-county="Watauga"][aria-pressed="true"],
#taproom-filters-county [data-county="Avery"][aria-pressed="true"],
#taproom-filters-county [data-county="Ashe"][aria-pressed="true"]{
  background:var(--geo-accent);
  color:var(--geo-text);
  border-color:var(--geo-border);
  font-weight:700;
}

/* 002A polish — tighter hero, removed redundant heading handled in HTML,
 * normalized card rows. Page-specific overrides only; card class visuals
 * remain owned by the site stylesheets.
 */

/* 1. Tighter hero / above-the-fold */
.things-hero{
  margin-bottom:26px;
}
.things-hero .eyebrow{
  margin-bottom:10px;
}
.things-hero h1{
  margin-bottom:12px;
}
.filter-row{
  padding:14px 0;
}

/* 2. Results heading is now just the live result count */
.results-heading{
  margin:4px 0 16px;
}

/* 4. Normalized card rows: stretch cards, keep headers/titles orderly,
 * amenity pills grouped, actions pinned to the bottom. No truncation,
 * no forced identical heights. */
.taproom-card{
  display:flex;
  flex-direction:column;
}
.taproom-card .card-body{
  display:flex;
  flex-direction:column;
  flex:1;
}
.taproom-card .taproom-tags{
  margin:12px 0;
}
.taproom-card .card-actions{
  margin-top:auto;
}

@media (max-width:720px){
  .things-hero{
    margin-bottom:20px;
  }
  .filter-row{
    padding:10px 0;
  }
}

/* Suppress the live shared card rainbow on Taprooms only. */
.taproom-card::before{content:none;display:none;}
/* 002C compatibility: page-scoped variables derived from the verified live
 * geography-palette.js. External CSS works with style-src self. */
.taproom-card[data-geo="watauga"],
#taproom-filters-county [data-county="Watauga"]{
  --geo-accent:#B9D9EB;
  --geo-border:#B9D9EB;
  --geo-bg:#B9D9EB;
  --geo-text:#0a0b1a;
}
.taproom-card[data-geo="avery"],
#taproom-filters-county [data-county="Avery"]{
  --geo-accent:#CE1126;
  --geo-border:#CE1126;
  --geo-bg:#CE1126;
  --geo-text:#FFFFFF;
}
.taproom-card[data-geo="ashe"],
#taproom-filters-county [data-county="Ashe"]{
  --geo-accent:#800080;
  --geo-border:#800080;
  --geo-bg:#800080;
  --geo-text:#FFFFFF;
}

/* Published venue menus; component styles remain scoped to Taprooms. */
.tm-menu-open,.tm-menu-close,.tm-menu-group{font:inherit;cursor:pointer;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:.65rem .85rem;min-height:44px}
.tm-menu-open{font-size:.85rem;font-weight:650}
.tm-menu-dialog{box-sizing:border-box;width:min(760px,calc(100% - 32px));max-height:85dvh;overflow:auto;padding:28px;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:18px}
.tm-menu-dialog::backdrop{background:#080a1acc}
.tm-menu-close{display:block;margin-left:auto;margin-bottom:1rem}
.tm-menu-dialog h2{font-size:clamp(1.35rem,4vw,2rem);margin:0 0 .75rem}
.tm-menu-intro{color:var(--muted);line-height:1.6}
.tm-menu-groups{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.5rem 0}
.tm-menu-group[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink);font-weight:700}
.tm-menu-section{border:1px solid var(--line);border-radius:12px;padding:20px}
.tm-menu-section[hidden]{display:none}
.tm-menu-section h3{margin:0 0 1rem;font-size:1.1rem}
.tm-menu-source+.tm-menu-source{margin-top:1rem}
.tm-menu-source a{display:inline-flex;align-items:center;min-height:44px;font-size:1rem;font-weight:650;line-height:1.6;overflow-wrap:anywhere}
.tm-menu-checked{font-size:.8rem;color:var(--muted);margin:.5rem 0 0}
@media(max-width:600px){.tm-menu-dialog{padding:18px}.tm-menu-section{padding:16px}.tm-menu-groups{gap:.4rem}.tm-menu-group{font-size:.85rem}}

.tm-name-menu{font:inherit;color:inherit;background:transparent;border:0;padding:0;text-align:left;cursor:pointer;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:.18em;min-height:44px}
.tm-name-menu:hover{text-decoration-color:currentColor}
.tm-name-menu:focus-visible{outline:2px solid var(--action);outline-offset:5px;border-radius:3px}
.tm-menu-source .tm-menu-link{background:var(--action);color:var(--action-text);border-radius:8px;padding:.65rem .85rem;text-decoration:none;box-sizing:border-box;max-width:100%}