/* ─── LocalBusiness NAP Block (.hzo-nap) ───────────────────────────────────
   The canonical NAP card. render="card" styles live here; render="footer"
   reuses the legacy .hzo-footer-nap rules (primitives.css / footer styling —
   untouched by this widget so the migration stays byte-identical), and
   render="schema-only" emits no DOM at all.

   Scoped to .hzo-nap*; every value pulls from a design token — no raw hex/px
   where a token exists. The optional open-now pill (.hzo-nap__status, driven by
   nap.js consuming hzo:hourschange) is additive over the server-rendered <dl>. */

.hzo-nap--card {
    display: block;
    font-style: normal; /* <address> defaults to italic */
    color: var(--text-body);
}

.hzo-nap__heading {
    margin: 0 0 var(--space-md);
    color: var(--text-heading, var(--text-body));
}

.hzo-nap__name {
    margin: 0 0 var(--space-sm);
    font-weight: var(--fw-bold, 700);
    color: var(--text-heading, var(--text-body));
}

.hzo-nap__row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    margin: 0 0 var(--space-sm);
    line-height: 1.5;
}

.hzo-nap__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 0.15em; /* optical align to the first text line */
    color: var(--accent-text, var(--brand));
}

/* Nav-link role: color + underline shift on hover/focus; focus-visible rings
   (WCAG 2.4.13). Never color-alone — the underline carries state for
   forced-colors / color-blind users. */
.hzo-nap__link {
    color: var(--text-link, var(--brand));
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color var(--dur-1, 150ms) var(--ease-standard, ease),
                border-color var(--dur-1, 150ms) var(--ease-standard, ease);
}
.hzo-nap__link:hover {
    color: var(--text-link-hover, var(--accent-text, var(--brand)));
    border-bottom-color: currentColor;
}
.hzo-nap__link:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--radius-xs, 2px);
}

/* ── Hours ── */
.hzo-nap__hours {
    margin-top: var(--space-md);
}
.hzo-nap__hours-heading {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin: 0 0 var(--space-xs);
    font-weight: var(--fw-medium, 500);
    color: var(--text-heading, var(--text-body));
}

/* Open-now pill — hidden until nap.js reveals it (progressive enhancement).
   Words ("Open now" / "Closed") carry the meaning; color is decorative. */
.hzo-nap__status {
    margin-left: auto;
    padding: 0.1em 0.6em;
    border-radius: var(--radius-full, 999px);
    font-size: 0.8em;
    font-weight: var(--fw-medium, 500);
    line-height: 1.6;
    transition: background-color var(--dur-1, 150ms) var(--ease-standard, ease),
                color var(--dur-1, 150ms) var(--ease-standard, ease);
}
.hzo-nap__status.is-open {
    background: var(--bg-success, rgba(22, 163, 74, 0.12));
    color: var(--text-success, #15803d);
}
.hzo-nap__status.is-closed {
    background: var(--bg-muted, rgba(0, 0, 0, 0.06));
    color: var(--text-muted, currentColor);
}

.hzo-nap .hzo-hours {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-2xs, 0.25rem) var(--space-lg);
    margin: 0;
}
.hzo-nap .hzo-hours dt {
    font-weight: var(--fw-medium, 500);
    color: var(--text-body);
}
.hzo-nap .hzo-hours dd {
    margin: 0;
    color: var(--text-muted, var(--text-body));
}
/* Today's row highlight — nap.js sets [aria-current] over the static <dl>. */
.hzo-nap .hzo-hours dt[aria-current="true"],
.hzo-nap .hzo-hours dt[aria-current="true"] + dd {
    color: var(--text-heading, var(--text-body));
    font-weight: var(--fw-bold, 700);
}

/* ── Service-area towns (native <details> disclosure) ── */
.hzo-nap__towns {
    margin-top: var(--space-md);
}
.hzo-nap__towns-summary {
    margin: 0 0 var(--space-xs);
    font-weight: var(--fw-medium, 500);
    cursor: pointer;
    color: var(--text-body);
}
.hzo-nap__towns-summary:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--radius-xs, 2px);
}
.hzo-nap__towns-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs, 0.25rem) var(--space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--text-muted, var(--text-body));
}
.hzo-nap__towns-list > li:not(:last-child)::after {
    content: "\00B7"; /* middot separator */
    margin-left: var(--space-sm);
    color: var(--text-muted, currentColor);
}

/* Forced-colors: box-shadow rings are unreliable; ensure a system outline. */
@media (forced-colors: active) {
    .hzo-nap__link:focus-visible,
    .hzo-nap__towns-summary:focus-visible {
        outline: 2px solid CanvasText;
    }
    .hzo-nap__status {
        border: 1px solid CanvasText;
    }
}

/* @media print — the NAP is what home-service customers print. Keep it fully
   visible, expand the town list, and never let a reveal hook hide it. */
@media print {
    .hzo-nap__towns[open] > .hzo-nap__towns-list,
    .hzo-nap__towns > .hzo-nap__towns-list {
        display: flex !important;
    }
    .hzo-nap.hzo-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Reduced motion — kill the pill/link transitions. */
@media (prefers-reduced-motion: reduce) {
    .hzo-nap__link,
    .hzo-nap__status {
        transition: none;
    }
}