/* ═══════════════════════════════════════════════════
   JunkHive Pros — UX polish layer
   Loaded AFTER styles.css so it can refine it without editing the
   64KB base file. Everything here is a targeted fix or addition:
   nav crowding, announcement bar height on phones, hero quick-start
   card, sticky mobile CTA bar, focus/motion accessibility.
   ═══════════════════════════════════════════════════ */

/* ─── Navigation: stop link/phone text wrapping, demote the portal link ─── */
.nav-link, .nav-phone, .nav-portal, .nav-cta { white-space: nowrap; }
.nav-links { gap: 0; }
.nav-link { padding: 7px 10px; }
/* The contractor portal is for workers, not customers: keep it reachable but
   don't let it out-shout the customer "Get Free Estimate" button. */
.nav-portal {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  color: rgba(255,255,255,0.75) !important;
  font-weight: 600 !important;
  padding: 6px 12px !important;
}
.nav-portal:hover { background: rgba(255,255,255,0.08) !important; color: #fff !important; }
@media (max-width: 1280px) {
  .nav-wrap { gap: 10px; }
  .nav-link { font-size: 0.82rem; padding: 7px 8px; }
  .nav-actions { gap: 10px; }
}
@media (max-width: 1100px) {
  .nav-phone { display: none; }
}

/* ─── Announcement bar: one compact line on phones ─── */
@media (max-width: 640px) {
  .ann-bar { padding: 8px 44px 8px 12px; font-size: 0.78rem; }
  .ann-inner { gap: 4px 8px; }
  .ann-icon { display: none; }
  .ann-inner > span:nth-child(2) { flex: 1 1 100%; line-height: 1.35; }
}

/* ─── Hero quick-start card ─── */
.hc-quick-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  margin-bottom: 12px;
}
.hc-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.hc-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  min-height: 62px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  color: #fff;
  text-decoration: none;
  transition: var(--transition);
}
.hc-chip strong { font-size: 0.95rem; }
.hc-chip span { font-size: 0.76rem; color: rgba(255,255,255,0.6); }
.hc-chip:hover, .hc-chip:focus-visible {
  border-color: var(--green-500);
  background: rgba(34,197,94,0.14);
  transform: translateY(-1px);
}
/* Floating badges collided with card content; keep two, place them clear of it. */
.hc-float--2 { display: none; }
.hc-float--1 { top: -18px; right: 8px; }
.hc-float--3 { bottom: -18px; right: 24px; }
/* The scroll mouse sat on top of the card's button on phones/tablets. */
@media (max-width: 1024px) { .scroll-hint { display: none; } }

/* ─── Booking widget sits directly in the contact card (no card-in-card) ─── */
.contact-form-card .bw {
  border: 0;
  box-shadow: none;
  background: transparent;
  padding: 0;
  max-width: none;
}

/* ─── Sticky mobile CTA bar (injected by js/ux.js) ─── */
.jh-sticky {
  display: none;
}
@media (max-width: 768px) {
  .jh-sticky {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 900;
    display: flex;
    gap: 10px;
    /* right padding leaves room for the chat bubble in the bottom-right corner */
    padding: 10px 84px calc(10px + env(safe-area-inset-bottom)) 12px;
    background: rgba(11,32,24,0.96);
    border-top: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(12px);
    transform: translateY(0);
    transition: transform var(--transition);
  }
  .jh-sticky.jh-hidden { transform: translateY(110%); pointer-events: none; }
  .jh-sticky a {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    min-height: 46px;
    border-radius: var(--radius-sm);
    font-weight: 700; font-size: 0.92rem;
    text-decoration: none;
  }
  .jh-sticky .jh-call { background: #fff; color: var(--text-dark); }
  .jh-sticky .jh-book { background: linear-gradient(135deg, var(--green-700), var(--green-600)); color: #fff; }
  body.jh-has-sticky { padding-bottom: 72px; }
}

/* ─── Accessibility ─── */
:focus-visible {
  outline: 3px solid var(--amber-400);
  outline-offset: 2px;
}
.bw-input:focus-visible, .bw-select:focus-visible, .bw-textarea:focus-visible { outline-offset: 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── Headline: balance line breaks so "Any Load." isn't split across lines ─── */
.hero-h1, .section-h2 { text-wrap: balance; }
.hero-accent { display: inline-block; }