/*
 * Header.
 *
 * The previous theme's header overflowed at 390 and 768px because the wordmark,
 * five nav links and three 48px icon buttons needed ~1300px to fit on one line
 * while the nav only collapsed at 640px. Body overflow-x:hidden then clipped the
 * result instead of scrolling, which put the menu button off-screen entirely.
 *
 * Here the wordmark scales with the viewport, the nav collapses at a breakpoint
 * verified by measurement rather than arithmetic, and overflow is never hidden.
 */

.k-skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: var(--k-space-2) var(--k-space-3);
  background-color: var(--k-forest);
  color: var(--k-paper);
  text-decoration: none;
  transform: translateY(-120%);
}

.k-skip-link:focus {
  transform: translateY(0);
  color: var(--k-paper);
}

.k-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--k-paper);
  border-bottom: 1px solid var(--k-rule);
}

.k-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--k-space-4);
  min-height: 76px;
  position: relative;
}

/* min-width:0 lets the wordmark shrink inside the flex row instead of forcing
   the header wider than the viewport, which is what overflowed the old theme. */
.k-logo {
  font-family: var(--k-font-display);
  font-size: clamp(1.125rem, 3.2vw, 1.75rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--k-ink);
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  min-height: 48px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.k-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.k-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding-inline: 0.15rem;
  font-size: var(--k-size-small);
  font-weight: 500;
  text-decoration: none;
  color: var(--k-ink);
  white-space: nowrap;
}

.k-nav__link:hover,
.k-nav__link[aria-current] {
  color: var(--k-forest);
  text-decoration: underline;
  text-underline-offset: 0.35em;
}

.k-header__actions {
  display: flex;
  align-items: center;
  gap: clamp(0.35rem, 1vw, 0.75rem);
  flex: 0 0 auto;
}

.k-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--k-radius);
  color: var(--k-ink);
  text-decoration: none;
  position: relative;
}

.k-icon-btn:hover { background-color: var(--k-paper-sunk); color: var(--k-ink); }
.k-icon-btn svg { width: 20px; height: 20px; }

.k-cart-count {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding-inline: 4px;
  border-radius: 9px;
  background-color: var(--k-forest);
  color: var(--k-paper);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.k-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--k-radius);
  color: var(--k-ink);
}

.k-menu-toggle:hover { background-color: var(--k-paper-sunk); }
.k-menu-toggle svg { width: 22px; height: 22px; }

/*
 * Collapse to a drawer well before the row can run out of room. The panel is
 * solid, not translucent: a navigation menu has to stay legible over whatever
 * sits behind it, and a 97%-alpha panel still let hero text read through.
 */
@media (max-width: 68rem) {
  /*
   * Scoped to .k-header deliberately.
   *
   * The footer renders the same .k-nav markup, so an unscoped rule turned the
   * footer navigation into an absolutely-positioned, display:none dropdown
   * belonging to a hamburger that does not exist down there — the policy links
   * simply vanished on every phone. It went unnoticed while no menu was
   * assigned to the footer and it rendered nothing anyway.
   */
  .k-header .k-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    background-color: var(--k-paper);
    border-bottom: 1px solid var(--k-rule);
    box-shadow: 0 18px 32px color-mix(in srgb, var(--k-ink) 10%, transparent);
    padding: var(--k-space-2) 0 var(--k-space-4);
  }

  .k-header .k-nav.is-open { display: block; }

  .k-header .k-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .k-header .k-nav__link {
    min-height: 54px;
    width: 100%;
    padding-inline: var(--k-gutter);
    border-bottom: 1px solid var(--k-rule);
  }

  .k-header .k-nav__list li:last-child .k-nav__link { border-bottom: 0; }

  .k-menu-toggle { display: inline-flex; }
}

/* Narrow phones cannot hold the wordmark plus three 48px targets. Search moves
   into the drawer rather than being dropped. */
@media (max-width: 30rem) {
  /*
   * Search stays on phones.
   *
   * It was hidden here to win back width when the header overflowed at 320px,
   * before the nav collapsed to a toggle. That left phones — most of the
   * traffic — with no way to search at all, which is a worse problem than the
   * one it solved. The row now fits with it present; the width sweep proves it.
   */
  .k-header__inner { min-height: 64px; }
}

/* -------------------------------------------------------------------------
 * Header search panel.
 *
 * Opened by the search icon, which is a link in the markup and a disclosure
 * button once nav.js runs. It spans the header's full width and sits on the
 * paper ground with a rule beneath, so it reads as an extension of the header
 * rather than a floating box.
 * ---------------------------------------------------------------------- */
.k-search-panel {
  background-color: var(--k-paper);
  border-bottom: 1px solid var(--k-rule);
  padding-block: var(--k-space-4);
}

.k-search-panel[hidden] {
  display: none;
}

.k-search-form {
  display: flex;
  gap: var(--k-space-2);
  align-items: stretch;
  max-width: 34rem;
}

.k-search-form__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  padding: 0.6rem 0.9rem;
  font-family: inherit;
  font-size: var(--k-size-body);
  color: var(--k-ink);
  background-color: var(--k-surface);
  border: 1px solid var(--k-rule-strong);
  border-radius: 0;
}

.k-search-form__input:focus-visible {
  outline: 2px solid var(--k-forest);
  outline-offset: 2px;
  border-color: var(--k-forest);
}

.k-search-form__submit {
  min-height: 48px;
  padding-inline: var(--k-space-4);
  font-family: inherit;
  font-size: var(--k-size-meta);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--k-ink);
  background-color: transparent;
  border: 1px solid var(--k-rule-strong);
  border-radius: 0;
  cursor: pointer;
  transition: color var(--k-duration) var(--k-ease), border-color var(--k-duration) var(--k-ease);
}

.k-search-form__submit:hover,
.k-search-form__submit:focus-visible {
  color: var(--k-forest);
  border-color: var(--k-forest);
}

/* The concierge sits on the front page between the catalogue and the feed. */
.k-concierge-slot {
  padding-block: var(--k-space-7);
  border-top: 1px solid var(--k-rule);
}