/* ═══════════════════════════════════════════════════════════════════════════
   FLOATING CONTACT HUB (W-040) — fixed corner FAB + native-channel disclosure.

   A position:fixed FAB that expands into a stack/fan/radial of native contact
   links (tel:/sms:/wa.me/mailto:/maps). APG Disclosure, NOT a modal trap — it
   never scroll-locks the page. Layered by --hzo-contact-hub-z, a peer of
   --z-back-to-top (15): below every overlay / --z-toast (70) so cart toasts,
   tooltips and modal scrims render above it, and it is inerted by an overlay
   background lock rather than fighting it. All motion is transform/opacity with
   a --i stagger (no JS timers); killed under prefers-reduced-motion.

   Local component tokens (declared here, resolved from the shared ladder — never
   a bare z-index integer, never a hardcoded brand hex). Per-instance offsets +
   channel count arrive as inline data vars from the shortcode.
   ═══════════════════════════════════════════════════════════════════════════ */
.hzo-contact-hub {
    /* Layer peer of back-to-top (15), safely below --z-toast (70). */
    --hzo-contact-hub-z:        var(--z-back-to-top, 15);
    --hzo-contact-hub-offset-x: var(--space-lg);
    --hzo-contact-hub-offset-y: var(--space-lg);
    --hzo-contact-hub-fab:      56px;   /* toggle FAB (>=44 target)   */
    --hzo-contact-hub-target:   48px;   /* channel target (>=44)      */
    --hzo-contact-hub-gap:      var(--space-sm);
    --hzo-contact-hub-bg:       var(--brand);
    --hzo-contact-hub-fg:       var(--text-on-brand);
    --hzo-contact-hub-panel-bg: var(--surface, #fff);
    --hzo-contact-hub-panel-fg: var(--text-body);

    position: fixed;
    z-index: var(--hzo-contact-hub-z);
    display: flex;
    flex-direction: column-reverse;   /* toggle sits at the corner, panel above */
    align-items: flex-end;
    gap: var(--hzo-contact-hub-gap);
    /* Vertical safe-area padding so the FAB clears an iOS home indicator. */
    bottom: calc(var(--hzo-contact-hub-offset-y) + env(safe-area-inset-bottom, 0px));
    right: calc(var(--hzo-contact-hub-offset-x) + env(safe-area-inset-right, 0px));
}

/* ── Corners ──────────────────────────────────────────────────────────────── */
.hzo-contact-hub--bottom-left {
    right: auto;
    left: calc(var(--hzo-contact-hub-offset-x) + env(safe-area-inset-left, 0px));
    align-items: flex-start;
}
.hzo-contact-hub--top-right {
    bottom: auto;
    top: calc(var(--hzo-contact-hub-offset-y) + env(safe-area-inset-top, 0px));
    flex-direction: column;           /* panel opens downward */
}
.hzo-contact-hub--top-left {
    bottom: auto;
    right: auto;
    top: calc(var(--hzo-contact-hub-offset-y) + env(safe-area-inset-top, 0px));
    left: calc(var(--hzo-contact-hub-offset-x) + env(safe-area-inset-left, 0px));
    align-items: flex-start;
    flex-direction: column;
}

/* mobile-only: desktop keeps its header CTA. */
@media (min-width: 782px) {
    .hzo-contact-hub--mobile-only { display: none; }
}

/* ── Toggle FAB ───────────────────────────────────────────────────────────── */
.hzo-contact-hub__toggle {
    position: relative;
    flex: 0 0 auto;
    width: var(--hzo-contact-hub-fab);
    height: var(--hzo-contact-hub-fab);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: var(--border-1) solid transparent;   /* forced-colors visibility fallback */
    border-radius: var(--radius-pill);
    background: var(--hzo-contact-hub-bg);
    color: var(--hzo-contact-hub-fg);
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    transition: transform var(--dur-2) var(--ease-out),
                box-shadow var(--dur-2) var(--ease-standard),
                background var(--dur-2) var(--ease-standard);
}
.hzo-contact-hub__toggle:hover { box-shadow: var(--shadow-xl); transform: translateY(-2px); }
.hzo-contact-hub__toggle:active { transform: translateY(0); }
.hzo-contact-hub__toggle:focus-visible {
    outline: var(--border-2) solid var(--focus-ring);
    outline-offset: var(--border-2);
}
.hzo-contact-hub__toggle svg { width: 26px; height: 26px; display: block; }

/* Glyph swap: message/etc. when closed, X when open. */
.hzo-contact-hub__toggle-glyph {
    position: absolute;
    transition: opacity var(--dur-1) var(--ease-standard),
                transform var(--dur-2) var(--ease-out);
}
.hzo-contact-hub__toggle-glyph--close { opacity: 0; transform: rotate(-45deg); }
.hzo-contact-hub.is-open .hzo-contact-hub__toggle-glyph--open  { opacity: 0; transform: rotate(45deg); }
.hzo-contact-hub.is-open .hzo-contact-hub__toggle-glyph--close { opacity: 1; transform: rotate(0); }

/* Count / label bubble. */
.hzo-contact-hub__badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--text-on-accent);
    font-family: var(--font-body);
    font-size: var(--fs-50);
    font-weight: var(--fw-700);
    line-height: 1;
}

/* ── Panel (role=group) ───────────────────────────────────────────────────── */
.hzo-contact-hub__panel {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--hzo-contact-hub-gap);
}
.hzo-contact-hub--bottom-left .hzo-contact-hub__panel,
.hzo-contact-hub--top-left .hzo-contact-hub__panel { align-items: flex-start; }
.hzo-contact-hub__panel[hidden] { display: none; }

/* ── Channel links ────────────────────────────────────────────────────────── */
.hzo-contact-hub__channel {
    --hzo-contact-hub-channel-accent: var(--brand);
    min-height: var(--hzo-contact-hub-target);
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--hzo-contact-hub-panel-bg);
    color: var(--hzo-contact-hub-panel-fg);
    box-shadow: var(--shadow-md);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: var(--fs-100);
    font-weight: var(--fw-600);
    white-space: nowrap;
    /* Reveal choreography: staggered by --i (set inline per channel). */
    opacity: 0;
    transform: translateY(var(--space-sm));
    transition: opacity var(--dur-2) var(--ease-standard),
                transform var(--dur-3) var(--ease-out),
                border-color var(--dur-1) var(--ease-standard),
                box-shadow var(--dur-1) var(--ease-standard);
    transition-delay: calc(var(--i, 0) * 40ms);
}
/* Left-corner / downward reveals travel from the opposite side. */
.hzo-contact-hub--top-right .hzo-contact-hub__channel,
.hzo-contact-hub--top-left .hzo-contact-hub__channel { transform: translateY(calc(var(--space-sm) * -1)); }

.hzo-contact-hub.is-open .hzo-contact-hub__channel { opacity: 1; transform: none; }

.hzo-contact-hub__channel:hover {
    border-color: var(--hzo-contact-hub-channel-accent);
    box-shadow: var(--shadow-lg);
}
.hzo-contact-hub__channel:active { box-shadow: var(--shadow-md); }
.hzo-contact-hub__channel:focus-visible {
    outline: var(--border-2) solid var(--focus-ring);
    outline-offset: var(--border-2);
}
.hzo-contact-hub__channel[hidden] { display: none; }

.hzo-contact-hub__icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    color: var(--hzo-contact-hub-channel-accent);
}
.hzo-contact-hub__label { display: inline-block; }

/* Desktop tel: dead-path fallback — the selectable / copied number. */
.hzo-contact-hub__num {
    display: none;
    font-family: var(--font-body);
    font-size: var(--fs-75);
    font-weight: var(--fw-400);
    color: var(--text-muted);
    -webkit-user-select: all;
    user-select: all;
}
@media (hover: hover) and (pointer: fine) {
    .hzo-contact-hub__channel--call .hzo-contact-hub__num { display: inline-block; margin-inline-start: var(--space-sm); }
}

/* ── labels: hover / none — coarse pointer always shows text ──────────────── */
@media (hover: hover) and (pointer: fine) {
    .hzo-contact-hub--labels-hover .hzo-contact-hub__label {
        max-width: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-width var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-standard);
    }
    .hzo-contact-hub--labels-hover .hzo-contact-hub__channel:hover .hzo-contact-hub__label,
    .hzo-contact-hub--labels-hover .hzo-contact-hub__channel:focus-visible .hzo-contact-hub__label {
        max-width: 20ch;
        opacity: 1;
    }
}
/* labels=none — icon-only; the <a> keeps its aria-label (accessible name). */
.hzo-contact-hub--labels-none .hzo-contact-hub__channel {
    width: var(--hzo-contact-hub-target);
    padding: 0;
    justify-content: center;
}
.hzo-contact-hub--labels-none .hzo-contact-hub__label,
.hzo-contact-hub--labels-none .hzo-contact-hub__num { display: none; }

/* ── expand: fan / radial (progressive; base is a vertical stack) ──────────── */
.hzo-contact-hub--fan .hzo-contact-hub__channel { transform-origin: bottom right; }
.hzo-contact-hub--fan.is-open .hzo-contact-hub__channel { transform: none; }
.hzo-contact-hub--radial .hzo-contact-hub__panel { align-items: flex-end; }

/* ── after-scroll: hidden until the JS drops the flag ─────────────────────── */
.hzo-contact-hub--hidden-until-scroll { opacity: 0; visibility: hidden; pointer-events: none; }
.hzo-contact-hub--hidden-until-scroll.is-revealed {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--dur-3) var(--ease-standard);
}

/* ── Attention pulse (one-shot; JS adds .is-pulsing, removes on first open) ── */
@keyframes hzo-contact-hub-pulse {
    0%   { box-shadow: var(--shadow-lg), 0 0 0 0 color-mix(in srgb, var(--brand) 45%, transparent); }
    70%  { box-shadow: var(--shadow-lg), 0 0 0 16px color-mix(in srgb, var(--brand) 0%, transparent); }
    100% { box-shadow: var(--shadow-lg), 0 0 0 0 color-mix(in srgb, var(--brand) 0%, transparent); }
}
.hzo-contact-hub.is-pulsing .hzo-contact-hub__toggle {
    animation: hzo-contact-hub-pulse 1.8s var(--ease-out) 3;
}

/* ── Environment ──────────────────────────────────────────────────────────── */
@media print {
    .hzo-contact-hub { display: none !important; }
}

@media (forced-colors: active) {
    .hzo-contact-hub__toggle,
    .hzo-contact-hub__channel { border-color: ButtonText; }
    .hzo-contact-hub__toggle:focus-visible,
    .hzo-contact-hub__channel:focus-visible { outline-color: Highlight; }
    .hzo-contact-hub__icon { color: ButtonText; }
}

@media (prefers-reduced-motion: reduce) {
    .hzo-contact-hub__toggle,
    .hzo-contact-hub__toggle-glyph,
    .hzo-contact-hub__channel,
    .hzo-contact-hub__label { transition: none; }
    .hzo-contact-hub__channel { transition-delay: 0s; }
    .hzo-contact-hub.is-pulsing .hzo-contact-hub__toggle { animation: none; }
    /* Never leave revealed content at opacity:0 (G13/G60): open state is instant. */
    .hzo-contact-hub.is-open .hzo-contact-hub__channel { opacity: 1; transform: none; }
}