/*
 * This is a manifest-like file, but with Propshaft we load individual files
 * in the layout to ensure correct fingerprinting without a build step.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@layer components {
  /* Skip-navigation link: hidden until it receives keyboard focus, then
     snaps into view at the top-left so keyboard/screen-reader users can
     jump past the navbar straight to <main id="main">. */
  .skip-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    margin: 0.5rem;
    padding: 0.6rem 1.2rem;
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    border-radius: 0.375rem;
    text-decoration: none;
    font-weight: 600;
    transform: translateY(-150%);
    transition: transform 0.15s ease;
  }

  .skip-link:focus {
    transform: translateY(0);
    outline: 2px solid var(--color-on-primary);
    outline-offset: 2px;
  }
}