/* Step 7: Search / Header / Navigation polish */
.hero :where(.theme-toggle, .hero__search-toggle, .hero__contact-toggle, .hero-menu__toggle, .hero__origin) {
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.hero :where(.theme-toggle, .hero__search-toggle, .hero__contact-toggle, .hero-menu__toggle, .hero__origin):focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  box-shadow: var(--focus-ring);
}

.hero :where(.theme-toggle, .hero__search-toggle, .hero__contact-toggle, .hero-menu__toggle, .hero__origin):active {
  transform: translateY(1px) scale(0.985);
}

.hero.is-search-open .hero__search-toggle {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
  background: color-mix(in srgb, var(--accent) 7%, var(--surface-strong));
  color: var(--accent);
}

.hero__search-toggle {
  position: relative;
  overflow: hidden;
}

.hero__search-toggle .hero__search-toggle-icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast);
}

.hero__search-toggle-icon--close {
  opacity: 0;
  transform: scale(0.72) rotate(18deg);
}

.hero.is-search-open .hero__search-toggle-icon--search {
  opacity: 0;
  transform: scale(0.72) rotate(-18deg);
}

.hero.is-search-open .hero__search-toggle-icon--close {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.hero .search {
  transition:
    filter var(--transition-base),
    transform var(--transition-base),
    box-shadow var(--transition-base);
}

.hero .search:focus-within .search__icon {
  color: color-mix(in srgb, var(--accent) 46%, var(--text-muted));
}

.hero .search__input {
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    box-shadow var(--transition-fast),
    color var(--transition-fast);
}

.hero .search__input:hover {
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
}

.hero .search__input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
  background: var(--surface-strong);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 7%, transparent);
  transform: none;
}

.hero-nav__item,
.hero-menu__item,
.hero-mobile-nav__item,
.hero-mobile-more__summary,
.hero-mobile-more__item {
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.site-breadcrumbs {
  display: flex;
  min-width: 0;
  min-height: 18px;
  align-items: center;
  flex-wrap: nowrap;
  gap: 9px;
  margin: 0 0 7px;
  padding: 11px 0 0;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.69rem;
  font-weight: 620;
  line-height: 1.2;
  white-space: nowrap;
}

.site-breadcrumbs a,
.site-breadcrumbs__current {
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-breadcrumbs a {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-weight: 650;
  border-radius: 8px;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.site-breadcrumbs__current {
  color: color-mix(in srgb, var(--text-soft) 76%, transparent);
  font-weight: 500;
}

.site-breadcrumbs > span[aria-hidden="true"] {
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--text-muted) 52%, transparent);
}

.site-breadcrumbs a:hover {
  color: var(--accent-strong);
}

.site-breadcrumbs a:focus-visible {
  outline: none;
  color: var(--accent-strong);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}

@media (max-width: 640px) {
  .hero.is-search-open .search__input {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
    background: color-mix(in srgb, var(--accent) 2%, var(--surface-strong));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 6%, transparent);
  }

  .hero.is-search-open .search__icon {
    color: var(--accent);
  }

  .hero__search-toggle .hero__search-toggle-icon svg {
    width: 21px !important;
    height: 21px !important;
  }

  .hero__search-toggle-icon--close svg {
    width: 20px !important;
    height: 20px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__search-toggle .hero__search-toggle-icon,
  .hero .search,
  .hero .search__input,
  .hero :where(.theme-toggle, .hero__search-toggle, .hero__contact-toggle, .hero-menu__toggle, .hero__origin),
  .hero-nav__item,
  .hero-menu__item,
  .hero-mobile-nav__item,
  .hero-mobile-more__summary,
  .hero-mobile-more__item {
    transition-duration: 1ms !important;
  }
}

/* Responsive search icon geometry. */
@media (max-width: 1300px) {
  .hero__search-toggle {
    --search-toggle-icon-size: 18px;
    --search-toggle-icon-scale: 0.8;
    --search-toggle-icon-stroke: 2.2;
    align-items: center !important;
    justify-content: center !important;
  }

  .hero__search-toggle .hero__search-toggle-icon {
    inset: auto !important;
    top: 50% !important;
    left: 50% !important;
    width: var(--search-toggle-icon-size) !important;
    height: var(--search-toggle-icon-size) !important;
    transform: translate(-50%, -50%) !important;
    transform-origin: center center;
  }

  .hero__search-toggle .hero__search-toggle-icon svg {
    width: var(--search-toggle-icon-size) !important;
    height: var(--search-toggle-icon-size) !important;
    stroke-width: var(--search-toggle-icon-stroke) !important;
  }

  .hero__search-toggle-icon--close {
    opacity: 0;
    transform: translate(-50%, -50%) scale(var(--search-toggle-icon-scale)) rotate(18deg) !important;
  }

  .hero.is-search-open .hero__search-toggle-icon--search {
    opacity: 0;
    transform: translate(-50%, -50%) scale(var(--search-toggle-icon-scale)) rotate(-18deg) !important;
  }

  .hero.is-search-open .hero__search-toggle-icon--close {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg) !important;
  }
}

@media (max-width: 980px) {
  .hero__search-toggle {
    --search-toggle-icon-size: 23px;
    --search-toggle-icon-stroke: 2.35;
  }
}

@media (max-width: 860px) {
  .hero__search-toggle {
    --search-toggle-icon-scale: 0.78;
  }
}

/* Shared breadcrumb geometry: catalog pages use the team profile's 38px topbar. */
.page-matches .matches-hero,
.page-rankings .rankings-hero,
.page-tournaments .tournaments-catalog__header,
.page-trends .trends-page .trends-page__header {
  min-height: 38px;
  height: 38px;
}

.page-matches .matches-hero__breadcrumbs,
.page-rankings .rankings-hero__breadcrumbs,
.page-tournaments .tournaments-catalog__breadcrumbs,
.page-trends .trends-page .trends-page__breadcrumbs {
  min-height: 18px;
  height: 100%;
  margin: 0;
  padding: 0;
  align-items: center;
  font-size: 0.69rem;
  line-height: 1;
}

@media (max-width: 700px) {
  .page-matches .matches-hero__breadcrumbs,
  .page-tournaments .tournaments-catalog__breadcrumbs {
    position: static;
    padding: 0 13px;
  }
}