/* =====================================================================
   OSE · Skip link  (styles/components/skip-link.css)
   ---------------------------------------------------------------------
   First focusable element of every page. Visually hidden (clipped, still
   announced) until it receives keyboard focus, then a navy pill appears
   at the top start corner, above the sticky header.

     <body>
       <a class="skip-link" href="#noi-dung">Bỏ qua, đến nội dung chính</a>
       <header>…</header>
       <main id="noi-dung">…</main>

   Position  fixed, so it shows wherever the page is scrolled; inside a
             styleguide .sg-frame it stays in the frame.
   Reveal    clip-path drops on focus; the pill fades in and rises by
             --skip-link-enter-offset (opacity only under reduced motion).
   States    hidden (default) · focus / focus-visible (shown + ring) ·
             hover · active.
   JS        none.
   ===================================================================== */

@layer components {
  .skip-link {
    position: fixed;
    inset-block-start: var(--skip-link-offset);
    inset-inline-start: var(--skip-link-offset);
    z-index: var(--skip-link-z);
    display: inline-flex;
    align-items: center;
    min-block-size: var(--skip-link-min-height);
    padding-inline: var(--skip-link-padding-inline);
    border-radius: var(--skip-link-radius);
    background-color: var(--skip-link-bg);
    color: var(--skip-link-text);
    font-family: var(--skip-link-font-family);
    font-size: var(--skip-link-font-size);
    font-weight: var(--skip-link-font-weight);
    line-height: var(--skip-link-leading);
    text-decoration: none;
    clip-path: inset(50%);
    pointer-events: none;
    opacity: var(--skip-link-opacity-hidden);
    transform: translateY(var(--skip-link-enter-offset));
    transition:
      opacity var(--skip-link-duration) var(--skip-link-ease),
      transform var(--skip-link-duration) var(--skip-link-ease),
      background-color var(--skip-link-duration) var(--skip-link-ease);
  }

  /* :focus covers mouse and programmatic focus too; :focus-visible is
     listed so the styleguide can freeze the revealed state. */
  .skip-link:focus,
  .skip-link:focus-visible {
    clip-path: none;
    pointer-events: auto;
    opacity: var(--skip-link-opacity-visible);
    transform: none;
    box-shadow: var(--skip-link-focus-ring);
  }

  @media (hover: hover) {
    .skip-link:hover {
      background-color: var(--skip-link-bg-hover);
    }
  }

  .skip-link:active {
    background-color: var(--skip-link-bg-active);
  }
}