/* Global focus, interaction, touch-target and motion foundations. */
:root {
  --state-hover-bg: color-mix(in srgb, var(--accent) 4%, var(--surface-strong));
  --state-active-bg: color-mix(in srgb, var(--accent) 7%, var(--surface-strong));
  --state-border: color-mix(in srgb, var(--accent) 18%, var(--line));
}

:where(
  a,
  button,
  input,
  summary,
  [role="button"],
  [tabindex]:not([tabindex="-1"])
) {
  scroll-margin-top: 72px;
}

:where(
  a,
  button,
  input,
  summary,
  [role="button"],
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

:where(
  .theme-toggle,
  .hero__search-toggle,
  .hero__contact-toggle,
  .hero__origin,
  .hero-nav__item,
  .hero-mobile-nav__item,
  .hero-mobile-more__summary,
  .hero-mobile-more__item,
  .post-menu-button,
  .expand-button,
  .reaction-pill,
  .popular-card__period,
  .mobile-trend-card__period,
  .sidebar-matches-card__filter,
  .matches-filter,
  .matches-priority-filter__item,
  .matches-calendar__day,
  .matches-calendar__month-button,
  .matches-date-filter__summary,
  .popular-card__all-link,
  .vrs-card__all-link,
  .sidebar-matches-card__all-link,
  .matches-show-more,
  .read-also__all-link,
  .channel-card__compact-subscribe,
  .channel-card__social,
  .channel-card__footer-link
) {
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast),
    opacity var(--transition-fast);
}

:where(
  .theme-toggle,
  .hero__search-toggle,
  .hero__contact-toggle,
  .hero__origin,
  .post-menu-button,
  .expand-button,
  .reaction-pill,
  .popular-card__period,
  .mobile-trend-card__period,
  .sidebar-matches-card__filter,
  .matches-filter,
  .matches-priority-filter__item,
  .matches-calendar__day,
  .matches-calendar__month-button,
  .matches-date-filter__summary
):focus-visible {
  box-shadow: var(--focus-ring);
}

:where(
  .theme-toggle,
  .hero__search-toggle,
  .hero__contact-toggle,
  .post-menu-button,
  .reaction-pill,
  .popular-card__period,
  .mobile-trend-card__period,
  .sidebar-matches-card__filter,
  .matches-filter,
  .matches-priority-filter__item,
  .matches-calendar__day,
  .matches-calendar__month-button,
  .matches-date-filter__summary
):hover {
  border-color: var(--state-border);
  background-color: var(--state-hover-bg);
  color: color-mix(in srgb, var(--accent) 76%, var(--text));
}

:where(
  .hero-nav__item,
  .hero-mobile-nav__item,
  .hero-mobile-more__summary,
  .hero-mobile-more__item,
  .post-card__title a,
  .rich-text a,
  .popular-card__title-link,
  .sidebar-matches-card__title-link,
  .vrs-card__title,
  .matches-day__title
):focus-visible {
  color: color-mix(in srgb, var(--accent) 84%, var(--text));
}

:where(
  .hero-nav__item[aria-current="page"],
  .hero-mobile-nav__item[aria-current="page"],
  .hero-mobile-more.is-active .hero-mobile-more__summary,
  .popular-card__period.is-active,
  .mobile-trend-card__period.is-active,
  .sidebar-matches-card__filter.is-active,
  .matches-filter.is-active,
  .matches-priority-filter__item.is-active,
  .rankings-region.is-active
) {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
  background-color: var(--state-active-bg);
  color: color-mix(in srgb, var(--accent) 86%, var(--text));
}

:where(
  .feed-list > .post-card:not(.post-card--detail),
  .mobile-trend-item,
  .popular-item,
  .vrs-card__item,
  .sidebar-match-featured,
  .sidebar-match-row,
  .match-feed-card,
  .matches-tournament-item,
  .read-also__card
):hover,
:where(
  .feed-list > .post-card:not(.post-card--detail),
  .mobile-trend-item,
  .popular-item,
  .vrs-card__item,
  .sidebar-match-featured,
  .sidebar-match-row,
  .match-feed-card,
  .matches-tournament-item,
  .read-also__card
):focus-visible,
:where(
  .feed-list > .post-card:not(.post-card--detail),
  .popular-item,
  .mobile-trend-item
):focus-within {
  transform: none;
}

:where(
  .post-media__play,
  .post-media-album__play,
  .post-media-album__nav,
  .lightbox__nav,
  .lightbox__thumb,
  .scroll-top,
  .popular-card__all-arrow,
  .sidebar-matches-card__all-arrow
) {
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    opacity var(--transition-fast);
}

@media (pointer: coarse) {
  :where(
    .theme-toggle,
    .hero__search-toggle,
    .hero__contact-toggle,
    .hero__origin,
    .hero-nav__item,
    .hero-mobile-nav__item,
    .hero-mobile-more__summary,
    .hero-mobile-more__item,
    .post-menu-button,
    .expand-button,
    .reaction-pill,
    .popular-card__period,
    .mobile-trend-card__period,
    .sidebar-matches-card__filter,
    .matches-filter,
    .matches-priority-filter__item,
    .matches-calendar__day,
    .matches-calendar__month-button,
    .matches-date-filter__summary,
    .popular-card__all-link,
    .vrs-card__all-link,
    .sidebar-matches-card__all-link,
    .matches-show-more,
    .read-also__all-link,
    .channel-card__compact-subscribe,
    .channel-card__social,
    .channel-card__footer-link
  ) {
    min-height: 44px;
  }

  :where(
    .theme-toggle,
    .hero__search-toggle,
    .hero__contact-toggle,
    .post-menu-button
  ) {
    width: 44px;
    height: 44px;
  }

  :where(
    .hero-nav__item,
    .hero-mobile-nav__item,
    .hero-mobile-more__summary,
    .hero-mobile-more__item,
    .reaction-pill,
    .popular-card__period,
    .mobile-trend-card__period,
    .sidebar-matches-card__filter,
    .matches-filter,
    .matches-priority-filter__item,
    .matches-calendar__day,
    .matches-date-filter__summary
  ) {
    min-width: 44px;
  }

  .hero-mobile-nav__item,
  .hero-mobile-more__summary {
    padding-inline: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }

  .load-more__status::before,
  .feed-list > .post-card.is-feed-card-entering,
  .new-posts-notice,
  .feed-settings__menu,
  .hero-contact-popover,
  .post-menu,
  .reactions-popover,
  .lightbox__backdrop,
  .lightbox__dialog,
  .hero-menu--mobile[open]::before,
  .hero-menu--mobile .hero-menu__panel {
    animation: none !important;
  }

  :where(
    .feed-list > .post-card:not(.post-card--detail),
    .mobile-trend-item,
    .popular-item,
    .vrs-card__item,
    .sidebar-match-featured,
    .sidebar-match-row,
    .match-feed-card,
    .matches-tournament-item,
    .read-also__card,
    .scroll-top,
    .lightbox__nav,
    .post-media-album__nav,
    .post-media__play,
    .post-media-album__play
  ):hover,
  :where(
    .feed-list > .post-card:not(.post-card--detail),
    .mobile-trend-item,
    .popular-item,
    .vrs-card__item,
    .sidebar-match-featured,
    .sidebar-match-row,
    .match-feed-card,
    .matches-tournament-item,
    .read-also__card,
    .scroll-top,
    .lightbox__nav,
    .post-media-album__nav,
    .post-media__play,
    .post-media-album__play
  ):focus-visible {
    transform: none !important;
  }
}