/* ============================================================
   Directory layer.

   Its own stylesheet and its own class prefix, dir-, for two
   reasons. The brand stays in style.css so the directory cannot
   quietly redefine the company's colors, and a footprint check
   across the network reads class vocabulary first, so a
   directory that shares a class list with another directory
   reads as the same shop's work even when it looks different.

   Every color here comes from the tokens in style.css. Nothing
   in this file invents a hex value.
   ============================================================ */

/* ---------- breadcrumbs ---------- */
.dir-crumbs {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line-soft);
  font-size: .85rem;
  padding: .7rem 0;
}
.dir-crumbs a { color: var(--ink-soft); }
.dir-crumbs a:hover { color: var(--brand-red); }
.dir-crumbs span[aria-current] { color: var(--ink); font-weight: 600; }
.dir-crumb-sep { color: var(--ink-mute); margin: 0 .5rem; }

/* ---------- market hero ---------- */
.dir-hero {
  background: linear-gradient(160deg, var(--brand-navy-deep), var(--brand-navy) 62%, var(--brand-blue));
  color: #fff;
  padding: 3.2rem 0 2.6rem;
}
.dir-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 4.2vw, 2.9rem);
  line-height: 1.15;
  margin: 0 0 .7rem;
  color: #fff;
}
.dir-hero-bite {
  font-size: 1.1rem;
  max-width: 62ch;
  color: rgba(255, 255, 255, .88);
  margin: 0 0 1.4rem;
}
.dir-hero-bite strong { color: #fff; }

/* The counts strip. Every number on it is read off this market's
   own records, so an empty market renders nothing rather than a zero. */
.dir-figures {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem 2.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.dir-figure strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1.1;
  color: var(--accent-gold);
}
.dir-figure span {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .66);
}

/* ---------- the snack box ---------- */
.dir-snack {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand-red);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  margin: 0 0 2rem;
}
.dir-snack h2 {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-soft);
  margin: 0 0 .7rem;
}
.dir-snack ul { margin: 0; padding-left: 1.1rem; }
.dir-snack li { margin-bottom: .45rem; font-size: .95rem; }
.dir-snack li:last-child { margin-bottom: 0; }

/* ---------- listing rows ---------- */
.dir-list { list-style: none; margin: 0; padding: 0; }
.dir-row {
  display: grid;
  grid-template-columns: 2.2rem 1fr auto;
  gap: 0 1rem;
  align-items: start;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.dir-row:last-child { border-bottom: 0; }
.dir-rank {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink-mute);
  padding-top: .1rem;
}
.dir-name {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  margin: 0 0 .2rem;
}
.dir-name a { color: var(--brand-navy); }
.dir-name a:hover { color: var(--brand-red); }
.dir-meta {
  font-size: .87rem;
  color: var(--ink-soft);
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .75rem;
  margin: 0;
}
.dir-stars { color: var(--accent-gold); letter-spacing: .04em; }
.dir-actions { display: flex; flex-direction: column; gap: .4rem; align-items: stretch; }
.dir-call {
  display: inline-block;
  background: var(--brand-red);
  color: #fff;
  font-weight: 600;
  font-size: .9rem;
  padding: .5rem .95rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  text-align: center;
}
.dir-call:hover { background: var(--brand-red-dark); color: #fff; }
.dir-site {
  font-size: .82rem;
  color: var(--ink-soft);
  text-align: center;
}

/* The one listing that is the site's own crew. Marked, never hidden,
   and never sorted above a better rated company without saying so. */
.dir-row.is-ours {
  background: linear-gradient(90deg, rgba(200, 16, 46, .05), transparent 60%);
  border-left: 3px solid var(--brand-red);
  padding-left: .9rem;
  margin-left: -.9rem;
}
.dir-ours-tag {
  display: inline-block;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--brand-red);
  border: 1px solid currentColor;
  border-radius: 2px;
  padding: .1rem .35rem;
  margin-left: .45rem;
  vertical-align: .1em;
}

/* ---------- place and service grids ---------- */
.dir-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: .7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dir-tile {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  background: var(--bg);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.dir-tile:hover { border-color: var(--brand-navy); box-shadow: var(--shadow-sm); }
.dir-tile strong { display: block; color: var(--brand-navy); font-size: .98rem; }
.dir-tile span { font-size: .8rem; color: var(--ink-mute); }

/* ---------- the permit and certification panel ---------- */
.dir-rules {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.3rem 1.5rem;
  background: var(--bg);
}
.dir-rules h3 { margin-top: 0; font-family: var(--font-display); }
.dir-rules dt {
  font-weight: 600;
  font-size: .88rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: 1rem;
}
.dir-rules dd { margin: .25rem 0 0; }

/* A state with no license renders the explanation, never a blank.
   A blank in thirty states is thirty states of implied accusation. */
.dir-regime {
  font-size: .9rem;
  background: var(--bg-mid);
  border-radius: var(--radius-sm);
  padding: .8rem 1rem;
  margin-top: 1rem;
}

/* ---------- coverage honesty ---------- */
.dir-coverage {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  background: var(--bg-soft);
  font-size: .93rem;
  color: var(--ink-soft);
}
.dir-coverage strong { color: var(--ink); }

.dir-section { padding: 2.6rem 0; }
.dir-section + .dir-section { border-top: 1px solid var(--line-soft); }
.dir-section h2 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  margin: 0 0 .5rem;
}
.dir-section > .container > p.dir-lede {
  color: var(--ink-soft);
  max-width: 68ch;
  margin: 0 0 1.5rem;
}

@media (max-width: 640px) {
  .dir-row { grid-template-columns: 1.6rem 1fr; }
  .dir-actions { grid-column: 1 / -1; flex-direction: row; margin-top: .6rem; }
  .dir-call { flex: 1; }
  .dir-figures { gap: 1.1rem 1.8rem; }
}

/* Opening hours on a profile. A list rather than a joined string,
   because joining them put semicolons in rendered prose and the house
   copy rule bans those. */
.dir-hours { list-style: none; margin: 0; padding: 0; }
.dir-hours li { font-size: .9rem; color: var(--ink-soft); }

/* A verbatim review. Printed as written or not printed. */
.dir-quote {
  margin: 1rem 0 0;
  padding: .9rem 1.2rem;
  border-left: 3px solid var(--line);
  background: var(--bg-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.dir-quote p { margin: 0; font-size: .95rem; }

/* The service map. A fixed height because Leaflet needs one: a map in
   a zero height box draws nothing and reports no error. */
.dir-map {
  height: 460px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-mid);
  z-index: 0;
}
.dir-map-note {
  font-size: .8rem;
  color: var(--ink-mute);
  margin: .6rem 0 0;
}
.dir-map .leaflet-popup-content { font-size: .9rem; line-height: 1.45; }
.dir-map .leaflet-popup-content a { color: var(--brand-red); font-weight: 600; }
@media (max-width: 640px) { .dir-map { height: 340px; } }

/* ============================================================
   The home hero and its search.

   Sharper than the rest of the site on purpose: tight radii,
   hairline rules instead of shadows, one accent, and a type
   scale that steps hard rather than drifting. Everything still
   comes from the tokens in style.css, so the brand is intact.
   ============================================================ */

.home-hero {
  background: var(--brand-navy-deep);
  color: #fff;
  padding: 4.5rem 0 3.25rem;
  position: relative;
  overflow: hidden;
  border-bottom: 3px solid var(--brand-red);
}
/* A hairline grid, barely there. Gives the flat navy some
   structure without a gradient doing the work. */
.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
}
.home-hero > .container { position: relative; }

.home-kicker {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin: 0 0 1rem;
}
.home-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5.4vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -.015em;
  margin: 0 0 1rem;
  max-width: 19ch;
  color: #fff;
}
.home-hero h1 em {
  font-style: normal;
  color: var(--accent-gold);
}
.home-sub {
  font-size: 1.05rem;
  color: rgba(255,255,255,.78);
  max-width: 54ch;
  margin: 0 0 2rem;
}

/* ---------- the search ---------- */
.home-search { max-width: 640px; position: relative; }
.home-search-label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-bottom: .5rem;
}
.home-search-box {
  display: flex;
  align-items: stretch;
  background: #fff;
  border-radius: 3px;
  border: 2px solid transparent;
  transition: border-color .12s ease;
}
.home-search-box:focus-within { border-color: var(--accent-gold); }
.home-search input {
  flex: 1;
  border: 0;
  background: transparent;
  font: 400 1.05rem/1.2 var(--font-body);
  color: var(--ink);
  padding: 1rem 1.1rem;
  min-width: 0;
}
.home-search input:focus { outline: none; }
.home-search input::placeholder { color: var(--ink-mute); }
.home-search button {
  border: 0;
  background: var(--brand-red);
  color: #fff;
  font: 700 .95rem/1 var(--font-body);
  letter-spacing: .02em;
  padding: 0 1.4rem;
  cursor: pointer;
  border-radius: 0 1px 1px 0;
}
.home-search button:hover { background: var(--brand-red-dark); }

.home-results {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  top: calc(100% + .4rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 0 18px 40px rgba(6,23,49,.28);
  max-height: 22rem;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: .25rem;
}
.home-results[hidden] { display: none; }
.home-results li { margin: 0; }
.home-results a {
  display: grid;
  grid-template-columns: 4.6rem 1fr;
  gap: .75rem;
  align-items: baseline;
  padding: .6rem .7rem;
  border-radius: 2px;
  color: var(--ink);
}
.home-results a:hover,
.home-results a:focus,
.home-results li.is-active a {
  background: var(--bg-mid);
  outline: none;
}
.home-kind {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-red);
  border: 1px solid currentColor;
  border-radius: 2px;
  padding: .1rem 0;
  text-align: center;
}
.home-kind[data-k="company"] { color: var(--brand-blue); }
.home-kind[data-k="job"] { color: var(--ink-mute); }
.home-result-t { font-weight: 600; font-size: .96rem; display: block; }
.home-result-s { font-size: .8rem; color: var(--ink-soft); display: block; }
.home-results-none {
  padding: .9rem .8rem;
  font-size: .9rem;
  color: var(--ink-soft);
}

.home-search-hint {
  font-size: .82rem;
  color: rgba(255,255,255,.55);
  margin: .7rem 0 0;
}
.home-search-hint a { color: rgba(255,255,255,.8); text-decoration: underline; }

/* ---------- the figure strip ---------- */
.home-figures {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 2.75rem;
  border-top: 1px solid rgba(255,255,255,.14);
}
.home-figure {
  padding: 1.15rem 2rem 0 0;
  margin-right: 2rem;
  border-right: 1px solid rgba(255,255,255,.14);
}
.home-figure:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.home-figure b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.9rem;
  line-height: 1;
  color: #fff;
  letter-spacing: -.01em;
}
.home-figure span {
  display: block;
  margin-top: .3rem;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}

@media (max-width: 640px) {
  .home-hero { padding: 3rem 0 2.25rem; }
  .home-search button { padding: 0 1rem; font-size: .85rem; }
  .home-figures { margin-top: 1.9rem; }
  .home-figure { padding-right: 1.1rem; margin-right: 1.1rem; }
  .home-figure b { font-size: 1.45rem; }
  .home-results a { grid-template-columns: 3.8rem 1fr; }
}

/* The search has to be above the fold on a phone, and on a 375x812
   screen it was landing about twenty pixels below it. The topbar was
   eating 115 of those pixels to say something the nav already says, so
   it goes, and the hero tightens up. */
@media (max-width: 640px) {
  .topbar[data-directory-chrome] { display: none; }
  .home-hero { padding: 2rem 0 2rem; }
  .home-kicker { margin-bottom: .7rem; font-size: .68rem; }
  .home-hero h1 { font-size: clamp(1.9rem, 8.4vw, 2.4rem); margin-bottom: .75rem; }
  .home-sub { font-size: .98rem; margin-bottom: 1.35rem; }
  .home-search-label { margin-bottom: .4rem; }
}