/* theme.css - CaringAtlas "Ledger" design (Rome-selected, 2026-06-07). Data-forward, trustworthy,
   readable. Keeps the canonical Directory-Factory class names so all renderers work, restyled to the
   Ledger direction, plus senior-care classes (.safety, .pill, .statrow, .ranked-list, .attr, .pay).
   Brand colors come from var(--color-*) tokens; semantic data colors from --good/--mid/--bad (layout). */

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-ink);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; color: var(--color-ink); letter-spacing: -.01em; font-weight: 600; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 28px; }

/* header: clean paper with a bottom rule (not a solid block) */
.site-header { background: var(--paper, #fff); border-bottom: 1px solid var(--color-border); padding: 16px 0; }
.site-header .container { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 600; font-size: 1.32rem;
  color: var(--color-ink);
}
.brand:hover { text-decoration: none; }
.brand-mark { color: var(--color-primary); flex: none; }
.nav { margin-left: auto; display: flex; gap: 22px; flex-wrap: wrap; }
.nav a { color: var(--color-muted); font-size: 0.93rem; font-weight: 500; }
.nav a:hover { color: var(--color-primary); }

.crumbs { font-size: 0.84rem; color: var(--color-muted); margin: 22px 0 10px; }
.crumbs a { color: var(--color-muted); }

main.container { padding-bottom: 64px; }

/* cards + grids */
.card-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  margin: 18px 0;
}
.card {
  background: var(--paper, #fff);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 20px 22px;
  display: block;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.card:hover { border-color: var(--color-primary); box-shadow: 0 16px 40px -34px rgba(31,26,22,.55); text-decoration: none; }
.card h3 { margin: 0 0 4px; font-size: 1.08rem; }
.card .meta { color: var(--color-muted); font-size: 0.86rem; margin-top: 2px; }

/* hero (home) */
.lede-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: center; padding: 52px 0 44px; }
@media (max-width: 880px){ .lede-hero { grid-template-columns: 1fr; gap: 28px; } }
.lede-hero h1 { font-size: 3rem; line-height: 1.08; }
.lede-hero .lede { color: var(--color-muted); font-size: 1.12rem; max-width: 46ch; margin: 18px 0 0; }
.kick { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 600;
  color: var(--color-primary-dark); background: var(--color-accent-soft); padding: 6px 13px; border-radius: 999px; margin-bottom: 18px; }

/* credibility data panel (home + reused) */
.panel { background: var(--paper, #fff); border: 1px solid var(--color-border); border-radius: 18px; padding: 24px 26px;
  box-shadow: 0 30px 70px -55px rgba(31,26,22,.6); }
.panel .ph { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--color-muted); font-weight: 700; margin-bottom: 14px; }
.statrow { display: flex; justify-content: space-between; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--color-border); gap: 14px; }
.statrow:first-of-type { border-top: 0; }
.statrow .l { font-size: .92rem; color: var(--color-ink); }
.statrow .v { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; white-space: nowrap; }
.statrow .v.good { color: var(--good); } .statrow .v.mid { color: var(--mid); } .statrow .v.bad { color: var(--bad); }
.src { font-size: .74rem; color: var(--color-muted); margin-top: 12px; border-top: 1px dashed var(--color-border); padding-top: 11px; }

/* search */
.search-box { display: flex; gap: 0; margin: 22px 0; max-width: 540px; border: 1.5px solid var(--color-ink); border-radius: 12px; overflow: hidden; background: var(--paper,#fff); }
.search-box input { flex: 1; padding: 13px 15px; border: 0; font-size: 1rem; outline: none; background: transparent; color: var(--color-ink); }

/* section headings */
.sec-head { display: flex; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--color-border); padding-bottom: 12px; margin: 40px 0 22px; }
.sec-head h2 { font-size: 1.5rem; }
.sec-head .c { font-size: .82rem; color: var(--color-muted); margin-left: auto; }

/* badges + attribute chips */
.badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: .73rem; font-weight: 600; padding: 5px 12px; border-radius: 999px; }
.badge.v { color: var(--color-primary-dark); background: var(--color-accent-soft); }
.badge.v::before { content:""; width:6px; height:6px; border-radius:50%; background: var(--color-primary); }
.badge.ct { color: #4f5b48; background: #e8ede4; }
.attrs { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.attr { display: inline-flex; align-items: center; gap: 7px; font-size: .85rem; background: var(--paper,#fff); border: 1px solid var(--color-border); padding: 7px 12px; border-radius: 10px; }

/* data pills (safety signal on cards + lists) */
.pill { font-size: .76rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; display: inline-block; white-space: nowrap; }
.pill.g { color: var(--good); background: var(--good-s); }
.pill.m { color: var(--mid); background: var(--mid-s); }
.pill.b { color: var(--bad); background: var(--bad-s); }
.pill.n { color: var(--color-muted); background: #efeae2; }

/* ranked list (best-of + hub) */
.ranked-list { border: 1px solid var(--color-border); border-radius: 16px; overflow: hidden; background: var(--paper,#fff); margin: 8px 0; }
.ranked-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 16px; align-items: center; padding: 16px 20px; border-top: 1px solid var(--color-border); color: inherit; }
.ranked-row:first-child { border-top: 0; }
.ranked-row:hover { background: #faf7f1; text-decoration: none; }
.ranked-row .rank { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--color-muted); width: 20px; }
.ranked-row h3 { font-size: 1.02rem; margin: 0; }
.ranked-row .meta { font-size: .83rem; color: var(--color-muted); margin-top: 2px; }
.ranked-row .rev { font-size: .82rem; color: var(--color-muted); text-align: right; white-space: nowrap; }
.ranked-row .rev b { color: var(--color-ink); font-size: .98rem; }

/* profile */
.profile { background: var(--paper,#fff); border: 1px solid var(--color-border); border-radius: 18px; padding: 30px 32px; margin: 16px 0; box-shadow: 0 24px 60px -52px rgba(31,26,22,.5); }
.profile h1 { margin: 0 0 4px; font-size: 2rem; }
.profile .meta { color: var(--color-muted); }
.sec { background: var(--paper,#fff); border: 1px solid var(--color-border); border-radius: 18px; padding: 24px 26px; margin: 16px 0; }
.sec h2 { font-size: 1.18rem; margin: 0 0 4px; display: flex; align-items: center; gap: 9px; }
.sec .lead { color: var(--color-muted); font-size: .9rem; margin-bottom: 16px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px){ .grid2 { grid-template-columns: 1fr; } .lede-hero h1 { font-size: 2.3rem; } }

/* THE safety record panel (the differentiator) */
.safety { border: 1.5px solid var(--color-primary); box-shadow: 0 24px 60px -52px rgba(180,83,9,.55); }
.scols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
@media (max-width: 700px){ .scols { grid-template-columns: 1fr; } }
.srow { display: flex; gap: 12px; align-items: flex-start; padding: 13px 0; border-top: 1px solid var(--color-border); }
.srow .dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; flex: none; }
.srow .dot.g { background: var(--good); } .srow .dot.m { background: var(--mid); } .srow .dot.b { background: var(--bad); }
.srow .t { font-weight: 600; font-size: .94rem; }
.srow .d { color: var(--color-muted); font-size: .86rem; }
.prov { font-size: .71rem; color: var(--color-primary-dark); background: var(--color-accent-soft); padding: 2px 9px; border-radius: 999px; margin-top: 5px; display: inline-block; }
.unver { background: #f4f0e7; border: 1px solid var(--color-border); border-radius: 14px; padding: 13px 16px; margin-top: 16px; color: #6c5f4e; font-size: .88rem; }
.unver b { color: #4f4536; }

/* payment + chips */
.pays { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pay { font-size: .82rem; display: inline-flex; align-items: center; gap: 6px; background: var(--good-s); color: var(--good); padding: 6px 12px; border-radius: 999px; font-weight: 600; }
.pay.no { background: #efeae2; color: var(--color-muted); }
.pay::before { content:"✓"; font-weight: 700; }
.pay.no::before { content:"–"; }
.chipset .lbl { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--color-primary-dark); font-weight: 700; margin: 14px 0 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bchip { font-size: .85rem; background: var(--paper,#fff); border: 1px solid var(--color-border); padding: 6px 13px; border-radius: 999px; }
.cost { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid var(--color-border); }
.cost:first-of-type { border-top: 0; }
.cost .price { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--color-primary); white-space: nowrap; }
.cost .price small { font-weight: 400; font-size: .72rem; color: var(--color-muted); display: block; text-align: right; }
.dl { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.di .k { font-size: .73rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: .07em; }
.di .val { font-weight: 500; font-size: .92rem; }

/* AEO blocks */
.aeo-takeaways, .authority-sources { background: var(--color-accent-soft); border: 1px solid var(--color-border); border-radius: 16px; padding: 18px 20px; margin: 16px 0; }
.aeo-h { margin: 0 0 8px; font-size: 1rem; color: var(--color-primary-dark); }
.aeo-list { margin: 0; padding-left: 1.2em; } .aeo-list li { margin: 5px 0; }
.authority-sources ul { margin: 0; padding-left: 1.2em; }

/* CTA */
.cta { background: var(--color-primary); color: #fff; border-radius: 18px; padding: 28px 30px; margin: 24px 0; }
.cta h2, .cta h3 { color: #fff; margin-top: 0; }
.btn { display: inline-flex; align-items: center; gap: 8px; background: var(--color-primary); color: #fff; padding: 12px 22px; border-radius: 12px; font-weight: 600; border: none; cursor: pointer; }
.cta .btn { background: #fff; color: var(--color-primary-dark); }
.btn.ghost { background: var(--paper,#fff); color: var(--color-primary-dark); border: 1px solid var(--color-border); }
.btn:hover { text-decoration: none; opacity: .94; }

/* FAQ */
.faq { margin: 18px 0; } .faq h2 { font-size: 1.18rem; }
.faq-q { font-weight: 600; margin: 16px 0 4px; color: var(--color-ink); }
.faq-a { margin: 0; color: var(--color-muted); font-size: .93rem; }

/* footer (light on dark, contrast fixed per the friction note) */
.site-footer { background: #211c16; color: #d8cfc2; padding: 40px 0; margin-top: 56px; font-size: .87rem; }
.site-footer .brand { color: #fff; }
.site-footer a { color: #e8b67a; }
.disclaimer { color: #b7ab9c; font-size: .82rem; margin-top: 12px; max-width: 80ch; }

/* ---- photos, stars, maps (consumer visuals) ---- */
.card-photo { margin: -20px -22px 14px; height: 160px; overflow: hidden; border-radius: 14px 14px 0 0; background: #efe9df; }
.card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.stars { position: relative; display: inline-block; font-size: .9em; line-height: 1; letter-spacing: 1px; white-space: nowrap; vertical-align: -1px; }
.stars .off { color: #ddd5c7; }
.stars .on { position: absolute; left: 0; top: 0; overflow: hidden; color: #e0a317; white-space: nowrap; }

.profile-head.has-media { display: grid; grid-template-columns: 1.25fr .95fr; gap: 30px; align-items: start; }
.hero-media { min-width: 0; }
.hero-photo { border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; background: #efe9df; }
.hero-photo .lead { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.hero-thumbs .thumb { width: 100%; height: 56px; object-fit: cover; border-radius: 8px; display: block; }

.mapwrap { display: block; }
.map { width: 100%; border: 1px solid var(--color-border); border-radius: 12px; display: block; }
.maplink { display: inline-block; margin-top: 7px; font-size: .82rem; }
.visit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }

@media (max-width: 760px) {
  .profile-head.has-media { grid-template-columns: 1fr; }
  .profile-head.has-media .hero-media { order: -1; margin-bottom: 4px; }
  .visit-grid { grid-template-columns: 1fr; }
}

/* ---- inspection findings (actual CMS citations) ---- */
.cites { display: grid; gap: 2px; margin: 6px 0 4px; }
.cite { display: grid; grid-template-columns: 14px 1fr; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--color-border); }
.cite:last-child { border-bottom: 0; }
.cite .dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; }
.cite .dot.n { background: #c7bfb0; }
.cite .t { font-weight: 600; font-size: .96rem; }
.cite .d { color: var(--color-muted); font-size: .86rem; margin-top: 2px; }
.cite .cited-desc { font-size: .86rem; margin-top: 5px; color: var(--color-ink); opacity: .82; }
.tagch { display: inline-block; font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--bad); background: var(--bad-s); padding: 1px 7px; border-radius: 999px; vertical-align: 1px; margin-left: 4px; }

/* ---- cost benchmark (sourced area median) ---- */
.benchmark { font-size: .9rem; color: var(--color-ink); background: var(--mid-s); border-left: 3px solid var(--mid); padding: 11px 14px; border-radius: 0 8px 8px 0; margin: 14px 0; }
.benchmark a { color: var(--color-primary-dark, var(--color-primary)); }