/* Baker Food Co-op - Bulk Foods Guide: shared page chrome.
 *
 * Extracted 2026-08-10. Every page here inlines its own <style>, so the topbar
 * CSS existed as dozens of near-identical copies across five pages. This file
 * holds only the rules that were provably safe to centralise.
 *
 * THE TEST USED, and the one to re-apply before adding anything:
 * a rule may live here only if, for EVERY page, either
 *   (a) that page defined it with a byte-identical body, or
 *   (b) that page does not use the selector in its markup at all.
 * Condition (b) matters as much as (a). Sharing a rule a page never defined
 * but does use silently restyles it -- that is how an earlier pass at this
 * would have changed .brand on three pages and .topbar .brand strong on four.
 *
 * DELIBERATELY NOT HERE - these stay inline on each page:
 *   .topbar, .topbar in @media, .brand, .brand small, .brand strong,
 *   .back-link, .back-link:hover, .topbar .brand strong
 * Each either differs between pages or is supplied by a grouped rule that also
 * styles page-specific elements (.hero, .food-card, .panel). Centralising any
 * of them changes how at least one page looks.
 *
 * ORDERING CONTRACT: linked in <head> BEFORE each page's inline <style>, so a
 * page rule always wins. Do not move the <link> after the <style>.
 *
 * Colours come from --border, --green, --green-soft, --muted and --sage, which
 * each page defines in its own :root. Resolving per page is intentional: the
 * category template uses smaller radii than the rest, and this preserves that.
 *
 * Bump ?v= on every <link> together when editing - the full URL is the cache
 * key in the browser and at the Cloudflare edge.
 */

.topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Seats the logo beside the wordmark.
 *
 * Gated on the logo actually being present, and that guard is not optional.
 * A .brand without a logo has its <small> and <strong> as direct children, so
 * flexing it puts them on one line instead of stacked. That is not hypothetical:
 * on 2026-08-10 this rule shipped unguarded and broke the topbar on most food
 * pages within minutes, because Cloudflare was still serving SSR HTML with the
 * pre-logo markup while this file — which is served for ANY ?v= value, the query
 * string only busts caches — had already updated underneath it.
 *
 * The lesson generalises: a cache-busting ?v= protects new markup from old CSS,
 * never old markup from new CSS. Any rule here must render correctly against
 * every markup shape still cached anywhere. */
.brand:has(> .brand-logo) {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand-logo {
  height: 40px;
  width: auto;
  display: block;
}

.about-link {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--green-soft);
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.about-link:hover {
  background: #f0ece3;
}

.topbar-search {
  display: flex;
  gap: 6px;
  align-items: center;
}

.topbar-search input {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.88rem;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--text);
  outline: none;
  width: 180px;
  transition: border-color 160ms ease;
}

.topbar-search input:focus {
  border-color: var(--green-soft);
}

.topbar-search button {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--sage);
  color: var(--green);
  cursor: pointer;
  white-space: nowrap;
}

.topbar-search button:hover {
  background: #c7d3bf;
}

.home-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--green);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
}

@media (max-width: 640px) {
  .topbar-search {
    width: 100%;
  }
  .topbar-search input {
    flex: 1;
    width: auto;
  }
}
