/* ============================================================
   HowfenConnect — homepage v2: hero search, typeahead, carousels.

   Loaded AFTER hc-home.css and alongside hc-businesses-v2.css.
   Deliberately small: the hero's photograph, scrim, .wrap, .hero-inner,
   .eyebrow, .h1-look, .hero-stat and .sec-head all still come from
   hc-home.css, and every .card rule comes from hc-businesses-v2.css.
   ============================================================ */

.hero-v2 {
  --accent: #F2C14E;
  --accent-dark: #D8A422;
  --ink: #0F1424;
  --line: #E5E7EB;
}

/* ---------- the one search ---------- */
.hv2-search{position:relative;display:flex;align-items:center;gap:10px;
  max-width:720px;margin:0 auto;box-sizing:border-box;
  background:#fff;border-radius:999px;padding:9px 9px 9px 26px;
  box-shadow:0 22px 50px rgba(5,8,16,.42)}

.hv2-search-ico{width:24px;height:24px;flex:none;stroke:var(--accent-dark);fill:none}

.hv2-search input{flex:1;min-width:0;border:0;outline:0;background:none;
  font:inherit;font-size:1.18rem;font-weight:500;color:var(--ink);padding:0;
  text-align:left;-webkit-appearance:none;appearance:none}
.hv2-search input::placeholder{color:var(--ink);opacity:.55}
.hv2-search input::-webkit-search-decoration,
.hv2-search input::-webkit-search-cancel-button{-webkit-appearance:none}

.hv2-search button{flex:none;height:56px;padding:0 10px 0 30px;border:0;
  border-radius:999px;background:var(--accent);color:var(--ink);
  font:inherit;font-size:1.06rem;font-weight:800;cursor:pointer;
  display:inline-flex;align-items:center;gap:14px}
.hv2-search button i{width:44px;height:44px;flex:none;border-radius:999px;background:#fff;
  display:grid;place-items:center;font-style:normal}
.hv2-search button i svg{width:18px;height:18px;stroke:var(--ink);fill:none}

/* ---------- typeahead, sitting inside a centred hero ----------
   The hero centres its text, underlines its links and gives paragraphs a
   bottom margin. The dropdown is a list, not hero copy, so all three have to
   be undone here — otherwise the legends centre, every row underlines and the
   groups drift apart. The panel itself is styled in hc-shell-v2.css.

   overflow:visible up the whole chain matters: the hero and its inner boxes
   clip their contents, which was cutting the list off as soon as it had more
   than a couple of results. z-index puts it over the white curve that the
   hero draws below itself.

   This has to stay `visible` and not `clip`. The hero has rounded corners,
   and any non-visible overflow makes the box clip to that radius — which
   trimmed the photograph at all four corners and showed the dark behind it.
   The homepage's sideways scroll is NOT from here: it is the carousel, two
   pixels past the edge, handled further down. */
.hero-v2,
.hero-v2 .hero-body,
.hero-v2 .wrap,
.hero-v2 .hero-inner{overflow:visible!important}

/* ...and this is the bill for that override.

   In hc-home.css the hero is:
     .hero{border-radius:var(--frame-radius);overflow:hidden;
           background-image:url(...);background-size:cover}
     .hero::before{position:absolute;inset:0;z-index:-1;background:<dark>}

   The photograph is a BACKGROUND, and a background is clipped by the
   border-radius whatever overflow says — so the picture was always fine. The
   dark scrim over it is a separate absolutely positioned box with square
   corners, and the only thing that was ever rounding it was the hero's
   overflow:hidden. Take that away for the dropdown and the scrim's four
   square corners stick out past the rounded photograph: four dark wedges,
   one in each corner.

   border-radius:inherit gives the scrim the hero's own radius, so it is
   rounded in its own right and no longer depends on being clipped. */
.hero-v2::before{border-radius:inherit}

.hv2-search{z-index:60}

/* narrower than the search bar, and centred under it */
.hv2-search .hv-sug{left:50%;right:auto;transform:translateX(-50%);
  width:min(560px,100%);z-index:200}

.hv2-search .hv-sug{text-align:left}
.hv2-search .hv-sug p{margin:0;text-align:left}
.hv2-search .hv-sug a{text-decoration:none}
.hv2-search .hv-sug strong,
.hv2-search .hv-sug small{text-align:left;letter-spacing:normal}
.hv2-search .sug-legend{text-align:left}
.hv2-search .sug-item{text-align:left}

/* ---------- browse all categories ---------- */
.hv2-cats{margin-top:22px;display:inline-flex;align-items:center;gap:10px;
  font-size:1rem;font-weight:800;color:var(--accent);text-decoration:none}
.hv2-cats svg{width:15px;height:15px;flex:none;stroke:currentColor;fill:none}
.hv2-cats:hover{color:#fff}

/* ============================================================
   CAROUSELS
   ============================================================ */
/* overflow-x:clip, not hidden: `clip` does not make this a scroll container,
   so the strip inside keeps its own sideways scrolling, and it does not touch
   the vertical axis. Without it the strip lands about two pixels past the
   right edge — margin-right:calc(50% - 50vw) measures 100vw, which on a
   desktop browser includes the vertical scrollbar that 100% does not — and
   those two pixels are enough for a scrollbar along the bottom of the page. */
.hv2-listings{padding:64px 0 0;color:var(--ink);overflow-x:clip}
.hv2-listings:last-of-type{padding-bottom:16px}
.hv2-listings a{text-decoration:none}
.hv2-listings .sec-head{margin-bottom:28px}

/* Runs off the right-hand edge of the page, as the original did — the half
   card hanging past the margin is what tells you there is more to scroll.
   The negative margin takes the strip out to the viewport edge; the padding
   puts the breathing room back after the last card. */
.hv2-strip{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;
  margin-right:calc(50% - 50vw);padding:0 calc(50vw - 50%) 4px 0}
.hv2-strip::-webkit-scrollbar{display:none}

/* Sized against the viewport, not the container: the container is now wider
   than the page, so a percentage width would make the cards too big. ~4 across
   at desktop widths, with the next one showing. */
.hv2-strip > .card{flex:0 0 clamp(250px,22.4vw,318px);scroll-snap-align:start}

.hv2-ctrl{margin-top:22px;display:flex;align-items:center;justify-content:center;gap:18px}
.hv2-ctrl[hidden]{display:none}

.hv2-arrow{width:46px;height:46px;flex:none;border:1px solid var(--line);
  border-radius:999px;background:#fff;color:var(--ink);cursor:pointer;
  display:grid;place-items:center;transition:background .14s ease,border-color .14s ease}
.hv2-arrow svg{width:17px;height:17px;stroke:var(--ink);fill:none}
.hv2-arrow:hover:not(:disabled){background:var(--accent);border-color:var(--accent)}
.hv2-arrow:disabled{opacity:.3;cursor:default}

.hv2-dots{display:flex;align-items:center;gap:8px}
.hv2-dots button{width:9px;height:9px;padding:0;border:0;border-radius:999px;
  background:#D8D5CE;cursor:pointer;transition:width .18s ease,background .18s ease}
.hv2-dots button[aria-current="true"]{width:26px;background:var(--accent-dark)}

@media (max-width:1180px){
  .hv2-strip > .card{flex:0 0 clamp(240px,30vw,300px)}
}

@media (max-width:980px){
  .hv2-search{padding:8px 8px 8px 20px}
  .hv2-search input{font-size:1.05rem}
  .hv2-strip > .card{flex:0 0 clamp(230px,42vw,320px)}
}

@media (max-width:640px){
  .hv2-search{gap:8px;padding:7px 7px 7px 18px}
  .hv2-search-ico{width:20px;height:20px}
  .hv2-search input{font-size:1rem}
  /* the word comes out; the dark circle is the button, as on browse */
  .hv2-search button{height:44px;width:44px;padding:0;justify-content:center;
    gap:0;background:var(--ink)}
  .hv2-search-label{display:none}
  .hv2-search button i{width:auto;height:auto;background:none}
  .hv2-search button i svg{width:17px;height:17px;stroke:#fff}

  .hv2-cats{margin-top:18px;font-size:.95rem}

  .hv2-listings{padding-top:44px}

  /* one card at a time, still hanging off the right */
  .hv2-strip{gap:12px}
  .hv2-strip > .card{flex:0 0 min(78vw,320px)}
  .hv2-ctrl{margin-top:18px;gap:14px}
  .hv2-arrow{width:42px;height:42px}
}