/* Custom styles for FindThatRecipe.
 *
 * This file is intentionally separate from light.css (which is vendored
 * from https://watercss.kognise.dev and kept unmodified so we can pull
 * upstream updates cleanly). Custom styles live here so the diff against
 * upstream light.css stays empty.
 */

/* Visually hide an element but keep it available to screen readers and
   assistive tech. Use for non-visual labels like form <legend>s and
   descriptive <label>s when a visible label would be redundant. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 'Skip to main content' link. Hidden off-screen by default; slides
   into the top-left of the viewport when focused so keyboard users
   (and screen-reader users) can bypass the repeated nav block on
   every page (WCAG 2.4.1 Bypass Blocks, Level A). */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 100;
}
.skip-link:focus {
  left: 8px;
  top: 8px;
  width: auto;
  height: auto;
  padding: 8px 12px;
  background: #000;
  color: #fff;
  text-decoration: underline;
  border-radius: 4px;
}