/* ═══════════════════════════════════════════════════════════════════
   Cronac Give  ·  css/core/utilities.css
   Global helper classes — accessibility, spacing, surface, print.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Screen-reader only ──────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Skip link ───────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--org-primary);
  color: white;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-semi);
  text-decoration: none;
  z-index: var(--z-toast);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: 0;
}

/* ── Hidden attribute guard ──────────────────────────────────────── */
/*
 * Author-CSS display rules can override the browser's UA-stylesheet rule
 * for [hidden]. This guard restores expected behaviour.
 */
[hidden] {
  display: none !important;
}

/* ── Color / text utilities ──────────────────────────────────────── */
.text-muted {
  color: var(--color-text-muted);
}

.u-tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* ── Surface utilities ───────────────────────────────────────────── */
.surface-1 {
  background: var(--color-surface);
}

.surface-2 {
  background: var(--color-surface-2);
}

/* ── Spacing stacks ──────────────────────────────────────────────── */
.stack-xs > * + * { margin-top: var(--space-2); }
.stack-sm > * + * { margin-top: var(--space-3); }
.stack-md > * + * { margin-top: var(--space-5); }
.stack-lg > * + * { margin-top: var(--space-8); }

/* ── Spacing clusters ────────────────────────────────────────────── */
.cluster-xs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.cluster-sm {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.cluster-md {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: center;
}

/* ── Misc helpers ────────────────────────────────────────────────── */
.p-0 {
  padding: 0 !important;
}

/* Responsive line break — used in nav / headers */
.mobile-break {
  display: none;
}

@media (max-width: 640px) {
  .mobile-break {
    display: inline;
  }
}

/* ── Quiet link ──────────────────────────────────────────────────── */
.link--quiet {
  color: var(--color-text-muted);
  text-decoration: none;
}

.link--quiet:hover {
  color: var(--org-primary);
  text-decoration: underline;
}

/* ── Print — global hidden elements ─────────────────────────────── */
@media print {
  .site-header,
  .site-footer,
  .btn,
  .messages-region {
    display: none !important;
  }
}