/* ============================================================
   HowfenConnect — shell v2: header, mega menus, typeahead, bottom bar.
   Loaded only by layouts/app-v2.blade.php.

   THE BUG THIS VERSION FIXES
   --------------------------
   v1 had no inner wrapper on the header bar and nothing pushing the
   right-hand group right, so on a wide screen the logo / search / nav /
   button all crowded the left edge with dead space after them, and the
   menu panel ran the full width of the viewport. Everything now sits in
   .hv-in / .hv-menu-in, capped at --wrap and centred.
   ============================================================ */

/* The palette is declared here as well as in the page stylesheets, so the
   shell is self-sufficient on any v2 page — including one that loads no
   page CSS of its own. Same values, so nothing shifts where both apply.

   --hdr and --bar are redeclared because the profile page's sticky nav
   measures itself against them and must match THIS header's real heights. */
body.hc-v2{
  --accent:#F2C14E;
  --accent-dark:#D8A422;
  --ink:#0F1424;
  --line:#E5E7EB;
  --wrap:1320px;
  --hdr:86px;
  --bar:40px;
  /* derived, not hardcoded — the header partial sets --bar:0 when there is no
     live announcement, and the offset follows on its own. */
  padding-top:calc(var(--hdr) + var(--bar));
}

/* ============================================================
   HEADER
   ============================================================ */
/* Slides out of the way on scroll down, back in on scroll up (hc-shell-v2.js
   puts .hv-up on the body).

   Animating `top`, NOT `transform`: a transform on .hv would make it the
   containing block for every position:fixed descendant, and the menu scrim is
   fixed. It would then size itself against the 126px header instead of the
   window and stop covering the page. */
.hv{position:fixed;top:0;left:0;right:0;z-index:100;transition:top .26s ease}
body.hc-v2.hv-up .hv{top:calc(-1 * (var(--hdr) + var(--bar)))}
@media (prefers-reduced-motion:reduce){.hv{transition:none}}

.hv a{text-decoration:none}

.hv-strip{position:relative;z-index:2;height:var(--bar,40px);background:var(--accent,#F2C14E);
  color:var(--ink,#0F1424);display:flex;align-items:center;justify-content:center;
  font-size:.88rem;font-weight:700;padding:0 16px;overflow:hidden}
/* one message at a time; hc-shell-v2.js rotates them if there are several */
.hv-strip-msg{display:none;margin:0;align-items:center;gap:10px;text-align:center}
.hv-strip-msg.on{display:flex}
.hv-strip a{color:var(--ink,#0F1424);font-weight:800;border-bottom:1px solid rgba(15,20,36,.4)}
.hv-strip a:hover{border-bottom-color:var(--ink,#0F1424)}

/* No bottom border and no shadow on scroll — nothing under the bar. */
.hv-bar{position:relative;z-index:2;height:86px;background:#fff}

/* Width, max-width, margin and side padding all come from the site's .wrap
   class in hc-theme.css — deliberately NOT restated here, so the header can
   never drift out of line with the page container. Only layout is set here.
   position:relative makes this the containing block for the menu panels. */
.hv-in{position:relative;height:100%;display:flex;align-items:center;gap:24px}

.hv-logo{flex:none;display:flex;align-items:center;gap:8px;
  font-size:1.38rem;font-weight:800;letter-spacing:-.04em;color:var(--ink,#0F1424)}
.hv-logo svg{width:20px;height:20px;flex:none;color:var(--accent,#F2C14E)}
.hv-logo b{font-weight:800;color:var(--accent-dark,#D8A422)}

/* ---------- search pill (same pill as the browse page) ---------- */
.hv-search{position:relative;flex:1 1 0;max-width:430px;min-width:0;height:52px;
  box-sizing:border-box;border:1px solid var(--line,#E5E7EB);border-radius:999px;
  background:#FBFAF8;padding:0 7px 0 20px;display:flex;align-items:center;gap:12px}
.hv-search-ico{width:19px;height:19px;flex:none;color:var(--accent-dark,#D8A422)}
.hv-search input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;
  font-size:.97rem;color:var(--ink,#0F1424);-webkit-appearance:none;appearance:none}
.hv-search input::placeholder{color:var(--ink,#0F1424);opacity:1}
.hv-search input::-webkit-search-decoration,
.hv-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.hv-search:focus-within{border-color:var(--accent-dark,#D8A422);background:#fff}
.hv-search button{width:38px;height:38px;flex:none;border:0;border-radius:999px;
  background:var(--ink,#0F1424);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0}
.hv-search button svg{width:16px;height:16px;stroke:#fff;fill:none}

/* ---------- nav ---------- */
.hv-nav{flex:none;margin-left:auto;display:flex;align-items:center;gap:22px;
  font-size:.97rem;font-weight:600}
.hv-link{color:var(--ink,#0F1424)}
.hv-link:hover{color:var(--accent-dark,#D8A422)}

.hv-r{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

.hv-mbtn{display:inline-flex;align-items:center;gap:7px;font-weight:700;
  color:var(--ink,#0F1424);cursor:pointer;user-select:none;white-space:nowrap}
.hv-mbtn svg{width:13px;height:13px;flex:none;transition:transform .15s ease}
.hv-mbtn:hover{color:var(--accent-dark,#D8A422)}
#hvm-cats:checked ~ .hv-mbtn[for="hvm-cats"],
#hvm-areas:checked ~ .hv-mbtn[for="hvm-areas"]{color:var(--accent-dark,#D8A422);font-weight:800}
#hvm-cats:checked ~ .hv-mbtn[for="hvm-cats"] svg,
#hvm-areas:checked ~ .hv-mbtn[for="hvm-areas"] svg{transform:rotate(180deg)}

/* Closes either menu. It starts BELOW the header on purpose: the scrim lives
   inside .hv-bar's stacking context, so a full-viewport inset:0 would paint
   over the header's own buttons and swallow the click that closes the menu. */
.hv-scrim{display:none}
#hvm-cats:checked ~ .hv-scrim,
#hvm-areas:checked ~ .hv-scrim{display:block;position:fixed;z-index:0;cursor:default;
  left:0;right:0;bottom:0;top:calc(var(--hdr,86px) + var(--bar,40px))}

/* ---------- mega menus ----------
   Both panels are one fixed width, so Categories and Areas are the same size
   whichever you open. They hang from the right edge of .hv-in, lining up with
   the Add-your-business button. */
.hv-menu{display:none}
/* left:0 / right:0 against .hv-in means the panel is exactly as wide as the
   page container, whatever .wrap sets it to — no fixed width to keep in sync.
   Both panels therefore match each other automatically. */
#hvm-cats:checked ~ .hv-menu-cats,
#hvm-areas:checked ~ .hv-menu-areas{display:block;position:absolute;
  top:calc(100% + 6px);left:0;right:0;z-index:1;box-sizing:border-box;
  background:#fff;border:1px solid var(--line,#E5E7EB);border-radius:20px}

.hv-menu-in{padding:20px 22px 22px;box-sizing:border-box}
.hv-legend{margin:0 0 12px;font-size:.72rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink,#0F1424)}

.hv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 20px}
/* Count sits next to the name, not at the far edge of the column — across a
   330px column, space-between reads like a price list rather than a menu. */
.hv-grid a{display:flex;align-items:center;justify-content:flex-start;gap:9px;
  padding:9px 10px 9px 0;border-radius:10px;
  font-size:.94rem;font-weight:600;color:var(--ink,#0F1424)}
.hv-grid a span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hv-grid a b{flex:none;font-weight:800;color:var(--accent-dark,#D8A422)}
/* text colour only on hover — the amber wash made the grid look checkered */
.hv-grid a:hover{color:var(--accent-dark,#D8A422)}

/* no divider rule — the spacing separates it well enough */
.hv-menu-foot{margin-top:14px;padding-top:8px;display:flex;align-items:center;
  gap:26px;flex-wrap:wrap}
.hv-more{display:inline-flex;align-items:center;gap:9px;font-size:.94rem;font-weight:800;
  color:var(--accent-dark,#D8A422)}
.hv-more svg{width:14px;height:14px;flex:none;stroke:currentColor;fill:none}
.hv-more:hover{color:var(--ink,#0F1424)}

/* ---------- CTA ---------- */
.hv-cta{flex:none;height:52px;padding:0 7px 0 22px;border-radius:999px;
  background:var(--accent,#F2C14E);color:var(--ink,#0F1424);font-size:.97rem;font-weight:700;
  display:inline-flex;align-items:center;gap:13px;white-space:nowrap}
.hv-cta i{width:38px;height:38px;flex:none;border-radius:999px;background:#fff;
  display:grid;place-items:center;font-style:normal}
.hv-cta i svg{width:16px;height:16px;stroke:var(--ink,#0F1424);fill:none}
/* no hover colour change — the darker amber was muddy against the strip */

@media (max-width:1280px){
  .hv-in{gap:16px}
  .hv-search{max-width:280px}
  .hv-nav{gap:16px}
}
@media (max-width:1080px){
  .hv-search{display:none}
  .hv-nav{gap:20px}
}

/* ============================================================
   TYPEAHEAD — built by hc-shell-v2.js inside any [data-sug] box,
   so the same panel serves the header pill and the browse pill.
   ============================================================ */
[data-sug]{position:relative}

.hv-sug{position:absolute;z-index:140;left:0;right:0;top:calc(100% + 10px);
  background:#fff;border:1px solid var(--line,#E5E7EB);border-radius:18px;
  box-shadow:0 20px 44px rgba(15,20,36,.18);overflow:hidden;
  max-height:min(60vh,380px);overflow-y:auto;-webkit-overflow-scrolling:touch}
.hv-sug[hidden]{display:none}

.sug-legend{margin:0;padding:11px 18px 4px;font-size:.7rem;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;color:var(--accent-dark,#D8A422)}
.sug-item{display:flex;align-items:center;gap:12px;padding:7px 18px;
  color:var(--ink,#0F1424);cursor:pointer}
.sug-item:hover,.sug-item.is-cur{background:#FDF6E4}
.sug-txt{min-width:0;display:flex;flex-direction:column;gap:1px}
.sug-txt strong{font-size:.97rem;font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
/* no opacity — it reads as grey. The size and weight separate it enough. */
.sug-txt small{font-size:.8rem;font-weight:500;color:var(--ink,#0F1424)}
.sug-txt mark{background:none;color:var(--accent-dark,#D8A422);font-weight:700}
.sug-count{margin-left:auto;flex:none;font-size:.88rem;font-weight:700;
  color:var(--accent-dark,#D8A422)}
.sug-none{margin:0;padding:18px 16px;font-size:.93rem;font-weight:500;color:var(--ink,#0F1424)}
.sug-all{display:flex;align-items:center;justify-content:center;gap:9px;padding:14px 13px 15px;
  font-size:.9rem;font-weight:700;color:var(--accent-dark,#D8A422);cursor:pointer}
.sug-all svg{width:14px;height:14px;flex:none;stroke:currentColor;fill:none}
.sug-all:hover{background:#FDF6E4}

/* ============================================================
   HEADER on a phone.
   Nav and search both come out: the bottom bar carries navigation and
   Browse carries search. Keeping either would push the header to two
   rows and cost ~70px of screen on every page. The CTA keeps its full
   label and white circle, as asked.
   ============================================================ */
@media (max-width:820px){
  /* a touch more room on both: 38/56 was tight enough to feel cramped */
  body.hc-v2{--hdr:64px;--bar:44px}
  /* .82rem keeps the announcement on one line at 360px wide; it wrapped at
     .86 and sat tight against the strip's edges. line-height gives it room
     to wrap gracefully anyway if an announcement is ever longer. */
  .hv-strip{font-size:.82rem;padding:0 16px;line-height:1.3}
  .hv-strip-msg{gap:6px;flex-wrap:wrap;justify-content:center}
  .hv-bar{height:64px}
  .hv-in{gap:10px}
  .hv-logo{font-size:1.1rem}
  .hv-logo svg{width:17px;height:17px}
  .hv-nav{display:none}
  .hv-cta{margin-left:auto;height:40px;padding:0 5px 0 15px;gap:9px;
    font-size:.79rem;font-weight:800}
  .hv-cta i{width:30px;height:30px}
  .hv-cta i svg{width:14px;height:14px}
}

/* 360px is a very common phone width and the announcement still wrapped there
   at .82rem, so it steps down once more before the logo does. */
@media (max-width:379px){
  .hv-strip{font-size:.75rem;padding:0 12px}
}

@media (max-width:359px){
  .hv-logo{font-size:1rem;gap:6px}
  .hv-cta{font-size:.73rem;padding:0 4px 0 12px;gap:7px}
  .hv-cta i{width:28px;height:28px}
}

/* ============================================================
   BOTTOM BAR — phone only
   ============================================================ */
.bb,.bb-space{display:none}

@media (max-width:820px){
  .bb-space{display:block;height:calc(86px + env(safe-area-inset-bottom))}

  /* A floating frosted pill rather than a full-width bar.
     width:calc(100vw - 24px), not right:12px — a fixed element resolves
     against a transformed/filtered ancestor if one exists, and right would
     then land on that box's edge rather than the screen's. */
  .bb{display:flex;position:fixed;left:12px;z-index:110;
    bottom:calc(10px + env(safe-area-inset-bottom));
    width:calc(100vw - 24px);height:62px;box-sizing:border-box;
    background:none;border:0;border-radius:31px;padding:0 4px;align-items:center}

  /* The glass lives on ::before, NOT on .bb. backdrop-filter makes an element
     the containing block for its position:fixed descendants — and .bb contains
     the More sheet and its scrim, which are fixed. Put it on .bb and the sheet
     sizes itself against this 62px pill instead of the window. */
  /* --bb-glass / --bb-frost are declared once and used by BOTH the bar and the
     More panel, so the two can never drift apart again.

     Why they looked different despite already sharing .72 + blur(22):
     backdrop-filter takes its colour from whatever is behind the element, and
     the two sit over different parts of the page. The bar covers a 62px strip
     at the bottom; the panel covers 700px of homepage cards. At 72% white the
     page still shows through enough that the tall panel picked up a blue /
     pink wash the short bar never saw. saturate(180%) then amplified it.

     So: saturate drops 35% to 117%, and the white goes to 94%. Measured over
     pure #3B82F6 / #EC4899 / #10B981 blobs — far more saturated than anything
     on the site — the panel now lands within single digits of the bar on
     every channel, so over real page content the two are the same colour. The
     frosted feel comes from the scrim blurring the page behind, not from the
     surfaces themselves being see-through. */
  .bb{--bb-glass:rgba(255,255,255,.94);--bb-frost:blur(22px) saturate(117%)}

  .bb::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:31px;
    background:var(--bb-glass);
    -webkit-backdrop-filter:var(--bb-frost);
    backdrop-filter:var(--bb-frost);
    border:1px solid rgba(15,20,36,.07);
    box-shadow:0 8px 30px rgba(15,20,36,.14)}

  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .bb::before{background:#fff}
  }

  .bb a,.bb label{text-decoration:none}

  /* Instagram-ish: bigger, thinner icons and a quiet label underneath rather
     than a bold one. Stroke weight itself is on the SVGs in the partial. */
  .bb-item{flex:1;min-width:0;display:flex;flex-direction:column;
    align-items:center;gap:3px;font-size:.66rem;font-weight:500;letter-spacing:.005em;
    color:var(--ink,#0F1424);cursor:pointer}
  .bb-ico{width:auto;height:27px;display:grid;place-items:center}
  .bb-ico svg{width:26px;height:26px;stroke:var(--ink,#0F1424);fill:none}
  /* the current item is simply amber — no pill behind it */
  .bb-item.is-on{font-weight:700;color:var(--accent-dark,#D8A422)}
  .bb-item.is-on .bb-ico svg{stroke:var(--accent-dark,#D8A422);stroke-width:2.1}

  /* ---------- the More sheet ---------- */
  .bb-toggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

  /* The sheet slides up out of the bar. It has to stay in the DOM for that —
     display cannot be transitioned — so `visibility` does the hiding instead:
     unlike opacity alone it also takes the sheet out of the tab order and
     stops it swallowing taps while it is off screen. The delayed visibility
     transition lets the slide-down finish before it disappears. */
  /* z-index:-2 keeps the scrim BEHIND the bar's own glass (which is ::before
     at -1) while still dimming the page: the whole .bb subtree paints at 110,
     so a negative z inside it is above the page but under the bar. Without
     this the bar greyed out while the panel attached to it stayed bright. */
  /* Blurs the page behind rather than dimming it heavily. The .55 dim it had
     was why the bar looked darker open than closed: the scrim sits behind the
     bar's glass, so the bar was frosting a dark sheet instead of the page.
     A 12% tint plus blur keeps the bar the same shade either way. */
  .bb-scrim{display:block;position:fixed;inset:0;z-index:-2;
    background:rgba(15,20,36,.12);
    -webkit-backdrop-filter:blur(14px) saturate(85%);
    backdrop-filter:blur(14px) saturate(85%);
    opacity:0;visibility:hidden;
    transition:opacity .24s ease,visibility 0s linear .24s}
  .bb-toggle:checked ~ .bb-scrim{opacity:1;visibility:visible;
    transition:opacity .24s ease}

  /* The panel sits ON TOP OF the bar's top edge, not over the bar: same 12px
     inset, same glass, rounded at the top and square at the bottom, and
     overlapping by 1px so there is no seam. The bar stays visible underneath,
     so the two read as one object that grew taller. */
  .bb-sheet{display:flex;flex-direction:column;position:fixed;z-index:120;
    left:12px;width:calc(100vw - 24px);top:auto;
    /* exactly the bar's height (62px, border-box), not 61: a 1px overlap
       meant both frosted layers painted that row and it showed as a pale
       hairline across the join. Butt them instead. */
    bottom:calc(10px + env(safe-area-inset-bottom) + 62px);
    max-height:calc(100vh - var(--hdr) - var(--bar) - 120px);
    border:1px solid rgba(15,20,36,.07);border-bottom:0;
    border-radius:26px 26px 0 0;
    background:var(--bb-glass);
    -webkit-backdrop-filter:var(--bb-frost);
    backdrop-filter:var(--bb-frost);
    box-shadow:0 -8px 30px rgba(15,20,36,.16);overflow:hidden;
    visibility:hidden;clip-path:inset(100% 0 0 0 round 26px 26px 0 0);
    transition:clip-path .3s cubic-bezier(.22,.61,.36,1),visibility 0s linear .3s}
  .bb-toggle:checked ~ .bb-sheet{visibility:visible;
    clip-path:inset(0 0 0 0 round 26px 26px 0 0);
    transition:clip-path .32s cubic-bezier(.22,.61,.36,1)}

  /* While the panel is attached the bar squares off its top corners AND drops
     its top border — otherwise that 1px hairline runs across the join and the
     two read as separate objects stacked rather than one. The panel has no
     bottom border for the same reason. Nothing else about the bar changes —
     both surfaces read --bb-glass and --bb-frost, so they are identical. */
  .bb:has(.bb-toggle:checked)::before{border-radius:0 0 31px 31px;border-top:0}

  @media (prefers-reduced-motion:reduce){
    .bb-scrim,.bb-sheet{transition:none}
  }

  .bb-grab{flex:none;display:flex;justify-content:center;padding:10px 0 2px}
  .bb-grab::after{content:"";width:42px;height:5px;border-radius:999px;background:#D8D5CE}

  .bb-r{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

  /* Three panels, one visible: Main, Categories, Areas. */
  .bb-pane{display:none}
  #bbp-main:checked  ~ [data-pane="main"],
  #bbp-cats:checked  ~ [data-pane="cats"],
  #bbp-areas:checked ~ [data-pane="areas"]{display:flex;flex-direction:column;
    flex:1 1 auto;min-height:0}

  .bb-head{flex:none;padding:8px 14px 13px;display:flex;align-items:center;gap:12px;
    border-bottom:1px solid var(--line,#E5E7EB)}
  .bb-head h2{flex:1;min-width:0;margin:0;font-size:1.26rem;font-weight:800;
    letter-spacing:-.03em;color:var(--ink,#0F1424)}
  .bb-round{width:40px;height:40px;flex:none;border-radius:999px;background:#F3F2EE;
    display:grid;place-items:center;cursor:pointer}
  .bb-round svg{width:18px;height:18px;stroke:var(--ink,#0F1424);fill:none}

  .bb-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:16px 16px calc(26px + env(safe-area-inset-bottom))}

  /* amber text and an arrow, matching "View all categories" — the big filled
     pill was shouting next to a list of plain links */
  .bb-add{display:flex;align-items:center;gap:10px;margin-top:24px;padding:2px 0 4px;
    font-size:1.03rem;font-weight:800;color:var(--accent-dark,#D8A422)}
  .bb-add i{display:inline-flex;font-style:normal}
  .bb-add i svg{width:15px;height:15px;flex:none;stroke:currentColor;fill:none}

  .bb-legend{margin:24px 0 8px;font-size:.74rem;font-weight:800;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ink,#0F1424)}

  .bb-list{display:flex;flex-direction:column}
  .bb-list > a,
  .bb-list > label{height:56px;display:flex;align-items:center;justify-content:space-between;
    gap:12px;border-bottom:1px solid var(--line,#E5E7EB);font-size:1.03rem;font-weight:600;
    color:var(--ink,#0F1424);cursor:pointer}
  .bb-list > a > span,
  .bb-list > label > span{flex:none;display:flex;align-items:center;gap:10px}
  .bb-list > *:last-child{border-bottom:0}
  .bb-list b{font-weight:800;color:var(--accent-dark,#D8A422)}
  .bb-list svg{width:16px;height:16px;flex:none;stroke:var(--ink,#0F1424);fill:none}

  /* amber text and an arrow, matching the "All 51 categories" link in the
     desktop menu — not an outlined button, which read as a second CTA. */
  .bb-foot{margin-top:22px;display:flex;align-items:center;gap:10px;
    font-size:1rem;font-weight:800;color:var(--accent-dark,#D8A422)}
  .bb-foot svg{width:15px;height:15px;flex:none;stroke:currentColor;fill:none}
}