/* ============================================================
   Kiwi Cleaning Company — /locations/ supplemental styles
   ============================================================

   Loaded AFTER /assets/css/style.css and deliberately additive.

   Everything here consumes the existing custom properties (--green,
   --ink, --canvas, --radius, --font-display …) rather than declaring new
   colours or type. That is what keeps these pages visually identical to
   the rest of the site: if the brand palette is retuned in style.css,
   these components follow automatically instead of drifting.

   Only genuinely new components are defined. Heroes, cards, chips,
   breadcrumbs, prose, sidebars, the FAQ accordion, the CTA band and the
   footer all reuse the site's existing classes untouched.
   ============================================================ */


/* ── Hero fact strip ─────────────────────────────────────────
   The scannable proof row under the H1: drive time, distance,
   ZIP count. Values are computed, never hard-coded. */

.loc-facts {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 34px;
    padding: 0;
    list-style: none;
}

.loc-facts li {
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.loc-fact-label {
    display: block;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1.3;
    text-transform: uppercase;
}

.loc-fact-value {
    display: block;
    margin-top: 6px;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.1;
}


/* ── "At a glance" definition list in the sidebar ───────────── */

.loc-meta {
    margin-top: 4px;
}

.loc-meta dt {
    margin-top: 14px;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.loc-meta dt:first-child {
    margin-top: 0;
}

.loc-meta dd {
    margin: 3px 0 0;
    color: var(--ink);
    font-size: .93rem;
    font-weight: 500;
    line-height: 1.5;
}


/* ── Distance-ranked nearby locations ────────────────────────
   Each card carries the real great-circle distance, which makes
   the link genuinely informative rather than decorative. */

.loc-nearby-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 0;
    list-style: none;
}

.loc-nearby-grid a {
    display: flex;
    height: 100%;
    flex-direction: column;
    gap: 6px;
    padding: 20px 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--paper);
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.loc-nearby-grid a:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 176, 82, .38);
    box-shadow: var(--shadow-sm);
}

.loc-nearby-name {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
}

.loc-nearby-grid a:hover .loc-nearby-name {
    color: var(--green-deep);
}

.loc-nearby-dist {
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.4;
}

.loc-nearby-all {
    margin-top: 26px;
    font-size: .92rem;
}


/* ── Region-grouped footer link columns ─────────────────────── */

.loc-footer-regions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    padding-block: 8px;
}

.loc-footer-region h3 {
    margin-bottom: 14px;
    font-size: .8rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}


/* ── Prose adjustments specific to these pages ───────────────
   The service list is an anchor list rather than plain text, so
   the shared .benefits rule needs a small link treatment. */

.prose ul.benefits li a {
    color: var(--ink);
    text-decoration: none;
}

.prose ul.benefits li a:hover {
    color: var(--green-text);
    text-decoration: underline;
}

/* The FAQ accordion normally sits in its own full-width section.
   Inside .prose it needs its top margin restored. */
.prose .faq {
    margin-top: 8px;
}


/* ── Responsive ──────────────────────────────────────────────
   Breakpoints chosen to match style.css so the location pages
   reflow at exactly the same widths as every other page. */

@media (max-width: 1080px) {
    .loc-nearby-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .loc-facts          { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .loc-footer-regions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
}

@media (max-width: 720px) {
    .loc-nearby-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .loc-facts li       { padding: 14px 16px; }
    .loc-fact-value     { font-size: 1.25rem; }
    .loc-nearby-grid    { grid-template-columns: 1fr; }
    .loc-footer-regions { grid-template-columns: 1fr; }
}


/* ── Print ───────────────────────────────────────────────────
   Location pages get printed and taken to site visits more than
   you would expect, so make that output usable. */

@media print {
    .loc-facts li,
    .loc-nearby-grid a {
        border-color: #ccc;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .loc-nearby-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ── Reduced motion ──────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .loc-nearby-grid a { transition: none; }
    .loc-nearby-grid a:hover { transform: none; }
}