/*
 * directory-engine: the Hearth theme stylesheet (Phase 10, PLAN.md Prompt 10).
 * Linked after site.css only for a niche that opts in (brand.theme "hearth" or any single layout
 * option), so a niche that sets none renders and downloads exactly what it did before. Nothing here
 * names a brand: every colour, font, radius and width is a token the layout writes into :root, and
 * the tokens below have defaults derived from the six Phase 9 colours with color-mix.
 *
 * Contents: tokens, focus, the announcement bar and light header with menus, the photo hero and
 * its finder, the proof strip, service tile variants, state cards, compact steps, the business
 * banner, the dark footer and the placeholder card picture.
 */

/* ---- tokens ------------------------------------------------------------------------------ */
:root {
  --accent-hover: color-mix(in srgb, var(--accent) 82%, #000);
  --body: var(--ink);
  --decor: var(--accent);
  --footer-bg: var(--ink);
  --footer-ink: var(--bg);
  --footer-muted: color-mix(in srgb, var(--footer-ink) 78%, var(--footer-bg));
  --footer-line: color-mix(in srgb, var(--footer-ink) 22%, var(--footer-bg));
}
.theme-hearth {
  color: var(--body);
}
.theme-hearth :where(h1, h2, h3, h4) {
  color: var(--ink);
}
.theme-hearth h1 {
  font-size: clamp(2rem, 4.4vw, 3rem);
}
.theme-hearth h2 {
  font-size: clamp(1.6rem, 3vw, 2.125rem);
}
.btn:hover {
  filter: none;
  background: var(--accent-hover);
}
a:focus-visible,
summary:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.foot-dark :focus-visible,
.stats-dark :focus-visible,
.proof-dark :focus-visible,
.biz-banner :focus-visible {
  outline-color: currentColor;
}

/* ---- announcement bar and light header --------------------------------------------------- */
.topbar {
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  padding: 8px 0;
}
.nav-light {
  position: relative;
  z-index: 40;
  background: var(--header-bg);
  border-bottom: 1px solid var(--line);
}
.nav-light .nav-in {
  min-height: 76px;
  gap: var(--s5);
}
.nav-light .logo-img {
  height: 48px;
}
.nav-light .logo-icon {
  display: none;
  height: 40px;
  width: auto;
}
@media (max-width: 480px) {
  .logo.has-icon .logo-img {
    display: none;
  }
  .logo.has-icon .logo-icon {
    display: block;
  }
}
.nav-light .nav-links {
  align-items: center;
  gap: var(--s5);
}
.nav-link,
.nav-drop summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 2px;
  border-bottom: 2px solid transparent;
  color: var(--header-ink);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}
.nav-drop summary::-webkit-details-marker {
  display: none;
}
.nav-link:hover,
.nav-link[aria-current],
.nav-drop summary:hover,
.nav-drop.on summary {
  border-color: var(--accent);
}
.nav-drop {
  position: relative;
}
.ico {
  width: 24px;
  height: 24px;
  flex: none;
}
.ico-chev {
  width: 16px;
  height: 16px;
  transition: transform 0.15s;
}
.nav-drop[open] .ico-chev {
  transform: rotate(180deg);
}
.drop-list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 240px;
  max-height: 70vh;
  overflow: auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--s2);
  z-index: 50;
}
.nav-light .drop-list a {
  display: block;
  padding: 8px 12px;
  border: 0;
  border-radius: calc(var(--radius) / 2);
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}
.nav-light .drop-list a:hover {
  background: var(--soft);
}
.nav-light .drop-list a.drop-all {
  margin-top: 4px;
  border-top: 1px solid var(--line);
  border-radius: 0 0 calc(var(--radius) / 2) calc(var(--radius) / 2);
  color: var(--accent);
  font-weight: 700;
}
@media (max-width: 860px) {
  .nav-light .nav-menu {
    padding-top: var(--s2);
  }
  .nav-light .nav-links {
    align-items: stretch;
    width: 100%;
  }
  .nav-drop summary {
    width: 100%;
    justify-content: space-between;
  }
  .drop-list {
    position: static;
    min-width: 0;
    max-height: none;
    box-shadow: none;
    border: 0;
    padding: 0 0 0 var(--s3);
  }
}

/* ---- full-width bands ---------------------------------------------------------------------
   The base sheet narrows every direct section of <main> to --max with side padding and centres it.
   The hearth bands run edge to edge (their inner .wrap holds the content width), so they step out
   of that rule the way .hero-band and .steps-band do. */
main > .hero-photo,
main > .proof,
main > .steps-compact {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
/* the business banner is a card inside the page gutters, as in the approved mockup */
main > .biz-banner {
  width: calc(100% - 2 * var(--s4));
  max-width: calc(var(--max) - 2 * var(--s4));
  padding: 0;
}

/* ---- photo hero and finder --------------------------------------------------------------- */
.hero-photo {
  position: relative;
  background: var(--soft);
  overflow: hidden;
}
.hero-photo-img {
  position: absolute;
  inset: 0 0 0 auto;
  width: 100%;
}
.hero-photo-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}
.hero-photo-fade .hero-photo-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    var(--soft) 0%,
    var(--soft) 48%,
    color-mix(in srgb, var(--soft) 55%, transparent) 62%,
    transparent 80%
  );
}
.hero-photo-split .hero-photo-img {
  width: 56%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28%);
  mask-image: linear-gradient(90deg, transparent 0, #000 28%);
}
.hero-photo-in {
  position: relative;
  z-index: 1;
  padding-top: var(--s8);
  padding-bottom: var(--s8);
}
.hero-photo-text {
  max-width: 580px;
}
.hero-photo-text h1 {
  margin-bottom: var(--s3);
}
.hero-photo-text .accent {
  color: var(--accent);
}
.hero-photo-sub {
  font-size: 1.1rem;
  max-width: 52ch;
  margin-bottom: var(--s5);
}
.finder {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 6px;
  margin-bottom: var(--s3);
}
.finder-field {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.finder-state {
  flex: 0 0 34%;
  border-right: 1px solid var(--line);
}
.finder-ico {
  position: absolute;
  left: 14px;
  width: 20px;
  height: 20px;
  color: var(--muted);
  pointer-events: none;
}
.finder select,
.finder input {
  width: 100%;
  height: 52px;
  border: 0;
  background: transparent;
  padding: 0 14px 0 44px;
  font: inherit;
  color: var(--ink);
  text-overflow: ellipsis;
}
.finder-go {
  flex: none;
  padding: 0 26px;
  border-radius: calc(var(--radius) - 2px);
}
/* on a wide screen the finder runs a little past the heading column so its placeholder is not cut */
@media (min-width: 861px) {
  .hero-photo-text .finder {
    width: 700px;
  }
}
.coverage {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}
.coverage-ico {
  width: 18px;
  height: 18px;
  color: var(--accent);
}
@media (max-width: 860px) {
  .hero-photo {
    display: flex;
    flex-direction: column;
  }
  .hero-photo-img,
  .hero-photo-split .hero-photo-img {
    position: static;
    order: 2;
    width: 100%;
    aspect-ratio: 16 / 9;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .hero-photo-fade .hero-photo-img::after {
    background: linear-gradient(180deg, var(--soft) 0%, transparent 35%);
  }
  .hero-photo-in {
    order: 1;
    padding-top: var(--s6);
    padding-bottom: var(--s5);
  }
  .finder {
    flex-direction: column;
  }
  .finder-state {
    flex: none;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .finder-go {
    height: 48px;
    margin-top: 6px;
  }
}

/* ---- proof strip ------------------------------------------------------------------------- */
.proof {
  border-bottom: 1px solid var(--line);
}
.proof-dark {
  background: var(--band);
  color: var(--band-ink);
  border-bottom: 0;
}
.proof-light {
  background: var(--bg);
}
.proof-in {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s4);
  padding-top: var(--s4);
  padding-bottom: var(--s4);
}
.proof-item {
  display: flex;
  align-items: center;
  gap: var(--s3);
}
.proof-ico {
  width: 30px;
  height: 30px;
  color: var(--decor);
}
.proof-value {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.1;
}
.proof-label {
  font-size: 0.9rem;
}
.proof-dark .proof-label {
  color: var(--band-muted);
}
.proof-light .proof-label {
  color: var(--muted);
}

/* ---- service tiles: caption and bar ------------------------------------------------------ */
.tile-caption .tile-media::after,
.tile-bar .tile-media::after {
  display: none;
}
.tile-caption .tile-media,
.tile-bar .tile-media {
  aspect-ratio: 5 / 3;
}
.tiles-caption,
.tiles-bar {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.tile-cap {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
}
.tile-cap .tile-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
}
.tile-cap .tile-count {
  white-space: nowrap;
  position: static;
  margin-left: auto;
  color: inherit;
  text-shadow: none;
  font-size: 0.85rem;
  font-weight: 500;
  opacity: 0.85;
}
.tile-arrow {
  width: 18px;
  height: 18px;
}
.tile-bar .tile-cap {
  background: var(--accent);
  color: var(--accent-ink);
}
.tile-bar .tile-cap .cat-icon {
  color: currentColor;
}
.tile-bar:hover .tile-cap {
  background: var(--accent-hover);
}
.tile-caption .tile-cap .cat-icon {
  color: var(--accent);
}

/* ---- state cards ------------------------------------------------------------------------- */
.state-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--s4);
  margin: var(--s4) 0;
}
.state-card {
  align-items: flex-start;
  gap: 2px;
  padding: var(--s4);
  background: var(--soft);
  border-radius: var(--radius);
}
.state-shape {
  width: 100%;
  height: 110px;
  margin-bottom: var(--s3);
}
.state-shape path {
  vector-effect: non-scaling-stroke;
}
.state-cards-filled .state-shape path {
  fill: var(--accent);
}
.state-cards-outline .state-shape path {
  fill: var(--bg);
  stroke: var(--accent);
  stroke-width: 2px;
}
.state-card .state-name {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
}
.state-card .state-count {
  color: var(--muted);
  font-size: 0.9rem;
}
.state-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--s2);
  color: var(--accent);
  font-weight: 600;
  font-size: 0.9rem;
}
.state-arrow {
  width: 16px;
  height: 16px;
}
a.state-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-soft);
}
.states-all {
  margin: 0;
}

/* ---- compact steps ----------------------------------------------------------------------- */
.steps-compact {
  background: var(--soft);
  padding: var(--s6) 0;
  margin: var(--s7) 0 0;
}
.steps-compact h2 {
  margin-top: 0;
  margin-bottom: var(--s4);
}
.steps-compact .steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s5);
}
.steps-compact .step {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
}
.steps-compact .step-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--accent);
}
.steps-compact .step h3 {
  color: var(--ink);
  margin: 0 0 var(--s1);
  font-size: 1.05rem;
}
.steps-compact .step p {
  color: var(--muted);
  margin: 0;
}
.steps-compact .step-n {
  width: 24px;
  height: 24px;
  margin-right: var(--s2);
  font-size: 0.8rem;
  vertical-align: 2px;
}

/* ---- business banner --------------------------------------------------------------------- */
.biz-banner {
  margin: var(--s6) auto;
  border-radius: var(--radius);
  overflow: hidden;
}
.biz-banner-accent {
  background: var(--accent);
  color: var(--accent-ink);
}
.biz-banner-dark {
  background: var(--band);
  color: var(--band-ink);
}
.biz-in {
  display: flex;
  align-items: center;
  gap: var(--s5);
  padding-top: var(--s6);
  padding-bottom: var(--s6);
}
.biz-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: 50%;
  border: 2px solid currentColor;
}
.biz-ico .ico {
  width: 30px;
  height: 30px;
}
.biz-text {
  flex: 1;
  min-width: 0;
}
.biz-banner h2 {
  margin: 0 0 var(--s1);
  color: inherit;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
}
.biz-banner p {
  margin: 0;
  max-width: 60ch;
}
.btn-invert {
  background: var(--bg);
  color: var(--accent);
}
.biz-banner-dark .btn-invert {
  color: var(--ink);
}
.btn-invert:hover {
  background: var(--soft);
  color: var(--ink);
}
.biz-img {
  flex: 0 0 320px;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 2 / 1;
}
.biz-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 860px) {
  .biz-in {
    flex-wrap: wrap;
  }
  .biz-img {
    flex: 1 1 100%;
  }
}
@media (max-width: 640px) {
  .biz-ico {
    width: 48px;
    height: 48px;
  }
  .biz-ico .ico {
    width: 24px;
    height: 24px;
  }
  .biz-in {
    gap: var(--s4);
  }
  .biz-text {
    flex: 1 1 calc(100% - 48px - var(--s4));
  }
  .biz-cta {
    flex: 1 1 100%;
    text-align: center;
  }
}

/* ---- dark footer ------------------------------------------------------------------------- */
footer.foot-dark {
  background: var(--footer-bg);
  color: var(--footer-ink);
  border-top: 0;
  margin-top: 0;
}
.foot-dark .foot {
  grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr;
}
.foot-dark .foot-brand,
.foot-dark .foot-mission p {
  color: var(--footer-ink);
}
.foot-dark .foot-mission p {
  color: var(--footer-muted);
}
.foot-dark .foot h4 {
  color: var(--footer-muted);
}
.foot-dark .foot a {
  color: var(--footer-ink);
}
.foot-dark .foot a:hover {
  text-decoration: underline;
  color: var(--footer-ink);
}
.foot-dark .legal {
  border-top-color: var(--footer-line);
  color: var(--footer-muted);
}
.foot-dark .legal a {
  color: var(--footer-ink);
}
.foot-dark .capture input[type='email'] {
  background: color-mix(in srgb, var(--footer-ink) 10%, var(--footer-bg));
  border: 1px solid var(--footer-line);
  color: var(--footer-ink);
}
@media (max-width: 1000px) {
  .foot-dark .foot {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .foot-dark .foot-mission {
    grid-column: 1 / -1;
  }
}
@media (max-width: 520px) {
  .foot-dark .foot {
    grid-template-columns: 1fr;
  }
}

/* ---- placeholder card picture ------------------------------------------------------------ */
.card-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--soft);
  color: var(--accent);
}
.card-ph .cat-icon {
  width: 44px;
  height: 44px;
}