/**
 * Harvest — Header (C1), Top bar (C2), Primary nav / mega-menu (C3).
 *
 * Desktop: dark top bar → surface header (logo + wide search + actions) → nav row.
 * Mobile (≤767): top bar collapses, header becomes hamburger + logo + cart, and
 * the nav turns into a full-width drawer toggled by the pure-CSS #hrv-nav-toggle
 * checkbox (no theme JS). Tablet (768–1023): search narrows, nav stays inline.
 *
 * All colour via --hrv-* tokens → every palette + dark Midnight works unchanged.
 */

/* ---------- Core header container (N-3 alignment) ----------
   `.header.content` is MAGENTO'S container, not ours — the ownership probe returns
   `owner: null` for it — and no Harvest rule matched it at all. Blank's `styles-l.css` was
   the only thing sizing it: `max-width: 1280px; padding: 30px 20px 0`.

   It is NOT dead markup: measured 1280x92 with 17 visible descendants ("My Cart", "Search",
   "Advanced Search"). Its edges sit on screen beside the page body's, and they never agreed —
   before N-3 the header content was 32px WIDER than the body content on each side; raising
   --hrv-container to 1440 turned that into 48px NARROWER. A width fix that corrected
   .page-main and left this alone would have made the visible misalignment worse, which is why
   this rule ships in the same change.

   (0,3,0) so specificity decides rather than source order, matching the N-16 reasoning.
   Only the HORIZONTAL padding is overridden: Blank's 30px top / 0 bottom is vertical rhythm
   this fix has no business touching. */
.page-header .header.content,
.page-wrapper .header.content {
  max-width: var(--hrv-container);
  padding-left: var(--hrv-page-pad);
  padding-right: var(--hrv-page-pad);
}

/* ---------- Top bar (C2) ---------- */
.hrv-topbar {
  background: var(--hrv-band);
  color: var(--hrv-band-text);
  font-size: 12.5px;
}
.hrv-topbar-inner {
  max-width: var(--hrv-container);
  margin-inline: auto;
  padding: 8px var(--hrv-page-pad);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.hrv-topbar-links { display: flex; gap: 18px; align-items: center; }
.hrv-topbar a { color: inherit; text-decoration: none; opacity: 0.92; }
.hrv-topbar a:hover { opacity: 1; }
.hrv-topbar-locale { opacity: 0.8; }

/* ---------- Header row (C1) ---------- */
.hrv-header {
  background: var(--hrv-surface);
  border-bottom: 1px solid var(--hrv-border);
  position: relative;
}
.hrv-header-inner {
  max-width: var(--hrv-container);
  margin-inline: auto;
  padding: 16px var(--hrv-page-pad);
  display: flex;
  align-items: center;
  gap: 28px;
}

.hrv-logo {
  font-family: var(--hrv-font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--hrv-text);
  text-decoration: none;
  line-height: 1;
  flex-shrink: 0;
}
.hrv-logo:hover { color: var(--hrv-text); }
.hrv-logo-accent { color: var(--hrv-accent); }

/* Search — input + attached accent button, fills the middle. */
.hrv-search {
  flex: 1;
  display: flex;
  max-width: 560px;
}
.hrv-search-input {
  flex: 1;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}
.hrv-search-btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding: 12px 22px;
}

/* Account / wishlist / cart. */
.hrv-header-actions {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-left: auto;
  font-size: 13.5px;
  font-weight: 500;
}
.hrv-header-actions > a { color: var(--hrv-text); text-decoration: none; }
.hrv-header-actions > a:hover { color: var(--hrv-accent); }
.hrv-header-cart { color: var(--hrv-accent) !important; font-weight: 600; }

/* ---------- Primary nav (C3) ---------- */
.hrv-mainnav {
  background: var(--hrv-surface);
  border-bottom: 1px solid var(--hrv-border);
}
.hrv-mainnav-inner {
  max-width: var(--hrv-container);
  margin-inline: auto;
  padding: 12px var(--hrv-page-pad);
  display: flex;
  gap: 28px;
  font-size: 14px;
  font-weight: 500;
}
.hrv-mainnav a { color: var(--hrv-text); text-decoration: none; }
.hrv-mainnav a:hover { color: var(--hrv-accent); }
.hrv-mainnav-deals { color: var(--hrv-accent); font-weight: 600; }

/* Mega-menu panel primitive (C3) — a nav item can host a .hrv-megamenu drop
   panel; shown on hover/focus-within of its .hrv-mainnav-item parent. Kept
   token-driven so the money-path/category task can populate it. */
.hrv-mainnav-item { position: relative; }
.hrv-megamenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 640px;
  background: var(--hrv-surface);
  border: 1px solid var(--hrv-border);
  border-radius: var(--hrv-radius);
  box-shadow: var(--hrv-shadow-card);
  padding: 24px;
  display: none;
  z-index: 40;
}
.hrv-mainnav-item:hover > .hrv-megamenu,
.hrv-mainnav-item:focus-within > .hrv-megamenu { display: block; }

/* ---------- Mobile hamburger toggle (pure CSS) ---------- */
.hrv-nav-toggle-cb { display: none; }
.hrv-nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid var(--hrv-border-strong);
  border-radius: var(--hrv-radius-md);
  flex-shrink: 0;
}
.hrv-nav-toggle-bar {
  width: 18px;
  height: 2px;
  background: var(--hrv-text);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
  .hrv-header-inner { gap: 18px; }
  .hrv-search { max-width: 380px; }
  .hrv-mainnav-inner { gap: 20px; overflow-x: auto; scrollbar-width: none; }
  .hrv-mainnav-inner::-webkit-scrollbar { display: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .hrv-topbar-promo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hrv-topbar-links { display: none; }

  .hrv-header-inner { flex-wrap: wrap; gap: 12px; }
  .hrv-nav-toggle { display: flex; order: 1; }
  .hrv-logo { order: 2; font-size: 22px; }
  .hrv-header-actions { order: 3; gap: 14px; margin-left: auto; }
  .hrv-header-actions > a:not(.hrv-header-cart) { display: none; } /* keep Cart visible; rest live in the drawer */
  .hrv-search { order: 4; flex-basis: 100%; max-width: none; }

  /* Nav becomes a collapsible drawer under the header. */
  .hrv-mainnav {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }
  .hrv-nav-toggle-cb:checked ~ .hrv-mainnav { max-height: 480px; }
  .hrv-mainnav-inner {
    flex-direction: column;
    gap: 0;
    overflow: visible;
  }
  .hrv-mainnav a {
    padding: 14px 0;
    border-bottom: 1px solid var(--hrv-border);
    font-size: 15px;
  }
  /* Hamburger → X when open. */
  .hrv-nav-toggle-cb:checked ~ .hrv-nav-toggle .hrv-nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hrv-nav-toggle-cb:checked ~ .hrv-nav-toggle .hrv-nav-toggle-bar:nth-child(2) { opacity: 0; }
  .hrv-nav-toggle-cb:checked ~ .hrv-nav-toggle .hrv-nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .hrv-megamenu { position: static; min-width: 0; box-shadow: none; border: none; padding: 0 0 12px; }
}

/* ---------------------------------------------------------------- N-28
   Header nav chips — the comp's pills, and the real finding behind the
   "Porto is blocking us" mirage.

   FOR DAYS THIS WAS RECORDED AS A CATALOG-DATA BLOCKER: "Porto occupies nav slots 1-8 of 17 on
   a food storefront", escalated as a decision only the user could make. It was never that. The
   nav renders whatever categories the TENANT has — that is correct behaviour, and every
   merchant installing this theme has their own. The decisive test was never run: **deleting
   every Porto category would not have made this nav match the artboard.** It would still be
   square-cornered, zero-padded, untinted text links instead of pills.

   So the defect is here, in the theme, and it is small.

   MEASURED ON BOTH SIDES rather than argued:
       artboard  radius 999px · padding 9px 16px · 14px/700 · nav gap 8px
                 inactive  background color-mix(in oklab, text 6%, bg)
                 active    background text, colour bg  (inverted)
       theme     radius 0    · padding 0 12px  · 14px/700
   Font size and weight already agreed; only the pill shape, padding and tint were missing.

   WHICH ELEMENTS ARE PILLS — N-14 asked for this to be read across pages rather than decided on
   one, so it was: all 48 artboards scanned. `border-radius: 999px` lands on the 7 header chips,
   the header search field and the Basket CTA in **39 of 48** files, plus status badges (New,
   Sale, Delivered, Processing). Body buttons are genuinely mixed — which is exactly why N-14
   refused a blanket change to the shared button block, and why this rule is scoped to the
   header only.

   NOT hardcoding seven names. The comp's Pantry/Fresh/Bakery/... are illustrative of a food
   catalogue; the chips are a SHAPE, and the labels come from the merchant's categories. */
.navigation .level0 > .level-top {
    padding: 9px 16px;
    border-radius: var(--hrv-radius-pill);
    background: color-mix(in oklab, var(--hrv-text) 6%, var(--hrv-bg));
    color: var(--hrv-text);
    line-height: 1.2;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.navigation .level0 > .level-top:hover {
    background: color-mix(in oklab, var(--hrv-text) 12%, var(--hrv-bg));
}
/* Active category reads inverted in the comp, not accent-coloured. */
.navigation .level0.active > .level-top,
.navigation .level0.has-active > .level-top {
    background: var(--hrv-text);
    color: var(--hrv-bg);
}
/* The comp's nav is `display:flex; gap:8px`. Magento emits floated list items, so the gap has to
   come from the items themselves — a flex container here would fight the megamenu's positioning
   and the mobile drawer, both of which already work. */
.navigation .level0 {
    margin-right: 8px;
}

/* N-28b — the header SEARCH FIELD is a pill too.
   Same artboard header, same scan: the search input carries border-radius:999px in 39 of 48
   files, alongside the nav chips and the Basket CTA. The comp declares 12px first and 999px
   second on the same element, so 999px is what actually applies — reading only the first
   declaration would have "confirmed" the theme's 14px as correct.
       artboard  999px · padding 10px 18px · width 220
       theme     14px  · padding 12px 14px · width 235
   Width is left to the theme: 220 is the comp's canvas measurement, and the field is inside a
   flex row that already sizes it sensibly at every breakpoint. Shape and padding are the
   design; an exact pixel width copied off one artboard is not. */
.block-search .control input,
.block-search input#search {
    border-radius: var(--hrv-radius-pill);
    padding: 10px 18px;
}