/* Focus Visible Styles */
:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

/* Skip link: the first focusable thing on every page, visually hidden until
   it takes focus. Without it a keyboard user tabs the brand, the menu toggle
   and every nav link before reaching content, on every page. It is clipped
   rather than display:none / visibility:hidden, both of which would take it
   out of the focus order and defeat the point. */
.skip-link {
  position: absolute;
  inset-inline-start: var(--space-md);
  inset-block-start: var(--space-md);
  z-index: 1000;
  padding: 0.75rem 1.15rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-link);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 10px 30px oklch(0 0 0 / 0.16);
  transform: translateY(calc(-100% - var(--space-md) - 1rem));
  transition: transform var(--transition-fast);
}

/* :focus, not :focus-visible. A skip link is only ever reached by keyboard,
   so there is no mouse-focus ring to suppress, and :focus-visible's heuristic
   does not match programmatic focus - which would leave the link hidden for
   anything that focuses it directly. */
.skip-link:focus {
  transform: translateY(0);
}

/* The skip target itself should never draw a focus ring: focus lands there
   programmatically via the link, not by tabbing. */
#main-content:focus {
  outline: none;
}

/* Selection Styles */
::selection {
  background-color: oklch(0.71 0.16 246 / 0.2);
  color: var(--color-headline);
}

/* Shared shape for the pill-style CTA links/buttons defined independently
   in home.css, listing.css, and recipe-print.css; each keeps its own
   padding, gap, colors, transitions, and hover treatment. */
.home-hero__action,
.listing-hero__action,
.listing-feature__link,
.recipe-print-toolbar__back,
.recipe-print-toolbar__button,
.recipe-print-card__link {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  font-weight: 600;
  text-decoration: none;
}

/* When they prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

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