/* ─── CTA Reassurance Strip (.hzo-reassure) ────────────────────────────────
   W-043 — a tiny icon+text microcopy strip pinned under a CTA button/form
   ("No spam · Free estimate · Licensed & insured") that answers last-second
   hesitation WITHOUT competing with the CTA. Purely visual: no schema, and the
   default strip has zero runtime JS.

   GATING: this component is GATE-ELIGIBLE (load-on-demand). reassure.php
   self-registers its EXCLUSIVE marker (`hzo-reassure` OR the `[hzo_reassure`
   shortcode tag) via the hzostudio_component_markers filter, so this ~0.5 KB
   sheet only enqueues on pages that actually carry the strip.

   Tokens only: --fs-* (size), --space-* (rhythm), --text-muted / --accent-text
   (quiet ink), --dur-* / --ease-* (link transition). No hardcoded hex, no bare
   z-index (the strip claims none), icon size is em-relative so it scales with
   the sm/md text step. */

.hzo-reassure {
    /* container so the inline layout can auto-collapse to a stack on a narrow
       parent via @container below — no JS. */
    container-type: inline-size;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hzo-reassure-row-gap, var(--space-sm)) var(--hzo-reassure-gap, var(--space-md));
    margin: 0;
    padding: 0;
    list-style: none;

    color: var(--text-muted);
    font-size: var(--hzo-reassure-fs, var(--fs-100));   /* sm default (14px) */
    line-height: var(--lh-snug);
}

/* ── Size steps (microcopy scale) ─────────────────────────────────────────── */
.hzo-reassure--sm { --hzo-reassure-fs: var(--fs-100); } /* 14px */
.hzo-reassure--md { --hzo-reassure-fs: var(--fs-200); } /* 16px */

/* ── Layout ───────────────────────────────────────────────────────────────
   inline & wrap share the row model (inline degrades by wrapping); stacked is
   a vertical list. */
.hzo-reassure--stacked {
    flex-direction: column;
    align-items: flex-start;
    row-gap: var(--hzo-reassure-row-gap, var(--space-sm));
}

/* ── Alignment (inherit = the flex-start default below) ───────────────────── */
.hzo-reassure { justify-content: flex-start; }
.hzo-reassure--align-center { justify-content: center; }
.hzo-reassure--align-start  { justify-content: flex-start; }
.hzo-reassure--align-center.hzo-reassure--stacked { align-items: center; }
.hzo-reassure--align-start.hzo-reassure--stacked  { align-items: flex-start; }

/* ── Item ─────────────────────────────────────────────────────────────────── */
.hzo-reassure__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    /* ≥24×24 comfort target for link items without disturbing text baseline */
    min-height: 1.5em;
}

/* The icon+text pair; link items wrap the same pair in a native <a>. */
.hzo-reassure__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    color: inherit;
    text-decoration: none;
    transition: color var(--dur-1) var(--ease-standard);
}
.hzo-reassure__link:hover { color: var(--accent-text); }
.hzo-reassure__link:hover .hzo-reassure__text { text-decoration: underline; }
/* Native :focus-visible ring on link items (its own resting/tap state). */
.hzo-reassure__link:focus-visible {
    outline: var(--border-2) solid var(--focus-ring);
    outline-offset: var(--space-xs);
    border-radius: var(--radius-1);
}

.hzo-reassure__icon {
    width: var(--hzo-reassure-icon-size, 1.15em);
    height: var(--hzo-reassure-icon-size, 1.15em);
    flex-shrink: 0;
    color: var(--accent-text);
}

/* ── Separators — CSS ::before between inline/wrap items (aria-hidden;
   the parser never emits a text node). Suppressed for stacked + sep=none. ── */
.hzo-reassure--inline .hzo-reassure__item + .hzo-reassure__item::before,
.hzo-reassure--wrap   .hzo-reassure__item + .hzo-reassure__item::before {
    content: var(--hzo-reassure-sep, "\00B7"); /* · middle dot */
    margin-inline-end: var(--space-xs);
    color: var(--border);
    speak: none;
}
.hzo-reassure--sep-dot   { --hzo-reassure-sep: "\00B7"; } /* ·  */
.hzo-reassure--sep-pipe  { --hzo-reassure-sep: "\007C"; } /* |  */
.hzo-reassure--sep-slash { --hzo-reassure-sep: "\002F"; } /* /  */
.hzo-reassure--sep-none .hzo-reassure__item::before { content: none; }

/* ── Auto inline→stacked collapse on a narrow container (no JS) ───────────────
   When the strip's own inline size is tight, inline/wrap items go full-width so
   they stack, and the separators drop (leading dots on wrapped lines are wrong).
   Container-query keyed to the <ul>; applies to its item descendants. */
@container (max-width: 24rem) {
    .hzo-reassure--inline .hzo-reassure__item,
    .hzo-reassure--wrap   .hzo-reassure__item {
        flex: 1 0 100%;
    }
    .hzo-reassure--inline .hzo-reassure__item::before,
    .hzo-reassure--wrap   .hzo-reassure__item::before {
        content: none;
    }
}

/* ── Hours-aware swap (reassure.js toggles .is-after-hours + swaps text).
   The swap is a synchronous textContent change; the only motion is an optional
   tint transition, killed under reduced-motion below. ── */
.hzo-reassure .hzo-reassure__text {
    transition: color var(--dur-1) var(--ease-standard);
}
.hzo-reassure.is-after-hours .hzo-reassure__item[data-hzo-reassure-after] .hzo-reassure__icon {
    color: var(--text-muted); /* after-hours items read quieter than open ones */
}

/* ── Reduced motion — kill the tint transitions (content stays visible;
   PRESERVE-5). The reveal hook, when used, is owned/killed by main.js. ── */
@media (prefers-reduced-motion: reduce) {
    .hzo-reassure__link,
    .hzo-reassure .hzo-reassure__text {
        transition: none;
    }
}

/* ── Forced colors — icons/separators use currentColor; state is carried by the
   swapped TEXT, never color alone. Give link items a visible underline so the
   affordance survives High Contrast. ── */
@media (forced-colors: active) {
    .hzo-reassure__link { text-decoration: underline; }
}