/* =============================================================================
   QuickCare Design System — UTILITIES   (@layer qc.utilities — highest priority)
   -----------------------------------------------------------------------------
   A small, curated set of single-purpose helpers. Kept deliberately minimal —
   spacing/sizing belong in component CSS via tokens, not a sprawling utility API.
   All qc-namespaced. Highest layer so a helper can intentionally override a
   component within the design system.
   ========================================================================== */
@layer qc.utilities {

  /* Screen-reader-only (accessible visually-hidden). */
  .qc-visually-hidden:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Skip link (WCAG 2.4.1): the first focusable element, visually hidden until
     focused. Hidden via transform (not a negative `top`) so the off-screen distance
     is height-independent — it can never peek at the top if the link's font/size
     changes — and revealing it never triggers layout (no CLS). It rests at
     top:space-2 and is pushed fully above the viewport until :focus brings it back.
     NOTE: the :focus reveal only renders when the browser window has system focus;
     a headless/background window won't match :focus even though .focus() sets
     document.activeElement — that is a test-env limitation, not a CSS bug. */
  .qc-skip-link {
    position: absolute;
    top: var(--qc-space-2);
    left: var(--qc-space-2);
    z-index: var(--qc-z-toast);
    padding: var(--qc-space-2) var(--qc-space-4);
    background: var(--qc-surface);
    color: var(--qc-color-primary);
    border-radius: var(--qc-radius-md);
    box-shadow: var(--qc-shadow-md);
    transform: translateY(calc(-100% - var(--qc-space-2)));
    transition: transform var(--qc-dur-fast) var(--qc-ease-standard);
  }
  .qc-skip-link:focus,
  .qc-skip-link:focus-visible { transform: translateY(0); }

  /* Text helpers */
  .qc-text-center { text-align: center; }
  .qc-text-balance { text-wrap: balance; }
  .qc-text-muted { color: var(--qc-text-muted); }
  .qc-nowrap { white-space: nowrap; }

  /* Display helpers */
  .qc-hidden { display: none !important; }
  .qc-block { display: block; }
  .qc-full-width { width: 100%; }

  /* Show only to one breakpoint family (mobile-first). */
  .qc-desktop-only { display: none; }
  @media (min-width: 1024px) {
    .qc-desktop-only { display: revert; }
    .qc-mobile-only { display: none; }
  }
}