/*
    Styles for the two things the reference theme genuinely never had: the
    contact panel and long-form prose pages.

    Everything else now uses the theme's own components -- breadcrumbs, the
    city-context grid, blog cards, city lists, zip chips -- so this sheet stayed
    small on purpose. If a rule here duplicates something in style.css, the right
    fix is to use the theme's markup instead of adding a rule.
*/

/* ── Static page header ──────────────────────────────────── */

/* The theme leaves 35px under this header because nothing used to follow it.
   Our breadcrumb does, and the gap read as a hole between the two bars. */
.static-page-header {
    margin-bottom: 0;
}

/* ── Contact section map ─────────────────────────────────── */

/* The theme styles .contact-card and .map-card but never gave .map-container a
   height, so the map column collapsed around the iframe instead of matching the
   card beside it. */
.contact-section .map-card {
    padding: 0;
    overflow: hidden;
    height: 100%;
}

.contact-section .map-card iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 320px;
    border: 0;
}

/* ── Prose and blog posts ────────────────────────────────── */

.prose-section .container,
.blog-post-section .container {
    max-width: 780px;
}

.prose-section p,
.blog-post-section p {
    margin-bottom: 20px;
    line-height: 1.8;
}

.post-meta {
    color: #7b8991;
    font-size: 15px;
    margin-bottom: 24px;
}

/* ── Why-choose bullets ──────────────────────────────────── */

/* The reference theme ships this section but never styled its list, so the
   bullets fell back to browser defaults. A tick reads better than a disc for
   a list of reasons to hire someone. */
.why-choose-list {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.why-choose-list li {
    position: relative;
    padding-left: 30px;
    line-height: 1.6;
}

.why-choose-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #12a8cc;
    font-weight: 700;
}

/* ── Long location lists ─────────────────────────────────── */

/* Thirty items in two columns is a very tall list on a wide screen. The theme
   stops at two, so widen it only where there is genuinely room. */
@media (min-width: 1100px) {
    .city-list.neighborhood-list,
    .city-list.nearby-list {
        grid-template-columns: repeat(3, 1fr);
    }
}