/* Installer directory (search, hubs, profiles). Mobile first; works without JavaScript.
   BidGlory kit: navy #161F31 text and dark bands; orange #F48413 for fills and borders only (never text on light);
   deep orange #A65300 for orange text on light; peach #FCD9B1; paper #FFFDF5 / #FEF7EC; muted #475569; lines #E2E8F0. */
.dir {
  --d-navy: #161F31;
  --d-orange: #F48413;
  --d-orange-text: #A65300;
  --d-peach: #FCD9B1;
  --d-paper: #FFFDF5;
  --d-paper-2: #FEF7EC;
  --d-muted: #475569;
  --d-line: #E2E8F0;
  --d-green: #166534;
  --d-red: #991B1B;
  color: var(--d-navy);
  padding-block: 1.25rem 3rem;
}
.dir h1, .dir h2, .dir h3 { font-family: "Fraunces", Georgia, serif; color: var(--d-navy); line-height: 1.15; }
.dir h1 { font-size: clamp(1.7rem, 5vw, 2.6rem); margin: .25rem 0 .5rem; }
.dir h2 { font-size: clamp(1.25rem, 3.4vw, 1.6rem); margin: 2rem 0 .75rem; }
.dir h3 { font-size: 1.15rem; margin: 0; }
.dir p { max-width: 68ch; }
.dir a { color: var(--d-navy); text-decoration-color: var(--d-orange); text-underline-offset: 3px; }
.dir a:hover { color: var(--d-orange-text); }
.dir-eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--d-orange-text); margin: 0; }
.dir-lede { font-size: 1.08rem; color: var(--d-muted); margin: 0 0 1rem; }
.dir-muted { color: var(--d-muted); }
.dir-small { font-size: .88rem; }

/* Notices */
.dir-notice { border: 1px solid var(--d-line); border-left: 4px solid var(--d-orange); background: var(--d-paper-2); padding: .75rem 1rem; border-radius: 8px; margin: 1rem 0; }
.dir-notice-demo { border-left-color: var(--d-navy); background: #EEF2F7; }
.dir-notice p { margin: 0; }

/* Search form */
.dir-search { background: var(--d-paper); border: 1px solid var(--d-line); border-radius: 14px; padding: 1rem; margin: 1rem 0 1.5rem; box-shadow: 0 1px 2px rgba(22, 31, 49, .05); }
.dir-search-row { display: flex; flex-direction: column; gap: .5rem; }
.dir-search label.dir-where-label { font-weight: 700; }
.dir-search input[type=text] { width: 100%; font: inherit; font-size: 1.05rem; padding: .75rem .85rem; border: 1px solid #94A3B8; border-radius: 10px; background: #fff; color: var(--d-navy); }
.dir-search input[type=text]:focus { outline: 3px solid var(--d-orange); outline-offset: 1px; }
.dir-search fieldset { border: 0; padding: 0; margin: .9rem 0 0; }
.dir-search legend { font-weight: 700; margin-bottom: .4rem; padding: 0; }
.dir-checks { display: flex; flex-wrap: wrap; gap: .5rem; }
.dir-check { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--d-line); background: #fff; border-radius: 999px; padding: .45rem .8rem; cursor: pointer; font-size: .95rem; min-height: 44px; }
.dir-check input { accent-color: var(--d-orange-text); width: 1.1rem; height: 1.1rem; }
.dir-check:has(input:checked) { border-color: var(--d-orange); background: var(--d-paper-2); }
.dir-search details { margin-top: .9rem; }
.dir-search summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.dir-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font: inherit; font-weight: 700; padding: .75rem 1.2rem; border-radius: 10px; border: 2px solid var(--d-orange); background: var(--d-orange); color: var(--d-navy); text-decoration: none; cursor: pointer; min-height: 44px; }
.dir a.dir-btn, .dir a.dir-btn:hover { color: var(--d-navy); text-decoration: none; }
.dir-btn:hover { background: #E07610; border-color: #E07610; }
.dir-btn-ghost, .dir a.dir-btn-ghost { background: transparent; border-color: var(--d-navy); color: var(--d-navy); }
.dir-btn-ghost:hover, .dir a.dir-btn-ghost:hover { background: var(--d-navy); color: #fff; }
.dir-search .dir-btn { margin-top: 1rem; width: 100%; }
.dir-search #where-hint { margin: .3rem 0 0; }

/* Result cards */
.dir-results { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.dir-card { border: 1px solid var(--d-line); border-radius: 14px; background: #fff; padding: 1rem; display: grid; gap: .6rem; }
.dir-card-member { border-color: var(--d-orange); box-shadow: inset 4px 0 0 var(--d-orange); }
.dir-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .75rem; }
.dir-card-head h3 a { text-decoration: none; }
.dir-card-head h3 a:hover { text-decoration: underline; }
.dir-card-where { color: var(--d-muted); font-size: .95rem; margin: 0; }
.dir-miles { font-weight: 700; color: var(--d-navy); }
.dir-reasons { margin: 0; padding-left: 1.1rem; color: var(--d-navy); font-size: .95rem; }
.dir-reasons li { margin: .15rem 0; }
.dir-card-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.dir-card-actions .dir-btn { flex: 1 1 12rem; }

/* Listing avatars (Pages/Installers/_DirAvatar.cshtml): monogram initials in a brand-color circle; 44px on cards, 72px on profiles.
   The .dir-avatar-c{n} colors must match Monogram.Palette (MonogramTests checks both, and AA contrast for each pair). */
.dir-card-top { display: flex; align-items: center; gap: .8rem; }
.dir-card-top .dir-card-head { flex: 1 1 auto; min-width: 0; }
.dir-avatar {
  --av-bg: #161F31; --av-fg: #FCD9B1;
  flex: 0 0 auto; display: inline-grid; place-items: center; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 30% 25%, rgb(255 255 255 / .14), transparent 60%), var(--av-bg); color: var(--av-fg);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12), 0 1px 2px rgb(22 31 49 / .18);
  font-family: "Fraunces", Georgia, serif; font-weight: 600; letter-spacing: .03em; line-height: 1;
  user-select: none; -webkit-user-select: none; font-variant-numeric: lining-nums;
}
.dir-avatar-sm { width: 44px; height: 44px; font-size: 1.05rem; }
.dir-avatar-lg { width: 72px; height: 72px; font-size: 1.7rem; }
.dir-avatar-logo { background: #fff; box-shadow: inset 0 0 0 1px var(--d-line); }
.dir-avatar-logo img { width: 100%; height: 100%; object-fit: contain; padding: 12%; box-sizing: border-box; }
.dir-card-member .dir-avatar, .dir-profile-member .dir-avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--d-orange); }
.dir-avatar-c0 { --av-bg: #161F31; --av-fg: #FCD9B1; }
.dir-avatar-c1 { --av-bg: #A65300; --av-fg: #FFFFFF; }
.dir-avatar-c2 { --av-bg: #2C4A72; --av-fg: #FFFFFF; }
.dir-avatar-c3 { --av-bg: #1E5B4F; --av-fg: #FFFFFF; }
.dir-avatar-c4 { --av-bg: #5E2F55; --av-fg: #FFFFFF; }
.dir-avatar-c5 { --av-bg: #8A3324; --av-fg: #FFFFFF; }
.dir-avatar-c6 { --av-bg: #6B5216; --av-fg: #FFFFFF; }
.dir-avatar-c7 { --av-bg: #164E63; --av-fg: #FFFFFF; }
.dir-profile-title { display: flex; align-items: center; gap: 1rem; }
.dir-profile-title h1 { margin: 0; min-width: 0; }
@media (forced-colors: active) {
  .dir-avatar { forced-color-adjust: none; background: Canvas; color: CanvasText; border: 2px solid CanvasText; box-shadow: none; }
}
@media print {
  .dir-avatar { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* Badges and chips */
.dir-badge { display: inline-block; font-size: .78rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px; border: 1px solid var(--d-line); color: var(--d-muted); background: #F8FAFC; white-space: nowrap; }
.dir-badge-claimed { color: var(--d-navy); background: var(--d-paper-2); border-color: var(--d-peach); }
.dir-badge-member { color: var(--d-navy); background: var(--d-peach); border-color: var(--d-orange); }
.dir-badge-demo { color: #fff; background: var(--d-navy); border-color: var(--d-navy); }
.dir-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.dir-chips li { font-size: .85rem; background: #F1F5F9; border-radius: 6px; padding: .15rem .5rem; }

/* Lists of states / cities / links */
.dir-links { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .4rem 1rem; }
.dir-links li { padding: .35rem 0; border-bottom: 1px solid var(--d-line); }
.dir-links .dir-count { color: var(--d-muted); font-size: .88rem; }
.dir-trades { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); list-style: none; padding: 0; }
.dir-trades li { border: 1px solid var(--d-line); border-radius: 12px; padding: .9rem 1rem; background: var(--d-paper); }
.dir-trades a { font-weight: 700; }
.dir-trades p { margin: .25rem 0 0; color: var(--d-muted); font-size: .92rem; }

/* Profile */
.dir-profile-head { display: grid; gap: .5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--d-line); }
.dir-profile-grid { display: grid; gap: 1.5rem; margin-top: 1rem; }
.dir-panel { border: 1px solid var(--d-line); border-radius: 14px; padding: 1rem; background: #fff; }
.dir-panel h2 { margin-top: 0; font-size: 1.2rem; }
.dir-cta-panel { background: var(--d-navy); color: #fff; border-color: var(--d-navy); }
.dir-cta-panel h2, .dir-cta-panel p { color: #fff; }
.dir-cta-panel .dir-btn { width: 100%; }
.dir-cta-panel a:not(.dir-btn) { color: #fff; text-decoration-color: var(--d-orange); }
.dir-facts { display: grid; grid-template-columns: max-content 1fr; gap: .4rem .9rem; margin: 0; }
.dir-facts dt { font-weight: 700; }
.dir-facts dd { margin: 0; }
.dir-license { border-top: 1px solid var(--d-line); padding: .6rem 0; }
.dir-license:first-of-type { border-top: 0; }
.dir-lic-active { color: var(--d-green); font-weight: 700; }
.dir-lic-inactive { color: var(--d-red); font-weight: 700; }
.dir-claim { margin-top: 1rem; font-size: .95rem; }

@media (min-width: 48rem) {
  .dir { padding-block: 2rem 4rem; }
  .dir-search { padding: 1.25rem 1.5rem; }
  .dir-search-row > div { max-width: 32rem; }
  .dir-search .dir-btn { width: auto; margin-top: 0; }
  .dir-card { padding: 1.25rem 1.5rem; }
  .dir-card-actions .dir-btn { flex: 0 0 auto; }
  .dir-profile-grid { grid-template-columns: 1fr 20rem; align-items: start; }
  .dir-profile-aside { position: sticky; top: 1rem; display: grid; gap: 1rem; }
}

/* "Match me" and "Add your company" prompts (search results, hubs). */
.dir-nomatch { display: grid; gap: 1rem; margin: 1rem 0 0; }
@media (min-width: 48rem) { .dir-nomatch { grid-template-columns: 1fr 1fr; } }
.dir-nomatch > div { border: 1px solid var(--d-line); border-radius: 12px; padding: 1rem 1.15rem; background: #fff; }
.dir .dir-nomatch-h { font-size: 1.15rem; margin: 0 0 .35rem; }
.dir-nomatch p { margin: 0 0 .85rem; color: var(--d-muted); }
.dir-after-results { margin-top: 1rem; color: var(--d-muted); }
.dir-join { margin-top: 2.5rem; padding: 1.25rem 1.35rem; border-radius: 14px; background: var(--d-navy); color: #CBD5E1; display: grid; gap: 1rem; align-items: center; }
@media (min-width: 48rem) { .dir-join { grid-template-columns: 1fr auto; } }
.dir .dir-join h2 { color: #fff; margin: 0 0 .35rem; font-size: 1.35rem; }
.dir-join p { margin: 0; }
.dir-join-actions { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; }
.dir .dir-join a.dir-join-link { color: var(--d-peach); }
.dir .dir-join a.dir-join-link:hover { color: #fff; }

/* Trade hub header: the trade's photo (licensed stock, img/stock) beside the heading; stacked on phones, photo below. */
.dir-hub-head { display: grid; gap: 1rem 2rem; align-items: center; }
.dir-hub-photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; border-bottom: 4px solid var(--d-orange); }
@media (min-width: 48rem) { .dir-hub-head.has-photo { grid-template-columns: minmax(0, 1fr) 22rem; } }
@media (max-width: 47.99rem) { .dir-hub-photo img { aspect-ratio: 21 / 9; } }

/* Brand pages (docs/BRANDS.md): text-first hero, a clearly labeled sponsored box, the trademark notice. */
.brand-hero { margin-bottom: 1rem; }
.brand-h1-logo { margin: .5rem 0; }
.brand-logo { display: block; max-height: 56px; width: auto; }
.brand-draft { border-left-color: var(--d-red); }
.brand-draft ul { margin: .5rem 0 0; padding-left: 1.1rem; }
.brand-body { margin-bottom: 1rem; }
/* Paid feature card: looks like part of the page, but the label and the paid disclosure are always visible (FTC). Navy on paper and
   navy on peach are both far above WCAG AA contrast; the disclosure is body-size text right next to the CTA. */
.brand-featured { border: 1px solid var(--d-line); border-left: 4px solid var(--d-orange); border-radius: 14px; background: var(--d-paper-2); padding: 1rem 1.25rem; margin: 1.25rem 0; max-width: 44rem; }
.brand-featured-eyebrow { margin-bottom: .25rem; }
.brand-featured-name { margin: 0 0 .75rem; font-size: 1.25rem; }
.brand-featured-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.brand-featured-disclosure { margin: 0; font-size: .9rem; color: var(--d-navy); }
.brand-disclosure-tag { display: inline-block; font-weight: 700; color: var(--d-navy); background: var(--d-peach); border-radius: 6px; padding: .1rem .5rem; margin-right: .25rem; }
.brand-featured-note { margin: .75rem 0 0; font-size: .9rem; color: var(--d-navy); }
.brand-where-to-buy { margin-top: .25rem; }
.brand-notice { border-top: 1px solid var(--d-line); margin-top: 2.5rem; padding-top: 1rem; }
.brand-notice p { margin: 0 0 .4rem; }