/*
 * utilities.css
 *
 * Single-purpose helper classes for spacing, display, overflow, visibility,
 * position, and miscellaneous one-liners.
 *
 * These are intentionally low-specificity so they can be applied anywhere
 * without fighting component or layout styles.
 *
 * Sections:
 *   1. Display
 *   2. Visibility / Accessibility
 *   3. Position
 *   4. Overflow
 *   5. Sizing
 *   6. Spacing (margin / padding)
 *   7. Background & color
 *   8. Border
 *   9. Cursor
 *  10. Pointer events
 *  11. Miscellaneous
 */

/* ── 1. Display ──────────────────────────────────────────────────────── */

.block        { display: block; }
.inline-block { display: inline-block; }
.inline       { display: inline; }
.hidden       { display: none; }
.grid-display { display: grid; }

/* ── 2. Visibility / Accessibility ───────────────────────────────────── */

.invisible    { visibility: hidden; }
.visible      { visibility: visible; }

/* Visually hidden but readable by screen readers */
.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;
}

.not-sr-only {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ── 3. Position ──────────────────────────────────────────────────────── */

.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; top: 0; }

.inset-0  { inset: 0; }
.inset-x-0 { left: 0; right: 0; }
.inset-y-0 { top: 0; bottom: 0; }

/* ── 4. Overflow ──────────────────────────────────────────────────────── */

.overflow-hidden  { overflow: hidden; }
.overflow-auto    { overflow: auto; }
.overflow-scroll  { overflow: scroll; }
.overflow-visible { overflow: visible; }
.overflow-x-hidden{ overflow-x: hidden; }
.overflow-y-auto  { overflow-y: auto; }

/* ── 5. Sizing ───────────────────────────────────────────────────────── */

.w-full  { width: 100%; }
.w-auto  { width: auto; }
.h-full  { height: 100%; }
.h-screen{ height: 100dvh; }
.min-h-screen { min-height: 100dvh; }

/* ── 6. Spacing ──────────────────────────────────────────────────────── */

/* Margin auto */
.mx-auto { margin-inline: auto; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mt-auto { margin-top: auto; }
.mb-auto { margin-bottom: auto; }

/* Margin bottom */
.mb-1  { margin-bottom: var(--space-1); }
.mb-2  { margin-bottom: var(--space-2); }
.mb-3  { margin-bottom: var(--space-3); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }

/* Margin top */
.mt-1  { margin-top: var(--space-1); }
.mt-2  { margin-top: var(--space-2); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }

/* Padding */
.p-0  { padding: 0; }
.p-2  { padding: var(--space-2); }
.p-4  { padding: var(--space-4); }
.p-6  { padding: var(--space-6); }
.p-8  { padding: var(--space-8); }
.p-12 { padding: var(--space-12); }

.px-4  { padding-inline: var(--space-4); }
.px-6  { padding-inline: var(--space-6); }
.px-8  { padding-inline: var(--space-8); }
.px-12 { padding-inline: var(--space-12); }

.py-4  { padding-block: var(--space-4); }
.py-6  { padding-block: var(--space-6); }
.py-8  { padding-block: var(--space-8); }
.py-12 { padding-block: var(--space-12); }

/* ── 7. Background & color ───────────────────────────────────────────── */

.bg-white   { background-color: var(--color-white); }
.bg-black   { background-color: var(--color-black); }
.bg-alt     { background-color: var(--color-bg-alt); }
.bg-brand   { background-color: var(--color-brand-primary); }

/* ── 8. Border ───────────────────────────────────────────────────────── */

.border        { border: var(--border-width) var(--border-style) var(--color-border); }
.border-top    { border-top: var(--border-width) var(--border-style) var(--color-border); }
.border-bottom { border-bottom: var(--border-width) var(--border-style) var(--color-border); }
.border-none   { border: none; }

.rounded-sm   { border-radius: var(--radius-sm); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-xl   { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* ── 9. Cursor ───────────────────────────────────────────────────────── */

.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.cursor-none    { cursor: none; }

/* ── 10. Pointer events ──────────────────────────────────────────────── */

.pointer-none { pointer-events: none; }
.pointer-auto { pointer-events: auto; }

/* ── 11. Miscellaneous ───────────────────────────────────────────────── */

.select-none { user-select: none; }
.select-text { user-select: text; }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.aspect-square    { aspect-ratio: 1 / 1; }
.aspect-video     { aspect-ratio: 16 / 9; }
.aspect-portrait  { aspect-ratio: 3 / 4; }

.object-cover    { object-fit: cover; }
.object-contain  { object-fit: contain; }
.object-center   { object-position: center; }

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-none { box-shadow: none; }

.opacity-0   { opacity: 0; }
.opacity-50  { opacity: 0.5; }
.opacity-75  { opacity: 0.75; }
.opacity-100 { opacity: 1; }

.isolate { isolation: isolate; }

.no-scroll { overflow: hidden; }

/* Honeypot field — off-screen (not display:none, which some bots skip).
   Real users never see or focus it; bots that fill it are rejected server-side. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}