/* Header, category nav, search, mobile menu. */

.fo-header {
  position: relative;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  z-index: 50;
}
.fo-header__inner {
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 24px;
  padding-top: 0;
  padding-bottom: 0;
}

/* Logo */
.fo-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); }
.fo-logo__mark {
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  background: var(--teal);
  color: var(--white);
  display: inline-flex; align-items: center; justify-content: center;
}
.fo-logo__mark svg { width: 19px; height: 19px; }
.fo-logo__word { font-weight: 800; font-size: 20px; letter-spacing: -0.02em; }
.fo-logo__img { height: 34px; width: auto; }

/* Category nav (desktop) */
.fo-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 20px; font-size: 15px; font-weight: 600; }
.fo-nav__list a { display: inline-block; padding: 10px 0; text-decoration: none; color: var(--ink-soft); }
.fo-nav__list a:hover,
.fo-nav__list .current-menu-item > a { color: var(--teal); }

/* Search */
.fo-search {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  width: 260px;
  max-width: 100%;
  padding: 0 14px;
  box-sizing: border-box;
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: var(--radius-input);
}
.fo-search__icon { color: var(--muted); flex: none; }
.fo-search input {
  flex: 1; min-width: 0;
  border: 0; outline: none;
  background: transparent;
  font: inherit; font-size: 15px;
  color: var(--ink);
}
.fo-search input::placeholder { color: var(--muted); }
/* Hover and focus in the site's own tokens; the browser's native search-input look is reset below */
.fo-search { transition: border-color var(--ease), background-color var(--ease), box-shadow var(--ease); }
.fo-search:hover { border-color: var(--line-strong); background: var(--white); }
.fo-search:focus-within { border-color: var(--teal); background: var(--white); box-shadow: 0 0 0 3px var(--teal-soft); }
.fo-search input,
.fo-hero__search input {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  box-shadow: none;
}
.fo-search input:hover, .fo-search input:focus,
.fo-hero__search input:hover, .fo-hero__search input:focus { background: transparent; border: 0; outline: none; box-shadow: none; }
.fo-search input::-webkit-search-decoration, .fo-search input::-webkit-search-cancel-button, .fo-search input::-webkit-search-results-button,
.fo-hero__search input::-webkit-search-decoration, .fo-hero__search input::-webkit-search-cancel-button, .fo-hero__search input::-webkit-search-results-button { -webkit-appearance: none; appearance: none; display: none; }

.fo-header__actions { display: none; align-items: center; gap: 4px; }
.fo-nav-toggle__close { display: none; }

/* Mobile */
@media (max-width: 900px) {
  .fo-header__inner { min-height: 64px; gap: 8px; }
  .fo-logo__mark { width: 32px; height: 32px; }
  .fo-logo__word { font-size: 19px; }
  .fo-header__actions { display: flex; margin-left: auto; }

  .fo-nav {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 16px;
    box-shadow: var(--shadow-card);
  }
  .fo-nav__list { flex-direction: column; gap: 0; }
  .fo-nav__list a { display: block; padding: 12px 0; border-bottom: 1px solid var(--line-soft); font-size: 16px; }
  .fo-header.is-open .fo-nav { display: block; }
  .fo-header.is-open .fo-nav-toggle__open { display: none; }
  .fo-header.is-open .fo-nav-toggle__close { display: block; }

  .fo-search {
    display: none;
    position: absolute;
    left: var(--gutter); right: var(--gutter); top: 100%;
    margin: 8px 0 0;
    width: auto;
    height: 52px;
    background: var(--white);
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius-btn);
  }
  .fo-header.is-searching .fo-search { display: flex; }
}