/* Shared top-bar navigation for the FoodHaatch V2 section nav.
   Uses the brand palette (see brand.css) with brand-colour fallbacks baked in,
   so the bar renders on-brand even on pages that don't link brand.css.

   ── Z-INDEX SCALE ──────────────────────────────────────────────────────────
   The nav is sticky, so anything a page floats over it must out-rank it. Page
   modals live in each template's own <style> block (which wins on order, not
   specificity — a rule here could not override them), so the numbers have to be
   chosen per template. Use this scale:

     90   .topbar-nav          sticky nav bar
     120  .nav-flyout          nav's own dropdown
     150+ page modals/drawers  MUST be >= 150 to clear the nav
     200  modal backdrop       what the newer hubs use
     210  toast                above its own modal (error toasts fire with the
                               modal still open — below it they're invisible)
     400  .fh-demo-banner
     500  .fh-demo-toast

   Native <dialog> + showModal() (rota-hub, stock-suppliers) renders in the
   browser's top layer and ignores z-index entirely — nothing to set there. */
.topbar-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.4rem 1rem;
  background: var(--brand-dark, #085041);
  border-bottom: 1px solid var(--brand, #0F6E56);
  position: sticky;                 /* stays pinned; the logo .topbar above it
                                       scrolls away (it must NOT be sticky, or
                                       it covers the nav — see the page heads) */
  top: 0;
  z-index: 90;
  transition: box-shadow 0.2s ease, padding 0.2s ease;
}

/* Only the section links scroll on narrow screens; the Settings/Log out group
   below stays pinned in view. */
.topbar-nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;            /* hide scrollbar (Firefox) */
}
.topbar-nav-links::-webkit-scrollbar { display: none; }  /* hide scrollbar (WebKit) */

.topbar-nav-right {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: none;
  margin-left: auto;
}

/* Added by topnav.js while the nav is pinned, so the bar reads as floating
   above the scrolled content. */
.topbar-nav.is-scrolled {
  box-shadow: 0 4px 12px rgba(4, 40, 32, 0.35);
}

.topbar-nav a {
  white-space: nowrap;
  text-decoration: none;
  color: var(--brand-light, #5DCAA5);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.5rem 0.95rem;
  border-radius: 8px;
  transition: background 0.15s ease, color 0.15s ease;
  /* Centre the contents rather than sit them on a text baseline: the enlarged
     emoji in Docs/Settings would otherwise stretch the line box and make those
     two anchors taller than their neighbours. `gap` spaces icon from label. */
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  line-height: 1.15;
}
.topbar-nav a:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.10);
}
.topbar-nav a.active {
  color: #FAF7F0;
  background: rgba(255, 255, 255, 0.16);
}

/* ── Section flyout (sub-page dropdown, e.g. My Kitchen) ────────────────────── */
.topbar-nav .nav-group {
  display: inline-flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
}
.topbar-nav .nav-group > a { padding-right: 0.4rem; }
.topbar-nav .nav-caret {
  border: none;
  background: transparent;
  color: var(--brand-light, #5DCAA5);
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.5rem 0.5rem 0.5rem 0.15rem;
  border-radius: 8px;
  font-family: inherit;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.topbar-nav .nav-caret:hover { color: #ffffff; background: rgba(255, 255, 255, 0.10); }
.topbar-nav .nav-group.open .nav-caret { color: #ffffff; transform: rotate(180deg); }

.nav-flyout {
  position: fixed;
  display: none;
  min-width: 220px;
  background: var(--brand-dark, #085041);
  border: 1px solid var(--brand, #0F6E56);
  border-radius: 10px;
  padding: 0.35rem;
  box-shadow: 0 12px 30px rgba(4, 40, 32, 0.45);
  z-index: 120;
}
.nav-flyout.open { display: block; }
.nav-flyout a {
  display: block;
  white-space: nowrap;
  text-decoration: none;
  color: var(--brand-light, #5DCAA5);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.6rem 0.85rem;
  border-radius: 8px;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-flyout a:hover { color: #ffffff; background: rgba(255, 255, 255, 0.12); }
.nav-flyout a.active { color: #FAF7F0; background: rgba(255, 255, 255, 0.16); }

/* Grouped flyout (My Growth: Insights / Money / Contacts & Comms). The heading
   is a label, not a link — the hub tile is the doorway to each group. Links
   inside a grouped flyout indent so the grouping reads at a glance. */
.nav-flyout-grouped { min-width: 240px; }
.nav-flyout-head {
  padding: 0.6rem 0.85rem 0.3rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #FAF7F0;
  white-space: nowrap;
}
.nav-flyout-head + a { margin-top: 0; }
.nav-flyout-grouped a { padding-left: 1.5rem; }
/* A heading that is also a link (My Finances → the finance hub). Keeps the
   heading's uppercase/bold/colour look but gets a link hover affordance and is
   NOT indented like the sub-items. Specificity beats both `.nav-flyout a` and
   `.nav-flyout-grouped a`, which would otherwise style it as an ordinary item. */
a.nav-flyout-head {
  display: block;
  text-decoration: none;
  color: #FAF7F0;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.nav-flyout-grouped a.nav-flyout-head { padding-left: 0.85rem; }
a.nav-flyout-head:hover { color: #ffffff; background: rgba(255, 255, 255, 0.12); }
/* Hairline between groups, but not above the first one. */
.nav-flyout-head ~ .nav-flyout-head {
  margin-top: 0.3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 0.55rem;
}

/* Docs + Settings gear + Log out — set apart at the far right of the bar (the
   .topbar-nav-right group is pushed right with margin-left:auto). All three
   reuse the base .topbar-nav a styling (font, size, weight, colour, hover,
   active) so the pinned group reads as nav links, not buttons.

   Only the emoji GLYPH is enlarged, via .topbar-nav-icon. Sizing the whole
   anchor (the old `font-size: 1.05rem` here) also scaled the "Docs"/"Settings"
   text labels and grew the anchors 4-5px taller than their neighbours, which is
   what made Log out look like the odd one out. */
.topbar-nav .topbar-nav-icon {
  font-size: 1.05rem;
  line-height: 1;
}
/* Help is the one pinned item with no emoji — a bare "?" at 1.05rem reads thin
   and small next to 🗂 and ⚙. Drawing it as a circled mark gives it the same
   optical weight without pulling a red ❓ emoji into a teal bar. On mobile the
   label is hidden, so this circle IS the button. */
.topbar-nav .topbar-nav-help .topbar-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 800;
}
.topbar-nav .topbar-nav-logout {
  color: var(--brand-light, #5DCAA5);
}
.topbar-nav .topbar-nav-logout:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.10);
}

@media (max-width: 700px) {
  .topbar-nav { gap: 0; padding: 0.35rem 0.5rem; }
  .topbar-nav-links, .topbar-nav-right { gap: 0; }
  .topbar-nav a { padding: 0.5rem 0.7rem; font-size: 0.85rem; transition: padding 0.2s ease; }
  .topbar-nav .topbar-nav-label { display: none; }   /* just the gear on mobile */
  /* Faint divider so the scrolling links read as sliding behind the pinned
     Settings/Log out group. */
  .topbar-nav-right { border-left: 1px solid rgba(255, 255, 255, 0.15);
                      margin-left: 0.35rem; padding-left: 0.15rem; }
  /* Compact the pinned bar on small screens so it eats less height. */
  .topbar-nav.is-scrolled { padding-top: 0.1rem; padding-bottom: 0.1rem; }
  .topbar-nav.is-scrolled a { padding-top: 0.35rem; padding-bottom: 0.35rem; }
}

/* ── Vendor custom logo in the top bar (set via Settings → Business Profile) ──
   Swapped in by topnav.js when the vendor has uploaded a logo; sits where the
   FoodHaatch text mark otherwise renders. */
.topbar-logo-img {
  height: 2rem;
  max-width: 170px;
  object-fit: contain;
  display: block;
}

/* ── "Powered by FoodHaatch" footer (injected by topnav.js on section pages) ── */
.fh-powered {
  text-align: center;
  padding: 1.75rem 1rem 2.25rem;
}
.fh-powered a {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.fh-powered a:hover {
  opacity: 1;
  color: var(--brand);
}

/* ── Read-only demo mode (banner + blocked-write toast, injected by topnav.js) ── */
.fh-demo-banner {
  position: relative;
  background: var(--brand-dark);
  color: #fff;
  font-size: 0.82rem;
  line-height: 1.4;
  text-align: center;
  padding: 0.55rem 1rem;
  z-index: 400;
}
.fh-demo-banner a {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.fh-demo-banner a:hover { color: var(--brand-pale); }

/* Subtle exit link on the left — clearly clickable but doesn't compete
   with the waitlist CTA. */
.fh-demo-back {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 500 !important;
  text-decoration: none !important;
  color: rgba(255, 255, 255, 0.72) !important;
}
.fh-demo-back:hover { color: #fff !important; }

.fh-demo-toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translate(-50%, 1rem);
  background: var(--text);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 600;
  padding: 0.75rem 1.25rem;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 500;
  max-width: calc(100vw - 2rem);
  text-align: center;
}
.fh-demo-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 640px) {
  /* Stack the exit link above the centred message so they never overlap. */
  .fh-demo-banner { font-size: 0.75rem; padding: 0.4rem 0.75rem; }
  .fh-demo-back {
    position: static;
    display: block;
    transform: none;
    margin-bottom: 0.25rem;
    font-size: 0.72rem;
  }
}

/* Section-page headings used to carry a small round count badge (e.g. a "2"
   beside "Needs a reply", "9" beside "What do you need to buy?"). The number is
   redundant once the items are listed right below it, so hide these count badges
   across every section page (bubble hubs + the Overview cards) from one place.
   Scoped to heading badges only — status pills elsewhere use .pill, not .badge. */
.bubble-head .badge,
.card-title .badge { display: none !important; }

/* ── Persistent trading bar ──────────────────────────────────────────────────
   Rendered by _topnav.html from the _inject_till_bar context processor, so it
   appears on every page while a till session is open with rounds rung up. It is
   money-walled server-side (staff never receive it) and suppressed on /trading.

   z-index 85 is deliberate, and sits inside the scale documented at the top of
   this file: ABOVE page content, BELOW the nav flyout (120) and below page
   modals (200). A bottom bar floating over a modal backdrop would be the same
   mistake as the nav floating over one. */
.fh-till-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 85;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  padding-bottom: calc(0.7rem + env(safe-area-inset-bottom));
  background: var(--brand, #0F6E56);
  color: #fff;
  text-decoration: none;
  font-size: 0.95rem;
  box-shadow: 0 -2px 12px rgba(8, 80, 65, 0.28);
}
.fh-till-bar:hover { background: var(--brand-dark, #085041); }
.fh-till-dot { flex: 0 0 auto; font-size: 0.8rem; line-height: 1; }
/* min-width:0 so a long venue name ellipsises instead of pushing the CTA off
   the right edge — the bare-flex-child trap this codebase keeps re-finding. */
.fh-till-facts {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fh-till-money { font-weight: 800; font-variant-numeric: tabular-nums; }
.fh-till-cta {
  flex: 0 0 auto;
  font-weight: 800;
  border: 2px solid rgba(255, 255, 255, 0.65);
  border-radius: 8px;
  padding: 0.35rem 0.7rem;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}

/* Keep the bar off the bottom of the page content. :has() is already relied on
   in section.html for the lone-tile fix; a browser without it loses only this
   padding and the bar overlaps the last ~60px of a scrolled-to-bottom page. */
body:has(.fh-till-bar) { padding-bottom: 68px; }

@media (max-width: 620px) {
  /* Two lines on a phone: the facts wrap under the CTA rather than being
     ellipsised down to "Trading · …", which would hide the very figures the
     bar exists to show. */
  .fh-till-bar { flex-wrap: wrap; gap: 0.4rem 0.6rem; font-size: 0.88rem; }
  .fh-till-facts { flex: 1 1 100%; white-space: normal; order: 2; }
  .fh-till-dot { order: 1; }
  .fh-till-cta { order: 1; margin-left: auto; }
  body:has(.fh-till-bar) { padding-bottom: 104px; }
}