/* --- Header ---------------------------------------------------------------- */

header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 var(--border);
}

.head-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.logo {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--text);
}

.logo span { color: var(--accent); }

.logo small {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 1px;
}

.searchwrap { flex: 1; min-width: 190px; position: relative; }

.searchwrap svg {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  opacity: 0.7;
}

#search {
  width: 100%;
  padding: 9px 12px 9px 36px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  background: var(--surface);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.25s ease;
}

#search::placeholder { color: var(--text-muted); }
#search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }

.hbtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.hbtn:hover { background: var(--surface-3); }

.storebadge {
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.storebadge.server {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.storebadge.err {
  background: color-mix(in srgb, var(--red) 10%, transparent);
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 28%, transparent);
}

.chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  width: 100%;
  align-items: center;
  padding: 2px 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-soft);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.chip:hover { background: var(--surface-3); }

.chip.on {
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  color: var(--accent);
}

.chip.fav.on {
  background: color-mix(in srgb, var(--red) 12%, transparent);
  border-color: color-mix(in srgb, var(--red) 35%, transparent);
  color: var(--red);
}

.chip.cooked.on {
  background: color-mix(in srgb, var(--gold) 15%, transparent);
  border-color: color-mix(in srgb, var(--gold) 38%, transparent);
  color: var(--gold);
}

.chip.pantry.on {
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  border-color: color-mix(in srgb, var(--blue) 36%, transparent);
  color: var(--blue);
}

.chip.sm { padding: 4px 10px; font-size: 11.5px; }

.chipsep { width: 1px; height: 20px; background: var(--border); }

.sortsel {
  margin-left: auto;
  padding: 7px 28px 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 500;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a91a8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.25s ease;
}

/* --- The header on a phone --------------------------------------------------
   Sticky and 280px tall is a fine deal on a laptop and a terrible one on a
   phone: it never scrolled away, so a third of the screen was permanently
   spent on a wordmark, a tagline and filters you'd already set. Below 720px
   it scrolls off like everything else, the wordmark goes (the drawer carries
   the brand, and the page under this says "My Recipes" anyway), and the
   filter chips become one swipeable row rather than three stacked ones.

   Scoped to `body > header` on purpose: the bare `header` rule at the top of
   this file also catches .rp-hero and .pp-hero inside routed pages, and those
   want to keep their own positioning. */
@media (max-width: 720px) {
  body > header { position: static; }
  body > header .head-inner { padding: 10px 14px; gap: 8px; }
  body > header .logo { display: none; }
  body > header .searchwrap { min-width: 130px; }
  body > header #search { padding: 10px 12px 10px 34px; font-size: 16px; }  /* 16px: anything less and iOS zooms the page on focus */
  body > header .sortsel { margin-left: 0; flex: none; max-width: 42vw; }
  body > header .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  body > header .chips::-webkit-scrollbar { display: none; }
  body > header .chip { flex: none; }
  body > header .chipsep { flex: none; }
}