. */
.area-faq dl, .service-faq dl, .home-faq dl, .county-faq dl { margin: 0; }
.area-faq dt, .service-faq dt, .home-faq dt, .county-faq dt {
font-weight: 600;
margin-top: 1.2rem;
}
.area-faq dt:first-child, .service-faq dt:first-child, .home-faq dt:first-child, .county-faq dt:first-child { margin-top: 0; }
.area-faq dd, .service-faq dd, .home-faq dd, .county-faq dd {
margin: 0.3rem 0 0;
color: #444;
}
/* Therapist bio — now rich-text HTML (paragraphs, bold/italic, lists),
sanitized server-side, see worker/src/lib/richText.js and DEVELOPMENT.md's
rich-text-editor section. Previously always exactly one plain-text ,
so this section had no need for list/emphasis styling until now. */
/* Rich-text sections — bio, area neighborhood context, and service
benefits/considerations all render sanitized HTML (paragraphs,
bold/italic, lists) from the same rich-text editor feature (see
worker/src/lib/richText.js and DEVELOPMENT.md's rich-text-editor
section). One shared class instead of repeating these five rules per
section — every rich-text container in components.js gets `rich-text`
alongside its own section-specific class. */
.rich-text p { margin: 0 0 1rem; line-height: 1.6; }
.rich-text p:last-child { margin-bottom: 0; }
.rich-text ul, .rich-text ol { margin: 0 0 1rem; padding-left: 1.4rem; line-height: 1.6; }
.rich-text li { margin: 0.2rem 0; }
.rich-text strong { font-weight: 700; }
.rich-text em { font-style: italic; }
/* Generic "jump to a section on this page" anchor link — currently just
the county page's "View by Area/Estate" link (scrolls to #areas), but
kept as its own reusable class rather than a one-off in case another
page adds a similar in-page jump link later. Outlined rather than
solid-filled, matching .link-chip's default (unselected) state — this
is a secondary, supporting action, not the page's primary CTA. */
.jump-link {
display: inline-block;
margin-top: 0.75rem;
padding: 0.5rem 1.1rem;
background: var(--color-secondary);
color: var(--color-primary-dark);
border: 1px solid var(--color-secondary-dark);
border-radius: 8px;
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
}
.jump-link:hover {
background: var(--color-primary);
color: white;
border-color: var(--color-primary);
}
/* Shared "chip grid" for link lists that can range from 1 item to 75+ —
county's areas, homepage's counties, an area's nearby-areas and
services-offered lists (see components.js's linkChipGridHtml()). Wraps
into as many rows/columns as the container width allows, rather than
the single-column stacked list these all rendered as before (with zero
CSS at all until now — see county-areas/area-services/nearby-areas'
git history). flex-wrap over a fixed-column CSS grid on purpose: chip
text length varies hugely (`CBD` vs `Mukuru Kwa Njenga`), so a rigid
column count would either clip long names or waste space on short
ones. */
.link-chip-grid {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
.link-chip {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.5rem 1rem;
background: var(--color-secondary);
color: var(--color-primary-dark);
border: 1px solid var(--color-secondary-dark);
border-radius: 8px;
text-decoration: none;
font-weight: 600;
font-size: 0.95rem;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.link-chip:hover {
background: var(--color-primary);
color: white;
border-color: var(--color-primary);
}
.link-chip:hover .link-chip__count { color: white; }
.link-chip__count {
font-size: 0.8rem;
font-weight: 400;
color: #888;
}
/* Therapist profile's "Services & Rates" list — distinct from
.link-chip-grid on purpose: each row carries a duration alongside the
link, which reads awkwardly packed into a pill button, so this stays a
list but picks up real styling (was plain browser-default
before,
like the chip-grid lists were). */
.therapist-services-list { list-style: none; margin: 0; padding: 0; }
.therapist-services-list li {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding: 0.75rem 0;
border-bottom: 1px solid var(--color-neutral-dark);
}
.therapist-services-list li:last-child { border-bottom: none; }
.therapist-services-list a {
color: var(--color-primary-dark);
font-weight: 600;
text-decoration: none;
}
.therapist-services-list a:hover { text-decoration: underline; }
.therapist-services-list__duration {
flex-shrink: 0;
font-size: 0.8rem;
color: #888;
background: var(--color-neutral-dark);
padding: 0.2rem 0.55rem;
border-radius: 999px;
}
/* Client reviews — therapist profile page. Star glyphs are plain text
characters (★/☆), not an icon font/SVG sprite, kept deliberately simple
since this is a directory listing, not a review platform in its own
right. */
.rating-summary { display: flex; align-items: center; gap: 0.5rem; margin: 0.5rem 0 1rem; }
.rating-summary__stars { color: #d9a441; font-size: 1.1rem; letter-spacing: 0.05em; }
.rating-summary__text { color: #444; font-size: 0.9rem; }
.review-card-list { display: flex; flex-direction: column; gap: 1rem; }
.review-card {
padding: 1rem;
background: var(--color-secondary);
border: 1px solid var(--color-secondary-dark);
border-radius: 8px;
}
.review-card__header { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; }
.review-card__stars { color: #d9a441; letter-spacing: 0.05em; }
.review-card__name { font-weight: 600; font-size: 0.9rem; }
.review-card__body { margin: 0; color: #444; line-height: 1.5; }
/* Stats bar — reuses the homepage's .home-stats visual pattern (flex row,
bold value over small label) for the same "key numbers" treatment on
area and county pages, via one shared component (statsBarHtml() in
components.js) instead of copy-pasting the homepage's markup. */
.stats-bar {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
padding: 1rem 0 0;
margin-top: 0.5rem;
}
.stats-bar__item { display: flex; flex-direction: column; }
.stats-bar__item strong { font-size: 1.4rem; color: var(--color-primary-dark); }
.stats-bar__item span { font-size: 0.8rem; color: #666; }
/* County page's longer "About {County}" section (counties.overview) —
same rich-text treatment as bio/neighborhood_context, just its own
section class for spacing. */
.county-overview { margin: 1.5rem 0; }
/* Region-grouped area links (groupedAreaLinksHtml()) — a labeled heading
per region above its own .link-chip-grid, for counties with enough
areas that one flat grid reads as a wall of links (Nairobi's 75). */
.county-areas__group { margin-bottom: 1.5rem; }
.county-areas__group:last-child { margin-bottom: 0; }
.county-areas__group h3 { font-size: 1rem; margin-bottom: 0.6rem; color: #444; }