/* ─── Service-Area ZIP Checker (.hzo-zip-checker) ──────────────────────────────
   W-042 — an interactive "do you come to my town?" gate. Type a ZIP/town → an
   instant, fully client-side answer + per-region messaging, a nearest-branch
   card, a miss CTA. On a hit it reveals success content and passes the ZIP to
   the lead form. The town-list + areaServed schema are server-rendered (this
   sheet only styles the interactive shell).

   GATING: ALWAYS-LOAD (zip-checker.php un-gates itself) — it renders from a
   sticky/header CTA, a footer strip, or an ACF field the scan can't see.

   Tokens only: --brand/--accent families, --space-*, --radius-*, --shadow-*,
   --border-*, --dur-*/--ease-*, --z-* ladder (the suggest listbox rides
   --z-popover=60, below --z-toast=70). No hardcoded hex; px only for icon
   sizing / hairline borders, matching the input + button primitives. */

.hzo-zip-checker {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin: 0;
    max-width: 34rem;
    color: var(--text-body);
}

/* ── Field: label + controls + hint ──────────────────────────────────────── */
.hzo-zip-checker__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.hzo-zip-checker__label {
    font-size: var(--fs-100);
    font-weight: var(--fw-600);
    color: var(--text-heading);
}

.hzo-zip-checker__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--space-sm);
}

/* Input owns the flexible width; the combobox listbox anchors to this wrap. */
.hzo-zip-checker__inputwrap {
    position: relative;
    flex: 1 1 12rem;
    min-width: 0;
    display: block;
}

.hzo-zip-checker__input {
    width: 100%;
    box-sizing: border-box;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--fs-200);
    color: var(--text-body);
    background: var(--input-bg);
    border: var(--border-1) solid var(--input-border);
    border-radius: var(--radius-input);
    transition: border-color var(--dur-1) var(--ease-standard),
                box-shadow var(--dur-1) var(--ease-standard);
}
.hzo-zip-checker__input::placeholder { color: var(--color-placeholder); }

.hzo-zip-checker__input:focus-visible {
    outline: var(--border-2) solid var(--focus-ring);
    outline-offset: 2px;
    border-color: var(--brand);
}

/* Input-validation error (malformed / non-numeric when match=zip). The MISS
   answer is NOT an error — it never sets this state. */
.hzo-zip-checker__input.is-error,
.hzo-zip-checker__input[aria-invalid="true"] {
    border-color: var(--error);
}
.hzo-zip-checker__input.is-error:focus-visible,
.hzo-zip-checker__input[aria-invalid="true"]:focus-visible {
    outline-color: var(--error);
}

/* ── Buttons (submit + geolocate) — lean on the shared control tokens ────── */
.hzo-zip-checker__submit,
.hzo-zip-checker__geo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    /* ≥44×44 comfort target */
    min-height: 44px;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--fs-100);
    font-weight: var(--btn-weight);
    line-height: var(--lh-none);
    border-radius: var(--radius-input);
    border: var(--border-1) solid transparent;
    cursor: pointer;
    transition: background-color var(--dur-1) var(--ease-standard),
                border-color var(--dur-1) var(--ease-standard),
                color var(--dur-1) var(--ease-standard);
}

.hzo-zip-checker__submit {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}
.hzo-zip-checker__submit:hover { background: var(--accent-hover-on-light); }
.hzo-zip-checker__submit:active { transform: translateY(1px); }

.hzo-zip-checker__geo {
    background: transparent;
    color: var(--brand-text);
    border-color: var(--border);
}
.hzo-zip-checker__geo:hover {
    background: var(--brand-pale);
    border-color: var(--brand);
}
.hzo-zip-checker__geo:active { transform: translateY(1px); }

.hzo-zip-checker__submit:focus-visible,
.hzo-zip-checker__geo:focus-visible {
    outline: var(--border-2) solid var(--focus-ring);
    outline-offset: 2px;
}

.hzo-zip-checker__geo-icon { width: 18px; height: 18px; flex-shrink: 0; }

/* Loading (geolocate path ONLY — the check itself is synchronous, no spinner).
   The dot SLOWS under reduced-motion, never freezes (PRESERVE-5 / G13/G60). */
.hzo-zip-checker__geo.is-loading {
    color: var(--text-muted);
    cursor: progress;
}
.hzo-zip-checker__geo.is-loading .hzo-zip-checker__geo-icon {
    animation: hzo-zip-geo-pulse 1s var(--ease-in-out) infinite;
}
@keyframes hzo-zip-geo-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

/* ── Inline hint / input-validation message (aria-describedby target) ────── */
.hzo-zip-checker__hint {
    margin: 0;
    font-size: var(--fs-75);
    color: var(--text-muted);
}
.hzo-zip-checker__hint.is-error { color: var(--error-text); }

/* ── Result region (role=status). Hit = affirmative, miss = neutral info. ── */
.hzo-zip-checker__result {
    margin: 0;
    font-size: var(--fs-200);
    line-height: var(--lh-snug);
    min-height: 0;
}
.hzo-zip-checker__result:empty { display: none; }

.hzo-zip-checker__result-msg { display: inline; }

/* Non-color glyph carries the hit/miss meaning too (forced-colors safe). */
.hzo-zip-checker__result::before {
    speak: none;
}
.hzo-zip-checker__result.is-hit {
    color: var(--success-text);
    font-weight: var(--fw-600);
}
.hzo-zip-checker__result.is-hit::before {
    content: "\2713\00A0"; /* ✓ */
}
.hzo-zip-checker__result.is-miss {
    color: var(--text-body);
}
.hzo-zip-checker__result.is-miss::before {
    content: "\2139\00A0"; /* ℹ (info, not error) */
    color: var(--info);
}

/* The inline CTA rendered inside the result region (hit / miss action). */
.hzo-zip-checker__cta {
    display: inline-flex;
    align-items: center;
    margin-inline-start: var(--space-sm);
    padding: var(--space-xs) var(--space-smd);
    font-size: var(--fs-75);
    font-weight: var(--fw-600);
    color: var(--btn-primary-text);
    background: var(--btn-primary-bg);
    border-radius: var(--radius-input);
    text-decoration: none;
    cursor: pointer;
    border: var(--border-1) solid transparent;
    transition: background-color var(--dur-1) var(--ease-standard);
}
.hzo-zip-checker__cta:hover { background: var(--accent-hover-on-light); }
.hzo-zip-checker__cta:focus-visible {
    outline: var(--border-2) solid var(--focus-ring);
    outline-offset: 2px;
}

/* ── Reveal block (coupon / branch / booking) ─────────────────────────────── */
.hzo-zip-checker__reveal {
    padding: var(--space-md);
    background: var(--surface-2);
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm);
    animation: hzo-zip-reveal-in var(--dur-3) var(--ease-out);
}
.hzo-zip-checker__reveal[hidden] { display: none; }
.hzo-zip-checker__reveal:focus-visible {
    outline: var(--border-2) solid var(--focus-ring);
    outline-offset: 2px;
}
.hzo-zip-checker__reveal-title {
    margin: 0 0 var(--space-xs);
    font-size: var(--fs-300);
    font-weight: var(--fw-700);
    color: var(--text-heading);
}
.hzo-zip-checker__reveal-line { margin: 0 0 var(--space-xs); }
.hzo-zip-checker__reveal-line:last-child { margin-bottom: 0; }
.hzo-zip-checker__coupon-code {
    display: inline-block;
    padding: var(--space-xs) var(--space-smd);
    font-family: var(--font-number);
    font-size: var(--fs-400);
    letter-spacing: var(--tracking-wide);
    color: var(--brand-text);
    background: var(--brand-pale);
    border: var(--border-1) dashed var(--brand);
    border-radius: var(--radius-input);
}
.hzo-zip-checker__reveal-link {
    color: var(--brand-text);
    font-weight: var(--fw-600);
}

@keyframes hzo-zip-reveal-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* ── Suggest combobox listbox (APG) — rides --z-popover (below --z-toast) ── */
.hzo-zip-checker__listbox {
    position: absolute;
    z-index: var(--z-popover);
    top: calc(100% + var(--space-xs));
    left: 0;
    right: 0;
    max-height: 15rem;
    margin: 0;
    padding: var(--space-xs);
    list-style: none;
    overflow-y: auto;              /* internal scroll — never hijacks page scroll */
    overscroll-behavior: contain;
    background: var(--surface);
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-lg);
}
.hzo-zip-checker__listbox[hidden] { display: none; }

.hzo-zip-checker__option {
    display: block;
    padding: var(--space-sm) var(--space-smd);
    min-height: 44px;             /* finger-height option rows */
    box-sizing: border-box;
    border-radius: var(--radius-input);
    cursor: pointer;
    color: var(--text-body);
}
.hzo-zip-checker__option:hover,
.hzo-zip-checker__option.is-active,
.hzo-zip-checker__option[aria-selected="true"] {
    background: var(--brand-pale);
    color: var(--brand-text);
}
.hzo-zip-checker__option--empty {
    color: var(--text-muted);
    cursor: default;
}

/* ── Server-rendered town list (crawlable; visible with or without JS) ────── */
.hzo-zip-checker__towns {
    margin-top: var(--space-xs);
    font-size: var(--fs-100);
}
.hzo-zip-checker__towns-summary {
    margin: 0 0 var(--space-xs);
    font-weight: var(--fw-600);
    color: var(--text-heading);
    cursor: pointer;
}
details.hzo-zip-checker__towns > summary { list-style: revert; }
.hzo-zip-checker__town-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-md);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--text-muted);
}
.hzo-zip-checker__town { white-space: nowrap; }

/* ── Reduced motion (PRESERVE-5): stop reveal entrance + geo pulse with
   content visible; the answer text stays put. ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .hzo-zip-checker__reveal { animation: none; }
    .hzo-zip-checker__geo.is-loading .hzo-zip-checker__geo-icon { animation-duration: 2.4s; }
    .hzo-zip-checker__input,
    .hzo-zip-checker__submit,
    .hzo-zip-checker__geo,
    .hzo-zip-checker__cta { transition: none; }
    .hzo-zip-checker__submit:active,
    .hzo-zip-checker__geo:active { transform: none; }
}

/* ── Forced colors: hit/miss carry a non-color glyph + text; keep controls and
   the selected option legible under High Contrast. ───────────────────────── */
@media (forced-colors: active) {
    .hzo-zip-checker__input,
    .hzo-zip-checker__submit,
    .hzo-zip-checker__geo,
    .hzo-zip-checker__reveal,
    .hzo-zip-checker__listbox {
        border: 1px solid CanvasText;
    }
    .hzo-zip-checker__option.is-active,
    .hzo-zip-checker__option[aria-selected="true"] {
        background: Highlight;
        color: HighlightText;
    }
}

/* ── Print: server-rendered town-list + schema always print; hide the
   interactive geolocate/combobox chrome; the input prints as a plain field. ── */
@media print {
    .hzo-zip-checker__geo,
    .hzo-zip-checker__listbox { display: none !important; }
    .hzo-zip-checker__reveal[hidden] { display: none; }
}