/* CHANGE LOG
 * File: /var/www/html/prohrhq.com/static/css/carrier_directory.css
 * Purpose: State/city carrier directory hubs (templates/directory/*).
 *          Uses the public design tokens from prohrhq_public.css only.
 * Version History:
 * 2026-09-04 v1.1 - .dir-filter (statewide name filter on hub pages).
 * 2026-09-04 v1.0 - Initial.
 */
.dir { padding-top: 1.5rem; padding-bottom: 3rem; }
.dir h1 { margin-bottom: 0.6rem; }
.dir-up { font-family: var(--font-sans); font-size: 0.85rem; color: var(--color-text-mute); margin: 0 0 0.4rem; }
.dir-up a { color: inherit; }
.dir-lede { font-size: 1.05rem; max-width: var(--maxw-prose); }
.dir-note { font-family: var(--font-sans); font-size: 0.85rem; color: var(--color-text-mute); margin: -0.3rem 0 0.6rem; }
.dir-count { font-family: var(--font-sans); font-size: 0.8rem; color: var(--color-text-mute); font-variant-numeric: tabular-nums; }
.dir-toplist { columns: 2; column-gap: 2rem; padding-left: 1.4rem; margin: 0.5rem 0 1.5rem; }
.dir-toplist li { break-inside: avoid; padding: 0.15rem 0; }
.dir-grid { list-style: none; padding: 0; margin: 0.5rem 0 1.5rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.25rem 1.25rem; }
.dir-grid li { padding: 0.2rem 0; border-bottom: 1px solid var(--color-rule-soft); }
.dir-grid-cities { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.dir-table { font-size: 0.92rem; }
.dir-table td { vertical-align: top; }
.dir-dba { display: block; font-size: 0.8rem; color: var(--color-text-mute); }
.dir-mc { display: block; font-size: 0.78rem; color: var(--color-text-mute); }
.dir-tag { display: inline-block; font-family: var(--font-sans); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.05rem 0.4rem; margin-left: 0.4rem; border: 1px solid var(--color-rule); border-radius: var(--radius); color: var(--color-text-mute); }
.dir-tag-hiring { color: var(--color-link); border-color: var(--color-link); }
.dir-pager { display: flex; gap: 1.5rem; align-items: center; font-family: var(--font-sans); font-size: 0.9rem; margin: 0.5rem 0 1.5rem; }
.dir-faq { margin-top: 1.5rem; }
.dir-faq-q { font-size: 1.15rem; margin-bottom: 0.2rem; }
.dir-foot { font-size: 0.88rem; color: var(--color-text-mute); margin-top: 2rem; }
@media (max-width: 640px) {
  .dir-toplist { columns: 1; }
  .dir-table th:nth-child(5), .dir-table td:nth-child(5), .dir-table th:nth-child(6), .dir-table td:nth-child(6) { display: none; }
}
/* 2026-09-04 v1.1: statewide name filter on state/city pages */
.dir-filter { margin: 1rem 0 1.5rem; padding: 0.9rem 1rem; border: 1px solid var(--color-rule); border-radius: var(--radius); background: var(--color-surface, #fff); }
.dir-filter-label { display: block; font-family: var(--font-sans); font-weight: 600; font-size: 0.9rem; margin-bottom: 0.4rem; }
.dir-filter-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.dir-filter-q { flex: 1 1 16rem; font-size: 1rem; padding: 0.55rem 0.7rem; border: 1px solid var(--color-rule); border-radius: var(--radius); }
.dir-filter-grade { font-size: 1rem; padding: 0.5rem; border: 1px solid var(--color-rule); border-radius: var(--radius); }
.dir-filter-btn { font-family: var(--font-sans); font-size: 1rem; padding: 0.55rem 1.1rem; border: 0; border-radius: var(--radius); background: var(--color-link); color: #fff; cursor: pointer; }
.dir-more { margin: 0 0 1.5rem; }
.dir-more summary { cursor: pointer; font-family: var(--font-sans); font-size: 0.9rem; color: var(--color-link); }